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

@@ -44,98 +44,86 @@
           <span class="details">{{ `${items.details}>>` }}</span>
         </div>
         <div class="content">
-          <a-table
-            v-if="index == 0"
-            ref="table"
-            size="small"
-            :scroll="{ x: 0, y: 273 }"
-            :columns="columnsSmoke"
-            :data-source="monitorlistYw"
-            :pagination="false"
-          >
+          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x: 0, y: 273 }" :columns="columnsSmoke"
+            :data-source="monitorlistYw" :pagination="false">
+            <template #bodyCell="{ column, text }">
+              <template v-if="column.dataIndex === 'warnLevel_str'">
+                <div :style="{color:text=='报警' ? '#ff0000' : '#91e609'}">{{ text }}</div>
+              </template>
+            </template>
             <span slot="action" slot-scope="text, record"></span>
           </a-table>
-          <a-table
-            v-if="index == 1"
-            ref="table1"
-            size="small"
-            :columns="columns"
-            :data-source="monitorlistHy"
-            :pagination="false"
-            :scroll="{ y: 273 }"
-          >
+          <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
+            :pagination="false" :scroll="{ y: 273 }">
+            <template #bodyCell="{ column, text }">
+              <template v-if="column.dataIndex === 'warnLevel_str'">
+                <div :style="{color:text=='报警' ? '#ff0000' : '#91e609'}">{{ text }}</div>
+              </template>
+            </template>
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
-          <a-table
-            v-if="index == 2"
-            ref="table"
-            size="small"
-            :scroll="{ y: 273 }"
-            :columns="columns"
-            :data-source="monitorlistPl"
-            :pagination="false"
-          >
+          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: 273 }" :columns="columns"
+            :data-source="monitorlistPl" :pagination="false">
+            <template #bodyCell="{ column, text }">
+              <template v-if="column.dataIndex === 'warnLevel_str'">
+                <div :style="{color:text=='报警' ? '#ff0000' : '#91e609'}">{{ text }}</div>
+              </template>
+            </template>
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
         </div>
       </div>
     </div>
     <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
-      <div v-for="(items, index) in tabLists" :class="index != 2 && index != 3 ? 'content-box' : 'content-boxs'" :key="index">
+      <div v-for="(items, index) in tabLists" :class="index != 2 && index != 3 ? 'content-box' : 'content-boxs'"
+        :key="index">
         <div class="title">
           <span class="title-label">{{ items.label }}</span>
           <span class="details">{{ `${items.details}>>` }}</span>
         </div>
         <div class="content">
-          <a-table
-            v-if="index == 0"
-            ref="table"
-            size="small"
-            :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
-            :columns="columnsSmoke"
-            :data-source="monitorlistYw"
-            :pagination="false"
-          >
+          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
+            :columns="columnsSmoke" :data-source="monitorlistYw" :pagination="false">
+            <template #bodyCell="{ column, text }">
+              <template v-if="column.dataIndex === 'warnLevel_str'">
+                <div :style="{color:text=='报警' ? '#ff0000' : '#91e609'}">{{ text }}</div>
+              </template>
+            </template>
             <span slot="action" slot-scope="text, record"></span>
           </a-table>
 
-          <a-table
-            v-if="index == 1"
-            ref="table"
-            size="small"
-            :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
-            :columns="columnsSmoke"
-            :data-source="monitorlistWd"
-            :pagination="false"
-          >
+          <a-table v-if="index == 1" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
+            :columns="columnsSmoke" :data-source="monitorlistWd" :pagination="false">
+            <template #bodyCell="{ column, text }">
+              <template v-if="column.dataIndex === 'warnLevel_str'">
+                <div :style="{color:text=='报警' ? '#ff0000' : '#91e609'}">{{ text }}</div>
+              </template>
+            </template>
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
-          <a-table
-            v-if="index == 2"
-            ref="table"
-            size="small"
-            :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
-            :columns="columns"
-            :data-source="monitorlistPl"
-            :pagination="false"
-          >
+          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
+            :columns="columns" :data-source="monitorlistPl" :pagination="false">
+            <template #bodyCell="{ column, text }">
+              <template v-if="column.dataIndex === 'warnLevel_str'">
+                <div :style="{color:text=='报警' ? '#ff0000' : '#91e609'}">{{ text }}</div>
+              </template>
+            </template>
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
-          <a-table
-            v-if="index == 3"
-            ref="table1"
-            size="small"
-            :columns="columns"
-            :data-source="monitorlistHy"
-            :pagination="false"
-            :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
-          >
+          <a-table v-if="index == 3" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
+            :pagination="false" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }">
+            <template #bodyCell="{ column, text }">
+              <template v-if="column.dataIndex === 'warnLevel_str'">
+                <div :style="{color:text=='报警' ? '#ff0000' : '#91e609'}">{{ text }}</div>
+              </template>
+            </template>
             <span slot="action" slot-scope="text, record"> </span>
           </a-table>
         </div>
       </div>
     </div>
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
+      v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
       <div class="footer-title">
         <div class="echart-label">光钎测温系统实时温度监测</div>
       </div>
