预警瓦斯更新

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

@@ -1,293 +1,290 @@
 <template>
-    <div class="dustPage">
-        <div class="top-area">
-            <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList" :key="index"
-                @click="topAreaClick(index)">
-                <div class="top-title">{{ item.title }}</div>
-                <div class="top-content">
-                    <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
-                        <span class="item-label">{{ items.label }}</span>
-                        <span class="item-value">{{ items.value }}</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="bot-area">
-            <div class="title-t">
-                <div class="text-t">粉尘信息状态监测</div>
-            </div>
-            <div class="echart-boxd">
-                <echartLine :echartDataGq="echartDataFc" :maxY="maxY" :echartDw="echartDw" :echartDw1="echartDw1"></echartLine>
-            </div>
-           
+  <div class="dustPage">
+    <div class="top-area">
+      <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
+        <div class="top-title">{{ item.title }}</div>
+        <div class="top-content">
+          <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
+            <span class="item-label">{{ items.label }}</span>
+            <span class="item-value">{{ items.value }}</span>
+          </div>
         </div>
+      </div>
+    </div>
+    <div class="bot-area">
+      <div class="title-t">
+        <div class="text-t">粉尘信息状态监测</div>
+      </div>
+      <div class="echart-boxd">
+        <echartLine :echartDataGq="echartDataFc" :maxY="maxY" :echartDw="echartDw" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, reactive, watch, defineProps } from 'vue';
-import echartLine from './common/echartLine.vue'
+  import { ref, computed, reactive, watch, defineProps } from 'vue';
+  import echartLine from './common/echartLine.vue';
 
-let props = defineProps({
+  let props = defineProps({
     listData: Object,
-});
+  });
 
-let maxY = ref(0)
-//顶部区域数据
-let topAreaList = reactive<any[]>([])
+  let maxY = ref(0);
+  //顶部区域数据
+  let topAreaList = reactive<any[]>([]);
 
-//顶部区域激活选项
-let activeIndex = ref(0)
+  //顶部区域激活选项
+  let activeIndex = ref(0);
 
-let choiceData = reactive<any[]>([])
+  let choiceData = reactive<any[]>([]);
 
-//粉尘图表数据
-let echartDataFc = reactive({
+  //粉尘图表数据
+  let echartDataFc = reactive({
     maxData: {
-        lengedData: '粉尘浓度(mg/m³)',
-        data: []
-    },
-    minData: {
-        lengedData: '粉尘呼尘占比(%)',
-        data: []
-    },
-    aveValue: {
-        lengedData: '总尘浓度',
-        data: []
+      lengedData: '粉尘浓度(mg/m³)',
+      data: [],
     },
-    xData: []
-})
-let echartDw=ref('(mg/m³)')
-let echartDw1=ref('(%)')
+    // minData: {
+    //     lengedData: '粉尘呼尘占比(%)',
+    //     data: []
+    // },
+    // aveValue: {
+    //     lengedData: '总尘浓度',
+    //     data: []
+    // },
+    xData: [],
+  });
+  let echartDw = ref('(mg/m³)');
 
-//顶部区域选项切换
-function topAreaClick(index) {
-    activeIndex.value = index
-    echartDataFc.maxData.data.length = 0
-    echartDataFc.minData.data.length = 0
-    echartDataFc.aveValue.data.length = 0
-    echartDataFc.xData.length = 0
-    choiceData[index].history.forEach(el => {
-        echartDataFc.maxData.data.push(el.dustval)
-        echartDataFc.minData.data.push(el.ratio)
-        echartDataFc.aveValue.data.push(el.totalDust)
-        echartDataFc.xData.push(el.time)
-    })
-}
+  //顶部区域选项切换
+  function topAreaClick(index) {
+    activeIndex.value = index;
+    echartDataFc.maxData.data.length = 0;
+    // echartDataFc.minData.data.length = 0
+    // echartDataFc.aveValue.data.length = 0
+    echartDataFc.xData.length = 0;
+    choiceData[index].history.forEach((el) => {
+      echartDataFc.maxData.data.push(el.dustval);
+      // echartDataFc.minData.data.push(el.ratio)
+      // echartDataFc.aveValue.data.push(el.totalDust)
+      echartDataFc.xData.push(el.time);
+    });
+  }
 
-function formatRoundNum(num) {
-    let interger = Math.ceil(num)
-    let leng = String(interger).length
-    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
-}
+  function formatRoundNum(num) {
+    let interger = Math.ceil(num);
+    let leng = String(interger).length;
+    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
+  }
 
