gas-injection/src/views/vent/monitorManager/comment/dustMonitorTable.vue

<template>
  <div class="dustMonitor">
    <div class="search-area">
      <a-row>
        <a-col :span="12">
          <div class="area-item">
            <div class="item-text">录入时间：</div>
            <span style="width: 240px; color: #fff">{{ createTime }}</span>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="area-item">
            <div class="item-text">录入人员：</div>
            <span style="width: 240px; color: #fff">{{ createBy }}</span>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="content-area">
      <a-table v-if="columns.length > 0" :columns="columns" :data-source="tableData" size="small" class="tableW" :scroll="{ y: 250 }">
        <template #bodyCell="{ column, record }">
          <a v-if="column.dataIndex === 'operation'" class="table-action-link" @click="handlerLocation(record)">定位</a>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue';
  import { dsutColumns } from './comment.data';
  import { getInfoList, getAllFileList } from './comment.api';
  const emit = defineEmits(['locate']);
  const props = defineProps({
    isShowAction: {
      type: Boolean,
      default: false,
    },
  });
  let tableData = ref<any[]>([]);
  let selectList = ref<any[]>([]);
  let resultByWorkplace = ref<any[]>([]);
  let AllMaxValues = ref<any[]>([]);
  let filteredResultByWorkplace = ref<any[]>([]); //根据工作场所查询的数据
  let workplaceList = ref<any[]>([]); //根据工作场所查询的数据
  let selectedFileId = ref<string | null>(null);
  let selectedWorkplace = ref<string | null>(null);
  let DefaultValue = ref<string | null>(null);
  let createBy = ref<any[]>([]);
  let createTime = ref<any[]>([]);
  let formSearch = reactive({
    pageNum: 1,
    pageSize: 1000,
    fileId: '',
    fileName: '',
  });
  const columns = ref([]);
  watch(
    () => props.isShowAction,
    (value) => {
      if (value) {
        dsutColumns.push({
          title: '操作',
          dataIndex: 'operation',
          width: 100,
          align: 'center',
        });
        if (columns.value.length == 0) columns.value = dsutColumns;
      } else {
        if (columns.value.length == 0) columns.value = dsutColumns;
      }
    },
    { immediate: true }
  );
  function handlerLocation(record) {
    emit('locate', record);
  }
  //获取粉尘监测结果数据
  async function getTableList(params: any) {
    let res = await getInfoList({ type: 'smoke', ...params });
    const content = res.content;
    let contentArr = JSON.parse(content);
    tableData.value = contentArr;
    createBy.value = res.createBy;
    createTime.value = res.createTime;
    processTableData(contentArr);
    if (workplaceList.value.length > 0) {
      console.log(workplaceList.value, 'workplaceList');
      DefaultValue.value = workplaceList.value[0];
      workPlaceChange(selectedWorkplace.value);
    }
  }
  // 处理 tableData 数据
  function processTableData(data: any) {
    // 根据 gzcs 字段进行分组
    const groupedData = data.reduce((acc: any, item: any) => {
      const workplace = item.gzcs;
      if (!acc[workplace]) {
        acc[workplace] = [];
      }
      acc[workplace].push(item);
      return acc;
    }, {});

    // 筛选每个工作场所下的最大值
    const result = Object.keys(groupedData).flatMap((workplace) => {
      const items = groupedData[workplace];
      const maxValues = [
        { key: 'sc_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
        { key: 'jx_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
        { key: 'sc_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
        { key: 'jx_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
        { key: 'zcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
        { key: 'hcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
        { key: 'zcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
        { key: 'zcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
        { key: 'hcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
        { key: 'hcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
      ];

      items.forEach((item: any) => {
        maxValues.forEach((maxValue) => {
          if (item[maxValue.key] > maxValue.value) {
            maxValue.value = item[maxValue.key];
            maxValue.gz = item.gz;
            maxValue.jcdd = item.jcdd;
            maxValue.fczl = item.fczl;
          }
        });
      });

      return maxValues;
    });

    resultByWorkplace.value = result;
    workplaceList.value = Array.from(new Set(resultByWorkplace.value.map((item) => item.gzcs)));
    if (workplaceList.value.length > 0) {
      selectedWorkplace.value = workplaceList.value[0];
      workPlaceChange(selectedWorkplace.value);
    }
    // 筛选整个 tableData 下的最大值
    const overallMaxValues = [
      { key: 'sc_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
      { key: 'jx_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
      { key: 'sc_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
      { key: 'jx_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
      { key: 'zcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
      { key: 'hcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
      { key: 'zcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
      { key: 'zcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
      { key: 'hcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
      { key: 'hcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
    ];
    data.forEach((item: any) => {
      overallMaxValues.forEach((maxValue) => {
        if (item[maxValue.key] > maxValue.value) {
          maxValue.value = item[maxValue.key];
          maxValue.gz = item.gz;
          maxValue.jcdd = item.jcdd;
          maxValue.fczl = item.fczl;
          maxValue.gzcs = item.gzcs;
        }
      });
    });

    AllMaxValues.value = overallMaxValues;
  }
  //获取所有文件列表
  async function getAllFile() {
    let res = await getAllFileList({ type: 'smoke' });
    selectList.value = res.records.map((item: any) => ({
      fileId: item.fileId,
      fileName: item.fileName,
    }));
    if (selectList.value.length > 0) {
      formSearch.fileId = selectList.value[0].fileId;
      getSearch();
    }
  }
  //查询
  function getSearch() {
    const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
    const params = {
      fileId: formSearch.fileId,
      fileName: selectedFile ? selectedFile.fileName : '',
    };
    getTableList(params);
  }
  function workPlaceChange(value: any) {
    selectedWorkplace.value = value;
    filteredResultByWorkplace.value = resultByWorkplace.value.filter((item) => item.gzcs === value);
  }

  onMounted(() => {
    getTableList({ type: 'smoke' });
    getAllFile().then(() => {
      if (selectList.value.length > 0) {
        formSearch.fileId = selectList.value[0].fileId;
        selectedFileId.value = selectList.value[0].fileId;
        getSearch();
      }
    });
  });
</script>

<style lang="less" scoped>
  @ventSpace: zxm;
  .dustMonitor {
    .search-area {
      margin: 15px;

      .area-item {
        display: flex;
        align-items: center;

        .item-text {
          color: #fff;
        }
      }
    }

    .zxm-picker,
    .zxm-input {
      border: 1px solid #3ad8ff77;
      background-color: #ffffff00;
      color: #fff;
    }
  }

  :deep(.@{ventSpace}-table-body) {
    height: auto !important;

    tr > td {
      background: #ffffff00 !important;
    }

    tr.@{ventSpace}-table-row-selected {
      td {
        background: #007cc415 !important;
      }
    }
  }

  :deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
    min-height: 0;
  }

  :deep(.@{ventSpace}-pagination) {
    margin-right: 20px !important;
  }

  :deep(.zxm-table-thead > tr > th:last-child) {
    border-right: 1px solid #91e9fe55 !important;
  }
</style>