1. 预测曲线优化

2. 瓦斯抽采泵动画真实数据对接
3. 束管分析页面优化

src/hooks/system/useCamera.ts

@@ -55,7 +55,7 @@ export function useCamera() {
     if (cameras.length > 0) {
       for (let i = 0; i < cameras.length; i++) {
         const item = cameras[i];
-        if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs') {
+        if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs' || item['devicekind'] === 'HLL') {
           // 从海康平台接口获取视频流
           const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
 

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

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

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

@@ -10,7 +10,7 @@
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 300 }" class="tableW"> </a-table>
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 300 }" class="tableW" />
         <div id="lineChart" class="line-chart"></div>
       </div>
     </div>
@@ -18,266 +18,266 @@
 </template>
 
 <script setup lang="ts">
-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';
+  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 selectList = ref<any[]>([]);
 
-let formSearch = reactive({
-  pageNum: 1,
-  pageSize: 1000,
-  fileId: '',
-  fileName: '',
-});
-let tableData = ref<any[]>([]);
-let selectedFileId = ref<string | null>(null);
-//获取色谱仪报表
-async function getTableList(params: any) {
-  let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...params });
-  const content = res.content;
-  let contentArr = JSON.parse(content);
-  tableData.value = contentArr;
-  console.log(contentArr, 'contentArr');
-  updateChart(contentArr);
-}
+  let formSearch = reactive({
+    pageNum: 1,
+    pageSize: 1000,
+    fileId: '',
+    fileName: '',
+  });
+  let tableData = ref<any[]>([]);
+  let selectedFileId = ref<string | null>(null);
+  //获取色谱仪报表
+  async function getTableList(params: any) {
+    let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...params });
+    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));
+  //折线图
+  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',
+    const option = {
+      title: {
+        text: '色谱仪报表分析',
+        textStyle: {
+          color: '#ffffff', // 设置标题颜色
         },
       },
-    },
-    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; // 截断长标签
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+        textStyle: {
+          color: '#ffffff', // 设置 tooltip 字体颜色为白色
+        },
+        axisPointer: {
+          label: {
+            show: true,
+            backgroundColor: '#071c44',
+          },
         },
       },
-    },
-    yAxis: [
-      {
-        type: 'value',
-        name: 'O₂/N₂',
-        max: 100,
-        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
-        axisLabel: {
-          color: '#ffffff', // 设置 y 轴字体颜色
+      legend: {
+        top: 10,
+        textStyle: {
+          color: '#ffffffff',
         },
       },
-      {
-        type: 'value',
-        name: '其他气体',
+      xAxis: {
+        type: 'category',
+        data: categories,
         splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
         axisLabel: {
-          color: '#ffffff', // 设置 y 轴字体颜色
+          interval: 0, // 显示所有标签
+          color: '#ffffff',
+          formatter: function (value: string) {
+            return value.length > 15 ? value.slice(0, 15) + '...' : value; // 截断长标签
+          },
         },
       },
-    ],
-    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' });
-  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();
+      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);
   }
-}
-// 处理文件点击事件
-function handleFileClick(item: any) {
-  formSearch.fileId = item.fileId;
-  formSearch.fileName = item.fileName;
-  selectedFileId.value = item.fileId;
-  getSearch();
-}
-//查询
-function getSearch() {
-  const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
-  const params = {
-    fileId: formSearch.fileId,
-    fileName: selectedFile ? selectedFile.fileName : '',
-  };
-  getTableList(params);
-}
-onMounted(() => {
-  getTableList({ type: 'bundleSpy' });
-  getAllFile().then(() => {
+  //获取所有文件列表
+  async function getAllFile() {
+    let res = await getAllFileList({ type: 'bundleSpy' });
+    selectList.value = res.records.map((item: any) => ({
+      fileId: item.fileId,
+      fileName: item.fileName,
+    }));
     if (selectList.value.length > 0) {
       formSearch.fileId = selectList.value[0].fileId;
-      selectedFileId.value = selectList.value[0].fileId;
       getSearch();
     }
+  }
+  // 处理文件点击事件
+  function handleFileClick(item: any) {
+    formSearch.fileId = item.fileId;
+    formSearch.fileName = item.fileName;
+    selectedFileId.value = item.fileId;
+    getSearch();
+  }
+  //查询
+  function getSearch() {
+    const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
+    const params = {
+      fileId: formSearch.fileId,
+      fileName: selectedFile ? selectedFile.fileName : '',
+    };
+    getTableList(params);
+  }
+  onMounted(() => {
+    getTableList({ type: 'bundleSpy' });
+    getAllFile().then(() => {
+      if (selectList.value.length > 0) {
+        formSearch.fileId = selectList.value[0].fileId;
+        selectedFileId.value = selectList.value[0].fileId;
+        getSearch();
+      }
+    });
   });
-});
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-.content-container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
+  .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;
-}
-.line-chart {
-  width: 100%;
-  height: 400px;
-  margin-top: 50px;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+  .line-chart {
+    width: 100%;
+    height: 400px;
+    margin-top: 50px;
+  }
 </style>

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

@@ -10,7 +10,7 @@
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 250 }" class="tableW"> </a-table>
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 250 }" class="tableW" />
         <div class="tab-container">
           <a-tabs v-model:activeKey="activeTab">
             <a-tab-pane key="workplace" class="tab1" tab="监测地点粉尘情况分析">
@@ -28,10 +28,10 @@
                   </a-select-option>
                 </a-select>
               </div>
-              <a-table :columns="dataColumns" :data-source="filteredResultByWorkplace" size="small" :scroll="{ y: 260 }" class="tableW"></a-table>
+              <a-table :columns="dataColumns" :data-source="filteredResultByWorkplace" size="small" :scroll="{ y: 260 }" class="tableW" />
             </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-table :columns="AllDataColumns" :data-source="AllMaxValues" size="small" :scroll="{ y: 300 }" class="tableW" />
             </a-tab-pane>
           </a-tabs>
         </div>
@@ -41,266 +41,266 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue';
-import { columns, dataColumns, AllDataColumns } from './dust-table.data';
-import { getDustInfoList, getAllFileList } from './dsut-table.api';
-import customHeader from '/@/components/vent/customHeader.vue';
-import { result } from 'lodash-es';
-// import { nextTick } from 'process';
+  import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue';
+  import { columns, dataColumns, AllDataColumns } from './dust-table.data';
+  import { getDustInfoList, getAllFileList } from './dsut-table.api';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import { result } from 'lodash-es';
+  // import { nextTick } from 'process';
 
-let tableData = ref<any[]>([]);
-let selectList = ref<any[]>([]);
-let resultByWorkplace = ref<any[]>([]);
-let AllMaxValues = ref<any[]>([]);
-let filteredResultByWorkplace = ref<any[]>([]); //根据工作场所查询的数据
-let workplaceList = ref<any[]>([]); //根据工作场所查询的数据
-let activeTab = ref<string>('workplace');
-let selectedFileId = ref<string | null>(null);
-let selectedWorkplace = ref<string | null>(null);
-let DefaultValue = ref<string | null>(null);
-let formSearch = reactive({
-  pageNum: 1,
-  pageSize: 1000,
-  fileId: '',
-  fileName: '',
-});
+  let tableData = ref<any[]>([]);
+  let selectList = ref<any[]>([]);
+  let resultByWorkplace = ref<any[]>([]);
+  let AllMaxValues = ref<any[]>([]);
+  let filteredResultByWorkplace = ref<any[]>([]); //根据工作场所查询的数据
+  let workplaceList = ref<any[]>([]); //根据工作场所查询的数据
+  let activeTab = ref<string>('workplace');
+  let selectedFileId = ref<string | null>(null);
+  let selectedWorkplace = ref<string | null>(null);
+  let DefaultValue = ref<string | null>(null);
+  let formSearch = reactive({
+    pageNum: 1,
+    pageSize: 1000,
+    fileId: '',
+    fileName: '',
+  });
 
-//获取粉尘监测结果数据
-async function getTableList(params: any) {
-  let res = await getDustInfoList({ type: 'smoke', ...params });
-  const content = res.content;
-  let contentArr = JSON.parse(content);
-  tableData.value = contentArr;
-  processTableData(contentArr);
-  if (workplaceList.value.length > 0) {
-    console.log(workplaceList.value, 'workplaceList');
-    DefaultValue.value = workplaceList.value[0];
-    workPlaceChange(selectedWorkplace.value);
-  }
-}
-// 处理 tableData 数据
-function processTableData(data: any) {
-  // 根据 gzcs 字段进行分组
-  const groupedData = data.reduce((acc: any, item: any) => {
-    const workplace = item.gzcs;
-    if (!acc[workplace]) {
-      acc[workplace] = [];
+  //获取粉尘监测结果数据
+  async function getTableList(params: any) {
+    let res = await getDustInfoList({ type: 'smoke', ...params });
+    const content = res.content;
+    let contentArr = JSON.parse(content);
+    tableData.value = contentArr;
+    processTableData(contentArr);
+    if (workplaceList.value.length > 0) {
+      console.log(workplaceList.value, 'workplaceList');
+      DefaultValue.value = workplaceList.value[0];
+      workPlaceChange(selectedWorkplace.value);
     }
-    acc[workplace].push(item);
-    return acc;
-  }, {});
+  }
+  // 处理 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 },
-    ];
+    // 筛选每个工作场所下的最大值
+    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;
+          }
+        });
+      });
 
-    items.forEach((item: any) => {
-      maxValues.forEach((maxValue) => {
+      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;
         }
       });
     });
 
-    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();
+    AllMaxValues.value = overallMaxValues;
   }
-}
-//查询
-// 处理文件点击事件
-function handleFileClick(item: any) {
-  formSearch.fileId = item.fileId;
-  formSearch.fileName = item.fileName;
-  selectedFileId.value = item.fileId;
-  getSearch();
-}
-function getSearch() {
-  const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
-  const params = {
-    fileId: formSearch.fileId,
-    fileName: selectedFile ? selectedFile.fileName : '',
-  };
-  getTableList(params);
-}
-function workPlaceChange(value: any) {
-  selectedWorkplace.value = value;
-  filteredResultByWorkplace.value = resultByWorkplace.value.filter((item) => item.gzcs === value);
-}
-
-onMounted(() => {
-  getTableList({ type: 'smoke' });
-  getAllFile().then(() => {
+  //获取所有文件列表
+  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;
-      selectedFileId.value = selectList.value[0].fileId;
       getSearch();
     }
+  }
+  //查询
+  // 处理文件点击事件
+  function handleFileClick(item: any) {
+    formSearch.fileId = item.fileId;
+    formSearch.fileName = item.fileName;
+    selectedFileId.value = item.fileId;
+    getSearch();
+  }
+  function getSearch() {
+    const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
+    const params = {
+      fileId: formSearch.fileId,
+      fileName: selectedFile ? selectedFile.fileName : '',
+    };
+    getTableList(params);
+  }
+  function workPlaceChange(value: any) {
+    selectedWorkplace.value = value;
+    filteredResultByWorkplace.value = resultByWorkplace.value.filter((item) => item.gzcs === value);
+  }
+
+  onMounted(() => {
+    getTableList({ type: 'smoke' });
+    getAllFile().then(() => {
+      if (selectList.value.length > 0) {
+        formSearch.fileId = selectList.value[0].fileId;
+        selectedFileId.value = selectList.value[0].fileId;
+        getSearch();
+      }
+    });
   });
-});
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-.content-container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-.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;
-}
+  .content-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
 
-.file-list li {
-  color: #fff;
-  padding: 5px;
-  cursor: pointer;
-}
+  .file-list {
+    width: 20%;
+    padding: 10px;
+    margin-right: 10px;
+    margin-bottom: 50px;
+    border: 1px solid #99e8ff66;
+    background: #27546e1a;
+    box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+    -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+    -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
+  }
 
-.file-list li:hover,
-.file-list li.selected {
-  background: #1c4869;
-}
+  .file-list ul {
+    list-style: none;
+    padding: 0;
+  }
 
-.table-container {
-  margin-top: 10px;
-  width: 80%;
-  box-sizing: border-box;
-}
+  .file-list li {
+    color: #fff;
+    padding: 5px;
+    cursor: pointer;
+  }
 
-.tab-container {
-  display: flex;
-  align-items: center;
-}
+  .file-list li:hover,
+  .file-list li.selected {
+    background: #1c4869;
+  }
 
-.tab-container .ant-tabs {
-  flex-grow: 1;
-}
+  .table-container {
+    margin-top: 10px;
+    width: 80%;
+    box-sizing: border-box;
+  }
 
-: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%;
+  .tab-container {
     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;
-    }
+    align-items: center;
   }
-  .zxm-tabs-ink-bar {
-    width: 0 !important;
+
+  .tab-container .ant-tabs {
+    flex-grow: 1;
   }
-  .zxm-tabs-tab + .zxm-tabs-tab {
+
+  :deep(.zxm-tabs-nav) {
     margin: 0 !important;
+    .zxm-tabs-tab {
+      width: 180px;
+      height: 45px;
+      background: url('@/assets/images/defaultbg.png') center no-repeat;
+      background-size: 100%;
+      display: flex;
+      justify-content: center;
+      font-size: 16px;
+      margin-right: 10px;
+    }
+    .zxm-tabs-tab-active {
+      width: 180px;
+      position: relative;
+      background: url('@/assets/images/selected.png') center no-repeat;
+      background-size: 100%;
+      .zxm-tabs-tab-btn {
+        color: #fff !important;
+      }
+    }
+    .zxm-tabs-ink-bar {
+      width: 0 !important;
+    }
+    .zxm-tabs-tab + .zxm-tabs-tab {
+      margin: 0 !important;
+    }
   }
-}
 
-.dustMonitor {
-  width: 100%;
-  height: 100%;
-  padding: 10px 10px 15px 10px;
-  box-sizing: border-box;
-  position: relative;
-}
+  .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;
-}
-</style>
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+</style>

src/views/vent/monitorManager/alarmMonitor/common/closeWall.vue

@@ -85,8 +85,8 @@
             />
           </div>
           <div class="echarts-box">
-            <echartLine1 v-if="shownChart === 'default'" :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" />
-            <PredictionCurve v-if="shownChart === 'predict'" :chart="curveConfig" />
+            <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
+            <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" />
           </div>
         </div>
         <div class="right-echartbox">
@@ -244,117 +244,124 @@
     const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
     switch (type.value) {
       case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.o2val);
+        });
+
         curveConfig.value = {
           id: 'o2',
-          label: '',
-          time: new Date(),
+          label: 'O₂',
+          time: echartDataSg1.xData,
           data: [
             // 氧气预测曲线
             data.avgParams?.avg_o2_value || 0,
             data.avgParams?.max_o2_value || 0,
             data.avgParams?.min_o2_value || 0,
-            data.readData?.o2val,
+            // data.readData?.o2val,
           ],
+          monitorData: echartDataSg1.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.o2val);
-        });
         getmaxY();
         break;
       case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.ch2val);
+        });
         curveConfig.value = {
           id: 'ch2',
-          label: '',
-          time: new Date(),
+          label: 'C₂H₄',
+          time: echartDataSg1.xData,
           data: [
             // 预测曲线
             data.avgParams?.avg_ch2_value || 0,
             data.avgParams?.max_ch2_value || 0,
             data.avgParams?.min_ch2_value || 0,
-            data.readData?.ch2val,
+            // data.readData?.ch2val,
           ],
+          monitorData: echartDataSg1.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.ch2val);
-        });
         getmaxY();
         break;
       case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.coval);
+        });
         curveConfig.value = {
           id: 'co',
-          label: '',
-          time: new Date(),
+          label: 'CO',
+          time: echartDataSg1.xData,
           data: [
             // 预测曲线
             data.avgParams?.avg_co_value || 0,
             data.avgParams?.max_co_value || 0,
             data.avgParams?.min_co_value || 0,
-            data.readData?.coval,
+            // data.readData?.coval,
           ],
+          monitorData: echartDataSg1.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.coval);
-        });
         getmaxY();
         break;
       case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.chval);
+        });
         curveConfig.value = {
           id: 'ch',
-          label: '',
+          label: 'CH₄',
           time: new Date(),
           data: [
             // 预测曲线
             data.avgParams?.avg_ch_value || 0,
             data.avgParams?.max_ch_value || 0,
             data.avgParams?.min_ch_value || 0,
-            data.readData?.chval,
+            // data.readData?.chval,
           ],
+          monitorData: echartDataSg1.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.chval);
-        });
         getmaxY();
         break;
       case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.co2val);
+        });
         curveConfig.value = {
           id: 'co2',
-          label: '',
-          time: new Date(),
+          label: 'CO₂',
+          time: echartDataSg1.xData,
           data: [
             // 预测曲线
             data.avgParams?.avg_co2_value || 0,
             data.avgParams?.max_co2_value || 0,
             data.avgParams?.min_co2_value || 0,
-            data.readData?.co2val,
+            // data.readData?.co2val,
           ],
+          monitorData: echartDataSg1.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.co2val);
-        });
         getmaxY();
         break;
       case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.gasval);
+        });
         curveConfig.value = {
           id: 'gas',
           label: '',
-          time: new Date(),
+          time: echartDataSg1.xData,
           data: [
             // 预测曲线
             data.avgParams?.avg_gas_value || 0,
             data.avgParams?.max_gas_value || 0,
             data.avgParams?.min_gas_value || 0,
-            data.readData?.gasval,
+            // data.readData?.gasval,
           ],
+          monitorData: echartDataSg1.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.gasval);
-        });
         getmaxY();
         break;
     }

