Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

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', // 设置标题距离顶部的距离
-    },
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
-      textStyle: {
-        color: '#ffffff', // 设置 tooltip 字体颜色为白色
-      },
-      axisPointer: {
-        type: 'shadow',
-        label: {
-          show: true,
-          backgroundColor: '#1c4869',
+    const option = {
+      title: {
+        text: '束管日报分析',
+        textStyle: {
+          color: '#ffffff', // 设置标题颜色
         },
+        left: 'center', // 水平居中
+        top: '0', // 设置标题距离顶部的距离
       },
-    },
-    legend: {
-      top: '8%',
-      textStyle: {
-        color: '#ffffffff',
-      },
-      width: '80%', // 设置图例的宽度
-      orient: 'horizontal', // 水平布局
-      pageIconColor: '#ffffff', // 设置翻页图标颜色
-      pageTextStyle: {
-        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; // 截断长标签
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+        textStyle: {
+          color: '#ffffff', // 设置 tooltip 字体颜色为白色
+        },
+        axisPointer: {
+          type: 'shadow',
+          label: {
+            show: true,
+            backgroundColor: '#1c4869',
+          },
         },
       },
-    },
-    yAxis: {
-      type: 'value',
-      splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
-      axisLabel: {
-        color: '#ffffff',
-      },
-    },
-    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',
+      legend: {
+        top: '8%',
+        textStyle: {
+          color: '#ffffffff',
+        },
+        width: '80%', // 设置图例的宽度
+        orient: 'horizontal', // 水平布局
+        pageIconColor: '#ffffff', // 设置翻页图标颜色
+        pageTextStyle: {
+          color: '#ffffff', // 设置翻页文字颜色
+        },
       },
-      {
-        name: 'CO平均值',
-        data: coAveValues,
-        type: 'bar',
+      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; // 截断长标签
+          },
+        },
       },
-      {
-        name: 'O₂最小值',
-        data: o2MinValues,
-        type: 'bar',
+      yAxis: {
+        type: 'value',
+        splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
+        axisLabel: {
+          color: '#ffffff',
+        },
       },
-      {
-        name: 'O₂平均值',
-        data: o2AveValues,
-        type: 'bar',
+      grid: {
+        top: '21%', // 设置 grid 距离顶部的距离，增加间隔
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
       },
-    ],
-  };
-  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,
-  }));
-  if (selectList.value.length > 0) {
-    formSearch.fileId = selectList.value[0].fileId;
-    getSearch();
+      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);
+    });
   }
-}
-// 处理文件点击事件
-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(() => {
+
+  //获取所有文件列表
+  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;
-      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';
-
-.content-container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  padding-top: 54px;
-}
+  @import '/@/design/theme.less';
 
-.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;
-}
+  .content-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding-top: 54px;
+  }
 
-.file-list ul {
-  list-style: none;
-  padding: 0;
-}
+  .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 li {
-  color: #fff;
-  padding: 5px;
-  cursor: pointer;
-}
+  .file-list ul {
+    list-style: none;
+    padding: 0;
+  }
 
-.file-list li:hover,
-.file-list li.selected {
-  background: #1c4869;
-}
+  .file-list li {
+    color: #fff;
+    padding: 5px;
+    cursor: pointer;
+  }
 
-.table-container {
-  margin-top: 10px;
-  width: 80%;
-  box-sizing: border-box;
-}
-.data-container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
+  .file-list li:hover,
+  .file-list li.selected {
+    background: #1c4869;
+  }
 
-.bar-chart {
-  flex: 3; /* 占据 3/4 的空间 */
-  width: 100%;
-  height: 400px;
-}
+  .table-container {
+    margin-top: 10px;
+    width: 80%;
+    box-sizing: border-box;
+  }
+  .data-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
 
-.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;
+  .bar-chart {
+    flex: 3; /* 占据 3/4 的空间 */
+    width: 100%;
+    height: 400px;
   }
-  .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;
+    }
+    .explain {
+      color: var(--vent-table-action-link);
+      margin-top: 18px;
+    }
   }
-}
 
-.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;
+  }
 
-.yellow-progress .ant-progress-bg {
-  background-color: yellow !important;
-}
+  .yellow-progress .ant-progress-bg {
+    background-color: yellow !important;
+  }
 
-: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;
-}
-.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-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

