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

src/utils/threejs/main.worker.ts

@@ -59,7 +59,7 @@ export function initModalWorker() {
     'fire/laneway-device_2024-03-19.glb',
     'fire/chamber_2023-06-02.glb',
     // 'fire/workFace_2023-06-29.glb',
-    'fire/tunFace_2023-07-14.glb',
+    'fire/tunFace_2025-01-03.glb',
     'fire/nitrogen_2023-06-02.glb',
     // 'fire/nitrogenUnderground_2023-09-15.glb',
     'fire/nitrogenUnderground_2024-04-09.glb',

src/views/vent/cad/GasGeoViewer.vue

@@ -1,23 +1,42 @@
 <template>
-  <!-- 更适用于文件共享中心的CAD viewer组件，支持两种使用方法，详见下文 -->
-  <CADViewer class="w-100% h-100%" />
+  <div class="content">
+    <div class="left-box">
+      <FileSystem :selected="selected" :list="treeData" @on-click="openFile" />
+    </div>
+    <div class="right-box">
+      <CADViewer class="w-100% h-100%" />
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
   import { CADViewer, useCADViewer } from '/@/components/CADViewer';
-  import { queryGasGeoMap } from './cad.api';
+  // import { queryGasGeoMap } from './cad.api';
+  import FileSystem from '../performance/fileDetail/commen/fileSystem.vue';
+  import { getTree } from '../performance/fileDetail/fileDetail.api';
+
+  const selected = ref<any>({});
+  const treeData = ref<any[]>([]);
 
   const { processFile, postMessage, registHook, unregistHook } = useCADViewer();
 
-  function openFile() {
-    // 只触发一次，因为MKY_Open_Mxweb之后会自动触发MKY_Open_File_Complete钩子，导致循环
-    registHook('MKY_Open_File_Complete', () => {
-      unregistHook('MKY_Open_File_Complete');
-      queryGasGeoMap({}).then(({ id }) => {
-        processFile(id).then((path) => {
-          postMessage('MKY_Open_Mxweb', path);
-        });
-      });
+  async function getTreeList() {
+    // 瓦斯地质图
+    const { records } = await getTree({ parentId: '1871508264848617473', pageNo: 1, pageSize: 1000 });
+    treeData.value = records.map((e) => {
+      return {
+        id: e.id,
+        isFolder: false,
+        title: e.fileName,
+      };
+    });
+    selected.value = treeData.value[0];
+  }
+
+  function openFile({ id }: Record<string, string> = {}) {
+    if (!id) return;
+    processFile(id).then((path) => {
+      postMessage('MKY_Open_Mxweb', path);
     });
   }
 
@@ -32,7 +51,13 @@
   // let initByRoute = false;
 
   onMounted(() => {
-    openFile();
+    // 只触发一次，因为MKY_Open_Mxweb之后会自动触发MKY_Open_File_Complete钩子，导致循环
+    registHook('MKY_Open_File_Complete', () => {
+      unregistHook('MKY_Open_File_Complete');
+      getTreeList().then(() => {
+        openFile(selected.value);
+      });
+    });
   });
 
   onUnmounted(() => {
@@ -43,6 +68,39 @@
 <style scoped lang="less">
   @import '/@/design/theme.less';
 
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    position: relative;
+    z-index: 999;
+
+    .left-box {
+      width: 18%;
+      height: 100%;
+      padding: 10px;
+      border: 1px solid var(--vent-device-manager-box-border);
+      background: var(--vent-device-manager-box-bg);
+      overflow-y: auto;
+      // box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+    }
+
+    .right-box {
+      width: 82%;
+      height: 100%;
+      padding: 10px;
+      box-sizing: border-box;
+    }
+
+    .list {
+      height: calc(100% - 49px);
+      position: relative;
+    }
+  }
+
   ::v-deep .suffix {
     height: 32px;
     line-height: 32px;

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

@@ -18,7 +18,7 @@
           </div>
         </div>
         <div class="contents">
-          <img src="/@/assets/images/fire/pie.png" alt="" />
+          <img src="@/assets/images/fire/pie.png" alt="" />
           <span class="text">{{ topContent.temperature }}</span>
           <span class="dw">°C</span>
         </div>
@@ -75,14 +75,14 @@
               {{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : '' }}</span>
             </div>
 
-            <BaseTab
+            <!-- <BaseTab
               style="width: 180px; color: var(--vent-font-color)"
               :tabs="[
                 { name: '实时监测', id: 'default' },
                 { name: '预测曲线', id: 'predict' },
               ]"
               v-model:id="shownChart"
-            />
+            /> -->
           </div>
           <div class="echarts-box">
             <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />

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

@@ -36,14 +36,14 @@
       <div class="title">
         <div class="text">束管系统监测</div>
         <div class="select-box flex">
-          <BaseTab
+          <!-- <BaseTab
             style="width: 200px; color: var(--vent-font-color); margin-right: 10px"
             :tabs="[
               { name: '束管监测', id: 'default' },
               { name: '预测曲线', id: 'predict' },
             ]"
             v-model:id="shownChart"
-          />
+          /> -->
           <a-select v-model:value="selectData" style="width: 250px" @change="changeSelect">
             <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
           </a-select>

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

@@ -37,103 +37,100 @@
       </div>
     </div>
     <div v-if="shown === 'chart'" class="chart-item">
-      <div v-for="(item, index) in chartsConfig" :key="`acmt${index}`">
-        <EchartLine3
-          style="height: 300px; width: 400px; margin: 0 5px"
-          :x-data="item.x"
-          :y1-data="item.y1"
-          :y2-data="item.y2"
-          :y3-data="item.y3"
-          :y4-data="item.y4"
-        />
+      <div v-for="(item, index) in charts" :key="`acmt${index}`" class="chart-content">
         <div class="text-center">
           {{ item.label }}
         </div>
+        <PredictionCurve style="height: 300px; width: 480px; margin: 15px" :chart="item" :timeout="timeout" />
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
-  import EchartLine3 from './echartLine3.vue';
+  import { ref } from 'vue';
   import BaseTab from '../../../gas/components/tab/baseTab.vue';
-  import moment from 'moment';
+  import PredictionCurve from './predictionCurve.vue';
 
-  const props = defineProps<{
+  // well i know this is trash but the time is reaching
+  defineProps<{
     cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
-    charts: { label: string; time: Date; data: [number, number, number, number] }[];
+    charts: {
+      label: string;
+      time: Date;
+      data: [number, number, number, number];
+    }[];
     title: string;
     timeout?: number;
   }>();
 
   const shown = ref('default');
-  const chartsConfig = ref<
-    {
-      label: string;
-      /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
-      indexMark: number;
-      x: string[];
-      y1: number[];
-      y2: number[];
-      y3: number[];
-      y4: number[];
-    }[]
-  >([]);
+  // const chartsConfig = ref<
+  //   {
+  //     label: string;
+  //     /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
+  //     indexMark: number;
+  //     x: string[];
+  //     y1: number[];
+  //     y2: number[];
+  //     y3: number[];
+  //     y4: number[];
+  //   }[]
+  // >([]);
 
-  watch(
-    () => props.charts,
-    () => {
-      const arr = new Array(20).fill(0);
-      props.charts.forEach((el, i) => {
-        if (chartsConfig.value[i]) {
-          // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
-          // 那么应该按先进后出的队列模式更新数据了
-          const val = chartsConfig.value[i];
-          if (val.indexMark === 20) {
-            val.x.shift();
-            val.y1.shift();
-            val.y2.shift();
-            val.y3.shift();
-            val.y4.shift();
-            val.indexMark = 19;
-          }
-          val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
-          val.y1[val.indexMark] = el.data[0];
-          val.y2[val.indexMark] = el.data[1];
-          val.y3[val.indexMark] = el.data[2];
-          val.y4[val.indexMark] = el.data[3];
-          // 指针向后移动1
-          val.indexMark += 1;
-        } else {
-          // 更新配置
-          // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
-          const startFrom = moment(el.time);
-          chartsConfig.value[i] = {
-            label: el.label,
-            indexMark: 1,
-            x: arr.map(() => {
-              const str = startFrom.format('HH:mm:ss');
-              startFrom.add(props.timeout || 3000);
-              return str;
-            }),
-            y1: arr.map(() => {
-              return el.data[0];
-            }),
-            y2: arr.map(() => {
-              return el.data[1];
-            }),
-            y3: arr.map(() => {
-              return el.data[2];
-            }),
-            y4: arr.map(() => {
-              return el.data[3];
-            }),
-          };
-        }
-      });
-    },
-    { immediate: true, deep: true }
-  );
+  // watch(
+  //   () => props.charts,
+  //   () => {
+  //     const arr = new Array(20).fill(0);
+  //     props.charts.forEach((el, i) => {
+  //       if (chartsConfig.value[i]) {
+  //         // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
+  //         // 那么应该按先进后出的队列模式更新数据了
+  //         const val = chartsConfig.value[i];
+  //         if (val.indexMark === 20) {
+  //           val.x.shift();
+  //           val.y1.shift();
+  //           val.y2.shift();
+  //           val.y3.shift();
+  //           val.y4.shift();
+  //           val.indexMark = 19;
+  //         }
+  //         val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
+  //         val.y1[val.indexMark] = el.data[0];
+  //         val.y2[val.indexMark] = el.data[1];
+  //         val.y3[val.indexMark] = el.data[2];
+  //         val.y4[val.indexMark] = el.data[3];
+  //         // 指针向后移动1
+  //         val.indexMark += 1;
+  //       } else {
+  //         // 更新配置
+  //         // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
+  //         const startFrom = moment(el.time);
+  //         chartsConfig.value[i] = {
+  //           label: el.label,
+  //           indexMark: 1,
+  //           x: arr.map(() => {
+  //             const str = startFrom.format('HH:mm:ss');
+  //             startFrom.add(props.timeout || 3000);
+  //             return str;
+  //           }),
+  //           y1: arr.map(() => {
+  //             return el.data[0];
+  //           }),
+  //           y2: arr.map(() => {
+  //             return el.data[1];
+  //           }),
+  //           y3: arr.map(() => {
+  //             return el.data[2];
+  //           }),
+  //           y4: arr.map(() => {
+  //             return el.data[3];
+  //           }),
+  //         };
+  //       }
+  //     });
+  //   },
+  //   { immediate: true, deep: true }
+  // );
 </script>
 <style lang="less">
   @import '/@/design/theme.less';
@@ -257,6 +254,12 @@
       flex-wrap: wrap;
       height: calc(100% - 50px);
       overflow-y: auto;
+
+      .chart-content {
+        // border: 1px solid var(--vent-base-border);
+        box-shadow: inset 0px 0px 10px 1px var(--vent-modal-box-shadow);
+        padding: 10px 0;
+      }
     }
   }
 </style>

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

@@ -14,9 +14,27 @@
   import { ref, watch } from 'vue';
   import EchartLine3 from './echartLine3.vue';
 
+  /** 给定全量数据，绘制曲线对应的prop */
+  interface CurveProp {
+    label: string;
+    time: [];
+    data: [number, number, number];
+    monitorData: number[];
+  }
+  /** 给定单点数据，更新曲线对应的prop */
+  interface PointProp {
+    label: string;
+    time: Date;
+    data: [number, number, number, number];
+  }
+  function isCurveProp(d: any): d is CurveProp {
+    return Boolean(d.monitorData);
+  }
+
+  // well i know this is trash but the time is reaching
   const props = defineProps<{
     /** 测点图配置，该测点图在每次数据更新时追加曲线数据，但如果需要更新图表，那么需要更改id来告知组件 */
-    chart: { id: number | string; label: string; time: []; data: [number, number, number]; monitorData: number[] };
+    chart: CurveProp | PointProp;
     timeout?: number;
   }>();
 
@@ -38,24 +56,19 @@
     y3: [],
     y4: [],
   });
-  let chartId = 0;
 
   watch(
     () => props.chart,
     (el) => {
+      debugger;
       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);
+
+      // 新版的预测曲线处理，应用到了火灾预警下的各个模块
+      if (isCurveProp(el)) {
+        const arr = new Array(el.time.length).fill(0);
         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: el.time.map((item) => {
             return item + '：00';
           }),
@@ -71,25 +84,55 @@
           y4: el.monitorData,
         };
       } else {
-        // 更新配置
-        // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
-        // 那么应该按先进后出的队列模式更新数据了
-        const val = chartConfig.value;
-        if (val.indexMark === 20) {
-          val.x.shift();
-          val.y1.shift();
-          val.y2.shift();
-          val.y3.shift();
-          val.y4.shift();
-          val.indexMark = 19;
+        // indexMark为0表示还没插入过数据，初始化数据
+        if (chartConfig.value.indexMark === 0) {
+          const arr = new Array(20).fill(0);
+          const startFrom = moment(el.time);
+          chartConfig.value = {
+            // label: el.label,
+            label: '',
+            indexMark: 1,
+            x: arr.map(() => {
+              const str = startFrom.format('HH:mm:ss');
+              startFrom.add(props.timeout || 3000);
+              return str;
+            }),
+            y1: arr.map(() => {
+              return el.data[0];
+            }),
+            y2: arr.map(() => {
+              return el.data[1];
+            }),
+            y3: arr.map(() => {
+              return el.data[2];
+            }),
+            y4: arr.map(() => {
+              return el.data[3];
+            }),
+          };
+        } else {
+          // 更新配置
+          // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
+          // 那么应该按先进后出的队列模式更新数据了
+          const val = chartConfig.value;
+          if (val.indexMark === 20) {
+            val.x.shift();
+            val.y1.shift();
+            val.y2.shift();
+            val.y3.shift();
+            val.y4.shift();
+            val.indexMark = 19;
+          }
+          val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
+          val.y1[val.indexMark] = el.data[0];
+          val.y2[val.indexMark] = el.data[1];
+          val.y3[val.indexMark] = el.data[2];
+          val.y4[val.indexMark] = el.data[3];
+          // 指针向后移动1
+          val.indexMark += 1;
+
+          chartConfig.value = val;
         }
-        val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
-        val.y1[val.indexMark] = el.data[0];
-        val.y2[val.indexMark] = el.data[1];
-        val.y3[val.indexMark] = el.data[2];
-        val.y4[val.indexMark] = el.data[3];
-        // 指针向后移动1
-        val.indexMark += 1;
       }
     },
     { immediate: true, deep: true }

src/views/vent/monitorManager/alarmMonitor/warn/dustWarn.vue

@@ -205,7 +205,7 @@
           chartListTf.push({
             label: el.strinstallpos,
             time: new Date(),
-            data: [avgParams.avg_dusting_value, avgParams.max_dusting_value, avgParams.min_dusting_value, el.readData.dustval, , 5, 10],
+            data: [avgParams.avg_dusting_value, avgParams.max_dusting_value, avgParams.min_dusting_value, el.readData.dustval],
           });
         });
         choiceData = res.dust;

