修改掘进工作面接口属性字段

public/js/config.js

@@ -9,7 +9,7 @@ const History_Type = {
 }
 
 const VENT_PARAM = {
-  // simulatedPassword: '123456' //(simulatedPassword 为空时有密码输入框弹出，不为空时不弹出密码输入框，无需输入密码)
-  simulatedPassword: '',
+  simulatedPassword: '123456', //(simulatedPassword 为空时有密码输入框弹出，不为空时不弹出密码输入框，无需输入密码)
+  // simulatedPassword: '',
   showReport: false
 }

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

@@ -1,539 +1,542 @@
 <template>
-    <div class="closeWall">
-        <div class="title">
-            <div class="box-container">
-                <div class="contents">
-                    <img src="../../../../../assets/images/fire/pie.png" alt="" />
-                    <span class="text">{{ topContent.temperature }}</span>
-                    <span class="dw">°C</span>
-                </div>
-                <div class="contents">
-                    <div class="text">
-                        <span class="text-label">位置 : </span>
-                        <span class="text-value">{{ topContent.position }}</span>
-                    </div>
-                    <div class="text">
-                        <span class="text-label">时间 : </span>
-                        <span class="text-value">{{ topContent.time }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="box-container">
-                <div class="text1">{{ topContent.warn }}</div>
-            </div>
+  <div class="closeWall">
+    <div class="title">
+      <div class="box-container">
+        <div class="contents">
+          <img src="../../../../../assets/images/fire/pie.png" alt="" />
+          <span class="text">{{ topContent.temperature }}</span>
+          <span class="dw">°C</span>
         </div>
-        <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="box-label">
-                        <span> {{ item.label }}</span>
-                        <span>{{ item.dw }}</span>
-                    </div>
-                    <div class="box-item box-item1">
-                        <span class="text-t">{{ `${item.label1}:` }}</span>
-                        <span class="text-v">{{ item.nd }}</span>
-                    </div>
-                    <div class="box-item box-item2">
-                        <span class="text-t">{{ `${item.label2}:` }}</span>
-                        <span class="text-v">{{ item.time1 }}</span>
-                    </div>
-                    <div class="box-item box-item3">
-                        <span class="text-t">{{ `${item.label3}:` }}</span>
-                        <span class="text-v">{{ item.address }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="echart-box">
-                <div class="title-f">
-                    <div class="title-text">{{ `${type}趋势` }}</div>
-                </div>
-                <div class="echarts-box">
-                    <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName"></echartLine1>
-                </div>
-            </div>
+        <div class="contents">
+          <div class="text">
+            <span class="text-label">位置 : </span>
+            <span class="text-value">{{ topContent.position }}</span>
+          </div>
+          <div class="text">
+            <span class="text-label">时间 : </span>
+            <span class="text-value">{{ topContent.time }}</span>
+          </div>
         </div>
+      </div>
+      <div class="box-container">
+        <div class="text1">{{ topContent.warn }}</div>
+      </div>
     </div>
+    <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="box-label">
+            <span> {{ item.label }}</span>
+            <span>{{ item.dw }}</span>
+          </div>
+          <div class="box-item box-item1">
+            <span class="text-t">{{ `${item.label1}:` }}</span>
+            <span class="text-v">{{ item.nd }}</span>
+          </div>
+          <div class="box-item box-item2">
+            <span class="text-t">{{ `${item.label2}:` }}</span>
+            <span class="text-v">{{ item.time1 }}</span>
+          </div>
+          <div class="box-item box-item3">
+            <span class="text-t">{{ `${item.label3}:` }}</span>
+            <span class="text-v">{{ item.address }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="echart-box">
+        <div class="title-f">
+          <div class="title-text">{{ `${type}趋势` }}</div>
+        </div>
+        <div class="echarts-box">
+          <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, watch, defineProps } from 'vue';
-import echartLine1 from './common/echartLine1.vue'
+  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
+  import echartLine1 from './common/echartLine1.vue';
 
-let props = defineProps({
+  let props = defineProps({
     listData: Object,
-});
+  });
 
-//密闭-顶部区域数据
-let topContent = reactive({
+  //密闭-顶部区域数据
+  let topContent = reactive({
     temperature: 0,
     position: '',
     time: '',
     warn: '',
-})
-//密闭参数列表
-let mbList = reactive([
+  });
+  //密闭参数列表
+  let mbList = reactive([
     {
-        label: 'O₂',
-        dw: '(%)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: '0',
-        time1: '',
-        address: '',
+      label: 'O₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
     {
-        label: 'CO',
-        dw: '(ppm)',
-        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: 'CO₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
     {
-        label: 'CH₄',
-        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: '',
     },
     {
-        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 activeIndex = ref(0)
-//当前激活密闭参数类型
-let type = ref('O₂')
-
-let echartDataSg1 = reactive({
+  let echartDataSg1 = reactive({
     xData: [],
     yData: [],
     lengedData: 'O₂',
-    lengedDataName:'(%)'
-
-})
-let echartDataSgList = reactive<any[]>([])
-
-//密闭参数选项切换
-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
-    
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
+
+  //密闭参数选项切换
+  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;
+      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---')
-    echartDataSg1.xData.length = 0
-    echartDataSg1.yData.length = 0
-    echartDataSgList.length = 0
-    if (JSON.stringify(val) != '{}') {
+  }
+
+  watch(
+    () => props.listData,
+    (val) => {
+      console.log(val, 'val---');
+      echartDataSg1.xData.length = 0;
+      echartDataSg1.yData.length = 0;
+      echartDataSgList.length = 0;
+      if (JSON.stringify(val) != '{}') {
         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 ? '报警' : '正常'
-            mbList[0].nd = val.bundletube[0].readData.o2val || '--'
-            mbList[1].nd = val.bundletube[0].readData.coval || '--'
-            mbList[2].nd = val.bundletube[0].readData.co2val || '--'
-            mbList[3].nd = val.bundletube[0].readData.chval || '--'
-            mbList[4].nd = val.bundletube[0].readData.ch2val || '--'
-            mbList[5].nd = val.bundletube[0].readData.gasval || '--'
-            mbList.forEach(el => {
-                el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--'
-                el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--'
-            })
-
-            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)
-            })
+          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
+              ? '报警'
+              : '正常';
+          mbList[0].nd = val.bundletube[0].readData.o2val || '--';
+          mbList[1].nd = val.bundletube[0].readData.coval || '--';
+          mbList[2].nd = val.bundletube[0].readData.co2val || '--';
+          mbList[3].nd = val.bundletube[0].readData.chval || '--';
+          mbList[4].nd = val.bundletube[0].readData.ch2val || '--';
+          mbList[5].nd = val.bundletube[0].readData.gasval || '--';
+          mbList.forEach((el) => {
+            el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--';
+            el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--';
+          });
+
+          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 = 0
-            topContent.position = '--'
-            topContent.time = '--'
-            topContent.warn = '正常'
-            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 = '--'
-            })
+          topContent.temperature = 0;
+          topContent.position = '--';
+          topContent.time = '--';
+          topContent.warn = '正常';
+          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>
-.closeWall {
+  .closeWall {
     width: 100%;
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
 
     .title {
-        width: 100%;
-        height: 17%;
-        margin-bottom: 20px;
+      width: 100%;
+      height: 17%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      align-items: center;
+
+      .box-container {
         display: flex;
-        justify-content: space-between;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        align-items: center;
 
-        .box-container {
-            display: flex;
+        &:nth-child(1) {
+          justify-content: space-around;
+          align-items: center;
+          flex: 2;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(1) {
-                justify-content: space-around;
-                align-items: center;
-                flex: 2;
-                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%;
+        }
+
+        .contents {
+          height: 73%;
+
+          &: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%;
             }
 
-            &:nth-child(2) {
-                flex: 1;
-                justify-content: center;
-                align-items: center;
-                height: 100%;
+            .text {
+              font-family: 'douyuFont';
+              font-size: 36px;
+              margin: 0px 15px;
+              color: #3df6ff;
             }
 
-            .contents {
-                height: 73%;
-
-                &: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: 36px;
-                        margin: 0px 15px;
-                        color: #3df6ff;
-                    }
-
-                    .dw {
-                        font-size: 16px;
-                        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;
-                        }
-                    }
-                }
+            .dw {
+              font-size: 16px;
+              color: #b3b8cc;
             }
+          }
+
+          &:nth-child(2) {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .text {
+              font-size: 18px;
 
-            .text1 {
-                font-size: 18px;
+              .text-label {
                 color: #b3b8cc;
                 font-weight: bold;
+              }
+
+              .text-value {
+                font-family: 'douyuFont';
+                color: #3df6ff;
+                margin-left: 10px;
+              }
             }
+          }
         }
 
-
+        .text1 {
+          font-size: 18px;
+          color: #b3b8cc;
+          font-weight: bold;
+        }
+      }
     }
 
     .content {
-        width: 100%;
-        height: calc(83% - 20px);
-        padding: 15px 20px 0px 20px;
-        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;
-            font-family: 'douyuFont';
-            font-size: 16px;
-            // color: #3df6ff;
-        }
+      width: 100%;
+      height: calc(83% - 20px);
+      padding: 15px 20px 0px 20px;
+      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;
+        font-family: 'douyuFont';
+        font-size: 16px;
+        // color: #3df6ff;
+      }
+
+      .card-btn {
+        height: 28%;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
 
-        .card-btn {
-            height: 28%;
-            margin-bottom: 10px;
+        .box-container {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/1.png') 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;
-
-            .box-container {
-                position: relative;
-                width: 16%;
-                height: 100%;
-                background: url('../../../../../assets/images/fire/1.png') 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: 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;
-                    }
-                }
-
-
-                .box-item1 {
-                    top: 24%;
-                }
-
-                .box-item2 {
-                    top: 50%;
-                }
-
-                .box-item3 {
-                    top: 75%;
-                }
+            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;
             }
 
-            .box-container1 {
-                position: relative;
-                width: 16%;
-                height: 100%;
-                background: url('../../../../../assets/images/fire/2.png') 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: 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;
-                    }
-                }
-
-                .box-item1 {
-                    top: 19%;
-                }
-
-                .box-item2 {
-                    top: 41%;
-                }
-
-                .box-item3 {
-                    top: 63%;
-                }
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
             }
+          }
+
+          .box-item1 {
+            top: 24%;
+          }
+
+          .box-item2 {
+            top: 50%;
+          }
+
+          .box-item3 {
+            top: 75%;
+          }
         }
 
-        .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: 16px;
-                    // color: #3df6ff;
-                }
+        .box-container1 {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/2.png') 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: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
             }
 
-            .echarts-box {
-                height: calc(100% - 40px);
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
             }
+          }
+
+          .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: 16px;
+            // color: #3df6ff;
+          }
+        }
+
+        .echarts-box {
+          height: calc(100% - 40px);
         }
+      }
     }
-}
-</style>
+  }
+</style>

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

@@ -1,479 +1,477 @@
 <template>
-    <div class="fireWork">
-        <!-- 顶部区域 -->
-        <div class="work-nav">
-            <div class="nav" v-for="(item, index) in topList" :key="index">
-                <div class="pic" v-if="item.imgSrc">
-                    <img :src="imgUrl" alt="" />
-                </div>
-                <div class="content" v-if="item.label && item.value">
-                    <span>{{ item.label }}</span>
-                    <span>{{ item.value }}</span>
-                </div>
-                <div class="text" v-if="item.text">{{ item.text }}</div>
-                <div class="percent" v-if="item.list.length != 0">
-                    <div class="title">{{ item.label }}</div>
-                    <div class="value">
-                        <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
-                            <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
-                            <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <div class="fireWork">
+    <!-- 顶部区域 -->
+    <div class="work-nav">
+      <div class="nav" v-for="(item, index) in topList" :key="index">
+        <div class="pic" v-if="item.imgSrc">
+          <img :src="imgUrl" alt="" />
         </div>
