粉尘报表分析

src/views/vent/bundle/bundleMonitorTable/bundle-table.data.ts

@@ -41,7 +41,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'CO2(%)',
+    title: 'CO₂(%)',
     children: [
       {
         title: '最大值',
@@ -60,7 +60,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'O2(%)',
+    title: 'O₂(%)',
     children: [
       {
         title: '最小值',
@@ -79,7 +79,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'CH4(%)',
+    title: 'CH₄(%)',
     children: [
       {
         title: '最大值',
@@ -98,7 +98,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'C2H2(PPM)',
+    title: 'C₂H₂(PPM)',
     children: [
       {
         title: '最大值',
@@ -117,7 +117,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'C2H4(PPM)',
+    title: 'C₂H₄(PPM)',
     children: [
       {
         title: '最大值',

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

@@ -10,29 +10,37 @@
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW">
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 300 }" class="tableW">
           <template #bodyCell="{ column, record }">
             <template v-if="column.dataIndex === 'action'">
               <a class="action-link" @click="toDetail(record)">数据分析</a>
             </template>
           </template>
         </a-table>
+        <div id="barChart" class="bar-chart"></div>
       </div>
     </div>
-    <a-modal style="width: 24%; height: 600px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
-      <blastDelta :posMonitor="posMonitor" />
+    <a-modal style="width: 50%; height: 300px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
+      <div class="blast-delta-container">
+        <BlastDelta :posMonitor="posMonitor" style="width: 50%" />
+        <BlastDelta1 :posMonitor="posMonitor" style="width: 50%" />
+      </div>
     </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, shallowRef, reactive } from 'vue';
+import { ref, onMounted, shallowRef, reactive, nextTick } from 'vue';
 import { columns } from './bundle-table.data';
 import { getBundleInfoList, getAllFileList } from './bundle-table.api';
 import customHeader from '/@/components/vent/customHeader.vue';
 // import { blastDelta } from './modal/blastDelta.vue';
-import blastDelta from './modal/blastDelta.vue';
+import BlastDelta from './modal/blastDelta.vue';
+import BlastDelta1 from './modal/blastDelta1.vue';
+import * as echarts from 'echarts';
+import { color } from 'echarts/core';
 let selectList = ref<any[]>([]);
+let jcddArr = ref<any[]>([]);
 let formSearch = reactive({
   pageNum: 1,
   pageSize: 1000,
@@ -44,6 +52,135 @@ let modalVisible = ref(false);
 let selectedFileId = ref<string | null>(null);
 const posMonitor = shallowRef({});
 
+function updateChart(data: any) {
+  const chartDom = document.getElementById('barChart');
+  const myChart = echarts.init(chartDom);
+  const categories = data.map((item: any) => item.jcdd);
+  const c2h2MaxValues = data.map((item: any) => parseFloat(item.c2h2_max));
+  const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
+  const c2h4MaxValues = data.map((item: any) => parseFloat(item.c2h4_max));
+  const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
+  const ch4MaxValues = data.map((item: any) => parseFloat(item.ch4_max));
+  const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
+  const co2MaxValues = data.map((item: any) => parseFloat(item.co2_max));
+  const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
+  const coMaxValues = data.map((item: any) => parseFloat(item.co_max));
+  const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
+  const o2MinValues = data.map((item: any) => parseFloat(item.o2_min));
+  const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
+
+  const option = {
+    title: {
+      text: '束管日报分析',
+      textStyle: {
+        color: '#ffffff', // 设置标题颜色
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+      textStyle: {
+        color: '#ffffff', // 设置 tooltip 字体颜色为白色
+      },
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          show: true,
+          backgroundColor: '#1c4869',
+        },
+      },
+    },
+    legend: {
+      top: 10,
+      textStyle: {
+        color: '#ffffffff',
+      },
+    },
+    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 > 11 ? value.slice(0, 11) + '...' : value; // 截断长标签
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
+      axisLabel: {
+        color: '#ffffff',
+      },
+    },
+    series: [
+      {
+        name: 'C₂H₂ 最大值',
+        data: c2h2MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'C₂H₂ 平均值',
+        data: c2h2AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'C₂H₄ 最大值',
+        data: c2h4MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'C₂H₄ 平均值',
+        data: c2h4AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'CH₄ 最大值',
+        data: ch4MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'CH₄ 平均值',
+        data: ch4AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO₂ 最大值',
+        data: co2MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO₂ 平均值',
+        data: co2AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO 最大值',
+        data: coMaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO 平均值',
+        data: coAveValues,
+        type: 'bar',
+      },
+      {
+        name: 'O₂ 最小值',
+        data: o2MinValues,
+        type: 'bar',
+      },
+      {
+        name: 'O₂ 平均值',
+        data: o2AveValues,
+        type: 'bar',
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+//跳转到爆炸三角形
 function toDetail(record: any) {
   posMonitor.value = record;
   console.log(posMonitor.value, '爆炸三角形');
@@ -56,6 +193,9 @@ async function getTableList(params: any) {
   const content = res.content;
   let contentArr = JSON.parse(content);
   tableData.value = contentArr;
+  nextTick(() => {
+    updateChart(contentArr);
+  });
 }
 
 //获取所有文件列表
@@ -65,6 +205,9 @@ async function getAllFile() {
     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();
@@ -132,7 +275,7 @@ onMounted(() => {
 
 .file-list li:hover,
 .file-list li.selected {
-  background: #26adfc1a;
+  background: #1c4869;
 }
 
 .table-container {
@@ -165,4 +308,14 @@ onMounted(() => {
 :deep(.zxm-select-selection-item) {
   color: #fff !important;
 }
+.blast-delta-container {
+  margin: 50px;
+  display: flex;
+  justify-content: space-between;
+}
+.bar-chart {
+  width: 100%;
+  height: 400px;
+  margin-top: 50px;
+}
 </style>

src/views/vent/bundle/bundleMonitorTable/modal/blastDelta.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="blastDelta">
+    <div style="text-align: center; margin-top: -20px"> 平均值 </div>
     <div ref="coord" class="coords">
       <div class="coord-lineY">
         <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
@@ -45,7 +46,7 @@ let props = defineProps({
   canvasSize: {
     type: Object,
     default: () => {
-      return { width: 348, height: 245 };
+      return { width: 380, height: 245 };
     },
   },
 });
@@ -373,8 +374,10 @@ watch(
   () => props.posMonitor,
   (newV, oldV) => {
     if (newV.btTriBlast) {
-      maxY1.value = parseFloat(newV.o2val);
-      maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
+      maxY1.value = parseFloat(newV.o2_ave);
+      maxX1.value =
+        parseFloat(newV.co_ave) * 0.0001 + parseFloat(newV.ch4_ave) + parseFloat(newV.c2h2_ave) * 0.0001 + parseFloat(newV.c4h4_ave) * 0.0001;
+      console.log(maxX1.value, 'maxX1');
       let btTriBlasts = newV.btTriBlast;
       coordinateA.x = btTriBlasts.A_x;
       coordinateA.y = btTriBlasts.A_y;
@@ -409,7 +412,7 @@ onMounted(() => {
 .blastDelta {
   position: relative;
   width: 100%;
-  height: 450px;
+  height: 320px;
 
   .line-legend {
     position: absolute;

src/views/vent/bundle/bundleMonitorTable/modal/blastDelta1.vue

@@ -0,0 +1,547 @@
+<template>
+  <div class="blastDelta">
+    <div style="text-align: center; margin-top: -20px"> 最小值 </div>
+    <div ref="coord" class="coords">
+      <div class="coord-lineY">
+        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
+      </div>
+      <div class="coord-labelY">
+        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 0 ? maxY : '' }}</div>
+      </div>
+      <div class="coord-lineX">
+        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15" :key="item"></div>
+      </div>
+      <div class="coord-labelX">
+        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind == 14 ? maxX : '' }}</div>
+      </div>
+      <div class="line-AB" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
+        <canvas id="myCanvas1" :width="canvasSize.width" :height="canvasSize.height"></canvas>
+      </div>
+      <!-- <div class="line-legend">
+        <div class="legend-ite" v-for="ite in 4" :key="ite"></div>
+      </div>
+      <div class="legend-name">
+        <div class="item-name" v-for="item in legendList" :key="item">{{ item.name }}</div>
+      </div> -->
+    </div>
+    <div class="line-legend">
+      <div class="legend-box" v-for="(item, index) in legendList" :key="index">
+        <span class="legend-icon"></span>
+        <span class="legend-label">{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, watch, nextTick } from 'vue';
+
+let props = defineProps({
+  posMonitor: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  canvasSize: {
+    type: Object,
+    default: () => {
+      return { width: 380, height: 245 };
+    },
+  },
+});
+let coord = ref(null);
+let lengY = ref(0);
+//与x,y轴相交最大值坐标
+let maxY = ref(0);
+let maxX = ref(0);
+let maxY1 = ref(0);
+let maxX1 = ref(0);
+
+//A点坐标
+let coordinateA = reactive({
+  x: 0,
+  y: 0,
+});
+//B点坐标
+let coordinateB = reactive({
+  x: 0,
+  y: 0,
+});
+//E点坐标
+let coordinateE = reactive({
+  x: 0,
+  y: 0,
+});
+//F点坐标
+let coordinateF = reactive({
+  x: 0,
+  y: 0,
+});
+//G点坐标
+let coordinateG = reactive({
+  x: 0,
+  y: 0,
+});
+
+let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
+
+function getAreas() {
+  if (coord.value) {
+    let width = coord.value.offsetWidth;
+    let height = coord.value.offsetHeight;
+    lengY.value = Math.ceil((height - 10) / 10);
+  }
+}
+//根据A,B,E,G等点坐标绘制爆炸三角形
+function getBlast() {
+  maxY.value = getCoordABY(0);
+  // 获取canvas元素
+  let canvas = document.getElementById('myCanvas1');
+  let ctx = canvas.getContext('2d');
+  let scalcY, scalcX;
+  if (coordinateB.x < 50) {
+    maxX.value = 50;
+    scalcY = canvas.height / maxY.value;
+    scalcX = canvas.width / maxX.value;
+  } else {
+    maxX.value = parseInt(coordinateB.x + 10);
+    scalcY = canvas.height / maxY.value;
+    scalcX = canvas.width / maxX.value;
+  }
+  //绘制AB点线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制AE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制BE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制A点与坐标轴连线
+  ctx.beginPath();
+  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制B点c连线
+  ctx.beginPath();
+  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+  //绘制c点与坐标轴连线
+  ctx.beginPath();
+  ctx.moveTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制E,F线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制GE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  let pointData = [
+    {
+      arr: [
+        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+        { x: 0, y: canvas.height - maxY.value * scalcY },
+      ],
+      color: 'rgb(1, 127, 2, .9)',
+    },
+    {
+      arr: [
+        { x: 0, y: canvas.height }, //原点
+        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+      ],
+      color: 'rgb(127, 254, 2, .9)',
+    },
+    {
+      arr: [
+        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+        { x: maxX.value * scalcX, y: canvas.height },
+        { x: maxX.value * scalcX, y: canvas.height - getCoordABY(maxX.value) * scalcY },
+        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+      ],
+      color: 'rgb(255, 255, 0, .9)',
+    },
+    {
+      arr: [
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+      ],
+      color: 'rgb(255, 0, 0, .9)',
+    },
+  ];
+
+  pointData.forEach((item, index) => {
+    ctx.beginPath();
+    ctx.moveTo(item.arr[0].x, item.arr[0].y);
+    item.arr.forEach((items, ind) => {
+      if (ind != 0) {
+        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+      }
+    });
+    ctx.closePath();
+    ctx.fillStyle = item.color;
+    ctx.fill();
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
+
+  // 标记点A
+  ctx.beginPath();
+  ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点B
+  ctx.beginPath();
+  ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点E
+  ctx.beginPath();
+  ctx.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点G
+  ctx.beginPath();
+  ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('G', coordinateG.x * scalcX + 5, canvas.height - coordinateG.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点F
+  ctx.beginPath();
+  ctx.arc(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('F', coordinateF.x * scalcX + 10, canvas.height - coordinateF.y * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点
+  ctx.beginPath();
+  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+  ctx.fillStyle = 'blue';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+}
+//绘制不爆炸三角形
+function getUnblast() {
+  maxY.value = 21;
+  maxX.value = 50;
+  // 获取canvas元素
+  let canvas = document.getElementById('myCanvas1');
+  let ctx = canvas.getContext('2d');
+  let scalcY = canvas.height / maxY.value;
+  let scalcX = canvas.width / maxX.value;
+
+  //绘制AB点线条
+  ctx.beginPath();
+  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  let pointData = [
+    {
+      arr: [
+        { x: 0, y: canvas.height }, //原点
+        { x: 0, y: canvas.height - maxY.value * scalcY }, //A
+        { x: maxX.value * scalcX, y: canvas.height }, //B
+      ],
+      color: 'rgb(127, 254, 2, .9)',
+    },
+  ];
+
+  pointData.forEach((item, index) => {
+    ctx.beginPath();
+    ctx.moveTo(item.arr[0].x, item.arr[0].y);
+    item.arr.forEach((items, ind) => {
+      if (ind != 0) {
+        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+      }
+    });
+    ctx.closePath();
+    ctx.fillStyle = item.color;
+    ctx.fill();
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
+
+  // 标记点A
+  ctx.beginPath();
+  ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('A', 10, canvas.height - maxY.value * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+  // 标记点B
+  ctx.beginPath();
+  ctx.arc(maxX.value * scalcX, canvas.height, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('B', maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点
+  ctx.beginPath();
+  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+  ctx.fillStyle = 'blue';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+}
+//根据横坐标获取直线AB纵坐标
+function getCoordABY(params) {
+  return Math.ceil(
+    ((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params -
+      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) +
+      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+      (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
+  );
+}
+//根据纵坐标获取直线AB横坐标
+function getCoordABX(params1) {
+  return Math.floor(
+    ((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 +
+      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) -
+      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+      (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
+  );
+}
+
+watch(
+  () => props.posMonitor,
+  (newV, oldV) => {
+    if (newV.btTriBlast) {
+      maxY1.value = parseFloat(newV.o2_min);
+      maxX1.value =
+        parseFloat(newV.co_max) * 0.0001 + parseFloat(newV.ch4_max) + parseFloat(newV.c2h2_max) * 0.0001 + parseFloat(newV.c2h4_max) * 0.0001;
+      let btTriBlasts = newV.btTriBlast;
+      coordinateA.x = btTriBlasts.A_x;
+      coordinateA.y = btTriBlasts.A_y;
+      coordinateB.x = btTriBlasts.B_x;
+      coordinateB.y = btTriBlasts.B_y;
+      coordinateE.x = btTriBlasts.E_x;
+      coordinateE.y = btTriBlasts.E_y;
+      coordinateF.x = btTriBlasts.F_x;
+      coordinateF.y = btTriBlasts.F_y;
+      coordinateG.x = btTriBlasts.G_x;
+      coordinateG.y = btTriBlasts.G_y;
+      if (
+        !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
+        (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
+      ) {
+        // 使用 nextTick 为了让 immediate watch 触发时等待组件挂载后执行绘制
+        nextTick(getUnblast);
+      } else {
+        nextTick(getBlast);
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+onMounted(() => {
+  getAreas();
+});
+</script>
+
+<style lang="less" scoped>
+.blastDelta {
+  position: relative;
+  width: 100%;
+  height: 320px;
+
+  .line-legend {
+    position: absolute;
+    left: 50%;
+    top: 20px;
+    width: 75%;
+    height: 20px;
+    transform: translate(-50%, 0);
+    display: flex;
+    justify-content: space-around;
+
+    .legend-box {
+      display: flex;
+
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+
+      &:nth-child(1) {
+        flex: 1;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #7ffe02;
+          margin-right: 5px;
+        }
+      }
+
+      &:nth-child(2) {
+        flex: 1.5;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #017f02;
+          margin-right: 5px;
+        }
+      }
+
+      &:nth-child(3) {
+        flex: 1;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ff0000;
+          margin-right: 5px;
+        }
+      }
+
+      &:nth-child(4) {
+        flex: 1;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ffff00;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+
+  .coords {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 90%;
+    height: 80%;
+    border-left: 1px solid #006c9d;
+    border-bottom: 1px solid #006c9d;
+    transform: translate(-45%, -46%);
+
+    .coord-lineY {
+      position: absolute;
+      left: -5px;
+      top: 10px;
+      width: 5px;
+      height: calc(100% - 10px);
+    }
+
+    .coord-labelY {
+      position: absolute;
+      left: -25px;
+      top: -5px;
+      width: 20px;
+      height: 100%;
+    }
+
+    .coord-lineX {
+      display: flex;
+      position: absolute;
+      bottom: -5px;
+      right: 10px;
+      width: calc(100% - 10px);
+      height: 5px;
+    }
+
+    .coord-labelX {
+      display: flex;
+      justify-content: flex-end;
+      position: absolute;
+      bottom: -25px;
+      left: -5px;
+      width: 100%;
+      height: 20px;
+    }
+
+    .line-AB {
+      position: absolute;
+      left: 0;
+      top: 10px;
+    }
+
+    // .legend-name {
+    //   position: absolute;
+    //   right: 0;
+    //   top: 20px;
+    //   height: 80px;
+
+    //   .item-name {
+    //     height: 20px;
+    //     line-height: 20px;
+    //     font-size: 10px;
+    //     color: #fff;
+    //     letter-spacing: 2px;
+    //   }
+    // }
+  }
+}
+</style>

src/views/vent/bundleSpy/bundleSpyTable/bundleSpy-table.data.ts

@@ -29,14 +29,14 @@ export const columns: BasicColumn[] = [
     align: 'center',
   },
   {
-    title: 'O2(%)',
+    title: 'O₂(%)',
     dataIndex: 'o2_ave',
     key: 'o2_ave',
     width: 100,
     align: 'center',
   },
   {
-    title: 'N2(%)',
+    title: 'N₂(%)',
     dataIndex: 'n2_ave',
     key: 'n2_ave',
     width: 100,
@@ -50,14 +50,14 @@ export const columns: BasicColumn[] = [
     align: 'center',
   },
   {
-    title: 'CO2(%)',
+    title: 'CO₂(%)',
     dataIndex: 'co2_ave',
     key: 'co2_ave',
     width: 100,
     align: 'center',
   },
   {
-    title: 'CH4(%)',
+    title: 'CH₄(%)',
     dataIndex: 'ch4_ave',
     key: 'ch4_ave',
     width: 100,
@@ -71,14 +71,14 @@ export const columns: BasicColumn[] = [
     align: 'center',
   },
   {
-    title: 'C2H4(%)',
+    title: 'C₂H₄(%)',
     dataIndex: 'c2h4_ave',
     key: 'c2h4_ave',
     width: 100,
     align: 'center',
   },
   {
-    title: 'C2H2(%)',
+    title: 'C₂H₂(%)',
     dataIndex: 'c2h2_ave',
     key: 'c2h2_ave',
     width: 100,

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

@@ -10,7 +10,8 @@
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 300 }" class="tableW"> </a-table>
+        <div id="lineChart" class="line-chart"></div>
       </div>
     </div>
   </div>
@@ -21,6 +22,8 @@ import { ref, onMounted, reactive } 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';
+
 let selectList = ref<any[]>([]);
 
 let formSearch = reactive({
@@ -37,8 +40,134 @@ async function getTableList(params: any) {
   const content = res.content;
   let contentArr = JSON.parse(content);
   tableData.value = contentArr;
+  console.log(contentArr, 'contentArr');
+  updateChart(contentArr);
 }
 
+//折线图
+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', // 设置标题颜色
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+      textStyle: {
+        color: '#ffffff', // 设置 tooltip 字体颜色为白色
+      },
+      axisPointer: {
+        label: {
+          show: true,
+          backgroundColor: '#071c44',
+        },
+      },
+    },
+    legend: {
+      top: 10,
+      textStyle: {
+        color: '#ffffffff',
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: categories,
+      splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+      axisLabel: {
+        interval: 0, // 显示所有标签
+        color: '#ffffff',
+        formatter: function (value: string) {
+          return value.length > 15 ? value.slice(0, 15) + '...' : value; // 截断长标签
+        },
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: 'O₂/N₂',
+        max: 100,
+        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 轴字体颜色
+        },
+      },
+    ],
+    series: [
+      {
+        name: 'C₂H₂平均值',
+        data: c2h2AveValues,
+        type: 'line',
+        yAxisIndex: 1,
+      },
+      {
+        name: 'C₂H₄平均值',
+        data: c2h4AveValues,
+        type: 'line',
+        yAxisIndex: 1,
+      },
+      {
+        name: 'CH₄平均值',
+        data: ch4AveValues,
+        yAxisIndex: 1,
+        type: 'line',
+      },
+      {
+        name: 'CO₂平均值',
+        data: co2AveValues,
+        yAxisIndex: 1,
+        type: 'line',
+      },
+      {
+        name: 'CO平均值',
+        data: coAveValues,
+        yAxisIndex: 1,
+        type: 'line',
+      },
+      {
+        name: 'O₂平均值',
+        data: o2AveValues,
+        yAxisIndex: 0,
+        type: 'line',
+      },
+      {
+        name: 'N₂平均值',
+        data: n2AveValues,
+        yAxisIndex: 0,
+        type: 'line',
+      },
+      {
+        name: 'C2H6平均值',
+        data: c2h6AveValues,
+        yAxisIndex: 1,
+        type: 'line',
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
 //获取所有文件列表
 async function getAllFile() {
   let res = await getAllFileList({ type: 'bundleSpy' });
@@ -113,7 +242,7 @@ onMounted(() => {
 
 .file-list li:hover,
 .file-list li.selected {
-  background: #26adfc1a;
+  background: #1c4869;
 }
 
 .table-container {
@@ -146,4 +275,9 @@ onMounted(() => {
 :deep(.zxm-select-selection-item) {
   color: #fff !important;
 }
+.line-chart {
+  width: 100%;
+  height: 400px;
+  margin-top: 50px;
+}
 </style>

src/views/vent/dust/dustMonitorTable/dust-table.data.ts

@@ -128,3 +128,100 @@ export const columns = [
     ],
   },
 ];
+export const fieldMapping = {
+  sc_zcds: '总尘-作业工序-生产(短时间监测浓度，mg/m³)',
+  jx_zcds: '总尘-作业工序-检修(短时间监测浓度，mg/m³)',
+  sc_hcds: '呼尘-作业工序-生产(短时间监测浓度，mg/m³)',
+  jx_hcds: '呼尘-作业工序-检修(短时间监测浓度，mg/m³)',
+  zcjqpj: '总尘(时间加权平均浓度，mg/m³)',
+  hcjqpj: '呼尘(时间加权平均浓度，mg/m³)',
+  zcrxd_ds: '总尘容许浓度(短时间监测浓度，mg/m³)',
+  zcrxd_jqpj: '总尘容许浓度(时间加权平均浓度，mg/m³)',
+  hcrxd_ds: '呼尘容许浓度(短时间监测浓度，mg/m³)',
+  hcrxd_jqpj: '呼尘容许浓度(时间加权平均浓度，mg/m³)',
+};
+
+export const dataColumns = [
+  {
+    title: '监测字段',
+    align: 'center',
+    dataIndex: 'key',
+    key: 'key',
+    width: 200,
+    customRender: ({ text }) => fieldMapping[text] || text,
+  },
+  {
+    title: '最大值',
+    dataIndex: 'value',
+    align: 'center',
+    width: 100,
+    key: 'value',
+  },
+  {
+    title: '工种',
+    width: 100,
+    dataIndex: 'gz',
+    align: 'center',
+    key: 'gz',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '检测地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '粉尘种类',
+    dataIndex: 'fczl',
+    key: 'fczl',
+  },
+];
+
+export const AllDataColumns = [
+  {
+    title: '监测字段',
+    align: 'center',
+    dataIndex: 'key',
+    key: 'key',
+    width: 200,
+    customRender: ({ text }) => fieldMapping[text] || text,
+  },
+  {
+    title: '最大值',
+    dataIndex: 'value',
+    align: 'center',
+    width: 100,
+    key: 'value',
+  },
+  {
+    width: 100,
+    title: '工作场所',
+    dataIndex: 'gzcs',
+    align: 'center',
+    key: 'gzcs',
+  },
+  {
+    title: '工种',
+    width: 100,
+    dataIndex: 'gz',
+    align: 'center',
+    key: 'gz',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '检测地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '粉尘种类',
+    dataIndex: 'fczl',
+    key: 'fczl',
+  },
+];

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

@@ -10,20 +10,46 @@
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 250 }" class="tableW"> </a-table>
+        <div class="tab-container">
+          <a-tabs v-model:activeKey="activeTab">
+            <a-tab-pane key="workplace" class="tab1" tab="监测地点粉尘情况分析">
+              <div class="filter-container">
+                <a-select v-model="selectedWorkplace" @change="workPlaceChange" placeholder="选择工作场所" style="width: 280px; margin: 5px">
+                  <a-select-option v-for="workplace in workplaceList" :key="workplace" :value="workplace">
+                    {{ workplace }}
+                  </a-select-option>
+                </a-select>
+              </div>
+              <a-table :columns="dataColumns" :data-source="filteredResultByWorkplace" size="small" :scroll="{ y: 260 }" class="tableW"></a-table>
+            </a-tab-pane>
+            <a-tab-pane key="overall" class="tab2" tab="当日粉尘情况分析">
+              <a-table :columns="AllDataColumns" :data-source="AllMaxValues" size="small" :scroll="{ y: 300 }" class="tableW"></a-table>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive } from 'vue';
-import { columns } from './dust-table.data';
+import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue';
+import { columns, dataColumns, AllDataColumns } from './dust-table.data';
 import { getDustInfoList, getAllFileList } from './dsut-table.api';
 import customHeader from '/@/components/vent/customHeader.vue';
+import { result } from 'lodash-es';
+// import { nextTick } from 'process';
 
 let tableData = ref<any[]>([]);
 let selectList = ref<any[]>([]);
+let resultByWorkplace = ref<any[]>([]);
+let AllMaxValues = ref<any[]>([]);
+let filteredResultByWorkplace = ref<any[]>([]); //根据工作场所查询的数据
+let workplaceList = ref<any[]>([]); //根据工作场所查询的数据
+let activeTab = ref<string>('workplace');
+let selectedFileId = ref<string | null>(null);
+let selectedWorkplace = ref<string | null>(null);
 
 let formSearch = reactive({
   pageNum: 1,
@@ -31,13 +57,94 @@ let formSearch = reactive({
   fileId: '',
   fileName: '',
 });
-let selectedFileId = ref<string | null>(null);
+
 //获取粉尘监测结果数据
 async function getTableList(params: any) {
   let res = await getDustInfoList({ type: 'smoke', ...params });
   const content = res.content;
   let contentArr = JSON.parse(content);
   tableData.value = contentArr;
+  processTableData(contentArr);
+  if (workplaceList.value.length > 0) {
+    console.log(workplaceList.value, 'workplaceList');
+    selectedWorkplace.value = workplaceList.value[0];
+    workPlaceChange(selectedWorkplace.value);
+  }
+}
+// 处理 tableData 数据
+function processTableData(data: any) {
+  // 根据 gzcs 字段进行分组
+  const groupedData = data.reduce((acc: any, item: any) => {
+    const workplace = item.gzcs;
+    if (!acc[workplace]) {
+      acc[workplace] = [];
+    }
+    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() {
@@ -67,6 +174,11 @@ function getSearch() {
   };
   getTableList(params);
 }
+function workPlaceChange(value: any) {
+  selectedWorkplace.value = value;
+  filteredResultByWorkplace.value = resultByWorkplace.value.filter((item) => item.gzcs === value);
+}
+
 onMounted(() => {
   getTableList({ type: 'smoke' });
   getAllFile().then(() => {
@@ -113,7 +225,7 @@ onMounted(() => {
 
 .file-list li:hover,
 .file-list li.selected {
-  background: #26adfc1a;
+  background: #1c4869;
 }
 
 .table-container {
@@ -122,6 +234,44 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
+.tab-container {
+  display: flex;
+  align-items: center;
+}
+
+.tab-container .ant-tabs {
+  flex-grow: 1;
+}
+
+:deep(.zxm-tabs-nav) {
+  margin: 0 !important;
+  .zxm-tabs-tab {
+    width: 180px;
+    height: 45px;
+    background: url('@/assets/images/defaultbg.png') center no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    margin-right: 10px;
+  }
+  .zxm-tabs-tab-active {
+    width: 180px;
+    position: relative;
+    background: url('@/assets/images/selected.png') center no-repeat;
+    background-size: 100%;
+    .zxm-tabs-tab-btn {
+      color: #fff !important;
+    }
+  }
+  .zxm-tabs-ink-bar {
+    width: 0 !important;
+  }
+  .zxm-tabs-tab + .zxm-tabs-tab {
+    margin: 0 !important;
+  }
+}
+
 .dustMonitor {
   width: 100%;
   height: 100%;