@@ -41,351 +41,351 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive, shallowRef } from 'vue';
-import { columns } from './bundleSpy-table.data';
-import { getbundleSpyInfoList, getAllFileList } from './bundleSpy-table.api';
-import customHeader from '/@/components/vent/customHeader.vue';
-import * as echarts from 'echarts';
-import BlastDelta from './modal/blastDelta.vue';
-import { Progress } from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.css'; // 引入样式
-let selectList = ref<any[]>([]);
+  import { ref, onMounted, reactive, shallowRef } from 'vue';
+  import { columns } from './bundleSpy-table.data';
+  import { getbundleSpyInfoList, getAllFileList } from './bundleSpy-table.api';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import * as echarts from 'echarts';
+  import BlastDelta from './modal/blastDelta.vue';
+  import { Progress } from 'ant-design-vue';
+  // import 'ant-design-vue/dist/antd.css'; // 引入样式
+  let selectList = 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 selectedFileId = ref<string | null>(null);
-let modalVisible = ref(false);
-const posMonitor = shallowRef({});
-//获取色谱仪报表
-async function getTableList(params: any) {
-  let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...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;
-  updateChart(contentArr);
-}
-//跳转到爆炸三角形
-function toDetail(record: any) {
-  posMonitor.value = record;
-  console.log(posMonitor.value);
-  modalVisible.value = true;
-}
-//折线图
-function updateChart(data: any) {
-  const chartDom = document.getElementById('lineChart');
-  const myChart = echarts.init(chartDom);
-  const categories = data.map((item: any) => item.jcdd);
-  const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
-  const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
-  const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
-  const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
-  const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
-  const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
-  const n2AveValues = data.map((item: any) => parseFloat(item.n2_ave));
-  const c2h6AveValues = data.map((item: any) => parseFloat(item.c2h6_ave));
+  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 selectedFileId = ref<string | null>(null);
+  let modalVisible = ref(false);
+  const posMonitor = shallowRef({});
+  //获取色谱仪报表
+  async function getTableList(params: any) {
+    let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...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;
+    updateChart(contentArr);
+  }
+  //跳转到爆炸三角形
+  function toDetail(record: any) {
+    posMonitor.value = record;
+    console.log(posMonitor.value);
+    modalVisible.value = true;
+  }
+  //折线图
+  function updateChart(data: any) {
+    const chartDom = document.getElementById('lineChart');
+    const myChart = echarts.init(chartDom);
+    const categories = data.map((item: any) => item.jcdd);
+    const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
+    const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
+    const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
+    const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
+    const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
+    const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
+    const n2AveValues = data.map((item: any) => parseFloat(item.n2_ave));
+    const c2h6AveValues = data.map((item: any) => parseFloat(item.c2h6_ave));
 
-  const option = {
-    title: {
-      text: '色谱仪报表分析',
-      textStyle: {
-        color: '#ffffff', // 设置标题颜色
-      },
-      left: 'center', // 水平居中
-      top: '0', // 设置标题距离顶部的距离
-    },
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
-      textStyle: {
-        color: '#ffffff', // 设置 tooltip 字体颜色为白色
-      },
-      axisPointer: {
-        label: {
-          show: true,
-          backgroundColor: '#071c44',
+    const option = {
+      title: {
+        text: '色谱仪报表分析',
+        textStyle: {
+          color: '#ffffff', // 设置标题颜色
         },
+        left: 'center', // 水平居中
+        top: '0', // 设置标题距离顶部的距离
       },
-    },
-    legend: {
-      top: '9%',
-      textStyle: {
-        color: '#ffffffff',
-      },
-      width: '80%', // 设置图例的宽度
-      orient: 'horizontal', // 水平布局
-      pageIconColor: '#ffffff', // 设置翻页图标颜色
-      pageTextStyle: {
-        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 > 12 ? value.slice(0, 12) + '...' : value; // 截断长标签
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+        textStyle: {
+          color: '#ffffff', // 设置 tooltip 字体颜色为白色
+        },
+        axisPointer: {
+          label: {
+            show: true,
+            backgroundColor: '#071c44',
+          },
         },
       },
-    },
-    yAxis: [
-      {
-        type: 'value',
-        name: 'O₂/N₂',
-        max: 100,
-        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
-        axisLabel: {
-          color: '#ffffff',
+      legend: {
+        top: '9%',
+        textStyle: {
+          color: '#ffffffff',
+        },
+        width: '80%', // 设置图例的宽度
+        orient: 'horizontal', // 水平布局
+        pageIconColor: '#ffffff', // 设置翻页图标颜色
+        pageTextStyle: {
+          color: '#ffffff', // 设置翻页文字颜色
         },
       },
-      {
-        type: 'value',
-        name: '其他气体',
-        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+      xAxis: {
+        type: 'category',
+        data: categories,
+        splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
         axisLabel: {
-          color: '#ffffff', // 设置 y 轴字体颜色
+          interval: 0, // 显示所有标签
+          color: '#ffffff', // 设置 x 轴字体颜色
+          formatter: function (value: string) {
+            return value.length > 12 ? value.slice(0, 12) + '...' : value; // 截断长标签
+          },
         },
       },
-    ],
-    grid: {
-      top: '21%', // 设置 grid 距离顶部的距离，增加间隔
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true,
-    },
-    series: [
-      {
-        name: 'C₂H₂平均值',
-        data: c2h2AveValues,
-        type: 'bar',
-        yAxisIndex: 1,
-      },
-      {
-        name: 'C₂H₄平均值',
-        data: c2h4AveValues,
-        type: 'bar',
-        yAxisIndex: 1,
-      },
-      {
-        name: 'CH₄平均值',
-        data: ch4AveValues,
-        yAxisIndex: 1,
-        type: 'bar',
-      },
-      {
-        name: 'CO₂平均值',
-        data: co2AveValues,
-        yAxisIndex: 1,
-        type: 'bar',
-      },
-      {
-        name: 'CO平均值',
-        data: coAveValues,
-        yAxisIndex: 1,
-        type: 'bar',
-      },
-      {
-        name: 'O₂平均值',
-        data: o2AveValues,
-        yAxisIndex: 0,
-        type: 'bar',
-      },
-      {
-        name: 'N₂平均值',
-        data: n2AveValues,
-        yAxisIndex: 0,
-        type: 'bar',
-      },
-      {
-        name: 'C2H6平均值',
-        data: c2h6AveValues,
-        yAxisIndex: 1,
-        type: 'bar',
+      yAxis: [
+        {
+          type: 'value',
+          name: 'O₂/N₂',
+          max: 100,
+          splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+          axisLabel: {
+            color: '#ffffff',
+          },
+        },
+        {
+          type: 'value',
+          name: '其他气体',
+          splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+          axisLabel: {
+            color: '#ffffff', // 设置 y 轴字体颜色
+          },
+        },
+      ],
+      grid: {
+        top: '21%', // 设置 grid 距离顶部的距离，增加间隔
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
       },
-    ],
-  };
-  myChart.setOption(option);
-}
-//获取所有文件列表
-async function getAllFile() {
-  let res = await getAllFileList({ type: 'bundleSpy' });
-  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();
+      series: [
+        {
+          name: 'C₂H₂平均值',
+          data: c2h2AveValues,
+          type: 'bar',
+          yAxisIndex: 1,
+        },
+        {
+          name: 'C₂H₄平均值',
+          data: c2h4AveValues,
+          type: 'bar',
+          yAxisIndex: 1,
+        },
+        {
+          name: 'CH₄平均值',
+          data: ch4AveValues,
+          yAxisIndex: 1,
+          type: 'bar',
+        },
+        {
+          name: 'CO₂平均值',
+          data: co2AveValues,
+          yAxisIndex: 1,
+          type: 'bar',
+        },
+        {
+          name: 'CO平均值',
+          data: coAveValues,
+          yAxisIndex: 1,
+          type: 'bar',
+        },
+        {
+          name: 'O₂平均值',
+          data: o2AveValues,
+          yAxisIndex: 0,
+          type: 'bar',
+        },
+        {
+          name: 'N₂平均值',
+          data: n2AveValues,
+          yAxisIndex: 0,
+          type: 'bar',
+        },
+        {
+          name: 'C2H6平均值',
+          data: c2h6AveValues,
+          yAxisIndex: 1,
+          type: 'bar',
+        },
+      ],
+    };
+    myChart.setOption(option);
   }
-}
-// 处理文件点击事件
-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: 'bundleSpy' });
-  getAllFile().then(() => {
+  //获取所有文件列表
+  async function getAllFile() {
+    let res = await getAllFileList({ type: 'bundleSpy' });
+    selectList.value = res.records.map((item: any) => ({
+      fileId: item.fileId,
+      fileName: item.fileName,
+    }));
     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: 'bundleSpy' });
+    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: 54px;
-}
+  .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;
+  }
 
-.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;
-}
-.data-container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+  .data-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
 
-.line-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;
+  .line-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;
+    }
+  }
+  .progress {
+    width: 100%;
+    height: 20px;
+    margin-top: 10px;
+  }
+  .progress-label {
+    margin-top: 20px;
+    text-align: left;
+    margin-bottom: 5px;
     color: #fff;
-    margin-bottom: 20px;
   }