-        <!-- 中间区域 -->
-        <div class="center-echart">
-            <div class="nav-title">
-                <div class="title">光纤测温系统温度实时监测</div>
-            </div>
-            <div class="echart-box">
-                <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw"></echartLine>
+        <div class="content" v-if="item.label && item.value">
+          <span>{{ item.label }}</span>
+          <span>{{ item.value }}</span>
+        </div>
+        <div class="text" v-if="item.text">{{ item.text }}</div>
+        <div class="percent" v-if="item.list.length != 0">
+          <div class="title">{{ item.label }}</div>
+          <div class="value">
+            <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
+              <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
+              <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
             </div>
+          </div>
         </div>
-        <!-- 底部区域 -->
-        <div class="bot-content">
-            <div class="title">
-                <div class="text">束管系统监测</div>
+      </div>
+    </div>
+    <!-- 中间区域 -->
+    <div class="center-echart">
+      <div class="nav-title">
+        <div class="title">光纤测温系统温度实时监测</div>
+      </div>
+      <div class="echart-box">
+        <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw" />
+      </div>
+    </div>
+    <!-- 底部区域 -->
+    <div class="bot-content">
+      <div class="title">
+        <div class="text">束管系统监测</div>
+      </div>
+      <div class="content">
+        <div class="content-box" v-for="(item, index) in contentList" :key="index">
+          <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
+            <div class="content-title">
+              <span> {{ items.title }}</span>
+              <span> {{ items.dw }}</span>
             </div>
-            <div class="content">
-                <div class="content-box" v-for="(item, index) in contentList" :key="index">
-                    <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
-                        <div class="content-title">
-                            <span> {{ items.title }}</span>
-                            <span> {{ items.dw }}</span>
-                           
-                        </div>
-                        <div class="content-item">
-                            <span>{{ items.label }}</span>
-                            <span class="bolds">{{ items.value }}</span>
-                        </div>
-                        <div class="content-item">
-                            <span>{{ items.label1 }}</span>
-                            <span class="bolds">{{ items.time }}</span>
-                        </div>
-                    </div>
-                </div>
+            <div class="content-item">
+              <span>{{ items.label }}</span>
+              <span class="bolds">{{ items.value }}</span>
             </div>
-            <div class="echart-box">
-                <echartLine1 :echartDataSg="echartDataSg" :lengedDataName="echartDataSg.lengedDataName"></echartLine1>
+            <div class="content-item">
+              <span>{{ items.label1 }}</span>
+              <span class="bolds">{{ items.time }}</span>
             </div>
+          </div>
         </div>
+      </div>
+      <div class="echart-box">
+        <echartLine1 :echartDataSg="echartDataSg" :lengedDataName="echartDataSg.lengedDataName" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, watch, defineProps } from 'vue';
-import imgUrl from '../../../../../assets/images/fire/pie.png'
-import echartLine from './common/echartLine.vue'
-import echartLine1 from './common/echartLine1.vue'
-import { topList, contentList, } from '../fire.data'
+  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
+  import imgUrl from '../../../../../assets/images/fire/pie.png';
+  import echartLine from './common/echartLine.vue';
+  import echartLine1 from './common/echartLine1.vue';
+  import { topList, contentList } from '../fire.data';
 
-let props = defineProps({
+  let props = defineProps({
     listData: Object,
-});
+  });
 
-let maxY = ref(2000)
-let echartDw = ref('(­°C)')
-//光钎测温-图表数据
-let echartDataGq = reactive({
+  let maxY = ref(2000);
+  let echartDw = ref('(­°C)');
+  //光钎测温-图表数据
+  let echartDataGq = reactive({
     maxData: {
-        lengedData: '当前温度',
-        data: []
+      lengedData: '当前温度',
+      data: [],
     },
     xData: [],
-})
-//束管监测-图表数据
-let echartDataSg = reactive({
+  });
+  //束管监测-图表数据
+  let echartDataSg = reactive({
     xData: [],
     yData: [],
     lengedData: 'O₂',
-    lengedDataName:'(%)'
-})
-let echartDataSgList = reactive<any[]>([])
-//束管实时数据选项点击
-function getSgClick(items) {
-    echartDataSg.xData.length = 0
-    echartDataSg.yData.length = 0
-    echartDataSg.lengedData = items.title
-    echartDataSg.lengedDataName = items.dw
-    
-    
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
+  //束管实时数据选项点击
+  function getSgClick(items) {
+    echartDataSg.xData.length = 0;
+    echartDataSg.yData.length = 0;
+    echartDataSg.lengedData = items.title;
+    echartDataSg.lengedDataName = items.dw;
+
     switch (items.title) {
-        case 'O₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.o2val)
-            })
-            break;
-        case 'C₂H₄':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.ch2val)
-            })
-            break;
-        case 'CO':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.coval)
-            })
-            break;
-        case 'CH₄':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.chval)
-            })
-            break;
-        case 'CO₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.co2val)
-            })
-            break;
-        case 'C₂H₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.gasval)
-            })
-            break;
+      case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.o2val);
+        });
+        break;
+      case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.ch2val);
+        });
+        break;
+      case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.coval);
+        });
+        break;
+      case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.chval);
+        });
+        break;
+      case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.co2val);
+        });
+        break;
+      case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.gasval);
+        });
+        break;
     }
-}
-
-watch(() => props.listData, (val, val1) => {
-    echartDataGq.xData.length = 0
-    echartDataGq.maxData.data.length = 0
-    echartDataSgList.length = 0
-    echartDataSg.xData.length = 0
-    echartDataSg.yData.length = 0
-    if (JSON.stringify(val) != '{}') {
+  }
+
+  watch(
+    () => props.listData,
+    (val, val1) => {
+      echartDataGq.xData.length = 0;
+      echartDataGq.maxData.data.length = 0;
+      echartDataSgList.length = 0;
+      echartDataSg.xData.length = 0;
+      echartDataSg.yData.length = 0;
+      if (JSON.stringify(val) != '{}') {
         if (val.fiber.length != 0) {
-            topList[0].value = val.fiber[0].readData.fmax
-            topList[1].value = val.fiber[0].readData.fmin
-            topList[2].value = val.fiber[0].readData.favg
-            topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常'
-            JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el => {
-                echartDataGq.xData.push(el.pos)
-                echartDataGq.maxData.data.push(el.value)
-            })
+          topList[0].value = val.fiber[0].readData.fmax;
+          topList[1].value = val.fiber[0].readData.fmin;
+          topList[2].value = val.fiber[0].readData.favg;
+          topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常';
+          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
+            echartDataGq.xData.push(el.pos);
+            echartDataGq.maxData.data.push(el.value);
+          });
         } else {
-            topList[0].value = '--'
-            topList[1].value = '--'
-            topList[2].value = '--'
-            topList[3].text = '正常'
+          topList[0].value = '--';
+          topList[1].value = '--';
+          topList[2].value = '--';
+          topList[3].text = '正常';
         }
 
         if (val.bundletube.length != 0) {
-            contentList[0].list[0].value = val.bundletube[0].readData.o2val
-            contentList[0].list[1].value = val.bundletube[0].readData.ch2val
-            contentList[1].list[0].value = val.bundletube[0].readData.coval
-            contentList[1].list[1].value = val.bundletube[0].readData.chval
-            contentList[2].list[0].value = val.bundletube[0].readData.co2val
-            contentList[2].list[1].value = val.bundletube[0].readData.gasval
-            contentList.forEach(el => {
-                el.list.forEach(v => {
-                    v.time = val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':'))
-                })
-            })
-
-
-            val.bundletube[0].history.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                if (echartDataSg.lengedData == 'O₂') {
-                    echartDataSg.yData.push(el.o2val)
-                } else if (echartDataSg.lengedData == 'C₂H₄') {
-                    echartDataSg.yData.push(el.ch2val)
-                } else if (echartDataSg.lengedData == 'C₂H₂') {
-                    echartDataSg.yData.push(el.gasval)
-                } else if (echartDataSg.lengedData == 'CH₄') {
-                    echartDataSg.yData.push(el.chval)
-                } else if (echartDataSg.lengedData == 'CO') {
-                    echartDataSg.yData.push(el.coval)
-                } else if (echartDataSg.lengedData == 'CO₂') {
-                    echartDataSg.yData.push(el.co2val)
-                }
-                echartDataSgList.push(el)
-            })
+          contentList[0].list[0].value = val.bundletube[0].readData.o2val;
+          contentList[0].list[1].value = val.bundletube[0].readData.ch2val;
+          contentList[1].list[0].value = val.bundletube[0].readData.coval;
+          contentList[1].list[1].value = val.bundletube[0].readData.chval;
+          contentList[2].list[0].value = val.bundletube[0].readData.co2val;
+          contentList[2].list[1].value = val.bundletube[0].readData.gasval;
+          contentList.forEach((el) => {
+            el.list.forEach((v) => {
+              v.time = val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':'));
+            });
+          });
+
+          val.bundletube[0].history.forEach((el) => {
+            echartDataSg.xData.push(el.time);
+            if (echartDataSg.lengedData == 'O₂') {
+              echartDataSg.yData.push(el.o2val);
+            } else if (echartDataSg.lengedData == 'C₂H₄') {
+              echartDataSg.yData.push(el.ch2val);
+            } else if (echartDataSg.lengedData == 'C₂H₂') {
+              echartDataSg.yData.push(el.gasval);
+            } else if (echartDataSg.lengedData == 'CH₄') {
+              echartDataSg.yData.push(el.chval);
+            } else if (echartDataSg.lengedData == 'CO') {
+              echartDataSg.yData.push(el.coval);
+            } else if (echartDataSg.lengedData == 'CO₂') {
+              echartDataSg.yData.push(el.co2val);
+            }
+            echartDataSgList.push(el);
+          });
         } else {
-            contentList[0].list[0].value = '--'
-            contentList[0].list[1].value = '--'
-            contentList[1].list[0].value = '--'
-            contentList[1].list[1].value = '--'
-            contentList[2].list[0].value = '--'
-            contentList[2].list[1].value = '--'
-            contentList.forEach(el => {
-                el.list.forEach(v => {
-                    v.time = '--'
-                })
-            })
+          contentList[0].list[0].value = '--';
+          contentList[0].list[1].value = '--';
+          contentList[1].list[0].value = '--';
+          contentList[1].list[1].value = '--';
+          contentList[2].list[0].value = '--';
+          contentList[2].list[1].value = '--';
+          contentList.forEach((el) => {
+            el.list.forEach((v) => {
+              v.time = '--';
+            });
+          });
         }