src/views/vent/monitorManager/alarmMonitor/common/echartLine.vue

@@ -51,7 +51,7 @@
       let option = {
         grid: props.gridV,
         tooltip: {
-          trigger: 'item',
+          trigger: 'axis',
           backgroundColor: 'rgba(0, 0, 0, .6)',
           textStyle: {
             color: '#fff',
@@ -219,8 +219,7 @@
             name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
             type: 'line',
             smooth: true,
-            showSymbol: true,
-            symbolSize: 8,
+            symbol: 'none',
             zlevel: 3,
             itemStyle: {
               color: '#19a3df',
@@ -238,8 +237,7 @@
             name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
             type: 'line',
             smooth: true,
-            showSymbol: true,
-            symbolSize: 8,
+            symbol: 'none',
             zlevel: 3,
             itemStyle: {
               color: '#4fffad',
@@ -257,8 +255,7 @@
             name: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
             type: 'line',
             smooth: true,
-            showSymbol: true,
-            symbolSize: 8,
+            symbol: 'none',
             zlevel: 3,
             itemStyle: {
               color: '#fc8452',
@@ -277,8 +274,7 @@
             name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
             type: 'line',
             smooth: true,
-            showSymbol: true,
-            symbolSize: 8,
+            symbol: 'none',
             zlevel: 3,
             itemStyle: {
               color: '#fc8452',

src/views/vent/monitorManager/alarmMonitor/common/echartLine1.vue

@@ -171,7 +171,6 @@
             type: 'line',
             smooth: false,
             showSymbol: false,
-            symbolSize: 8,
             zlevel: 3,
             itemStyle: {
               color: '#02f2de',

src/views/vent/monitorManager/alarmMonitor/common/echartLine2.vue

@@ -158,9 +158,9 @@
           {
             name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
             type: 'line',
-            smooth: true,
             yAxisIndex: 0,
-            symbolSize: 8,
+            smooth: true,
+            showSymbol: false,
             lineStyle: {
               normal: {
                 width: 2,
@@ -180,7 +180,7 @@
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
-            symbolSize: 8,
+            showSymbol: false,
 
             lineStyle: {
               normal: {
@@ -201,7 +201,7 @@
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
-            symbolSize: 8,
+            showSymbol: false,
 
             lineStyle: {
               normal: {
@@ -222,8 +222,7 @@
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
-            symbolSize: 8,
-
+            showSymbol: false,
             lineStyle: {
               normal: {
                 width: 2,

src/views/vent/monitorManager/alarmMonitor/common/echartLine3.vue

@@ -14,6 +14,7 @@
     y3Data: number[];
     y4Data: number[];
     yUnit?: string;
+    legendName?: string;
   }>();
 
   //获取dom元素节点
@@ -32,7 +33,7 @@
       const myChart = echarts.init(work.value);
       let option = {
         tooltip: {
-          trigger: 'item',
+          trigger: 'axis',
           backgroundColor: 'rgba(0, 0, 0, .6)',
           textStyle: {
             color: '#fff',
@@ -41,9 +42,9 @@
         },
         grid: {
           top: '15%',
-          left: '10%',
+          left: '8%',
           bottom: '10%',
-          right: '2%',
+          right: '4%',
         },
         legend: {
           align: 'left',
@@ -53,8 +54,9 @@
             color: '#7ec7ff',
             fontSize: 14,
           },
-          itemGap: 10,
-          itemWidth: 5,
+          itemGap: 25,
+          itemWidth: 18,
+          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
         },
         xAxis: [
           {
@@ -104,11 +106,11 @@
         ],
         series: [
           {
-            name: '平均值',
+            name: props.legendName + '平均值',
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
-            symbolSize: 4,
+            symbol: 'none',
             lineStyle: {
               normal: {
                 width: 2,
@@ -117,11 +119,11 @@
             data: props.y1Data,
           },
           {
-            name: '最大值',
+            name: props.legendName + '最大值',
             type: 'line',
             smooth: true,
+            symbol: 'none',
             yAxisIndex: 0,
-            symbolSize: 4,
             lineStyle: {
               normal: {
                 width: 2,
@@ -130,11 +132,11 @@
             data: props.y2Data,
           },
           {
-            name: '最小值',
+            name: props.legendName + '最小值',
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
-            symbolSize: 4,
+            symbol: 'none',
             lineStyle: {
               normal: {
                 width: 2,
@@ -143,11 +145,11 @@
             data: props.y3Data,
           },
           {
-            name: '实时值',
+            name: props.legendName + '实时值',
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
-            symbolSize: 4,
+            symbol: 'none',
             lineStyle: {
               normal: {
                 width: 2,

src/views/vent/monitorManager/alarmMonitor/common/fireWork.vue

@@ -68,8 +68,8 @@
         </div>
       </div>
       <div class="echart-box">
-        <echartLine1 v-if="shownChart === 'default'" :echartDataSg="echartDataSg" :maxY="maxY1" :lengedDataName="echartDataSg.lengedDataName" />
-        <PredictionCurve v-if="shownChart === 'predict'" :chart="curveConfig" />
+        <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
+        <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg" :maxY="maxY1" :lengedDataName="echartDataSg.lengedDataName" />
       </div>
     </div>
   </div>
@@ -83,6 +83,7 @@
   import PredictionCurve from './predictionCurve.vue';
   import { topList, contentList } from '../common.data';
   import BaseTab from '../../../gas/components/tab/baseTab.vue';
+  import { monitorData } from '../../nitrogen/nitrogen.data';
 
   let props = defineProps({
     listData: Object,
@@ -117,9 +118,25 @@
   //束管监测-图表数据
   let echartDataSg = reactive({
     xData: [],
+    lengedDataName: '(%)',
+    // curData: {
+    //   lengedData: '实时温度',
+    //   data: [],
+    // },
+    // maxData: {
+    //   lengedData: '最大温度',
+    //   data: [],
+    // },
+    // minData: {
+    //   lengedData: '最小温度',
+    //   data: [],
+    // },
+    // avgData: {
+    //   lengedData: '平均温度',
+    //   data: [],
+    // },
     yData: [],
     lengedData: 'O₂',
-    lengedDataName: '(%)',
   });
   let echartDataSgList = reactive<any[]>([]);
 
@@ -145,6 +162,7 @@
   }
   //束管实时数据选项点击
   function getSgClick(items) {
+    debugger;
     echartDataSg.xData.length = 0;
     echartDataSg.yData.length = 0;
     echartDataSg.lengedData = items.title;
@@ -153,122 +171,130 @@
     const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
     switch (items.title) {
       case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.o2val);
+        });
+
         curveConfig.value = {
           id: 'o2',
-          label: '',
-          time: new Date(),
+          label: 'O₂',
+          time: echartDataSg.xData,
           data: [
             // 氧气预测曲线
             data.avgParams?.avg_o2_value || 0,
             data.avgParams?.max_o2_value || 0,
             data.avgParams?.min_o2_value || 0,
-            data.readData?.o2val,
+            // data.readData?.o2val,
           ],
+          monitorData: echartDataSg.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.o2val);
-        });
         getmaxY();
         break;
       case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.ch2val);
+        });
         curveConfig.value = {
           id: 'ch2',
-          label: '',
-          time: new Date(),
+          label: 'C₂H₄',
+          time: echartDataSg.xData,
           data: [
             // 预测曲线
             data.avgParams?.avg_ch2_value || 0,
             data.avgParams?.max_ch2_value || 0,
             data.avgParams?.min_ch2_value || 0,
-            data.readData?.ch2val,
+            // data.readData?.ch2val,
           ],
+          monitorData: echartDataSg.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.ch2val);
-        });
         getmaxY();
         break;
       case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.coval);
+        });
         curveConfig.value = {
           id: 'co',
-          label: '',
-          time: new Date(),
+          label: 'CO',
+          time: echartDataSg.xData,
           data: [
             // 预测曲线
             data.avgParams?.avg_co_value || 0,
             data.avgParams?.max_co_value || 0,
             data.avgParams?.min_co_value || 0,
-            data.readData?.coval,
+            // data.readData?.coval,
           ],
+          monitorData: echartDataSg.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.coval);
-        });
         getmaxY();
         break;
       case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.chval);
+        });
         curveConfig.value = {
           id: 'ch',
-          label: '',
+          label: 'CH₄',
           time: new Date(),
           data: [
             // 预测曲线
             data.avgParams?.avg_ch_value || 0,
             data.avgParams?.max_ch_value || 0,
             data.avgParams?.min_ch_value || 0,
-            data.readData?.chval,
+            // data.readData?.chval,
           ],
+          monitorData: echartDataSg.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.chval);
-        });
         getmaxY();
         break;
       case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.co2val);
+        });
         curveConfig.value = {
           id: 'co2',
-          label: '',
-          time: new Date(),
+          label: 'CO₂',
+          time: echartDataSg.xData,
           data: [
             // 预测曲线
             data.avgParams?.avg_co2_value || 0,
             data.avgParams?.max_co2_value || 0,
             data.avgParams?.min_co2_value || 0,
-            data.readData?.co2val,
+            // data.readData?.co2val,
           ],
+          monitorData: echartDataSg.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.co2val);
-        });
         getmaxY();
         break;
       case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.gasval);
+        });
         curveConfig.value = {
           id: 'gas',
           label: '',
-          time: new Date(),
+          time: echartDataSg.xData,
           data: [
             // 预测曲线
             data.avgParams?.avg_gas_value || 0,
             data.avgParams?.max_gas_value || 0,
             data.avgParams?.min_gas_value || 0,
-            data.readData?.gasval,
+            // data.readData?.gasval,
           ],
+          monitorData: echartDataSg.yData,
         };
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.gasval);
-        });
         getmaxY();
         break;
     }
   }
   function changeSelect(val) {
+    debugger;
     selectData.value = val;
     let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
     contentList[0].list[0].value = data.readData.o2val;

src/views/vent/monitorManager/alarmMonitor/common/predictionCurve.vue

@@ -1,5 +1,12 @@
 <template>
-  <EchartLine3 :x-data="chartConfig.x" :y1-data="chartConfig.y1" :y2-data="chartConfig.y2" :y3-data="chartConfig.y3" :y4-data="chartConfig.y4" />
+  <EchartLine3
+    :x-data="chartConfig.x"
+    :y1-data="chartConfig.y1"
+    :y2-data="chartConfig.y2"
+    :y3-data="chartConfig.y3"
+    :y4-data="chartConfig.y4"
+    :legend-name="chartConfig.label"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -9,7 +16,7 @@
 
   const props = defineProps<{
     /** 测点图配置，该测点图在每次数据更新时追加曲线数据，但如果需要更新图表，那么需要更改id来告知组件 */
-    chart: { id: number | string; label: string; time: Date; data: [number, number, number, number] };
+    chart: { id: number | string; label: string; time: []; data: [number, number, number]; monitorData: number[] };
     timeout?: number;
   }>();
 
@@ -36,17 +43,21 @@
   watch(
     () => props.chart,
     (el) => {
-      const arr = new Array(20).fill(0);
+      if (!el) return;
+      const arr = new Array(el.time.length).fill(0);
       if (chartConfig.value.indexMark === 0 || chartId !== el.id) {
         // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
-        const startFrom = moment(el.time);
+        // const startFrom = moment(el.time);
         chartConfig.value = {
           label: el.label,
           indexMark: 1,
-          x: arr.map(() => {
-            const str = startFrom.format('HH:mm:ss');
-            startFrom.add(props.timeout || 3000);
-            return str;
+          // x: arr.map(() => {
+          //   const str = startFrom.format('HH:mm:ss');
+          //   startFrom.add(props.timeout || 3000);
+          //   return str;
+          // }),
+          x: el.time.map((item) => {
+            return item + '：00';
           }),
           y1: arr.map(() => {
             return el.data[0];
@@ -57,9 +68,7 @@
           y3: arr.map(() => {
             return el.data[2];
           }),
-          y4: arr.map(() => {
-            return el.data[3];
-          }),
+          y4: el.monitorData,
         };
       } else {
         // 更新配置

src/views/vent/monitorManager/alarmMonitor/common/warnGradeEchart.vue

@@ -1,132 +1,132 @@
 <template>
-    <div class="echartBar">
-        <div class="bar" ref="bar"></div>
-    </div>
+  <div class="echartBar">
+    <div class="bar" ref="bar"></div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { defineProps, ref, nextTick, reactive, watch } from 'vue';
-import * as echarts from 'echarts';
-
-let props = defineProps({
+  import { defineProps, ref, nextTick, reactive, watch } from 'vue';
+  import * as echarts from 'echarts';
 
+  let props = defineProps({
     echartData: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-});
-//获取dom元素节点
-let bar = ref<any>();
-let echartDatas = ref<any[]>([])
-watch(
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  });
+  //获取dom元素节点
+  let bar = ref<any>();
+  let echartDatas = ref<any[]>([]);
+  watch(
     () => props.echartData,
     (newV, oldV) => {
-        let data:any[]=[]
-        Object.keys(newV).forEach(el => {
-            if (el == 'dust') {
-                data.push({ name: '粉尘', value: newV[el] })
-            } else if (el == 'fire') {
-                data.push({ name: '火灾', value: newV[el] })
-            } else if (el == 'gas') {
-                data.push({ name: '瓦斯', value: newV[el] })
-            } else if (el == 'vent') {
-               data.push({ name: '通风', value: newV[el] })
-            }
-        })
-        echartDatas.value=data
-        getOption();
+      let data: any[] = [];
+      Object.keys(newV).forEach((el) => {
+        if (el == 'dust') {
+          data.push({ name: '粉尘', value: newV[el] });
+        } else if (el == 'fire') {
+          data.push({ name: '火灾', value: newV[el] });
+        } else if (el == 'gas') {
+          data.push({ name: '瓦斯', value: newV[el] });
+        } else if (el == 'vent') {
+          data.push({ name: '通风', value: newV[el] });
+        }
+      });
+      echartDatas.value = data;
+      getOption();
     },
-    { deep : true, }
-);
+    { deep: true }
+  );
 
-function getOption() {
+  function getOption() {
     nextTick(() => {
-        let myChart = echarts.init(bar.value);
-        let option = {
-            title: {
-                text: '风险比例分析',
-                left: '20%',
-                top: 0,
-                textStyle: {
-                    color: '#fff',
+      let myChart = echarts.init(bar.value);
+      let option = {
+        title: {
+          text: '风险比例分析',
+          left: '20%',
+          top: 0,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+          },
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)',
+          backgroundColor: 'rgba(0, 0, 0, .6)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: '50%',
+            center: ['30%', '54%'],
+            color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
+            data: echartDatas.value.sort(function (a, b) {
+              return a.value - b.value;
+            }),
+            roseType: 'radius',
+
+            label: {
+              normal: {
+                formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
+                rich: {
+                  c: {
+                    color: '#00d8ff',
                     fontSize: 14,
-                }
-            },
-            tooltip: {
-                trigger: 'item',
-                formatter: "{b} : {c} ({d}%)",
-                backgroundColor: 'rgba(0, 0, 0, .6)',
-                textStyle: {
+                    fontWeight: 'bold',
+                    lineHeight: 5,
+                  },
+                  b: {
                     color: '#fff',
                     fontSize: 12,
+                    height: 40,
+                  },
                 },
+              },
             },
-            series: [{
-                name: '',
-                type: 'pie',
-                radius: '50%',
-                center: ['30%', '54%'],
-                color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
-                data: echartDatas.value.sort(function (a, b) {
-                    return a.value - b.value
-                }),
-                roseType: 'radius',
-
-                label: {
-                    normal: {
-                        formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
-                        rich: {
-                            c: {
-                                color: '#00d8ff',
-                                fontSize: 14,
-                                fontWeight: 'bold',
-                                lineHeight: 5
-                            },
-                            b: {
-                                color: '#fff',
-                                fontSize: 12,
-                                height: 40
-                            },
-                        },
-                    }
-                },
-                labelLine: {
-                    normal: {
-                        lineStyle: {
-                            color: 'rgb(98,137,169)',
-                        },
-                        smooth: 0.2,
-                        length: 10,
-                        length2: 10,
-
-                    }
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  color: 'rgb(98,137,169)',
                 },
-                itemStyle: {
-                    normal: {
-                        shadowColor: 'rgba(0, 0, 0, 0.8)',
-                        shadowBlur: 50,
-                    }
-                }
-            }]
-        };
-        myChart.setOption(option);
-        window.onresize = function () {
-            myChart.resize();
-        };
+                smooth: 0.2,
+                length: 2,
+                length2: 2,
+              },
+            },
+            itemStyle: {
+              normal: {
+                shadowColor: 'rgba(0, 0, 0, 0.8)',
+                shadowBlur: 50,
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
     });
-}
+  }
 </script>
 
 <style scoped lang="less">
-.echartBar {
+  .echartBar {
     width: 100%;
     height: 100%;
 
     .bar {
-        width: 100%;
-        height: 100%;
+      width: 100%;
+      height: 100%;
     }
-}
-</style>
+  }
+</style>

src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -50,8 +50,15 @@
             </div>
           </div>
           <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
-          <BarSingle :xAxisData="xAxisData" :dataSource="windData.levels" height="225px" :chartsColumns="chartsColumns"
-            :option="option" :color="colors" :fontColor="fontColor" />
+          <BarSingle
+            :xAxisData="xAxisData"
+            :dataSource="windData.levels"
+            height="225px"
+            :chartsColumns="chartsColumns"
+            :option="option"
+            :color="colors"
+            :fontColor="fontColor"
+          />
         </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
@@ -89,28 +96,35 @@
     </div>
     <div class="center-box">
       <div class="echart-warn-grade">
-        <warnGradeEchart :echartData="Levels"></warnGradeEchart>
+        <warnGradeEchart :echartData="Levels" />
       </div>
       <div class="btn-warn-grade">
-        <a-button type="primary" size="small" @click="warnGradeClick">风险等级</a-button>
+        <a-button type="primary" size="small" @click="warnGradeClick">风险等级划分标准</a-button>
       </div>
       <div class="animation-box">
         <canvas class="rain"></canvas>
-        <div class="bottom" :class="{
-          bottom1: centerData.levels == 101 || centerData.levels == 0 || centerData.levels == 10000,
-          bottom2: centerData.levels == 102,
-          bottom3: centerData.levels == 103,
-          bottom4: centerData.levels == 104,
-          bottom5: centerData.levels == 201,
-        }">
+        <div
+          class="bottom"
+          :class="{
+            bottom1: centerData.levels == 101 || centerData.levels == 0 || centerData.levels == 10000,
+            bottom2: centerData.levels == 102,
+            bottom3: centerData.levels == 103,
+            bottom4: centerData.levels == 104,
+            bottom5: centerData.levels == 201,
+          }"
+        >
           <div class="animation1">
             <div class="ball"></div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559"
-              style="opacity: 0.5">
+            <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559" style="opacity: 0.5">
               <g id="组_14135" data-name="组 14135" transform="translate(-755.058 -139.886)">
-                <path id="椭圆_2595" data-name="椭圆 2595"
+                <path
+                  id="椭圆_2595"
+                  data-name="椭圆 2595"
                   d="M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z"
-                  transform="translate(755.808 140.636)" fill="#28a6ff" opacity="0.7" />
+                  transform="translate(755.808 140.636)"
+                  fill="#28a6ff"
+                  opacity="0.7"
+                />
               </g>
             </svg>
           </div>
@@ -118,9 +132,14 @@
             <div class="ball1"></div>
             <svg xmlns="http://www.w3.org/2000/svg" width="414.878" height="91.7" viewBox="0 0 414.878 91.7">
               <g id="组_14136" data-name="组 14136" transform="translate(-721.822 -158.273)">
-                <path id="椭圆_2595" data-name="椭圆 2595"
+                <path
+                  id="椭圆_2595"
+                  data-name="椭圆 2595"
                   d="M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z"
-                  transform="translate(722.572 159.023)" fill="#3dd8ff" opacity="0.5" />
+                  transform="translate(722.572 159.023)"
+                  fill="#3dd8ff"
+                  opacity="0.5"
+                />
               </g>
             </svg>
           </div>
@@ -129,19 +148,20 @@
               centerData.levels == 0
                 ? '低风险'
                 : centerData.levels == 101
-                  ? '低风险'
-                  : centerData.levels == 102
-                    ? '一般风险'
-                    : centerData.levels == 103
-                      ? '较大风险'
-                      : centerData.levels == 104
-                        ? '重大风险'
-                        : centerData.levels == 201
-                          ? '报警'
-                          : '未连接'
+                ? '低风险'
+                : centerData.levels == 102
+                ? '一般风险'
+                : centerData.levels == 103
+                ? '较大风险'
+                : centerData.levels == 104
+                ? '重大风险'
+                : centerData.levels == 201
+                ? '报警'
+                : '未连接'
             }}</div>
 
-            <div class="text2">风险分析</div>
+            <div class="text2">{{ centerData.riskLevel }}</div>
+            <div class="text3">风险得分</div>
           </div>
           <div class="icon-animation"></div>
         </div>
@@ -153,11 +173,21 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">火灾监测预警</span>
-              <span :class="centerData.fire != 1001 ? 'value' : 'value1'">{{ centerData.fire == 0 ? '正常' :
-                centerData.fire
-                  == 101 ? '低风险' : centerData.fire == 102 ? '一般风险' : centerData.fire == 103 ? '较大风险' : centerData.fire ==
-                    104
-                    ? '重大风险' : centerData.fire == 201 ? '报警' : centerData.fire }}</span>
+              <span :class="centerData.fire != 1001 ? 'value' : 'value1'">{{
+                centerData.fire == 0
+                  ? '正常'
+                  : centerData.fire == 101
+                  ? '低风险'
+                  : centerData.fire == 102
+                  ? '一般风险'
+                  : centerData.fire == 103
+                  ? '较大风险'
+                  : centerData.fire == 104
+                  ? '重大风险'
+                  : centerData.fire == 201
+                  ? '报警'
+                  : centerData.fire
+              }}</span>
             </div>
           </div>
           <div class="item item2">
@@ -166,10 +196,21 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">设备监测预警</span>
-              <span :class="centerData.sb != 1001 ? 'value' : 'value1'">{{ centerData.sb == 0 ? '正常' : centerData.sb ==
-                101
-                ? '低风险' : centerData.sb == 102 ? '一般风险' : centerData.sb == 103 ? '较大风险' : centerData.sb == 104 ? '重大风险'
-                  : centerData.sb == 201 ? '报警' : centerData.sb }}</span>
+              <span :class="centerData.sb != 1001 ? 'value' : 'value1'">{{
+                centerData.sb == 0
+                  ? '正常'
+                  : centerData.sb == 101
+                  ? '低风险'
+                  : centerData.sb == 102
+                  ? '一般风险'
+                  : centerData.sb == 103
+                  ? '较大风险'
+                  : centerData.sb == 104
+                  ? '重大风险'
+                  : centerData.sb == 201
+                  ? '报警'
+                  : centerData.sb
+              }}</span>
             </div>
           </div>
           <div class="item item3">
@@ -178,10 +219,21 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">粉尘监测预警</span>
-              <span :class="centerData.fc != 1001 ? 'value' : 'value1'">{{ centerData.fc == 0 ? '正常' : centerData.fc ==
-                101
-                ? '低风险' : centerData.fc == 102 ? '一般风险' : centerData.fc == 103 ? '较大风险' : centerData.fc == 104 ? '重大风险'
-                  : centerData.fc == 201 ? '报警' : centerData.fc }}</span>
+              <span :class="centerData.fc != 1001 ? 'value' : 'value1'">{{
+                centerData.fc == 0
+                  ? '正常'
+                  : centerData.fc == 101
+                  ? '低风险'
+                  : centerData.fc == 102
+                  ? '一般风险'
+                  : centerData.fc == 103
+                  ? '较大风险'
+                  : centerData.fc == 104
+                  ? '重大风险'
+                  : centerData.fc == 201
+                  ? '报警'
+                  : centerData.fc
+              }}</span>
             </div>
           </div>
           <div class="item item4">
@@ -190,10 +242,21 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">瓦斯监测预警</span>
-              <span :class="centerData.ws != 1001 ? 'value' : 'value1'">{{ centerData.ws == 0 ? '正常' : centerData.ws ==
-                101
-                ? '低风险' : centerData.ws == 102 ? '一般风险' : centerData.ws == 103 ? '较大风险' : centerData.ws == 104 ? '重大风险'
-                  : centerData.ws == 201 ? '报警' : centerData.ws }}</span>
+              <span :class="centerData.ws != 1001 ? 'value' : 'value1'">{{
+                centerData.ws == 0
+                  ? '正常'
+                  : centerData.ws == 101
+                  ? '低风险'
+                  : centerData.ws == 102
+                  ? '一般风险'
+                  : centerData.ws == 103
+                  ? '较大风险'
+                  : centerData.ws == 104
+                  ? '重大风险'
+                  : centerData.ws == 201
+                  ? '报警'
+                  : centerData.ws
+              }}</span>
               <div class="">
                 <span class="title">矿井瓦斯鉴定等级监测</span>
                 <!-- <span class="value">低瓦斯</span> -->
@@ -207,10 +270,21 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">通风监测预警</span>
-              <span :class="centerData.tf !== 1001 ? 'value' : 'value1'">{{ centerData.tf == 0 ? '正常' : centerData.tf ==
-                101
-                ? '低风险' : centerData.tf == 102 ? '一般风险' : centerData.tf == 103 ? '较大风险' : centerData.tf == 104 ? '重大风险'
-                  : centerData.tf == 201 ? '报警' : centerData.tf }}</span>
+              <span :class="centerData.tf !== 1001 ? 'value' : 'value1'">{{
+                centerData.tf == 0
+                  ? '正常'
+                  : centerData.tf == 101
+                  ? '低风险'
+                  : centerData.tf == 102
+                  ? '一般风险'
+                  : centerData.tf == 103
+                  ? '较大风险'
+                  : centerData.tf == 104
+                  ? '重大风险'
+                  : centerData.tf == 201
+                  ? '报警'
+                  : centerData.tf
+              }}</span>
             </div>
           </div>
         </div>
@@ -221,33 +295,39 @@
           <div class="item item1">
             <div class="icon"></div>
 
-            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" :step="0.06"
-              :single-waitTime="100000" class="seamless-warp1">
+            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" :step="0.06" :single-waitTime="100000" class="seamless-warp1">
               <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
                 <div class="box-item">
-                  <div :class="{
-                    value1: item.warnLevel == '绿色预警',
-                    value2: item.warnLevel == '黄色预警',
-                    value3: item.warnLevel == '红色预警',
-                  }">{{ item.value1 ? item.value1 : '--' }}</div>
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.value1 ? item.value1 : '--' }}</div
+                  >
                   <div class="title">监测位置</div>
                 </div>
 
                 <div class="box-item">
-                  <div :class="{
-                    value1: item.warnLevel == '绿色预警',
-                    value2: item.warnLevel == '黄色预警',
-                    value3: item.warnLevel == '红色预警',
-                  }">{{ item.warnLevel || '-' }}
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.warnLevel || '-' }}
                   </div>
                   <div class="title">预警等级</div>
                 </div>
                 <div class="box-item1">
