火灾预警指标修改-提交

src/views/vent/home/colliery/clique.data.ts

@@ -3,7 +3,6 @@ import { cloneDeep } from 'lodash-es';
 
 
 export const getMaxY = function (param) {
-  console.log(param,'999999')
   let maxval=0
   if (param.length == 1) {
      maxval = Math.max(...param[0]);

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

@@ -3,7 +3,6 @@ import { getAssetURL } from '/@/utils/ui';
 import { useGlobSetting } from '/@/hooks/setting';
 
 export const getMaxY = function (param) {
-  console.log(param, '999999');
   let maxval = 0;
   if (param.length == 1) {
     maxval = Math.max(...param[0]);

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

@@ -8,7 +8,8 @@
             <!-- <div class="text-value">{{ topContent.position }}</div> -->
             <div class="text-value">
               <a-select v-model:value="selectData" style="width: 360px" @change="changeSelect">
-                <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
+                <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
+                  }}</a-select-option>
               </a-select>
             </div>
           </div>
@@ -26,14 +27,12 @@
       <div class="box-container">
         <div class="text1">
           <span>预警等级 : </span>
-          <span
-            :class="{
-              value1: topContent.warnLevel == '绿色预警',
-              value2: topContent.warnLevel == '黄色预警',
-              value3: topContent.warnLevel == '红色预警',
-            }"
-            >{{ topContent.warnLevel || '-' }}</span
-          >
+          <span :class="{
+            value1: topContent.warnLevel == '绿色预警',
+            value2: topContent.warnLevel == '黄色预警',
+            value3: topContent.warnLevel == '红色预警',
+            value4: topContent.warnLevel == '橙色预警',
+          }">{{ topContent.warnLevel || '-' }}</span>
         </div>
         <div class="text1">
           <span>煤自燃阶段 : </span>
@@ -52,12 +51,8 @@
     <div class="content">
       <div class="title-b">采空区密闭参数</div>
       <div class="card-btn">
-        <div
-          :class="activeIndex == index ? 'box-container1' : 'box-container'"
-          v-for="(item, index) in mbList"
-          :key="index"
-          @click="btnClick(item, index)"
-        >
+        <div :class="activeIndex == index ? 'box-container1' : 'box-container'" v-for="(item, index) in mbList"
+          :key="index" @click="btnClick(item, index)">
           <div class="box-label">
             <span> {{ item.label }}</span>
             <span>{{ item.dw }}</span>
@@ -94,18 +89,13 @@
           </div>
           <div class="echarts-box">
             <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
-            <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" :minY="minY" />
+            <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg1"
+              :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" :minY="minY" />
           </div>
         </div>
         <div class="right-echartbox">
-          <warnZb
-            :widthV="widthV"
-            :heightV="heightV"
-            :coordDw="coordDw"
-            :widthCanvas="widthCanvas"
-            :heightCanvas="heightCanvas"
-            :warnLevel="topContent.warnLevel"
-          />
+          <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
+            :heightCanvas="heightCanvas" :warnLevel="topContent.warnLevel" />
         </div>
       </div>
     </div>