@@ -143,7 +131,8 @@
         <echartLine2 :echartDataWd="echartDataWd" />
       </div>
     </div>
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
+      v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
       <div class="footer-title">
         <div class="echart-label">光钎测温系统实时温度监测</div>
       </div>
@@ -156,12 +145,8 @@
     <div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
       <div class="title-b">采空区密闭参数</div>
       <div class="card-btn">
-        <div
-          :class="activeIndex == index ? 'content-box1' : 'content-box'"
-          v-for="(item, index) in mbList"
-          :key="index"
-          @click="btnClick(item, index)"
-        >
+        <div :class="activeIndex == index ? 'content-box1' : 'content-box'" v-for="(item, index) in mbList" :key="index"
+          @click="btnClick(item, index)">
           <div class="btn-label">
             <span>{{ item.label }}</span>
             <span>{{ item.dw }}</span>
@@ -193,927 +178,927 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, reactive, watch, defineProps } from 'vue';
-  import { topOutList, tabList, tabLists, columns, columnsSmoke } from '../common.data';
-  import imgUrl from '../../../../../assets/images/fire/pie.png';
-  import echartLine2 from './echartLine2.vue';
-  import echartLine1 from './echartLine1.vue';
-
-  let props = defineProps({
-    listData: Object,
-    strType: String,
-  });
-
-  //束管监测-顶部区域数据
-  let topContent = reactive({
-    temperature: '0',
-    position: '',
-    time: '',
-    warn: '',
-  });
-  //束管监测当前密闭参数激活选项
-  let activeIndex = ref(0);
-  //束管监测当前激活密闭参数类型
-  let type = ref('O₂');
-  //束管监测密闭参数列表
-  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 echartDataSg1 = reactive({
-    xData: [],
-    yData: [],
-    lengedData: 'O₂',
-    lengedDataName: '(%)',
-  });
-  let echartDataSgList = reactive<any[]>([]);
-
-  //外因火灾温度监测-图表数据
-  let echartDataWd = reactive({
-    xData: [],
-    maxData: {
-      data: [],
-      lengedData: '实时温度',
-    },
-  });
-
-  //烟雾传感器列表数据
-  let monitorlistYw = reactive([]);
-
-  //火焰传感器列表数据
-  let monitorlistHy = reactive([]);
-
-  //喷淋装置列表数据
-  let monitorlistPl = reactive([]);
-
-  //温度传感器列表数据
-  let monitorlistWd = reactive([]);
-
-  //束管监测密闭参数选项切换
-  function btnClick(item, ind) {
-    activeIndex.value = ind;
-    type.value = item.label;
-    echartDataSg1.xData.length = 0;
-    echartDataSg1.yData.length = 0;
-    echartDataSg1.lengedData = type.value;
-    echartDataSg1.lengedDataName = item.dw;
-
-    switch (type.value) {
-      case 'O₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.o2val);
-        });
-        break;
-      case 'C₂H₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.ch2val);
-        });
-        break;
-      case 'CO':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.coval);
-        });
-        break;
-      case 'CH₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.chval);
-        });
-        break;
-      case 'CO₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.co2val);
-        });
-        break;
-      case 'C₂H₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.gasval);
-        });
-        break;
-    }
+import { ref, computed, reactive, watch, defineProps } from 'vue';
+import { topOutList, tabList, tabLists, columns, columnsSmoke } from '../common.data';
+import imgUrl from '../../../../../assets/images/fire/pie.png';
+import echartLine2 from './echartLine2.vue';
+import echartLine1 from './echartLine1.vue';
+
+let props = defineProps({
+  listData: Object,
+  strType: String,
+});
+
+//束管监测-顶部区域数据
+let topContent = reactive({
+  temperature: '0',
+  position: '',
+  time: '',
+  warn: '',
+});
+//束管监测当前密闭参数激活选项
+let activeIndex = ref(0);
+//束管监测当前激活密闭参数类型
+let type = ref('O₂');
+//束管监测密闭参数列表
+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 echartDataSg1 = reactive({
+  xData: [],
+  yData: [],
+  lengedData: 'O₂',
+  lengedDataName: '(%)',
+});
+let echartDataSgList = reactive<any[]>([]);
+
+//外因火灾温度监测-图表数据
+let echartDataWd = reactive({
+  xData: [],
+  maxData: {
+    data: [],
+    lengedData: '实时温度',
+  },
+});
+
+//烟雾传感器列表数据
+let monitorlistYw = reactive([]);
+
+//火焰传感器列表数据
+let monitorlistHy = reactive([]);
+
+//喷淋装置列表数据
+let monitorlistPl = reactive([]);
+
+//温度传感器列表数据
+let monitorlistWd = reactive([]);
+
+//束管监测密闭参数选项切换
+function btnClick(item, ind) {
+  activeIndex.value = ind;
+  type.value = item.label;
+  echartDataSg1.xData.length = 0;
+  echartDataSg1.yData.length = 0;
+  echartDataSg1.lengedData = type.value;
+  echartDataSg1.lengedDataName = item.dw;
+
+  switch (type.value) {
+    case 'O₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.o2val);
+      });
+      break;
+    case 'C₂H₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.ch2val);
+      });
+      break;
+    case 'CO':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.coval);
+      });
+      break;
+    case 'CH₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.chval);
+      });
+      break;
+    case 'CO₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.co2val);
+      });
+      break;
+    case 'C₂H₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.gasval);
+      });
+      break;
   }