src/views/vent/monitorManager/alarmMonitor/warn/gasWarn.vue

@@ -185,10 +185,15 @@
             ],
           });
           // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
+          const avgParams = el.avgParam || {
+            avg_gas_value: 0,
+            max_gas_value: 0,
+            min_gas_value: 0,
+          };
           chartListWs.push({
             label: el.strinstallpos,
             time: new Date(),
-            data: [moment().format('ss'), 15, 5, 10],
+            data: [avgParams.avg_gas_value, avgParams.max_gas_value, avgParams.min_gas_value, el.readData.gasC],
           });
         });
       }

src/views/vent/monitorManager/alarmMonitor/warn/ventilateWarn.vue

@@ -160,10 +160,15 @@
 
         res.vent.forEach((el) => {
           // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
+          const avgParams = el.avgParam || {
+            avg_vent_value: 0,
+            max_vent_value: 0,
+            min_vent_value: 0,
+          };
           chartListTf.push({
             label: el.strinstallpos,
             time: new Date(),
-            data: [moment().format('ss'), 15, 5, 10],
+            data: [avgParams.avg_vent_value, avgParams.max_vent_value, avgParams.min_vent_value, el.readData.jin],
           });
         });
 

src/views/vent/monitorManager/deviceMonitor/components/device/modal/dust.modal.vue