-  .explain {
-    color: var(--vent-table-action-link);
-    margin-top: 18px;
+  ::deep .progress-text {
+    color: #fff !important; /* 自定义百分比文字颜色 */
+  }
+  .blast-delta-container {
+    margin: 50px;
+  }
+  .yellow-progress .ant-progress-bg {
+    background-color: yellow !important;
   }
-}
-.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; /* 自定义百分比文字颜色 */
-}
-.blast-delta-container {
-  margin: 50px;
-}
-.yellow-progress .ant-progress-bg {
-  background-color: yellow !important;
-}
 
-: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;
+  }
 </style>

src/views/vent/monitorManager/comment/bundleMonitorTable.vue

@@ -23,128 +23,128 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive } from 'vue';
-import { bundleColumns } from './comment.data';
-import { getInfoList, getAllFileList } from './comment.api';
-import 'ant-design-vue/dist/antd.css'; // 引入样式
-let selectList = ref<any[]>([]);
-let jcddArr = ref<any[]>([]);
-let createBy = ref<any[]>([]);
-let createTime = 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 selectedFileId = ref<string | null>(null);
-//获取束管日报
-async function getTableList(params: any) {
-  let res = await getInfoList({ type: 'bundle', ...params });
-  const content = res.content;
-  let contentArr = JSON.parse(content);
-  createBy.value = res.createBy;
-  createTime.value = res.createTime;
-  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;
-}
-
-//获取所有文件列表
-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();
+  import { ref, onMounted, reactive } from 'vue';
+  import { bundleColumns } from './comment.data';
+  import { getInfoList, getAllFileList } from './comment.api';
+  // import 'ant-design-vue/dist/antd.css'; // 引入样式
+  let selectList = ref<any[]>([]);
+  let jcddArr = ref<any[]>([]);
+  let createBy = ref<any[]>([]);
+  let createTime = 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 selectedFileId = ref<string | null>(null);
+  //获取束管日报
+  async function getTableList(params: any) {
+    let res = await getInfoList({ type: 'bundle', ...params });
+    const content = res.content;
+    let contentArr = JSON.parse(content);
+    createBy.value = res.createBy;
+    createTime.value = res.createTime;
+    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;
   }