+}
+
+watch(
+  () => props.listData,
+  (val) => {
+    console.log(val, 'val---------------');
+    props.listData = val;
+    if (JSON.stringify(val) != '{}') {
+      echartDataSg1.xData.length = 0;
+      echartDataSg1.yData.length = 0;
+      echartDataSgList.length = 0;
+      echartDataWd.xData.length = 0;
+      echartDataWd.maxData.data.length = 0;
+      monitorlistYw.length = 0;
+      monitorlistHy.length = 0;
+      monitorlistPl.length = 0;
+      monitorlistWd.length = 0;
+      if (val.fiber.length != 0) {
+        topOutList[0].value = val.fiber[0].readData.fmax;
+        topOutList[1].value = val.fiber[0].readData.fmin;
+        topOutList[2].value = val.fiber[0].readData.favg;
+        topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
+        JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
+          echartDataWd.xData.push(el.pos);
+          echartDataWd.maxData.data.push(el.value);
+        });
+      } else {
+        topOutList[0].value = '--';
+        topOutList[1].value = '--';
+        topOutList[2].value = '--';
+        topOutList[3].text = '正常';
+      }
 
-  watch(
-    () => props.listData,
-    (val) => {
-      console.log(val, 'val---------------');
-      props.listData = val;
-      if (JSON.stringify(val) != '{}') {
-        echartDataSg1.xData.length = 0;
-        echartDataSg1.yData.length = 0;
-        echartDataSgList.length = 0;
-        echartDataWd.xData.length = 0;
-        echartDataWd.maxData.data.length = 0;
-        monitorlistYw.length = 0;
-        monitorlistHy.length = 0;
-        monitorlistPl.length = 0;
-        monitorlistWd.length = 0;
-        if (val.fiber.length != 0) {
-          topOutList[0].value = val.fiber[0].readData.fmax;
-          topOutList[1].value = val.fiber[0].readData.fmin;
-          topOutList[2].value = val.fiber[0].readData.favg;
-          topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
-          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
-            echartDataWd.xData.push(el.pos);
-            echartDataWd.maxData.data.push(el.value);
-          });
-        } else {
-          topOutList[0].value = '--';
-          topOutList[1].value = '--';
-          topOutList[2].value = '--';
-          topOutList[3].text = '正常';
-        }
-
-        if (val.bundletube.length != 0) {
-          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].warnLevel == 0
-              ? '正常'
-              : val.bundletube[0].warnLevel == 101
+      if (val.bundletube.length != 0) {
+        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].warnLevel == 0
+            ? '正常'
+            : val.bundletube[0].warnLevel == 101
               ? '较低风险'
               : val.bundletube[0].warnLevel == 102
-              ? '低风险'
-              : val.bundletube[0].warnLevel == 103
-              ? '中风险'
-              : val.bundletube[0].warnLevel == 104
-              ? '高风险'
-              : val.bundletube[0].warnLevel == 201
-              ? '报警'
-              : '正常';
-          val.bundletube[0].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);
-          });
-        } else {
-          topContent.temperature = '--';
-          topContent.position = '--';
-          topContent.time = '--';
-          topContent.warn = '正常';
-        }
+                ? '低风险'
+                : val.bundletube[0].warnLevel == 103
+                  ? '中风险'
+                  : val.bundletube[0].warnLevel == 104
+                    ? '高风险'
+                    : val.bundletube[0].warnLevel == 201
+                      ? '报警'
+                      : '正常';
+        val.bundletube[0].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);
+        });
+      } else {
+        topContent.temperature = '--';
+        topContent.position = '--';
+        topContent.time = '--';
+        topContent.warn = '正常';
+      }
 