-    }
-}, { deep: true })
-
-
+      }
+    },
+    { deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-.fireWork {
+  .fireWork {
     width: 100%;
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
 
     .work-nav {
-        height: 15%;
-        width: 100%;
-        margin-bottom: 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+      height: 15%;
+      width: 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(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(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(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: 0.6;
-                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(4) {
+          flex: 0.6;
+          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: 1.4;
-                height: 100%;
-
-                .percent {
-                    width: 100%;
-                    height: 82%;
-                    padding: 0px 20px;
-                    box-sizing: border-box;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-
-                    .title {
-                        font-size: 14px;
-                        padding: 5px 0px;
-                        color: #b3b8cc;
-                        text-align: center;
-                    }
-
-                    .value {
-                        display: flex;
-                        justify-content: space-between;
-
-                        span {
-                            font-family: 'douyuFont';
-                            font-size: 18px;
-                        }
-                    }
-                }
-            }
+        &:nth-child(5) {
+          flex: 1.4;
+          height: 100%;
 
-            .pic {
-                width: 30%;
-                height: 82%;
+          .percent {
+            width: 100%;
+            height: 82%;
+            padding: 0px 20px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
 
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
+            .title {
+              font-size: 14px;
+              padding: 5px 0px;
+              color: #b3b8cc;
+              text-align: center;
             }
 
-            .content {
-                height: 82%;
-                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(2) {
-                        font-family: 'douyuFont';
-                        font-size: 24px;
-                        color: #3df6ff;
-                    }
-                }
+            .value {
+              display: flex;
+              justify-content: space-between;
+
+              span {
+                font-family: 'douyuFont';
+                font-size: 18px;
+              }
             }
+          }
         }
 
-        .nav:nth-child(1) .pic {
-            background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
-            background-size: 50% 50%;
-        }
+        .pic {
+          width: 30%;
+          height: 82%;
 
-        .nav:nth-child(2) .pic {
-            background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
-            background-size: 50% 50%;
+          img {
+            width: 100%;
+            height: 100%;
+          }
         }
 
-        .nav:nth-child(3) .pic {
-            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-            background-size: 50% 50%;
+        .content {
+          height: 82%;
+          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(2) {
+              font-family: 'douyuFont';
+              font-size: 24px;
+              color: #3df6ff;
+            }
+          }
         }
+      }
+
+      .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%;
+      }
     }
 
     .center-echart {
-        width: 100%;
-        height: 32%;
-        padding: 15px;
-        margin-bottom: 20px;
-        box-sizing: border-box;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-
-        .nav-title {
-            height: 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+      width: 100%;
+      height: 32%;
+      padding: 15px;
+      margin-bottom: 20px;
+      box-sizing: border-box;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .nav-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-            .title {
-                font-family: 'douyuFont';
-                font-size: 16px;
-                // color: #3df6ff;
-            }
+        .title {
+          font-family: 'douyuFont';
+          font-size: 16px;
+          // color: #3df6ff;
         }
+      }
 
-        .echart-box {
-            width: 100%;
-            height: calc(100% - 30px);
-        }
+      .echart-box {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
     }
 
     .bot-content {
-        position: relative;
-        width: 100%;
-        height: calc(53% - 40px);
-        padding: 15px 15px 0px 15px;
-        box-sizing: border-box;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+      position: relative;
+      width: 100%;
+      height: calc(53% - 40px);
+      padding: 15px 15px 0px 15px;
+      box-sizing: border-box;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
 
-        .title {
-            height: 30px;
-            display: flex;
-            justify-content: space-between;
+        .text {
+          height: 30px;
+          line-height: 30px;
+          font-family: 'douyuFont';
+          font-size: 16px;
+          // color: #3df6ff;
+        }
+      }
 
-            .text {
-                height: 30px;
-                line-height: 30px;
-                font-family: 'douyuFont';
-                font-size: 16px;
-                // color: #3df6ff;
+      .content {
+        height: calc(100% - 30px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .content-box {
+          width: 100%;
+          height: 29%;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0px !important;
+
+          .box-item {
+            position: relative;
+            width: 16%;
+            height: 100%;
+            background: url('../../../../../assets/images/fire/14174.png') no-repeat center;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .content-title {
+              position: absolute;
+              left: 50%;
+              top: 0;
+              transform: translate(-50%);
+              color: #fff;
+              font-size: 14px;
             }
-        }
 
-        .content {
-            height: calc(100% - 30px);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
+            .content-item {
+              position: absolute;
+              width: 93%;
+              height: 27%;
+              display: flex;
+              align-items: center;
+              padding: 0px 10px;
+              box-sizing: border-box;
+              background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+              background-size: 100% 100%;
+
+              &:nth-child(2) {
+                left: 50%;
+                top: 28%;
+                transform: translate(-50%);
+                display: flex;
+                justify-content: space-between;
+              }
 
-            .content-box {
-                width: 100%;
-                height: 29%;
+              &:nth-child(3) {
+                left: 50%;
+                top: 62%;
+                transform: translate(-50%);
                 display: flex;
                 justify-content: space-between;
-                margin-top: 0px !important;
-
-                .box-item {
-                    position: relative;
-                    width: 16%;
-                    height: 100%;
-                    background: url('../../../../../assets/images/fire/14174.png') no-repeat center;
-                    background-size: 100% 100%;
-                    cursor: pointer;
-
-                    .content-title {
-                        position: absolute;
-                        left: 50%;
-                        top: 0;
-                        transform: translate(-50%);
-                        color: #fff;
-                        font-size: 14px;
-                    }
-
-                    .content-item {
-                        position: absolute;
-                        width: 93%;
-                        height: 27%;
-                        display: flex;
-                        align-items: center;
-                        padding: 0px 10px;
-                        box-sizing: border-box;
-                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-                        background-size: 100% 100%;
-
-                        &:nth-child(2) {
-                            left: 50%;
-                            top: 28%;
-                            transform: translate(-50%);
-                            display: flex;
-                            justify-content: space-between;
-                        }
-
-                        &:nth-child(3) {
-                            left: 50%;
-                            top: 62%;
-                            transform: translate(-50%);
-                            display: flex;
-                            justify-content: space-between;
-                        }
-
-                        .bolds {
-                            font-family: 'douyuFont';
-                            color: #3df6ff;
-                            font-size: 12px;
-                        }
-                    }
-                }
-            }
-        }
+              }
 
-        .echart-box {
-            position: absolute;
-            left: 50%;
-            top: 50px;
-            transform: translate(-50%, 0);
-            width: 66%;
-            height: calc(100% - 50px);
+              .bolds {
+                font-family: 'douyuFont';
+                color: #3df6ff;
+                font-size: 12px;
+              }
+            }
+          }
         }
+      }
+
+      .echart-box {
+        position: absolute;
+        left: 50%;
+        top: 50px;
+        transform: translate(-50%, 0);
+        width: 66%;
+        height: calc(100% - 50px);
+      }
     }
-}
-</style>
+  }
+</style>

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

@@ -1,418 +1,466 @@
 <template>
-    <div class="mainWell">
-        <!-- 光钎测温 -->
-        <div class="work-nav" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
-            <div class="nav" v-for="(item, index) in topOutList" :key="index">
-                <div class="pic" v-if="item.imgSrc">
-                    <img :src="imgUrl" alt="" />
-                </div>
-                <div class="content" v-if="item.label && item.value">
-                    <span>{{ item.label }}</span>
-                    <span>{{ item.value }}</span>
-                </div>
-                <div class="text" v-if="item.text">{{ item.text }}</div>
-            </div>
+  <div class="mainWell">
+    <!-- 光钎测温 -->
+    <div class="work-nav" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
+      <div class="nav" v-for="(item, index) in topOutList" :key="index">
+        <div class="pic" v-if="item.imgSrc">
+          <img :src="imgUrl" alt="" />
         </div>
-        <!-- 束管监测 -->
-        <div class="work-nav" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
-            <div class="content-box">
-                <div class="contents">
-                    <img src="../../../../../assets/images/fire/pie.png" alt="" />
-                    <span class="text">{{ topContent.temperature }}</span>
-                    <span class="dw">°C</span>
-                </div>
-                <div class="contents">
-                    <div class="text">
-                        <span class="text-label">位置 : </span>
-                        <span class="text-value">{{ topContent.position }}</span>
-                    </div>
-                    <div class="text">
-                        <span class="text-label">时间 : </span>
-                        <span class="text-value">{{ topContent.time }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="content-box">
-                <div class="text1">{{ topContent.warn }}</div>
-            </div>
+        <div class="content" v-if="item.label && item.value">
+          <span>{{ item.label }}</span>
+          <span>{{ item.value }}</span>
         </div>
-
-
-        <div class="center-box" v-if="strType != 'sys_coalseam'">
-            <div class="content-box" v-for="(items, index) in tabList" :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="{ x: 0, y: 273 }" :columns="columns"
-                        :data-source="monitorlistYw" :pagination="false">
-                        <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 }">
-                        <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">
-                        <span slot="action" slot-scope="text, record"> </span>
-                    </a-table>
-                </div>
-            </div>
+        <div class="text" v-if="item.text">{{ item.text }}</div>
+      </div>
+    </div>
+    <!-- 束管监测 -->
+    <div class="work-nav" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
+      <div class="content-box">
+        <div class="contents">
+          <img src="../../../../../assets/images/fire/pie.png" alt="" />
+          <span class="text">{{ topContent.temperature }}</span>
+          <span class="dw">°C</span>
         </div>
+        <!-- <div class="contents">
+          <div class="text">
+            <span class="text-label">位置 : </span>
+            <span class="text-value">{{ topContent.position }}</span>
+          </div>
+          <div class="text">
+            <span class="text-label">时间 : </span>
+            <span class="text-value">{{ topContent.time }}</span>
+          </div>
+        </div> -->
+      </div>
+      <div class="content-box">
+        <div class="text1">{{ topContent.warn }}</div>
+      </div>
+    </div>
 
-        <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
-            <div class="content-box" v-for="(items, index) in tabLists" :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 ? 160 : 270 }" :columns="columns"
-                        :data-source="monitorlistYw" :pagination="false">
-                        <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: listData.fiber.length != 0 ? 160 : 270 }">
-                        <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 ? 160 : 270 }" :columns="columns"
-                        :data-source="monitorlistPl" :pagination="false">
-                        <span slot="action" slot-scope="text, record"> </span>
-                    </a-table>
-
-                    <a-table v-if="index == 3" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
-                        :columns="columns" :data-source="monitorlistWd" :pagination="false">
-                        <span slot="action" slot-scope="text, record"> </span>
-                    </a-table>
-                </div>
-            </div>
+    <div class="center-box" v-if="strType != 'sys_coalseam'">
+      <div class="content-box" v-for="(items, index) in tabList" :key="index">
+        <div class="title">
+          <span class="title-label">{{ items.label }}</span>
+          <span class="details">{{ `${items.details}>>` }}</span>
         </div>
-        <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>
-            <div class="echart-content">
-                <echartLine2 :echartDataWd="echartDataWd"></echartLine2>
-            </div>
+        <div class="content">
+          <a-table
+            v-if="index == 0"
+            ref="table"
+            size="small"
+            :scroll="{ x: 0, y: 273 }"
+            :columns="columns"
+            :data-source="monitorlistYw"
+            :pagination="false"
+          >
+            <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 }"
+          >
+            <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"
+          >
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
         </div>
-        <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>
-            <div class="echart-content">
-                <echartLine2 :echartDataWd="echartDataWd"></echartLine2>
-            </div>
+      </div>
+    </div>
+
+    <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
+      <div class="content-box" v-for="(items, index) in tabLists" :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 ? 160 : 270 }"
+            :columns="columns"
+            :data-source="monitorlistYw"
+            :pagination="false"
+          >
+            <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: listData.fiber.length != 0 ? 160 : 270 }"
+          >
+            <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 ? 160 : 270 }"
+            :columns="columns"
+            :data-source="monitorlistPl"
+            :pagination="false"
+          >
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+
+          <a-table
+            v-if="index == 3"
+            ref="table"
+            size="small"
+            :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
+            :columns="columns"
+            :data-source="monitorlistWd"
+            :pagination="false"
+          >
+            <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="footer-title">
+        <div class="echart-label">光钎测温系统实时温度监测</div>
+      </div>
+      <div class="echart-content">
+        <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="footer-title">
+        <div class="echart-label">光钎测温系统实时温度监测</div>
+      </div>
+      <div class="echart-content">
+        <echartLine2 :echartDataWd="echartDataWd" />
+      </div>
+    </div>
 