@@ -2,8 +2,12 @@
   <BasicModal v-bind="$attrs" destroyOnClose @register="register" :title="`粉尘监测详情    ${currentTime}`" width="1200px">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item"
-          :class="{ 'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
           <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
@@ -15,7 +19,8 @@
             </div>
             <div class="item-container">
               <div class="title">巷道温度</div>
-              <div class="value"><span class="data">{{ dustMonitor.temperature ? dustMonitor.temperature : '-' }}</span>
+              <div class="value"
+                ><span class="data">{{ dustMonitor.temperature ? dustMonitor.temperature : '-' }}</span>
                 <span>℃</span>
               </div>
             </div>
@@ -26,7 +31,8 @@
             </div>
             <div class="item-container">
               <div class="title">粉尘浓度</div>
-              <div class="value"><span class="data">{{ dustMonitor.dustval ? dustMonitor.dustval : '-' }}</span>
+              <div class="value"
+                ><span class="data">{{ dustMonitor.dustval ? dustMonitor.dustval : '-' }}</span>
                 <span>mg/m³</span>
               </div>
             </div>
@@ -37,8 +43,9 @@
             </div>
             <div class="item-container">
               <div class="title">喷雾水压</div>
-              <div class="value"><span class="data">{{ dustMonitor.waterPressure ? dustMonitor.waterPressure : '-'
-                  }}</span> <span>MPa</span></div>
+              <div class="value"
+                ><span class="data">{{ dustMonitor.waterPressure ? dustMonitor.waterPressure : '-' }}</span> <span>MPa</span></div
+              >
             </div>
           </div>
           <div class="top-item warning-box">