-                  <div :class="{
-                    value1: item.warnLevel == '绿色预警',
-                    value2: item.warnLevel == '黄色预警',
-                    value3: item.warnLevel == '红色预警',
-                  }">{{ item.smokeJd || '-' }}
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.smokeJd || '-' }}
                   </div>
                   <div class="title">煤自燃阶段</div>
                 </div>
@@ -314,1439 +394,1463 @@
             </div>
           </div> -->
 
-          <BarSingle :xAxisData="xAxisData" :dataSource="dustData.levels" height="332px" :chartsColumns="chartsColumns"
-            :option="option" :color="colors" :fontColor="fontColor" />
+          <BarSingle
+            :xAxisData="xAxisData"
+            :dataSource="dustData.levels"
+            height="332px"
+            :chartsColumns="chartsColumns"
+            :option="option"
+            :color="colors"
+            :fontColor="fontColor"
+          />
         </template>
       </ventBox1>
     </div>
     <!-- 风险等级弹窗 -->
     <a-modal v-model:visible="visibleGrade" width="850px" :footer="null" :title="titleGrade" centered destroyOnClose>
-      <warnGradeInfo></warnGradeInfo>
+      <warnGradeInfo />
     </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive } from 'vue';
-import { useRouter } from 'vue-router';
-import { rainBg } from '/@/utils/ui.js';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import { useGlobSetting } from '/@/hooks/setting';
-import { getDisasterProportion } from '../../deviceManager/riskSetting/riskSetting.api'
-import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
-import { getTotalList, sysTypeWarnList } from './alarm.api';
-import customHeader from '/@/components/vent/customHeader.vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import BarSingle from '../../../../components/chart/BarSingle.vue';
-import warnGradeEchart from './common/warnGradeEchart.vue'
-import warnGradeInfo from './common/warnGradeInfo.vue'
-
-
-let router = useRouter();
-let warnLevels = ref('');
-let Levels = reactive({})
-const warnNumMap = new Map([
-  ['fire', 0],
-  ['dust', 0],
-  ['vent', 0],
-  ['gas', 0],
-]);
-
-const resetScroll = (e: Event) => {
-  if (e.target && e.target) (e.target as Element).scrollTop = 0;
-};
-let windData = reactive({
-  levels: {},
-  jf: 0,
-  hf: 0,
-  xf: 0,
-}); //通风监测数据
-let dustData = reactive({
-  //粉尘监测数据
-  levels: {},
-});
-let centerData = reactive({
-  fire: 0,
-  tf: 0,
-  ws: 0,
-  sb: 0,
-  fc: 0,
-  levels: 0,
-});
-//瓦斯
-let gasMonitor = reactive<any[]>([]);
-let gasData = {
-  sums: 0,
-  sums1: 0,
-};
-
-let fireMonitor1 = reactive<any[]>([]);
-let visibleGrade = ref(false)//控制风险等级弹窗显示与隐藏
-let titleGrade = ref('')//风险等级弹窗标题
-
-//风险等级点击
-let warnGradeClick = () => {
-  visibleGrade.value = true
-  titleGrade.value = '风险等级信息'
-}
-//跳转详情
-function showModal(data) {
-  switch (data) {
-    case 'vent':
-      router.push('/ventilate/warn/home');
-      break;
-    case 'fire':
-      router.push('/fire/warn/home');
-      break;
-    case 'dust':
-      router.push('/dust/warn/home');
-      break;
-    case 'gas':
-      router.push('/gas/warn/home');
-      break;
-    case 'sbyj':
-      // router.push('/device/warn/home');
-      router.push('/device/warn/home');
-      break;
+  import { ref, onMounted, onUnmounted, reactive } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { rainBg } from '/@/utils/ui.js';
+  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { getDisasterProportion } from '../../deviceManager/riskSetting/riskSetting.api';
+  import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
+  import { getTotalList, sysTypeWarnList } from './alarm.api';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import BarSingle from '../../../../components/chart/BarSingle.vue';
+  import warnGradeEchart from './common/warnGradeEchart.vue';
+  import warnGradeInfo from './common/warnGradeInfo.vue';
+
+  let router = useRouter();
+  let warnLevels = ref('');
+  let Levels = reactive({});
+  const warnNumMap = new Map([
+    ['fire', 0],
+    ['dust', 0],
+    ['vent', 0],
+    ['gas', 0],
+  ]);
+
+  const resetScroll = (e: Event) => {
+    if (e.target && e.target) (e.target as Element).scrollTop = 0;
+  };
+  let windData = reactive({
+    levels: {},
+    jf: 0,
+    hf: 0,
+    xf: 0,
+  }); //通风监测数据
+  let dustData = reactive({
+    //粉尘监测数据
+    levels: {},
+  });
+  let centerData = reactive({
+    fire: 0,
+    tf: 0,
+    ws: 0,
+    sb: 0,
+    fc: 0,
+    levels: 0,
+    riskLevel: '-',
+  });
+  //瓦斯
+  let gasMonitor = reactive<any[]>([]);
+  let gasData = {
+    sums: 0,
+    sums1: 0,
+  };
+
+  let fireMonitor1 = reactive<any[]>([]);
+  let visibleGrade = ref(false); //控制风险等级弹窗显示与隐藏
+  let titleGrade = ref(''); //风险等级弹窗标题
+
+  //风险等级点击
+  let warnGradeClick = () => {
+    visibleGrade.value = true;
+    titleGrade.value = '风险等级信息';
+  };
+  //跳转详情
+  function showModal(data) {
+    switch (data) {
+      case 'vent':
+        router.push('/ventilate/warn/home');
+        break;
+      case 'fire':
+        router.push('/fire/warn/home');
+        break;
+      case 'dust':
+        router.push('/dust/warn/home');
+        break;
+      case 'gas':
+        router.push('/gas/warn/home');
+        break;
+      case 'sbyj':
+        // router.push('/device/warn/home');
+        router.push('/device/warn/home');
+        break;
+    }
+  }
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag = false) {
+    timer = setTimeout(
+      async () => {
+        // await getDataSource();
+        await getList();
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      },
+      flag ? 0 : 10000
+    );
   }
-}
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag = false) {
-  timer = setTimeout(
-    async () => {
-      // await getDataSource();
-      await getList();
-      if (timer) {
-        timer = null;
+
+  // 获取预警数据
+  async function getList() {
+    const res = await getTotalList({});
+    console.log(res, '预警数据--------------');
+    fireMonitor1.length = 0;
+    windData.levels = res.info.sysInfo.ventS.levels;
+    windData.levels['blue'] = warnNumMap.get('vent');
+    // windData.jf = res.ventInfo.zongfengliang;
+    windData.jf = res.ventInfo.zongjinfeng;
+    windData.hf = res.ventInfo.zonghuifeng;
+    windData.xf = res.ventInfo.xufengliang;
+    dustData.levels = res.info.sysInfo.dustS.levels;
+    dustData.levels['blue'] = warnNumMap.get('dust');
+    centerData.fire = res.info.sysInfo.fireS.maxLevel;
+    centerData.tf = res.info.sysInfo.ventS.maxLevel;
+    centerData.ws = res.info.sysInfo.gasS.maxLevel;
+    centerData.sb = res.info.deviceWarnInfo.maxLevel;
+    centerData.fc = res.info.sysInfo.dustS.maxLevel;
+    centerData.riskLevel = res.info.sysInfo.dustS.maxLevel;
+    Levels = await getDisasterProportion();
+
+    centerData.levels = 0 < Levels.level <= 1 ? 101 : 1 < Levels.level <= 2 ? 102 : 2 < Levels.level <= 3 ? 103 : 3 < Levels.level <= 4 ? 104 : 0;
+
+    Object.keys(iconsMonitor).forEach((el) => {
+      if (res.info.devicekindInfo[el]) {
+        // iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
+        iconsMonitor[el].text = res.info.devicekindInfo[el].name;
+        iconsMonitor[el].allCount = res.info.devicekindInfo[el].totalcount;
+        iconsMonitor[el].warnCount = res.info.devicekindInfo[el].count;
+        iconsMonitor[el].closeCount = res.info.devicekindInfo[el].netstatus;
       }
-      getMonitor();
-    },
-    flag ? 0 : 10000
-  );
-}
-
-// 获取预警数据
-async function getList() {
-  const res = await getTotalList({});
-  console.log(res, '预警数据--------------');
-  fireMonitor1.length = 0;
-  windData.levels = res.info.sysInfo.ventS.levels;
-  windData.levels['blue'] = warnNumMap.get('vent');
-  // windData.jf = res.ventInfo.zongfengliang;
-  windData.jf = res.ventInfo.zongjinfeng;
-  windData.hf = res.ventInfo.zonghuifeng;
-  windData.xf = res.ventInfo.xufengliang;
-  dustData.levels = res.info.sysInfo.dustS.levels;
-  dustData.levels['blue'] = warnNumMap.get('dust');
-  centerData.fire = res.info.sysInfo.fireS.maxLevel;
-  centerData.tf = res.info.sysInfo.ventS.maxLevel;
-  centerData.ws = res.info.sysInfo.gasS.maxLevel;
-  centerData.sb = res.info.deviceWarnInfo.maxLevel;
-  centerData.fc = res.info.sysInfo.dustS.maxLevel;
-  Levels = await getDisasterProportion()
-
-  centerData.levels = 0 < Levels.level <= 1 ? 101 : 1 < Levels.level <= 2 ? 102 : 2 < Levels.level <= 3 ? 103 : 3 < Levels.level <= 4 ? 104 : 0
-
-  Object.keys(iconsMonitor).forEach((el) => {
-    if (res.info.devicekindInfo[el]) {
-      // iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
-      iconsMonitor[el].text = res.info.devicekindInfo[el].name;
-      iconsMonitor[el].allCount = res.info.devicekindInfo[el].totalcount;
-      iconsMonitor[el].warnCount = res.info.devicekindInfo[el].count;
-      iconsMonitor[el].closeCount = res.info.devicekindInfo[el].netstatus;
-    }
-  });
-  fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo
-    ? res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
-      ? '正常'
-      : ''
-    : '';
-  fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo
-    ? res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
-      res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel &&
-      res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel == '0'
-      ? '正常'
-      : ''
-    : '';
-
-  fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo
-    ? res.info.sysInfo.fireS.summaryInfo.external.fireval &&
-      res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel &&
-      res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel == '0'
-      ? '正常'
-      : ''
-    : '';
-
-  fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo
-    ? res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
-      ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
-      : ''
-    : '';
-
-  if (res.bundletubeInfo && res.bundletubeInfo.msgTxt.length != 0 && res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
-    res.bundletubeInfo.msgTxt[0].datalist.forEach((el, ind) => {
-      fireMonitor1.push({
-        warnLevel: el.syswarnLevel_str,
-        smokeJd: el.syswarnLevel_des,
-        value1: el.strinstallpos,
+    });
+    fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
+        ? '正常'
+        : ''
+      : '';
+    fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
+        res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel &&
+        res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel == '0'
+        ? '正常'
+        : ''
+      : '';
+
+    fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.fireval &&
+        res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel &&
+        res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel == '0'
+        ? '正常'
+        : ''
+      : '';
+
+    fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
+        ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
+        : ''
+      : '';
+
+    if (res.bundletubeInfo && res.bundletubeInfo.msgTxt.length != 0 && res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
+      res.bundletubeInfo.msgTxt[0].datalist.forEach((el, ind) => {
+        fireMonitor1.push({
+          warnLevel: el.syswarnLevel_str,
+          smokeJd: el.syswarnLevel_des,
+          value1: el.strinstallpos,
+        });
       });
+    } else {
+      fireMonitor1.length = 0;
+    }
+    gasMonitor.length = 0;
+    gasData.sums = 0;
+    gasData.sums1 = 0;
+    res.info.sysInfo.gasS.devices.forEach((el) => {
+      gasData.sums += el.gasNumber;
+      gasData.sums1 += el.pumpNumber;
+      gasMonitor.push({ label: el.systemname, value: el.gasNumber, value1: el.pumpNumber });
+    });
+  }
+
+  function getLevelNum() {
+    return new Promise(async (resolve) => {
+      const typeArr = ['fire', 'dust', 'vent', 'gas'];
+      for (let i = 0; i < typeArr.length; i++) {
+        const type = typeArr[i];
+        const result = await sysTypeWarnList({ type });
+        warnNumMap.set(type, result['length']);
+      }
+      resolve(null);
     });
-  } else {
-    fireMonitor1.length = 0;
   }
-  gasMonitor.length = 0;
-  gasData.sums = 0;
-  gasData.sums1 = 0;
-  res.info.sysInfo.gasS.devices.forEach((el) => {
-    gasData.sums += el.gasNumber;
-    gasData.sums1 += el.pumpNumber;
-    gasMonitor.push({ label: el.systemname, value: el.gasNumber, value1: el.pumpNumber });
+
+  onMounted(async () => {
+    let { sysOrgCode } = useGlobSetting();
+    warnLevels.value = sysOrgCode;
+    await getLevelNum();
+    await getMonitor(true);
+    rainBg('rain', 'animation-box');
   });
-}
-
-function getLevelNum() {
-  return new Promise(async (resolve) => {
-    const typeArr = ['fire', 'dust', 'vent', 'gas'];
-    for (let i = 0; i < typeArr.length; i++) {
-      const type = typeArr[i];
-      const result = await sysTypeWarnList({ type });
-      warnNumMap.set(type, result['length']);
+
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
     }
-    resolve(null);
   });
-}
-
-onMounted(async () => {
-  let { sysOrgCode } = useGlobSetting();
-  warnLevels.value = sysOrgCode;
-  await getLevelNum();
-  await getMonitor(true);
-  rainBg('rain', 'animation-box');
-});
-
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/vent/color.less';
-@a: 370px; // 椭圆x轴半径(长半径)
-@b: 107px; // 椭圆y轴半径(短半径)
-@s: 40; // 坐标点的数目(数目越大，动画越精细)
-
-@bg: #e6e2df;
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/color.less';
+  @a: 370px; // 椭圆x轴半径(长半径)
+  @b: 107px; // 椭圆y轴半径(短半径)
+  @s: 40; // 坐标点的数目(数目越大，动画越精细)
 
-.loop(@index) when (@index < @s + 1) {
-  .loop((@index + 1));
-  @keyframeSel: @index * 100% ./ @s;
+  @bg: #e6e2df;
 
-  @{keyframeSel} {
-    transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
-  }
-}
+  .loop(@index) when (@index < @s + 1) {
+    .loop((@index + 1));
+    @keyframeSel: @index * 100% ./ @s;
 
-@{theme-deepblue} {
-  .sensor-container {
-    --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-    --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
-    // --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
-    --image-fire-bg-top: url('/@/assets/images/themify/deepblue/vent/fire-bg-top.png');
-    --image-icon-bottom-bg: url('/@/assets/images/themify/deepblue/vent/icon-bottom-bg.png');
-    --image-outer-icon: url('/@/assets/images/themify/deepblue/vent/outer-icon.svg');
-    --image-inner-icon: url('/@/assets/images/themify/deepblue/vent/inner-icon.svg');
-    --image-box-bottom-bg: none;
-    // --image-box-bottom-bg: url('/@/assets/images/themify/deepblue/vent/box-bottom-bg.png');
-    --image-center-bg: url('/@/assets/images/themify/deepblue/vent/alarm/center-bg.png');
-    --image-warning-bg: url('/@/assets/images/themify/deepblue/vent/alarm/warning-bg.png');
-    --image-warning-icon-bg1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg1.png');
-    --image-warning-icon-bg-a1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a1.png');
-    --image-warning-icon-bg2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg2.png');
-    --image-warning-icon-bg-a2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a2.png');
-    --image-warning-icon-bg3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg3.png');
-    --image-warning-icon-bg-a3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a3.png');
-    --image-warning-icon-bg4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg4.png');
-    --image-warning-icon-bg-a4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a4.png');
-    --image-warning-icon-bg5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg5.png');
-    --image-warning-icon-bg-a5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a5.png');
-    --image-bottom1: url('/@/assets/images/themify/deepblue/vent/alarm/bottom1.png');
-    --image-bottom: url('/@/assets/images/themify/deepblue/vent/alarm/bottom.png');
-    --image-icon-bg: url('/@/assets/images/themify/deepblue/vent/alarm/icon-bg.png');
-    --image-icon-animation: url('/@/assets/images/themify/deepblue/vent/alarm/icon-animation.png');
-    --image-data-bg: url('/@/assets/images/themify/deepblue/vent/alarm/data-bg.png');
-    --image-icon-fire: url('/@/assets/images/themify/deepblue/vent/alarm/icon-fire.svg');
-    --image-icon-device: url('/@/assets/images/themify/deepblue/vent/alarm/icon-device.svg');
-    --image-icon-dust: url('/@/assets/images/themify/deepblue/vent/alarm/icon-dust.svg');
-    --image-icon-gas: url('/@/assets/images/themify/deepblue/vent/alarm/icon-gas.svg');
-    --image-icon-vent: url('/@/assets/images/themify/deepblue/vent/alarm/icon-vent.svg');
-    --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-    --image-plane: url('/@/assets/images/themify/deepblue/vent/plane.png');
-    --image-small-bg1: url('/@/assets/images/themify/deepblue/vent/small-bg1.png');
-    --image-plane1: url('/@/assets/images/themify/deepblue/vent/plane1.png');
-    --container-color: #0e223b;
-    // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
-    --container-image: none;
+    @{keyframeSel} {
+      transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
+    }
   }
 
-  .sensor-container {
-    .center-box {
-      position: relative;
+  @{theme-deepblue} {
+    .sensor-container {
+      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+      --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
+      // --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
+      --image-fire-bg-top: url('/@/assets/images/themify/deepblue/vent/fire-bg-top.png');
+      --image-icon-bottom-bg: url('/@/assets/images/themify/deepblue/vent/icon-bottom-bg.png');
+      --image-outer-icon: url('/@/assets/images/themify/deepblue/vent/outer-icon.svg');
+      --image-inner-icon: url('/@/assets/images/themify/deepblue/vent/inner-icon.svg');
+      --image-box-bottom-bg: none;
+      // --image-box-bottom-bg: url('/@/assets/images/themify/deepblue/vent/box-bottom-bg.png');
+      --image-center-bg: url('/@/assets/images/themify/deepblue/vent/alarm/center-bg.png');
+      --image-warning-bg: url('/@/assets/images/themify/deepblue/vent/alarm/warning-bg.png');
+      --image-warning-icon-bg1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg1.png');
+      --image-warning-icon-bg-a1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a1.png');
+      --image-warning-icon-bg2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg2.png');
+      --image-warning-icon-bg-a2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a2.png');
+      --image-warning-icon-bg3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg3.png');
+      --image-warning-icon-bg-a3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a3.png');
+      --image-warning-icon-bg4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg4.png');
+      --image-warning-icon-bg-a4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a4.png');
+      --image-warning-icon-bg5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg5.png');
+      --image-warning-icon-bg-a5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a5.png');
+      --image-bottom1: url('/@/assets/images/themify/deepblue/vent/alarm/bottom1.png');
+      --image-bottom: url('/@/assets/images/themify/deepblue/vent/alarm/bottom.png');
+      --image-icon-bg: url('/@/assets/images/themify/deepblue/vent/alarm/icon-bg.png');
+      --image-icon-animation: url('/@/assets/images/themify/deepblue/vent/alarm/icon-animation.png');
+      --image-data-bg: url('/@/assets/images/themify/deepblue/vent/alarm/data-bg.png');
+      --image-icon-fire: url('/@/assets/images/themify/deepblue/vent/alarm/icon-fire.svg');
+      --image-icon-device: url('/@/assets/images/themify/deepblue/vent/alarm/icon-device.svg');
+      --image-icon-dust: url('/@/assets/images/themify/deepblue/vent/alarm/icon-dust.svg');
+      --image-icon-gas: url('/@/assets/images/themify/deepblue/vent/alarm/icon-gas.svg');
+      --image-icon-vent: url('/@/assets/images/themify/deepblue/vent/alarm/icon-vent.svg');
+      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+      --image-plane: url('/@/assets/images/themify/deepblue/vent/plane.png');
+      --image-small-bg1: url('/@/assets/images/themify/deepblue/vent/small-bg1.png');
+      --image-plane1: url('/@/assets/images/themify/deepblue/vent/plane1.png');
+      --container-color: #0e223b;
+      // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
+      --container-image: none;
+    }
 
-      .fire-monitor {
-        border: 1px solid #3a4b5f;
-        border-radius: 10px;
-        background: var(--container-color) no-repeat;
-        padding-top: 20px;
+    .sensor-container {
+      .center-box {
+        position: relative;
 
-        .top {
-          height: 35px;
-          background: var(--image-box-top-bg) no-repeat;
-          background-size: 94% 25px;
-          background-position: center center;
-          padding-left: 6%;
-          text-align: left;
+        .fire-monitor {
+          border: 1px solid #3a4b5f;
+          border-radius: 10px;
+          background: var(--container-color) no-repeat;
+          padding-top: 20px;
+
+          .top {
+            height: 35px;
+            background: var(--image-box-top-bg) no-repeat;
+            background-size: 94% 25px;
+            background-position: center center;
+            padding-left: 6%;
+            text-align: left;
+          }
         }
       }
     }
   }
-}
-
-.sensor-container {
-  --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
-  --image-box-top-bg: url('/@/assets/images/vent/box-top-bg.png');
-  --image-fire-bg-top: url('/@/assets/images/vent/fire-bg-top.png');
-  --image-icon-bottom-bg: url('/@/assets/images/vent/icon-bottom-bg.png');
-  --image-outer-icon: url('/@/assets/images/vent/outer-icon.svg');
-  --image-inner-icon: url('/@/assets/images/vent/inner-icon.svg');
-  --image-box-bottom-bg: url('/@/assets/images/vent/box-bottom-bg.png');
-  --image-center-bg: url('/@/assets/images/vent/alarm/center-bg.png');
-  --image-warning-bg: url('/@/assets/images/vent/alarm/warning-bg.png');
-  --image-warning-icon-bg1: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
-  --image-warning-icon-bg-a1: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
-  --image-warning-icon-bg2: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
-  --image-warning-icon-bg-a2: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
-  --image-warning-icon-bg3: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
-  --image-warning-icon-bg-a3: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
-  --image-warning-icon-bg4: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
-  --image-warning-icon-bg-a4: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
-  --image-warning-icon-bg5: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
-  --image-warning-icon-bg-a5: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
-  --image-bottom1: url('/@/assets/images/vent/alarm/bottom1.png');
-  --image-bottom: url('/@/assets/images/vent/alarm/bottom.png');
-  --image-icon-bg: url('/@/assets/images/vent/alarm/icon-bg.png');
-  --image-icon-animation: url('/@/assets/images/vent/alarm/icon-animation.png');
-  --image-data-bg: url('/@/assets/images/vent/alarm/data-bg.png');
-  --image-icon-fire: url('/@/assets/images/vent/alarm/icon-fire.svg');
-  --image-icon-device: url('/@/assets/images/vent/alarm/icon-device.svg');
-  --image-icon-dust: url('/@/assets/images/vent/alarm/icon-dust.svg');
-  --image-icon-gas: url('/@/assets/images/vent/alarm/icon-gas.svg');
-  --image-icon-vent: url('/@/assets/images/vent/alarm/icon-vent.svg');
-  --image-value-bg: url('/@/assets/images/vent/value-bg.png');
-  --image-plane: url('/@/assets/images/vent/plane.png');
-  --image-small-bg1: url('/@/assets/images/vent/small-bg1.png');
-  --image-plane1: url('/@/assets/images/vent/plane1.png');
-  --container-color: #00213236;
-  --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
-  width: 100%;
-  height: calc(100% - 86px);
-  display: flex;
-  position: relative;
-  top: 78px;
-
-  .lr {
-    width: 650px;
-    height: 100%;
-
-    // background-color: #ffffff10;
-  }
 
-  .left-box {
-    .vent-param {
-      width: 100%;
-      margin-top: 10px;
+  .sensor-container {
+    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+    --image-box-top-bg: url('/@/assets/images/vent/box-top-bg.png');
+    --image-fire-bg-top: url('/@/assets/images/vent/fire-bg-top.png');
+    --image-icon-bottom-bg: url('/@/assets/images/vent/icon-bottom-bg.png');
+    --image-outer-icon: url('/@/assets/images/vent/outer-icon.svg');
+    --image-inner-icon: url('/@/assets/images/vent/inner-icon.svg');
+    --image-box-bottom-bg: url('/@/assets/images/vent/box-bottom-bg.png');
+    --image-center-bg: url('/@/assets/images/vent/alarm/center-bg.png');
+    --image-warning-bg: url('/@/assets/images/vent/alarm/warning-bg.png');
+    --image-warning-icon-bg1: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
+    --image-warning-icon-bg-a1: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
+    --image-warning-icon-bg2: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
+    --image-warning-icon-bg-a2: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
+    --image-warning-icon-bg3: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
+    --image-warning-icon-bg-a3: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
+    --image-warning-icon-bg4: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
+    --image-warning-icon-bg-a4: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
+    --image-warning-icon-bg5: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
+    --image-warning-icon-bg-a5: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
+    --image-bottom1: url('/@/assets/images/vent/alarm/bottom1.png');
+    --image-bottom: url('/@/assets/images/vent/alarm/bottom.png');
+    --image-icon-bg: url('/@/assets/images/vent/alarm/icon-bg.png');
+    --image-icon-animation: url('/@/assets/images/vent/alarm/icon-animation.png');
+    --image-data-bg: url('/@/assets/images/vent/alarm/data-bg.png');
+    --image-icon-fire: url('/@/assets/images/vent/alarm/icon-fire.svg');
+    --image-icon-device: url('/@/assets/images/vent/alarm/icon-device.svg');
+    --image-icon-dust: url('/@/assets/images/vent/alarm/icon-dust.svg');
+    --image-icon-gas: url('/@/assets/images/vent/alarm/icon-gas.svg');
+    --image-icon-vent: url('/@/assets/images/vent/alarm/icon-vent.svg');
+    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+    --image-plane: url('/@/assets/images/vent/plane.png');
+    --image-small-bg1: url('/@/assets/images/vent/small-bg1.png');
+    --image-plane1: url('/@/assets/images/vent/plane1.png');
+    --container-color: #00213236;
+    --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+    width: 100%;
+    height: calc(100% - 86px);
+    display: flex;
+    position: relative;
+    top: 78px;
 
-      .light-group {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        position: relative;
+    .lr {
+      width: 650px;
+      height: 100%;
 
-        .param-item {
-          width: 150px;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          position: reactive;
+      // background-color: #ffffff10;
+    }
 
-          .icon {
-            display: block;
-            position: absolute;
-            top: -5px;
-          }
+    .left-box {
+      .vent-param {
+        width: 100%;
+        margin-top: 10px;
+
+        .light-group {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          position: relative;
 
-          .param {
+          .param-item {
+            width: 150px;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
+            position: reactive;
+
+            .icon {
+              display: block;
+              position: absolute;
+              top: -5px;
+            }
 
-            .param-icon {
-              width: 121px;
-              height: 69px;
-              background: var(--image-vent-param-bg);
+            .param {
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
-              position: relative;
-              top: -20px;
-              margin-top: 10px;
 
-              .param-title {
+              .param-icon {
+                width: 121px;
+                height: 69px;
+                background: var(--image-vent-param-bg);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
                 position: relative;
-                top: -4px;
-              }
+                top: -20px;
+                margin-top: 10px;
 
-              .param-unit {
-                position: relative;
-                top: -2px;
-                font-size: 12px;
-              }
-            }
+                .param-title {
+                  position: relative;
+                  top: -4px;
+                }
 
-            .param-val-box {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              position: relative;
-              top: -20px;
+                .param-unit {
+                  position: relative;
+                  top: -2px;
+                  font-size: 12px;
+                }
+              }
 
-              .param-val-icon {
-                width: 2px;
-                height: 15px;
-                background: #00d8ff;
+              .param-val-box {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
                 position: relative;
+                top: -20px;
 
-                &::after {
-                  content: '';
-                  display: block;
-                  position: absolute;
-                  width: 6px;
-                  height: 6px;
-                  border-radius: 3px;
+                .param-val-icon {
+                  width: 2px;
+                  height: 15px;
                   background: #00d8ff;
-                  bottom: -2px;
-                  left: -2px;
+                  position: relative;
+
+                  &::after {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    width: 6px;
+                    height: 6px;
+                    border-radius: 3px;
+                    background: #00d8ff;
+                    bottom: -2px;
+                    left: -2px;
+                  }
                 }
-              }
 
-              .param-val {
-                position: relative;
-                font-family: 'douyuFont';
-                // color: #20dbfd;
-                text-shadow: 0 0 25px #00d8ff;
-                font-size: 13px;
-                border: 1px solid #40b7f3;
-                padding: 5px 30px 2px 30px;
-                top: 2px;
-
-                &::after {
-                  width: calc(100% - 4px);
-                  height: calc(100% - 4px);
-                  content: '';
-                  position: absolute;
+                .param-val {
+                  position: relative;
+                  font-family: 'douyuFont';
+                  // color: #20dbfd;
+                  text-shadow: 0 0 25px #00d8ff;
+                  font-size: 13px;
+                  border: 1px solid #40b7f3;
+                  padding: 5px 30px 2px 30px;
                   top: 2px;
-                  left: 2px;
-                  display: block;
-                  border: 1px solid #006ea6;
+
+                  &::after {
+                    width: calc(100% - 4px);
+                    height: calc(100% - 4px);
+                    content: '';
+                    position: absolute;
+                    top: 2px;
+                    left: 2px;
+                    display: block;
+                    border: 1px solid #006ea6;
+                  }
                 }
               }
             }
           }
         }
       }
-    }
-
-    .icons-box {
-      height: 365px;
-      overflow-y: hidden;
-
-      &:hover {
-        overflow-y: auto;
-        overflow-x: auto;
-      }
 
-      .icon-item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 3px;
+      .icons-box {
+        height: 365px;
+        overflow-y: hidden;
 
-        &:nth-child(even) {
-          padding-right: 0px;
+        &:hover {
+          overflow-y: auto;
+          overflow-x: auto;
         }
 
-        .level-text {
-          width: 245px;
+        .icon-item {
+          position: relative;
           display: flex;
-          justify-content: space-around;
-          position: absolute;
-          top: 48px;
-          left: 180px;
-          color: #ffffffe0;
-          font-size: 13px;
-          text-align: center;
-          letter-spacing: 1px;
+          align-items: center;
+          justify-content: center;
+          padding: 3px;
 
-          .num-count,
-          .num-count1 {
-            font-family: 'douyuFont';
-            font-size: 12px;
+          &:nth-child(even) {
+            padding-right: 0px;
           }
 
-          .warn-count,
-          .close-count {
-            .num-count {
-              color: #ffffffe0;
-            }
+          .level-text {
+            width: 245px;
+            display: flex;
+            justify-content: space-around;
+            position: absolute;
+            top: 48px;
+            left: 180px;
+            color: #ffffffe0;
+            font-size: 13px;
+            text-align: center;
+            letter-spacing: 1px;
 
+            .num-count,
             .num-count1 {
-              color: #ff0000;
+              font-family: 'douyuFont';
+              font-size: 12px;
+            }
+
+            .warn-count,
+            .close-count {
+              .num-count {
+                color: #ffffffe0;
+              }
+
+              .num-count1 {
+                color: #ff0000;
+              }
             }
           }
-        }
 
-        img {
-          width: 427px;
-          height: 79px;
+          img {
+            width: 427px;
+            height: 79px;
+          }
         }
-      }
 
-      .wrapper {
-        position: absolute;
-        top: 48px;
-        left: 112px;
-        color: #ffffffe0;
-        font-size: 13px;
-        text-align: center;
-        letter-spacing: 1px;
+        .wrapper {
+          position: absolute;
+          top: 48px;
+          left: 112px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
+        }
       }
-    }
 
-    @keyframes move {
-      0% {
-        transform: translateY(0px);
-      }
+      @keyframes move {
+        0% {
+          transform: translateY(0px);
+        }
 
-      100% {
-        transform: translateY(-269px);
+        100% {
+          transform: translateY(-269px);
+        }
       }
-    }
 
-    @keyframes move1 {
-      0% {
-        transform: translateY(0px);
+      @keyframes move1 {
+        0% {
+          transform: translateY(0px);
+        }
       }
     }
-  }
-
-  .center-box {
-    position: relative;
-    width: calc(100% - 710px);
-    // background-color: #ffffff10;
-    margin: 0 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-
-    .echart-warn-grade {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 400px;
-      height: 200px;
-    }
-
-    .btn-warn-grade {
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
 
-    .fire-monitor {
+    .center-box {
+      position: relative;
+      width: calc(100% - 710px);
+      // background-color: #ffffff10;
+      margin: 0 8px;
       display: flex;
       flex-direction: column;
-      width: 100%;
-      position: relative;
+      justify-content: flex-end;
 
-      .top {
-        width: 100%;
-        height: 35px;
-        background: var(--image-box-top-bg);
-        background-size: 100% 100%;
-        text-align: center;
-        color: var(--vent-font-color);
-        padding-top: 6px;
+      .echart-warn-grade {
+        position: absolute;
+        left: -20px;
+        top: 0;
+        width: 400px;
+        height: 200px;
       }
 
-      .container {
-        width: calc(100% - 2px);
-        min-height: 50px;
-        padding: 0 10px;
-        color: var(--vent-font-color);
-        background-color: var(--container-color);
-        backdrop-filter: blur(5px);
+      .btn-warn-grade {
+        position: absolute;
+        right: 30px;
+        top: 10px;
+      }
 
-        &::before {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 5px;
-          left: 0;
-          width: 1px;
-          height: calc(100% - 10px);
-          background-image: var(--container-image);
-        }
+      .fire-monitor {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        position: relative;
 
-        &::after {
-          content: '';
-          display: block;
-          position: absolute;
-          right: 0;
-          top: 5px;
-          width: 1px;
-          height: calc(100% - 10px);
-          background: var(--container-image);
+        .top {
+          width: 100%;
+          height: 35px;
+          background: var(--image-box-top-bg);
+          background-size: 100% 100%;
+          text-align: center;
+          color: var(--vent-font-color);
+          padding-top: 6px;
         }
 
-        .item {
-          height: 130px;
-          width: 100%;
-          position: relative;
-          top: -10px;
-          display: flex;
-          // justify-content: space-between;
-          align-content: center;
-          padding-top: 50px;
+        .container {
+          width: calc(100% - 2px);
+          min-height: 50px;
+          padding: 0 10px;
+          color: var(--vent-font-color);
+          background-color: var(--container-color);
+          backdrop-filter: blur(5px);
 
           &::before {
             content: '';
-            width: 100%;
-            height: 150px;
+            display: block;
             position: absolute;
-            top: 0px;
-            background: var(--image-fire-bg-top);
-            background-size: 100% 100%;
+            top: 5px;
+            left: 0;
+            width: 1px;
+            height: calc(100% - 10px);
+            background-image: var(--container-image);
+          }
+
+          &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            right: 0;
+            top: 5px;
+            width: 1px;
+            height: calc(100% - 10px);
+            background: var(--container-image);
           }
 
-          .icon {
-            width: 82px;
-            height: 36px;
-            margin: 0 20px 0 50px;
-            background: var(--image-icon-bottom-bg);
+          .item {
+            height: 130px;
+            width: 100%;
             position: relative;
-            top: 30px;
+            top: -10px;
+            display: flex;
+            // justify-content: space-between;
+            align-content: center;
+            padding-top: 50px;
 
-            &::after {
-              position: absolute;
+            &::before {
               content: '';
-              width: 50px;
-              height: 50px;
-              top: -25px;
-              left: 20px;
-              background: var(--image-outer-icon) no-repeat;
+              width: 100%;
+              height: 150px;
+              position: absolute;
+              top: 0px;
+              background: var(--image-fire-bg-top);
+              background-size: 100% 100%;
             }
-          }
 
-          .data-box1 {
-            display: flex;
-            flex-direction: column;
+            .icon {
+              width: 82px;
+              height: 36px;
+              margin: 0 20px 0 50px;
+              background: var(--image-icon-bottom-bg);
+              position: relative;
+              top: 30px;
+
+              &::after {
+                position: absolute;
+                content: '';
+                width: 50px;
+                height: 50px;
+                top: -25px;
+                left: 20px;
+                background: var(--image-outer-icon) no-repeat;
+              }
+            }
 
-            width: 118px;
-            align-items: center;
+            .data-box1 {
+              display: flex;
+              flex-direction: column;
 
-            .value {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              color: #2bdcff;
-              margin-bottom: 5px;
-            }
+              width: 118px;
+              align-items: center;
 
-            .value1 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: rgb(145, 230, 9);
-            }
+              .value {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                color: #2bdcff;
+                margin-bottom: 5px;
+              }
 
-            .value2 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              // color: rgb(0, 242, 255);
-              color: #ffff35;
-            }
+              .value1 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: rgb(145, 230, 9);
+              }
 
-            .value3 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              // color: #ffff35;
-              color: #ff0000;
-            }
+              .value2 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: rgb(0, 242, 255);
+                color: #ffff35;
+              }
 
-            .value4 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ffbe69;
-            }
+              .value3 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: #ffff35;
+                color: #ff0000;
+              }
 
-            .value5 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ff6f00;
-            }
+              .value4 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ffbe69;
+              }
 
-            .value6 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ff0000;
-            }
+              .value5 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff6f00;
+              }
 
-            .title {
-              font-size: 13px;
-            }
-          }
+              .value6 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff0000;
+              }
 
-          .seamless-warp1 {
-            width: 625px;
-            height: 75%;
-            overflow: hidden;
+              .title {
+                font-size: 13px;
+              }
+            }
 
-            .data-box {
-              display: flex;
+            .seamless-warp1 {
               width: 625px;
-              justify-content: center;
-              align-items: center;
-              margin: 40px auto;
+              height: 75%;
+              overflow: hidden;
 
-              .box-item {
-                width: 25%;
-                height: 100%;
+              .data-box {
                 display: flex;
-                flex-direction: column;
+                width: 625px;
+                justify-content: center;
                 align-items: center;
-                padding: 0 20px;
-
-                .value {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  color: #2bdcff;
-                  margin-bottom: 5px;
+                margin: 40px auto;
+
+                .box-item {
+                  width: 25%;
+                  height: 100%;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  padding: 0 20px;
+
+                  .value {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    color: #2bdcff;
+                    margin-bottom: 5px;
+                  }
+
+                  .value1 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    color: rgb(145, 230, 9);
+                  }
+
+                  .value2 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    // color: rgb(0, 242, 255);
+                    color: #ffff35;
+                  }
+
+                  .value3 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    // color: #ffff35;
+                    color: #ff0000;
+                  }
+
+                  .value4 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    color: #ffbe69;
+                  }
+
+                  .value5 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    color: #ff6f00;
+                  }
+
+                  .value6 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    color: #ff0000;
+                  }
+
+                  .title {
+                    font-size: 13px;
+                  }
                 }
 
-                .value1 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  color: rgb(145, 230, 9);
+                .box-item1 {
+                  width: 50%;
+                  height: 100%;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  padding: 0 20px;
+
+                  .value {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    color: #2bdcff;
+                    margin-bottom: 5px;
+                  }
+
+                  .value1 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    color: rgb(145, 230, 9);
+                  }
+
+                  .value2 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    // color: rgb(0, 242, 255);
+                    color: #ffff35;
+                  }
+
+                  .value3 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    // color: #ffff35;
+                    color: #ff0000;
+                  }
+
+                  .value4 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    color: #ffbe69;
+                  }
+
+                  .value5 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    color: #ff6f00;
+                  }
+
+                  .value6 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    color: #ff0000;
+                  }
+
+                  .title {
+                    font-size: 13px;
+                  }
                 }
+              }
+            }
+          }
 
-                .value2 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  // color: rgb(0, 242, 255);
-                  color: #ffff35;
-                }
+          .item1 {
+            top: -10px;
 
-                .value3 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  // color: #ffff35;
-                  color: #ff0000;
-                }
-
-                .value4 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  color: #ffbe69;
-                }
-
-                .value5 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  color: #ff6f00;
-                }
-
-                .value6 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  color: #ff0000;
-                }
-
-                .title {
-                  font-size: 13px;
-                }
-              }
-
-              .box-item1 {
-                width: 50%;
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                padding: 0 20px;
-
-                .value {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  color: #2bdcff;
-                  margin-bottom: 5px;
-                }
-
-                .value1 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  color: rgb(145, 230, 9);
-                }
-
-                .value2 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  // color: rgb(0, 242, 255);
-                  color: #ffff35;
-                }
-
-                .value3 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  // color: #ffff35;
-                  color: #ff0000;
-                }
-
-                .value4 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  color: #ffbe69;
-                }
-
-                .value5 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  color: #ff6f00;
-                }
-
-                .value6 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  color: #ff0000;
-                }
+            &::before {
+              transform: matrix(1, 0, 0, -1, 0, 0);
+            }
 
-                .title {
-                  font-size: 13px;
-                }
+            .icon {
+              &::after {
+                background: var(--image-inner-icon) no-repeat;
               }
             }
           }
         }
 
-        .item1 {
-          top: -10px;
-
-          &::before {
-            transform: matrix(1, 0, 0, -1, 0, 0);
-          }
-
-          .icon {
-            &::after {
-              background: var(--image-inner-icon) no-repeat;
-            }
-          }
+        .bottom {
+          width: 100%;
+          height: 35px;
+          background: var(--image-box-bottom-bg);
+          background-size: 100% 100%;
+          position: absolute;
+          bottom: 0;
         }
       }
 
-      .bottom {
-        width: 100%;
-        height: 35px;
-        background: var(--image-box-bottom-bg);
-        background-size: 100% 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    }
-
-    .animation-box {
-      height: fit-content;
-      flex: 1;
-      margin-bottom: 10px;
-      background: var(--image-center-bg);
-      background-size: contain;
-      background-position: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: relative;
-      top: 45px;
-
-      .rain {
-        position: absolute;
-      }
-
-      .bottom {
-        width: 528px;
-        height: 395px;
-        background-repeat: no-repeat;
-        position: absolute;
-        z-index: 999;
+      .animation-box {
+        height: fit-content;
+        flex: 1;
+        margin-bottom: 10px;
+        background: var(--image-center-bg);
+        background-size: contain;
+        background-position: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        top: 45px;
 
-        &::before {
-          content: '';
-          width: 325px;
-          height: 379px;
+        .rain {
           position: absolute;
-          left: 105px;
-          top: -60px;
-          background: var(--image-warning-bg) no-repeat;
         }
 
-        .animation1 {
-          width: 390px;
-          height: 78px;
+        .bottom {
+          width: 528px;
+          height: 395px;
+          background-repeat: no-repeat;
           position: absolute;
-          top: -30px;
-          left: 80px;
           z-index: 999;
 
-          // animation: rotate3 3s linear infinite;
-          .ball {
+          &::before {
+            content: '';
+            width: 325px;
+            height: 379px;
             position: absolute;
-            width: 12px;
-            height: 12px;
-            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
-            border-radius: 6px;
-            background-size: cover;
-            offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
-              );
-            animation: 10s linear 0s infinite alternate ball;
+            left: 105px;
+            top: -60px;
+            background: var(--image-warning-bg) no-repeat;
           }
-        }
 
-        .animation2 {
-          width: 430px;
-          height: 92px;
-          position: absolute;
-          top: 0px;
-          left: 60px;
-          z-index: 999;
-
-          // animation: rotate4 3s linear infinite;
-          .ball1 {
+          .animation1 {
+            width: 390px;
+            height: 78px;
             position: absolute;
-            width: 12px;
-            height: 12px;
-            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
-            border-radius: 6px;
-            background-size: cover;
-            offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
+            top: -30px;
+            left: 80px;
+            z-index: 999;
+
+            // animation: rotate3 3s linear infinite;
+            .ball {
+              position: absolute;
+              width: 12px;
+              height: 12px;
+              background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+              border-radius: 6px;
+              background-size: cover;
+              offset-path: path(
+                'M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
               );
-            animation: 10s linear 0s infinite alternate ball1;
+              animation: 10s linear 0s infinite alternate ball;
+            }
           }
-        }
-
-        .text-box {
-          width: 100%;
-          display: flex;
-          flex-direction: column;
-          color: var(--vent-font-color);
-          align-items: center;
-          margin-top: 90px;
 
-          .text1 {
-            font-size: 26px;
-            font-weight: 600;
-            letter-spacing: 2px;
-            margin-bottom: 10px;
-          }
+          .animation2 {
+            width: 430px;
+            height: 92px;
+            position: absolute;
+            top: 0px;
+            left: 60px;
+            z-index: 999;
 
-          .text2 {
-            font-size: 18px;
-            color: #ffffffdd;
+            // animation: rotate4 3s linear infinite;
+            .ball1 {
+              position: absolute;
+              width: 12px;
+              height: 12px;
+              background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+              border-radius: 6px;
+              background-size: cover;
+              offset-path: path(
+                'M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
+              );
+              animation: 10s linear 0s infinite alternate ball1;
+            }
           }
-        }
 
-        .icon-animation {
-          width: 178px;
-          height: 208px;
-          margin: 0 auto;
-          top: -130px;
-          left: 4px;
-          position: relative;
-          animation: 0.5s linear 0s infinite alternate iconMove;
-        }
-      }
+          .text-box {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            color: var(--vent-font-color);
+            align-items: center;
+            margin-top: 30px;
 
-      .bottom1 {
-        background-image: var(--image-warning-icon-bg1);
+            .text1 {
+              font-size: 26px;
+              font-weight: 600;
+              letter-spacing: 2px;
+              padding-top: 20px;
+              position: relative;
+              top: 30px;
+              // margin-bottom: 10px;
+            }
 
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a1);
-        }
+            .text2 {
+              font-size: 20px;
+              color: #ffffffdd;
+              font-weight: 600;
+              margin-top: 10px;
+              position: relative;
+              top: 30px;
+            }
+            .text3 {
+              font-size: 16px;
+              color: #ffffffdd;
+              margin-top: 10px;
+              position: relative;
+              top: 20px;
+            }
+          }
 
-        .text-box {
-          .text1 {
-            color: #00d8ff;
+          .icon-animation {
+            width: 178px;
+            height: 208px;
+            margin: 0 auto;
+            top: -130px;
+            left: 4px;
+            position: relative;
+            animation: 0.5s linear 0s infinite alternate iconMove;
           }
         }
-      }
 
-      .bottom2 {
-        background-image: var(--image-warning-icon-bg2);
+        .bottom1 {
+          background-image: var(--image-warning-icon-bg1);
 
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a2);
-        }
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a1);
+          }
 
-        .text-box {
-          .text1 {
-            color: #fcfc22;
+          .text-box {
+            .text1 {
+              color: #00d8ff;
+            }
           }
         }
-      }
 
-      .bottom3 {
-        background-image: var(--image-warning-icon-bg3);
+        .bottom2 {
+          background-image: var(--image-warning-icon-bg2);
 
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a3);
-        }
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a2);
+          }
 
-        .text-box {
-          .text1 {
-            color: #ff7010;
+          .text-box {
+            .text1 {
+              color: #fcfc22;
+            }
           }
         }
-      }
 
-      .bottom4 {
-        background-image: var(--image-warning-icon-bg4);
+        .bottom3 {
+          background-image: var(--image-warning-icon-bg3);
 
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a4);
-        }
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a3);
+          }
 
-        .text-box {
-          .text1 {
-            color: #df4e43;
+          .text-box {
+            .text1 {
+              color: #ff7010;
+            }
           }
         }
-      }
 
-      .bottom5 {
-        background-image: var(--image-warning-icon-bg5);
-
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a5);
-        }
+        .bottom4 {
+          background-image: var(--image-warning-icon-bg4);
 
-        .text-box {
-          .text1 {
-            color: #ff2313;
-            // animation: color-blink 1s infinite;
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a4);
           }
 
-          // @keyframes color-blink {
-          //   0% { color: red; }
-          //   50% { color: blue; }
-          //   100% { color: red; }
-          // }
+          .text-box {
+            .text1 {
+              color: #df4e43;
+            }
+          }
         }
-      }
 
-      .total-item-monitor-box {
-        width: 100%;
-        height: 237px;
-        position: relative;
-        top: 180px;
-        left: 265px;
-        background: var(--image-bottom1) no-repeat;
-        background-size: contain;
+        .bottom5 {
+          background-image: var(--image-warning-icon-bg5);
 
-        &::after {
-          content: '';
-          width: 750px;
-          height: 750px;
-          position: absolute;
-          transform-style: preserve-3d;
-          transform: translateX(0%) translateY(0%) rotateX(72deg);
-          background: var(--image-bottom);
-          animation: rotate1 3s linear infinite;
-          top: -200px;
-          left: -180px;
-        }
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a5);
+          }
 
-        .item {
-          position: absolute;
+          .text-box {
+            .text1 {
+              color: #ff2313;
+              // animation: color-blink 1s infinite;
+            }
 
-          // width: 107px;
-          // height: 107px;
-          // left: 120px;
-          // top: 115px;
-          // animation: red-ball 10s linear infinite;
-          .icon-box {
-            width: 100px;
-            height: 100px;
+            // @keyframes color-blink {
+            //   0% { color: red; }
+            //   50% { color: blue; }
+            //   100% { color: red; }
+            // }
+          }
+        }
 
-            position: relative;
-            z-index: 0;
+        .total-item-monitor-box {
+          width: 100%;
+          height: 237px;
+          position: relative;
+          top: 180px;
+          left: 265px;
+          background: var(--image-bottom1) no-repeat;
+          background-size: contain;
 
-            &::before {
-              position: absolute;
-              content: '';
-              width: 105px;
-              height: 68px;
-              top: 15px;
-              z-index: -1;
-              background: var(--image-icon-bg) no-repeat;
-            }
+          &::after {
+            content: '';
+            width: 750px;
+            height: 750px;
+            position: absolute;
+            transform-style: preserve-3d;
+            transform: translateX(0%) translateY(0%) rotateX(72deg);
+            background: var(--image-bottom);
+            animation: rotate1 3s linear infinite;
+            top: -200px;
+            left: -180px;
+          }
 
-            &::after {
-              position: absolute;
-              content: '';
-              width: 71px;
-              height: 71px;
-              top: 26px;
-              left: 14px;
-              z-index: 1;
-              background: var(--image-icon-animation) no-repeat;
-              transform: translateX(0%) rotateX(70deg);
-              animation: rotate2 2s linear infinite;
-            }
+          .item {
+            position: absolute;
 
-            .icon {
+            // width: 107px;
+            // height: 107px;
+            // left: 120px;
+            // top: 115px;
+            // animation: red-ball 10s linear infinite;
+            .icon-box {
               width: 100px;
               height: 100px;
-              background-repeat: no-repeat;
-              background-position: top center;
-              position: relative;
-              top: 5px;
-            }
-          }
 
-          .item-monitor-box {
-            color: var(--vent-font-color);
-            position: relative;
-            top: -135px;
-            left: -20px;
-            font-weight: 600;
-            // background: #06020066;
-            padding: 5px 20px 8px 20px;
+              position: relative;
+              z-index: 0;
+
+              &::before {
+                position: absolute;
+                content: '';
+                width: 105px;
+                height: 68px;
+                top: 15px;
+                z-index: -1;
+                background: var(--image-icon-bg) no-repeat;
+              }
 
-            &::before {
-              position: absolute;
-              content: '';
-              width: 196px;
-              height: 48px;
-              left: -20px;
-              top: -10px;
-              background: var(--image-data-bg);
-            }
+              &::after {
+                position: absolute;
+                content: '';
+                width: 71px;
+                height: 71px;
+                top: 26px;
+                left: 14px;
+                z-index: 1;
+                background: var(--image-icon-animation) no-repeat;
+                transform: translateX(0%) rotateX(70deg);
+                animation: rotate2 2s linear infinite;
+              }
 
-            .value {
-              color: #2bdcff;
-              margin-left: 20px;
+              .icon {
+                width: 100px;
+                height: 100px;
+                background-repeat: no-repeat;
+                background-position: top center;
+                position: relative;
+                top: 5px;
+              }
             }
 
-            .value1 {
-              font-size: 16px;
-              font-weight: 800;
-              margin-top: 6px;
-              margin-left: 10px;
-              color: #ff0000;
-              animation: color-blink 1s infinite;
-            }
+            .item-monitor-box {
+              color: var(--vent-font-color);
+              position: relative;
+              top: -135px;
+              left: -20px;
+              font-weight: 600;
+              // background: #06020066;
+              padding: 5px 20px 8px 20px;
+
+              &::before {
+                position: absolute;
+                content: '';
+                width: 196px;
+                height: 48px;
+                left: -20px;
+                top: -10px;
+                background: var(--image-data-bg);
+              }
 
-            @keyframes color-blink {
-              0% {
-                color: red;
+              .value {
+                color: #2bdcff;
+                margin-left: 20px;
               }
 
-              50% {
-                color: rgb(198, 0, 0);
+              .value1 {
+                font-size: 16px;
+                font-weight: 800;
+                margin-top: 6px;
+                margin-left: 10px;
+                color: #ff0000;
+                animation: color-blink 1s infinite;
               }
 
-              100% {
-                color: rgb(255, 18, 18);
+              @keyframes color-blink {
+                0% {
+                  color: red;
+                }
+
+                50% {
+                  color: rgb(198, 0, 0);
+                }
+
+                100% {
+                  color: rgb(255, 18, 18);
+                }
               }
             }
           }
-        }
 
-        .item1 {
-          top: 230px;
-          left: 150px;
+          .item1 {
+            top: 230px;
+            left: 150px;
 
-          .icon {
-            background-image: var(--image-icon-fire);
+            .icon {
+              background-image: var(--image-icon-fire);
+            }
           }
-        }
 
-        .item2 {
-          top: 185px;
-          left: -120px;
+          .item2 {
+            top: 185px;
+            left: -120px;
 
-          .icon {
-            background-image: var(--image-icon-device);
+            .icon {
+              background-image: var(--image-icon-device);
+            }
           }
-        }
 
-        .item3 {
-          top: 185px;
-          left: 420px;
+          .item3 {
+            top: 185px;
+            left: 420px;
 
-          .icon {
-            background-image: var(--image-icon-dust);
+            .icon {
+              background-image: var(--image-icon-dust);
+            }
           }
-        }
 
-        .item4 {
-          top: 20px;
-          left: 390px;
+          .item4 {
+            top: 20px;
+            left: 390px;
 
-          .icon {
-            background-image: var(--image-icon-gas);
-          }
+            .icon {
+              background-image: var(--image-icon-gas);
+            }
 
-          .item-monitor-box {
-            top: -155px;
+            .item-monitor-box {
+              top: -155px;
 
-            &::before {
-              top: 10px;
+              &::before {
+                top: 10px;
+              }
             }
           }
-        }
 
-        .item5 {
-          top: 25px;
-          left: -110px;
+          .item5 {
+            top: 25px;
+            left: -110px;
 
-          .icon {
-            background-image: var(--image-icon-vent);
+            .icon {
+              background-image: var(--image-icon-vent);
+            }
           }
         }
-      }
 
-      @keyframes iconMove {
-        100% {
-          opacity: 0;
+        @keyframes iconMove {
+          100% {
+            opacity: 0;
+          }
         }
-      }
 
-      @keyframes rotate1 {
-        0% {
-          transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
-        }
+        @keyframes rotate1 {
+          0% {
+            transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
+          }
 
-        100% {
-          transform: translateX(0%) rotateX(72deg) rotateZ(0);
+          100% {
+            transform: translateX(0%) rotateX(72deg) rotateZ(0);
+          }
         }
-      }
 
-      @keyframes rotate2 {
-        0% {
-          transform: translateX(0%) rotateX(70deg) rotateZ(0);
-        }
+        @keyframes rotate2 {
+          0% {
+            transform: translateX(0%) rotateX(70deg) rotateZ(0);
+          }
 
-        100% {
-          transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
+          100% {
+            transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
+          }
         }
-      }
 
-      @keyframes rotate3 {
-        0% {
-          transform: translateX(0%) rotateX(80deg) rotateZ(0);
-        }
+        @keyframes rotate3 {
+          0% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(0);
+          }
 
-        100% {
-          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+          100% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+          }
         }
-      }
 
-      @keyframes rotate4 {
-        100% {
-          transform: translateX(0%) rotateX(80deg) rotateZ(0);
-        }
+        @keyframes rotate4 {
+          100% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(0);
+          }
 
-        0% {
-          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+          0% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+          }
         }
-      }
 
-      @keyframes ball {
-        100% {
-          offset-distance: 100%;
-        }
+        @keyframes ball {
+          100% {
+            offset-distance: 100%;
+          }
 
-        0% {
-          offset-distance: 0%;
+          0% {
+            offset-distance: 0%;
+          }
         }
-      }
 
-      @keyframes ball1 {
-        0% {
-          offset-distance: 100%;
-        }
+        @keyframes ball1 {
+          0% {
+            offset-distance: 100%;
+          }
 
-        100% {
-          offset-distance: 0%;
+          100% {
+            offset-distance: 0%;
+          }
         }
       }
     }
-  }
 
-  .right-box {
-    .dust-monitor {
-      display: flex;
-      justify-content: space-between;
-      padding: 0 20px;
-      margin-bottom: 20px;
-      margin-top: 15px;
-
-      .value {
-        width: 131px;
-        height: 44px;
-        background: var(--image-value-bg);
+    .right-box {
+      .dust-monitor {
         display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+        justify-content: space-between;
+        padding: 0 20px;
+        margin-bottom: 20px;
+        margin-top: 15px;
+
+        .value {
+          width: 131px;
+          height: 44px;
+          background: var(--image-value-bg);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
 
-      .title {
-        text-align: center;
-        margin-bottom: 5px;
-      }
+        .title {
+          text-align: center;
+          margin-bottom: 5px;
+        }
 
-      .value {
-        font-size: 16px;
-        font-family: 'douyuFont';
-        color: #3df5ff;
+        .value {
+          font-size: 16px;
+          font-family: 'douyuFont';
+          color: #3df5ff;
+        }
       }
-    }
 
-    .gas-box {
-      height: 390px;
-      display: flex;
-      justify-content: space-between;
-      padding: 0 10px;
+      .gas-box {
+        height: 390px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
 
-      .gas-item {
-        position: relative;
+        .gas-item {
+          position: relative;
 
-        .top {
-          height: 136px;
-          padding-top: 30px;
+          .top {
+            height: 136px;
+            padding-top: 30px;
 
-          .value {
-            font-size: 26px;
-            font-family: 'douyuFont';
-            color: #3df5ff;
-            text-align: center;
-            margin-bottom: 5px;
-          }
+            .value {
+              font-size: 26px;
+              font-family: 'douyuFont';
+              color: #3df5ff;
+              text-align: center;
+              margin-bottom: 5px;
+            }
 
-          .title {
-            width: 205px;
-            height: 48px;
-            text-align: center;
-            background: var(--image-plane) no-repeat;
-            background-size: contain;
-            background-position: bottom;
-          }
+            .title {
+              width: 205px;
+              height: 48px;
+              text-align: center;
+              background: var(--image-plane) no-repeat;
+              background-size: contain;
+              background-position: bottom;
+            }
 
-          &::before {
-            position: absolute;
-            content: '';
-            width: 136px;
-            height: 101px;
-            left: 35px;
-            top: 15px;
-            background: var(--image-small-bg1) no-repeat;
-            background-size: cover;
+            &::before {
+              position: absolute;
+              content: '';
+              width: 136px;
+              height: 101px;
+              left: 35px;
+              top: 15px;
+              background: var(--image-small-bg1) no-repeat;
+              background-size: cover;
+            }
           }
-        }
-
-        .detail-box {
-          position: relative;
-          margin: 0 auto;
-          width: 184px;
-          height: calc(100% - 136px);
-          background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-start;
-          align-items: center;
-          overflow-y: auto;
-          // padding: 50px 0 20px 0;
 
-          &::after {
-            position: absolute;
-            content: '';
-            left: 0px;
-            bottom: 0px;
+          .detail-box {
+            position: relative;
+            margin: 0 auto;
             width: 184px;
-            height: 31px;
-            background: var(--image-plane1) no-repeat center;
-            background-size: 100% 100%;
-            background-position: bottom;
-          }
-
-          .detail-item {
-            width: 100%;
-            height: 40px;
-            background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
-            // margin: 5px 0;
+            height: calc(100% - 136px);
+            background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
+            background-size: cover;
             display: flex;
-            padding: 0 10px;
-            justify-content: space-between;
+            flex-direction: column;
+            justify-content: flex-start;
             align-items: center;
-            margin-bottom: 30px;
+            overflow-y: auto;
+            // padding: 50px 0 20px 0;
 
-            .value {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              color: #2bdcff;
-              text-align: center;
+            &::after {
+              position: absolute;
+              content: '';
+              left: 0px;
+              bottom: 0px;
+              width: 184px;
+              height: 31px;
+              background: var(--image-plane1) no-repeat center;
+              background-size: 100% 100%;
+              background-position: bottom;
+            }
+
+            .detail-item {
+              width: 100%;
+              height: 40px;
+              background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
+              // margin: 5px 0;
+              display: flex;
+              padding: 0 10px;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 30px;
+
+              .value {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                color: #2bdcff;
+                text-align: center;
+              }
             }
           }
         }
       }
     }
-  }
 
-  .monitor-title {
-    cursor: pointer;
+    .monitor-title {
+      cursor: pointer;
+    }
   }
-}
 </style>

src/views/vent/monitorManager/camera/index.vue

@@ -195,7 +195,7 @@
       for (let i = 0; i < cameras.length; i++) {
         const item = cameras[i];
 
-        if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs') {
+        if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs' || item['devicekind'] === 'HLL') {
           // 从海康平台接口获取视频流
           const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
           try {
@@ -232,7 +232,7 @@
       for (let i = 0; i < cameras.length; i++) {
         const item = cameras[i];
 
-        if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs') {
+        if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs' || item['devicekind'] === 'HLL') {
           // 从海康平台接口获取视频流
           const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
           try {

src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHome.vue

@@ -168,32 +168,17 @@
         </ventBox1>
         <ventBox1 class="vent-margin-t-10">
           <template #title>
-            <div>阀门运行状态</div>
+            <div>泵站监测详情</div>
           </template>
           <template #container>
-            <div class="state-header">
-              <div class="header-item" v-for="(header, index) in stateWarningHeader" :key="index">{{ header }}</div>
-            </div>
-            <div class="">
-              <div v-for="key in 2" :key="key">
-                <div class="device-row" v-for="(valveType, index) in valveCtrlType" :key="index">
-                  <div class="state">#{{ key }}{{ valveType.title }} </div>
-                  <div class="state" v-for="(state, i) in valveWarningState" :key="i">
-                    <span v-if="state.code == '_CtrlMode'">{{
-                      selectData[`CentrifugalPump${key}_${valveType.code}${state.code}`] == '1' ? '控制' : '-'
-                    }}</span>
-                    <span
-                      v-else
-                      :class="{
-                        'signal-round': true,
-                        'signal-round-run': selectData[`CentrifugalPump${key}_${valveType.code}${state.code}`] == '1',
-                        'signal-round-gry': selectData[`CentrifugalPump${key}_${valveType.code}${state.code}`] == '0',
-                      }"
-                    ></span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <ListItem
+              v-for="(item, index) in modelMonitor"
+              :key="index"
+              class="w-100% mb-5px"
+              :value="selectData[item.code]"
+              :label="item.title"
+              label-width="250px"
+            />
           </template>
         </ventBox1>
       </div>
@@ -216,7 +201,8 @@
 <script setup lang="ts">
   import { ref, onMounted, onUnmounted, reactive, defineProps, watch, inject, nextTick, onBeforeUnmount } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import { setModelType } from '../gasPump.threejs';
+  import { setModelType, playAnimate } from '../gasPump.threejs';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
   import {
     stateWarningHeader,
     valveWarningState,
@@ -293,6 +279,7 @@
             if (props.deviceId) {
               const data = await getDataSource(props.deviceId);
               selectData.value = data;
+              playAnimate(data);
               // Object.assign(selectData, data);
             }
             if (timer) {
@@ -653,4 +640,9 @@
   :deep(.@{ventSpace}-tabs-tabpane-active) {
     overflow: auto;
   }
+  :deep(.list-item__background) {
+    background-image: linear-gradient(to right, #39deff15, #3977e500) !important;
+    line-height: 30px !important;
+    height: 30px !important;
+  }
 </style>

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.ts

@@ -297,92 +297,58 @@ export const modelMonitorTags = [
   {
     domId: 'jsf1',
     title: '进水阀1#',
-    code: '',
-    value: '1',
-    position: [-5.26, 0.19, 0.6],
-    path: [
-      -12.284, 0.962, -0.359, -3.929, 0.942, -0.359, -3.839, 0.942, -0.227, -3.944, 0.942, -0.06, -4.356, 0.942, -0.06, -4.356, 0.725, -0.06, -5.173,
-      0.942, -0.06, -5.173, 0.725, -0.06,
-    ],
-    radius: 5,
+    code: 'CentrifugalPump1_WaterInValve1_OpenLimit',
+    // value: '0',
+    position: [-5.26, 0.28, 0.6],
   },
   {
     domId: 'jsf2',
     title: '进水阀2#',
-    code: '',
-    value: '0',
-    position: [-8.72, 0.29, 0.6],
-    path: [-10.61, 0.124, 0.808, -9.008, 0.123, 0.808, -9.008, 0.123, 0.019, -9.003, 0.215, 0.001, -8.839, 0.219, 0.001, -8.833, 0.271, 0.001],
-    radius: 5,
+    code: 'CentrifugalPump2_WaterInValve1_OpenLimit',
+    // value: '0',
+    position: [-8.75, 0.3, 0.6],
   },
   {
     domId: 'csf1',
     title: '出水阀1#',
-    code: '',
-    value: '0',
-    position: [-5.74, 0.38, 0.27],
-    path: [
-      -5.614, 0.29, 0.206, -5.614, 0.213, 0.212, -5.614, 0.175, 0.218, -5.614, 0.175, 0.589, -9.268, 0.175, 0.589, -9.725, 0.178, 0.593, -9.757,
-      0.178, 0.547, -9.757, 0.178, 0.007, -9.827, 0.178, -0.04, -10.612, 0.178, -0.04,
-    ],
-    radius: 5,
+    code: 'CentrifugalPump1_WaterOutValve2_OpenLimit',
+    // value: '0',
+    position: [-5.74, 0.35, 0.27],
   },
   {
     domId: 'csf2',
     title: '出水阀2#',
-    code: '',
-    value: '1',
-    position: [-9.42, 0.38, 0.3],
-    path: [
-      -9.268, 0.175, 0.237, -9.268, 0.178, 0.593, -9.725, 0.178, 0.593, -9.757, 0.178, 0.547, -9.757, 0.178, 0.007, -9.827, 0.178, -0.04, -10.612,
-      0.178, -0.04,
-    ],
-    radius: 5,
+    code: 'CentrifugalPump2_WaterOutValve2_OpenLimit',
+    // value: '0',
+    position: [-9.42, 0.35, 0.3],
   },
   {
     domId: 'jqf1',
     title: '进气阀1#',
-    code: '',
-    value: '0',
-    position: [-4.41, 1.46, -0.03],
-    path: [
-      -12.284, 0.962, -0.359, -3.929, 0.942, -0.359, -3.839, 0.942, -0.227, -3.944, 0.942, -0.06, -4.356, 0.942, -0.06, -4.356, 0.725, -0.06, -5.173,
-      0.942, -0.06, -5.173, 0.725, -0.06,
-    ],
-    radius: 5,
+    code: 'CentrifugalPump1_AirInValve1_OpenLimit',
+    // value: '0',
+    position: [-4.41, 1.28, 0.03],
   },
   {
     domId: 'jqf2',
     title: '进气阀2#',
-    code: '',
-    value: '0',
+    code: 'CentrifugalPump2_AirInValve1_OpenLimit',
+    // value: '0',
     position: [-7.7, 1.31, -0.14],
-    path: [-12.284, 0.962, -0.359, -7.276, 0.962, -0.377, -7.276, 0.942, -0.181, -7.414, 0.962, -0.063, -7.986, 0.942, -0.063, -8.78, 0.942, -0.063],
-    radius: 5,
   },
   {
     domId: 'cqf1',
     title: '出气阀1#',
-    code: '',
-    value: '0',
+    code: 'CentrifugalPump1_AirOutValve2_OpenLimit',
+    // value: '0',
     position: [-6.2, 1.55, 0.06],
-    path: [
-      -5.628, 0.606, -0.08, -5.628, 0.788, -0.08, -5.732, 0.914, -0.08, -5.962, 0.914, -0.08, -6.067, 1.094, -0.08, -6.067, 1.498, -0.08, -6.197,
-      1.619, -0.08, -12.284, 1.619, -0.08,
-    ],
-    radius: 5,
   },
   {
     domId: 'cqf2',
     title: '出气阀2#',
-    code: '',
-    value: '0',
+    code: 'CentrifugalPump2_AirOutValve2_OpenLimit',
+    // value: '0',
     position: [-9.58, 1.55, -0.13],
-    path: [
-      -9.257, 0.606, -0.069, -9.257, 0.819, -0.069, -9.388, 0.916, -0.069, -9.593, 0.916, -0.069, -9.697, 1.073, -0.069, -9.697, 1.618, -0.069,
-      -12.284, 1.619, -0.08,
-    ],
-    radius: 5,
   },
 ];
 

src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.ts

@@ -30,11 +30,9 @@ const addMouseEvent = () => {
   model?.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
 };
 
-const render = () => {
-  if (model && model.isRender) {
-    model.animationId = requestAnimationFrame(render);
-    model.css3dRender?.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
-    model.stats?.update();
+export const playAnimate = (monitorData: any) => {
+  if (gasPumpType === 'gasPumpUnder') {
+    gasPumpUnderObj?.handleAnimation(monitorData);
   }
 };
 
@@ -107,7 +105,6 @@ export const mountedThree = () => {
     await gasPumpUnderObj.mountedThree();
 
     addMouseEvent();
-    // render();
     model.animate();
     resolve(null);
   });

src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.under.ts

@@ -91,7 +91,7 @@ class gasPumpUnder {
   };
 
   /** 根据各个泵的状态控制动画 */
-  handleAnimation() {
+  handleAnimation(monitorData: any) {
     this.airInA?.hideElement();
     this.airInB?.hideElement();
     this.airInR?.hideElement();
@@ -109,8 +109,8 @@ class gasPumpUnder {
     this.waterOutR?.hideElement();
     this.waterOutL?.hideElement();
     // 进气动画控制
-    const jqf1Open = modelMonitorTags.find((e) => e.domId === 'jqf1')?.value === '1';
-    const jqf2Open = modelMonitorTags.find((e) => e.domId === 'jqf2')?.value === '1';
+    const jqf1Open = modelMonitorTags.find((e) => e.domId === 'jqf1' && monitorData[e.code] == 1);
+    const jqf2Open = modelMonitorTags.find((e) => e.domId === 'jqf2' && monitorData[e.code] == 1);
 
     if (jqf1Open && jqf2Open) {
       this.airInB?.showElement();
@@ -125,8 +125,8 @@ class gasPumpUnder {
     }
 
     // 出气动画控制
-    const cqf1Open = modelMonitorTags.find((e) => e.domId === 'cqf1')?.value === '1';
-    const cqf2Open = modelMonitorTags.find((e) => e.domId === 'cqf2')?.value === '1';
+    const cqf1Open = modelMonitorTags.find((e) => e.domId === 'cqf1' && monitorData[e.code] == 1);
+    const cqf2Open = modelMonitorTags.find((e) => e.domId === 'cqf2' && monitorData[e.code] == 1);
 
     if (cqf1Open && cqf2Open) {
       this.airOutB?.showElement();
@@ -141,8 +141,8 @@ class gasPumpUnder {
     }
 
     // 进水动画控制
-    const jsf1Open = modelMonitorTags.find((e) => e.domId === 'jsf1')?.value === '1';
-    const jsf2Open = modelMonitorTags.find((e) => e.domId === 'jsf2')?.value === '1';
+    const jsf1Open = modelMonitorTags.find((e) => e.domId === 'jsf1' && monitorData[e.code] == 1);
+    const jsf2Open = modelMonitorTags.find((e) => e.domId === 'jsf2' && monitorData[e.code] == 1);
 
     if (jsf1Open && jsf2Open) {
       this.waterInB?.showElement();
@@ -157,8 +157,8 @@ class gasPumpUnder {
     }
 
     // 出水动画控制
-    const csf1Open = modelMonitorTags.find((e) => e.domId === 'csf1')?.value === '1';
-    const csf2Open = modelMonitorTags.find((e) => e.domId === 'csf2')?.value === '1';
+    const csf1Open = modelMonitorTags.find((e) => e.domId === 'csf1' && monitorData[e.code] == 1);
+    const csf2Open = modelMonitorTags.find((e) => e.domId === 'csf2' && monitorData[e.code] == 1);
 
     if (csf1Open && csf2Open) {
       this.waterOutB?.showElement();
@@ -231,10 +231,10 @@ class gasPumpUnder {
           // new THREE.Vector3(-3.924, 0.942, -0.06),
           // new THREE.Vector3(-5.153, 0.942, -0.06),
           // new THREE.Vector3(-5.153, 0.725, -0.06),
-          new THREE.Vector3(-12.284, 0.962, -0.359),
-          new THREE.Vector3(-3.929, 0.942, -0.359),
-          new THREE.Vector3(-3.839, 0.942, -0.207),
-          new THREE.Vector3(-3.924, 0.942, -0.06),
+          new THREE.Vector3(-12.284, 0.942, -0.359),
+          new THREE.Vector3(-4.012, 0.942, -0.359),
+          new THREE.Vector3(-4.012, 0.942, -0.207),
+          new THREE.Vector3(-4.012, 0.942, -0.06),
           new THREE.Vector3(-4.356, 0.942, -0.06),
           new THREE.Vector3(-5.153, 0.942, -0.06),
           new THREE.Vector3(-5.173, 0.725, -0.06),

src/views/vent/monitorManager/safetyMonitor/index.vue

@@ -185,466 +185,466 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, inject, unref } from 'vue';
-import { list, getDeviceList, safetyList, getExportUrl, subStationList, initSubStation } from './safety.api';
-import AlarmHistoryCommentTable from '../comment/AlarmHistoryTable.vue';
-import AlarmHistoryTable from './AlarmHistoryTable.vue';
-import HistoryTable from './HistoryTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
-import { useRouter } from 'vue-router';
-import { formConfig, isHaveNoAction } from './safety.data';
-import { getDictItemsByCode } from '/@/utils/dict';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { useGlobSetting } from '/@/hooks/setting';
-import { useMethods } from '/@/hooks/system/useMethods';
-import { message } from 'ant-design-vue';
-
-const { sysOrgCode } = useGlobSetting();
-const { hasPermission } = usePermission();
-const globalConfig = inject('globalConfig');
-
-const { handleExportXls } = useMethods();
-
-// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-
-// const echartsOption = {
-//   grid: {
-//     top: '60px',
-//     left: '10px',
-//     right: '25px',
-//     bottom: '5%',
-//     containLabel: true,
-//   },
-//   toolbox: {
-//     feature: {},
-//   },
-// };
-// let alive = ref(true)
-
-type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
-
-const props = defineProps({
-  pageData: {
-    type: Object,
-    default: () => {},
-  },
-});
-
-const scroll = {
-  y: 360,
-};
-const defSort = {
-  column: 'strinstallpos',
-  order: 'desc',
-};
-const monitorTable = ref();
-const historyTable = ref();
-const alarmHistoryTable = ref();
-const handlerHistoryTable = ref();
-
-const isRefresh = ref(true);
-
-const activeKey = ref('1'); // tab key
-const dataSource = shallowRef([]); // 实时监测数据
-const deviceType = ref(''); // 监测设备类型
-const subStation = ref('');
-const subStationOptions = ref([]);
-// let dataSourceHis = shallowRef([])//历史数据
-
-//历史数据
-async function changeHis(data) {
-  // alive.value = false
-  // nextTick(() => {
-  //   dataSourceHis = data
-  //   alive.value = true
-  // })
-}
-
-async function tabChange(activeKeyVal) {
-  activeKey.value = activeKeyVal;
-  if (activeKey.value != '1') {
-    if (timer != undefined) {
-      clearTimeout(timer);
-      timer = undefined;
+  import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, inject, unref } from 'vue';
+  import { list, getDeviceList, safetyList, getExportUrl, subStationList, initSubStation } from './safety.api';
+  import AlarmHistoryCommentTable from '../comment/AlarmHistoryTable.vue';
+  import AlarmHistoryTable from './AlarmHistoryTable.vue';
+  import HistoryTable from './HistoryTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
+  import { useRouter } from 'vue-router';
+  import { formConfig, isHaveNoAction } from './safety.data';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useMethods } from '/@/hooks/system/useMethods';
+  import { message } from 'ant-design-vue';
+
+  const { sysOrgCode } = useGlobSetting();
+  const { hasPermission } = usePermission();
+  const globalConfig = inject('globalConfig');
+
+  const { handleExportXls } = useMethods();
+
+  // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+
+  // const echartsOption = {
+  //   grid: {
+  //     top: '60px',
+  //     left: '10px',
+  //     right: '25px',
+  //     bottom: '5%',
+  //     containLabel: true,
+  //   },
+  //   toolbox: {
+  //     feature: {},
+  //   },
+  // };
+  // let alive = ref(true)
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+  const props = defineProps({
+    pageData: {
+      type: Object,
+      default: () => {},
+    },
+  });
+
+  const scroll = {
+    y: 360,
+  };
+  const defSort = {
+    column: 'strinstallpos',
+    order: 'desc',
+  };
+  const monitorTable = ref();
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  const isRefresh = ref(true);
+
+  const activeKey = ref('1'); // tab key
+  const dataSource = shallowRef([]); // 实时监测数据
+  const deviceType = ref(''); // 监测设备类型
+  const subStation = ref('');
+  const subStationOptions = ref([]);
+  // let dataSourceHis = shallowRef([])//历史数据
+
+  //历史数据
+  async function changeHis(data) {
+    // alive.value = false
+    // nextTick(() => {
+    //   dataSourceHis = data
+    //   alive.value = true
+    // })
+  }
+
+  async function tabChange(activeKeyVal) {
+    activeKey.value = activeKeyVal;
+    if (activeKey.value != '1') {
+      if (timer != undefined) {
+        clearTimeout(timer);
+        timer = undefined;
+      }
+    } else {
+      timer = null;
+      await getMonitor(true);
     }
-  } else {
-    timer = null;
-    await getMonitor(true);
   }
-}
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (deviceType.value) {
-    if (timer) timer = null;
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(
-        async () => {
-          await getDataSource();
-          if (timer) {
-            getMonitor();
-          }
-        },
-        flag ? 0 : 1000
-      );
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (deviceType.value) {
+      if (timer) timer = null;
+      if (Object.prototype.toString.call(timer) === '[object Null]') {
+        timer = setTimeout(
+          async () => {
+            await getDataSource();
+            if (timer) {
+              getMonitor();
+            }
+          },
+          flag ? 0 : 1000
+        );
+      }
     }
   }
-}
-
-async function getDataSource() {
-  const formData = monitorTable.value.getForm();
-  const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } });
-  if (res.msgTxt.length > 0) {
-    dataSource.value = [];
-    let dataArr = res.msgTxt[0].datalist || [];
-    dataArr.filter((data: any) => {
-      const readData = data.readData;
-      return Object.assign(data, readData);
-    });
-    if (deviceType.value == 'safetymonitor') {
-      // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
-      let dictCodes = getDictItemsByCode('safetynormal');
-      console.log(dictCodes, '111-----------');
-      const searchForm = formData.getFieldsValue();
-
-      if (searchForm && searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
-        console.log(searchForm, '000---------');
-        const tempData = [];
-        const tempData1 = [];
-        for (let i = 0; i < dataArr.length; i++) {
-          const item = dataArr[i];
-          let flag = false;
-          for (let i = 0; i < dictCodes.length; i++) {
-            const dict = dictCodes[i];
-            if (dict['value'] == item['dataTypeName']) {
-              flag = true;
+
+  async function getDataSource() {
+    const formData = monitorTable.value.getForm();
+    const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } });
+    if (res.msgTxt.length > 0) {
+      dataSource.value = [];
+      let dataArr = res.msgTxt[0].datalist || [];
+      dataArr.filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      });
+      if (deviceType.value == 'safetymonitor') {
+        // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
+        let dictCodes = getDictItemsByCode('safetynormal');
+        console.log(dictCodes, '111-----------');
+        const searchForm = formData.getFieldsValue();
+
+        if (searchForm && searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
+          console.log(searchForm, '000---------');
+          const tempData = [];
+          const tempData1 = [];
+          for (let i = 0; i < dataArr.length; i++) {
+            const item = dataArr[i];
+            let flag = false;
+            for (let i = 0; i < dictCodes.length; i++) {
+              const dict = dictCodes[i];
+              if (dict['value'] == item['dataTypeName']) {
+                flag = true;
+              }
+            }
+            if (flag) {
+              tempData.push(item);
+            } else {
+              tempData1.push(item);
             }
           }
-          if (flag) {
-            tempData.push(item);
+          if (sysOrgCode == 'zjtzqctmk' || hasPermission('btn:noGb')) {
+            dataSource.value = [...tempData, ...tempData1];
           } else {
-            tempData1.push(item);
+            dataSource.value = [...tempData];
           }
-        }
-        if (sysOrgCode == 'zjtzqctmk' || hasPermission('btn:noGb')) {
-          dataSource.value = [...tempData, ...tempData1];
         } else {
-          dataSource.value = [...tempData];
+          dataSource.value = dataArr;
         }
       } else {
         dataSource.value = dataArr;
       }
     } else {
-      dataSource.value = dataArr;
+      dataSource.value = [];
     }
-  } else {
-    dataSource.value = [];
   }
-}
 
-async function getSubstation() {
-  const list: [] = await subStationList({ monitorparam: 'safetymonitor*' });
-  subStationOptions.value = list;
-  if (list.length > 0) {
-    subStation.value = list[0]['id'];
+  async function getSubstation() {
+    const list: [] = await subStationList({ monitorparam: 'safetymonitor*' });
+    subStationOptions.value = list;
+    if (list.length > 0) {
+      subStation.value = list[0]['id'];
+    }
   }
-}
-function exportData() {
-  handleExportXls('安全监控导出', getExportUrl);
-}
-
-function updateSubstation() {
-  if (subStation.value) {
-    initSubStation({ substationID: subStation.value }).then(() => {
-      message.success('分站同步完成！');
-    });
-  } else {
-    message.warning('请选择分站！');
+  function exportData() {
+    handleExportXls('安全监控导出', getExportUrl);
   }
-}
-
-onMounted(async () => {
-  const { currentRoute } = useRouter();
-  if (unref(currentRoute)) {
-    const path = unref(currentRoute).path;
-    if (path) {
-      deviceType.value = path.substring(path.lastIndexOf('/') + 1);
+
+  function updateSubstation() {
+    if (subStation.value) {
+      initSubStation({ substationID: subStation.value }).then(() => {
+        message.success('分站同步完成！');
+      });
+    } else {
+      message.warning('请选择分站！');
     }
-    await getMonitor(true);
-    await getSubstation();
   }
-});
 
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-  }
-  timer = undefined;
-});
+  onMounted(async () => {
+    const { currentRoute } = useRouter();
+    if (unref(currentRoute)) {
+      const path = unref(currentRoute).path;
+      if (path) {
+        deviceType.value = path.substring(path.lastIndexOf('/') + 1);
+      }
+      await getMonitor(true);
+      await getSubstation();
+    }
+  });
+
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = undefined;
+  });
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-.device-box {
-  width: 100%;
-  height: calc(100% - 100px);
-  padding-bottom: 10px;
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-
-  .tabs-box {
-    width: calc(100% - 12px) !important;
-    height: 100% !important;
-    bottom: 3px !important;
-  }
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
 
-  .device-button-group {
-    position: absolute;
-    top: -30px;
-    display: flex;
+  .device-box {
     width: 100%;
+    height: calc(100% - 100px);
+    padding-bottom: 10px;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+
+    .tabs-box {
+      width: calc(100% - 12px) !important;
+      height: 100% !important;
+      bottom: 3px !important;
+    }
 
-    .device-button {
-      height: 26px;
-      padding: 0 20px;
-      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-      clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+    .device-button-group {
+      position: absolute;
+      top: -30px;
       display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      position: relative;
-      cursor: pointer;
+      width: 100%;
+
+      .device-button {
+        height: 26px;
+        padding: 0 20px;
+        background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
+        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        position: relative;
+        cursor: pointer;
+
+        &:nth-child(1) {
+          left: calc(-6px * 1);
+        }
 
-      &:nth-child(1) {
-        left: calc(-6px * 1);
-      }
+        &:nth-child(2) {
+          left: calc(-6px * 2);
+        }
 
-      &:nth-child(2) {
-        left: calc(-6px * 2);
-      }
+        &:nth-child(3) {
+          left: calc(-6px * 3);
+        }
 
-      &:nth-child(3) {
-        left: calc(-6px * 3);
-      }
+        &:nth-child(4) {
+          left: calc(-6px * 4);
+        }
 
-      &:nth-child(4) {
-        left: calc(-6px * 4);
-      }
+        &:nth-child(5) {
+          left: calc(-6px * 5);
+        }
 
-      &:nth-child(5) {
-        left: calc(-6px * 5);
-      }
+        &:nth-child(6) {
+          left: calc(-6px * 6);
+        }
 
-      &:nth-child(6) {
-        left: calc(-6px * 6);
-      }
+        &:nth-child(7) {
+          left: calc(-6px * 7);
+        }
 
-      &:nth-child(7) {
-        left: calc(-6px * 7);
-      }
+        &:nth-child(8) {
+          left: calc(-6px * 8);
+        }
 
-      &:nth-child(8) {
-        left: calc(-6px * 8);
-      }
+        &:nth-child(9) {
+          left: calc(-6px * 9);
+        }
 
-      &:nth-child(9) {
-        left: calc(-6px * 9);
-      }
+        &:nth-child(10) {
+          left: calc(-6px * 10);
+        }
 
-      &:nth-child(10) {
-        left: calc(-6px * 10);
-      }
+        &:nth-child(11) {
+          left: calc(-6px * 11);
+        }
 
-      &:nth-child(11) {
-        left: calc(-6px * 11);
-      }
+        &:nth-child(12) {
+          left: calc(-6px * 12);
+        }
 
-      &:nth-child(12) {
-        left: calc(-6px * 12);
-      }
+        &:nth-child(13) {
+          left: calc(-6px * 13);
+        }
 
-      &:nth-child(13) {
-        left: calc(-6px * 13);
-      }
+        &:nth-child(14) {
+          left: calc(-6px * 14);
+        }
 
-      &:nth-child(14) {
-        left: calc(-6px * 14);
-      }
+        &:nth-child(15) {
+          left: calc(-6px * 15);
+        }
 
-      &:nth-child(15) {
-        left: calc(-6px * 15);
+        &:first-child {
+          clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        }
       }
 
-      &:first-child {
-        clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+      .device-active {
+        background: linear-gradient(45deg, #04e6fb, #0c5cab);
+
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
       }
     }
 
-    .device-active {
-      background: linear-gradient(45deg, #04e6fb, #0c5cab);
+    .enter-detail {
+      color: #fff;
+      cursor: pointer;
+      position: absolute;
+      right: 120px;
+      top: -6px;
+      padding: 5px;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 33px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      padding: 5px 15px 5px 15px;
+      cursor: pointer;
+
+      &:hover {
+        background: var(--vent-modal-bg2);
+      }
 
       &::before {
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+        width: calc(100% - 6px);
+        height: 27px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit;
+        /*important*/
+        background: linear-gradient(#1fa6cb, #127cb5);
       }
     }
   }
-
-  .enter-detail {
-    color: #fff;
-    cursor: pointer;
+  .right-btn-group {
     position: absolute;
-    right: 120px;
-    top: -6px;
-    padding: 5px;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 33px !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     color: #fff;
-    padding: 5px 15px 5px 15px;
-    cursor: pointer;
-
-    &:hover {
-      background: var(--vent-modal-bg2);
+    right: 20px;
+    display: flex;
+    .export-btn {
     }
-
-    &::before {
-      width: calc(100% - 6px);
-      height: 27px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit;
-      /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
+    .update-btn {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+      .btn {
+        background: var(--vent-modal-bg2);
+      }
     }
-  }
-}
-.right-btn-group {
-  position: absolute;
-  color: #fff;
-  right: 20px;
-  display: flex;
-  .export-btn {
-  }
-  .update-btn {
-    margin-right: 10px;
-    display: flex;
-    align-items: center;
     .btn {
-      background: var(--vent-modal-bg2);
-    }
-  }
-  .btn {
-    padding: 8px 20px;
-    position: relative;
-    border-radius: 2px;
-    color: #fff;
-    width: fit-content;
-    cursor: pointer;
-
-    &::before {
-      position: absolute;
-      display: block;
-      content: '';
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      top: 2px;
-      left: 2px;
+      padding: 8px 20px;
+      position: relative;
       border-radius: 2px;
-      z-index: -1;
-    }
-  }
-
-  .btn1 {
-    border: 1px solid var(--vent-btn-primary-border-color);
+      color: #fff;
+      width: fit-content;
+      cursor: pointer;
 
-    &::before {
-      background-image: linear-gradient(#2effee92, #0cb1d592);
+      &::before {
+        position: absolute;
+        display: block;
+        content: '';
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        top: 2px;
+        left: 2px;
+        border-radius: 2px;
+        z-index: -1;
+      }
     }
 
-    &:hover {
-      border: 1px solid #5cfaffaa;
+    .btn1 {
+      border: 1px solid var(--vent-btn-primary-border-color);
 
       &::before {
-        background-image: linear-gradient(#2effee72, #0cb1d572);
+        background-image: linear-gradient(#2effee92, #0cb1d592);
+      }
+
+      &:hover {
+        border: 1px solid #5cfaffaa;
+
+        &::before {
+          background-image: linear-gradient(#2effee72, #0cb1d572);
+        }
       }
-    }
-  }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-  border: 1px solid var(--vent-device-manager-box-border);
-  border-radius: 2px;
-  -webkit-backdrop-filter: blur(8px);
-  box-shadow: 0 0 20px #44b4ff33 inset;
-  background-color: var(--vent-device-manager-box-bg);
-  overflow-y: auto;
-}
-
-:deep(.@{ventSpace}-tabs-card) {
-  .@{ventSpace}-tabs-tab {
-    background: var(--vent-modal-bg2);
-    border-color: var(--vent-btn-primary-border-color);
-    border-radius: 0%;
-
-    &:hover {
-      color: #64d5ff;
     }
   }
 
-  .@{ventSpace}-tabs-content {
-    height: 100% !important;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
+    border: 1px solid var(--vent-device-manager-box-border);
+    border-radius: 2px;
+    -webkit-backdrop-filter: blur(8px);
+    box-shadow: 0 0 20px #44b4ff33 inset;
+    background-color: var(--vent-device-manager-box-bg);
+    overflow-y: auto;
   }
 
-  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-    color: var(--vent-font-action-link);
-  }
+  :deep(.@{ventSpace}-tabs-card) {
+    .@{ventSpace}-tabs-tab {
+      background: var(--vent-modal-bg2);
+      border-color: var(--vent-btn-primary-border-color);
+      border-radius: 0%;
 
-  .@{ventSpace}-tabs-nav::before {
-    border-color: var(--vent-btn-primary-border-color);
-  }
+      &:hover {
+        color: #64d5ff;
+      }
+    }
 
-  .@{ventSpace}-picker,
-  .@{ventSpace}-select-selector {
-    width: 100% !important;
-    background: #00000017 !important;
-    border: 1px solid @vent-form-item-border !important;
+    .@{ventSpace}-tabs-content {
+      height: 100% !important;
+    }
 
-    input,
-    .@{ventSpace}-select-selection-item,
-    .@{ventSpace}-picker-suffix {
-      color: #fff !important;
+    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+      color: var(--vent-font-action-link);
     }
 
-    .@{ventSpace}-select-selection-placeholder {
-      color: #b7b7b7 !important;
+    .@{ventSpace}-tabs-nav::before {
+      border-color: var(--vent-btn-primary-border-color);
     }
-  }
 
-  .@{ventSpace}-pagination-next,
-  .action,
-  .@{ventSpace}-select-arrow,
-  .@{ventSpace}-picker-separator {
-    color: #fff !important;
+    .@{ventSpace}-picker,
+    .@{ventSpace}-select-selector {
+      width: 100% !important;
+      background: #00000017 !important;
+      border: 1px solid @vent-form-item-border !important;
+
+      input,
+      .@{ventSpace}-select-selection-item,
+      .@{ventSpace}-picker-suffix {
+        color: #fff !important;
+      }
+
+      .@{ventSpace}-select-selection-placeholder {
+        color: #b7b7b7 !important;
+      }
+    }
+
+    .@{ventSpace}-pagination-next,
+    .action,
+    .@{ventSpace}-select-arrow,
+    .@{ventSpace}-picker-separator {
+      color: #fff !important;
+    }
   }
-}
 </style>