-watch(() => props.listData, (val) => {
-    topAreaList.length = 0
-    echartDataFc.maxData.data.length = 0
-    echartDataFc.minData.data.length = 0
-    echartDataFc.aveValue.data.length = 0
-    echartDataFc.xData.length = 0
-    if (JSON.stringify(val.common) != '{}') {
-        let dustList = val.common.dust.slice(0, 3)
-        dustList.forEach(el => {
-            topAreaList.push({
-                title: el.strinstallpos,
-                content: [
-                    { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--', },
-                    { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--', },
-                    { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--', },
-                    { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--', },
-                ],
-            },)
-        })
-        choiceData = val.common.dust
+  watch(
+    () => props.listData,
+    (val) => {
+      topAreaList.length = 0;
+      echartDataFc.maxData.data.length = 0;
+      // echartDataFc.minData.data.length = 0
+      // echartDataFc.aveValue.data.length = 0
+      echartDataFc.xData.length = 0;
+      if (JSON.stringify(val.common) != '{}') {
+        let dustList = val.common.dust.slice(0, 3);
+        dustList.forEach((el) => {
+          topAreaList.push({
+            title: el.strinstallpos,
+            content: [
+              { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
+              { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
+              { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--' },
+              { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
+            ],
+          });
+        });
+        choiceData = val.common.dust;
 
         if (choiceData[activeIndex.value]) {
-            choiceData[activeIndex.value].history.forEach(el => {
-                echartDataFc.maxData.data.push(el.dustval)
-                echartDataFc.minData.data.push(el.ratio)
-                echartDataFc.aveValue.data.push(el.totalDust)
-                echartDataFc.xData.push(el.time)
-            })
-            let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
-                return acr > cur ? acr : cur
-            })
-            maxY.value = formatRoundNum(max1 * 1.5)
-
+          choiceData[activeIndex.value].history.forEach((el) => {
+            echartDataFc.maxData.data.push(el.dustval);
+            // echartDataFc.minData.data.push(el.ratio)
+            // echartDataFc.aveValue.data.push(el.totalDust)
+            echartDataFc.xData.push(el.time);
+          });
+          let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
+            return acr > cur ? acr : cur;
+          });
+          maxY.value = formatRoundNum(max1 * 1.5);
         } else {
-            activeIndex.value = 0
-            choiceData[activeIndex.value].history.forEach(el => {
-                echartDataFc.maxData.data.push(el.dustval)
-                echartDataFc.minData.data.push(el.ratio)
-                echartDataFc.aveValue.data.push(el.totalDust)
-                echartDataFc.xData.push(el.time)
-            })
-            let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
-                return acr > cur ? acr : cur
-            })
-            maxY.value = formatRoundNum(max1 * 1.5)
+          activeIndex.value = 0;
+          choiceData[activeIndex.value].history.forEach((el) => {
+            echartDataFc.maxData.data.push(el.dustval);
+            // echartDataFc.minData.data.push(el.ratio)
+            // echartDataFc.aveValue.data.push(el.totalDust)
+            echartDataFc.xData.push(el.time);
+          });
+          let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
+            return acr > cur ? acr : cur;
+          });
+          maxY.value = formatRoundNum(max1 * 1.5);
         }
-    }
-}, { deep: true })
-
-
+      }
+    },
+    { deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-.dustPage {
+  .dustPage {
     width: 100%;
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
 
     .top-area {
-        height: 24%;
-        display: flex;
-        justify-content: flex-start;
-        margin-bottom: 10px;
+      height: 24%;
+      display: flex;
+      justify-content: flex-start;
+      margin-bottom: 10px;
 
-        .top-box {
-            position: relative;
-            width: 30.5%;
-            height: 88%;
-            background: url('../../../../../assets//images/fire/fc-t.png') no-repeat center;
-            background-size: 100% 100%;
-            margin: 0px 20px;
+      .top-box {
+        position: relative;
+        width: 30.5%;
+        height: 88%;
+        background: url('../../../../../assets//images/fire/fc-t.png') no-repeat center;
+        background-size: 100% 100%;
+        margin: 0px 20px;
 
-            .top-title {
-                width: 80%;
-                text-align: center;
-                position: absolute;
-                left: 50%;
-                top: 2%;
-                font-size: 16px;
-                transform: translate(-50%, 0);
-            }
+        .top-title {
+          width: 80%;
+          text-align: center;
+          position: absolute;
+          left: 50%;
+          top: 2%;
+          font-size: 16px;
+          transform: translate(-50%, 0);
+        }
 
-            .top-content {
-                position: absolute;
-                top: 17%;
-                left: 0;
-                width: 100%;
-                height: 83%;
-                display: flex;
-                justify-content: flex-start;
-                align-items: flex-start;
-                flex-wrap: wrap;
-                cursor: pointer;
+        .top-content {
+          position: absolute;
+          top: 17%;
+          left: 0;
+          width: 100%;
+          height: 83%;
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          flex-wrap: wrap;
+          cursor: pointer;
 
-                .content-item {
-                    position: relative;
-                    width: 50%;
-                    height: 50%;
-                    background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-                    background-size: 88% 50%;
+          .content-item {
+            position: relative;
+            width: 50%;
+            height: 50%;
+            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+            background-size: 88% 50%;
 
-                    .item-label {
-                        position: absolute;
-                        left: 14%;
-                        top: 50%;
-                        transform: translate(0, -44%);
-                        // font-size: 12px;
-                    }
+            .item-label {
+              position: absolute;
+              left: 14%;
+              top: 50%;
+              transform: translate(0, -44%);
+              // font-size: 12px;
+            }
 
-                    .item-value {
-                        position: absolute;
-                        right: 14%;
-                        top: 50%;
-                        transform: translate(0, -44%);
-                        // font-size: 12px;
-                        font-family: 'douyuFont';
-                        color: #3df6ff;
-                    }
-                }
+            .item-value {
+              position: absolute;
+              right: 14%;
+              top: 50%;
+              transform: translate(0, -44%);
+              // font-size: 12px;
+              font-family: 'douyuFont';
+              color: #3df6ff;
             }
+          }
         }
+      }
 
-        .top-box1 {
-            position: relative;
-            width: 30.5%;
-            height: 100%;
-            background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat center;
-            background-size: 100% 100%;
-            margin: 0px 20px;
+      .top-box1 {
+        position: relative;
+        width: 30.5%;
+        height: 100%;
+        background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat center;
+        background-size: 100% 100%;
+        margin: 0px 20px;
 
-            .top-title {
-                width: 80%;
-                text-align: center;
-                position: absolute;
-                left: 50%;
-                top: 2%;
-                font-size: 16px;
-                transform: translate(-50%, 0);
-            }
+        .top-title {
+          width: 80%;
+          text-align: center;
+          position: absolute;
+          left: 50%;
+          top: 2%;
+          font-size: 16px;
+          transform: translate(-50%, 0);
+        }
 
-            .top-content {
-                position: absolute;
-                top: 17%;
-                left: 0;
-                width: 100%;
-                height: 83%;
-                display: flex;
-                justify-content: flex-start;
-                align-items: flex-start;
-                flex-wrap: wrap;
-                padding-bottom: 20px;
-                box-sizing: border-box;
-                cursor: pointer;
+        .top-content {
+          position: absolute;
+          top: 17%;
+          left: 0;
+          width: 100%;
+          height: 83%;
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          flex-wrap: wrap;
+          padding-bottom: 20px;
+          box-sizing: border-box;
+          cursor: pointer;
 
-                .content-item {
-                    position: relative;
-                    width: 50%;
-                    height: 50%;
-                    background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-                    background-size: 88% 50%;
+          .content-item {
+            position: relative;
+            width: 50%;
+            height: 50%;
+            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+            background-size: 88% 50%;
 
-                    .item-label {
-                        position: absolute;
-                        left: 14%;
-                        top: 50%;
-                        transform: translate(0, -44%);
-                        // font-size: 12px;
-                    }
+            .item-label {
+              position: absolute;
+              left: 14%;
+              top: 50%;
+              transform: translate(0, -44%);
+              // font-size: 12px;
+            }
 
-                    .item-value {
-                        position: absolute;
-                        right: 14%;
-                        top: 50%;
-                        transform: translate(0, -44%);
-                        // font-size: 12px;
-                        font-family: 'douyuFont';
-                        color: #3df6ff;
-                    }
-                }
+            .item-value {
+              position: absolute;
+              right: 14%;
+              top: 50%;
+              transform: translate(0, -44%);
+              // font-size: 12px;
+              font-family: 'douyuFont';
+              color: #3df6ff;
             }
+          }
         }
+      }
     }
 
     .bot-area {
-        height: calc(76% - 10px);
-        padding: 10px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-        .title-t {
-            height: 30px;
-            margin-bottom: 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+      height: calc(76% - 10px);
+      padding: 10px 15px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      .title-t {
+        height: 30px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-            .text-t {
-                font-family: 'douyuFont';
-                font-size: 16px;
-            }
-        }
-        .echart-boxd{
-            width: 100%;
-            height: calc(100% - 40px);
+        .text-t {
+          font-family: 'douyuFont';
+          font-size: 16px;
         }
-       
+      }
+      .echart-boxd {
+        width: 100%;
+        height: calc(100% - 40px);
+      }
     }
-}
-</style>
+  }
+</style>

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

@@ -1,582 +1,581 @@
 <template>
-    <div class="gasPage">
-        <div class="top-area" v-if="topAreaListWs.length != 0">
-            <div class="title-t">
-                <div class="text-t">瓦斯抽采泵信息</div>
+  <div class="gasPage">
+    <div class="top-area" v-if="topAreaListWs.length != 0">
+      <div class="title-t">
+        <div class="text-t">瓦斯抽采泵信息</div>
+      </div>
+      <div class="top-bt">
+        <div class="bt-box">
+          <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
+            <div class="box-label">{{ item.label }}</div>
+            <div class="box-values">
+              <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
+                <span>{{ `${items.name} : ` }}</span>
+                <span>{{ items.val }}</span>
+              </div>
             </div>
-            <div class="top-bt">
-                <div class="bt-box">
-                    <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
-                        <div class="box-label">{{ item.label }}</div>
-                        <div class="box-values">
-                            <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
-                                <span>{{ `${items.name} : ` }}</span>
-                                <span>{{ items.val }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bt-box">
-                    <div :class="{
-                        'box-value': warnText == 0,
-                        'box-value1': warnText == 101,
-                        'box-value2': warnText == 102,
-                        'box-value3': warnText == 103,
-                        'box-value4': warnText == 104,
-                        'box-value5': warnText == 201,
-                    }">{{ warnText == 0 ? '正常' : warnText == 101 ? '较低风险'
-    : warnText == 102 ? '低风险' : warnText == 103 ? '中风险' :
-        warnText == 104 ? '高风险' : warnText == 201 ? '报警' : warnText }}</div>
-                </div>
-            </div>
-
+          </div>
         </div>
+        <div class="bt-box">
+          <div
+            :class="{
+              'box-value': warnText == 0,
+              'box-value1': warnText == 101,
+              'box-value2': warnText == 102,
+              'box-value3': warnText == 103,
+              'box-value4': warnText == 104,
+              'box-value5': warnText == 201,
+            }"
+            >{{
+              warnText == 0
+                ? '正常'
+                : warnText == 101
+                  ? '较低风险'
+                  : warnText == 102
+                    ? '低风险'
+                    : warnText == 103
+                      ? '中风险'
+                      : warnText == 104
+                        ? '高风险'
+                        : warnText == 201
+                          ? '报警'
+                          : warnText
+            }}</div
+          >
+        </div>
+      </div>
+    </div>
 
-        <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
-            <div class="title-b">
-                <div class="text-b">安全监控测点信息</div>
-            </div>
-            <div class="content-b">
-                <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
-                    <div class="item-l">
-                        <div class="label-l">{{ item.label }}</div>
-                        <div class="value-l">{{ `${item.value}%` }}</div>
-                    </div>
-                    <div class="item-r">
-                        <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
-                            <span>{{ `${items.label} : ` }}</span>
-                            <span :class="{
-                                'status-f': items.value == 1,
-                                'status-l': items.value == 0,
-                            }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span>
-                        </div>
-                    </div>
-                </div>
+    <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
+      <div class="title-b">
+        <div class="text-b">安全监控测点信息</div>
+      </div>
+      <div class="content-b">
+        <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
+          <div class="item-l">
+            <div class="label-l">{{ item.label }}</div>
+            <div class="value-l">{{ `${item.value}%` }}</div>
+          </div>
+          <div class="item-r">
+            <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
+              <span>{{ `${items.label} : ` }}</span>
+              <span
+                :class="{
+                  'status-f': items.value == 1,
+                  'status-l': items.value == 0,
+                }"
+                >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
+              >
             </div>
+          </div>
         </div>
-
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
+  import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
 
-let props = defineProps({
+  let props = defineProps({
     listData: Object,
-});
-
-//瓦斯顶部区域数据
-let topAreaListWs = reactive<any[]>([])
-
-//瓦斯监控列表数据
-let cardListWs = reactive<any[]>([])
-
-let warnText = ref(0)
-
-
-
-watch(() => props.listData, (val) => {
-    console.log(val, '瓦斯详情数据-------')
-    topAreaListWs.length = 0
-    cardListWs.length = 0
-    if (JSON.stringify(val.common) != '{}') {
-        warnText.value = val.common.pump[0].warnLevel || 0
-        val.common.pump.forEach(v => {
-            topAreaListWs.push({
-                label: v.strinstallpos || '--',
-                list: [
-                    // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
-                    // { name: '报警状态', val: v.warnLevel || 0 },
-                    { name: "输入管道内一氧化碳(ppm)", val: v.coVal || 0 },
-                    { name: "管路出口处瓦斯(%CH4)", val: v.gas1 || 0 },
-                    { name: '泵站内瓦斯(%CH4)', val: v.gas2 || 0 },
-                    { name: "输入管道内瓦斯(%CH4)", val: v.gas3 || 0 },
-                    { name: '管道输出瓦斯(%CH4)', val: v.gas4 || 0 },
-                    { name: '输入管道内工混流量(m³/min)', val: v.mixedTraffic || 0 },
-                    { name: '输入管道内标况流量(m³/min)', val: v.standardTraffic || 0 },
-                    { name: '瓦斯抽放量(m³)', val: v.gas4 || 0 },
-
-                ]
-            })
-        })
-
-        val.common.gas.forEach(el => {
-            el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'))
-            cardListWs.push({
-                label: '甲烷',
-                value: el.readData.gasC || '--',
-                listR: [
-                    { id: 0, label: '测点类型', value: el.typeName || '--' },
-                    { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
-                    { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
-                    { id: 3, label: '测点状态', value: el.warnFlag },
-                ]
-            })
-        })
-    }
-}, { immediate: true, deep: true })
-
+  });
+
+  //瓦斯顶部区域数据
+  let topAreaListWs = reactive<any[]>([]);
+
+  //瓦斯监控列表数据
+  let cardListWs = reactive<any[]>([]);
+
+  let warnText = ref(0);
+
+  watch(
+    () => props.listData,
+    (val) => {
+      console.log(val, '瓦斯详情数据-------');
+      topAreaListWs.length = 0;
+      cardListWs.length = 0;
+      if (JSON.stringify(val.common) != '{}') {
+        warnText.value = val.common.pump[0].warnLevel || 0;
+        val.common.pump.forEach((v) => {
+          topAreaListWs.push({
+            label: v.strinstallpos || '--',
+            list: [
+              // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
+              // { name: '报警状态', val: v.warnLevel || 0 },
+              { name: '输入管道内一氧化碳(ppm)', val: v.readData.coVal || 0 },
+              { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 || 0 },
+              { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 || 0 },
+              { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 || 0 },
+              { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 || 0 },
+              { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic || 0 },
+              { name: '输入管道内标况流量(m³/min)', val: v.readData.standardTraffic || 0 },
+              { name: '瓦斯抽放量(m³)', val: v.readData.gas4 || 0 },
+            ],
+          });
+        });
+
+        val.common.gas.forEach((el) => {
+          el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
+          cardListWs.push({
+            label: '甲烷',
+            value: el.readData.gasC || '--',
+            listR: [
+              { id: 0, label: '测点类型', value: '监测传感器' },
+              { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
+              { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
+              { id: 3, label: '测点状态', value: el.warnFlag },
+            ],
+          });
+        });
+      }
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-@font-face {
+  @font-face {
     font-family: 'douyuFont';
     src: url('../../../../assets/font/douyuFont.otf');
-}
+  }
 
-.gasPage {
+  .gasPage {
     width: 100%;
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
 
     .top-area {
-        height: 356px;
+      height: 356px;
+      margin-bottom: 10px;
+      padding: 10px 15px;
+      // display: flex;
+      // justify-content: space-between;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+
+      .title-t {
+        height: 30px;
         margin-bottom: 10px;
-        padding: 10px 15px;
-        // display: flex;
-        // justify-content: space-between;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-
-        .title-t {
-            height: 30px;
-            margin-bottom: 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .text-t {
-                font-family: 'douyuFont';
-                font-size: 16px;
-            }
-        }
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-        .top-bt {
+        .text-t {
+          font-family: 'douyuFont';
+          font-size: 16px;
+        }
+      }
+
+      .top-bt {
+        height: 276px;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .bt-box {
+          width: 50%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .top-box {
+            position: relative;
+            width: 524px;
             height: 276px;
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
+            background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .box-label {
+              position: absolute;
+              left: 50%;
+              top: 198px;
+              transform: translate(-50%, 0);
+              width: 80%;
+              font-family: 'douyuFont';
+              font-size: 24px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              word-wrap: break-word;
+            }
 
-            .bt-box {
-                width: 50%;
-                height: 100%;
+            .box-values {
+              position: absolute;
+              left: 50%;
+              top: 26px;
+              transform: translate(-50%, 0);
+              width: 84%;
+              // height: 26px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              flex-wrap: wrap;
+
+              .value-b {
+                width: calc(50% - 10px);
+                height: 32px;
                 display: flex;
-                justify-content: center;
+                justify-content: space-between;
                 align-items: center;
 
-                .top-box {
-                    position: relative;
-                    width: 524px;
-                    height: 276px;
-                    background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .box-label {
-                        position: absolute;
-                        left: 50%;
-                        top: 198px;
-                        transform: translate(-50%, 0);
-                        width: 80%;
-                        font-family: 'douyuFont';
-                        font-size: 24px;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        word-wrap: break-word;
-                    }
-
-                    .box-values {
-                        position: absolute;
-                        left: 50%;
-                        top: 26px;
-                        transform: translate(-50%, 0);
-                        width: 84%;
-                        // height: 26px;
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        flex-wrap: wrap;
-
-                        .value-b {
-                            width: calc(50% - 10px);
-                            height: 32px;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-
-                            span {
-                                font-size: 14px;
-
-                                &:last-child {
-                                    font-family: 'douyuFont';
-
-                                    color: rgb(0, 242, 255);
-                                }
-                            }
-
-
-                        }
-
-                    }
+                span {
+                  font-size: 14px;
 
+                  &:last-child {
+                    font-family: 'douyuFont';
 
+                    color: rgb(0, 242, 255);
+                  }
                 }
+              }
+            }
+          }
+
+          .box-value {
+            font-family: 'douyuFont';
+            font-size: 24px;
+            color: rgb(145, 230, 9) !important;
+          }
+
+          .box-value1 {
+            font-family: 'douyuFont';
+            font-size: 24px;
+            color: rgb(0, 242, 255) !important;
+          }
+
+          .box-value2 {
+            font-family: 'douyuFont';
+            font-size: 24px;
+            color: #ffff35 !important;
+          }
+
+          .box-value3 {
+            font-family: 'douyuFont';
+            font-size: 24px;
+            color: #ffbe69 !important;
+          }
+
+          .box-value4 {
+            font-family: 'douyuFont';
+            font-size: 24px;
+            color: #ff6f00 !important;
+          }
+
+          .box-value5 {
+            font-family: 'douyuFont';
+            font-size: 24px;
+            color: #ff0000 !important;
+          }
+        }
+      }
+    }
 
-                .box-value {
-                    font-family: 'douyuFont';
-                    font-size: 24px;
-                    color: rgb(145, 230, 9) !important;
+    .bot-area {
+      height: calc(100% - 356px);
+      padding: 10px 15px 0px 15px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+
+      .title-b {
+        height: 30px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .text-b {
+          font-family: 'douyuFont';
+          font-size: 16px;
+        }
+      }
+
+      .content-b {
+        height: calc(100% - 40px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        overflow-y: auto;
+
+        .card-b {
+          position: relative;
+          width: 23%;
+          height: 128px;
+          margin: 0px 15px 15px 15px;
+          background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .item-l {
+            position: absolute;
+            left: 32px;
+            top: 50%;
+            transform: translate(0, -50%);
+            width: 89px;
+            height: 98px;
+            background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+            .label-l {
+              position: absolute;
+              left: 50%;
+              top: 7px;
+              transform: translate(-50%, 0);
+            }
+
+            .value-l {
+              position: absolute;
+              left: 50%;
+              top: 50px;
+              transform: translate(-50%, 0);
+              font-family: 'douyuFont';
+              font-size: 16px;
+              color: #3df6ff;
+            }
+          }
+
+          @media screen and (max-width: 1920px) {
+            .item-r {
+              position: absolute;
+              left: 132px;
+              top: 50%;
+              transform: translate(0, -50%);
+              height: 128px;
+              padding: 5px 0px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
+
+              .content-r {
+                display: flex;
+
+                span {
+                  font-size: 14px;
+
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
+
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
 
-                .box-value1 {
-                    font-family: 'douyuFont';
-                    font-size: 24px;
-                    color: rgb(0, 242, 255) !important;
+                .status-f {
+                  color: #ff0000;
                 }
 
-                .box-value2 {
-                    font-family: 'douyuFont';
-                    font-size: 24px;
-                    color: #ffff35 !important;
+                .status-l {
+                  color: #3df6ff;
                 }
+              }
+            }
+          }
+
+          @media screen and (min-width: 1921px) and (max-width: 2560px) {
+            .item-r {
+              position: absolute;
+              left: 138px;
+              top: 50%;
+              transform: translate(0, -50%);
+              width: calc(100% - 138px);
+              height: 128px;
+              padding: 5px 0px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
+
+              .content-r {
+                display: flex;
 
-                .box-value3 {
-                    font-family: 'douyuFont';
-                    font-size: 24px;
-                    color: #ffbe69 !important;
+                span {
+                  font-size: 14px;
+
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
+
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
 
-                .box-value4 {
-                    font-family: 'douyuFont';
-                    font-size: 24px;
-                    color: #ff6f00 !important;
+                .status-f {
+                  color: #ff0000;
                 }
 
-                .box-value5 {
-                    font-family: 'douyuFont';
-                    font-size: 24px;
-                    color: #ff0000 !important;
+                .status-l {
+                  color: #3df6ff;
                 }
+              }
             }
-
+          }
         }
-
+      }
     }
 
+    .bot-area1 {
+      height: 100%;
+      padding: 10px 15px 0px 15px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+
+      .title-b {
+        height: 30px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
+        .text-b {
+          font-family: 'douyuFont';
+          font-size: 16px;
+        }
 
-    .bot-area {
-        height: calc(100% - 356px);
-        padding: 10px 15px 0px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-
-        .title-b {
-            height: 30px;
-            margin-bottom: 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .text-b {
-                font-family: 'douyuFont';
-                font-size: 16px;
+        // .select-b {
+        //     display: flex;
+        //     justify-content: flex-start;
+        //     align-items: center;
+        // }
+      }
+
+      .content-b {
+        height: calc(100% - 40px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        overflow-y: auto;
+
+        .card-b {
+          position: relative;
+          width: 23%;
+          height: 128px;
+          margin: 0px 15px 15px 15px;
+          background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .item-l {
+            position: absolute;
+            left: 32px;
+            top: 50%;
+            transform: translate(0, -50%);
+            width: 89px;
+            height: 98px;
+            background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+            .label-l {
+              position: absolute;
+              left: 50%;
+              top: 7px;
+              transform: translate(-50%, 0);
             }
-        }
 
-        .content-b {
-            height: calc(100% - 40px);
-            display: flex;
-            justify-content: flex-start;
-            align-items: flex-start;
-            flex-wrap: wrap;
-            overflow-y: auto;
-
-            .card-b {
-                position: relative;
-                width: 23%;
-                height: 128px;
-                margin: 0px 15px 15px 15px;
-                background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
-                background-size: 100% 100%;
-
-                .item-l {
-                    position: absolute;
-                    left: 32px;
-                    top: 50%;
-                    transform: translate(0, -50%);
-                    width: 89px;
-                    height: 98px;
-                    background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-                    .label-l {
-                        position: absolute;
-                        left: 50%;
-                        top: 7px;
-                        transform: translate(-50%, 0);
-                    }
-
-                    .value-l {
-                        position: absolute;
-                        left: 50%;
-                        top: 50px;
-                        transform: translate(-50%, 0);
-                        font-family: 'douyuFont';
-                        font-size: 16px;
-                        color: #3df6ff;
-                    }
-                }
+            .value-l {
+              position: absolute;
+              left: 50%;
+              top: 50px;
+              transform: translate(-50%, 0);
+              font-family: 'douyuFont';
+              font-size: 16px;
+              color: #3df6ff;
+            }
+          }
+
+          @media screen and (max-width: 1920px) {
+            .item-r {
+              position: absolute;
+              left: 132px;
+              top: 50%;
+              transform: translate(0, -50%);
+              height: 128px;
+              padding: 5px 0px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
+
+              .content-r {
+                display: flex;
 
-                @media screen and (max-width:1920px) {
-                    .item-r {
-                        position: absolute;
-                        left: 132px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        height: 128px;
-                        padding: 5px 0px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        box-sizing: border-box;
-
-                        .content-r {
-                            display: flex;
-
-                            span {
-                                font-size: 14px;
-
-                                &:first-child {
-                                    display: inline-block;
-                                    width: 68px;
-                                }
-
-                                &:last-child {
-                                    display: inline-block;
-                                    width: calc(100% - 68px);
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-
-
-                    }
-                }
+                span {
+                  font-size: 14px;
 
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
 
-                @media screen and (min-width: 1921px) and (max-width:2560px) {
-                    .item-r {
-                        position: absolute;
-                        left: 138px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        width: calc(100% - 138px);
-                        height: 128px;
-                        padding: 5px 0px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        box-sizing: border-box;
-
-                        .content-r {
-                            display: flex;
-
-                            span {
-                                font-size: 14px;
-
-                                &:first-child {
-                                    display: inline-block;
-                                    width: 68px;
-                                }
-
-                                &:last-child {
-                                    display: inline-block;
-                                    width: calc(100% - 68px);
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-                    }
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
 
-            }
-        }
-    }
+                .status-f {
+                  color: #ff0000;
+                }
 
-    .bot-area1 {
-        height: 100%;
-        padding: 10px 15px 0px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-
-        .title-b {
-            height: 30px;
-            margin-bottom: 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .text-b {
-                font-family: 'douyuFont';
-                font-size: 16px;
+                .status-l {
+                  color: #3df6ff;
+                }
+              }
             }
+          }
+
+          @media screen and (min-width: 1921px) and (max-width: 2560px) {
+            .item-r {
+              position: absolute;
+              left: 138px;
+              top: 50%;
+              transform: translate(0, -50%);
+              width: calc(100% - 138px);
+              height: 128px;
+              padding: 5px 0px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
+
+              .content-r {
+                display: flex;
 
-            // .select-b {
-            //     display: flex;
-            //     justify-content: flex-start;
-            //     align-items: center;
-            // }
-        }
+                span {
+                  font-size: 14px;
 
-        .content-b {
-            height: calc(100% - 40px);
-            display: flex;
-            justify-content: flex-start;
-            align-items: flex-start;
-            flex-wrap: wrap;
-            overflow-y: auto;
-
-            .card-b {
-                position: relative;
-                width: 23%;
-                height: 128px;
-                margin: 0px 15px 15px 15px;
-                background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
-                background-size: 100% 100%;
-
-                .item-l {
-                    position: absolute;
-                    left: 32px;
-                    top: 50%;
-                    transform: translate(0, -50%);
-                    width: 89px;
-                    height: 98px;
-                    background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-                    .label-l {
-                        position: absolute;
-                        left: 50%;
-                        top: 7px;
-                        transform: translate(-50%, 0);
-                    }
-
-                    .value-l {
-                        position: absolute;
-                        left: 50%;
-                        top: 50px;
-                        transform: translate(-50%, 0);
-                        font-family: 'douyuFont';
-                        font-size: 16px;
-                        color: #3df6ff;
-                    }
-                }
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
 
-                @media screen and (max-width:1920px) {
-                    .item-r {
-                        position: absolute;
-                        left: 132px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        height: 128px;
-                        padding: 5px 0px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        box-sizing: border-box;
-
-                        .content-r {
-                            display: flex;
-
-                            span {
-                                font-size: 14px;
-
-                                &:first-child {
-                                    display: inline-block;
-                                    width: 68px;
-                                }
-
-                                &:last-child {
-                                    display: inline-block;
-                                    width: calc(100% - 68px);
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-
-
-                    }
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
 
-                @media screen and (min-width: 1921px) and (max-width:2560px) {
-                    .item-r {
-                        position: absolute;
-                        left: 138px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        width: calc(100% - 138px);
-                        height: 128px;
-                        padding: 5px 0px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        box-sizing: border-box;
-
-                        .content-r {
-                            display: flex;
-
-                            span {
-                                font-size: 14px;
-
-                                &:first-child {
-                                    display: inline-block;
-                                    width: 68px;
-                                }
-
-                                &:last-child {
-                                    display: inline-block;
-                                    width: calc(100% - 68px);
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-                    }
-
+                .status-f {
+                  color: #ff0000;
                 }
 
+                .status-l {
+                  color: #3df6ff;
+                }
+              }
             }
+          }
         }
+      }
     }
-}
-</style>
+  }
+</style>