@@ -67,8 +74,7 @@
           <div class="dust-group">
             <div class="dust-item">
               <div class="title">粉尘浓度(实时)</div>
-              <div class="value">{{ dustMonitor.dustval ? dustMonitor.dustval : '-' }}<span>mg/m³</span>
-              </div>
+              <div class="value">{{ dustMonitor.dustval ? dustMonitor.dustval : '-' }}<span>mg/m³</span> </div>
             </div>
             <div class="dust-item">
               <div class="title">总尘浓度(时间加权)</div>
@@ -76,8 +82,7 @@
             </div>
             <div class="dust-item">
               <div class="title">呼吸加权容许浓度</div>
-              <div class="value">{{ dustMonitor.breathWeighted ? dustMonitor.breathWeighted : '-' }}<span>mg/m³</span>
-              </div>
+              <div class="value">{{ dustMonitor.breathWeighted ? dustMonitor.breathWeighted : '-' }}<span>mg/m³</span> </div>
             </div>
             <div class="dust-item">
               <div class="title">爆炸浓度(煤尘)</div>
@@ -88,8 +93,14 @@
         <div class="right-bottom">
           <span class="base-title">粉尘预测曲线</span>
           <div class="echarts-box">
-            <BarAndLine xAxisPropType="time" :dataSource="posList" height="100%" :chartsColumns="chartsColumns"
-              :option="echatsOption" chartsType="listMonitor" />
+            <BarAndLine
+              xAxisPropType="time"
+              :dataSource="posList"
+              height="100%"
+              :chartsColumns="chartsColumns"
+              :option="echatsOption"
+              chartsType="listMonitor"
+            />
           </div>
         </div>
       </div>