-        <!-- 束管监测 -->
-        <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="btn-label">
-                        <span>{{ item.label }}</span>
-                        <span>{{ item.dw }}</span>
-                    </div>
-                    <div class="box-item box-item1">
-                        <span class="text-t">{{ `${item.label1}:` }}</span>
-                        <span class="text-v">{{ item.nd }}</span>
-                    </div>
-                    <div class="box-item box-item2">
-                        <span class="text-t">{{ `${item.label2}:` }}</span>
-                        <span class="text-v">{{ item.time1 }}</span>
-                    </div>
-                    <div class="box-item box-item3">
-                        <span class="text-t">{{ `${item.label3}:` }}</span>
-                        <span class="text-v">{{ item.address }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="echart-box">
-                <div class="title-f">
-                    <div class="title-text">{{ `${type}趋势` }}</div>
-                </div>
-                <div class="echarts-box">
-                    <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName"></echartLine1>
-                </div>
-            </div>
+    <!-- 束管监测 -->
+    <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="btn-label">
+            <span>{{ item.label }}</span>
+            <span>{{ item.dw }}</span>
+          </div>
+          <div class="box-item box-item1">
+            <span class="text-t">{{ `${item.label1}:` }}</span>
+            <span class="text-v">{{ item.nd }}</span>
+          </div>
+          <div class="box-item box-item2">
+            <span class="text-t">{{ `${item.label2}:` }}</span>
+            <span class="text-v">{{ item.time1 }}</span>
+          </div>
+          <div class="box-item box-item3">
+            <span class="text-t">{{ `${item.label3}:` }}</span>
+            <span class="text-v">{{ item.address }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="echart-box">
+        <div class="title-f">
+          <div class="title-text">{{ `${type}趋势` }}</div>
         </div>
+        <div class="echarts-box">
+          <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, reactive, watch, defineProps } from 'vue';
-import { topOutList, tabList, tabLists, columns, } from '../fire.data'
-import imgUrl from '../../../../../assets/images/fire/pie.png'
-import echartLine2 from './common/echartLine2.vue'
-import echartLine1 from './common/echartLine1.vue'
+  import { ref, computed, reactive, watch, defineProps } from 'vue';
+  import { topOutList, tabList, tabLists, columns } from '../fire.data';
+  import imgUrl from '../../../../../assets/images/fire/pie.png';
+  import echartLine2 from './common/echartLine2.vue';
+  import echartLine1 from './common/echartLine1.vue';
 
-let props = defineProps({
+  let props = defineProps({
     listData: Object,
-    strType: String
-});
-
+    strType: String,
+  });
 
-//束管监测-顶部区域数据
-let topContent = reactive({
+  //束管监测-顶部区域数据
+  let topContent = reactive({
     temperature: '0',
     position: '',
     time: '',
     warn: '',
-})
-//束管监测当前密闭参数激活选项
-let activeIndex = ref(0)
-//束管监测当前激活密闭参数类型
-let type = ref('O₂')
-//束管监测密闭参数列表
-let mbList = reactive([
+  });
+  //束管监测当前密闭参数激活选项
+  let activeIndex = ref(0);
+  //束管监测当前激活密闭参数类型
+  let type = ref('O₂');
+  //束管监测密闭参数列表
+  let mbList = reactive([
     {
-        label: 'O₂',
-        dw: '(%)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: 0,
-        time1: '',
-        address: '',
+      label: 'O₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
     },
     {
-        label: 'CO',
-        dw: '(ppm)',
-        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: 'CO₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
     },
     {
-        label: 'CH₄',
-        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: '',
     },
     {
-        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({
+  ]);
+  let echartDataSg1 = reactive({
     xData: [],
     yData: [],
     lengedData: 'O₂',
-    lengedDataName:'(%)'
-    
-})
-let echartDataSgList = reactive<any[]>([])
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
 
-//外因火灾温度监测-图表数据
-let echartDataWd = reactive({
+  //外因火灾温度监测-图表数据
+  let echartDataWd = reactive({
     xData: [],
     maxData: {
-        data: [],
-        lengedData: '实时温度',
+      data: [],
+      lengedData: '实时温度',
     },
-})
-
-//烟雾传感器列表数据
-let monitorlistYw = reactive([])
+  });
 
+  //烟雾传感器列表数据
+  let monitorlistYw = reactive([]);
 
-//火焰传感器列表数据
-let monitorlistHy = reactive([])
+  //火焰传感器列表数据
+  let monitorlistHy = reactive([]);
 
+  //喷淋装置列表数据
+  let monitorlistPl = reactive([]);
 
-//喷淋装置列表数据
-let monitorlistPl = reactive([])
+  //温度传感器列表数据
+  let monitorlistWd = 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;
 
-//束管监测密闭参数选项切换
-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;
+      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
+  }
+
+  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)
-            })
+          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 = '正常'
+          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 ? '较低风险' : 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)
-            })
+          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 = '正常'
+          topContent.temperature = '--';
+          topContent.position = '--';
+          topContent.time = '--';
+          topContent.warn = '正常';
         }
 
         if (val.smoke.length != 0) {
-            val.smoke.forEach(el => {
-                monitorlistYw.push(el)
-            })
+          val.smoke.forEach((el) => {
+            monitorlistYw.push(el);
+          });
         }
 
-
         if (val.fire.length != 0) {
-            val.fire.forEach(el => {
-                monitorlistHy.push(el)
-            })
+          val.fire.forEach((el) => {
+            monitorlistHy.push(el);
+          });
         }
 
         if (val.spray.length != 0) {
-            val.spray.forEach(el => {
-                monitorlistPl.push(el)
-            })
+          val.spray.forEach((el) => {
+            monitorlistPl.push(el);
+          });
         }
 
         if (val.temperature.length != 0) {
-            val.temperature.forEach(el => {
-                monitorlistWd.push(el)
-            })
+          val.temperature.forEach((el) => {
+            monitorlistWd.push(el);
+          });
         }
-
-    }
-
-}, { immediate: true, deep: true })
-
-
+      }
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-.mainWell {
+  .mainWell {
     width: 100%;
     height: 100%;
     padding: 20px;
@@ -420,556 +468,553 @@ watch(() => props.listData, (val) => {
     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%;
+      height: 15%;
+      width: 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(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(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(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(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%;
+        }
 
-            &:nth-child(5) {
-                flex: 0.8;
-                color: #2b87ff;
-                font-size: 14px;
-                height: 100%;
-            }
+        .pic {
+          width: 26%;
+          height: 84%;
 
-            .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;
 
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
+            &:nth-child(1) {
+              padding: 5px 0px;
+              color: #b3b8cc;
             }
 
-            .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(2) {
-                        font-family: 'douyuFont';
-                        font-size: 20px;
-                        color: #3df6ff;
-                    }
-                }
+            &:nth-child(2) {
+              font-family: 'douyuFont';
+              font-size: 20px;
+              color: #3df6ff;
             }
+          }
         }
+      }
 
-        .nav:nth-child(1) .pic {
-            background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
-            background-size: 50% 50%;
-        }
+      .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(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%;
-        }
+      .nav:nth-child(3) .pic {
+        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
 
+      .content-box {
+        display: flex;
 
+        &:nth-child(1) {
+          justify-content: space-around;
+          align-items: center;
+          flex: 2;
+          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-box {
+        .contents {
+          height: 73%;
+
+          &:nth-child(1) {
+            width: 40%;
             display: flex;
+            justify-content: center;
+            align-items: center;
 
-            &:nth-child(1) {
-                justify-content: space-around;
-                align-items: center;
-                flex: 2;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            img {
+              position: relative;
+              width: 23%;
+              height: 100%;
+              background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+              background-size: 50% 50%;
             }
 
-            &:nth-child(2) {
-                flex: 1;
-                justify-content: center;
-                align-items: center;
-                height: 100%;
+            .text {
+              font-family: 'douyuFont';
+              font-size: 36px;
+              margin: 0px 15px;
+              color: #3df6ff;
             }
 
-            .contents {
-                height: 73%;
-
-                &: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: 36px;
-                        margin: 0px 15px;
-                        color: #3df6ff;
-                    }
-
-                    .dw {
-                        font-size: 16px;
-                        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;
-                        }
-                    }
-                }
+            .dw {
+              font-size: 16px;
+              color: #b3b8cc;
             }
+          }
+
+          &:nth-child(2) {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .text {
+              font-size: 18px;
 
-            .text1 {
-                font-size: 18px;
+              .text-label {
                 color: #b3b8cc;
                 font-weight: bold;
+              }
+
+              .text-value {
+                font-family: 'douyuFont';
+                color: #3df6ff;
+                margin-left: 10px;
+              }
             }
+          }
+        }
+
+        .text1 {
+          font-size: 18px;
+          color: #b3b8cc;
+          font-weight: bold;
         }
+      }
     }
 
     .center-box {
-        height: 47%;
-        margin-bottom: 20px;
+      height: 47%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .content-box {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        flex-direction: column;
+        width: 32%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .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%;
+        &:nth-child(2) {
+          margin: 0px 20px;
+        }
 
-            &:nth-child(2) {
-                margin: 0px 20px;
-            }
+        .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-family: 'douyuFont';
+            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-family: 'douyuFont';
-                    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-box1 {
-        height: 70%;
-        margin-bottom: 20px;
+      height: 70%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+
+      .content-box {
         display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        flex-wrap: wrap;
+        flex-direction: column;
+        width: calc(50% - 10px);
+        height: calc(50% - 10px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .content-box {
-            display: flex;
-            flex-direction: column;
-            width: calc(50% - 10px);
-            height: calc(50% - 10px);
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-            background-size: 100% 100%;
+        &:nth-child(1) {
+          margin: 0px 20px 20px 0px;
+        }
 
-            &:nth-child(1) {
-                margin: 0px 20px 20px 0px;
-            }
+        &:nth-child(3) {
+          margin: 0px 20px 0px 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;
+
+          .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%;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+
+      .content-box {
         display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        flex-wrap: wrap;
+        flex-direction: column;
+        width: calc(50% - 10px);
+        height: calc(50% - 10px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .content-box {
-            display: flex;
-            flex-direction: column;
-            width: calc(50% - 10px);
-            height: calc(50% - 10px);
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-            background-size: 100% 100%;
+        &:nth-child(1) {
+          margin: 0px 20px 20px 0px;
+        }
 
-            &:nth-child(1) {
-                margin: 0px 20px 20px 0px;
-            }
+        &:nth-child(3) {
+          margin: 0px 20px 0px 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;
+
+          .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;
         }
+      }
     }
 
     .footer-box {
-        height: calc(38% - 40px);
-        padding: 10px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-box-sizing: border-box;
-        .footer-title {
-            height: 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+      height: calc(38% - 40px);
+      padding: 10px 15px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      .footer-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-            .echart-label {
-                font-family: 'douyuFont';
-                font-size: 16px;
-                color: #fff;
-            }
+        .echart-label {
+          font-family: 'douyuFont';
+          font-size: 16px;
+          color: #fff;
         }
+      }
 
-        .echart-content {
-            height: calc(100% - 30px);
-        }
+      .echart-content {
+        height: calc(100% - 30px);
+      }
     }
 
     .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;
-        .footer-title {
-            height: 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+      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;
+      .footer-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-            .echart-label {
-                font-family: 'douyuFont';
-                font-size: 16px;
-                color: #fff;
-            }
+        .echart-label {
+          font-family: 'douyuFont';
+          font-size: 16px;
+          color: #fff;
         }
+      }
 
-        .echart-content {
-            height: calc(100% - 30px);
-        }
+      .echart-content {
+        height: calc(100% - 30px);
+      }
     }
 
     .content-s {
-        width: 100%;
-        height: 608px;
-        padding: 15px 20px 0px 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        box-sizing: border-box;
+      width: 100%;
+      height: 608px;
+      padding: 15px 20px 0px 20px;
+      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;
+        font-family: 'douyuFont';
+        font-size: 16px;
+        color: #3df6ff;
+      }
+
+      .card-btn {
+        height: 28%;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
 
-        .title-b {
-            height: 30px;
-            line-height: 30px;
-            font-family: 'douyuFont';
+        .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: #3df6ff;
+            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: 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;
+            }
+          }
+
+          .box-item1 {
+            top: 24%;
+          }
+
+          .box-item2 {
+            top: 50%;
+          }
+
+          .box-item3 {
+            top: 75%;
+          }
         }
 
-        .card-btn {
-            height: 28%;
-            margin-bottom: 10px;
+        .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;
+          }
+
+          .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%;
 
-            .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;
-                }
-
-                .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;
-                    }
-
-                    .text-v {
-                        width: 83%;
-                        font-family: 'douyuFont';
-                        font-size: 10px;
-                        color: #3df6ff;
-                        display: flex;
-                        justify-content: flex-end;
-                    }
-                }
-
-
-                .box-item1 {
-                    top: 24%;
-                }
-
-                .box-item2 {
-                    top: 50%;
-                }
-
-                .box-item3 {
-                    top: 75%;
-                }
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
             }
 
-            .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;
-                }
-
-                .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;
-                    }
-
-                    .text-v {
-                        width: 83%;
-                        font-family: 'douyuFont';
-                        font-size: 10px;
-                        color: #3df6ff;
-                        display: flex;
-                        justify-content: flex-end;
-                    }
-                }
-
-                .box-item1 {
-                    top: 19%;
-                }
-
-                .box-item2 {
-                    top: 41%;
-                }
-
-                .box-item3 {
-                    top: 63%;
-                }
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
             }
+          }
+
+          .box-item1 {
+            top: 19%;
+          }
+
+          .box-item2 {
+            top: 41%;
+          }
+
+          .box-item3 {
+            top: 63%;
+          }
         }
+      }
 
-        .echart-box {
-            height: calc(72% - 41px);
-            border: 1px solid #114aac;
+      .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-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: 16px;
-                    color: #3df6ff;
-                }
-            }
+          .title-text {
+            font-family: 'douyuFont';
+            font-size: 16px;
+            color: #3df6ff;
+          }
+        }
 