-}
-//查询
-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(() => {
+
+  //获取所有文件列表
+  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;
-      selectedFileId.value = 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);
+  }
+  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>
-@ventSpace: zxm;
-.dustMonitor {
-  .search-area {
-    margin: 15px;
+  @ventSpace: zxm;
+  .dustMonitor {
+    .search-area {
+      margin: 15px;
 
-    .area-item {
-      display: flex;
-      align-items: center;
+      .area-item {
+        display: flex;
+        align-items: center;
 
-      .item-text {
-        color: #fff;
+        .item-text {
+          color: #fff;
+        }
       }
     }
-  }
 
-  .zxm-picker,
-  .zxm-input {
-    border: 1px solid #3ad8ff77;
-    background-color: #ffffff00;
-    color: #fff;
+    .zxm-picker,
+    .zxm-input {
+      border: 1px solid #3ad8ff77;
+      background-color: #ffffff00;
+      color: #fff;
+    }
   }
-}
 
-:deep(.@{ventSpace}-table-body) {
-  height: auto !important;
+  :deep(.@{ventSpace}-table-body) {
+    height: auto !important;
 
-  tr > td {
-    background: #ffffff00 !important;
-  }
+    tr > td {
+      background: #ffffff00 !important;
+    }
 
-  tr.@{ventSpace}-table-row-selected {
-    td {
-      background: #007cc415 !important;
+    tr.@{ventSpace}-table-row-selected {
+      td {
+        background: #007cc415 !important;
+      }
     }
   }
-}
 
-:deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
-  min-height: 0;
-}
+  :deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
+    min-height: 0;
+  }
 
-:deep(.@{ventSpace}-pagination) {
-  margin-right: 20px !important;
-}
+  :deep(.@{ventSpace}-pagination) {
+    margin-right: 20px !important;
+  }
 
-:deep(.zxm-table-thead > tr > th:last-child) {
-  border-right: 1px solid #91e9fe55 !important;
-}
+  :deep(.zxm-table-thead > tr > th:last-child) {
+    border-right: 1px solid #91e9fe55 !important;
+  }
 </style>

src/views/vent/monitorManager/comment/bundleSpyMonitorTable.vue

@@ -21,125 +21,124 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive } from 'vue';
-import { bundleSpycolumns } from './comment.data';
-import { getInfoList, getAllFileList } from './comment.api';
-import 'ant-design-vue/dist/antd.css'; // 引入样式
-let selectList = ref<any[]>([]);
+  import { ref, onMounted, reactive } from 'vue';
+  import { bundleSpycolumns } from './comment.data';
+  import { getInfoList, getAllFileList } from './comment.api';
+  // import 'ant-design-vue/dist/antd.css'; // 引入样式
+  let selectList = 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 createBy = ref<any[]>([]);
-let createTime = ref<any[]>([]);
-let tableData = ref<any[]>([]);
-let selectedFileId = ref<string | null>(null);
-//获取色谱仪报表
-async function getTableList(params: any) {
-  let res = await getInfoList({ type: 'bundleSpy', ...params });
-  const content = res.content;
-  let contentArr = JSON.parse(content);
-  createBy.value = res.createBy;
-  createTime.value = res.createTime;
-  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;
-}
-//获取所有文件列表
-async function getAllFile() {
-  let res = await getAllFileList({ type: 'bundleSpy' });
-  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();
+  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 createBy = ref<any[]>([]);
+  let createTime = ref<any[]>([]);
+  let tableData = ref<any[]>([]);
+  let selectedFileId = ref<string | null>(null);
+  //获取色谱仪报表
+  async function getTableList(params: any) {
+    let res = await getInfoList({ type: 'bundleSpy', ...params });
+    const content = res.content;
+    let contentArr = JSON.parse(content);
+    createBy.value = res.createBy;
+    createTime.value = res.createTime;
+    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;
   }
-}
-//查询
-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: 'bundleSpy' });
-  getAllFile().then(() => {
+  //获取所有文件列表
+  async function getAllFile() {
+    let res = await getAllFileList({ type: 'bundleSpy' });
+    selectList.value = res.records.map((item: any) => ({
+      fileId: item.fileId,
+      fileName: item.fileName,
+    }));
     if (selectList.value.length > 0) {
       formSearch.fileId = selectList.value[0].fileId;
-      selectedFileId.value = 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);
+  }
+  onMounted(() => {
+    getTableList({ type: 'bundleSpy' });
+    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;
+  @ventSpace: zxm;
+  .dustMonitor {
+    .search-area {
+      margin: 15px;
 
-    .area-item {
-      display: flex;
-      align-items: center;
+      .area-item {
+        display: flex;
+        align-items: center;
 
-      .item-text {
-        color: #fff;
+        .item-text {
+          color: #fff;
+        }
       }
     }
-  }
 
-  .zxm-picker,
-  .zxm-input {
-    border: 1px solid #3ad8ff77;
-    background-color: #ffffff00;
-    color: #fff;
+    .zxm-picker,
+    .zxm-input {
+      border: 1px solid #3ad8ff77;
+      background-color: #ffffff00;
+      color: #fff;
+    }
   }
-}
 
-:deep(.@{ventSpace}-table-body) {
-  height: auto !important;
+  :deep(.@{ventSpace}-table-body) {
+    height: auto !important;
 
-  tr > td {
-    background: #ffffff00 !important;
-  }
+    tr > td {
+      background: #ffffff00 !important;
+    }
 
-  tr.@{ventSpace}-table-row-selected {
-    td {
-      background: #007cc415 !important;
+    tr.@{ventSpace}-table-row-selected {
+      td {
+        background: #007cc415 !important;
+      }
     }
   }
-}
 
-:deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
-  min-height: 0;
-}
+  :deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
+    min-height: 0;
+  }
 
-:deep(.@{ventSpace}-pagination) {
-  margin-right: 20px !important;
-}
+  :deep(.@{ventSpace}-pagination) {
+    margin-right: 20px !important;
+  }
 
-:deep(.zxm-table-thead > tr > th:last-child) {
-  border-right: 1px solid #91e9fe55 !important;
-}
+  :deep(.zxm-table-thead > tr > th:last-child) {
+    border-right: 1px solid #91e9fe55 !important;
+  }
 </style>
-