-        if (val.smoke.length != 0) {
-          val.smoke.forEach((el) => {
-            monitorlistYw.push({
-              strinstallpos: el.strinstallpos,
-              val: el.readData.smokeval,
-              warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str,
-              readTime: el.readTime,
-            });
+      if (val.smoke.length != 0) {
+        val.smoke.forEach((el) => {
+          monitorlistYw.push({
+            strinstallpos: el.strinstallpos,
+            val: el.readData.smokeval,
+            // warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str,
+            readTime: el.readTime,
           });
-        }
+        });
+      }
 
-        if (val.co.length != 0) {
-          val.co.forEach((el) => {
-            monitorlistHy.push(el);
-          });
-        }
+      if (val.co.length != 0) {
+        val.co.forEach((el) => {
+          monitorlistHy.push(el);
+        });
+      }
 
-        if (val.spray.length != 0) {
-          val.spray.forEach((el) => {
-            monitorlistPl.push(el);
-          });
-        }
+      if (val.spray.length != 0) {
+        val.spray.forEach((el) => {
+          monitorlistPl.push(el);
+        });
+      }
 
-        if (val.temperature.length != 0) {
-          val.temperature.forEach((el) => {
-            monitorlistWd.push({
-              strinstallpos: el.strinstallpos,
-              val: el.readData.fireval,
-              warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str,
-              readTime: el.readTime,
-            });
+      if (val.temperature.length != 0) {
+        val.temperature.forEach((el) => {
+          monitorlistWd.push({
+            strinstallpos: el.strinstallpos,
+            val: el.readData.fireval,
+            // warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str,
+            readTime: el.readTime,
           });
-        }
+        });
       }
-    },
-    { immediate: true, deep: true }
-  );
+    }
+  },
+  { immediate: true, deep: true }
+);
 </script>
 
 <style lang="less" scoped>