@@ -113,779 +103,779 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch, defineProps, inject, h } from 'vue';
-  import echartLine1 from './echartLine1.vue';
-  import warnZb from './warnZb.vue';
-  import PredictionCurve from './predictionCurve.vue';
-  import { Modal, Input } from 'ant-design-vue';
-  import {getMaxY,getMinY} from '../common.data'
-  // import { deviceControlApi } from '/@/api/vent/index';
-
-  let props = defineProps({
-    listData: Object,
-  });
-
-  const globalConfig = inject('globalConfig');
-  const shownChart = ref('default');
-  let maxY = ref<any>(0);
-  let minY=ref<any>(0)
-  let selectSj = ref<any[]>([]);
-  let selectData = ref('');
-  let selectList = reactive<any[]>([]);
-  let widthV = ref('75%');
-  let heightV = ref('80%');
-  let coordDw = ref<any[]>([31, 62, 110]);
-  let widthCanvas = ref(562);
-  let heightCanvas = ref(316);
-  //设备连接状态
-  let netStatus = ref(0);
-  //密闭-顶部区域数据
-  let topContent = reactive({
-    temperature: 0,
-    position: '',
-    time: '',
-    warnLevel: '',
-    smokeJd: '',
+import { ref, reactive, watch, defineProps, inject, h } from 'vue';
+import echartLine1 from './echartLine1.vue';
+import warnZb from './warnZb.vue';
+import PredictionCurve from './predictionCurve.vue';
+import { Modal, Input } from 'ant-design-vue';
+import { getMaxY, getMinY } from '../common.data'
+// import { deviceControlApi } from '/@/api/vent/index';
+
+let props = defineProps({
+  listData: Object,
+});
+
+const globalConfig = inject('globalConfig');
+const shownChart = ref('default');
+let maxY = ref<any>(0);
+let minY = ref<any>(0)
+let selectSj = ref<any[]>([]);
+let selectData = ref('');
+let selectList = reactive<any[]>([]);
+let widthV = ref('75%');
+let heightV = ref('80%');
+let coordDw = ref<any[]>([31, 62, 110]);
+let widthCanvas = ref(562);
+let heightCanvas = ref(316);
+//设备连接状态
+let netStatus = ref(0);
+//密闭-顶部区域数据
+let topContent = reactive({
+  temperature: 0,
+  position: '',
+  time: '',
+  warnLevel: '',
+  smokeJd: '',
+});
+//密闭参数列表
+let mbList = reactive([
+  {
+    label: 'O₂',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CO',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CO₂',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CH₄',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'C₂H₂',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'C₂H₄',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+]);
+
+//当前密闭参数激活选项
+let activeIndex = ref(0);
+//当前激活密闭参数类型
+let type = ref('O₂');
+
+let echartDataSg1 = reactive({
+  xData: [],
+  yData: [],
+  lengedData: 'O₂',
+  lengedDataName: '(%)',
+});
+let echartDataSgList = reactive<any[]>([]);
+
+function getmax() {
+  getMaxY(echartDataSg1.yData)
+  getMinY(echartDataSg1.yData)
+  // maxY.value = echartDataSg1.yData.reduce((acr, cur) => {
+  //   return acr > cur ? acr : cur;
+  // });
+  // maxY.value =
+  //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
+  // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
+  //   maxY.value = 1;
+  // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
+  //   maxY.value = 10;
+  // } else if (maxY.value.length < 3) {
+  //   maxY.value = (Number(maxY.value[0]) + 1) * 10;
+  // } else if (maxY.value.length < 4) {
+  //   maxY.value = (Number(maxY.value[0]) + 1) * 100;
+  // } else if (maxY.value.length < 5) {
+  //   maxY.value = (Number(maxY.value[0]) + 1) * 1000;
+  // } else if (maxY.value.length < 6) {
+  //   maxY.value = (Number(maxY.value[0]) + 1) * 10000;
+  // }
+}
+//密闭参数选项切换
+function btnClick(item, ind) {
+  // debugger;
+  activeIndex.value = ind;
+  type.value = item.label;
+  echartDataSg1.xData.length = 0;
+  echartDataSg1.yData.length = 0;
+  echartDataSg1.lengedData = type.value;
+  echartDataSg1.lengedDataName = item.dw;
+
+  const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
+  switch (type.value) {
+    case 'O₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.o2val);
+      });
+
+      curveConfig.value = {
+        id: 'o2',
+        label: 'O₂',
+        time: echartDataSg1.xData,
+        data: [
+          // 氧气预测曲线
+          data.avgParam?.avg_o2_value || 0,
+          data.avgParam?.max_o2_value || 0,
+          data.avgParam?.min_o2_value || 0,
+          // data.readData?.o2val,
+        ],
+        monitorData: echartDataSg1.yData,
+      };
+      getmax();
+      break;
+    case 'C₂H₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.ch2val);
+      });
+      curveConfig.value = {
+        id: 'ch2',
+        label: 'C₂H₄',
+        time: echartDataSg1.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_c2h4_value || 0,
+          data.avgParam?.max_c2h4_value || 0,
+          data.avgParam?.min_c2h4_value || 0,
+          // data.readData?.ch2val,
+        ],
+        monitorData: echartDataSg1.yData,
+      };
+      getmax();
+      break;
+    case 'CO':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.coval);
+      });
+      curveConfig.value = {
+        id: 'co',
+        label: 'CO',
+        time: echartDataSg1.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_co_value || 0,
+          data.avgParam?.max_co_value || 0,
+          data.avgParam?.min_co_value || 0,
+          // data.readData?.coval,
+        ],
+        monitorData: echartDataSg1.yData,
+      };
+      getmax();
+      break;
+    case 'CH₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.gasval);
+      });
+      curveConfig.value = {
+        id: 'ch',
+        label: 'CH₄',
+        time: echartDataSg1.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_ch4_value || 0,
+          data.avgParam?.max_ch4_value || 0,
+          data.avgParam?.min_ch4_value || 0,
+          // data.readData?.chval,
+        ],
+        monitorData: echartDataSg1.yData,
+      };
+      getmax();
+      break;
+    case 'CO₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.co2val);
+      });
+      curveConfig.value = {
+        id: 'co2',
+        label: 'CO₂',
+        time: echartDataSg1.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_co2_value || 0,
+          data.avgParam?.max_co2_value || 0,
+          data.avgParam?.min_co2_value || 0,
+          // data.readData?.co2val,
+        ],
+        monitorData: echartDataSg1.yData,
+      };
+      getmax();
+      break;
+    case 'C₂H₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.chval);
+      });
+      curveConfig.value = {
+        id: 'gas',
+        label: 'C₂H₂',
+        time: echartDataSg1.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_c2h2_value || 0,
+          data.avgParam?.max_c2h2_value || 0,
+          data.avgParam?.min_c2h2_value || 0,
+          // data.readData?.gasval,
+        ],
+        monitorData: echartDataSg1.yData,
+      };
+      getmax();
+      break;
+  }
+}
+
+function changeSelect(val) {
+  selectData.value = val;
+  let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
+  topContent.time = data.readTime || '--';
+  topContent.warnLevel = data.syswarnLevel_str;
+  topContent.smokeJd = data.syswarnLevel_des;
+
+  mbList[0].nd = data.readData.o2val || '--';
+  mbList[1].nd = data.readData.coval || '--';
+  mbList[2].nd = data.readData.co2val || '--';
+  mbList[3].nd = data.readData.gasval || '--';
+  mbList[4].nd = data.readData.chval || '--';
+  mbList[5].nd = data.readData.ch2val || '--';
+  mbList.forEach((el) => {
+    el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
+    el.address = data ? data.strinstallpos : '--';
   });
-  //密闭参数列表
-  let mbList = reactive([
-    {
-      label: 'O₂',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CO',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CO₂',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
+  netStatus.value = data['netStatus'];
+}
+
+// 设备控制
+function controlDevice(code, value?) {
+  const passWord = ref('');
+  Modal.confirm({
+    title: '是否确认执行该操作？',
+    maskClosable: true,
+    content: () => {
+      return h(Input, {
+        placeholder: '请输入密码',
+        type: 'password',
+        modelValue: passWord.value,
+        'onUpdate:value'(val) {
+          passWord.value = val;
+        },
+      });
     },
-    {
-      label: 'CH₄',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
+    onOk() {
+      console.log('OK', passWord);
     },
-    {
-      label: 'C₂H₂',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'C₂H₄',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-  ]);
-
-  //当前密闭参数激活选项
-  let activeIndex = ref(0);
-  //当前激活密闭参数类型
-  let type = ref('O₂');
-
-  let echartDataSg1 = reactive({
-    xData: [],
-    yData: [],
-    lengedData: 'O₂',
-    lengedDataName: '(%)',
   });
-  let echartDataSgList = reactive<any[]>([]);
-
-  function getmax() {
-    getMaxY(echartDataSg1.yData)
-    getMinY(echartDataSg1.yData)
-    // maxY.value = echartDataSg1.yData.reduce((acr, cur) => {
-    //   return acr > cur ? acr : cur;
-    // });
-    // maxY.value =
-    //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
-    // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
-    //   maxY.value = 1;
-    // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
-    //   maxY.value = 10;
-    // } else if (maxY.value.length < 3) {
-    //   maxY.value = (Number(maxY.value[0]) + 1) * 10;
-    // } else if (maxY.value.length < 4) {
-    //   maxY.value = (Number(maxY.value[0]) + 1) * 100;
-    // } else if (maxY.value.length < 5) {
-    //   maxY.value = (Number(maxY.value[0]) + 1) * 1000;
-    // } else if (maxY.value.length < 6) {
-    //   maxY.value = (Number(maxY.value[0]) + 1) * 10000;
-    // }
-  }
-  //密闭参数选项切换
-  function btnClick(item, ind) {
-    // debugger;
-    activeIndex.value = ind;
-    type.value = item.label;
+  // Promise.all(
+  //   [].map(({ deviceID, deviceType }) => {
+  //     return deviceControlApi({
+  //       deviceid: deviceID,
+  //       devicetype: deviceType,
+  //       paramcode: code,
+  //       value,
+  //       // password: passWord || globalConfig?.simulatedPassword,
+  //     });
+  //   })
+  // ).then((res) => {
+  //   // 模拟时开启
+  //   if (res.success) {
+  //     if (globalConfig.History_Type == 'remote') {
+  //       message.success('指令已下发至生产管控平台成功！');
+  //     } else {
+  //       message.success('指令已下发成功！');
+  //     }
+  //   } else {
+  //     message.error(res.message);
+  //   }
+  // });
+}
+
+/** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
+const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
+
+watch(
+  () => props.listData,
+  (val: any) => {
     echartDataSg1.xData.length = 0;
     echartDataSg1.yData.length = 0;
-    echartDataSg1.lengedData = type.value;
-    echartDataSg1.lengedDataName = item.dw;
-
-    const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
-    switch (type.value) {
-      case 'O₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.o2val);
-        });
-
-        curveConfig.value = {
-          id: 'o2',
-          label: 'O₂',
-          time: echartDataSg1.xData,
-          data: [
-            // 氧气预测曲线
-            data.avgParam?.avg_o2_value || 0,
-            data.avgParam?.max_o2_value || 0,
-            data.avgParam?.min_o2_value || 0,
-            // data.readData?.o2val,
-          ],
-          monitorData: echartDataSg1.yData,
-        };
-        getmax();
-        break;
-      case 'C₂H₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.ch2val);
-        });
-        curveConfig.value = {
-          id: 'ch2',
-          label: 'C₂H₄',
-          time: echartDataSg1.xData,
-          data: [
-            // 预测曲线
-            data.avgParam?.avg_c2h4_value || 0,
-            data.avgParam?.max_c2h4_value || 0,
-            data.avgParam?.min_c2h4_value || 0,
-            // data.readData?.ch2val,
-          ],
-          monitorData: echartDataSg1.yData,
-        };
-        getmax();
-        break;
-      case 'CO':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.coval);
-        });
-        curveConfig.value = {
-          id: 'co',
-          label: 'CO',
-          time: echartDataSg1.xData,
-          data: [
-            // 预测曲线
-            data.avgParam?.avg_co_value || 0,
-            data.avgParam?.max_co_value || 0,
-            data.avgParam?.min_co_value || 0,
-            // data.readData?.coval,
-          ],
-          monitorData: echartDataSg1.yData,
-        };
-        getmax();
-        break;
-      case 'CH₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.gasval);
-        });
-        curveConfig.value = {
-          id: 'ch',
-          label: 'CH₄',
-          time: echartDataSg1.xData,
-          data: [
-            // 预测曲线
-            data.avgParam?.avg_ch4_value || 0,
-            data.avgParam?.max_ch4_value || 0,
-            data.avgParam?.min_ch4_value || 0,
-            // data.readData?.chval,
-          ],
-          monitorData: echartDataSg1.yData,
-        };
-        getmax();
-        break;
-      case 'CO₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.co2val);
-        });
-        curveConfig.value = {
-          id: 'co2',
-          label: 'CO₂',
-          time: echartDataSg1.xData,
-          data: [
-            // 预测曲线
-            data.avgParam?.avg_co2_value || 0,
-            data.avgParam?.max_co2_value || 0,
-            data.avgParam?.min_co2_value || 0,
-            // data.readData?.co2val,
-          ],
-          monitorData: echartDataSg1.yData,
-        };
-        getmax();
-        break;
-      case 'C₂H₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.chval);
-        });
-        curveConfig.value = {
-          id: 'gas',
-          label: 'C₂H₂',
-          time: echartDataSg1.xData,
-          data: [
-            // 预测曲线
-            data.avgParam?.avg_c2h2_value || 0,
-            data.avgParam?.max_c2h2_value || 0,
-            data.avgParam?.min_c2h2_value || 0,
-            // data.readData?.gasval,
-          ],
-          monitorData: echartDataSg1.yData,
-        };
-        getmax();
-        break;
+    echartDataSgList.length = 0;
+    selectList.length = 0;
+    if (JSON.stringify(val) === '{}') return;
+    if (val.bundletube.length != 0) {
+      selectSj.value = val.bundletube;
+      selectSj.value.forEach((el) => {
+        selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
+      });
+      selectData.value = selectData.value ? selectData.value : selectList[0].value;
+      let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
+      topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+      topContent.time = dataVal.readTime || '--';
+      topContent.warnLevel = dataVal.syswarnLevel_str;
+      topContent.smokeJd = dataVal.syswarnLevel_des;
+
+      mbList[0].nd = dataVal.readData.o2val || '--';
+      mbList[1].nd = dataVal.readData.coval || '--';
+      mbList[2].nd = dataVal.readData.co2val || '--';
+      mbList[3].nd = dataVal.readData.gasval || '--';
+      mbList[4].nd = dataVal.readData.chval || '--';
+      mbList[5].nd = dataVal.readData.ch2val || '--';
+      mbList.forEach((el) => {
+        el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
+        el.address = dataVal ? dataVal.strinstallpos : '--';
+      });
+      netStatus.value = dataVal['netStatus'];
+      echartDataSgList = dataVal.history;
+      btnClick(
+        {
+          label: type.value,
+          dw: echartDataSg1.lengedDataName,
+        },
+        activeIndex.value
+      );
+      // dataVal.history.forEach((v) => {
+      //   echartDataSg1.xData.push(v.time);
+      //   if (echartDataSg1.lengedData == 'O₂') {
+      //     echartDataSg1.yData.push(v.o2val);
+      //   } else if (echartDataSg1.lengedData == 'C₂H₄') {
+      //     echartDataSg1.yData.push(v.ch2val);
+      //   } else if (echartDataSg1.lengedData == 'CO') {
+      //     echartDataSg1.yData.push(v.coval);
+      //   } else if (echartDataSg1.lengedData == 'CH₄') {
+      //     echartDataSg1.yData.push(v.chval);
+      //   } else if (echartDataSg1.lengedData == 'CO₂') {
+      //     echartDataSg1.yData.push(v.co2val);
+      //   } else if (echartDataSg1.lengedData == 'C₂H₂') {
+      //     echartDataSg1.yData.push(v.gasval);
+      //   }
+      //   echartDataSgList.push(v);
+      // });
+      getmax();
+    } else {
+      topContent.temperature = 0;
+      // topContent.position = '--';
+      topContent.time = '--';
+      topContent.warnLevel = '--';
+      topContent.smokeJd = '--';
+      mbList[0].nd = '--';
+      mbList[1].nd = '--';
+      mbList[2].nd = '--';
+      mbList[3].nd = '--';
+      mbList[4].nd = '--';
+      mbList[5].nd = '--';
+      mbList.forEach((el) => {
+        el.time1 = '--';
+        el.address = '--';
+      });
     }
-  }
-
-  function changeSelect(val) {
-    selectData.value = val;
-    let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
-    topContent.time = data.readTime || '--';
-    topContent.warnLevel = data.syswarnLevel_str;
-    topContent.smokeJd = data.syswarnLevel_des;
-
-    mbList[0].nd = data.readData.o2val || '--';
-    mbList[1].nd = data.readData.coval || '--';
-    mbList[2].nd = data.readData.co2val || '--';
-    mbList[3].nd = data.readData.gasval || '--';
-    mbList[4].nd = data.readData.chval || '--';
-    mbList[5].nd = data.readData.ch2val || '--';
-    mbList.forEach((el) => {
-      el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
-      el.address = data ? data.strinstallpos : '--';
-    });
-    netStatus.value = data['netStatus'];
-  }
-
-  // 设备控制
-  function controlDevice(code, value?) {
-    const passWord = ref('');
-    Modal.confirm({
-      title: '是否确认执行该操作？',
-      maskClosable: true,
-      content: () => {
-        return h(Input, {
-          placeholder: '请输入密码',
-          type: 'password',
-          modelValue: passWord.value,
-          'onUpdate:value'(val) {
-            passWord.value = val;
-          },
-        });
-      },
-      onOk() {
-        console.log('OK', passWord);
-      },
-    });
-    // Promise.all(
-    //   [].map(({ deviceID, deviceType }) => {
-    //     return deviceControlApi({
-    //       deviceid: deviceID,
-    //       devicetype: deviceType,
-    //       paramcode: code,
-    //       value,
-    //       // password: passWord || globalConfig?.simulatedPassword,
-    //     });
-    //   })
-    // ).then((res) => {
-    //   // 模拟时开启
-    //   if (res.success) {
-    //     if (globalConfig.History_Type == 'remote') {
-    //       message.success('指令已下发至生产管控平台成功！');
-    //     } else {
-    //       message.success('指令已下发成功！');
-    //     }
-    //   } else {
-    //     message.error(res.message);
-    //   }
-    // });
-  }
-
-  /** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
-  const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
-
-  watch(
-    () => props.listData,
-    (val: any) => {
-      echartDataSg1.xData.length = 0;
-      echartDataSg1.yData.length = 0;
-      echartDataSgList.length = 0;
-      selectList.length = 0;
-      if (JSON.stringify(val) === '{}') return;
-      if (val.bundletube.length != 0) {
-        selectSj.value = val.bundletube;
-        selectSj.value.forEach((el) => {
-          selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
-        });
-        selectData.value = selectData.value ? selectData.value : selectList[0].value;
-        let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
-        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-        topContent.time = dataVal.readTime || '--';
-        topContent.warnLevel = dataVal.syswarnLevel_str;
-        topContent.smokeJd = dataVal.syswarnLevel_des;
-
-        mbList[0].nd = dataVal.readData.o2val || '--';
-        mbList[1].nd = dataVal.readData.coval || '--';
-        mbList[2].nd = dataVal.readData.co2val || '--';
-        mbList[3].nd = dataVal.readData.gasval || '--';
-        mbList[4].nd = dataVal.readData.chval || '--';
-        mbList[5].nd = dataVal.readData.ch2val || '--';
-        mbList.forEach((el) => {
-          el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
-          el.address = dataVal ? dataVal.strinstallpos : '--';
-        });
-        netStatus.value = dataVal['netStatus'];
-        echartDataSgList = dataVal.history;
-        btnClick(
-          {
-            label: type.value,
-            dw: echartDataSg1.lengedDataName,
-          },
-          activeIndex.value
-        );
-        // dataVal.history.forEach((v) => {
-        //   echartDataSg1.xData.push(v.time);
-        //   if (echartDataSg1.lengedData == 'O₂') {
-        //     echartDataSg1.yData.push(v.o2val);
-        //   } else if (echartDataSg1.lengedData == 'C₂H₄') {
-        //     echartDataSg1.yData.push(v.ch2val);
-        //   } else if (echartDataSg1.lengedData == 'CO') {
-        //     echartDataSg1.yData.push(v.coval);
-        //   } else if (echartDataSg1.lengedData == 'CH₄') {
-        //     echartDataSg1.yData.push(v.chval);
-        //   } else if (echartDataSg1.lengedData == 'CO₂') {
-        //     echartDataSg1.yData.push(v.co2val);
-        //   } else if (echartDataSg1.lengedData == 'C₂H₂') {
-        //     echartDataSg1.yData.push(v.gasval);
-        //   }
-        //   echartDataSgList.push(v);
-        // });
-        getmax();
-      } else {
-        topContent.temperature = 0;
-        // topContent.position = '--';
-        topContent.time = '--';
-        topContent.warnLevel = '--';
-        topContent.smokeJd = '--';
-        mbList[0].nd = '--';
-        mbList[1].nd = '--';
-        mbList[2].nd = '--';
-        mbList[3].nd = '--';
-        mbList[4].nd = '--';
-        mbList[5].nd = '--';
-        mbList.forEach((el) => {
-          el.time1 = '--';
-          el.address = '--';
-        });
-      }
-    },
-    { immediate: true, deep: true }
-  );
+  },
+  { immediate: true, deep: true }
+);
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @{theme-deepblue} {
-    .closeWall {
-      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
-      --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
-      --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
-      --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
-      --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
-    }
-  }
+@import '/@/design/theme.less';
 
+@{theme-deepblue} {
   .closeWall {
-    --image-bj1: url('/@/assets/images/fire/bj1.png');
-    --image-pj: url('/@/assets/images/fire/pj.svg');
-    --image-1: url('/@/assets/images/fire/1.png');
-    --image-contetn: url('/@/assets/images/fire/contetn.png');
-    --image-2: url('/@/assets/images/fire/2.png');
-    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+    --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+    --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+    --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+    --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+  }
+}
+
+.closeWall {
+  --image-bj1: url('/@/assets/images/fire/bj1.png');
+  --image-pj: url('/@/assets/images/fire/pj.svg');
+  --image-1: url('/@/assets/images/fire/1.png');
+  --image-contetn: url('/@/assets/images/fire/contetn.png');
+  --image-2: url('/@/assets/images/fire/2.png');
+  --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .title {
     width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-
-    .title {
-      width: 100%;
-      height: 17%;
-      margin-bottom: 20px;
+    height: 17%;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    background: var(--image-bj1) no-repeat center;
+    background-size: 100% 100%;
+    align-items: center;
+
+    .box-container {
       display: flex;
-      justify-content: space-between;
-      background: var(--image-bj1) no-repeat center;
-      background-size: 100% 100%;
-      align-items: center;
 
-      .box-container {
-        display: flex;
+      &:nth-child(1) {
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px 40px;
+        flex: 2;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: var(--border-image-2) 1 1 1;
+      }
 
-        &:nth-child(1) {
-          justify-content: space-between;
-          align-items: center;
-          padding: 0px 40px;
-          flex: 2;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: var(--border-image-2) 1 1 1;
-        }
+      &:nth-child(2) {
+        flex-direction: column;
+        flex: 1;
+        justify-content: space-around;
+        align-items: center;
+        height: 73%;
+        border-right: 2px solid;
+        border-image: var(--border-image-2) 1 1 1;
+      }
 
-        &:nth-child(2) {
+      .contents {
+        height: 73%;
+
+        &:nth-child(1) {
+          width: 50%;
+          display: flex;
           flex-direction: column;
-          flex: 1;
           justify-content: space-around;
-          align-items: center;
-          height: 73%;
-          border-right: 2px solid;
-          border-image: var(--border-image-2) 1 1 1;
-        }
-
-        .contents {
-          height: 73%;
 
-          &:nth-child(1) {
-            width: 50%;
+          .text {
+            font-size: 14px;
             display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .text {
-              font-size: 14px;
-              display: flex;
-              align-items: center;
-
-              .text-label {
-                color: #b3b8cc;
-                font-weight: bold;
-              }
-
-              .text-value {
-                font-family: 'douyuFont';
-                color: var(--vent-table-action-link);
-                margin-left: 10px;
-              }
-            }
-          }
-
-          &:nth-child(2) {
-            width: 50%;
-            display: flex;
-            justify-content: center;
             align-items: center;
 
-            img {
-              position: relative;
-              width: 90px;
-              height: 100%;
-              background: var(--image-pj) no-repeat center;
-              background-size: 90px 50%;
+            .text-label {
+              color: #b3b8cc;
+              font-weight: bold;
             }
 
-            .text {
+            .text-value {
               font-family: 'douyuFont';
-              font-size: 28px;
-              margin: 0px 15px;
               color: var(--vent-table-action-link);
-            }
-
-            .dw {
-              font-size: 14px;
-              color: #b3b8cc;
+              margin-left: 10px;
             }
           }
         }
 
-        .text1 {
-          width: 90%;
-          height: 30px;
-          line-height: 30px;
-          font-size: 14px;
-          color: #b3b8cc;
-          font-weight: bold;
-
-          span {
-            display: inline-block;
-
-            &:nth-child(1) {
-              width: 160px;
-              text-align: right;
-            }
+        &:nth-child(2) {
+          width: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
-            &:nth-child(2) {
-              font-family: 'douyuFont';
-              color: var(--vent-table-action-link);
-              margin-left: 10px;
-            }
+          img {
+            position: relative;
+            width: 90px;
+            height: 100%;
+            background: var(--image-pj) no-repeat center;
+            background-size: 90px 50%;
           }
 
-          .value1 {
-            color: rgb(145, 230, 9) !important;
+          .text {
+            font-family: 'douyuFont';
+            font-size: 28px;
+            margin: 0px 15px;
+            color: var(--vent-table-action-link);
           }
 
-          .value2 {
-            // color: rgb(0, 242, 255) !important;
-            color: #ffff35 !important;
+          .dw {
+            font-size: 14px;
+            color: #b3b8cc;
           }
+        }
+      }
 
-          .value3 {
-            // color: #ffff35 !important;
-            color: #ff0000 !important;
-          }
+      .text1 {
+        width: 90%;
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        color: #b3b8cc;
+        font-weight: bold;
 
-          .value4 {
-            color: #ffbe69 !important;
-          }
+        span {
+          display: inline-block;
 
-          .value5 {
-            color: #ff6f00 !important;
+          &:nth-child(1) {
+            width: 160px;
+            text-align: right;
           }
 
-          .value6 {
-            color: #ff0000 !important;
+          &:nth-child(2) {
+            font-family: 'douyuFont';
+            color: var(--vent-table-action-link);
+            margin-left: 10px;
           }
         }
+
+        .value1 {
+          color: rgb(145, 230, 9) !important;
+        }
+
+        .value2 {
+          // color: rgb(0, 242, 255) !important;
+          color: #ffff35 !important;
+        }
+
+        .value3 {
+          // color: #ffff35 !important;
+          color: #ff0000 !important;
+        }
+
+        .value4 {
+          color: orange !important;
+        }
+
+        .value5 {
+          color: #ff6f00 !important;
+        }
+
+        .value6 {
+          color: #ff0000 !important;
+        }
       }
     }
+  }
+
+  .content {
+    width: 100%;
+    height: calc(83% - 20px);
+    padding: 10px;
+    background: var(--image-bj1) no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
 
-    .content {
-      width: 100%;
-      height: calc(83% - 20px);
-      padding: 10px;
-      background: var(--image-bj1) no-repeat center;
-      background-size: 100% 100%;
-      box-sizing: border-box;
+    .title-b {
+      height: 30px;
+      line-height: 30px;
+      font-family: 'douyuFont';
+      font-size: 14px;
+      color: #fff;
+      // color: var(--vent-table-action-link);
+    }
 
-      .title-b {
-        height: 30px;
-        line-height: 30px;
-        font-family: 'douyuFont';
-        font-size: 14px;
-        color: #fff;
-        // color: var(--vent-table-action-link);
-      }
+    .card-btn {
+      height: 28%;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
 
-      .card-btn {
-        height: 28%;
-        margin-bottom: 10px;
-        display: flex;
-        justify-content: space-between;
+      .box-container {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: var(--image-1) no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .box-label {
+          position: absolute;
+          left: 50%;
+          top: 2px;
+          transform: translate(-50%);
+          color: #fff;
+        }
 
-        .box-container {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: var(--image-1) no-repeat center;
+        .box-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 89%;
+          height: 16%;
+          padding: 0px 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background: var(--image-contetn) no-repeat center;
           background-size: 100% 100%;
-          cursor: pointer;
 
-          .box-label {
-            position: absolute;
-            left: 50%;
-            top: 2px;
-            transform: translate(-50%);
+          .text-t {
+            width: 17%;
             color: #fff;
+            font-size: 12px;
           }
 
-          .box-item {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 89%;
-            height: 16%;
-            padding: 0px 10px;
+          .text-v {
+            width: 83%;
+            font-family: 'douyuFont';
+            font-size: 10px;
+            color: var(--vent-table-action-link);
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: var(--image-contetn) no-repeat center;
-            background-size: 100% 100%;
-
-            .text-t {
-              width: 17%;
-              color: #fff;
-              font-size: 12px;
-            }
-
-            .text-v {
-              width: 83%;
-              font-family: 'douyuFont';
-              font-size: 10px;
-              color: var(--vent-table-action-link);
-              display: flex;
-              justify-content: flex-end;
-            }
+            justify-content: flex-end;
           }
+        }
 
-          .box-item1 {
-            top: 24%;
-          }
+        .box-item1 {
+          top: 24%;
+        }
 
-          .box-item2 {
-            top: 50%;
-          }
+        .box-item2 {
+          top: 50%;
+        }
 
-          .box-item3 {
-            top: 75%;
-          }
+        .box-item3 {
+          top: 75%;
         }
+      }
 
-        .box-container1 {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: var(--image-2) no-repeat center;
+      .box-container1 {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: var(--image-2) no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .box-label {
+          position: absolute;
+          left: 50%;
+          top: 2px;
+          transform: translate(-50%);
+          color: #fff;
+        }
+
+        .box-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 89%;
+          height: 16%;
+          padding: 0px 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background: var(--image-contetn) no-repeat center;
           background-size: 100% 100%;
-          cursor: pointer;
 
-          .box-label {
-            position: absolute;
-            left: 50%;
-            top: 2px;
-            transform: translate(-50%);
+          .text-t {
+            width: 17%;
             color: #fff;
+            font-size: 12px;
           }
 
-          .box-item {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 89%;
-            height: 16%;
-            padding: 0px 10px;
+          .text-v {
+            width: 83%;
+            font-family: 'douyuFont';
+            font-size: 10px;
+            color: var(--vent-table-action-link);
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: var(--image-contetn) no-repeat center;
-            background-size: 100% 100%;
-
-            .text-t {
-              width: 17%;
-              color: #fff;
-              font-size: 12px;
-            }
-
-            .text-v {
-              width: 83%;
-              font-family: 'douyuFont';
-              font-size: 10px;
-              color: var(--vent-table-action-link);
-              display: flex;
-              justify-content: flex-end;
-            }
+            justify-content: flex-end;
           }
+        }
 
-          .box-item1 {
-            top: 19%;
-          }
+        .box-item1 {
+          top: 19%;
+        }
 
-          .box-item2 {
-            top: 41%;
-          }
+        .box-item2 {
+          top: 41%;
+        }
 
-          .box-item3 {
-            top: 63%;
-          }
+        .box-item3 {
+          top: 63%;
         }
       }
+    }
 
-      .echart-box {
-        display: flex;
-        height: calc(72% - 41px);
-
-        .left-echartbox {
-          width: calc(50% - 6px);
-          margin-right: 6px;
-          border: 1px solid #114aac;
-          border-radius: 5px;
-
-          .title-f {
-            height: 40px;
-            padding: 0px 10px;
-            box-sizing: border-box;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .title-text {
-              font-family: 'douyuFont';
-              font-size: 14px;
-              color: #fff;
-              // color: var(--vent-table-action-link);
-            }
-          }
+    .echart-box {
+      display: flex;
+      height: calc(72% - 41px);
+
+      .left-echartbox {
+        width: calc(50% - 6px);
+        margin-right: 6px;
+        border: 1px solid #114aac;
+        border-radius: 5px;
+
+        .title-f {
+          height: 40px;
+          padding: 0px 10px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-          .echarts-box {
-            height: calc(100% - 40px);
-            padding: 0px 10px;
-            box-sizing: border-box;
+          .title-text {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+            // color: var(--vent-table-action-link);
           }
         }
 
-        .right-echartbox {
-          width: calc(50% - 6px);
-          margin-left: 6px;
-          border: 1px solid #114aac;
-          border-radius: 5px;
+        .echarts-box {
+          height: calc(100% - 40px);
+          padding: 0px 10px;
+          box-sizing: border-box;
         }
       }
+
+      .right-echartbox {
+        width: calc(50% - 6px);
+        margin-left: 6px;
+        border: 1px solid #114aac;
+        border-radius: 5px;
+      }
     }
   }
+}
 
-  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-    border: 1px solid #3ad8ff77 !important;
-    background-color: #ffffff00 !important;
-  }
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  border: 1px solid #3ad8ff77 !important;
+  background-color: #ffffff00 !important;
+}
 
-  :deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
 
-  :deep(.zxm-select-arrow) {
-    color: #fff;
-  }
+:deep(.zxm-select-arrow) {
+  color: #fff;
+}
 </style>

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

@@ -3,8 +3,8 @@
     <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="name-x">时间</div>
+      <div class="name-y">温度(℃)</div>
       <div class="coord-dw">
         <div class="dw-item" :style="{ bottom: `${coordDw[0]}px` }">30℃</div>
         <div class="dw-item" :style="{ bottom: `${coordDw[1]}px` }">70℃</div>
@@ -39,7 +39,7 @@
           <div class="text">剧烈氧化阶段</div>
         </div>
       </div>
-      <div class="coord-area" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)',overflow:'hidden' }">
+      <div class="coord-area" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)', overflow: 'hidden' }">
         <canvas id="myCanvas" :width="widthCanvas" :height="heightCanvas"></canvas>
       </div>
     </div>
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted, watch, nextTick } from 'vue';
 
 let props = defineProps({
   widthV: {
@@ -114,37 +114,38 @@ function getCanvas() {
     xValues[i] = x;
     yValues[i] = y;
   }
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
   // 绘制递增曲线
   ctx.beginPath();
   ctx.moveTo(xValues[0], yValues[0]);
   for (var i = 1; i < xValues.length; i++) {
     ctx.lineTo(xValues[i], yValues[i]);
-    if(props.warnLevel=='绿色预警'){
+    if (props.warnLevel == '绿色预警') {
       ctx.fillStyle = 'rgba(145, 230, 9)'; // 设置填充颜色
-      if(props.widthCanvas < 600 && i<=5500){
+      if (props.widthCanvas < 600 && i <= 5500) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }else if(i<=5000) {
+      } else if (i <= 5000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }
-    }else if(props.warnLevel=='黄色预警'){
+    } else if (props.warnLevel == '黄色预警') {
       ctx.fillStyle = 'rgba(255, 255, 53)'; // 设置填充颜色
-      if(props.widthCanvas < 600 && i<=11000){
+      if (props.widthCanvas < 600 && i <= 11000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }else if(i<=10000) {
+      } else if (i <= 10000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }
-    }else if(props.warnLevel=='橙色预警'){
-      ctx.fillStyle = 'rgba(255, 111, 0)'; // 设置填充颜色
-      if(props.widthCanvas < 600 && i<=16500){
+    } else if (props.warnLevel == '橙色预警') {
+      ctx.fillStyle = 'rgba(255, 165, 0)'; // 设置填充颜色
+      if (props.widthCanvas < 600 && i <= 16500) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }else if(i<=17000) {
+      } else if (i <= 15000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }
-    } else if(props.warnLevel=='红色预警'){
+    } else if (props.warnLevel == '红色预警') {
       ctx.fillStyle = 'rgba(255, 0, 0)'; // 设置填充颜色
-      if(props.widthCanvas < 600 && i>16500){
+      if (props.widthCanvas < 600 && i > 22000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
-      }else if(i>17000) {
+      } else if (i > 20000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }
     }
@@ -220,7 +221,9 @@ function getCanvas() {
   ctx.stroke(); // 进行绘制
 }
 
-
+watch(() => props.warnLevel, (newV, oldV) => {
+  getCanvas();
+})
 onMounted(() => {
   getAreas();
   getCanvas();
@@ -274,22 +277,23 @@ 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;
-      }
+    .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;