mky-vent-base/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"
        :pagination="false"
        size="small"
        class="tableW"
        :scroll="{ y: 620 }"
      >
        <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, dsutDltColumns } 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) {
      dsutDltColumns.push({
        title: '操作',
        dataIndex: 'operation',
        width: 100,
        align: 'center',
      });
      if (columns.value.length == 0) columns.value = dsutDltColumns;
    } else {
      if (columns.value.length == 0) columns.value = dsutDltColumns;
    }
  },
  { 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>