束管日报 色谱仪 粉尘监测列表显示

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

@@ -41,350 +41,350 @@
 </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', // 设置标题距离顶部的距离
+  const option = {
+    title: {
+      text: '色谱仪报表分析',
+      textStyle: {
+        color: '#ffffff', // 设置标题颜色
       },
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
-        textStyle: {
-          color: '#ffffff', // 设置 tooltip 字体颜色为白色
-        },
-        axisPointer: {
-          label: {
-            show: true,
-            backgroundColor: '#071c44',
-          },
-        },
+      left: 'center', // 水平居中
+      top: '0', // 设置标题距离顶部的距离
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+      textStyle: {
+        color: '#ffffff', // 设置 tooltip 字体颜色为白色
       },
-      legend: {
-        top: '9%',
-        textStyle: {
-          color: '#ffffffff',
+      axisPointer: {
+        label: {
+          show: true,
+          backgroundColor: '#071c44',
         },
-        width: '80%', // 设置图例的宽度
-        orient: 'horizontal', // 水平布局
-        pageIconColor: '#ffffff', // 设置翻页图标颜色
-        pageTextStyle: {
-          color: '#ffffff', // 设置翻页文字颜色
+      },
+    },
+    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; // 截断长标签
         },
       },
-      xAxis: {
-        type: 'category',
-        data: categories,
-        splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: 'O₂/N₂',
+        max: 100,
+        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
         axisLabel: {
-          interval: 0, // 显示所有标签
-          color: '#ffffff', // 设置 x 轴字体颜色
-          formatter: function (value: string) {
-            return value.length > 12 ? value.slice(0, 12) + '...' : value; // 截断长标签
-          },
+          color: '#ffffff',
         },
       },
-      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 轴字体颜色
-          },
+      {
+        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,
       },
-      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);
+    ],
+    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',
+      },
+    ],
+  };
+  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();
   }
-  //获取所有文件列表
-  async function getAllFile() {
-    let res = await getAllFileList({ type: 'bundleSpy' });
-    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);
+}
+onMounted(() => {
+  getTableList({ type: 'bundleSpy' });
+  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: '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%;
-  }
+.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 {
+  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;
-      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;
+.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;
   }
-  ::deep .progress-text {
-    color: #fff !important; /* 自定义百分比文字颜色 */
-  }
-  .blast-delta-container {
-    margin: 50px;
-  }
-  .yellow-progress .ant-progress-bg {
-    background-color: yellow !important;
+  .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;
+}
+::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

@@ -0,0 +1,150 @@
+<template>
+  <div class="dustMonitor">
+    <div class="search-area">
+      <a-row>
+        <a-col :span="12">
+          <div class="area-item">
+            <div class="item-text">录入时间：</div>
+            <span style="width: 240px; color: #fff">{{ createTime }}</span>
+          </div>
+        </a-col>
+        <a-col :span="12">
+          <div class="area-item">
+            <div class="item-text">录入人员：</div>
+            <span style="width: 240px; color: #fff">{{ createBy }}</span>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="content-area">
+      <a-table :columns="bundleColumns" :data-source="tableData" size="small" class="tableW"> </a-table>
+    </div>
+  </div>
+</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();
+  }
+}
+//查询
+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;
+
+    .area-item {
+      display: flex;
+      align-items: center;
+
+      .item-text {
+        color: #fff;
+      }
+    }
+  }
+
+  .zxm-picker,
+  .zxm-input {
+    border: 1px solid #3ad8ff77;
+    background-color: #ffffff00;
+    color: #fff;
+  }
+}
+
+:deep(.@{ventSpace}-table-body) {
+  height: auto !important;
+
+  tr > td {
+    background: #ffffff00 !important;
+  }
+
+  tr.@{ventSpace}-table-row-selected {
+    td {
+      background: #007cc415 !important;
+    }
+  }
+}
+
+:deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
+  min-height: 0;
+}
+
+:deep(.@{ventSpace}-pagination) {
+  margin-right: 20px !important;
+}
+
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #91e9fe55 !important;
+}
+</style>

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="dustMonitor">
+    <div class="search-area">
+      <a-row>
+        <a-col :span="12">
+          <div class="area-item">
+            <div class="item-text">录入时间：</div>
+            <span style="width: 240px; color: #fff">{{ createTime }}</span>
+          </div>
+        </a-col>
+        <a-col :span="12">
+          <div class="area-item">
+            <div class="item-text">录入人员：</div>
+            <span style="width: 240px; color: #fff">{{ createBy }}</span>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="content-area"> <a-table :columns="bundleSpycolumns" :data-source="tableData" size="small" class="tableW" /></div>
+  </div>
+</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[]>([]);
+
+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();
+  }
+}
+//查询
+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;
+
+    .area-item {
+      display: flex;
+      align-items: center;
+
+      .item-text {
+        color: #fff;
+      }
+    }
+  }
+
+  .zxm-picker,
+  .zxm-input {
+    border: 1px solid #3ad8ff77;
+    background-color: #ffffff00;
+    color: #fff;
+  }
+}
+
+:deep(.@{ventSpace}-table-body) {
+  height: auto !important;
+
+  tr > td {
+    background: #ffffff00 !important;
+  }
+
+  tr.@{ventSpace}-table-row-selected {
+    td {
+      background: #007cc415 !important;
+    }
+  }
+}
+
+:deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
+  min-height: 0;
+}
+
+:deep(.@{ventSpace}-pagination) {
+  margin-right: 20px !important;
+}
+
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #91e9fe55 !important;
+}
+</style>
+

src/views/vent/monitorManager/comment/comment.api.ts