-            .echarts-box {
-                height: calc(100% - 40px);
-            }
+        .echarts-box {
+          height: calc(100% - 40px);
         }
+      }
     }
-}</style>
+  }
+</style>

src/views/vent/monitorManager/balancePressMonitor/balancePress.data.ts

@@ -6,7 +6,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/beltTunMonitor/beltTun.data.ts

@@ -126,7 +126,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/chamberMonitor/chamber.data.ts

@@ -6,7 +6,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/comment/GroupMonitorTable.vue

@@ -283,7 +283,6 @@
         }
         list.push(resultData1, resultData2);
       });
-      debugger;
       // if (oldVal.length < 1 && selectRowIndex.value == -1) {
       //   // 第一次
       //   setSelectedRowKeys(list[0]['deviceID']);

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

@@ -1,10 +1,13 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情    ${currentTime}`" width="1200px" @ok="handleOk"
-    @cancel="handleCancel">
+  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item"
-          :class="{ 'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
           <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
@@ -25,15 +28,19 @@
           </div>
           <div class="base-item">
             <span class="title">监测区域范围：</span>
-            <span class="value">{{ posMonitor['startArea'] ? posMonitor['startArea'] : '-' }}m - {{ posMonitor['engArea'] ? posMonitor['engArea'] : '-' }}m</span>
+            <span class="value"
+              >{{ posMonitor['startArea'] ? posMonitor['startArea'] : '-' }}m - {{ posMonitor['engArea'] ? posMonitor['engArea'] : '-' }}m</span
+            >
           </div>
           <div class="base-item">
             <span class="title">开启温度：</span>
-            <span class="value">{{ (posMonitor['tempStart'] !== undefined && posMonitor['tempStart'] !== null) ? posMonitor['tempStart'] : '-' }}℃</span>
+            <span class="value"
+              >{{ posMonitor['tempStart'] !== undefined && posMonitor['tempStart'] !== null ? posMonitor['tempStart'] : '-' }}℃</span
+            >
           </div>
           <div class="base-item">
             <span class="title">关闭温度：</span>
-            <span class="value">{{ (posMonitor['tempStop'] !== undefined && posMonitor['tempStop'] !== null) ? posMonitor['tempStop'] : '-' }}℃</span>
+            <span class="value">{{ posMonitor['tempStop'] !== undefined && posMonitor['tempStop'] !== null ? posMonitor['tempStop'] : '-' }}℃</span>
           </div>
         </div>
         <span class="base-title">实时监测参数</span>
@@ -45,16 +52,20 @@
             </div>
             <div class="item-container">
               <div class="title">平均温度</div>
-              <div class="value">{{ (posMonitor['tempAvg'] !== undefined && posMonitor['tempAvg'] !== null) ? posMonitor['tempAvg'] : '-' }} <span>℃</span></div>
+              <div class="value"
+                >{{ posMonitor['tempAvg'] !== undefined && posMonitor['tempAvg'] !== null ? posMonitor['tempAvg'] : '-' }} <span>℃</span></div
+              >
             </div>
           </div>
-           <div class="top-item">
+          <div class="top-item">
             <div class="icon">
               <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
             </div>
             <div class="item-container">
               <div class="title">最高温度</div>
-              <div class="value">{{ (posMonitor['tempMax'] !== undefined && posMonitor['tempMax'] !== null) ? posMonitor['tempMax'] : '-' }} <span>℃</span> </div>
+              <div class="value"
+                >{{ posMonitor['tempMax'] !== undefined && posMonitor['tempMax'] !== null ? posMonitor['tempMax'] : '-' }} <span>℃</span>
+              </div>
             </div>
           </div>
           <div class="top-item">
@@ -63,7 +74,9 @@
             </div>
             <div class="item-container">
               <div class="title">最低温度</div>
-              <div class="value">{{ (posMonitor['tempMin'] !== undefined && posMonitor['tempMin'] !== null) ? posMonitor['tempMin'] : '-' }} <span>℃</span></div>
+              <div class="value"
+                >{{ posMonitor['tempMin'] !== undefined && posMonitor['tempMin'] !== null ? posMonitor['tempMin'] : '-' }} <span>℃</span></div
+              >
             </div>
           </div>
           <div class="top-item warning-box">
@@ -72,428 +85,511 @@
             </div>
             <div class="item-container">
               <div class="title">设备状态</div>
-              <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线'}}</div>
+              <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线' }}</div>
             </div>
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="temp" style="width: 62px; height: 38px; margin-top: 10px;" />
+              <SvgIcon class="icon-style" name="temp" style="width: 62px; height: 38px; margin-top: 10px" />
             </div>
             <div class="item-container">
-              <div class="title">温度监测<span :class="{'state-close': posMonitor['devicesSTAT'] == 0, 'state-open': posMonitor['devicesSTAT'] == 1, 'state-offline': posMonitor['devicesSTAT'] == 2 }">({{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : posMonitor['devicesSTAT'] == 2 ? '离线' :'' }})</span></div>
-              <div class="value" :class="{'alarm-value': posMonitor['isWarn'] == 2 }">{{ (posMonitor['tempRealtime'] !== undefined && posMonitor['tempRealtime'] !== null) ? posMonitor['tempRealtime'] : '-'
-              }} <span>℃</span> </div>
+              <div class="title"
+                >温度监测<span
+                  :class="{
+                    'state-close': posMonitor['devicesSTAT'] == 0,
+                    'state-open': posMonitor['devicesSTAT'] == 1,
+                    'state-offline': posMonitor['devicesSTAT'] == 2,
+                  }"
+                  >({{
+                    posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : posMonitor['devicesSTAT'] == 2 ? '离线' : ''
+                  }})</span
+                ></div
+              >
+              <div class="value" :class="{ 'alarm-value': posMonitor['isWarn'] == 2 }"
+                >{{ posMonitor['tempRealtime'] !== undefined && posMonitor['tempRealtime'] !== null ? posMonitor['tempRealtime'] : '-' }}
+                <span>℃</span>
+              </div>
             </div>
-            <div class="rang">报警阈值：小于<span class="rang-data">{{ posMonitor['warmLow'] ? posMonitor['warmLow'] : '-' }}</span>或大于<span class="rang-data">{{ posMonitor['warnUp'] ? posMonitor['warnUp'] : '-' }}</span></div>
+            <div class="rang"
+              >报警阈值：小于<span class="rang-data">{{ posMonitor['warmLow'] ? posMonitor['warmLow'] : '-' }}</span
+              >或大于<span class="rang-data">{{ posMonitor['warnUp'] ? posMonitor['warnUp'] : '-' }}</span></div
+            >
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px;" />
+              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
             </div>
             <div class="item-container">
-              <div class="title">CO监测<span :class="{ 'state-close': posMonitor['COSensorSTAT'] == 0, 'state-open': posMonitor['COSensorSTAT'] == 1, 'state-offline': posMonitor['COSensorSTAT'] == 2 }">({{ posMonitor['COSensorSTAT'] == 0 ? '关闭' : posMonitor['COSensorSTAT'] == 1 ? '开启' : posMonitor['COSensorSTAT'] == 2 ? '离线' : '' }})</span></div>
-              <div class="value" :class="{ 'alarm-value': posMonitor['COSensorStatus'] == 2 }">{{ (posMonitor['CORealtime'] !== undefined && posMonitor['CORealtime'] !== null) ? posMonitor['CORealtime'] : '-'
-              }} <span>ppm</span> </div>
+              <div class="title"
+                >CO监测<span
+                  :class="{
+                    'state-close': posMonitor['COSensorSTAT'] == 0,
+                    'state-open': posMonitor['COSensorSTAT'] == 1,
+                    'state-offline': posMonitor['COSensorSTAT'] == 2,
+                  }"
+                  >({{
+                    posMonitor['COSensorSTAT'] == 0
+                      ? '关闭'
+                      : posMonitor['COSensorSTAT'] == 1
+                      ? '开启'
+                      : posMonitor['COSensorSTAT'] == 2
+                      ? '离线'
+                      : ''
+                  }})</span
+                ></div
+              >
+              <div class="value" :class="{ 'alarm-value': posMonitor['COSensorStatus'] == 2 }"
+                >{{ posMonitor['CORealtime'] !== undefined && posMonitor['CORealtime'] !== null ? posMonitor['CORealtime'] : '-' }} <span>ppm</span>
+              </div>
             </div>
-            <div class="rang">报警阈值：<span class="rang-data">{{ posMonitor['COWarn'] ? posMonitor['COWarn'] : '-' }}</span></div>
+            <div class="rang"
+              >报警阈值：<span class="rang-data">{{ posMonitor['COWarn'] ? posMonitor['COWarn'] : '-' }}</span></div
+            >
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="smoke" style="width: 72px; height: 46px;" />
+              <SvgIcon class="icon-style" name="smoke" style="width: 72px; height: 46px" />
             </div>
             <div class="item-container">
-              <div class="title">烟雾监测<span :class="{ 'state-close': posMonitor['SmokeSTAT485'] == 0, 'state-open': posMonitor['SmokeSTAT485'] == 1, 'state-offline': posMonitor['SmokeSTAT485'] == 2 }">({{ posMonitor['SmokeSTAT485'] == 0 ? '关闭' : posMonitor['SmokeSTAT485'] == 1 ? '开启' : posMonitor['SmokeSTAT485'] == 2 ? '离线' : '' }})</span></div>
-              <div class="value" :class="{ 'alarm-value': posMonitor['SmokeStatus485'] == 2 }">{{ (posMonitor['SmokeRealtime485'] !== undefined && posMonitor['SmokeRealtime485'] !== null) ? posMonitor['SmokeRealtime485'] : '-' }} <span>%</span></div>
+              <div class="title"
+                >烟雾监测<span
+                  :class="{
+                    'state-close': posMonitor['SmokeSTAT485'] == 0,
+                    'state-open': posMonitor['SmokeSTAT485'] == 1,
+                    'state-offline': posMonitor['SmokeSTAT485'] == 2,
+                  }"
+                  >({{
+                    posMonitor['SmokeSTAT485'] == 0
+                      ? '关闭'
+                      : posMonitor['SmokeSTAT485'] == 1
+                      ? '开启'
+                      : posMonitor['SmokeSTAT485'] == 2
+                      ? '离线'
+                      : ''
+                  }})</span
+                ></div
+              >
+              <div class="value" :class="{ 'alarm-value': posMonitor['SmokeStatus485'] == 2 }"
+                >{{ posMonitor['SmokeRealtime485'] !== undefined && posMonitor['SmokeRealtime485'] !== null ? posMonitor['SmokeRealtime485'] : '-' }}
+                <span>%</span></div
+              >
             </div>
-            <div class="rang">报警阈值：<span class="rang-data">{{ posMonitor['SmokeWarn485'] ? posMonitor['SmokeWarn485'] : '-' }}</span></div>
+            <div class="rang"
+              >报警阈值：<span class="rang-data">{{ posMonitor['SmokeWarn485'] ? posMonitor['SmokeWarn485'] : '-' }}</span></div
+            >
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="pressure" style="width: 62px; height: 38px;" />
+              <SvgIcon class="icon-style" name="pressure" style="width: 62px; height: 38px" />
             </div>
             <div class="item-container">
-              <div class="title">压力监测<span :class="{ 'state-close': posMonitor['PressureSensorSTAT'] == 0, 'state-open': posMonitor['PressureSensorSTAT'] == 1, 'state-offline': posMonitor['PressureSensorSTAT'] == 2 }">({{ posMonitor['PressureSensorSTAT'] == 0 ? '关闭' : posMonitor['PressureSensorSTAT'] == 1 ? '开启' : posMonitor['PressureSensorSTAT'] == 2 ? '离线' : '' }})</span></div>
-              <div class="value" :class="{ 'alarm-value': posMonitor['PressureSensorStatus'] == 2 }">{{ (posMonitor['PressureRealtime'] !== undefined && posMonitor['PressureRealtime'] !== null) ? posMonitor['PressureRealtime'] : '-' }} <span>%</span></div>
+              <div class="title"
+                >压力监测<span
+                  :class="{
+                    'state-close': posMonitor['PressureSensorSTAT'] == 0,
+                    'state-open': posMonitor['PressureSensorSTAT'] == 1,
+                    'state-offline': posMonitor['PressureSensorSTAT'] == 2,
+                  }"
+                  >({{
+                    posMonitor['PressureSensorSTAT'] == 0
+                      ? '关闭'
+                      : posMonitor['PressureSensorSTAT'] == 1
+                      ? '开启'
+                      : posMonitor['PressureSensorSTAT'] == 2
+                      ? '离线'
+                      : ''
+                  }})</span
+                ></div
+              >
+              <div class="value" :class="{ 'alarm-value': posMonitor['PressureSensorStatus'] == 2 }"
+                >{{ posMonitor['PressureRealtime'] !== undefined && posMonitor['PressureRealtime'] !== null ? posMonitor['PressureRealtime'] : '-' }}
+                <span>%</span></div
+              >
             </div>
-            <div class="rang">报警阈值：<span class="rang-data">{{ posMonitor['PressureWarn'] ? posMonitor['PressureWarn'] : '-' }}</span></div>
+            <div class="rang"
+              >报警阈值：<span class="rang-data">{{ posMonitor['PressureWarn'] ? posMonitor['PressureWarn'] : '-' }}</span></div
+            >
           </div>
         </div>
         <div class="right-bottom">
           <span class="base-title">设备监测曲线</span>
-          <a-table
-            size="small"
-            :columns="ballvalveColumns"
-            :data-source="[]"
-            :pagination="false"
-            :scroll="{ y: 300 }"
-          />
+          <a-table size="small" :columns="ballvalveColumns" :data-source="[]" :pagination="false" :scroll="{ y: 300 }" />
         </div>
       </div>
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import dayjs from 'dayjs'
-import { ballvalveColumns } from '../device.data'
-
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
-  props: {
-    dataSource: { type: Array },
-    activeID: { type: String }
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([])
-    const historyList = ref<any[]>([])
-    const posList = ref<any[]>([])
-    const posMonitor = shallowRef({})
-
-
-    const [register, { setModalProps, closeModal }] = useModalInner();
-
-    function handleVisibleChange(visible) {
-      if (visible) {
+  import { defineComponent, ref, watch, shallowRef } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
+  import { ballvalveColumns } from '../device.data';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const historyList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
+
+      const [register, { setModalProps, closeModal }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
-
-    // 选择监测
-    function selectDevice(id) {
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-      setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
-
-    function handleOk(e) {
-      e.preventDefault()
-      closeModal()
-    }
-
-    function handleCancel(e) {
-      e.preventDefault()
-      closeModal()
-    }
 
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      if (newActiveID != oldActiveID) {
-        activeDeviceID.value = newActiveID as string
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
       }
-      deviceList.value = newDataSource?.filter((item: any, index) => {
-        if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-          activeDeviceID.value = item.deviceID
-          posMonitor.value = Object.assign(item, item.readData)
-          historyList.value = item['history']
-        }
-        item.readTime = item.readTime?.substring(11)
-        return item
-      })
-    })
 
-    return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, ballvalveColumns,  deviceList, historyList, activeDeviceID, posMonitor };
-  },
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-});
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        deviceList.value = newDataSource?.filter((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            activeDeviceID.value = item.deviceID;
+            posMonitor.value = Object.assign(item, item.readData);
+            historyList.value = item['history'];
+          }
+          item.readTime = item.readTime?.substring(11);
+          return item;
+        });
+      });
+
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        ballvalveColumns,
+        deviceList,
+        historyList,
+        activeDeviceID,
+        posMonitor,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-.fiber-modal {
-  width: 100%;
-  height: 650px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .modal-left {
-    width: 200px;
-    height: 100%;
-    overflow-y: auto;
-    background: #ffffff11;
-    padding: 5px;
-    border-radius: 5px;
-
-    .active-device-title {
-      color: aqua;
-    }
-
-    .link-item {
-      position: relative;
-      cursor: pointer;
-      line-height: 30px;
-      padding-left: 30px;
-
-      span:hover {
-        color: #89ffff;
+  .fiber-modal {
+    width: 100%;
+    height: 650px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .active-device-title {
+        color: aqua;
       }
 
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 8px;
-        height: 8px;
-        top: 12px;
-        left: 10px;
-        transform: rotateZ(45deg) skew(10deg, 10deg);
-        background: #45d3fd;
-      }
-    }
-  }
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
+
+        span:hover {
+          color: #89ffff;
+        }
 
-  .modal-right {
-    width: calc(100% - 220px);
-    overflow-y: auto;
-    .base-title {
-      line-height: 32px;
-      position: relative;
-      padding-left: 20px;
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 4px;
-        height: 12px;
-        top: 4px;
-        left: 10px;
-        background: #45d3fd;
-        border-radius: 4px;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
       }
     }
 
-    .base-box{
-      width: 100%;
-      height: 100px;
-      font-size: 14px;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      border: 1px solid rgba(25, 237, 255, .4);
-      box-shadow: inset 0 0 10px rgba(0, 197, 255, .3);
-      background: rgba(0, 0, 0, .06666666666666667);
-      padding: 15px 20px;
-      margin-bottom: 10px;
-      .base-item{
-        width: 33%;
-        line-height: 30px;
-        span{
-          display: inline-block;
-        }
-        .title{
-          width: 120px;
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
 
-        }
-        .value{
-          width: 100px;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
         }
       }
-    }
 
-    .right-top {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      margin-bottom: 10px;
-      .top-item {
-        width: 220px;
+      .base-box {
+        width: 100%;
         height: 100px;
+        font-size: 14px;
         display: flex;
         flex-direction: row;
-        justify-content: center;
-        border: 1px solid rgba(25, 237, 255, .4);
-        box-shadow: inset 0 0 10px rgba(0, 197, 255, .6);
-        background: rgba(0, 0, 0, .06666666666666667);
-        padding-top: 20px;
-        margin: 10px 0;
-
-        .icon {
-          margin-right: 10px;
-          margin-top: 5px;
-          color: #FDB146;
+        flex-wrap: wrap;
+        border: 1px solid rgba(25, 237, 255, 0.4);
+        box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.3);
+        background: rgba(0, 0, 0, 0.06666666666666667);
+        padding: 15px 20px;
+        margin-bottom: 10px;
+        .base-item {
+          width: 33%;
+          line-height: 30px;
+          span {
+            display: inline-block;
+          }
+          .title {
+            width: 120px;
+          }
+          .value {
+            width: 100px;
+          }
         }
+      }
 
-        .item-container {
-          width: 100px;
+      .right-top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-bottom: 10px;
+        .top-item {
+          width: 220px;
+          height: 100px;
           display: flex;
-          flex-direction: column;
+          flex-direction: row;
           justify-content: center;
-      
-          div {
-            text-align: center;
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
+          padding-top: 20px;
+          margin: 10px 0;
+
+          .icon {
+            margin-right: 10px;
+            margin-top: 5px;
+            color: #fdb146;
           }
 
-          .title {
-            font-size: 18px;
-          }
+          .item-container {
+            width: 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
 
-          .value {
-            text-shadow: 0 0 25px #00fbfe;
-            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-            font-style: normal;
-            background-size: cover;
-            font-family: electronicFont;
-            font-size: 30px;
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            position: relative;
-            top: -8px;
-
-            span {
-              font-family: Arial, Helvetica, sans-serif;
+            div {
+              text-align: center;
+            }
+
+            .title {
               font-size: 18px;
-              color: aliceblue;
             }
 
+            .value {
+              text-shadow: 0 0 25px #00fbfe;
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+              font-style: normal;
+              background-size: cover;
+              font-family: electronicFont;
+              font-size: 30px;
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+              position: relative;
+              top: -8px;
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 18px;
+                color: aliceblue;
+              }
+            }
+            .alarm-value {
+              text-shadow: 0 0 25px #fe1500;
+              background: linear-gradient(0deg, #fd4545, #fd5e45, #dd7461, #dd6161);
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
           }
-          .alarm-value{
-            text-shadow: 0 0 25px #fe1500;
-            background: linear-gradient(0deg, #fd4545, #fd5e45, #dd7461, #dd6161);
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-          }
-        }
-      }
-      .item-data{
-        position: relative;
-        height: 130px;
-        padding-top: 0;
-        .icon{
-          position: absolute;
-          left: 20px;
-          top: 30px;
-          // margin-right: 30px;
-          // margin-top: 25px;
         }
-        .item-container{
-          width: 140px;
-          position: absolute;
-          padding-top: 18px;
-          justify-content: flex-start;
-          right: 0;
-          .value{
-            top: 0px;
-          }
-          .state-close{
-            color: #b9b9b9;
+        .item-data {
+          position: relative;
+          height: 130px;
+          padding-top: 0;
+          .icon {
+            position: absolute;
+            left: 20px;
+            top: 30px;
+            // margin-right: 30px;
+            // margin-top: 25px;
           }
-          .state-open{
-            color: #00ff88;
-          }
-          .state-offline{
-            color: #ffd000;
+          .item-container {
+            width: 140px;
+            position: absolute;
+            padding-top: 18px;
+            justify-content: flex-start;
+            right: 0;
+            .value {
+              top: 0px;
+            }
+            .state-close {
+              color: #b9b9b9;
+            }
+            .state-open {
+              color: #00ff88;
+            }
+            .state-offline {
+              color: #ffd000;
+            }
           }
-        }
-        .rang{
-          position: absolute;
-          color: #ff8331;
-          bottom: 10px;
-          right: 20px;
-          .rang-data{
-            padding: 0 5px;
+          .rang {
+            position: absolute;
+            color: #ff8331;
+            bottom: 10px;
+            right: 20px;
+            .rang-data {
+              padding: 0 5px;
+            }
           }
         }
-      }
 
-      .warning-box {
-        padding-top: 0px;
+        .warning-box {
+          padding-top: 0px;
 
-        .icon {
-          margin-top: 20px;
+          .icon {
+            margin-top: 20px;
 
-          :deep(.icon-style) {
-            width: auto;
-            color: #FDB146;
+            :deep(.icon-style) {
+              width: auto;
+              color: #fdb146;
+            }
           }
-        }
 
-        .warning-value {
-          font-size: 18px;
-          color: #61ddb1;
+          .warning-value {
+            font-size: 18px;
+            color: #61ddb1;
+          }
         }
       }
-    }
 
-    .right-center {
-      margin-top: 20px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+      .right-center {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
 
-      .table-box {
-        position: relative;
-        width: 500px;
-        height: 250px;
-      }
+        .table-box {
+          position: relative;
+          width: 500px;
+          height: 250px;
+        }
 
-      .warning-box {
-        width: calc(100% - 520px);
+        .warning-box {
+          width: calc(100% - 520px);
 
-        .warning-container {
-          width: 100%;
-          height: convert;
-          background: #009acd00;
+          .warning-container {
+            width: 100%;
+            height: convert;
+            background: #009acd00;
 
-          :deep(.dv-scroll-board) {
-            .row-item {
-              height: 40px !important;
-              line-height: 40px !important;
-            }
+            :deep(.dv-scroll-board) {
+              .row-item {
+                height: 40px !important;
+                line-height: 40px !important;
+              }
 
-            .header-item {
-              border-top: 1px solid #91e9fe !important;
-              border-bottom: 1px solid #91e9fe !important;
+              .header-item {
+                border-top: 1px solid #91e9fe !important;
+                border-bottom: 1px solid #91e9fe !important;
+              }
             }
           }
-
         }
       }
-    }
 
-    .right-bottom {
-      margin-top: 20px;
+      .right-bottom {
+        margin-top: 20px;
 
-      .echarts-box {
-        width: 100%;
-        height: 320px;
-        position: relative;
+        .echarts-box {
+          width: 100%;
+          height: 320px;
+          position: relative;
 
-        .echarts-line {
-          width: calc(100% + 80px);
-          position: absolute
+          .echarts-line {
+            width: calc(100% + 80px);
+            position: absolute;
+          }
         }
       }
     }
   }
-}
 
-:deep(.zxm-table-body) {
-  border: 1px solid rgba(57, 232, 255, 0.2) !important;
+  :deep(.zxm-table-body) {
+    border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-  .zxm-table-tbody>tr>td {
-    border: none !important;
+    .zxm-table-tbody > tr > td {
+      border: none !important;
+    }
   }
-}
 
-:deep(.zxm-table-cell) {
-  border-right: none !important;
-}</style>
+  :deep(.zxm-table-cell) {
+    border-right: none !important;
+  }
+</style>

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

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

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

@@ -1,9 +1,14 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel" >
+  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item" :class="{'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
-          <span class="" @click="selectDevice(device.deviceID)">{{ device.stationname }}</span>
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
+          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
       <div class="modal-right">
@@ -48,18 +53,16 @@
         <div class="right-center">
           <div class="table-box">
             <span class="base-title">测点监测详情</span>
-            <a-table
-              size="small"
-              :columns="columns"
-              :data-source="posList"
-              :pagination="false"
-              :scroll="{ y: 200 }"
-            />
+            <a-table size="small" :columns="columns" :data-source="posList" :pagination="false" :scroll="{ y: 200 }" />
           </div>
           <div class="warning-box">
             <span class="base-title">预警历史详情</span>
             <div class="warning-container">
-              <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33;" />
+              <dv-scroll-board
+                ref="scrollBoard"
+                :config="warningConfig"
+                style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33"
+              />
             </div>
           </div>
         </div>
@@ -72,7 +75,8 @@
               height="100%"
               :chartsColumns="chartsColumns"
               :option="echatsOption"
-              chartsType="listMonitor" />
+              chartsType="listMonitor"
+            />
           </div>
         </div>
       </div>
@@ -80,176 +84,191 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import dayjs from 'dayjs'
+  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
 
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
-  props: {
-    dataSource: {type: Array},
-    activeID: {type: String}
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([])
-    const posList = ref<any[]>([])
-    const posMonitor = shallowRef({})
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
 
-    const echatsOption = {
-      grid: {
-        top: '20%',
-        left: '2px',
-        right: '10px',
-        bottom: '3%',
-        containLabel: true
-      },
-      toolbox: {
-        feature: {}
-      }
-    }
+      const echatsOption = {
+        grid: {
+          top: '20%',
+          left: '2px',
+          right: '10px',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
 
-    const chartsColumns = [
-      {
-        legend: '测点温度',
-        seriesName: '(℃)',
-        ymax: 200,
-        yname: '℃',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'value',
-      },
-    ]
+      const chartsColumns = [
+        {
+          legend: '测点温度',
+          seriesName: '(℃)',
+          ymax: 200,
+          yname: '℃',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'value',
+        },
+      ];
 
-    const columns = [
-      {
-        title: '安装位置',
-        dataIndex: 'position',
-        width: 60,
-        align: 'center',
-        customRender: ({ index }) => {
-          return `测点${index}`
-        }
-      },
-      {
-        title: '安装距离(m)',
-        dataIndex: 'pos',
-        align: 'center',
-        width: 60,
-      },
-      {
-        title: '测点温度',
-        dataIndex: 'value',
-        align: 'center',
-        width: 50,
-      },
-      {
-        title: '测点状态',
-        dataIndex: 'state',
-        align: 'center',
-        width: 50,
-        customRender: () => {
-          return `正常`
-        }
-      },
-    ];
+      const columns = [
+        {
+          title: '安装位置',
+          dataIndex: 'position',
+          width: 60,
+          align: 'center',
+          customRender: ({ index }) => {
+            return `测点${index}`;
+          },
+        },
+        {
+          title: '安装距离(m)',
+          dataIndex: 'pos',
+          align: 'center',
+          width: 60,
+        },
+        {
+          title: '测点温度',
+          dataIndex: 'value',
+          align: 'center',
+          width: 50,
+        },
+        {
+          title: '测点状态',
+          dataIndex: 'state',
+          align: 'center',
+          width: 50,
+          customRender: () => {
+            return `正常`;
+          },
+        },
+      ];
+
+      const warningConfig = reactive({
+        header: ['测点', '温度', '预警信息'],
+        data: [
+          ['测点6', '318℃', '严重报警'],
+          ['测点43', '142℃', '一般预警'],
+          ['测点23', '167℃', '一般预警'],
+          ['测点6', '198℃', '超高预警'],
+          ['测点65', '197℃', '超高预警'],
+          ['测点78', '154℃', '一般预警'],
+          ['测点61', '104℃', '一般预警'],
+          ['测点87', '150℃', '一般信息'],
+        ],
+        index: false,
+        columnWidth: [150],
+        headerHeight: 38,
+        headerBGC: '#3d9dd45d',
+        oddRowBGC: '#009acd10',
+        evenRowBGC: '#009acd05',
+        align: ['center', 'center', 'center'],
+      });
 
-    const warningConfig = reactive({
-      header: ['测点', '温度', '预警信息'],
-      data: [
-        ['测点6', '318℃', '严重报警'],
-        ['测点43', '142℃', '一般预警'],
-        ['测点23', '167℃', '一版预警'],
-        ['测点6', '198℃', '超高预警'],
-        ['测点65', '197℃', '超高预警'],
-        ['测点78', '154℃', '一般预警'],
-        ['测点61', '104℃', '一般预警'],
-        ['测点87', '150℃', '一般信息'],
-      ],
-      index: false,
-      columnWidth: [150],
-      headerHeight: 38,
-      headerBGC: '#3d9dd45d',
-      oddRowBGC: '#009acd10',
-      evenRowBGC: '#009acd05',
-      align: ['center', 'center', 'center'],
-    });
-    
-    const [register, { setModalProps, closeModal }] = useModalInner();
+      const [register, { setModalProps, closeModal }] = useModalInner();
 
-    function handleVisibleChange(visible) {
-      if (visible) {
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
 
-    // 选择监测
-    function selectDevice (id){
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-       setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
-
-    function handleOk(e) {
-      e.preventDefault()
-      closeModal()
-    }
-
-    function handleCancel(e) {
-      e.preventDefault()
-      closeModal()
-    }
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      deviceList.value = newDataSource as any[]
-      if(newActiveID != oldActiveID){
-        activeDeviceID.value = newActiveID as string
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
       }
-      newDataSource?.forEach((item:any, index) => {
-        if((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value){
-          activeDeviceID.value = item.deviceID
-          if(item.readData.fibreTemperature){
-            const list = JSON.parse(item.readData.fibreTemperature)
-            if (list.length > 0) posList.value = list
-          }
-          posMonitor.value = item.readData
+
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        deviceList.value = newDataSource as any[];
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
         }
-      })
-    })
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            activeDeviceID.value = item.deviceID;
+            if (item.readData.fibreTemperature) {
+              const list = JSON.parse(item.readData.fibreTemperature);
+              if (list.length > 0) posList.value = list;
+            }
+            posMonitor.value = item.readData;
+          }
+        });
+      });
 
-    return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, deviceList, activeDeviceID, posMonitor, echatsOption, posList, chartsColumns, columns, warningConfig };
-  },
-  
-});
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+        columns,
+        warningConfig,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-  .fiber-modal{
+  .fiber-modal {
     width: 100%;
     height: 650px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    
-    .modal-left{
+
+    .modal-left {
       width: 200px;
       height: 100%;
       overflow-y: auto;
@@ -259,15 +278,15 @@ export default defineComponent({
       .active-device-title {
         color: aqua;
       }
-      .link-item{
+      .link-item {
         position: relative;
         cursor: pointer;
         line-height: 30px;
         padding-left: 30px;
-        span:hover{
+        span:hover {
           color: #89ffff;
         }
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -280,14 +299,14 @@ export default defineComponent({
         }
       }
     }
-    .modal-right{
+    .modal-right {
       width: calc(100% - 220px);
       overflow-y: auto;
-      .base-title{
+      .base-title {
         line-height: 32px;
         position: relative;
         padding-left: 20px;
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -299,40 +318,40 @@ export default defineComponent({
           border-radius: 4px;
         }
       }
-      .right-top{
+      .right-top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin-bottom: 10px;
-        .top-item{
+        .top-item {
           width: 200px;
           height: 80px;
           display: flex;
           flex-direction: row;
           justify-content: center;
-          border: 1px solid rgba(25,237,255,.4);
-          box-shadow: inset 0 0 10px rgba(0,197,255,.6);
-          background: rgba(0,0,0,.06666666666666667);
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
           padding-top: 16px;
-          .icon{
+          .icon {
             margin-right: 10px;
             margin-top: 5px;
-            color: #FDB146;
+            color: #fdb146;
           }
-          .item-container{
+          .item-container {
             width: 100px;
             display: flex;
             flex-direction: column;
             justify-content: center;
-            div{
+            div {
               text-align: center;
             }
-            .title{
+            .title {
               font-size: 18px;
             }
-            .value{
+            .value {
               text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient( 0deg,#45d3fd, #45d3fd, #61ddb1,#61ddb1);
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
               font-style: normal;
               background-size: cover;
               font-family: electronicFont;
@@ -342,78 +361,73 @@ export default defineComponent({
               -webkit-text-fill-color: transparent;
               position: relative;
               top: -8px;
-              span{
+              span {
                 font-family: Arial, Helvetica, sans-serif;
                 font-size: 18px;
                 color: aliceblue;
               }
-              
             }
-            
           }
         }
-        .warning-box{
+        .warning-box {
           padding-top: 0px;
-          .icon{
+          .icon {
             margin-top: 20px;
-            .icon-style{
-              color: #FDB146;
+            .icon-style {
+              color: #fdb146;
             }
           }
-          .warning-value{
+          .warning-value {
             font-size: 18px;
             color: #61ddb1;
           }
         }
       }
-      .right-center{
+      .right-center {
         margin-top: 20px;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        .table-box{
+        .table-box {
           position: relative;
           width: 500px;
           height: 250px;
         }
-        .warning-box{
+        .warning-box {
           width: calc(100% - 520px);
-          .warning-container{
+          .warning-container {
             width: 100%;
             height: convert;
             background: #009acd00;
-            :deep(.dv-scroll-board){
-              .row-item{
+            :deep(.dv-scroll-board) {
+              .row-item {
                 height: 40px !important;
                 line-height: 40px !important;
               }
-              .header-item{
+              .header-item {
                 border-top: 1px solid #91e9fe !important;
                 border-bottom: 1px solid #91e9fe !important;
               }
             }
-
           }
         }
       }
-      .right-bottom{
+      .right-bottom {
         margin-top: 20px;
-        .echarts-box{
+        .echarts-box {
           width: 100%;
           height: 230px;
         }
       }
-
-      
     }
   }
-  :deep(.zxm-table-body){
+  :deep(.zxm-table-body) {
     border: 1px solid rgba(57, 232, 255, 0.2) !important;
-    .zxm-table-tbody > tr > td{
+    .zxm-table-tbody > tr > td {
       border: none !important;
     }
   }
-  :deep(.zxm-table-cell){
+  :deep(.zxm-table-cell) {
     border-right: none !important;
   }
 </style>

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

@@ -5,7 +5,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/gateMonitor/gate.threejs.two.ss.ts

@@ -517,7 +517,6 @@ class FmTwoSs {
     this.group.name = this.modelName;
     return new Promise((resolve) => {
       this.model.setGLTFModel(['fmTwoSs'], this.group).then(() => {
-        debugger;
         this.setModalPosition();
         // 初始化左右摇摆动画;
         this.initAnimation();

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

@@ -368,7 +368,6 @@
 
   // 播放动画
   function playAnimation(handlerState) {
-    debugger;
     switch (handlerState) {
       case 1: // 打开前门
         if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
@@ -466,7 +465,6 @@
   }
 
   function handleOK(passWord, handlerState) {
-    debugger;
     // if (passWord !== '123456') {
     //   message.warning('密码不正确，请重新输入');
     //   return;
@@ -492,7 +490,6 @@
       masterComputer: selectData.masterComputer,
     };
     let handler = () => {};
-    debugger;
     switch (handlerState) {
       case '1': // 打开前门
         if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {

src/views/vent/monitorManager/groutMonitor/grout.data.ts

@@ -7,7 +7,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/nitrogen/components/nitrogenHome1.vue

@@ -148,8 +148,8 @@
   // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataJj';
   // import type { State } from '../nitrogen.dataJj';
   // 布尔台
-  // import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } from '../nitrogen.dataBet';
-  // import type { State } from '../nitrogen.dataBet';
+  import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } from '../nitrogen.dataBet';
+  import type { State } from '../nitrogen.dataBet';
   // 活鸡兔
   // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataHjt';
   // import type { State } from '../nitrogen.dataHjt';
@@ -166,13 +166,13 @@
   // } from '../nitrogen.dataDlt';
   // import type { State } from '../nitrogen.dataDlt';
   // 窑街三矿
-  import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
-  import type { State } from '../nitrogen.dataYJ';
+  // import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
+  // import type { State } from '../nitrogen.dataYJ';
 
   import { formatNum } from '/@/utils/ventutil';
 
   const loading = ref(true);
-  const monitorDataGroupFlag = ref(1);
+  const monitorDataGroupFlag = ref(0);
   const monitorDataGroup = ref<Number[]>([]);
   const kyjs = ref<string[]>([]);
   const cqgs = ref<string[]>([]);

src/views/vent/monitorManager/nitrogen/nitrogen.dishang.threejs.ts

@@ -258,11 +258,11 @@ class Nitrogen {
       }
       this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
         this.singGltf = gltf[0];
+        resolve(null);
         this.setModal(monitorDataGroup.length);
         this.addCssText(monitorDataGroup);
         // this.addLight();
         this.group.add(this.cssGroupParent);
-        resolve(null);
       });
     });
   }

src/views/vent/monitorManager/nitrogen/nitrogen.threejs.ts

@@ -147,7 +147,7 @@ export const destroy = () => {
     compressorObjArr.forEach((compressorObj) => {
       compressorObj?.destroy();
     });
-
+    compressorObjArr.length = 0;
     group = undefined;
     model.destroy();
     model = undefined;

src/views/vent/monitorManager/obfurageMonitor/obfurage.data.ts

@@ -6,7 +6,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceHome.vue

@@ -260,7 +260,7 @@ async function getDataSource(systemID) {
     }
     loading.value = false;
   }
-  workFaceHistorySource.value = res['sysInfo']['history']
+  workFaceHistorySource.value = res['surface_history'][0]
   workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
   warnInfo.dustS = { warningList: res['warnInfo']['dustS']['devices'] || [], dataList: initWarningData(res['warnInfo']['dustS']['devices']) }
   warnInfo.fireS = { warningList: res['warnInfo']['fireS']['devices'] || [], dataList: initWarningData(res['warnInfo']['fireS']['devices']) }

src/views/vent/monitorManager/tunFaceMonitor/tunFace.data.ts

@@ -191,7 +191,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/workFaceMonitor/workFace.data.ts

@@ -153,7 +153,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

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

@@ -53,8 +53,8 @@
         height: '100%',
         document: {
           title: '文档管理',
-          // url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-          url: `${window.location.origin}:9050/ventanaly-sharefile/fileServer/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
+          // url: `${window.location.origin}:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
           fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
           key: '',
           lang: 'zh-CN',
