预警管控修改-提交

src/views/vent/deviceManager/comment/DeviceModal.vue

@@ -62,6 +62,11 @@
           @deleteById="deleteCameraById"
           :isAdd="true"
       /></a-tab-pane>
+      <!-- <a-tab-pane key="9" tab="预警指标修改">
+        <template v-if="activeKey == '9'">
+        <editWarnTable></editWarnTable>
+        </template>
+      </a-tab-pane> -->
     </a-tabs>
     <FormModal v-else :record="record" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
   </BasicModal>
@@ -76,6 +81,7 @@
   import ManagerWarningDeviceTable from './warningTabel/index2.vue';
   import BackWindDeviceTable from './warningTabel/index3.vue';
   import WorkFacePointTable from './pointTabel/WorkFacePointTable.vue';
+  // import editWarnTable from './editWarnTable/index.vue'
   import FormModal from './FormModal.vue';
   import { cloneDeep } from 'lodash-es';
   import { columns as pointColumns, workFaceColumns, simulationColumns } from './pointTabel/point.data';

src/views/vent/deviceManager/comment/editWarnTable/index.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="editWarnTable">
+        <a-form :model="formStates" labelAlign="center" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+            <a-form-item label="所属煤层：">
+                <a-select v-model:value="formStates.ssmc" placeholder="请选择...">
+                    <a-select-option v-for="item in mcList" :value="item.value">{{ item.label }}</a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item label="绿色预警CO：">
+                <a-input v-model:value="formStates.lsco" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item label="绿色预警CO/CO₂：">
+                <a-input v-model:value="formStates.lsco2" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item label="黄色预警CO：">
+                <a-input v-model:value="formStates.hsco" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item label="黄色预警CO/CO₂：">
+                <a-input v-model:value="formStates.hsco2" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item label="黄色预警C₂H₄：">
+                <a-input v-model:value="formStates.hsc2h4" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item label="黄色预警C3H8/C2H6：">
+                <a-input v-model:value="formStates.hsc2h6" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item label="红色预警CO：">
+                <a-input v-model:value="formStates.rsco" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item label="红色预警CO/CO₂：">
+                <a-input v-model:value="formStates.rsco2" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item label="红色预警C₂H₄：">
+                <a-input v-model:value="formStates.rsc2h4" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item label="红色预警C3H8/C2H6：">
+                <a-input v-model:value="formStates.rsc2h6" placeholder="请输入..." />
+            </a-form-item>
+        </a-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch,onMounted } from 'vue'
+import {sysTypeWarnList} from '../../../monitorManager/alarmMonitor/common.api.ts'
+
+let formStates = reactive({})
+let mcList=reactive<any[]>([])
+
+//获取煤层列表
+
+async function getMenuList() {
+    let res = await sysTypeWarnList({ type: 'fire' })
+    mcList.length=0
+    if(res.fire && res.fire.length!=0){
+        res.fire.forEach(el=>{
+            mcList.push({label:el.systemname,value:el.id})
+        })
+    }
+}
+onMounted(()=>{
+    getMenuList() 
+})
+
+
+</script>
+
+<style lang="less" scoped>
+.warnTargetFire-brt {
+    width: 100%;
+    height: 600px;
+    padding: 15px;
+    box-sizing: border-box
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/alarm.api.ts

@@ -9,6 +9,7 @@ enum Api {
 
   sysTypeWarnList = '/ventanaly-device/safety/ventanalyAlarmLog/sysTypeWarn',
   sysWarn = '/ventanaly-device/safety/ventanalyAlarmLog/sysWarn',
+  getReferenceValue='/safety/managesysDevice/getReferenceValue'
 }
 /**
  * 列表接口
@@ -40,3 +41,6 @@ export const sysTypeWarnList = (params) => defHttp.post({ url: Api.sysTypeWarnLi
  * @param params
  */
 export const sysWarn = (params) => defHttp.post({ url: Api.sysWarn, params });
+
+//根据煤层ID查询指标参数
+export const getReferenceValue = (params) => defHttp.get({ url: Api.getReferenceValue, params });

src/views/vent/monitorManager/alarmMonitor/common.api.ts

@@ -3,7 +3,7 @@ import { defHttp } from '/@/utils/http/axios';
 enum Api {
   sysTypeWarnList = '/ventanaly-device/safety/ventanalyAlarmLog/sysTypeWarn',
   sysWarn = '/ventanaly-device/safety/ventanalyAlarmLog/sysWarn',
-  getDevice='/ventanaly-device/monitor/device'
+  getDevice='/ventanaly-device/monitor/device',
 }
 
 /**

src/views/vent/monitorManager/alarmMonitor/common.data.ts

@@ -32,7 +32,8 @@ export const componentName = {
   fireWork: markRaw(defineAsyncComponent(() => import('./common/fireWork.vue'))),
   closeWall: markRaw(defineAsyncComponent(() => import('./common/closeWall.vue'))),
   mainWell: markRaw(defineAsyncComponent(() => import('./common/mainWell.vue'))),
-  warnTargetFire: markRaw(defineAsyncComponent(() => import('./common/warnTargetFire.vue'))),
+  warnTargetFireBrt: markRaw(defineAsyncComponent(() => import('./common/warnTargetFire-brt.vue'))),
+  warnTargetFireBd: markRaw(defineAsyncComponent(() => import('./common/warnTargetFire-bd.vue'))),
 };
 //顶部区域数据
 export const topList = [

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

@@ -22,39 +22,14 @@
         <div class="text1">
           <span>预警等级 : </span>
           <span :class="{
-            value1: topContent.warn == '1',
-            value2: topContent.warn == '2',
-            value3: topContent.warn == '3',
-            value4: topContent.warn == '4',
-            value5: topContent.warn == '5',
-            value6: topContent.warn == '6',
-          }">{{ topContent.warn == '1'
-            ? '正常'
-            : topContent.warn == '2'
-              ? '低风险'
-              : topContent.warn == '3'
-                ? '一般风险'
-                : topContent.warn == '4'
-                  ? '较高风险'
-                  : topContent.warn == '5'
-                    ? '高风险'
-                    : topContent.warn == '6'
-                      ? '报警' : '--' }}</span>
+            value1: topContent.warnLevel == '绿色预警',
+            value2: topContent.warnLevel == '黄色预警',
+            value3: topContent.warnLevel == '红色预警',
+          }">{{ topContent.warnLevel || '-' }}</span>
         </div>
         <div class="text1">
           <span>煤自燃阶段 : </span>
-          <span>{{ topContent.warn == '1'
-            ? '氧化阶段'
-            : topContent.warn == '2'
-              ? '自热阶段'
-              : topContent.warn == '3'
-                ? '临界阶段'
-                : topContent.warn == '4'
-                  ? '热解阶段'
-                  : topContent.warn == '5'
-                    ? '裂变阶段'
-                    : topContent.warn == '6'
-                      ? '燃烧阶段' : '--' }}</span>
+          <span>{{ topContent.smokeJd || '-' }}</span>
         </div>
 
       </div>
@@ -87,7 +62,7 @@
           <div class="title-f">
             <div class="title-text">{{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ?
               '(设备未连接)' :
-                '' }}</span></div>
+              '' }}</span></div>
           </div>
           <div class="echarts-box">
             <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
@@ -95,7 +70,7 @@
         </div>
         <div class="right-echartbox">
           <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
-            :heightCanvas="heightCanvas" :warnLevel="topContent.warn"></warnZb>
+            :heightCanvas="heightCanvas" :warnLevel="topContent.warnLevel"></warnZb>
         </div>
 
       </div>
@@ -113,17 +88,18 @@ let props = defineProps({
 });
 let widthV = ref('75%')
 let heightV = ref('80%')
-let coordDw = ref<any[]>([26, 46, 80, 128, 190, 260,])
+let coordDw = ref<any[]>([47, 95])
 let widthCanvas = ref(562)
 let heightCanvas = ref(316)
 //设备连接状态
-let netStatus=ref(0)
+let netStatus = ref(0)
 //密闭-顶部区域数据
 let topContent = reactive({
   temperature: 0,
   position: '',
   time: '',
-  warn: '',
+  warnLevel: '',
+  smokeJd:'',
 });
 //密闭参数列表
 let mbList = reactive([
@@ -263,7 +239,9 @@ watch(
         topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
         topContent.position = val.bundletube[0].strinstallpos || '--';
         topContent.time = val.bundletube[0].readTime || '--';
-        topContent.warn = val.bundletube[0].readData.internalFireWarnLevel
+        topContent.warnLevel = val.bundletube[0].syswarnLevel_str
+        topContent.smokeJd = val.bundletube[0].syswarnLevel_des
+
         mbList[0].nd = val.bundletube[0].readData.o2val || '--';
         mbList[1].nd = val.bundletube[0].readData.coval || '--';
         mbList[2].nd = val.bundletube[0].readData.co2val || '--';
@@ -274,7 +252,7 @@ watch(
           el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--';
           el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--';
         });
-        netStatus.value=  val.bundletube[0]['netStatus']
+        netStatus.value = val.bundletube[0]['netStatus']
         val.bundletube[0].history.forEach((v) => {
           echartDataSg1.xData.push(v.time);
           if (echartDataSg1.lengedData == 'O₂') {
@@ -296,7 +274,8 @@ watch(
         topContent.temperature = 0;
         topContent.position = '--';
         topContent.time = '--';
-        topContent.warn = '--';
+        topContent.warnLevel = '--';
+        topContent.smokeJd='--'
         mbList[0].nd = '--';
         mbList[1].nd = '--';
         mbList[2].nd = '--';
@@ -406,7 +385,7 @@ watch(
       }
 
       .text1 {
-        width: 50%;
+        width: 90%;
         height: 30px;
         line-height: 30px;
         font-size: 14px;
@@ -417,7 +396,7 @@ watch(
           display: inline-block;
 
           &:nth-child(1) {
-            width: 120px;
+            width: 160px;
             text-align: right;
           }
 
@@ -433,11 +412,13 @@ watch(
         }
 
         .value2 {
-          color: rgb(0, 242, 255) !important;
+          // color: rgb(0, 242, 255) !important;
+          color: #ffff35 !important;
         }
 
         .value3 {
-          color: #ffff35 !important;
+          // color: #ffff35 !important;
+          color: #ff0000 !important;
         }
 
         .value4 {

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

@@ -1,109 +0,0 @@
-<template>
-    <div class="warnTargetFire">
-        <div class="top-area">
-            <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 359 }">
-                <template #bodyCell="{ column, text }">
-                    <template v-if="column.dataIndex === 'name'">
-                        <a href="javascript:;">{{ text }}</a>
-                    </template>
-                </template>
-            </a-table>
-        </div>
-        <div class="bot-area">
-            <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
-                :heightCanvas="heightCanvas"></warnZb>
-        </div>
-
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import warnZb from './warnZb.vue'
-
-let widthV = ref('80%')
-let heightV = ref('80%')
-let coordDw = ref<any[]>([15, 36, 70, 116, 176, 212,])
-let widthCanvas = ref(1508)
-let heightCanvas = ref(256)
-let tableData = ref<any[]>([
-    { yjdj: '绿色预警', zrjd: '氧化阶段', zb: 'CO,O₂', tj: '(1)当c(O₂)值在8%~15%时,c(CO)<200ppm;  (2)当c(O₂)值在15%~18%时,c(CO)<100ppm;  (3)当c(O₂)值在18%~21%时,c(CO)<50ppm;',wd:'T0⊂(30,50)', ckz: '' },
-    { yjdj: '蓝色预警', zrjd: '自热阶段', zb: 'CO,O₂,(CO*100)/△O₂', tj: '超过氧化阶段条件',wd:'T0⊂(50,70)', ckz: '0.2~0.5' },
-    { yjdj: '黄色预警', zrjd: '临界阶段', zb: 'CO,O₂,(CO*100)/△O₂', tj: '超过自热阶段条件',wd:'T0⊂(70,100)', ckz: '0.5-0.6' },
-    { yjdj: '橙色预警', zrjd: '热解阶段', zb: '(CO*100)/△O₂,C₂H₄', tj: '超过临界阶段条件',wd:'T0⊂(100,150)', ckz: '>0.6>0' },
-    { yjdj: '红色预警', zrjd: '裂变阶段', zb: 'C₂H₄,C₂H₆,C₂H₄', tj: '超过热解阶段条件',wd:'T0⊂(150,210)', ckz: '>0极大' },
-    { yjdj: '黑色预警', zrjd: '燃烧阶段', zb: 'C₂H₂', tj: '超过裂变阶段条件',wd:'T0>210', ckz: '>0' },
-])
-
-let columns = reactive([
-
-    {
-        title: '序号',
-        dataIndex: '',
-        key: 'rowIndex',
-        width: 80,
-        align: 'center',
-        customRender: ({ index }) => {
-            return `${index + 1}`;
-        },
-    },
-    {
-        title: '预警等级',
-        dataIndex: 'yjdj',
-        align: 'center',
-    },
-    {
-        title: '煤自燃阶段',
-        dataIndex: 'zrjd',
-        align: 'center',
-    },
-    {
-        title: '指标',
-        align: 'center',
-        dataIndex: 'zb',
-    },
-    {
-        title: '条件',
-        align: 'center',
-        dataIndex: 'tj',
-    },
-    {
-        title: '温度',
-        align: 'center',
-        dataIndex: 'wd',
-    },
-    {
-        title: '参考值',
-        align: 'center',
-        dataIndex: 'ckz',
-    },
-])
-
-</script>
-
-<style lang="less" scoped>
-.warnTargetFire {
-    width: 100%;
-    height: 100%;
-    margin: 15px 0px 0px 0px;
-    padding: 20px;
-    background: url('../../../../../assets//images/fire/border.png') no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-   
-    .top-area {
-        height:55% ;
-        margin-bottom: 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-    }
-
-    .bot-area {
-        height: calc(45% - 15px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-
-    }
-
-}
-</style>

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

@@ -3,31 +3,33 @@
     <div ref="coord" class="coords" :style="{ width: widthV, height: heightV }">
       <div class="triangle-x"></div>
       <div class="triangle-y"></div>
+      <div class="name-x" >时间</div>
+      <div class="name-y" >温度(℃)</div>
       <div class="coord-dw">
-        <div class="dw-item" :style="{ bottom: `${coordDw[0]}px` }">30~40℃</div>
-        <div class="dw-item" :style="{ bottom: `${coordDw[1]}px` }">50~60℃</div>
-        <div class="dw-item" :style="{ bottom: `${coordDw[2]}px` }">70~80℃</div>
+        <div class="dw-item" :style="{ bottom: `${coordDw[0]}px` }">120℃</div>
+        <div class="dw-item" :style="{ bottom: `${coordDw[1]}px` }">200℃</div>
+        <!-- <div class="dw-item" :style="{ bottom: `${coordDw[2]}px` }">70~80℃</div>
         <div class="dw-item" :style="{ bottom: `${coordDw[3]}px` }">90~110℃</div>
         <div class="dw-item" :style="{ bottom: `${coordDw[4]}px` }">130~160℃</div>
-        <div class="dw-item" :style="{ bottom: `${coordDw[5]}px` }">210~350℃</div>
+        <div class="dw-item" :style="{ bottom: `${coordDw[5]}px` }">210~350℃</div> -->
       </div>
       <div class="coord-bj">
         <div class="bj-qfq" :style="{ width: widthCanvas < 600 ? '180px' : '401px' }">
           <div class="left-jt"></div>
           <div class="line"></div>
           <div class="right-jt"></div>
-          <div class="text">潜伏期</div>
+          <div class="text">缓慢氧化阶段</div>
         </div>
-        <div class="bj-zrq" :style="{ width: widthCanvas < 600 ? '360px' : '699px' }">
+        <div class="bj-zrq" :style="{ width: widthCanvas < 600 ? '121px' : '250px' }">
           <div class="left-jt"></div>
           <div class="line"></div>
           <div class="right-jt"></div>
-          <div class="text">自热期</div>
+          <div class="text">加速氧化阶段</div>
         </div>
-        <div class="bj-rsq" :style="{ width: widthCanvas < 600 ? '90px' : '305px' }">
+        <div class="bj-rsq" :style="{ width: widthCanvas < 600 ? '180px' : '570px' }">
           <div class="left-jt"></div>
           <div class="line"></div>
-          <div class="text">燃烧期</div>
+          <div class="text">剧烈氧化阶段</div>
         </div>
       </div>
       <div class="coord-area" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)',overflow:'hidden' }">
@@ -110,212 +112,217 @@ function getCanvas() {
   ctx.moveTo(xValues[0], yValues[0]);
   for (var i = 1; i < xValues.length; i++) {
     ctx.lineTo(xValues[i], yValues[i]);
-    if(props.warnLevel=='1'){
+    if(props.warnLevel=='绿色预警'){
       ctx.fillStyle = 'rgba(145, 230, 9)'; // 设置填充颜色
-      if(props.widthCanvas < 600 && i<=4500){
-        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }else if(i<=4000) {
-        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }
-    }else if(props.warnLevel=='2'){
-      ctx.fillStyle = 'rgba(0, 242, 255)'; // 设置填充颜色
       if(props.widthCanvas < 600 && i<=9000){
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }else if(i<=8000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }
-    }else if(props.warnLevel=='3'){
+    }else if(props.warnLevel=='黄色预警'){
       ctx.fillStyle = 'rgba(255, 255, 53)'; // 设置填充颜色
-      if(props.widthCanvas < 600 && i<=13500){
-        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }else if(i<=12000) {
-        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }
-    }else if(props.warnLevel=='4'){
-      ctx.fillStyle = 'rgba(255, 190, 105)'; // 设置填充颜色
-      if(props.widthCanvas < 600 && i<=18000){
-        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }else if(i<=16000) {
-        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }
-    }else if(props.warnLevel=='5'){
-      ctx.fillStyle = 'rgba(255, 111, 0)'; // 设置填充颜色
-      if(props.widthCanvas < 600 && i<=22500){
+      if(props.widthCanvas < 600 && i<=15000){
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }else if(i<=20000) {
+      }else if(i<=13000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }
-    }else if(props.warnLevel=='6'){
+    }else if(props.warnLevel=='红色预警'){
       ctx.fillStyle = 'rgba(255, 0, 0)'; // 设置填充颜色
-      if(props.widthCanvas < 600 && i<=27000){
+      if(props.widthCanvas < 600 && i>15000){
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }else if(i<=22000) {
+      }else if(i>13000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }
     }
+    // else if(props.warnLevel=='4'){
+    //   ctx.fillStyle = 'rgba(255, 190, 105)'; // 设置填充颜色
+    //   if(props.widthCanvas < 600 && i<=18000){
+    //     ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+    //   }else if(i<=16000) {
+    //     ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+    //   }
+    // }else if(props.warnLevel=='5'){
+    //   ctx.fillStyle = 'rgba(255, 111, 0)'; // 设置填充颜色
+    //   if(props.widthCanvas < 600 && i<=22500){
+    //     ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+    //   }else if(i<=20000) {
+    //     ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+    //   }
+    // }else if(props.warnLevel=='6'){
+    //   ctx.fillStyle = 'rgba(255, 0, 0)'; // 设置填充颜色
+    //   if(props.widthCanvas < 600 && i<=27000){
+    //     ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+    //   }else if(i<=22000) {
+    //     ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+    //   }
+    // }
   
   }
   ctx.stroke();
 
   //标记点1
-  ctx.beginPath();
-  ctx.arc(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000], 6, 0, 2 * Math.PI);
-  ctx.fillStyle = '#ff6363';
-  ctx.fill();
-  //标记点2
+  // ctx.beginPath();
+  // ctx.arc(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000], 6, 0, 2 * Math.PI);
+  // ctx.fillStyle = '#ff6363';
+  // ctx.fill();
   ctx.beginPath();
   ctx.arc(xValues[props.widthCanvas < 600 ? 9000 : 8000], yValues[props.widthCanvas < 600 ? 9000 : 8000], 6, 0, 2 * Math.PI);
   ctx.fillStyle = '#ff6363';
   ctx.fill();
-  //标记点3
-  ctx.beginPath();
-  ctx.arc(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000], 6, 0, 2 * Math.PI);
-  ctx.fillStyle = '#ff6363';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#ff6363';
-  ctx.fillText('临界', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 10, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 15); // 文字位置略微偏上，以便于文字与点对齐
-  //标记点4
-  ctx.beginPath();
-  ctx.arc(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000], 6, 0, 2 * Math.PI);
-  ctx.fillStyle = '#ff6363';
-  ctx.fill();
-  //标记点5
-  ctx.beginPath();
-  ctx.arc(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000], 6, 0, 2 * Math.PI);
-  ctx.fillStyle = '#ff6363';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#ff6363';
-  ctx.fillText('征兆', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 10, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 15); // 文字位置略微偏上，以便于文字与点对齐
-  //标记点5
+  //标记点2
   ctx.beginPath();
-  ctx.arc(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000], 6, 0, 2 * Math.PI);
+  ctx.arc(xValues[props.widthCanvas < 600 ? 15000 : 13000], yValues[props.widthCanvas < 600 ? 15000 : 13000], 6, 0, 2 * Math.PI);
   ctx.fillStyle = '#ff6363';
   ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#ff6363';
-  ctx.fillText('火灾', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 10, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+  // //标记点3
+  // ctx.beginPath();
+  // ctx.arc(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000], 6, 0, 2 * Math.PI);
+  // ctx.fillStyle = '#ff6363';
+  // ctx.fill();
+  // // 在点附近添加文字
+  // ctx.font = '12px Arial';
+  // ctx.fillStyle = '#ff6363';
+  // ctx.fillText('临界', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 10, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+  // //标记点4
+  // ctx.beginPath();
+  // ctx.arc(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000], 6, 0, 2 * Math.PI);
+  // ctx.fillStyle = '#ff6363';
+  // ctx.fill();
+  // //标记点5
+  // ctx.beginPath();
+  // ctx.arc(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000], 6, 0, 2 * Math.PI);
+  // ctx.fillStyle = '#ff6363';
+  // ctx.fill();
+  // // 在点附近添加文字
+  // ctx.font = '12px Arial';
+  // ctx.fillStyle = '#ff6363';
+  // ctx.fillText('征兆', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 10, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+  // //标记点5
+  // ctx.beginPath();
+  // ctx.arc(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000], 6, 0, 2 * Math.PI);
+  // ctx.fillStyle = '#ff6363';
+  // ctx.fill();
+  // // 在点附近添加文字
+  // ctx.font = '12px Arial';
+  // ctx.fillStyle = '#ff6363';
+  // ctx.fillText('火灾', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 10, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
 
   // 设置线条样式（颜色、宽度等）
-  ctx.strokeStyle = '#0d2973';
+  ctx.strokeStyle = 'rgba(36, 74, 148,.8)';
   ctx.lineWidth = 1;
   ctx.lineCap = 'round';
   // 定义虚线模式：[线段长度, 间隔长度]
   ctx.setLineDash([5, 5]);
   //绘制标记点1线条-x
   ctx.beginPath();
-  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 4500 : 4000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000]); // 结束绘制的点
-  ctx.stroke(); // 进行绘制
-  //绘制标记点1线条-y
-  ctx.beginPath();
-  ctx.moveTo(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 4500 : 4000], canvas.height); // 结束绘制的点
-  ctx.stroke(); // 进行绘制
-  // 在线条附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#2aadf3';
-  if (props.widthCanvas < 600) {
-    ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 70, yValues[props.widthCanvas < 600 ? 4500 : 4000] + 25); // 文字位置略微偏上，以便于文字与点对齐
-    ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 70, yValues[props.widthCanvas < 600 ? 4500 : 4000] - 5); // 文字位置略微偏上，以便于文字与点对齐
-  } else {
-    ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 120, yValues[props.widthCanvas < 600 ? 4500 : 4000] + 18); // 文字位置略微偏上，以便于文字与点对齐
-    ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 120, yValues[props.widthCanvas < 600 ? 4500 : 4000] - 5); // 文字位置略微偏上，以便于文字与点对齐
-  }
-  //绘制标记点2线条-x
-  ctx.beginPath();
   ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 9000 : 8000]); // 开始绘制的点
   ctx.lineTo(xValues[props.widthCanvas < 600 ? 9000 : 8000], yValues[props.widthCanvas < 600 ? 9000 : 8000]); // 结束绘制的点
   ctx.stroke(); // 进行绘制
-  //绘制标记点2线条-y
+  //绘制标记点1线条-y
   ctx.beginPath();
   ctx.moveTo(xValues[props.widthCanvas < 600 ? 9000 : 8000], yValues[props.widthCanvas < 600 ? 9000 : 8000]); // 开始绘制的点
   ctx.lineTo(xValues[props.widthCanvas < 600 ? 9000 : 8000], canvas.height); // 结束绘制的点
   ctx.stroke(); // 进行绘制
-  // 在线条附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#2aadf3';
-  if (props.widthCanvas < 600) {
-    ctx.fillText('自热阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 160, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 12); // 文字位置略微偏上，以便于文字与点对齐
-  } else {
-    ctx.fillText('自热阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 320, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 12); // 文字位置略微偏上，以便于文字与点对齐
-  }
-  //绘制标记点3线条-x
-  ctx.beginPath();
-  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 结束绘制的点
-  ctx.stroke(); // 进行绘制
-  //绘制标记点3线条-y
-  ctx.beginPath();
-  ctx.moveTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], canvas.height); // 结束绘制的点
-  ctx.stroke(); // 进行绘制
-  // 在线条附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#2aadf3';
-  if (props.widthCanvas < 600) {
-    ctx.fillText('临界阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 250, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 20); // 文字位置略微偏上，以便于文字与点对齐
-  } else {
-    ctx.fillText('临界阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 520, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 20); // 文字位置略微偏上，以便于文字与点对齐
-  }
-  //绘制标记点4线条-x
-  ctx.beginPath();
-  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 结束绘制的点
-  ctx.stroke(); // 进行绘制
-  //绘制标记点4线条-y
-  ctx.beginPath();
-  ctx.moveTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], canvas.height); // 结束绘制的点
-  ctx.stroke(); // 进行绘制
-  // 在线条附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#2aadf3';
-  if (props.widthCanvas < 600) {
-    ctx.fillText('热解阶段', xValues[props.widthCanvas < 600 ? 18000 : 16000] - 340, yValues[props.widthCanvas < 600 ? 18000 : 16000] - 25); // 文字位置略微偏上，以便于文字与点对齐
-  } else {
-    ctx.fillText('热解阶段', xValues[props.widthCanvas < 600 ? 18000 : 16000] - 720, yValues[props.widthCanvas < 600 ? 18000 : 16000] - 25); // 文字位置略微偏上，以便于文字与点对齐
-  }
-  //绘制标记点5线条-x
-  ctx.beginPath();
-  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 结束绘制的点
-  ctx.stroke(); // 进行绘制
-  //绘制标记点5线条-y
-  ctx.beginPath();
-  ctx.moveTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], canvas.height); // 结束绘制的点
-  ctx.stroke(); // 进行绘制
-  // 在线条附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#2aadf3';
-  if (props.widthCanvas < 600) {
-    ctx.fillText('裂变阶段', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 430, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 30); // 文字位置略微偏上，以便于文字与点对齐
-  } else {
-    ctx.fillText('裂变阶段', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 920, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 15); // 文字位置略微偏上，以便于文字与点对齐
-  }
-  //绘制标记点6线条-x
+  // // 在线条附近添加文字
+  // ctx.font = '12px Arial';
+  // ctx.fillStyle = '#2aadf3';
+  // if (props.widthCanvas < 600) {
+  //   ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 70, yValues[props.widthCanvas < 600 ? 9000 : 8000] + 25); // 文字位置略微偏上，以便于文字与点对齐
+  //   ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 70, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 5); // 文字位置略微偏上，以便于文字与点对齐
+  // } else {
+  //   ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 120, yValues[props.widthCanvas < 600 ? 9000 : 8000] + 18); // 文字位置略微偏上，以便于文字与点对齐
+  //   ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 120, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 5); // 文字位置略微偏上，以便于文字与点对齐
+  // }
+  //绘制标记点2线条-x
   ctx.beginPath();
-  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 结束绘制的点
+  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 15000 : 13000]); // 开始绘制的点
+  ctx.lineTo(xValues[props.widthCanvas < 600 ? 15000 : 13000], yValues[props.widthCanvas < 600 ? 15000 : 13000]); // 结束绘制的点
   ctx.stroke(); // 进行绘制
-  //绘制标记点6线条-y
+  //绘制标记点2线条-y
   ctx.beginPath();
-  ctx.moveTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 开始绘制的点
-  ctx.lineTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], canvas.height); // 结束绘制的点
+  ctx.moveTo(xValues[props.widthCanvas < 600 ? 15000 : 13000], yValues[props.widthCanvas < 600 ? 15000 : 13000]); // 开始绘制的点
+  ctx.lineTo(xValues[props.widthCanvas < 600 ? 15000 : 13000], canvas.height); // 结束绘制的点
   ctx.stroke(); // 进行绘制
-  // 在线条附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#2aadf3';
-  if (props.widthCanvas < 600) {
-    ctx.fillText('燃烧阶段', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 520, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
-  } else {
-    ctx.fillText('燃烧阶段', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 1020, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
-  }
+  // // 在线条附近添加文字
+  // ctx.font = '12px Arial';
+  // ctx.fillStyle = '#2aadf3';
+  // if (props.widthCanvas < 600) {
+  //   ctx.fillText('自热阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 160, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 12); // 文字位置略微偏上，以便于文字与点对齐
+  // } else {
+  //   ctx.fillText('自热阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 320, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 12); // 文字位置略微偏上，以便于文字与点对齐
+  // }
+  // //绘制标记点3线条-x
+  // ctx.beginPath();
+  // ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 开始绘制的点
+  // ctx.lineTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 结束绘制的点
+  // ctx.stroke(); // 进行绘制
+  // //绘制标记点3线条-y
+  // ctx.beginPath();
+  // ctx.moveTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 开始绘制的点
+  // ctx.lineTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], canvas.height); // 结束绘制的点
+  // ctx.stroke(); // 进行绘制
+  // // 在线条附近添加文字
+  // ctx.font = '12px Arial';
+  // ctx.fillStyle = '#2aadf3';
+  // if (props.widthCanvas < 600) {
+  //   ctx.fillText('临界阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 250, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 20); // 文字位置略微偏上，以便于文字与点对齐
+  // } else {
+  //   ctx.fillText('临界阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 520, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 20); // 文字位置略微偏上，以便于文字与点对齐
+  // }
+  // //绘制标记点4线条-x
+  // ctx.beginPath();
+  // ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 开始绘制的点
+  // ctx.lineTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 结束绘制的点
+  // ctx.stroke(); // 进行绘制
+  // //绘制标记点4线条-y
+  // ctx.beginPath();
+  // ctx.moveTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 开始绘制的点
+  // ctx.lineTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], canvas.height); // 结束绘制的点
+  // ctx.stroke(); // 进行绘制
+  // // 在线条附近添加文字
+  // ctx.font = '12px Arial';
+  // ctx.fillStyle = '#2aadf3';
+  // if (props.widthCanvas < 600) {
+  //   ctx.fillText('热解阶段', xValues[props.widthCanvas < 600 ? 18000 : 16000] - 340, yValues[props.widthCanvas < 600 ? 18000 : 16000] - 25); // 文字位置略微偏上，以便于文字与点对齐
+  // } else {
+  //   ctx.fillText('热解阶段', xValues[props.widthCanvas < 600 ? 18000 : 16000] - 720, yValues[props.widthCanvas < 600 ? 18000 : 16000] - 25); // 文字位置略微偏上，以便于文字与点对齐
+  // }
+  // //绘制标记点5线条-x
+  // ctx.beginPath();
+  // ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 开始绘制的点
+  // ctx.lineTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 结束绘制的点
+  // ctx.stroke(); // 进行绘制
+  // //绘制标记点5线条-y
+  // ctx.beginPath();
+  // ctx.moveTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 开始绘制的点
+  // ctx.lineTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], canvas.height); // 结束绘制的点
+  // ctx.stroke(); // 进行绘制
+  // // 在线条附近添加文字
+  // ctx.font = '12px Arial';
+  // ctx.fillStyle = '#2aadf3';
+  // if (props.widthCanvas < 600) {
+  //   ctx.fillText('裂变阶段', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 430, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 30); // 文字位置略微偏上，以便于文字与点对齐
+  // } else {
+  //   ctx.fillText('裂变阶段', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 920, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+  // }
+  // //绘制标记点6线条-x
+  // ctx.beginPath();
+  // ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 开始绘制的点
+  // ctx.lineTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 结束绘制的点
+  // ctx.stroke(); // 进行绘制
+  // //绘制标记点6线条-y
+  // ctx.beginPath();
+  // ctx.moveTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 开始绘制的点
+  // ctx.lineTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], canvas.height); // 结束绘制的点
+  // ctx.stroke(); // 进行绘制
+  // // 在线条附近添加文字
+  // ctx.font = '12px Arial';
+  // ctx.fillStyle = '#2aadf3';
+  // if (props.widthCanvas < 600) {
+  //   ctx.fillText('燃烧阶段', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 520, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+  // } else {
+  //   ctx.fillText('燃烧阶段', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 1020, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+  // }
 }
 
 
@@ -372,11 +379,28 @@ onMounted(() => {
       border-bottom: 5px solid transparent;
     }
 
+    .name-x{
+        position: absolute;
+        right: 0;
+        bottom: -35px;
+        color: #fff;
+        font-size: 12px;
+      }
+      .name-y{
+        width: 20px;
+        position: absolute;
+        left: -40px;
+        top: 0px;
+        color: #fff;
+        font-size: 12px;
+        text-align: center;
+      }
+
     .coord-dw {
       position: absolute;
-      left: -100px;
+      left: -75px;
       top: 0;
-      width: 100px;
+      width: 75px;
       height: 100%;
 
       .dw-item {
@@ -422,12 +446,14 @@ onMounted(() => {
       }
 
       .text {
+        width: 90%;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         font-size: 14px;
         color: #db9753;
+        text-align: center;
       }
 
       .line {

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

@@ -216,65 +216,28 @@
               <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
                 <div class="box-item">
                   <div :class="{
-                    value1: item.value == '1',
-                    value2: item.value == '2',
-                    value3: item.value == '3',
-                    value4: item.value == '4',
-                    value5: item.value == '5',
-                    value6: item.value == '6',
+                    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.value == '1',
-                    value2: item.value == '2',
-                    value3: item.value == '3',
-                    value4: item.value == '4',
-                    value5: item.value == '5',
-                    value6: item.value == '6',
-                  }">{{
-                    item.value == '1'
-                      ? '正常'
-                      : item.value == '2'
-                        ? '低风险'
-                        : item.value == '3'
-                          ? '一般风险'
-                          : item.value == '4'
-                            ? '较高风险'
-                            : item.value == '5'
-                              ? '高风险'
-                              : item.value == '6'
-                                ? '报警'
-                                : '--'
-                  }}
+                    value1: item.warnLevel == '绿色预警',
+                    value2: item.warnLevel == '黄色预警',
+                    value3: item.warnLevel == '红色预警',
+                  }">{{item.warnLevel || '-'}}
                   </div>
                   <div class="title">预警等级</div>
                 </div>
-                <div class="box-item">
+                <div class="box-item1">
                   <div :class="{
-                    value1: item.value == '1',
-                    value2: item.value == '2',
-                    value3: item.value == '3',
-                    value4: item.value == '4',
-                    value5: item.value == '5',
-                    value6: item.value == '6',
-                  }">{{
-                    item.value == '1'
-                      ? '氧化阶段'
-                      : item.value == '2'
-                        ? '自热阶段'
-                        : item.value == '3'
-                          ? '临界阶段'
-                          : item.value == '4'
-                            ? '热解阶段'
-                            : item.value == '5'
-                              ? '裂变阶段'
-                              : item.value == '6'
-                                ? '燃烧阶段'
-                                : '--'
-                  }}
+                    value1: item.warnLevel == '绿色预警',
+                    value2: item.warnLevel == '黄色预警',
+                    value3: item.warnLevel == '红色预警',
+                  }">{{item.smokeJd || '-'}}
                   </div>
                   <div class="title">煤自燃阶段</div>
                 </div>
@@ -490,15 +453,16 @@ async function getList() {
       ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
       : '';
 
-  if (res.bundletubeInfo && res.bundletubeInfo.msgTxt.length!=0 && res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
+  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({
-        value: el.readData.internalFireWarnLevel,
+        warnLevel: el.syswarnLevel_str,
+        smokeJd: el.syswarnLevel_des,
         value1: el.strinstallpos,
       });
     });
-  }else {
-    fireMonitor1.length=0
+  } else {
+    fireMonitor1.length = 0
   }
   gasMonitor.length = 0;
   gasData.sums = 0;
@@ -902,14 +866,16 @@ onUnmounted(() => {
               font-size: 16px;
               font-family: 'douyuFont';
               margin-bottom: 5px;
-              color: rgb(0, 242, 255);
+              // color: rgb(0, 242, 255);
+              color: #ffff35;
             }
 
             .value3 {
               font-size: 16px;
               font-family: 'douyuFont';
               margin-bottom: 5px;
-              color: #ffff35;
+              // color: #ffff35;
+              color: #ff0000;
             }
 
             .value4 {
@@ -951,7 +917,7 @@ onUnmounted(() => {
               margin: 40px auto;
 
               .box-item {
-                width: 33.3%;
+                width: 25%;
                 height: 100%;
                 display: flex;
                 flex-direction: column;
@@ -976,16 +942,81 @@ onUnmounted(() => {
                   font-size: 16px;
                   font-family: 'douyuFont';
                   margin-bottom: 5px;
-                  color: rgb(0, 242, 255);
+                  // 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;
+                }
+              }
+              .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';

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

@@ -1,6 +1,6 @@
 <template>
     <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 火灾监测预警 </customHeader>
-    <div :class="isZb ? 'fireWarn1' : 'fireWarn'">
+    <div class="fireWarn">
         <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
             style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
         <div class="alarm-menu">
@@ -19,17 +19,19 @@
             </div>
         </div>
         <div class="fire-content">
-            <component :is="componentName[currentLoad]" :listData="listData" :strType="strType"></component>
+            <component :is="componentName[currentLoad]" :listData="listData" :strType="strType" :tableList="tableLists">
+            </component>
         </div>
 
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
 import { typeMenuList, componentName } from '../common.data'
 import { sysTypeWarnList, sysWarn } from '../common.api'
 import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+import { useGlobSetting } from '/@/hooks/setting';
 import { useRouter } from 'vue-router';
 import CustomHeader from '/@/components/vent/customHeader.vue';
 
@@ -40,11 +42,11 @@ let currentLoad = ref('')
 let activeIndex = ref(0);
 //当前激活菜单的索引
 let activeIndex1 = ref(0);
-let isZb = ref(false)
 let menuList = reactive<any[]>([]); //左侧菜单列表
 let menuList1 = reactive({
     external: [],
     internal: [],
+    info: []
 });
 //详情数据
 let listData = reactive({
@@ -59,6 +61,7 @@ let listData = reactive({
 }); //详情数据
 let strType = ref(''); //火灾外因-区别工作面和煤层
 let router = useRouter()
+let tableLists = ref<any[]>([])
 
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
@@ -88,6 +91,7 @@ async function getMenuList() {
         menuList.length = 0
         menuList1.external = res.external;
         menuList1.internal = res.internal;
+        menuList1.info = res.info
         menuList1.internal.forEach((el) => {
             menuList.push({
                 name: el.systemname,
@@ -114,8 +118,6 @@ function getSysWarnList(id, type) {
         loadZj();
     });
 }
-
-
 //内外因火灾、预警指标选项切换
 function btnClick(ind) {
     activeIndex.value = ind;
@@ -123,7 +125,6 @@ function btnClick(ind) {
         case 0:
             activeIndex1.value = 0;
             menuList.length = 0;
-            isZb.value = false
             currentLoad.value = '';
             menuList1.internal.forEach((el) => {
                 menuList.push({
@@ -140,7 +141,6 @@ function btnClick(ind) {
             break;
         case 1:
             activeIndex1.value = 0;
-            isZb.value = false
             menuList.length = 0;
             currentLoad.value = '';
             if (menuList1.external.length != 0) {
@@ -164,21 +164,65 @@ function btnClick(ind) {
             }
             break;
         case 2:
-            activeIndex1.value = 0;
-            isZb.value = true
+            clearTimeout(timer);
             menuList.length = 0;
-            currentLoad.value = 'warnTargetFire';
+            activeIndex1.value = 0;
+            menuList1.info.forEach((el) => {
+                menuList.push({
+                    name: el.sysname,
+                    warn: '正常',
+                    deviceID: el.sysid,
+                    strtype: '',
+                });
+            });
+            loadZb()
             break;
     }
 }
+//加载预警指标组件
+function loadZb() {
+    // menuList1.info.forEach((el) => {
+    //     if (el.list.length != 0) {
+    //         el.list.forEach(v => {
+    //             if (v.alarmName == '缓慢氧化阶段（吸氧蓄热期）') {
+    //                 v.warnGrade = '绿色预警'
+    //             } else if (v.alarmName == '加速氧化阶段（自热期）') {
+    //                 v.warnGrade = '黄色预警'
+    //             } else if (v.alarmName == '剧烈氧化阶段（燃烧期）') {
+    //                 v.warnGrade = '红色预警'
+    //             }
+    //         })
+    //     } else {
+    //         tableLists.value.length = 0
+    //     }
+    // });
+    tableLists.value = menuList1.info[0].list
+    const { sysOrgCode } = useGlobSetting();
+    switch (sysOrgCode) {
+        case 'sdmtjtbdmk': // 宝德
+            currentLoad.value = 'warnTargetFireBd';
+            return currentLoad.value;
+        case 'sdmtjtbetmk': // 布尔台
+            currentLoad.value = 'warnTargetFireBrt';
+            return currentLoad.value;
+        default:
+            currentLoad.value = 'warnTargetFireBrt';
+            return currentLoad.value;
+    }
+}
 //菜单选项切换
 function cardClick(ind, item) {
-    activeIndex1.value = ind;
-    strType.value = item.strtype;
-    clearTimeout(timer);
-    getClearList();
-    currentLoad.value = '';
-    getMonitor(item.deviceID, true);
+    if (activeIndex.value != 2) {
+        activeIndex1.value = ind;
+        strType.value = item.strtype;
+        clearTimeout(timer);
+        getClearList();
+        currentLoad.value = '';
+        getMonitor(item.deviceID, true);
+    } else {
+        tableLists.value = menuList1.info[ind].list
+    }
+
 }
 //加载组件
 function loadZj() {
@@ -188,8 +232,6 @@ function loadZj() {
         currentLoad.value = 'closeWall';
     } else if (activeIndex.value && activeIndex.value != 2) {
         currentLoad.value = 'mainWell';
-    } else if (activeIndex.value == 2) {
-        currentLoad.value = 'warnTargetFire';
     } else {
         currentLoad.value = '';
     }
@@ -348,60 +390,59 @@ onUnmounted(() => {
 
 }
 
-.fireWarn1 {
-    width: 100%;
-    height: 100%;
-    padding: 80px 10px 15px 10px;
-    box-sizing: border-box;
-
-    .alarm-menu {
-        width: 100%;
-
-        .type-btn {
-            width: 25%;
-            height: 36px;
-            line-height: 36px;
-            background-color: rgba(15, 55, 108, .8);
-            border: 2px solid #1b6eab;
-            border-radius: 5px;
-            box-sizing: border-box;
-            display: flex;
-            justify-content: space-between;
-
-            .btn {
-                width: 33%;
-                height: 32px;
-                line-height: 32px;
-                font-size: 14px;
-                text-align: center;
-                color: #fff;
-                cursor: pointer;
-            }
-
-            .btn1 {
-                width: 33%;
-                height: 32px;
-                line-height: 32px;
-                font-size: 14px;
-                color: #fff;
-                text-align: center;
-                border-radius: 2px;
-                background: #209dfc;
-                cursor: pointer;
-            }
-        }
-
-        .card-btn {
-            width: 100%;
-            height: calc(100% - 36px);
-            overflow-y: auto;
-            display: none;
-
-        }
-    }
-
-    .fire-content {
-        height: calc(100% - 30px)
-    }
-}
-</style>
+// .fireWarn1 {
+//     width: 100%;
+//     height: 100%;
+//     padding: 80px 10px 15px 10px;
+//     box-sizing: border-box;
+
+//     .alarm-menu {
+//         width: 100%;
+
+//         .type-btn {
+//             width: 25%;
+//             height: 36px;
+//             line-height: 36px;
+//             background-color: rgba(15, 55, 108, .8);
+//             border: 2px solid #1b6eab;
+//             border-radius: 5px;
+//             box-sizing: border-box;
+//             display: flex;
+//             justify-content: space-between;
+
+//             .btn {
+//                 width: 33%;
+//                 height: 32px;
+//                 line-height: 32px;
+//                 font-size: 14px;
+//                 text-align: center;
+//                 color: #fff;
+//                 cursor: pointer;
+//             }
+
+//             .btn1 {
+//                 width: 33%;
+//                 height: 32px;
+//                 line-height: 32px;
+//                 font-size: 14px;
+//                 color: #fff;
+//                 text-align: center;
+//                 border-radius: 2px;
+//                 background: #209dfc;
+//                 cursor: pointer;
+//             }
+//         }
+
+//         .card-btn {
+//             width: 100%;
+//             height: calc(100% - 36px);
+//             overflow-y: auto;
+//             display: none;
+
+//         }
+//     }
+
+//     .fire-content {
+//         height: calc(100% - 30px)
+//     }
+// }</style>

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

@@ -1,21 +1,10 @@
 <template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    :title="`束管监测详情 ${currentTime}`"
-    width="1200px"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    wrapClassName="bundle-modal"
-  >
+  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情 ${currentTime}`" width="1200px" @ok="handleOk"
+    @cancel="handleCancel" wrapClassName="bundle-modal">
     <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>
@@ -28,7 +17,8 @@
             </div>
             <div class="item-container">
               <div class="title">一氧化碳</div>
-              <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-' }} <span>ppm</span> </div>
+              <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-'
+                }} <span>ppm</span> </div>
             </div>
           </div>
           <div class="top-item">
@@ -37,7 +27,8 @@
             </div>
             <div class="item-container">
               <div class="title">二氧化碳</div>
-              <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val :
+                '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -46,7 +37,8 @@
             </div>
             <div class="item-container">
               <div class="title">甲烷</div>
-              <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval :
+                '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -55,7 +47,8 @@
             </div>
             <div class="item-container">
               <div class="title">乙烯</div>
-              <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val : '-' }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val :
+                '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -64,7 +57,8 @@
             </div>
             <div class="item-container">
               <div class="title">乙炔</div>
-              <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-' }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-'
+                }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -73,7 +67,8 @@
             </div>
             <div class="item-container">
               <div class="title">氧气</div>
-              <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-'
+                }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item warning-box">
@@ -82,31 +77,11 @@
             </div>
             <div class="item-container">
               <div class="title">风险等级</div>
-              <div
-                :class="{
-                  value1: posMonitor['internalFireWarnLevel'] == '1',
-                  value2: posMonitor['internalFireWarnLevel'] == '2',
-                  value3: posMonitor['internalFireWarnLevel'] == '3',
-                  value4: posMonitor['internalFireWarnLevel'] == '4',
-                  value5: posMonitor['internalFireWarnLevel'] == '5',
-                  value6: posMonitor['internalFireWarnLevel'] == '6',
-                }"
-                >{{
-                  posMonitor['internalFireWarnLevel'] == '1'
-                    ? '正常'
-                    : posMonitor['internalFireWarnLevel'] == '2'
-                    ? '低风险'
-                    : posMonitor['internalFireWarnLevel'] == '3'
-                    ? '一般风险'
-                    : posMonitor['internalFireWarnLevel'] == '4'
-                    ? '较高风险'
-                    : posMonitor['internalFireWarnLevel'] == '5'
-                    ? '高风险'
-                    : posMonitor['internalFireWarnLevel'] == '6'
-                    ? '报警'
-                    : '-'
-                }}</div
-              >
+              <div :class="{
+                value1: posMonitor['syswarnLevel_str'] == '绿色预警',
+                value2: posMonitor['syswarnLevel_str'] == '黄色预警',
+                value3: posMonitor['syswarnLevel_str'] == '红色预警',
+              }">{{ posMonitor['syswarnLevel_str'] || '-'}}</div>
             </div>
           </div>
           <div class="top-item warning-box">
@@ -120,20 +95,11 @@
           </div>
         </div>
         <div class="right-bottom">
-          <span class="base-title"
-            >设备监测曲线&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' : '' }}</span></span
-          >
+          <span class="base-title">设备监测曲线&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' :
+              '' }}</span></span>
           <div class="echarts-box">
-            <BarAndLine
-              class="echarts-line"
-              :xAxisPropType="xAxisPropType"
-              :dataSource="historyList"
-              height="100%"
-              width="65%"
-              :chartsColumns="chartsColumns"
-              :option="echatsOption"
-              chartsType="listMonitor"
-            />
+            <BarAndLine class="echarts-line" :xAxisPropType="xAxisPropType" :dataSource="historyList" height="100%"
+              width="65%" :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
 
             <!-- 爆炸三角形 -->
             <div style="width: 35%; height: 100%; margin: 0px auto">
@@ -146,426 +112,428 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  import blastDelta from './blastDelta.vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import dayjs from 'dayjs';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-  import { chartsColumnList } from '../device.data';
-  import { listdays, getHistoryData } from '../device.api';
-
-  export default defineComponent({
-    components: { BasicModal, BarAndLine, SvgIcon, blastDelta },
-    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 historyList = ref<any[]>([]);
-      const posList = ref<any[]>([]);
-      const posMonitor = shallowRef({});
-
-      const echatsOption = {
-        grid: {
-          top: '29%',
-          left: '3',
-          right: '45',
-          bottom: '3%',
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {},
-        },
-      };
-
-      const chartsColumnArr = getTableHeaderColumns('bundletube_chart');
-      const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
-      const xAxisPropType = ref('ttime');
-      const [register, { setModalProps, closeModal }] = 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) {
+import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import blastDelta from './blastDelta.vue';
+import { SvgIcon } from '/@/components/Icon';
+import dayjs from 'dayjs';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { chartsColumnList } from '../device.data';
+import { listdays, getHistoryData } from '../device.api';
+
+export default defineComponent({
+  components: { BasicModal, BarAndLine, SvgIcon, blastDelta },
+  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 historyList = ref<any[]>([]);
+    const posList = ref<any[]>([]);
+    const posMonitor = shallowRef({});
+
+    const echatsOption = {
+      grid: {
+        top: '29%',
+        left: '3',
+        right: '45',
+        bottom: '3%',
+        containLabel: true,
+      },
+      toolbox: {
+        feature: {},
+      },
+    };
+
+    const chartsColumnArr = getTableHeaderColumns('bundletube_chart');
+    const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
+    const xAxisPropType = ref('ttime');
+    const [register, { setModalProps, closeModal }] = useModalInner();
+
+    function handleVisibleChange(visible) {
+      if (visible) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
+
         setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 300);
-        getListdays();
+        }, 1000);
       }
+    }
 
-      function handleOk(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    // 选择监测
+    function selectDevice(id) {
+      loading.value = true;
+      setModalProps({ loading: true, confirmLoading: true });
+      setTimeout(() => {
+        loading.value = false;
+        activeDeviceID.value = id;
+        setModalProps({ loading: false, confirmLoading: false });
+      }, 300);
+      getListdays();
+    }
 
-      function handleCancel(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    function handleOk(e) {
+      e.preventDefault();
+      closeModal();
+    }
+
+    function handleCancel(e) {
+      e.preventDefault();
+      closeModal();
+    }
 
-      //获取历史数据
-      async function getListdays() {
-        if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
-          xAxisPropType.value = 'ttime';
-          const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss');
-          const ttime_end = dayjs().format('YYYY-MM-DD HH:mm:ss');
-          const pageNo = 1;
-          const pageSize = 100;
-          const skip = 8;
-          const strtype = posMonitor.value.deviceType;
-          let res = await listdays({
-            ttime_begin,
-            ttime_end,
-            pageNo,
-            pageSize,
-            skip,
-            strtype,
-            column: 'createTime',
-            gdeviceid: activeDeviceID.value,
+    //获取历史数据
+    async function getListdays() {
+      if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
+        xAxisPropType.value = 'ttime';
+        const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss');
+        const ttime_end = dayjs().format('YYYY-MM-DD HH:mm:ss');
+        const pageNo = 1;
+        const pageSize = 100;
+        const skip = 8;
+        const strtype = posMonitor.value.deviceType;
+        let res = await listdays({
+          ttime_begin,
+          ttime_end,
+          pageNo,
+          pageSize,
+          skip,
+          strtype,
+          column: 'createTime',
+          gdeviceid: activeDeviceID.value,
+        });
+        console.log(res, '束管历史数据');
+        let data = res.datalist.records;
+        if (data.length != 0) {
+          data.forEach((el) => {
+            Object.assign(el, el.readData);
+          });
+        }
+        historyList.value = data;
+      } else {
+        const params = {
+          pageNum: 1,
+          pageSize: 100,
+          startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
+          endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
+          deviceId: activeDeviceID.value,
+          interval: '1h',
+          isEmployee: true,
+        };
+        xAxisPropType.value = 'time';
+        const result = await getHistoryData({ ...params });
+        if (result['records'].length != 0) {
+          result['records'].forEach((el) => {
+            el.ch2val = el.C2H4;
+            el.chval = el.C2H2;
+            el.co2val = el.CO2;
+            el.coval = el.CO;
+            el.gasval = el.CH4;
+            el.o2val = el.O2;
           });
-          console.log(res, '束管历史数据');
-          let data = res.datalist.records;
-          if (data.length != 0) {
-            data.forEach((el) => {
-              Object.assign(el, el.readData);
-            });
-          }
-          historyList.value = data;
-        } else {
-          const params = {
-            pageNum: 1,
-            pageSize: 100,
-            startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
-            endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
-            deviceId: activeDeviceID.value,
-            interval: '1h',
-            isEmployee: true,
-          };
-          xAxisPropType.value = 'time';
-          const result = await getHistoryData({ ...params });
-          if (result['records'].length != 0) {
-            result['records'].forEach((el) => {
-              el.ch2val = el.C2H4;
-              el.chval = el.C2H2;
-              el.co2val = el.CO2;
-              el.coval = el.CO;
-              el.gasval = el.CH4;
-              el.o2val = el.O2;
-            });
-          }
-          historyList.value = result['records'];
         }
+        historyList.value = result['records'];
       }
+    }
 
-      watch(
-        [() => props.dataSource, () => props.activeID],
-        ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-          // if (newActiveID != oldActiveID) {
-          //   activeDeviceID.value = newActiveID as string;
-          // }
-          activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-          deviceList.value = newDataSource?.filter((item: any, index) => {
-            if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-              // activeDeviceID.value = item.deviceID;
-              posMonitor.value = Object.assign(item, item.readData);
-            }
-            item.readTime = item.readTime?.substring(11);
-            return item;
-          });
-        },
-        { immediate: true }
-      );
-      onMounted(() => {
-        getListdays();
-      });
-      return {
-        register,
-        model: modelRef,
-        currentTime,
-        handleVisibleChange,
-        selectDevice,
-        handleOk,
-        handleCancel,
-        deviceList,
-        historyList,
-        activeDeviceID,
-        posMonitor,
-        echatsOption,
-        posList,
-        chartsColumns,
-        xAxisPropType,
-      };
-    },
-  });
+    watch(
+      [() => props.dataSource, () => props.activeID],
+      ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        // if (newActiveID != oldActiveID) {
+        //   activeDeviceID.value = newActiveID as string;
+        // }
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        deviceList.value = newDataSource?.filter((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            // activeDeviceID.value = item.deviceID;
+            posMonitor.value = Object.assign(item, item.readData);
+          }
+          item.readTime = item.readTime?.substring(11);
+          return item;
+        });
+      },
+      { immediate: true }
+    );
+    onMounted(() => {
+      getListdays();
+    });
+    return {
+      register,
+      model: modelRef,
+      currentTime,
+      handleVisibleChange,
+      selectDevice,
+      handleOk,
+      handleCancel,
+      deviceList,
+      historyList,
+      activeDeviceID,
+      posMonitor,
+      echatsOption,
+      posList,
+      chartsColumns,
+      xAxisPropType,
+    };
+  },
+});
 </script>
 <style lang="less">
-  .bundle-modal {
-    .zxm-modal {
-      top: 30px !important;
-    }
+.bundle-modal {
+  .zxm-modal {
+    top: 30px !important;
   }
+}
 </style>
 
 <style lang="less" scoped>
-  .fiber-modal {
-    width: 100%;
-    height: 650px;
-    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: 650px;
+  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;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
 
-      .right-top {
+      .top-item {
+        width: 220px;
+        height: 100px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        margin-bottom: 10px;
+        justify-content: center;
+        border: 1px solid rgba(25, 237, 255, 0.4);
+        box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+        background: rgba(0, 0, 0, 0.06666666666666667);
+        padding-top: 20px;
+        margin: 10px 0;
+
+        .icon {
+          margin-right: 10px;
+          margin-top: 5px;
+          color: #fdb146;
+        }
 
-        .top-item {
-          width: 220px;
-          height: 100px;
+        .item-container {
+          width: 110px;
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           justify-content: center;
-          border: 1px solid rgba(25, 237, 255, 0.4);
-          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
-          background: rgba(0, 0, 0, 0.06666666666666667);
-          padding-top: 20px;
-          margin: 10px 0;
-
-          .icon {
-            margin-right: 10px;
-            margin-top: 5px;
-            color: #fdb146;
-          }
 
-          .item-container {
-            width: 110px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
+          div {
+            text-align: center;
+          }
 
-            div {
-              text-align: center;
-            }
+          .title {
+            font-size: 18px;
+          }
 
-            .title {
+          .value {
+            text-shadow: 0 0 25px #00fbfe;
+            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+            font-style: normal;
+            background-size: cover;
+            font-family: electronicFont;
+            font-size: 30px;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+            top: -8px;
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
               font-size: 18px;
-            }
-
-            .value {
-              text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-              font-style: normal;
-              background-size: cover;
-              font-family: electronicFont;
-              font-size: 30px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              -webkit-text-fill-color: transparent;
-              position: relative;
-              top: -8px;
-
-              span {
-                font-family: Arial, Helvetica, sans-serif;
-                font-size: 18px;
-                color: aliceblue;
-              }
+              color: aliceblue;
             }
           }
         }
+      }
 
-        .warning-box {
-          padding-top: 0px;
+      .warning-box {
+        padding-top: 0px;
 
-          .icon {
-            margin-top: 20px;
+        .icon {
+          margin-top: 20px;
 
-            :deep(.icon-style) {
-              width: auto;
-              color: #fdb146;
-            }
+          :deep(.icon-style) {
+            width: auto;
+            color: #fdb146;
           }
+        }
 
-          .warning-value {
-            font-size: 18px;
-            color: #61ddb1;
-          }
+        .warning-value {
+          font-size: 18px;
+          color: #61ddb1;
+        }
 
-          .value1 {
-            font-size: 18px;
-            color: rgb(145, 230, 9) !important;
-          }
+        .value1 {
+          font-size: 18px;
+          color: rgb(145, 230, 9) !important;
+        }
 
-          .value2 {
-            font-size: 18px;
-            color: rgb(0, 242, 255) !important;
-          }
+        .value2 {
+          font-size: 18px;
+          // color: rgb(0, 242, 255) !important;
+          color: #ffff35 !important;
+        }
 
-          .value3 {
-            font-size: 18px;
-            color: #ffff35 !important;
-          }
+        .value3 {
+          font-size: 18px;
+          // color: #ffff35 !important;
+          color: #ff0000 !important;
+        }
 
-          .value4 {
-            font-size: 18px;
-            color: #ffbe69 !important;
-          }
+        .value4 {
+          font-size: 18px;
+          color: #ffbe69 !important;
+        }
 
-          .value5 {
-            font-size: 18px;
-            color: #ff6f00 !important;
-          }
+        .value5 {
+          font-size: 18px;
+          color: #ff6f00 !important;
+        }
 
-          .value6 {
-            font-size: 18px;
-            color: #ff0000 !important;
-          }
+        .value6 {
+          font-size: 18px;
+          color: #ff0000 !important;
         }
       }
+    }
 
-      .right-center {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+    .right-center {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
 
-        .table-box {
-          position: relative;
-          width: 500px;
-          height: 250px;
-        }
+      .table-box {
+        position: relative;
+        width: 500px;
+        height: 250px;
+      }
 
-        .warning-box {
-          width: calc(100% - 520px);
+      .warning-box {
+        width: calc(100% - 520px);
 
-          .warning-container {
-            width: 100%;
-            height: convert;
-            background: #009acd00;
+        .warning-container {
+          width: 100%;
+          height: convert;
+          background: #009acd00;
 
-            :deep(.dv-scroll-board) {
-              .row-item {
-                height: 40px !important;
-                line-height: 40px !important;
-              }
+          :deep(.dv-scroll-board) {
+            .row-item {
+              height: 40px !important;
+              line-height: 40px !important;
+            }
 
-              .header-item {
-                border-top: 1px solid #91e9fe !important;
-                border-bottom: 1px solid #91e9fe !important;
-              }
+            .header-item {
+              border-top: 1px solid #91e9fe !important;
+              border-bottom: 1px solid #91e9fe !important;
             }
           }
         }
       }
+    }
 
-      .right-bottom {
-        margin-top: 20px;
+    .right-bottom {
+      margin-top: 20px;
 
-        .echarts-box {
-          width: 100%;
-          height: 320px;
-          position: relative;
-          display: flex;
-          justify-content: space-between;
+      .echarts-box {
+        width: 100%;
+        height: 320px;
+        position: relative;
+        display: flex;
+        justify-content: space-between;
 
-          .echarts-line {
-            width: calc(100% + 80px);
-            position: absolute;
-          }
+        .echarts-line {
+          width: calc(100% + 80px);
+          position: absolute;
         }
       }
     }
   }
+}
 
-  :deep(.zxm-table-body) {
-    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+:deep(.zxm-table-body) {
+  border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-    .zxm-table-tbody > tr > td {
-      border: none !important;
-    }
+  .zxm-table-tbody>tr>td {
+    border: none !important;
   }
+}
 
-  :deep(.zxm-table-cell) {
-    border-right: none !important;
-  }
+:deep(.zxm-table-cell) {
+  border-right: none !important;
+}
 </style>

src/views/vent/performance/approvalPend/index.vue

@@ -101,7 +101,7 @@ function handleSpDetail(data) {
 //判断是否显示撤回/驳回按钮
 async function getTodoTaskShow(params) {
     let res = await getTodoTask({ ...params })
-    spInfo = res
+    spInfo = Object.assign({}, res)
     if (res.result) {
         isShow.value = true
     } else {
@@ -114,7 +114,7 @@ async function getHistoricFlowNewList(params) {
     if (res.length != 0) {
         historySpList.length = 0
         res.forEach(el => {
-            historySpList.push({ name: el.name, username: el.assignees[0].username, deleteReason: el.deleteReason, comment: el.comment, startTime: el.startTime, endTime: el.endTime, status:el.assignees[0].isExecutor ? '已处理' : '待处理' })
+            historySpList.push({ name: el.name, username: el.assignees[0].username, deleteReason: el.deleteReason, comment: el.comment, startTime: el.startTime, endTime: el.endTime, status: el.assignees[0].isExecutor ? '已处理' : '待处理' })
         })
     }
 }
@@ -192,8 +192,9 @@ onMounted(() => {
     width: 100%;
     height: 100%;
 }
+
 .zxm-form {
-  padding-top: 20px !important;
-  box-sizing: border-box;
+    padding-top: 20px !important;
+    box-sizing: border-box;
 }
 </style>

src/views/vent/performance/endEd/index.vue

@@ -100,7 +100,7 @@ function handleSpDetail(data) {
 //判断是否显示撤回/驳回按钮
 async function getTodoTaskShow(params) {
     let res = await getTodoTask({ ...params })
-    spInfo = res
+    spInfo = Object.assign({}, res)
     if (res.result) {
         isShow.value = true
     } else {

src/views/vent/reportManager/index.vue

@@ -47,7 +47,7 @@ let listArr = reactive<any[]>([
     pid: 'auto',
     isFolder: true,
     isexpanded:true,
-    title: '自动报表',
+    title: '系统数据报表',
     id: '0',
     children: []
   },