@@ -6,7 +6,8 @@ enum Api {
   input = '/safety/ventanalyDeviceInfo/input',
   sysList = '/safety/ventanalyManageSystem/list',
   sysInput = '/safety/ventanalyManageSystem/input',
- 
+  getInfo = '/ventanaly-device/safety/reportLocalData/queryReportData',
+  getFileList = '/ventanaly-device/safety/reportLocalData/list',
 }
 
 /**
@@ -24,3 +25,5 @@ export const updateReportInfo = (params) => defHttp.put({ url: Api.input, params
 
 export const sysList = (params) => defHttp.get({ url: Api.sysList, params });
 export const sysInput = (params) => defHttp.put({ url: Api.sysInput, params });
+export const getInfoList = (params) => defHttp.post({ url: Api.getInfo, params });
+export const getAllFileList = (params) => defHttp.get({ url: Api.getFileList, params });

src/views/vent/monitorManager/comment/comment.data.ts

@@ -1,175 +1,544 @@
 import { BasicColumn } from '/@/components/Table';
 export const gaspatrolColumnsTwo: BasicColumn[] = [
-    {
-        title: '序号',
-        width: 60,
-        align: 'center',
-        customRender: ({ index }: { index: number }) => `${index + 1}`
-    },
-    {
-        title: '地点',
-        dataIndex: 'strInstallPos',
-        key: 'strInstallPos',
-        align: 'center',
-    },
-    {
-        title: '第一次',
-        children: [
-            {
-                title: 'CH4(%)',
-                dataIndex: 'ch4One',
-                key: 'ch4One',
-                align: 'center',
-            },
-            {
-                title: 'CO2(%)',
-                dataIndex: 'co2One',
-                key: 'co2One',
-                align: 'center',
-            },
-            {
-                title: 'CO(ppm)',
-                dataIndex: 'coOne',
-                key: 'coOne',
-                align: 'center',
-            },
-            {
-                title: 'O2(%)',
-                dataIndex: 'o2One',
-                key: 'o2One',
-                align: 'center',
-            },
-            {
-                title: '温度(°C)',
-                dataIndex: 'tOne',
-                key: 'tOne',
-                align: 'center',
-            },
-            {
-                title: '时间',
-                dataIndex: 'timeOne',
-                key: 'timeOne',
-                align: 'center',
-            },
-        ]
-    },
-    {
-        title: '第二次',
-        children: [
-            {
-                title: 'CH4(%)',
-                dataIndex: 'ch4Two',
-                key: 'ch4Two',
-                align: 'center',
-            },
-            {
-                title: 'CO2(%)',
-                dataIndex: 'co2Two',
-                key: 'co2Two',
-                align: 'center',
-            },
-            {
-                title: 'CO(ppm)',
-                dataIndex: 'coTwo',
-                key: 'coTwo',
-                align: 'center',
-            },
-            {
-                title: 'O2(%)',
-                dataIndex: 'o2Two',
-                key: 'o2Two',
-                align: 'center',
-            },
-            {
-                title: '温度(°C)',
-                dataIndex: 'tTwo',
-                key: 'tTwo',
-                align: 'center',
-            },
-            {
-                title: '时间',
-                dataIndex: 'timeTwo',
-                key: 'timeTwo',
-                align: 'center',
-            },
-        ]
-    },
-    {
-        title: '瓦检员',
-        dataIndex: 'checkPerson',
-        key: 'checkPerson',
-        align: 'center',
-    },
-
-    {
-        title: '操作',
-        dataIndex: 'action',
-        width: 120,
-        align: 'center',
-        slots: { customRender: 'action' },
-    },
-];
-export const gaspatrolColumnsOne : BasicColumn[] = [
-    {
-        title: '序号',
-        width: 60,
-        align: 'center',
-        customRender: ({ index }: { index: number }) => `${index + 1}`
-    },
-    {
-        title: '地点',
-        dataIndex: 'strInstallPos',
-        key: 'strInstallPos',
-        align: 'center',
-    },
-    {
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`,
+  },
+  {
+    title: '地点',
+    dataIndex: 'strInstallPos',
+    key: 'strInstallPos',
+    align: 'center',
+  },
+  {
+    title: '第一次',
+    children: [
+      {
         title: 'CH4(%)',
         dataIndex: 'ch4One',
         key: 'ch4One',
         align: 'center',
-    },
-    {
+      },
+      {
         title: 'CO2(%)',
         dataIndex: 'co2One',
         key: 'co2One',
         align: 'center',
-    },
-    {
+      },
+      {
         title: 'CO(ppm)',
         dataIndex: 'coOne',
         key: 'coOne',
         align: 'center',
-    },
-    {
+      },
+      {
         title: 'O2(%)',
         dataIndex: 'o2One',
         key: 'o2One',
         align: 'center',
-    },
-    {
+      },
+      {
         title: '温度(°C)',
         dataIndex: 'tOne',
         key: 'tOne',
         align: 'center',
-    },
-    {
+      },
+      {
         title: '时间',
         dataIndex: 'timeOne',
         key: 'timeOne',
         align: 'center',
-    },
-    {
-        title: '瓦检员',
-        dataIndex: 'checkPerson',
-        key: 'checkPerson',
+      },
+    ],
+  },
+  {
+    title: '第二次',
+    children: [
+      {
+        title: 'CH4(%)',
+        dataIndex: 'ch4Two',
+        key: 'ch4Two',
         align: 'center',
-    },
-    {
-        title: '操作',
-        dataIndex: 'action',
-        width: 200,
+      },
+      {
+        title: 'CO2(%)',
+        dataIndex: 'co2Two',
+        key: 'co2Two',
         align: 'center',
-        slots: { customRender: 'action' },
-    },
-];
+      },
+      {
+        title: 'CO(ppm)',
+        dataIndex: 'coTwo',
+        key: 'coTwo',
+        align: 'center',
+      },
+      {
+        title: 'O2(%)',
+        dataIndex: 'o2Two',
+        key: 'o2Two',
+        align: 'center',
+      },
+      {
+        title: '温度(°C)',
+        dataIndex: 'tTwo',
+        key: 'tTwo',
+        align: 'center',
+      },
+      {
+        title: '时间',
+        dataIndex: 'timeTwo',
+        key: 'timeTwo',
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '瓦检员',
+    dataIndex: 'checkPerson',
+    key: 'checkPerson',
+    align: 'center',
+  },
 
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 120,
+    align: 'center',
+    slots: { customRender: 'action' },
+  },
+];
+export const gaspatrolColumnsOne: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`,
+  },
+  {
+    title: '地点',
+    dataIndex: 'strInstallPos',
+    key: 'strInstallPos',
+    align: 'center',
+  },
+  {
+    title: 'CH4(%)',
+    dataIndex: 'ch4One',
+    key: 'ch4One',
+    align: 'center',
+  },
+  {
+    title: 'CO2(%)',
+    dataIndex: 'co2One',
+    key: 'co2One',
+    align: 'center',
+  },
+  {
+    title: 'CO(ppm)',
+    dataIndex: 'coOne',
+    key: 'coOne',
+    align: 'center',
+  },
+  {
+    title: 'O2(%)',
+    dataIndex: 'o2One',
+    key: 'o2One',
+    align: 'center',
+  },
+  {
+    title: '温度(°C)',
+    dataIndex: 'tOne',
+    key: 'tOne',
+    align: 'center',
+  },
+  {
+    title: '时间',
+    dataIndex: 'timeOne',
+    key: 'timeOne',
+    align: 'center',
+  },
+  {
+    title: '瓦检员',
+    dataIndex: 'checkPerson',
+    key: 'checkPerson',
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 200,
+    align: 'center',
+    slots: { customRender: 'action' },
+  },
+];
+export const dsutColumns: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`,
+  },
+  {
+    title: '工作场所',
+    dataIndex: 'gzcs',
+    key: 'gzcs',
+    width: 130,
+    align: 'center',
+  },
+  {
+    title: '工种',
+    dataIndex: 'gz',
+    key: 'gz',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '监测地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '粉尘种类',
+    dataIndex: 'fczl',
+    key: 'fczl',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '总尘(短时间监测浓度，单位：mg/m³)',
+    align: 'center',
+    children: [
+      {
+        title: '作业工序-生产',
+        dataIndex: 'sc_zcds',
+        key: 'sc_zcds',
+        width: 100,
+        align: 'center',
+      },
+      {
+        title: '作业工序-检修',
+        dataIndex: 'jx_zcds',
+        key: 'jx_zcds',
+        width: 100,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '呼尘(短时间监测浓度，单位：mg/m³)',
+    align: 'center',
+    children: [
+      {
+        title: '作业工序-生产',
+        dataIndex: 'sc_hcds',
+        key: 'sc_hcds',
+        width: 100,
+        align: 'center',
+      },
+      {
+        title: '作业工序-检修',
+        dataIndex: 'jx_hcds',
+        key: 'jx_hcds',
+        width: 100,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '总尘(时间加权平均浓度，单位：mg/m³)',
+    dataIndex: 'zcjqpj',
+    key: 'zcjqpj',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '呼尘(时间加权平均浓度，单位：mg/m³)',
+    dataIndex: 'hcjqpj',
+    key: 'hcjqpj',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '总尘容许浓度(mg/m³)',
+    children: [
+      {
+        title: '短时间监测浓度',
+        dataIndex: 'zcrxd_ds',
+        key: 'zcrxd_ds',
+        width: 100,
+        align: 'center',
+      },
+      {
+        title: '时间加权平均浓度',
+        dataIndex: 'zcrxd_jqpj',
+        key: 'zcrxd_jqpj',
+        width: 100,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '呼尘容许浓度(mg/m³)',
+    children: [
+      {
+        title: '短时间监测浓度',
+        dataIndex: 'hcrxd_ds',
+        key: 'hcrxd_ds',
+        width: 100,
+        align: 'center',
+      },
+      {
+        title: '时间加权平均浓度',
+        dataIndex: 'hcrxd_jqpj',
+        key: 'hcrxd_jqpj',
+        width: 100,
+        align: 'center',
+      },
+    ],
+  },
+];
+export const bundleColumns: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    dataIndex: 'xh',
+    key: 'xh',
+  },
+  {
+    title: '测点名称',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+    width: 130,
+    align: 'center',
+  },
+  {
+    title: '分析次数',
+    dataIndex: 'fxcs',
+    key: 'fxcs',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: 'CO(PPM)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'co_max',
+        key: 'co_max',
+        width: 60,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'co_ave',
+        key: 'co_ave',
+        width: 60,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'CO₂(%)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'co2_max',
+        key: 'co2_max',
+        width: 60,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'co2_ave',
+        key: 'co2_ave',
+        width: 60,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'O₂(%)',
+    children: [
+      {
+        title: '最小值',
+        dataIndex: 'o2_min',
+        key: 'o2_min',
+        width: 60,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'o2_ave',
+        key: 'o2_ave',
+        width: 60,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'CH₄(%)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'ch4_max',
+        key: 'ch4_max',
+        width: 60,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'ch4_ave',
+        key: 'ch4_ave',
+        width: 60,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'C₂H₂(PPM)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'c2h2_max',
+        key: 'c2h2_max',
+        width: 60,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'c2h2_ave',
+        key: 'c2h2_ave',
+        width: 60,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: 'C₂H₄(PPM)',
+    children: [
+      {
+        title: '最大值',
+        dataIndex: 'c2h4_max',
+        key: 'c2h4_max',
+        width: 60,
+        align: 'center',
+      },
+      {
+        title: '平均值',
+        dataIndex: 'c2h4_ave',
+        key: 'c2h4_ave',
+        width: 60,
+        align: 'center',
+      },
+    ],
+  },
+  {
+    title: '煤自燃阶段',
+    dataIndex: 'internalFireWarnLevel',
+    width: 100,
+    align: 'center',
+  },
+];
+export const bundleSpycolumns: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    dataIndex: 'xh',
+    key: 'xh',
+  },
+  {
+    title: '化验编号',
+    dataIndex: 'hybh',
+    key: 'hybh',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '采样地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '取样分析时间',
+    dataIndex: 'qyfxsj',
+    key: 'qyfxsj',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'O₂(%)',
+    dataIndex: 'o2_ave',
+    key: 'o2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'N₂(%)',
+    dataIndex: 'n2_ave',
+    key: 'n2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'CO(%)',
+    dataIndex: 'co_ave',
+    key: 'co_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'CO₂(%)',
+    dataIndex: 'co2_ave',
+    key: 'co2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'CH₄(%)',
+    dataIndex: 'ch4_ave',
+    key: 'ch4_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'C2H6(%)',
+    dataIndex: 'c2h6_ave',
+    key: 'c2h6_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'C₂H₄(%)',
+    dataIndex: 'c2h4_ave',
+    key: 'c2h4_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: 'C₂H₂(%)',
+    dataIndex: 'c2h2_ave',
+    key: 'c2h2_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '总组分含量',
+    dataIndex: 'zzfhl_ave',
+    key: 'zzfhl_ave',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '煤自燃阶段',
+    dataIndex: 'internalFireWarnLevel',
+    width: 100,
+    align: 'center',
+  },
+];

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

@@ -0,0 +1,222 @@
+<template>
+  <div class="dustMonitor">
+    <div class="search-area">
+      <a-row>
+        <a-col :span="12">
+          <div class="area-item">
+            <div class="item-text">录入时间：</div>
+            <span style="width: 240px; color: #fff">{{ createTime }}</span>
+          </div>
+        </a-col>
+        <a-col :span="12">
+          <div class="area-item">
+            <div class="item-text">录入人员：</div>
+            <span style="width: 240px; color: #fff">{{ createBy }}</span>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="content-area"> <a-table :columns="dsutColumns" :data-source="tableData" size="small" class="tableW" /></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue';
+import { dsutColumns } from './comment.data';
+import { getInfoList, getAllFileList } from './comment.api';
+let tableData = ref<any[]>([]);
+let selectList = ref<any[]>([]);
+let resultByWorkplace = ref<any[]>([]);
+let AllMaxValues = ref<any[]>([]);
+let filteredResultByWorkplace = ref<any[]>([]); //根据工作场所查询的数据
+let workplaceList = ref<any[]>([]); //根据工作场所查询的数据
+let selectedFileId = ref<string | null>(null);
+let selectedWorkplace = ref<string | null>(null);
+let DefaultValue = ref<string | null>(null);
+let createBy = ref<any[]>([]);
+let createTime = ref<any[]>([]);
+let formSearch = reactive({
+  pageNum: 1,
+  pageSize: 1000,
+  fileId: '',
+  fileName: '',
+});
+
+//获取粉尘监测结果数据
+async function getTableList(params: any) {
+  let res = await getInfoList({ type: 'smoke', ...params });
+  const content = res.content;
+  let contentArr = JSON.parse(content);
+  tableData.value = contentArr;
+  createBy.value = res.createBy;
+  createTime.value = res.createTime;
+  processTableData(contentArr);
+  if (workplaceList.value.length > 0) {
+    console.log(workplaceList.value, 'workplaceList');
+    DefaultValue.value = workplaceList.value[0];
+    workPlaceChange(selectedWorkplace.value);
+  }
+}
+// 处理 tableData 数据
+function processTableData(data: any) {
+  // 根据 gzcs 字段进行分组
+  const groupedData = data.reduce((acc: any, item: any) => {
+    const workplace = item.gzcs;
+    if (!acc[workplace]) {
+      acc[workplace] = [];
+    }
+    acc[workplace].push(item);
+    return acc;
+  }, {});
+
+  // 筛选每个工作场所下的最大值
+  const result = Object.keys(groupedData).flatMap((workplace) => {
+    const items = groupedData[workplace];
+    const maxValues = [
+      { key: 'sc_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'jx_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'sc_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'jx_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'zcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'hcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'zcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'zcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'hcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'hcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+    ];
+
+    items.forEach((item: any) => {
+      maxValues.forEach((maxValue) => {
+        if (item[maxValue.key] > maxValue.value) {
+          maxValue.value = item[maxValue.key];
+          maxValue.gz = item.gz;
+          maxValue.jcdd = item.jcdd;
+          maxValue.fczl = item.fczl;
+        }
+      });
+    });
+
+    return maxValues;
+  });
+
+  resultByWorkplace.value = result;
+  workplaceList.value = Array.from(new Set(resultByWorkplace.value.map((item) => item.gzcs)));
+  if (workplaceList.value.length > 0) {
+    selectedWorkplace.value = workplaceList.value[0];
+    workPlaceChange(selectedWorkplace.value);
+  }
+  // 筛选整个 tableData 下的最大值
+  const overallMaxValues = [
+    { key: 'sc_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'jx_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'sc_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'jx_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'zcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'hcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'zcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'zcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'hcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'hcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+  ];
+  data.forEach((item: any) => {
+    overallMaxValues.forEach((maxValue) => {
+      if (item[maxValue.key] > maxValue.value) {
+        maxValue.value = item[maxValue.key];
+        maxValue.gz = item.gz;
+        maxValue.jcdd = item.jcdd;
+        maxValue.fczl = item.fczl;
+        maxValue.gzcs = item.gzcs;
+      }
+    });
+  });
+
+  AllMaxValues.value = overallMaxValues;
+}
+//获取所有文件列表
+async function getAllFile() {
+  let res = await getAllFileList({ type: 'smoke' });
+  selectList.value = res.records.map((item: any) => ({
+    fileId: item.fileId,
+    fileName: item.fileName,
+  }));
+  if (selectList.value.length > 0) {
+    formSearch.fileId = selectList.value[0].fileId;
+    getSearch();
+  }
+}
+//查询
+function getSearch() {
+  const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
+  const params = {
+    fileId: formSearch.fileId,
+    fileName: selectedFile ? selectedFile.fileName : '',
+  };
+  getTableList(params);
+}
+function workPlaceChange(value: any) {
+  selectedWorkplace.value = value;
+  filteredResultByWorkplace.value = resultByWorkplace.value.filter((item) => item.gzcs === value);
+}
+
+onMounted(() => {
+  getTableList({ type: 'smoke' });
+  getAllFile().then(() => {
+    if (selectList.value.length > 0) {
+      formSearch.fileId = selectList.value[0].fileId;
+      selectedFileId.value = selectList.value[0].fileId;
+      getSearch();
+    }
+  });
+});
+</script>
+
+<style lang="less" scoped>
+@ventSpace: zxm;
+.dustMonitor {
+  .search-area {
+    margin: 15px;
+
+    .area-item {
+      display: flex;
+      align-items: center;
+
+      .item-text {
+        color: #fff;
+      }
+    }
+  }
+
+  .zxm-picker,
+  .zxm-input {
+    border: 1px solid #3ad8ff77;
+    background-color: #ffffff00;
+    color: #fff;
+  }
+}
+
+:deep(.@{ventSpace}-table-body) {
+  height: auto !important;
+
+  tr > td {
+    background: #ffffff00 !important;
+  }
+
+  tr.@{ventSpace}-table-row-selected {
+    td {
+      background: #007cc415 !important;
+    }
+  }
+}
+
+:deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
+  min-height: 0;
+}
+
+:deep(.@{ventSpace}-pagination) {
+  margin-right: 20px !important;
+}
+
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #91e9fe55 !important;
+}
+</style>

src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -523,10 +523,20 @@ export const haveHandlerArr = [
 
   // 'firemon',
 ]; // table无操作
-export const noWarningArr = ['location', 'vehicle', 'cheliang', 'majorpath', 'gasDayReport', 'gate_linkdlfm']; // 无预警详情的
+export const noWarningArr = [
+  'location',
+  'vehicle',
+  'cheliang',
+  'majorpath',
+  'gasDayReport',
+  'dustDayReport',
+  'bundleDayReport',
+  'bundleSpyDayReport',
+  'gate_linkdlfm',
+]; // 无预警详情的
 export const haveSysDetailArr = ['forcFan', 'pulping']; //有场景详情的
 // export const haveSysDetailArr = ['']; //有场景详情的
 export const noHistoryArr = () =>
   History_Type['type'] == 'remote'
-    ? ['surface_history', 'majorpath', 'gasDayReport', 'gate_linkdlfm']
-    : ['majorpath', 'gasDayReport', 'gate_linkdlfm'];
+    ? ['surface_history', 'majorpath', 'gasDayReport', 'dustDayReport', 'bundleDayReport', 'bundleSpyDayReport', 'gate_linkdlfm']
+    : ['majorpath', 'gasDayReport', 'dustDayReport', 'bundleDayReport', 'bundleSpyDayReport', 'gate_linkdlfm'];

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -1,41 +1,46 @@
 <template>
   <div class="scene-box">
     <!-- <div class="top-header">智能通风管理系统</div> -->
-    <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow }"
-      @click="showTree('treeShow', true)">
+    <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow }" @click="showTree('treeShow', true)">
       <SvgIcon class="is-expansion-icon put-away-icon" size="38" name="expansion" />
       <span class="title">{{ treeNodeTitle }}</span>
     </div>
     <div class="device-select" :class="{ 'device-select-show': treeShow, 'device-select-hide': !treeShow }">
-      <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away"
-        @click="showTree('treeShow', false)" />
+      <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away" @click="showTree('treeShow', false)" />
       <div class="device-select-box">
-        <a-tree :show-line="true" :tree-data="treeData" v-model:selectedKeys="selectedKeys" :autoExpandParent="true"
-          v-model:expandedKeys="expandedKeys" @select="onSelect">
+        <a-tree
+          :show-line="true"
+          :tree-data="treeData"
+          v-model:selectedKeys="selectedKeys"
+          :autoExpandParent="true"
+          v-model:expandedKeys="expandedKeys"
+          @select="onSelect"
+        >
         </a-tree>
       </div>
     </div>
     <!-- 瓦斯巡检弹窗信息 -->
-     <div v-if="deviceType.startsWith('gasDayReport') && activeKey == '1'" class="inspect-info-xj">
+    <div v-if="deviceType.startsWith('gasDayReport') && activeKey == '1'" class="inspect-info-xj">
       <div class="info-xj-title">
         <span>当前巡检进度</span>
-        <span style="margin-left:10px">{{inspectJd || ''}}</span>
+        <span style="margin-left: 10px">{{ inspectJd || '' }}</span>
       </div>
       <div class="info-xj-content">
-        <div class="xj-content-item" v-for="(item,index) in inspectList" :key="index">
+        <div class="xj-content-item" v-for="(item, index) in inspectList" :key="index">
           <div class="content-item-title">{{ item.label }}</div>
           <div class="content-item-val">{{ item.val }}</div>
         </div>
       </div>
-     </div>
-    <div class="location-icon"
+    </div>
+    <div
+      class="location-icon"
       :class="{ 'location-btn-show': !locationSettingShow, 'location-btn-hide': locationSettingShow }"
-      @click="showTree('location', true)">
+      @click="showTree('location', true)"
+    >
       <SvgIcon size="18" name="put-away" />
       <span class="location-text">定位图标显示</span>
     </div>
-    <div class="location-select"
-      :class="{ 'location-select-show': locationSettingShow, 'location-select-hide': !locationSettingShow }">
+    <div class="location-select" :class="{ 'location-select-show': locationSettingShow, 'location-select-hide': !locationSettingShow }">
       <div class="location-select-box">
         <div class="location-top-title" @click="showTree('location', false)">
           <SvgIcon class="is-expansion-icon location-expansion-icon" size="28" name="expansion" />
@@ -59,8 +64,13 @@
         </div>
       </div>
     </div>
-    <div class="tabs-box bottom-tabs-box" :class="{ 'table-hide': !tableShow, 'table-show': tableShow }"
-      style="height: 290px" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
+    <div
+      class="tabs-box bottom-tabs-box"
+      :class="{ 'table-hide': !tableShow, 'table-show': tableShow }"
+      style="height: 290px"
+      @mousedown="setDivHeight($event, 230, scroll, 0)"
+      id="monitorBox"
+    >
       <div :style="`padding: 5px; height: ${scroll.y + 100}px`">
         <div class="to-small">
           <div class="to-home" @click="toHome"></div>
@@ -68,27 +78,55 @@
         </div>
         <div class="device-button-group" v-if="deviceList.length > 0">
           <!-- 关联设备 -->
-          <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }"
-            v-for="(device, index) in deviceList" :key="index" @click="monitorChange(index)">{{ device.deviceName }}
+          <div
+            class="device-button"
+            :class="{ 'device-active': deviceActive == device.deviceType }"
+            v-for="(device, index) in deviceList"
+            :key="index"
+            @click="monitorChange(index)"
+            >{{ device.deviceName }}
           </div>
           <!-- 场景详情进入 -->
-          <div v-if="haveSysDetailArr.find((item) => deviceType.startsWith(item))" class="enter-detail"
-            @click.stop="goDetail()">
+          <div v-if="haveSysDetailArr.find((item) => deviceType.startsWith(item))" class="enter-detail" @click.stop="goDetail()">
             <send-outlined />
             {{ treeNodeTitle }}详情
           </div>
         </div>
         <!-- 进入瓦斯人工巡检历史详情 -->
-         <div v-if="deviceType == 'gasDayReport'">
+        <div v-if="deviceType == 'gasDayReport'">
           <div class="device-button-group">
-            <div v-if="deviceType.startsWith('gasDayReport')" class="enter-detail"
-              @click.stop="goGasDayReport()">
+            <div v-if="deviceType.startsWith('gasDayReport')" class="enter-detail" @click.stop="goGasDayReport()">
               <send-outlined />
               瓦斯人工巡检历史详情
             </div>
           </div>
         </div>
-        
+        <!-- 进入粉尘报表分析详情 -->
+        <div v-if="deviceType == 'dustDayReport'">
+          <div class="device-button-group">
+            <div v-if="deviceType.startsWith('dustDayReport')" class="enter-detail" @click.stop="goDustDayReport()">
+              <send-outlined />
+              粉尘报表分析
+            </div>
+          </div>
+        </div>
+        <div v-if="deviceType == 'bundleDayReport'">
+          <div class="device-button-group">
+            <div v-if="deviceType.startsWith('bundleDayReport')" class="enter-detail" @click.stop="goBundleDayReport()">
+              <send-outlined />
+              束管日报分析
+            </div>
+          </div>
+        </div>
+        <div v-if="deviceType == 'bundleSpyDayReport'">
+          <div class="device-button-group">
+            <div v-if="deviceType.startsWith('bundleSpyDayReport')" class="enter-detail" @click.stop="goBundleSpyDayReport()">
+              <send-outlined />
+              色谱仪报表分析
+            </div>
+          </div>
+        </div>
+
         <div v-if="deviceType == 'gaspatrol'">
           <div class="device-button-group">
             <div class="enter-detail" @click="exportXls()">
@@ -101,16 +139,21 @@
           <FullscreenExitOutlined style="font-size: 18px" />
         </div>
         <!-- 是人员定位表单代码，由于放在tab中，表格对已知刷新，导致表单数据也在刷寻，造成输入一半的中文时会清空输入框的内容，导致的输入不上数据 -->
-        <div v-if="deviceType.startsWith('location') && activeKey == '1'" class="location-form"
-          style="position: absolute; z-index: 9999; top: 50px">
+        <div v-if="deviceType.startsWith('location') && activeKey == '1'" class="location-form" style="position: absolute; z-index: 9999; top: 50px">
           <div class="location-form-item">
             <span class="location-form-label">人员名称:</span>
             <Input style="width: 200px" v-model:value="locationForm.strname" />
           </div>
           <div class="location-form-item">
             <span class="location-form-label">所属部门:</span>
-            <MTreeSelect style="width: 200px" v-model:value="locationForm.department" placeholder="请选择所属部门"
-              api="/monitor/getDepartmentInfo" :virtual="false" :isGetPopupContainer="false" />
+            <MTreeSelect
+              style="width: 200px"
+              v-model:value="locationForm.department"
+              placeholder="请选择所属部门"
+              api="/monitor/getDepartmentInfo"
+              :virtual="false"
+              :isGetPopupContainer="false"
+            />
           </div>
           <div class="location-form-item">
             <span class="location-form-label">分站名称:</span>
@@ -118,60 +161,91 @@
           </div>
         </div>
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
-          <a-tab-pane key="1" :tab="deviceType.startsWith('gasDayReport') ? '当日巡检监测':'实时监测'">
-            <template
-              v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
-              <GroupMonitorTable ref="MonitorDataTable" :dataSource="dataSource" :columnsType="`${deviceType}_monitor`"
-                :scroll="scroll" :isAction="true" :isShowSelect="false">
+          <a-tab-pane
+            key="1"
+            :tab="
+              deviceType.startsWith('gasDayReport')
+                ? '当日巡检监测'
+                : deviceType.startsWith('dustDayReport') ||
+                  deviceType.startsWith('dustDayReport') ||
+                  deviceType.startsWith('bundleDayReport') ||
+                  deviceType.startsWith('bundleSpyDayReport')
+                ? '最新监测报表'
+                : '实时监测'
+            "
+          >
+            <template v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
+              <GroupMonitorTable
+                ref="MonitorDataTable"
+                :dataSource="dataSource"
+                :columnsType="`${deviceType}_monitor`"
+                :scroll="scroll"
+                :isAction="true"
+                :isShowSelect="false"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item))
-                      ? [
-                        {
-                          label: '详情',
-                          onClick: goDetail.bind(null, record),
-                        },
-                        {
-                          label: '定位',
-                          onClick: goLocation.bind(null, record),
-                        },
-                      ]
-                      : [
-                        {
-                          label: '定位',
-                          onClick: goLocation.bind(null, record),
-                        },
-                      ]
-                    " />
+                  <TableAction
+                    :actions="
+                      haveDetailArr.find((item) => deviceType.startsWith(item))
+                        ? [
+                            {
+                              label: '详情',
+                              onClick: goDetail.bind(null, record),
+                            },
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                        : [
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                    "
+                  />
                 </template>
               </GroupMonitorTable>
             </template>
             <template v-else-if="deviceType == 'majorpath' && activeKey == '1'">
-              <a-table :columns="majorColumns" :data-source="dataSource" bordered :scroll="{ y: scroll.y - 30 }"
-                :pagination="false"></a-table>
+              <a-table :columns="majorColumns" :data-source="dataSource" bordered :scroll="{ y: scroll.y - 30 }" :pagination="false"></a-table>
             </template>
             <template v-else-if="deviceType.startsWith('safetymonitor') && activeKey == '1'">
-              <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
-                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
-                title="设备监测" :form-config="formConfig" :scroll="{ y: scroll.y - 110 }">
+              <MonitorTable
+                ref="monitorTable"
+                :columnsType="`${deviceType}_monitor`"
+                :deviceType="deviceType"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :form-config="formConfig"
+                :scroll="{ y: scroll.y - 110 }"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item))
-                      ? [
-                        {
-                          label: '详情',
-                          onClick: goDetail.bind(null, record),
-                        },
-                        {
-                          label: '定位',
-                          onClick: goLocation.bind(null, record),
-                        },
-                      ]
-                      : [
-                        {
-                          label: '定位',
-                          onClick: goLocation.bind(null, record),
-                        },
-                      ]
-                    " />
+                  <TableAction
+                    :actions="
+                      haveDetailArr.find((item) => deviceType.startsWith(item))
+                        ? [
+                            {
+                              label: '详情',
+                              onClick: goDetail.bind(null, record),
+                            },
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                        : [
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                    "
+                  />
                 </template>
                 <template #filterCell="{ column, record }">
                   <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
@@ -187,105 +261,175 @@
               </MonitorTable>
             </template>
             <template v-else-if="deviceType.startsWith('location') && activeKey == '1'">
-              <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
-                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
-                title="设备监测" :scroll="{ y: scroll.y - 110 }" style="margin-top: 60px">
+              <MonitorTable
+                ref="monitorTable"
+                :columnsType="`${deviceType}_monitor`"
+                :deviceType="deviceType"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :scroll="{ y: scroll.y - 110 }"
+                style="margin-top: 60px"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="[
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ]" />
+                  <TableAction
+                    :actions="[
+                      {
+                        label: '定位',
+                        onClick: goLocation.bind(null, record),
+                      },
+                    ]"
+                  />
                 </template>
               </MonitorTable>
             </template>
             <template v-else-if="deviceType.startsWith('vehicle') && activeKey == '1'">
-              <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
-                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
-                title="设备监测" :form-config="vehicleFormConfig" :scroll="{ y: scroll.y - 110 }">
+              <MonitorTable
+                ref="monitorTable"
+                :columnsType="`${deviceType}_monitor`"
+                :deviceType="deviceType"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :form-config="vehicleFormConfig"
+                :scroll="{ y: scroll.y - 110 }"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="[
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ]" />
+                  <TableAction
+                    :actions="[
+                      {
+                        label: '定位',
+                        onClick: goLocation.bind(null, record),
+                      },
+                    ]"
+                  />
                 </template>
               </MonitorTable>
             </template>
             <!-- 瓦斯人工巡检 -->
             <template v-else-if="deviceType.startsWith('gasDayReport') && activeKey == '1'">
-              <gaspatrolTable :addressData="addressData" :personData="personData" :instypeData="instypeData"
-                :classData="classData" :tableData="gaspatrolData" @addressInput="addressInput" @userInput="userInput"
-                @insTypeChange="insTypeChange" @classChange="classChange" @getSearch="getSearch"></gaspatrolTable>
+              <gaspatrolTable
+                :addressData="addressData"
+                :personData="personData"
+                :instypeData="instypeData"
+                :classData="classData"
+                :tableData="gaspatrolData"
+                @addressInput="addressInput"
+                @userInput="userInput"
+                @insTypeChange="insTypeChange"
+                @classChange="classChange"
+                @getSearch="getSearch"
+              ></gaspatrolTable>
+            </template>
+            <!-- 粉尘监测报表-->
+            <template v-else-if="deviceType.startsWith('dustDayReport') && activeKey == '1'">
+              <dustMonitorTable></dustMonitorTable>
+            </template>
+            <template v-else-if="deviceType.startsWith('bundleDayReport') && activeKey == '1'">
+              <bundleMonitorTable></bundleMonitorTable>
+            </template>
+            <template v-else-if="deviceType.startsWith('bundleSpyDayReport') && activeKey == '1'">
+              <bundleSpyMonitorTable></bundleSpyMonitorTable>
             </template>
             <template v-else>
               <!-- 工作面echarts图标 -->
-              <BarAndLine v-if="activeKey == '1' && deviceType == 'surface_history'" class="echarts-line"
-                xAxisPropType="time" :dataSource="surfaceEchartsData" height="300px"
-                :chartsColumns="surfaceChartsColumns" :option="echatsOption" />
-              <MonitorTable v-else-if="activeKey == '1'" ref="monitorTable" :columnsType="`${deviceType}_monitor`"
-                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
-                title="设备监测" :scroll="{ y: scroll.y - 30 }">
+              <BarAndLine
+                v-if="activeKey == '1' && deviceType == 'surface_history'"
+                class="echarts-line"
+                xAxisPropType="time"
+                :dataSource="surfaceEchartsData"
+                height="300px"
+                :chartsColumns="surfaceChartsColumns"
+                :option="echatsOption"
+              />
+              <MonitorTable
+                v-else-if="activeKey == '1'"
+                ref="monitorTable"
+                :columnsType="`${deviceType}_monitor`"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :scroll="{ y: scroll.y - 30 }"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item))
-                      ? [
-                        {
-                          label: '详情',
-                          onClick: goDetail.bind(null, record),
-                        },
-                        {
-                          label: '定位',
-                          onClick: goLocation.bind(null, record),
-                        },
-                      ]
-                      : [
-                        {
-                          label: '定位',
-                          onClick: goLocation.bind(null, record),
-                        },
-                      ]
-                    " />
+                  <TableAction
+                    :actions="
+                      haveDetailArr.find((item) => deviceType.startsWith(item))
+                        ? [
+                            {
+                              label: '详情',
+                              onClick: goDetail.bind(null, record),
+                            },
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                        : [
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                    "
+                  />
                 </template>
                 <template #filterCell="{ column, record }">
                   <template v-if="deviceType.startsWith('gate') || deviceType.startsWith('door')">
-                    <a-tag
-                      v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'"
-                      color="red">正在运行</a-tag>
+                    <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'" color="red"
+                      >正在运行</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == 1"
-                      color="default">关闭</a-tag>
+                      color="default"
+                      >关闭</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '0'"
-                      color="#46C66F">打开</a-tag>
+                      color="#46C66F"
+                      >打开</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '1'"
-                      color="#FF0000">点位异常</a-tag>
-                    <a-tag
-                      v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'"
-                      color="red">正在运行</a-tag>
+                      color="#FF0000"
+                      >点位异常</a-tag
+                    >
+                    <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'" color="red"
+                      >正在运行</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '1'"
-                      color="default">关闭</a-tag>
+                      color="default"
+                      >关闭</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '0'"
-                      color="#46C66F">打开</a-tag>
+                      color="#46C66F"
+                      >打开</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '1'"
-                      color="#FF0000">点位异常</a-tag>
-                    <a-tag
-                      v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'"
-                      color="red">正在运行</a-tag>
-                    <a-tag
-                      v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1"
-                      color="default">关闭</a-tag>
-                    <a-tag
-                      v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'"
-                      color="#46C66F">打开</a-tag>
-                    <a-tag
-                      v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'"
-                      color="#FF0000">点位异常</a-tag>
+                      color="#FF0000"
+                      >点位异常</a-tag
+                    >
+                    <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
+                      >正在运行</a-tag
+                    >
+                    <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
+                      >关闭</a-tag
+                    >
+                    <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'" color="#46C66F"
+                      >打开</a-tag
+                    >
+                    <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'" color="#FF0000"
+                      >点位异常</a-tag
+                    >
                     <template v-if="column.dataIndex === 'doorUse'">
                       <span v-if="record.doorUse == 1" color="default">行车风门</span>
                       <span v-else-if="record.doorUse == 2">行人风门</span>
@@ -294,14 +438,13 @@
                     </template>
                   </template>
                   <template v-else-if="deviceType.startsWith('windrect')">
-                    <a-tag v-if="column.dataIndex === 'sign'"
-                      :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
-                      {{ record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag>
+                    <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
+                      {{ record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag
+                    >
                     <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
-                      <a-tag v-if="record.isRun == -2 || record.isRun == -1"
-                        :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
-                          record.isRun == -2 ? '空闲' : '等待'
-                        }}</a-tag>
+                      <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
+                        record.isRun == -2 ? '空闲' : '等待'
+                      }}</a-tag>
                       <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
                       <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
                     </template>
@@ -319,19 +462,16 @@
                     <a-tag v-if="column.dataIndex === 'stateConn' && record.stateConn == '0'" color="red">断开</a-tag>
                   </template>
                   <template v-else-if="deviceType.startsWith('gaspatrol')">
-                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('正常')"
-                      color="green">{{
-                        record.deviceConnect_str
-                      }}</a-tag>
-                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('断开')"
-                      color="red">{{
-                        record.deviceConnect_str
-                      }}</a-tag>
-                  </template>
-                  <a-tag v-if="column.dataIndex === 'warnFlag'"
-                    :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
-                    {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
+                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('正常')" color="green">{{
+                      record.deviceConnect_str
                     }}</a-tag>
+                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('断开')" color="red">{{
+                      record.deviceConnect_str
+                    }}</a-tag>
+                  </template>
+                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
+                    {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                  >
                   <template v-else-if="column.dataIndex === 'warnLevel'">
                     <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
                     <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
@@ -355,48 +495,80 @@
                 <HistoryBall :dataSource="dataSource"></HistoryBall>
               </template>
               <template v-else>
-                <HistoryTable ref="historyTable" :sysId="systemID" :columns-type="`${deviceType}`"
-                  :device-type="deviceType" designScope="device-history" :scroll="scroll" />
+                <HistoryTable
+                  ref="historyTable"
+                  :sysId="systemID"
+                  :columns-type="`${deviceType}`"
+                  :device-type="deviceType"
+                  designScope="device-history"
+                  :scroll="scroll"
+                />
               </template>
             </div>
           </a-tab-pane>
           <a-tab-pane key="3" tab="报警历史" v-if="!noWarningArr.find((item) => deviceType.startsWith(item))">
             <div class="tab-item">
-              <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm"
+              <AlarmHistoryTable
+                ref="alarmHistoryTable"
+                v-if="activeKey == '3'"
+                :sysId="systemID"
+                columns-type="alarm"
                 :device-type="deviceType"
                 :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID, pageSize: 10000 })"
-                :scroll="scroll" designScope="alarm-history" />
+                :scroll="scroll"
+                designScope="alarm-history"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="操作历史" v-if="haveHandlerArr.find((item) => deviceType.startsWith(item))">
             <div class="tab-item">
-              <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID"
-                columns-type="operator_history" :device-type="deviceType"
+              <HandlerHistoryTable
+                ref="handlerHistoryTable"
+                v-if="activeKey == '4'"
+                :sysId="systemID"
+                columns-type="operator_history"
+                :device-type="deviceType"
                 :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID })"
-                :scroll="scroll" designScope="operator-history" />
+                :scroll="scroll"
+                designScope="operator-history"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
       </div>
     </div>
-    <mainPath v-if="deviceType == 'majorpath'" :dataSource="majorPathEchartsData"
-      style="width: 300px; height: 300px; position: absolute; left: 250px; top: 40px" />
-    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource"
-      :activeID="activeID" />
+    <mainPath
+      v-if="deviceType == 'majorpath'"
+      :dataSource="majorPathEchartsData"
+      style="width: 300px; height: 300px; position: absolute; left: 250px; top: 40px"
+    />
+    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource" :activeID="activeID" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue';
 import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
-import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo, getExportUrl, queryNowGasInsInfo,queryNowGasSta } from './device.api';
+import {
+  list,
+  getDeviceList,
+  getDeviceTypeList,
+  devPosition,
+  getDepartmentInfo,
+  getExportUrl,
+  queryNowGasInsInfo,
+  queryNowGasSta,
+} from './device.api';
 import AlarmHistoryTable from '../../../comment/AlarmHistoryTable.vue';
 import HistoryTable from '../../../comment/HistoryTable.vue';
 import HandlerHistoryTable from '../../../comment/HandlerHistoryTable.vue';
 import MonitorTable from '../../../comment/MonitorTable.vue';
 import GroupMonitorTable from '../../../comment/GroupMonitorTable.vue';
-import gaspatrolTable from '../../../comment/gaspatrolTable.vue'
-import HistoryBall from './modal/history-ball.vue'
+import gaspatrolTable from '../../../comment/gaspatrolTable.vue';
+import dustMonitorTable from '../../../comment/dustMonitorTable.vue';
+import bundleMonitorTable from '../../../comment/bundleMonitorTable.vue';
+import bundleSpyMonitorTable from '../../../comment/bundleSpyMonitorTable.vue';
+import HistoryBall from './modal/history-ball.vue';
 import { TreeProps, message, Progress, Input, Select } from 'ant-design-vue';
 import { TableAction } from '/@/components/Table';
 import { SvgIcon } from '/@/components/Icon';
@@ -426,18 +598,18 @@ import { useGo } from '/@/hooks/web/usePage';
 import { useGlobSetting } from '/@/hooks/setting';
 
 //瓦斯巡检查询参数
-const addressData = ref('')//巡检地点
-const personData = ref('')//巡检员
-const instypeData = ref('')//巡检类型
-const classData = ref('')//巡检班次
-const gaspatrolData = ref<any[]>([])
-const inspectJd=ref<any>('')
-const inspectList=reactive<any[]>([
-  {label:'第一次巡检已检数',val:0},
-  {label:'第一次巡检未检数',val:0},
-  {label:'第二次巡检已检数',val:0},
-  {label:'第二次巡检未检数',val:0},
-])
+const addressData = ref(''); //巡检地点
+const personData = ref(''); //巡检员
+const instypeData = ref(''); //巡检类型
+const classData = ref(''); //巡检班次
+const gaspatrolData = ref<any[]>([]);
+const inspectJd = ref<any>('');
+const inspectList = reactive<any[]>([
+  { label: '第一次巡检已检数', val: 0 },
+  { label: '第一次巡检未检数', val: 0 },
+  { label: '第二次巡检已检数', val: 0 },
+  { label: '第二次巡检未检数', val: 0 },
+]);
 
 const glob = useGlobSetting();
 // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
@@ -448,7 +620,7 @@ type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
 const props = defineProps({
   pageData: {
     type: Object,
-    default: () => { },
+    default: () => {},
   },
 });
 const { handleExportXls } = useMethods();
@@ -625,7 +797,6 @@ function getMonitor(flag?) {
   }
 }
 
-
 async function getDataSource() {
   if (deviceType.value && deviceType.value.startsWith('sys') && systemID.value) {
     const res = await list({ devicetype: 'sys', systemID: systemID.value });
@@ -809,51 +980,49 @@ function goLocation(record) {
 
 //查询当前各班瓦斯巡检信息
 async function queryNowGasInsInfoList() {
-  let res = await queryNowGasInsInfo({ address: addressData.value, userName: personData.value, insType: instypeData.value, class: classData.value })
-  console.log(res, '查询当前各班瓦斯巡检信息')
+  let res = await queryNowGasInsInfo({ address: addressData.value, userName: personData.value, insType: instypeData.value, class: classData.value });
+  console.log(res, '查询当前各班瓦斯巡检信息');
   if (res.length) {
-    gaspatrolData.value = res
+    gaspatrolData.value = res;
   } else {
-    gaspatrolData.value = []
+    gaspatrolData.value = [];
   }
 }
 //巡检地点输入
 let addressInput = (param) => {
-  addressData.value = param
-}
+  addressData.value = param;
+};
 //巡检员输入
 let userInput = (param) => {
-  personData.value = param
-}
+  personData.value = param;
+};
 //巡检类型选项切换
 let insTypeChange = (param) => {
-  instypeData.value = param
- 
-}
+  instypeData.value = param;
+};
 //巡检班次选项切换
 let classChange = (param) => {
-  classData.value = param
-}
+  classData.value = param;
+};
 //查询巡检弹窗信息
-async function getSearch(){
-  if(!instypeData.value){
-    message.warning('请选择巡检类型!')
-  }else if(!classData.value){
+async function getSearch() {
+  if (!instypeData.value) {
+    message.warning('请选择巡检类型!');
+  } else if (!classData.value) {
     message.warning('请选择巡检班次!');
-  }else {
-    let res=await queryNowGasSta({insType:instypeData.value,class:classData.value})
-    console.log(res,'巡检弹窗信息')
-    if(res){
-      inspectJd.value=res.comRate || 0
-      inspectList[0].val=res.finishNum1 || 0
-      inspectList[1].val=res.missNum1 || 0
-      inspectList[2].val=res.finishNum2 || 0
-      inspectList[3].val=res.missNum2 || 0
+  } else {
+    let res = await queryNowGasSta({ insType: instypeData.value, class: classData.value });
+    console.log(res, '巡检弹窗信息');
+    if (res) {
+      inspectJd.value = res.comRate || 0;
+      inspectList[0].val = res.finishNum1 || 0;
+      inspectList[1].val = res.missNum1 || 0;
+      inspectList[2].val = res.finishNum2 || 0;
+      inspectList[3].val = res.missNum2 || 0;
     }
   }
 }
 
-
 function goDetail(record?) {
   debugger;
   if (record) {
@@ -962,7 +1131,18 @@ function goGasDayReport() {
   const newPage = router.resolve({ path: '/gas/gas-report/home' });
   window.open(newPage.href, '_blank');
 }
-
+function goDustDayReport() {
+  const newPage = router.resolve({ path: '/dustDayReport/home' });
+  window.open(newPage.href, '_blank');
+}
+function goBundleDayReport() {
+  const newPage = router.resolve({ path: '/bundleDayReport/home' });
+  window.open(newPage.href, '_blank');
+}
+function goBundleSpyDayReport() {
+  const newPage = router.resolve({ path: '/bundleSpyDayReport/home' });
+  window.open(newPage.href, '_blank');
+}
 function exportXls() {
   handleExportXls('瓦斯巡检记录', getExportUrl, { devicetype: deviceType.value });
 }
@@ -992,9 +1172,9 @@ async function findTreeDataValue(obj) {
       if (item.children.length > 0) {
         findDeviceType(item.children, obj);
       }
-      debugger;
+      // debugger;
       if (obj.deviceType && obj.deviceType.startsWith('sys_')) {
-        debugger;
+        // debugger;
         if (item.type == obj.deviceid) {
           deviceType.value = 'sys';
           systemID.value = obj.deviceid;
@@ -1150,8 +1330,8 @@ onUnmounted(() => {
   if (timer) {
     clearTimeout(timer);
   }
-    timer = undefined;
-  });
+  timer = undefined;
+});
 </script>
 
 <style lang="less" scoped>
@@ -1253,50 +1433,50 @@ onUnmounted(() => {
   pointer-events: auto;
   padding: 20px 10px 30px 10px;
 }
-.inspect-info-xj{
-  position:fixed;
+.inspect-info-xj {
+  position: fixed;
   top: 100px;
   left: 250px;
-  width:320px;
-  height:272px;
-  padding:20px;
-background:url('@/assets/images/inspect-bg.png') no-repeat center;
-background-size:100% 100%;
-box-sizing:border-box;
-.info-xj-title{
-  width:230px;
-  height:36px;
-  line-height:36px;
-padding-left:50px;
-  margin:10px 0px;
-  color:#fff;
-  background:url('@/assets/images/inspect-title.png') no-repeat center;
-  background-size:100% 100%;
-}
-.info-xj-content{
-  display:flex;
-  flex-wrap:wrap;
-  height:calc(100% - 56px);
-  padding:10px 0px;
-  box-sizing:border-box;
-  .xj-content-item{
-    display:flex;
-    flex-direction:column;
-    justify-content:space-around;
-    align-items:center;
-    width:126px;
-    height:67px;
-    margin:7px;
-    color:#fff;
-    padding-bottom:5px;
-    background:url('@/assets/images/inspect-item.png') no-repeat center;
-    .content-item-val{
-      font-family: 'douyuFont';
-      color:#74e9fe;
+  width: 320px;
+  height: 272px;
+  padding: 20px;
+  background: url('@/assets/images/inspect-bg.png') no-repeat center;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  .info-xj-title {
+    width: 230px;
+    height: 36px;
+    line-height: 36px;
+    padding-left: 50px;
+    margin: 10px 0px;
+    color: #fff;
+    background: url('@/assets/images/inspect-title.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+  .info-xj-content {
+    display: flex;
+    flex-wrap: wrap;
+    height: calc(100% - 56px);
+    padding: 10px 0px;
+    box-sizing: border-box;
+    .xj-content-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      width: 126px;
+      height: 67px;
+      margin: 7px;
+      color: #fff;
+      padding-bottom: 5px;
+      background: url('@/assets/images/inspect-item.png') no-repeat center;
+      .content-item-val {
+        font-family: 'douyuFont';
+        color: #74e9fe;
+      }
     }
   }
 }
-}
 
 .is-expansion-icon {
   padding: 5px;
@@ -1928,4 +2108,5 @@ padding-left:50px;
 //   margin-top: 5px !important;
 //   display: flex;
 //   align-items: center;
-// }</style>
+// }
+</style>