@@ -68,8 +68,8 @@
         editorConfig: {
           lang: 'zh-CN',
           mode: 'edit', //view：只读且可复制内容，edit：可编辑
-          // callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-          callbackUrl: `${window.location.origin}:9050/ventanaly-sharefile/fileServer/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
+          // callbackUrl: `${window.location.origin}:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
           coEditing: {
             mode: 'fast',
             change: true,

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

@@ -1,7 +1,17 @@
 <template>
-  <BasicModal :defaultFullscreen="defaultScreen" v-bind="$attrs" @register="registerModal" :title="title" :width="widthV"
-    :showCancelBtn="false" :showOkBtn="false" :footer="null" destroyOnClose :mask-closable="false" @cancel="closeModalFn">
-
+  <BasicModal
+    :defaultFullscreen="defaultScreen"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    :width="widthV"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :footer="null"
+    destroyOnClose
+    :mask-closable="false"
+    @cancel="closeModalFn"
+  >
     <!-- 报表新增 -->
     <div v-if="addOredit == 'add'">
       <a-form :model="formState" :label-col="{ style: { width: '130px' } }" :wrapper-col="{ span: 14 }">
@@ -12,7 +22,7 @@
           <JDictSelectTag v-model:value="formState.reportVersion" placeholder="请选择报表版本..." dictCode="reportVersion" />
         </a-form-item>
         <div class="footer">
-          <a-button type="primary" style="margin-right: 20px;" @click="save">保存</a-button>
+          <a-button type="primary" style="margin-right: 20px" @click="save">保存</a-button>
           <a-button type="primar" @click="closeModalFn">取消</a-button>
         </div>
       </a-form>
@@ -21,145 +31,138 @@
     <div v-else>
       <div id="fileEdit"></div>
     </div>
-
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import { computed, unref, inject, reactive, ref, watch, defineProps } from 'vue';
-import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { useUserStore } from '/@/store/modules/user';
+  import { computed, unref, inject, reactive, ref, watch, defineProps } from 'vue';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useUserStore } from '/@/store/modules/user';
 
-let props = defineProps({
-  addOredit: {
-    type: String,
-    default: ''
-  },
-  editID: {
+  let props = defineProps({
+    addOredit: {
       type: String,
       default: '',
     },
-})
-
-const userStore = useUserStore(); //获取用户信息
-let userId = unref(userStore.getUserInfo).id;
-let userName = unref(userStore.getUserInfo).username;
-console.log(userId, '用户id');
-console.log(userName, '用户名');
-
-let formState = reactive({
-  reportType: '',
-  reportVersion: ''
-})
-
-//设置标题
-let title = computed(() => {
-  if (props.addOredit == 'add') {
-    return '报表新增'
-  } else {
-    return '报表编辑'
-  }
-})
-//弹窗宽度
-let widthV = computed(() => {
-  if (props.addOredit == 'add') {
-    return '600px'
-  } else {
-    return '1000px'
-  }
-})
-
-//弹窗是否全屏
-let defaultScreen = computed(() => {
-  if (props.addOredit == 'add') {
-    return false
-  } else {
-    return true
-  }
-})
-// 声明Emits
-const emit = defineEmits(['saveOrUpdate', 'register',]);
-
-//表单赋值
-const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-  //重置表单
-  setModalProps({ confirmLoading: false });
-  // Object.assign(deviceData, data.record);
-  new DocsAPI.DocEditor(
-    'fileEdit', // 元素id
-    {
-      type: 'desktop',
-      width: '100%',
-      height: '100%',
-      document: {
-        title: '文档管理',
-        // url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-        url: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
-        fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
-        key: '',
-        lang: 'zh-CN',
-        permissions: {
-          download: true, //是否可下载
-          edit: true,
-          fillForms: true,
-          print: true, //是否可打印
-        },
-      },
-      editorConfig: {
-        lang: 'zh-CN',
-        mode: 'edit', //view：只读且可复制内容，edit：可编辑
-        // callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-        callbackUrl: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
-        coEditing: {
-          mode: 'fast',
-          change: true,
-        },
-        customization: {
-          toolbarNoTabs: true,
-          autosave: false, //是否自动保存
-          forcesave: true, //定义保存按钮是否显示
-          hideRightMenu: true,
+    editID: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const userStore = useUserStore(); //获取用户信息
+  let userId = unref(userStore.getUserInfo).id;
+  let userName = unref(userStore.getUserInfo).username;
+  console.log(userId, '用户id');
+  console.log(userName, '用户名');
+
+  let formState = reactive({
+    reportType: '',
+    reportVersion: '',
+  });
+
+  //设置标题
+  let title = computed(() => {
+    if (props.addOredit == 'add') {
+      return '报表新增';
+    } else {
+      return '报表编辑';
+    }
+  });
+  //弹窗宽度
+  let widthV = computed(() => {
+    if (props.addOredit == 'add') {
+      return '600px';
+    } else {
+      return '1000px';
+    }
+  });
+
+  //弹窗是否全屏
+  let defaultScreen = computed(() => {
+    if (props.addOredit == 'add') {
+      return false;
+    } else {
+      return true;
+    }
+  });
+  // 声明Emits
+  const emit = defineEmits(['saveOrUpdate', 'register']);
+
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    setModalProps({ confirmLoading: false });
+    // Object.assign(deviceData, data.record);
+    new DocsAPI.DocEditor(
+      'fileEdit', // 元素id
+      {
+        type: 'desktop',
+        width: '100%',
+        height: '100%',
+        document: {
+          title: '文档管理',
+          url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
+          // url: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
+          key: '',
+          lang: 'zh-CN',
+          permissions: {
+            download: true, //是否可下载
+            edit: true,
+            fillForms: true,
+            print: true, //是否可打印
+          },
         },
-        //用户信息
-        user: {
-          id: userId, //用户ID
-          name: userName, //用户名称
+        editorConfig: {
+          lang: 'zh-CN',
+          mode: 'edit', //view：只读且可复制内容，edit：可编辑
+          callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
+          // callbackUrl: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          coEditing: {
+            mode: 'fast',
+            change: true,
+          },
+          customization: {
+            toolbarNoTabs: true,
+            autosave: false, //是否自动保存
+            forcesave: true, //定义保存按钮是否显示
+            hideRightMenu: true,
+          },
+          //用户信息
+          user: {
+            id: userId, //用户ID
+            name: userName, //用户名称
+          },
         },
-      },
-    }
-  );
-
-});
-
-//点击图标关闭弹框
-const closeModalFn = () => {
-  formState.reportType = ''
-  formState.reportVersion = ''
-  closeModal()
-  // emit('closeModal')
-}
-
-//新增保存
-let save = () => {
-  emit('saveOrUpdate', formState)
-}
-
-
-
-
-
+      }
+    );
+  });
+
+  //点击图标关闭弹框
+  const closeModalFn = () => {
+    formState.reportType = '';
+    formState.reportVersion = '';
+    closeModal();
+    // emit('closeModal')
+  };
+
+  //新增保存
+  let save = () => {
+    emit('saveOrUpdate', formState);
+  };
 </script>
 <style scoped lang="less">
-::v-deep .suffix {
-  height: 32px;
-  line-height: 32px;
-  margin-left: 5px;
-  color: #fff;
-}
+  ::v-deep .suffix {
+    height: 32px;
+    line-height: 32px;
+    margin-left: 5px;
+    color: #fff;
+  }
 
-.footer {
-  width: 100%;
-  text-align: center;
-  padding-top: 30px;
-}
+  .footer {
+    width: 100%;
+    text-align: center;
+    padding-top: 30px;
+  }
 </style>