@@ -97,422 +108,426 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import dayjs from 'dayjs';
-
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
-  props: {
-    dataSource: { type: Array },
-    activeID: { type: String },
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([]);
-    const posList = ref<any[]>([]);
-    const dustMonitor = shallowRef({});
-    const dustSwitch = ref(false);
-    const echartNow = ref<any[]>([])
-    const echartYc=reactive<any[]>([])
-    const flag=ref(true)
-
-    const echatsOption = {
-      grid: {
-        top: '20%',
-        left: '2px',
-        right: '10px',
-        bottom: '3%',
-        containLabel: true,
-      },
-      toolbox: {
-        feature: {},
-      },
-    };
-
-    const chartsColumns = [
-      {
-        legend: '实时值',
-        seriesName: '(mg/m³)',
-        ymax: 5,
-        yname: 'mg/m³',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'nowVal',
-      },
-      {
-        legend: '预测值',
-        seriesName: '(mg/m³)',
-        ymax: 5,
-        yname: 'mg/m³',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#EE6666',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'ycVal',
-      },
-      {
-        legend: '预警值',
-        seriesName: '(mg/m³)',
-        ymax: 5,
-        yname: 'mg/m³',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#9BCB75',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'warnVal',
-      },
-    ];
-
-    const columns = [
-      {
-        title: '安装位置',
-        dataIndex: 'position',
-        width: 60,
-        align: 'center',
-        customRender: ({ index }) => {
-          return `测点${index}`;
+  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const dustMonitor = shallowRef({});
+      const dustSwitch = ref(false);
+      const echartNow = ref<any[]>([]);
+      const echartYc = reactive<any[]>([]);
+      const flag = ref(true);
+
+      const echatsOption = {
+        grid: {
+          top: '20%',
+          left: '2px',
+          right: '10px',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumns = [
+        {
+          legend: '实时值',
+          seriesName: '(mg/m³)',
+          ymax: 5,
+          yname: 'mg/m³',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'nowVal',
+        },
+        {
+          legend: '预测值',
+          seriesName: '(mg/m³)',
+          ymax: 5,
+          yname: 'mg/m³',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#EE6666',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'ycVal',
+        },
+        {
+          legend: '预警值',
+          seriesName: '(mg/m³)',
+          ymax: 5,
+          yname: 'mg/m³',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#9BCB75',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'warnVal',
+        },
+      ];
+
+      const columns = [
+        {
+          title: '安装位置',
+          dataIndex: 'position',
+          width: 60,
+          align: 'center',
+          customRender: ({ index }) => {
+            return `测点${index}`;
+          },
+        },
+        {
+          title: '安装距离(m)',
+          dataIndex: 'pos',
+          align: 'center',
+          width: 60,
+        },
+        {
+          title: '测点温度',
+          dataIndex: 'value',
+          align: 'center',
+          width: 50,
         },
-      },
-      {
-        title: '安装距离(m)',
-        dataIndex: 'pos',
-        align: 'center',
-        width: 60,
-      },
-      {
-        title: '测点温度',
-        dataIndex: 'value',
-        align: 'center',
-        width: 50,
-      },
-      {
-        title: '测点状态',
-        dataIndex: 'state',
-        align: 'center',
-        width: 50,
-        customRender: () => {
-          return `正常`;
+        {
+          title: '测点状态',
+          dataIndex: 'state',
+          align: 'center',
+          width: 50,
+          customRender: () => {
+            return `正常`;
+          },
         },
-      },
-    ];
-
-    const warningConfig = reactive({
-      data: [
-        ['测点6', '318℃', '严重报警'],
-        ['测点43', '142℃', '一般预警'],
-        ['测点23', '167℃', '一般预警'],
-        ['测点6', '198℃', '超高预警'],
-        ['测点65', '197℃', '超高预警'],
-        ['测点78', '154℃', '一般预警'],
-        ['测点61', '104℃', '一般预警'],
-        ['测点87', '150℃', '一般信息'],
-      ],
-      index: false,
-      columnWidth: [150],
-      oddRowBGC: '#009acd10',
-      evenRowBGC: '#009acd05',
-      align: ['center', 'center', 'center'],
-    });
-
-    const [register, { setModalProps }] = useModalInner();
-
-    function handleVisibleChange(visible) {
-      if (visible) {
+      ];
+
+      const warningConfig = reactive({
+        data: [
+          ['测点6', '318℃', '严重报警'],
+          ['测点43', '142℃', '一般预警'],
+          ['测点23', '167℃', '一般预警'],
+          ['测点6', '198℃', '超高预警'],
+          ['测点65', '197℃', '超高预警'],
+          ['测点78', '154℃', '一般预警'],
+          ['测点61', '104℃', '一般预警'],
+          ['测点87', '150℃', '一般信息'],
+        ],
+        index: false,
+        columnWidth: [150],
+        oddRowBGC: '#009acd10',
+        evenRowBGC: '#009acd05',
+        align: ['center', 'center', 'center'],
+      });
+
+      const [register, { setModalProps }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
-
-    // 选择监测
-    function selectDevice(id) {
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-      setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id;
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      deviceList.value = newDataSource as any[];
-      // if (newActiveID != oldActiveID) {
-      //   activeDeviceID.value = newActiveID as string;
-      // }
-      activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-      newDataSource?.forEach((item: any, index) => {
-        if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-          // activeDeviceID.value = item.deviceID;
-          // const list = item.summaryHour
-          // list.filter(data => {
-          //   const date = new Date();     //1. js获取当前时间
-          //   const min = date.getMinutes();  //2. 获取当前分钟
-          //   return Object.assign(data, data.dustval, { readTime: (dayjs(date.setMinutes(min + 10))).format('YYYY-MM-DD HH:mm:ss') })
-          // })
-          // if(list.length > 0) posList.value = list
-          // posList.value = item['history'];
-          if(flag.value){
-            echartNow.value = JSON.parse(item.readData.expectInfo)['list']
-            flag.value=false
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        deviceList.value = newDataSource as any[];
+        // if (newActiveID != oldActiveID) {
+        //   activeDeviceID.value = newActiveID as string;
+        // }
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            // activeDeviceID.value = item.deviceID;
+            // const list = item.summaryHour
+            // list.filter(data => {
+            //   const date = new Date();     //1. js获取当前时间
+            //   const min = date.getMinutes();  //2. 获取当前分钟
+            //   return Object.assign(data, data.dustval, { readTime: (dayjs(date.setMinutes(min + 10))).format('YYYY-MM-DD HH:mm:ss') })
+            // })
+            // if(list.length > 0) posList.value = list
+            // posList.value = item['history'];
+            if (flag.value) {
+              echartNow.value = JSON.parse(item.readData.expectInfo)['list'];
+              flag.value = false;
+            }
+            echartYc.push({
+              time: JSON.parse(item.readData.expectInfo)['nowTime'],
+              value: JSON.parse(item.readData.expectInfo)['nowVal'],
+              value1: JSON.parse(item.readData.expectInfo)['aveVal'],
+            });
+            // let unique=uniqueObjects( echartNow.value, 'time');
+
+            let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
+            setData.forEach((el) => {
+              if (el.value && el.value != '0') {
+                el.nowVal = el.value;
+                el.ycVal = el.value1;
+                el.warnVal = JSON.parse(item.readData.expectInfo)['fmin'] ? JSON.parse(item.readData.expectInfo)['fmin'] : '';
+              }
+            });
+            posList.value = setData;
+            dustMonitor.value = item.readData;
           }
-          echartYc.push({time:JSON.parse(item.readData.expectInfo)['nowTime'],value:JSON.parse(item.readData.expectInfo)['nowVal'],value1:JSON.parse(item.readData.expectInfo)['aveVal']})
-          // let unique=uniqueObjects( echartNow.value, 'time');
-    
-          let setData = [ ... echartNow.value,...echartYc].sort((a,b)=>Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)))
-          setData.forEach(el=>{
-           if(el.value && el.value!='0'){
-            el.nowVal=el.value
-            el.ycVal=el.value1
-            el.warnVal=JSON.parse(item.readData.expectInfo)['fmin'] ? JSON.parse(item.readData.expectInfo)['fmin'] : ''
-           }
-          })
-          posList.value = setData
-          dustMonitor.value = item.readData;
-        }
+        });
       });
-    });
-
-    return {
-      register,
-      model: modelRef,
-      currentTime,
-      dustSwitch,
-      handleVisibleChange,
-      selectDevice,
-      deviceList,
-      activeDeviceID,
-      dustMonitor,
-      echatsOption,
-      posList,
-      chartsColumns,
-      columns,
-      warningConfig,
-    };
-  },
-});
+
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        dustSwitch,
+        handleVisibleChange,
+        selectDevice,
+        deviceList,
+        activeDeviceID,
+        dustMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+        columns,
+        warningConfig,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-.fiber-modal {
-  width: 100%;
-  height: 600px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .modal-left {
-    width: 200px;
-    height: 100%;
-    overflow-y: auto;
-    background: #ffffff11;
-    padding: 5px;
-    border-radius: 5px;
-
-    .active-device-title {
-      color: aqua;
-    }
+  .fiber-modal {
+    width: 100%;
+    height: 600px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .active-device-title {
+        color: aqua;
+      }
 
-    .link-item {
-      position: relative;
-      cursor: pointer;
-      line-height: 30px;
-      padding-left: 30px;
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
 
-      span:hover {
-        color: #89ffff;
-      }
+        span:hover {
+          color: #89ffff;
+        }
 
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 8px;
-        height: 8px;
-        top: 12px;
-        left: 10px;
-        transform: rotateZ(45deg) skew(10deg, 10deg);
-        background: #45d3fd;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
       }
     }
-  }
 
-  .modal-right {
-    width: calc(100% - 220px);
-    overflow-y: auto;
-
-    .base-title {
-      line-height: 32px;
-      position: relative;
-      padding-left: 20px;
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 4px;
-        height: 12px;
-        top: 4px;
-        left: 10px;
-        background: #45d3fd;
-        border-radius: 4px;
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
+
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
+        }
       }
-    }
-
-    .right-top {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      margin-bottom: 30px;
-      padding: 0 10px;
 
-      .top-item {
-        width: 155px;
-        height: 60px;
+      .right-top {
         display: flex;
         flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        background: url('/@/assets/images/vent/model_image/dust-monitor-bg.png') no-repeat;
-        padding-top: 16px;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        padding: 0 10px;
 
-        .icon {
-          width: 58px;
+        .top-item {
+          width: 155px;
           height: 60px;
           display: flex;
+          flex-direction: row;
           justify-content: center;
           align-items: center;
-          position: relative;
-          top: -8px;
-        }
-
-        .item-container {
-          width: 100px;
-          display: flex;
-          flex-direction: column;
-
-          // justify-content: start;
-          div {
-            padding-left: 8px;
-          }
-
-          .title {
-            font-size: 14px;
-            margin-bottom: 8px;
-          }
-
-          .value {
+          background: url('/@/assets/images/vent/model_image/dust-monitor-bg.png') no-repeat;
+          padding-top: 16px;
+
+          .icon {
+            width: 58px;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             position: relative;
-            width: 110px;
             top: -8px;
+          }
 
-            .data {
-              display: inline-block;
-              width: 50px;
-              font-family: douyuFont;
-              font-weight: 600;
-              font-size: 14px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              color: #28dce4;
+          .item-container {
+            width: 100px;
+            display: flex;
+            flex-direction: column;
+
+            // justify-content: start;
+            div {
+              padding-left: 8px;
             }
 
-            span {
-              font-family: Arial, Helvetica, sans-serif;
+            .title {
               font-size: 14px;
-              color: #ffffffdd;
+              margin-bottom: 8px;
             }
-          }
-        }
-      }
-
-      .warning-box {
-        padding-top: 0px;
-
-        .icon {
-          margin-top: 20px;
 
-          .icon-style {
-            color: #fdb146;
+            .value {
+              position: relative;
+              width: 110px;
+              top: -8px;
+
+              .data {
+                display: inline-block;
+                width: 50px;
+                font-family: douyuFont;
+                font-weight: 600;
+                font-size: 14px;
+                -webkit-background-clip: text;
+                background-clip: text;
+                color: #28dce4;
+              }
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 14px;
+                color: #ffffffdd;
+              }
+            }
           }
         }
 
-        .title {
+        .warning-box {
           padding-top: 0px;
-        }
 
-        .warning-value {
-          font-family: electronicFont;
-          font-size: 18px;
-          color: #61ddb1;
-        }
-      }
-    }
-
-    .right-center {
-      margin-top: 20px;
+          .icon {
+            margin-top: 20px;
 
-      .dust-group {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-
-        .dust-item {
-          width: 238px;
-          height: 148px;
-          background: url('/@/assets/images/vent/model_image/dust-bg.png') no-repeat;
-          scale: 0.9;
+            .icon-style {
+              color: #fdb146;
+            }
+          }
 
           .title {
-            position: absolute;
-            top: 80px;
-            left: 70px;
-            font-size: 16px;
+            padding-top: 0px;
           }
 
-          .value {
-            position: absolute;
-            top: 50px;
-            left: 50px;
-            font-family: 'douyuFont';
-            color: #20dbfd;
-            text-shadow: 0 0 25px #00d8ff;
+          .warning-value {
+            font-family: electronicFont;
             font-size: 18px;
-            font-weight: bolder;
+            color: #61ddb1;
+          }
+        }
+      }
 
-            span {
-              font-family: Arial, Helvetica, sans-serif;
+      .right-center {
+        margin-top: 20px;
+
+        .dust-group {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+
+          .dust-item {
+            width: 238px;
+            height: 148px;
+            background: url('/@/assets/images/vent/model_image/dust-bg.png') no-repeat;
+            scale: 0.9;
+
+            .title {
+              position: absolute;
+              top: 80px;
+              left: 70px;
               font-size: 16px;
-              color: aliceblue;
-              margin-left: 8px;
+            }
+
+            .value {
+              position: absolute;
+              top: 50px;
+              left: 50px;
+              font-family: 'douyuFont';
+              color: #20dbfd;
+              text-shadow: 0 0 25px #00d8ff;
+              font-size: 18px;
+              font-weight: bolder;
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 16px;
+                color: aliceblue;
+                margin-left: 8px;
+              }
             }
           }
         }
       }
-    }
 
-    .right-bottom {
-      margin-top: 20px;
+      .right-bottom {
+        margin-top: 20px;
 
-      .echarts-box {
-        width: 100%;
-        height: 270px;
+        .echarts-box {
+          width: 100%;
+          height: 270px;
+        }
       }
     }
   }
-}
 </style>