gas-injection/src/views/vent/dust/dustMonitorTable/index.vue

<template>
  <div class="dustMonitor">
    <customHeader>粉尘监测报表分析</customHeader>
    <div class="content-container">
      <div class="file-list">
        <ul>
          <li v-for="item in selectList" :key="item.fileId" :class="{ selected: item.fileId === selectedFileId }" @click="handleFileClick(item)">
            {{ item.fileName }}
          </li>
        </ul>
      </div>
      <div class="table-container">
        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 250 }" class="tableW"> </a-table>
        <div class="tab-container">
          <a-tabs v-model:activeKey="activeTab">
            <a-tab-pane key="workplace" class="tab1" tab="监测地点粉尘情况分析">
              <div class="filter-container">
                <a-select
                  :key="DefaultValue"
                  :default-value="DefaultValue"
                  v-model="selectedWorkplace"
                  @change="workPlaceChange"
                  placeholder="选择工作场所"
                  style="width: 280px; margin: 5px"
                >
                  <a-select-option v-for="workplace in workplaceList" :key="workplace.index" :value="workplace">
                    {{ workplace }}
                  </a-select-option>
                </a-select>
              </div>
              <a-table :columns="dataColumns" :data-source="filteredResultByWorkplace" size="small" :scroll="{ y: 260 }" class="tableW"></a-table>
            </a-tab-pane>
            <a-tab-pane key="overall" class="tab2" tab="当日粉尘情况分析">
              <a-table :columns="AllDataColumns" :data-source="AllMaxValues" size="small" :scroll="{ y: 300 }" class="tableW"></a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue';
import { columns, dataColumns, AllDataColumns } from './dust-table.data';
import { getDustInfoList, getAllFileList } from './dsut-table.api';
import customHeader from '/@/components/vent/customHeader.vue';
import { result } from 'lodash-es';
// import { nextTick } from 'process';

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 activeTab = ref<string>('workplace');
let selectedFileId = ref<string | null>(null);
let selectedWorkplace = ref<string | null>(null);
let DefaultValue = ref<string | null>(null);
let formSearch = reactive({
  pageNum: 1,
  pageSize: 1000,
  fileId: '',
  fileName: '',
});

//获取粉尘监测结果数据
async function getTableList(params: any) {
  let res = await getDustInfoList({ type: 'smoke', ...params });
  const content = res.content;
  let contentArr = JSON.parse(content);
  tableData.value = contentArr;
  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 handleFileClick(item: any) {
  formSearch.fileId = item.fileId;
  formSearch.fileName = item.fileName;
  selectedFileId.value = item.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>
@import '/@/design/theme.less';

.content-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.file-list {
  width: 20%;
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 50px;
  border: 1px solid #99e8ff66;
  background: #27546e1a;
  box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
  -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
  -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
}

.file-list ul {
  list-style: none;
  padding: 0;
}

.file-list li {
  color: #fff;
  padding: 5px;
  cursor: pointer;
}

.file-list li:hover,
.file-list li.selected {
  background: #1c4869;
}

.table-container {
  margin-top: 10px;
  width: 80%;
  box-sizing: border-box;
}

.tab-container {
  display: flex;
  align-items: center;
}

.tab-container .ant-tabs {
  flex-grow: 1;
}

:deep(.zxm-tabs-nav) {
  margin: 0 !important;
  .zxm-tabs-tab {
    width: 180px;
    height: 45px;
    background: url('@/assets/images/defaultbg.png') center no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    font-size: 16px;
    margin-right: 10px;
  }
  .zxm-tabs-tab-active {
    width: 180px;
    position: relative;
    background: url('@/assets/images/selected.png') center no-repeat;
    background-size: 100%;
    .zxm-tabs-tab-btn {
      color: #fff !important;
    }
  }
  .zxm-tabs-ink-bar {
    width: 0 !important;
  }
  .zxm-tabs-tab + .zxm-tabs-tab {
    margin: 0 !important;
  }
}

.dustMonitor {
  width: 100%;
  height: 100%;
  padding: 10px 10px 15px 10px;
  box-sizing: border-box;
  position: relative;
}

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

:deep(.zxm-picker-input > input) {
  color: #fff;
}

:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  border: 1px solid var(--vent-form-item-border) !important;
  background-color: #ffffff00 !important;
}

:deep(.zxm-select-selection-item) {
  color: #fff !important;
}
</style>