-  .mainWell {
+.mainWell {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+
+  .work-nav {
+    height: 15%;
     width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-    overflow-y: auto;
-
-    .work-nav {
-      height: 15%;
-      width: 100%;
-      margin-bottom: 20px;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
+    margin-bottom: 20px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .nav {
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
 
-      .nav {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &:nth-child(1) {
-          flex: 1;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
-
-        &:nth-child(2) {
-          flex: 1;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
-
-        &:nth-child(3) {
-          flex: 1;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
-
-        &:nth-child(4) {
-          flex: 1.2;
-          color: #b3b8cc;
-          font-size: 16px;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
-
-        &:nth-child(5) {
-          flex: 0.8;
-          color: #2b87ff;
-          font-size: 14px;
-          height: 100%;
-        }
-
-        .pic {
-          width: 26%;
-          height: 84%;
-
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-
-        .content {
-          height: 84%;
-          margin-left: 15px;
-          color: #fff;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-
-          span {
-            font-size: 14px;
-
-            &:nth-child(1) {
-              padding: 5px 0px;
-              color: #b3b8cc;
-            }
+      &:nth-child(1) {
+        flex: 1;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
 
-            &:nth-child(2) {
-              font-family: 'douyuFont';
-              font-size: 16px;
-              color: #3df6ff;
-            }
-          }
-        }
+      &:nth-child(2) {
+        flex: 1;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
       }
 
-      .nav:nth-child(1) .pic {
-        background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
-        background-size: 50% 50%;
+      &:nth-child(3) {
+        flex: 1;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
       }
 
-      .nav:nth-child(2) .pic {
-        background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
-        background-size: 50% 50%;
+      &:nth-child(4) {
+        flex: 1.2;
+        color: #b3b8cc;
+        font-size: 16px;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
       }
 
-      .nav:nth-child(3) .pic {
-        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-        background-size: 50% 50%;
+      &:nth-child(5) {
+        flex: 0.8;
+        color: #2b87ff;
+        font-size: 14px;
+        height: 100%;
       }
 
-      .content-box {
-        display: flex;
+      .pic {
+        width: 26%;
+        height: 84%;
 
-        &:nth-child(1) {
-          justify-content: space-around;
-          align-items: center;
-          flex: 2;
+        img {
+          width: 100%;
           height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
         }
+      }
 
-        &:nth-child(2) {
-          flex: 1;
-          justify-content: center;
-          align-items: center;
-          height: 100%;
-        }
+      .content {
+        height: 84%;
+        margin-left: 15px;
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
 
-        .contents {
-          height: 73%;
+        span {
+          font-size: 14px;
 
           &:nth-child(1) {
-            width: 40%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            img {
-              position: relative;
-              width: 23%;
-              height: 100%;
-              background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-              background-size: 50% 50%;
-            }
-
-            .text {
-              font-family: 'douyuFont';
-              font-size: 28px;
-              margin: 0px 15px;
-              color: #3df6ff;
-            }
-
-            .dw {
-              font-size: 14px;
-              color: #b3b8cc;
-            }
+            padding: 5px 0px;
+            color: #b3b8cc;
           }
 
           &:nth-child(2) {
-            width: 60%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .text {
-              font-size: 18px;
-
-              .text-label {
-                color: #b3b8cc;
-                font-weight: bold;
-              }
-
-              .text-value {
-                font-family: 'douyuFont';
-                color: #3df6ff;
-                margin-left: 10px;
-              }
-            }
+            font-family: 'douyuFont';
+            font-size: 16px;
+            color: #3df6ff;
           }
         }
-
-        .text1 {
-          font-size: 16px;
-          color: #b3b8cc;
-          font-weight: bold;
-        }
       }
     }
 
-    .center-box {
-      height: 47%;
-      margin-bottom: 20px;
+    .nav:nth-child(1) .pic {
+      background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
+      background-size: 50% 50%;
+    }
+
+    .nav:nth-child(2) .pic {
+      background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
+      background-size: 50% 50%;
+    }
+
+    .nav:nth-child(3) .pic {
+      background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+      background-size: 50% 50%;
+    }
+
+    .content-box {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
 
-      .content-box {
-        display: flex;
-        flex-direction: column;
-        width: 32%;
+      &:nth-child(1) {
+        justify-content: space-around;
+        align-items: center;
+        flex: 2;
         height: 100%;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
 
-        &:nth-child(2) {
-          margin: 0px 20px;
-        }
+      &:nth-child(2) {
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+      }
 
-        .title {
-          width: 100%;
-          height: 40px;
-          padding: 0px 15px;
-          margin-bottom: 10px;
-          border-bottom: 1px solid #0c3c88;
-          box-sizing: border-box;
+      .contents {
+        height: 73%;
+
+        &:nth-child(1) {
+          width: 40%;
           display: flex;
-          justify-content: space-between;
+          justify-content: center;
           align-items: center;
 
-          .title-label {
-            // font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
+          img {
+            position: relative;
+            width: 23%;
+            height: 100%;
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+            background-size: 50% 50%;
           }
 
-          .details {
-            font-size: 14px;
-            color: #1f81df;
+          .text {
+            font-family: 'douyuFont';
+            font-size: 28px;
+            margin: 0px 15px;
+            color: #3df6ff;
           }
-        }
 
-        .content {
-          height: calc(100% - 40px);
-          margin-bottom: 10px;
+          .dw {
+            font-size: 14px;
+            color: #b3b8cc;
+          }
         }
-      }
-    }
 
-    .center-box1 {
-      height: 70%;
-      // margin-bottom: 20px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
+        &:nth-child(2) {
+          width: 60%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
 
-      .content-box {
-        display: flex;
-        flex-direction: column;
-        width: calc(50% - 10px);
-        height: calc(70% - 10px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+          .text {
+            font-size: 18px;
 
-        &:nth-child(1) {
-          margin: 0px 20px 20px 0px;
-        }
+            .text-label {
+              color: #b3b8cc;
+              font-weight: bold;
+            }
 
-        &:nth-child(3) {
-          margin: 0px 20px 0px 0px;
+            .text-value {
+              font-family: 'douyuFont';
+              color: #3df6ff;
+              margin-left: 10px;
+            }
+          }
         }
+      }
 
-        .title {
-          width: 100%;
-          height: 40px;
-          padding: 0px 15px;
-          margin-bottom: 10px;
-          border-bottom: 1px solid #0c3c88;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+      .text1 {
+        font-size: 16px;
+        color: #b3b8cc;
+        font-weight: bold;
+      }
+    }
+  }
 
-          .title-label {
-            font-size: 16px;
-            color: #fff;
-          }
+  .center-box {
+    height: 47%;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-          .details {
-            font-size: 14px;
-            color: #1f81df;
-          }
-        }
+    .content-box {
+      display: flex;
+      flex-direction: column;
+      width: 32%;
+      height: 100%;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
 
-        .content {
-          height: calc(100% - 40px);
-          margin-bottom: 10px;
-        }
+      &:nth-child(2) {
+        margin: 0px 20px;
       }
 
-      .content-boxs {
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
         display: flex;
-        flex-direction: column;
-        width: calc(50% - 10px);
-        height: calc(30% - 30px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+        justify-content: space-between;
+        align-items: center;
 
-        &:nth-child(1) {
-          margin: 0px 20px 20px 0px;
+        .title-label {
+          // font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
         }
 
-        &:nth-child(3) {
-          margin: 0px 20px 20px 0px;
+        .details {
+          font-size: 14px;
+          color: #1f81df;
         }
+      }
 
-        .title {
-          width: 100%;
-          height: 40px;
-          padding: 0px 15px;
-          margin-bottom: 10px;
-          border-bottom: 1px solid #0c3c88;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
+      }
+    }
+  }
 
-          .title-label {
-            font-size: 16px;
-            color: #fff;
-          }
+  .center-box1 {
+    height: 70%;
+    // margin-bottom: 20px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
 
-          .details {
-            font-size: 14px;
-            color: #1f81df;
-          }
-        }
+    .content-box {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(70% - 10px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
 
-        .content {
-          height: calc(100% - 40px);
-          margin-bottom: 10px;
-        }
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
       }
-    }
 
-    .center-box2 {
-      height: 100%;
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
+      &:nth-child(3) {
+        margin: 0px 20px 0px 0px;
+      }
 
-      .content-box {
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
         display: flex;
-        flex-direction: column;
-        width: calc(50% - 10px);
-        height: calc(70% - 10px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+        justify-content: space-between;
+        align-items: center;
 
-        &:nth-child(1) {
-          margin: 0px 20px 20px 0px;
+        .title-label {
+          font-size: 16px;
+          color: #fff;
         }
 
-        &:nth-child(3) {
-          margin: 0px 20px 0px 0px;
+        .details {
+          font-size: 14px;
+          color: #1f81df;
         }
+      }
 
-        .title {
-          width: 100%;
-          height: 40px;
-          padding: 0px 15px;
-          margin-bottom: 10px;
-          border-bottom: 1px solid #0c3c88;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
+      }
+    }
 
-          .title-label {
-            font-size: 16px;
-            color: #fff;
-          }
+    .content-boxs {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(30% - 30px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
 
-          .details {
-            font-size: 14px;
-            color: #1f81df;
-          }
-        }
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
 
-        .content {
-          height: calc(100% - 40px);
-          margin-bottom: 10px;
-        }
+      &:nth-child(3) {
+        margin: 0px 20px 20px 0px;
       }
 
-      .content-boxs {
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
         display: flex;
-        flex-direction: column;
-        width: calc(50% - 10px);
-        height: calc(30% - 30px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-
-        &:nth-child(1) {
-          margin: 0px 20px 20px 0px;
-        }
+        justify-content: space-between;
+        align-items: center;
 
-        &:nth-child(3) {
-          margin: 0px 20px 20px 0px;
+        .title-label {
+          font-size: 16px;
+          color: #fff;
         }
 
-        .title {
-          width: 100%;
-          height: 40px;
-          padding: 0px 15px;
-          margin-bottom: 10px;
-          border-bottom: 1px solid #0c3c88;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .title-label {
-            font-size: 16px;
-            color: #fff;
-          }
-
-          .details {
-            font-size: 14px;
-            color: #1f81df;
-          }
+        .details {
+          font-size: 14px;
+          color: #1f81df;
         }
+      }
 
-        .content {
-          height: calc(100% - 40px);
-          margin-bottom: 10px;
-        }
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
       }
     }
+  }
+
+  .center-box2 {
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
 
-    .footer-box {
-      height: calc(38% - 40px);
-      padding: 10px;
+    .content-box {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(70% - 10px);
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
-      box-sizing: border-box;
 
-      .footer-title {
-        height: 30px;
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      &:nth-child(3) {
+        margin: 0px 20px 0px 0px;
+      }
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
-        .echart-label {
-          font-family: 'douyuFont';
-          font-size: 14px;
+        .title-label {
+          font-size: 16px;
           color: #fff;
         }
+
+        .details {
+          font-size: 14px;
+          color: #1f81df;
+        }
       }
 
-      .echart-content {
-        height: calc(100% - 30px);
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
       }
     }
 
-    .footer-box1 {
-      height: calc(30% - 20px);
-      padding: 10px 15px;
+    .content-boxs {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(30% - 30px);
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
-      box-sizing: border-box;
 
-      .footer-title {
-        height: 30px;
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      &:nth-child(3) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
-        .echart-label {
-          font-family: 'douyuFont';
+        .title-label {
           font-size: 16px;
           color: #fff;
         }
+
+        .details {
+          font-size: 14px;
+          color: #1f81df;
+        }
       }
 
-      .echart-content {
-        height: calc(100% - 30px);
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
       }
     }
+  }
 
-    .content-s {
-      width: 100%;
-      height: 608px;
-      padding: 10px;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-      box-sizing: border-box;
+  .footer-box {
+    height: calc(38% - 40px);
+    padding: 10px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
 
-      .title-b {
-        height: 30px;
-        line-height: 30px;
+    .footer-title {
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .echart-label {
         font-family: 'douyuFont';
         font-size: 14px;
         color: #fff;
       }
+    }
 
-      .card-btn {
-        height: 28%;
-        margin-bottom: 10px;
-        display: flex;
-        justify-content: space-between;
+    .echart-content {
+      height: calc(100% - 30px);
+    }
+  }
 
-        .content-box {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: url('../../../../../assets/images/fire/1.png') no-repeat center;
-          background-size: 100% 100%;
-          cursor: pointer;
+  .footer-box1 {
+    height: calc(30% - 20px);
+    padding: 10px 15px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
 
-          .btn-label {
-            position: absolute;
-            left: 50%;
-            top: 0;
-            transform: translate(-50%);
-            font-size: 16px;
-            color: #fff;
-          }
+    .footer-title {
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: 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: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-            background-size: 100% 100%;
-
-            .text-t {
-              width: 17%;
-              color: #fff;
-              font-size: 12px;
-            }
+      .echart-label {
+        font-family: 'douyuFont';
+        font-size: 16px;
+        color: #fff;
+      }
+    }
 
-            .text-v {
-              width: 83%;
-              font-family: 'douyuFont';
-              font-size: 10px;
-              color: #3df6ff;
-              display: flex;
-              justify-content: flex-end;
-            }
-          }
+    .echart-content {
+      height: calc(100% - 30px);
+    }
+  }
 
-          .box-item1 {
-            top: 24%;
-          }
+  .content-s {
+    width: 100%;
+    height: 608px;
+    padding: 10px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
 
-          .box-item2 {
-            top: 50%;
-          }
+    .title-b {
+      height: 30px;
+      line-height: 30px;
+      font-family: 'douyuFont';
+      font-size: 14px;
+      color: #fff;
+    }
 
-          .box-item3 {
-            top: 75%;
-          }
+    .card-btn {
+      height: 28%;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .content-box {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .btn-label {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%);
+          font-size: 16px;
+          color: #fff;
         }
 
-        .content-box1 {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: url('../../../../../assets/images/fire/2.png') 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: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
           background-size: 100% 100%;
-          cursor: pointer;
 
-          .btn-label {
-            position: absolute;
-            left: 50%;
-            top: 0;
-            transform: translate(-50%);
-            font-size: 16px;
+          .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: #3df6ff;
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: url('../../../../../assets/images/fire/contetn.png') 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: #3df6ff;
-              display: flex;
-              justify-content: flex-end;
-            }
+            justify-content: flex-end;
           }
+        }
 
-          .box-item1 {
-            top: 19%;
-          }
+        .box-item1 {
+          top: 24%;
+        }
 
-          .box-item2 {
-            top: 41%;
-          }
+        .box-item2 {
+          top: 50%;
+        }
 
-          .box-item3 {
-            top: 63%;
-          }
+        .box-item3 {
+          top: 75%;
         }
       }
 
-      .echart-box {
-        height: calc(72% - 41px);
-        border: 1px solid #114aac;
+      .content-box1 {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .btn-label {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%);
+          font-size: 16px;
+          color: #fff;
+        }
 
-        .title-f {
-          height: 40px;
+        .box-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 89%;
+          height: 16%;
           padding: 0px 10px;
-          box-sizing: border-box;
           display: flex;
           justify-content: space-between;
           align-items: center;
+          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+          background-size: 100% 100%;
 
-          .title-text {
-            font-family: 'douyuFont';
-            font-size: 14px;
+          .text-t {
+            width: 17%;
             color: #fff;
+            font-size: 12px;
+          }
+
+          .text-v {
+            width: 83%;
+            font-family: 'douyuFont';
+            font-size: 10px;
+            color: #3df6ff;
+            display: flex;
+            justify-content: flex-end;
           }
         }
 
-        .echarts-box {
-          height: calc(100% - 40px);
+        .box-item1 {
+          top: 19%;
         }
+
+        .box-item2 {
+          top: 41%;
+        }
+
+        .box-item3 {
+          top: 63%;
+        }
+      }
+    }
+
+    .echart-box {
+      height: calc(72% - 41px);
+      border: 1px solid #114aac;
+
+      .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;
+        }
+      }
+
+      .echarts-box {
+        height: calc(100% - 40px);
       }
     }
   }
+}
 </style>

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

@@ -100,14 +100,19 @@ function getAreas() {
 //根据A,B,E,G等点坐标绘制爆炸三角形
 function getBlast() {
   maxY.value = getCoordABY(0);
-  // maxX.value = getCoordABX(0);
-  maxX.value = 50;
   // 获取canvas元素
   let canvas = document.getElementById('myCanvas');
   let ctx = canvas.getContext('2d');
-  let scalcY = canvas.height / maxY.value;
-  let scalcX = canvas.width / maxX.value;
-
+  let scalcY, scalcX
+  if (coordinateB.x < 50) {
+    maxX.value = 50
+    scalcY = canvas.height / maxY.value;
+    scalcX = canvas.width / maxX.value;
+  } else {
+    maxX.value = parseInt(coordinateB.x + 10)
+    scalcY = canvas.height / maxY.value;
+    scalcX = canvas.width / maxX.value;
+  }
   //绘制AB点线条
   ctx.beginPath();
   ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
@@ -139,12 +144,12 @@ function getBlast() {
   //绘制B点c连线
   ctx.beginPath();
   ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
-  ctx.lineTo(maxX.value * scalcX, canvas.height - getCoordABY(50) * scalcY); // 结束绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * scalcY); // 结束绘制的点
   ctx.strokeStyle = '#000';
   ctx.stroke(); // 进行绘制
   //绘制c点与坐标轴连线
   ctx.beginPath();
-  ctx.moveTo(maxX.value * scalcX, canvas.height - getCoordABY(50) * scalcY); // 开始绘制的点
+  ctx.moveTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * scalcY); // 开始绘制的点
   ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
   ctx.strokeStyle = '#000';
   ctx.stroke(); // 进行绘制
@@ -187,7 +192,7 @@ function getBlast() {
       arr: [
         { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
         { x: maxX.value * scalcX, y: canvas.height },
-        { x: maxX.value * scalcX, y: canvas.height - getCoordABY(50) * scalcY },
+        { x: maxX.value * scalcX, y: canvas.height - getCoordABY(maxX.value) * scalcY },
         { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
         { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
       ],

src/views/vent/safetyList/common/detail.vue

@@ -21,7 +21,9 @@
                                     [通讯中断]
                                     <span class="zd-close">{{ clsoeNum || 0 }}</span>
                                 </span>
+                              
                             </div>
+                            <a-button type="primary" size="small" @click="getAllShow">显示全部</a-button>
                         </div>
                         <div class="left-content">
                             <div class="card-box" v-for="(item, index) in cardList" :key="index">
@@ -323,7 +325,7 @@ let ljList = reactive<any[]>([
 ])
 let openNum = ref(0)
 let clsoeNum = ref(0)
-let stationId = ref(null)
+let stationId = ref('')
 let tableData = ref<any[]>([])
 let tableData1 = ref<any[]>([])
 //分页参数配置
@@ -697,6 +699,12 @@ async function getStationList1() {
     tableData.value = res
     pagination.total = res.total
 }
+//显示全部
+function getAllShow(){
+    pagination.current = 1
+    stationId.value=''
+    getStationList1()
+}
 //启动新设备
 function handlerunDeviceMonitor(record, val) {
     devId.value = record.id
@@ -960,6 +968,7 @@ onUnmounted(() => {
                     .left-title {
                         display: flex;
                         height: 30px;
+                        justify-content: space-between;
                         align-items: center;
                         font-size: 14px;
                         margin-bottom: 10px;