页面样式调整

src/views/vent/bundle/bundleMonitorTable/index.vue

@@ -42,362 +42,362 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, shallowRef, reactive, nextTick } from 'vue';
-  import { columns } from './bundle-table.data';
-  import { getBundleInfoList, getAllFileList } from './bundle-table.api';
-  import customHeader from '/@/components/vent/customHeader.vue';
-  // import { blastDelta } from './modal/blastDelta.vue';
-  import BlastDelta from './modal/blastDelta.vue';
-  import BlastDelta1 from './modal/blastDelta1.vue';
-  import * as echarts from 'echarts';
-  import { Progress } from 'ant-design-vue';
-  import 'ant-design-vue/dist/antd.css'; // 引入样式
-  let selectList = ref<any[]>([]);
-  let jcddArr = ref<any[]>([]);
-  let formSearch = reactive({
-    pageNum: 1,
-    pageSize: 1000,
-    fileId: '',
-    fileName: '',
-  });
-  const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
-  const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
-  const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
-  const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
-  const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
-  const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
-  let tableData = ref<any[]>([]);
-  let modalVisible = ref(false);
-  let selectedFileId = ref<string | null>(null);
-  const posMonitor = shallowRef({});
-  function updateChart(data: any) {
-    const chartDom = document.getElementById('barChart');
-    const myChart = echarts.init(chartDom);
-    const categories = data.map((item: any) => item.jcdd);
-    const c2h2MaxValues = data.map((item: any) => parseFloat(item.c2h2_max));
-    const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
-    const c2h4MaxValues = data.map((item: any) => parseFloat(item.c2h4_max));
-    const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
-    const ch4MaxValues = data.map((item: any) => parseFloat(item.ch4_max));
-    const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
-    const co2MaxValues = data.map((item: any) => parseFloat(item.co2_max));
-    const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
-    const coMaxValues = data.map((item: any) => parseFloat(item.co_max));
-    const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
-    const o2MinValues = data.map((item: any) => parseFloat(item.o2_min));
-    const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
+import { ref, onMounted, shallowRef, reactive, nextTick } from 'vue';
+import { columns } from './bundle-table.data';
+import { getBundleInfoList, getAllFileList } from './bundle-table.api';
+import customHeader from '/@/components/vent/customHeader.vue';
+// import { blastDelta } from './modal/blastDelta.vue';
+import BlastDelta from './modal/blastDelta.vue';
+import BlastDelta1 from './modal/blastDelta1.vue';
+import * as echarts from 'echarts';
+import { Progress } from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css'; // 引入样式
+let selectList = ref<any[]>([]);
+let jcddArr = ref<any[]>([]);
+let formSearch = reactive({
+  pageNum: 1,
+  pageSize: 1000,
+  fileId: '',
+  fileName: '',
+});
+const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
+const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
+const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
+const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
+const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
+const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
+let tableData = ref<any[]>([]);
+let modalVisible = ref(false);
+let selectedFileId = ref<string | null>(null);
+const posMonitor = shallowRef({});
+function updateChart(data: any) {
+  const chartDom = document.getElementById('barChart');
+  const myChart = echarts.init(chartDom);
+  const categories = data.map((item: any) => item.jcdd);
+  const c2h2MaxValues = data.map((item: any) => parseFloat(item.c2h2_max));
+  const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
+  const c2h4MaxValues = data.map((item: any) => parseFloat(item.c2h4_max));
+  const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
+  const ch4MaxValues = data.map((item: any) => parseFloat(item.ch4_max));
+  const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
+  const co2MaxValues = data.map((item: any) => parseFloat(item.co2_max));
+  const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
+  const coMaxValues = data.map((item: any) => parseFloat(item.co_max));
+  const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
+  const o2MinValues = data.map((item: any) => parseFloat(item.o2_min));
+  const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
 
-    const option = {
-      title: {
-        text: '束管日报分析',
-        textStyle: {
-          color: '#ffffff', // 设置标题颜色
-        },
-        left: 'center', // 水平居中
-        top: '0', // 设置标题距离顶部的距离
+  const option = {
+    title: {
+      text: '束管日报分析',
+      textStyle: {
+        color: '#ffffff', // 设置标题颜色
       },
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
-        textStyle: {
-          color: '#ffffff', // 设置 tooltip 字体颜色为白色
-        },
-        axisPointer: {
-          type: 'shadow',
-          label: {
-            show: true,
-            backgroundColor: '#1c4869',
-          },
-        },
+      left: 'center', // 水平居中
+      top: '0', // 设置标题距离顶部的距离
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+      textStyle: {
+        color: '#ffffff', // 设置 tooltip 字体颜色为白色
       },
-      legend: {
-        top: '8%',
-        textStyle: {
-          color: '#ffffffff',
-        },
-        width: '80%', // 设置图例的宽度
-        orient: 'horizontal', // 水平布局
-        pageIconColor: '#ffffff', // 设置翻页图标颜色
-        pageTextStyle: {
-          color: '#ffffff', // 设置翻页文字颜色
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          show: true,
+          backgroundColor: '#1c4869',
         },
       },
-      xAxis: {
-        type: 'category',
-        data: categories,
-        splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
-        axisLabel: {
-          interval: 0, // 显示所有标签
-          color: '#ffffff', // 设置 x 轴字体颜色
-          formatter: function (value: string) {
-            return value.length > 8 ? value.slice(0, 8) + '...' : value; // 截断长标签
-          },
-        },
+    },
+    legend: {
+      top: '8%',
+      textStyle: {
+        color: '#ffffffff',
+      },
+      width: '80%', // 设置图例的宽度
+      orient: 'horizontal', // 水平布局
+      pageIconColor: '#ffffff', // 设置翻页图标颜色
+      pageTextStyle: {
+        color: '#ffffff', // 设置翻页文字颜色
       },
-      yAxis: {
-        type: 'value',
-        splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
-        axisLabel: {
-          color: '#ffffff',
+    },
+    xAxis: {
+      type: 'category',
+      data: categories,
+      splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
+      axisLabel: {
+        interval: 0, // 显示所有标签
+        color: '#ffffff', // 设置 x 轴字体颜色
+        formatter: function (value: string) {
+          return value.length > 8 ? value.slice(0, 8) + '...' : value; // 截断长标签
         },
       },
-      grid: {
-        top: '21%', // 设置 grid 距离顶部的距离，增加间隔
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true,
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
+      axisLabel: {
+        color: '#ffffff',
       },
-      series: [
-        {
-          name: 'C₂H₂最大值',
-          data: c2h2MaxValues,
-          type: 'bar',
-        },
-        {
-          name: 'C₂H₂平均值',
-          data: c2h2AveValues,
-          type: 'bar',
-        },
-        {
-          name: 'C₂H₄最大值',
-          data: c2h4MaxValues,
-          type: 'bar',
-        },
-        {
-          name: 'C₂H₄平均值',
-          data: c2h4AveValues,
-          type: 'bar',
-        },
-        {
-          name: 'CH₄最大值',
-          data: ch4MaxValues,
-          type: 'bar',
-        },
-        {
-          name: 'CH₄平均值',
-          data: ch4AveValues,
-          type: 'bar',
-        },
-        {
-          name: 'CO₂最大值',
-          data: co2MaxValues,
-          type: 'bar',
-        },
-        {
-          name: 'CO₂平均值',
-          data: co2AveValues,
-          type: 'bar',
-        },
-        {
-          name: 'CO最大值',
-          data: coMaxValues,
-          type: 'bar',
-        },
-        {
-          name: 'CO平均值',
-          data: coAveValues,
-          type: 'bar',
-        },
-        {
-          name: 'O₂最小值',
-          data: o2MinValues,
-          type: 'bar',
-        },
-        {
-          name: 'O₂平均值',
-          data: o2AveValues,
-          type: 'bar',
-        },
-      ],
-    };
-    myChart.setOption(option);
-  }
-  //跳转到爆炸三角形
-  function toDetail(record: any) {
-    posMonitor.value = record;
-    modalVisible.value = true;
-  }
-  //获取束管日报
-  async function getTableList(params: any) {
-    let res = await getBundleInfoList({ type: 'bundle', ...params });
-    const content = res.content;
-    let contentArr = JSON.parse(content);
-    latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化阶段（潜伏期）').length;
-    selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化阶段（自热期）').length;
-    combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化阶段（燃烧期）').length;
-    const total = contentArr.length;
-    latentPercent.value = (latentCount.value / total) * 100;
-    selfHeatingPercent.value = (selfHeatingCount.value / total) * 100;
-    combustionPercent.value = (combustionCount.value / total) * 100;
-    tableData.value = contentArr;
-    nextTick(() => {
-      updateChart(contentArr);
-    });
-  }
+    },
+    grid: {
+      top: '21%', // 设置 grid 距离顶部的距离，增加间隔
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    series: [
+      {
+        name: 'C₂H₂最大值',
+        data: c2h2MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'C₂H₂平均值',
+        data: c2h2AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'C₂H₄最大值',
+        data: c2h4MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'C₂H₄平均值',
+        data: c2h4AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'CH₄最大值',
+        data: ch4MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'CH₄平均值',
+        data: ch4AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO₂最大值',
+        data: co2MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO₂平均值',
+        data: co2AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO最大值',
+        data: coMaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO平均值',
+        data: coAveValues,
+        type: 'bar',
+      },
+      {
+        name: 'O₂最小值',
+        data: o2MinValues,
+        type: 'bar',
+      },
+      {
+        name: 'O₂平均值',
+        data: o2AveValues,
+        type: 'bar',
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+//跳转到爆炸三角形
+function toDetail(record: any) {
+  posMonitor.value = record;
+  modalVisible.value = true;
+}
+//获取束管日报
+async function getTableList(params: any) {
+  let res = await getBundleInfoList({ type: 'bundle', ...params });
+  const content = res.content;
+  let contentArr = JSON.parse(content);
+  latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化阶段（潜伏期）').length;
+  selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化阶段（自热期）').length;
+  combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化阶段（燃烧期）').length;
+  const total = contentArr.length;
+  latentPercent.value = (latentCount.value / total) * 100;
+  selfHeatingPercent.value = (selfHeatingCount.value / total) * 100;
+  combustionPercent.value = (combustionCount.value / total) * 100;
+  tableData.value = contentArr;
+  nextTick(() => {
+    updateChart(contentArr);
+  });
+}
 
-  //获取所有文件列表
-  async function getAllFile() {
-    let res = await getAllFileList({ type: 'bundle' });
-    selectList.value = res.records.map((item: any) => ({
-      fileId: item.fileId,
-      fileName: item.fileName,
-    }));
-    jcddArr.value = res.records.map((item: any) => ({
-      fileId: item.jcdd,
-    }));
+//获取所有文件列表
+async function getAllFile() {
+  let res = await getAllFileList({ type: 'bundle' });
+  selectList.value = res.records.map((item: any) => ({
+    fileId: item.fileId,
+    fileName: item.fileName,
+  }));
+  jcddArr.value = res.records.map((item: any) => ({
+    fileId: item.jcdd,
+  }));
+  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);
+}
+onMounted(() => {
+  getTableList({ type: 'bundle' });
+  getAllFile().then(() => {
     if (selectList.value.length > 0) {
       formSearch.fileId = selectList.value[0].fileId;
+      selectedFileId.value = 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);
-  }
-  onMounted(() => {
-    getTableList({ type: 'bundle' });
-    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';
+@import '/@/design/theme.less';
 
-  .content-container {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    padding-top: 20px;
-  }
+.content-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-top: 54px;
+}
 
-  .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 {
+  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 ul {
+  list-style: none;
+  padding: 0;
+}
 
-  .file-list li {
-    color: #fff;
-    padding: 5px;
-    cursor: pointer;
-  }
+.file-list li {
+  color: #fff;
+  padding: 5px;
+  cursor: pointer;
+}
 
-  .file-list li:hover,
-  .file-list li.selected {
-    background: #1c4869;
-  }
+.file-list li:hover,
+.file-list li.selected {
+  background: #1c4869;
+}
 
-  .table-container {
-    margin-top: 10px;
-    width: 80%;
-    box-sizing: border-box;
-  }
-  .data-container {
-    display: flex;
-    width: 100%;
-    height: 100%;
-  }
+.table-container {
+  margin-top: 10px;
+  width: 80%;
+  box-sizing: border-box;
+}
+.data-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
 
-  .bar-chart {
-    flex: 3; /* 占据 3/4 的空间 */
-    width: 100%;
-    height: 400px;
-  }
+.bar-chart {
+  flex: 3; /* 占据 3/4 的空间 */
+  width: 100%;
+  height: 400px;
+}
 
-  .data-content {
-    flex: 1; /* 占据 1/4 的空间 */
-    height: 400px;
-    display: flex;
-    flex-direction: column; /* 垂直排列进度条 */
-    // align-items: center; /* 水平居中 */
-    margin: 10px;
-    .title {
-      font-size: 18px;
-      font-weight: 600;
-      color: #fff;
-      margin-bottom: 20px;
-    }
-    .explain {
-      color: var(--vent-table-action-link);
-      margin-top: 18px;
-    }
+.data-content {
+  flex: 1; /* 占据 1/4 的空间 */
+  height: 400px;
+  display: flex;
+  flex-direction: column; /* 垂直排列进度条 */
+  // align-items: center; /* 水平居中 */
+  margin: 10px;
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #fff;
+    margin-bottom: 20px;
   }
-
-  .dustMonitor {
-    width: 100%;
-    height: 100%;
-    padding: 10px 10px 15px 10px;
-    box-sizing: border-box;
-    position: relative;
+  .explain {
+    color: var(--vent-table-action-link);
+    margin-top: 18px;
   }
+}
 
-  .yellow-progress .ant-progress-bg {
-    background-color: yellow !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;
-  }
+.yellow-progress .ant-progress-bg {
+  background-color: yellow !important;
+}
 
-  :deep(.zxm-picker-input > input) {
-    color: #fff;
-  }
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #91e9fe !important;
+}
 
-  :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-picker-input > input) {
+  color: #fff;
+}
 
-  :deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
-  .blast-delta-container {
-    margin: 50px;
-    display: flex;
-    justify-content: space-between;
-  }
-  .progress {
-    width: 100%;
-    height: 20px;
-    margin-top: 10px;
-  }
-  .progress-label {
-    margin-top: 20px;
-    text-align: left;
-    margin-bottom: 5px;
-    color: #fff;
-  }
-  ::deep .progress-text {
-    color: #fff !important; /* 自定义百分比文字颜色 */
-  }
+: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;
+}
+.blast-delta-container {
+  margin: 50px;
+  display: flex;
+  justify-content: space-between;
+}
+.progress {
+  width: 100%;
+  height: 20px;
+  margin-top: 10px;
+}
+.progress-label {
+  margin-top: 20px;
+  text-align: left;
+  margin-bottom: 5px;
+  color: #fff;
+}
+::deep .progress-text {
+  color: #fff !important; /* 自定义百分比文字颜色 */
+}
 </style>

src/views/vent/bundleSpy/bundleSpyTable/index.vue

@@ -274,6 +274,7 @@ onMounted(() => {
   display: flex;
   width: 100%;
   height: 100%;
+  padding-top: 54px;
 }
 
 .file-list {

src/views/vent/dust/dustMonitorTable/index.vue

@@ -41,266 +41,267 @@
 </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';
+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: '',
-  });
+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);
-    }
+//获取粉尘监测结果数据
+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 数据
+function processTableData(data: any) {
+  // 根据 gzcs 字段进行分组
+  const groupedData = data.reduce((acc: any, item: any) => {
+    const workplace = item.gzcs;
+    if (!acc[workplace]) {
+      acc[workplace] = [];
     }
-    // 筛选整个 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: '' },
+    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 },
     ];
-    data.forEach((item: any) => {
-      overallMaxValues.forEach((maxValue) => {
+
+    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;
-          maxValue.gzcs = item.gzcs;
         }
       });
     });
 
-    AllMaxValues.value = overallMaxValues;
+    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();
   }
-  //获取所有文件列表
-  async function getAllFile() {
-    let res = await getAllFileList({ type: 'smoke' });
-    selectList.value = res.records.map((item: any) => ({
-      fileId: item.fileId,
-      fileName: item.fileName,
-    }));
+}
+//查询
+// 处理文件点击事件
+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();
     }
-  }
-  //查询
-  // 处理文件点击事件
-  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';
+@import '/@/design/theme.less';
 
-  .content-container {
-    display: flex;
-    width: 100%;
-    height: 100%;
-  }
+.content-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-top: 54px;
+}
 
-  .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 {
+  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 ul {
+  list-style: none;
+  padding: 0;
+}
 
-  .file-list li {
-    color: #fff;
-    padding: 5px;
-    cursor: pointer;
-  }
+.file-list li {
+  color: #fff;
+  padding: 5px;
+  cursor: pointer;
+}
 
-  .file-list li:hover,
-  .file-list li.selected {
-    background: #1c4869;
-  }
+.file-list li:hover,
+.file-list li.selected {
+  background: #1c4869;
+}
 
-  .table-container {
-    margin-top: 10px;
-    width: 80%;
-    box-sizing: border-box;
-  }
+.table-container {
+  margin-top: 10px;
+  width: 80%;
+  box-sizing: border-box;
+}
+
+.tab-container {
+  display: flex;
+  align-items: center;
+}
 
-  .tab-container {
+.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;
-    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    margin-right: 10px;
   }
-
-  .tab-container .ant-tabs {
-    flex-grow: 1;
+  .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;
+    }
   }
-
-  :deep(.zxm-tabs-nav) {
+  .zxm-tabs-ink-bar {
+    width: 0 !important;
+  }
+  .zxm-tabs-tab + .zxm-tabs-tab {
     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;
-  }
+.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-table-thead > tr > th:last-child) {
+  border-right: 1px solid #91e9fe !important;
+}
 
-  :deep(.zxm-picker-input > input) {
-    color: #fff;
-  }
+: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: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;
-  }
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
 </style>