布尔台预警更新

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

@@ -397,7 +397,7 @@ onMounted(async () => { });
               width: 100%;
               position: absolute;
               left: 50%;
-              top: 64px;
+              top: 70px;
               font-size: 16px;
               color: #fff;
               text-align: center;
@@ -466,7 +466,7 @@ onMounted(async () => { });
               width: 100%;
               position: absolute;
               left: 50%;
-              top: 64px;
+              top: 70px;
               font-size: 16px;
               color: #fff;
               text-align: center;

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

@@ -72,7 +72,8 @@ export const contentList = [
     list: [
       {
         id: '0-0',
-        title: 'O₂(%)',
+        title: 'O₂',
+        dw:'(%)',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -80,7 +81,8 @@ export const contentList = [
       },
       {
         id: '0-1',
-        title: 'C₂H₄(ppm)',
+        title: 'C₂H₄',
+        dw:'(ppm)',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -93,7 +95,8 @@ export const contentList = [
     list: [
       {
         id: '1-0',
-        title: 'CO(ppm)',
+        title: 'CO',
+        dw:'(ppm)',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -101,7 +104,8 @@ export const contentList = [
       },
       {
         id: '1-1',
-        title: 'CH₄(ppm)',
+        title: 'CH₄',
+        dw:'(ppm)',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -114,7 +118,8 @@ export const contentList = [
     list: [
       {
         id: '2-0',
-        title: 'CO₂(%)',
+        title: 'CO₂',
+        dw:'(%)',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -122,7 +127,8 @@ export const contentList = [
       },
       {
         id: '2-1',
-        title: 'C₂H₂(ppm)',
+        title: 'C₂H₂',
+        dw:'(ppm)',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',

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

@@ -50,7 +50,7 @@
                     <div class="title-text">{{ `${type}趋势` }}</div>
                 </div>
                 <div class="echarts-box">
-                    <echartLine1 :echartDataSg="echartDataSg1"></echartLine1>
+                    <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName"></echartLine1>
                 </div>
             </div>
         </div>
@@ -147,6 +147,8 @@ let echartDataSg1 = reactive({
     xData: [],
     yData: [],
     lengedData: 'O₂',
+    lengedDataName:'(%)'
+
 })
 let echartDataSgList = reactive<any[]>([])
 
@@ -157,6 +159,8 @@ function btnClick(item, ind) {
     echartDataSg1.xData.length = 0
     echartDataSg1.yData.length = 0
     echartDataSg1.lengedData = type.value
+    echartDataSg1.lengedDataName = item.dw
+    
     switch (type.value) {
         case 'O₂':
             echartDataSgList.forEach(el => {
@@ -380,7 +384,7 @@ watch(() => props.listData, (val) => {
             line-height: 30px;
             font-family: 'douyuFont';
             font-size: 16px;
-            color: #3df6ff;
+            // color: #3df6ff;
         }
 
         .card-btn {
@@ -522,7 +526,7 @@ watch(() => props.listData, (val) => {
                 .title-text {
                     font-family: 'douyuFont';
                     font-size: 16px;
-                    color: #3df6ff;
+                    // color: #3df6ff;
                 }
             }
 

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine.vue

@@ -5,223 +5,281 @@
 </template>
 
 <script lang="ts" setup>
-  import {defineProps,  ref,  nextTick, reactive,  watch,  } from 'vue';
-  import * as echarts from 'echarts';
+import { defineProps, ref, nextTick, reactive, watch, } from 'vue';
+import * as echarts from 'echarts';
 
-  let props = defineProps({
-    echartDataGq: {
-      type: Object,
-    },
-    maxY:{
-      type:Number
-    },
-    echartDw:{
-      type:String
-    }
-  });
-  //获取dom元素节点
-  let line = ref<any>();
-  let echartDataGqs=reactive({})
-  watch(
-    () => props.echartDataGq,
-    (data) => {
-      echartDataGqs=Object.assign({},data)
-      getOption();
-    },
-    { immediate: true,deep:true }
-  );
-  function getOption() {
-    nextTick(() => {
-      let myChart = echarts.init(line.value);
-      let option = {
-        grid: {
-          top: '15%',
-          left: '2%',
-          bottom: '6%',
-          right: '2%',
-            containLabel: true,
+let props = defineProps({
+  echartDataGq: {
+    type: Object,
+  },
+  maxY: {
+    type: Number
+  },
+  echartDw: {
+    type: String
+  },
+  echartDw1:{
+    type:String,
+  }
+});
+//获取dom元素节点
+let line = ref<any>();
+let echartDataGqs = reactive({})
+watch(
+  () => props.echartDataGq,
+  (data) => {
+    echartDataGqs = Object.assign({}, data)
+    getOption();
+  },
+  { immediate: true, deep: true }
+);
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(line.value);
+    let option = {
+      grid: {
+        top: '15%',
+        left: '2%',
+        bottom: '6%',
+        right: '2%',
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'item',
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
         },
-        // tooltip: {
-        //   trigger: 'axis',
-         
-        // },
-        tooltip: {
-            trigger: 'item',
-            backgroundColor: 'rgba(0, 0, 0, .6)',
-            textStyle: {
-              color: '#fff',
-              fontSize: 12,
-            },
+      },
+      legend: {
+        align: 'left',
+        right: 'center',
+        top: '0%',
+        type: 'plain',
+        textStyle: {
+          color: '#7ec7ff',
+          fontSize: 14,
+        },
+        // icon:'rect',
+        itemGap: 25,
+        itemWidth: 18,
+        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+        data: [
+          {
+            name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData  : '',
           },
-        xAxis: [
           {
-            type: 'category',
-            boundaryGap: false,
-            axisLabel: {
-              // formatter: '{value}',
-              fontSize: 14,
-              margin: 20,
-              textStyle: {
-                color: '#b3b8cc',
-              },
-              formatter: function (params) {
-                            let newParamsName = ref('')  // 最终拼接成的字符串
-                            let paramsNameNumber = ref(params.length) // 实际标签的个数
-                            let provideNumber = ref(10)  // 每行能显示的字的个数
-                            let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
-                            /**
-                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-                             */
-                            // 条件等同于rowNumber>1
-                            if (paramsNameNumber.value > provideNumber.value) {
-                                /** 循环每一行,p表示行 */
-                                for (var p = 0; p < rowNumber; p++) {
-                                    var tempStr = '' // 表示每一次截取的字符串
-                                    var start = p * provideNumber.value // 开始截取的位置
-                                    var end = start + provideNumber.value // 结束截取的位置
-                                    // 此处特殊处理最后一行的索引值
-                                    if (p == rowNumber - 1) {
-                                        // 最后一次不换行
-                                        tempStr = params.substring(start, paramsNameNumber.value)
-                                    } else {
-                                        // 每一次拼接字符串并换行
-                                        tempStr = params.substring(start, end) + '\n'
-                                    }
-                                    newParamsName.value += tempStr // 最终拼成的字符串
-                                }
-                            } else {
-                                // 将旧标签的值赋给新标签
-                                newParamsName.value = params
-                            }
-                            //将最终的字符串返回
-                            return newParamsName.value
-                        }
-            },
-            axisLine: {
-              lineStyle: {
-                color: 'rgba(14, 53, 95)',
-              },
+            name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
+          },
+
+          {
+            name:echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : ''
+          }
+        ],
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            // formatter: '{value}',
+            fontSize: 14,
+            margin: 20,
+            textStyle: {
+              color: '#b3b8cc',
             },
-            splitLine: {
-              show: false,
-              //   lineStyle: {
-              //     color: '#243753',
-              //   },
+            formatter: function (params) {
+              let newParamsName = ref('')  // 最终拼接成的字符串
+              let paramsNameNumber = ref(params.length) // 实际标签的个数
+              let provideNumber = ref(10)  // 每行能显示的字的个数
+              let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber.value > provideNumber.value) {
+                /** 循环每一行,p表示行 */
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = '' // 表示每一次截取的字符串
+                  var start = p * provideNumber.value // 开始截取的位置
+                  var end = start + provideNumber.value // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p == rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber.value)
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n'
+                  }
+                  newParamsName.value += tempStr // 最终拼成的字符串
+                }
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName.value = params
+              }
+              //将最终的字符串返回
+              return newParamsName.value
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
             },
-            axisTick: {
-              show: false,
+          },
+          splitLine: {
+            show: false,
+            //   lineStyle: {
+            //     color: '#243753',
+            //   },
+          },
+          axisTick: {
+            show: false,
+          },
+          data: echartDataGqs.xData ? echartDataGqs.xData : [],
+        },
+      ],
+      yAxis: [
+        {
+          boundaryGap: false,
+          type: 'value',
+          max: props.maxY,
+          axisLabel: {
+            textStyle: {
+              color: '#b3b8cc',
             },
-            data: echartDataGqs.xData ? echartDataGqs.xData : [],
+            formatter:'{value}'
           },
-        ],
-        yAxis: [
-          {
-            boundaryGap: false,
-            type: 'value',
-            max: props.maxY,
-            axisLabel: {
-              textStyle: {
-                color: '#b3b8cc',
-              },
+          name: props.echartDw,
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
             },
-            name:props.echartDw,
-            nameTextStyle: {
-              color: '#fff',
-              fontSize: 12,
-              lineHeight: 10,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
             },
-            splitLine: {
-              lineStyle: {
-                color: 'rgba(14, 53, 95)',
-              },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        {
+          boundaryGap: false,
+          type: 'value',
+          max: props.maxY,
+          axisLabel: {
+            textStyle: {
+              color: '#b3b8cc',
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(14, 53, 95)',
-              },
+            formatter:'{value}'
+          },
+          name: props.echartDw1,
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
             },
-            axisTick: {
-              show: false,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
             },
           },
-        ],
-        series: [
-          {
-            name:echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
-            type: 'line',
-            smooth: true,
-            showSymbol: true,
-            symbolSize: 8,
-            zlevel: 3,
-            itemStyle: {
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
+          type: 'line',
+          smooth: true,
+          showSymbol: true,
+          symbolSize: 8,
+          zlevel: 3,
+          itemStyle: {
+            color: '#19a3df',
+            borderColor: '#a3c8d8',
+          },
+          lineStyle: {
+            normal: {
+              width: 2,
               color: '#19a3df',
-              borderColor: '#a3c8d8',
             },
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: '#19a3df',
-              },
-            },
-            data:echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
           },
-          {
-            name:echartDataGqs.minData ? echartDataGqs.minData.lengedData  : '' ,
-            type: 'line',
-            smooth: true,
-            showSymbol: true,
-            symbolSize: 8,
-            zlevel: 3,
-            itemStyle: {
+          data: echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
+        },
+        {
+          name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
+          type: 'line',
+          smooth: true,
+          showSymbol: true,
+          symbolSize: 8,
+          zlevel: 3,
+          itemStyle: {
+            color: '#4fffad',
+            borderColor: '#a3c8d8',
+          },
+          lineStyle: {
+            normal: {
+              width: 2,
               color: '#4fffad',
-              borderColor: '#a3c8d8',
-            },
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: '#4fffad',
-              },
             },
-            data:echartDataGqs.minData ? echartDataGqs.minData.data : [],
           },
-          {
-            name: echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : '',
-            type: 'line',
-            smooth: true,
-            showSymbol: true,
-            symbolSize: 8,
-            zlevel: 3,
-            itemStyle: {
+          data: echartDataGqs.minData ? echartDataGqs.minData.data : [],
+        },
+        {
+          name: echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : '',
+          type: 'line',
+          smooth: true,
+          showSymbol: true,
+          symbolSize: 8,
+          zlevel: 3,
+          itemStyle: {
+            color: '#fc8452',
+            borderColor: '#a3c8d8',
+          },
+          lineStyle: {
+            normal: {
+              width: 2,
               color: '#fc8452',
-              borderColor: '#a3c8d8',
-            },
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: '#fc8452',
-              },
             },
-       
-            data:echartDataGqs.aveValue ? echartDataGqs.aveValue.data : [],
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+
+          data: echartDataGqs.aveValue ? echartDataGqs.aveValue.data : [],
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 </script>
 
 <style scoped lang="less">
-  .echartLine {
+.echartLine {
+  width: 100%;
+  height: 100%;
+
+  .line {
     width: 100%;
     height: 100%;
-    .line {
-      width: 100%;
-      height: 100%;
-    }
   }
+}
 </style>

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine1.vue

@@ -10,6 +10,9 @@ import { ref, nextTick, reactive, watch, defineProps } from 'vue';
 let props = defineProps({
     echartDataSg: {
         type: Object,
+    },
+    lengedDataName: {
+        type: String,
     }
 })
 
@@ -42,6 +45,26 @@ function getOption() {
                     fontSize: 12,
                 },
             },
+            legend: {
+                align: 'left',
+                right: '50%',
+                top: '0%',
+                type: 'plain',
+                textStyle: {
+                    color: '#7ec7ff',
+                    fontSize: 14,
+                },
+                // icon:'rect',
+                itemGap: 25,
+                itemWidth: 18,
+                icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+                data: [
+                    {
+                        name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
+                    },
+               
+                ],
+            },
             xAxis: [
                 {
                     type: 'category',
@@ -109,7 +132,7 @@ function getOption() {
             yAxis: [
                 {
                     boundaryGap: false,
-                    // name: '(%)',
+                    name: props.lengedDataName ? props.lengedDataName : '',
                     type: 'value',
                     max: 50,
                     axisLabel: {
@@ -120,7 +143,7 @@ function getOption() {
                     nameTextStyle: {
                         color: '#fff',
                         fontSize: 12,
-                        lineHeight: 2,
+                        lineHeight: 5,
                     },
                     splitLine: {
                         lineStyle: {

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine2.vue

@@ -36,8 +36,8 @@ function getOption() {
 
             legend: {
                 align: 'left',
-                right: '5%',
-                top: '5%',
+                right: '50%',
+                top: '0%',
                 type: 'plain',
                 textStyle: {
                     color: '#7ec7ff',
@@ -49,14 +49,9 @@ function getOption() {
                 icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
                 data: [
                     {
-                        name: '最小值',
-                    },
-                    {
-                        name: '最大值',
-                    },
-                    {
-                        name: '平均值',
+                        name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
                     },
+               
                 ],
             },
 

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

@@ -13,7 +13,13 @@
             </div>
         </div>
         <div class="bot-area">
-            <echartLine :echartDataGq="echartDataFc" :maxY="maxY"></echartLine>
+            <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>
     </div>
 </template>
@@ -51,6 +57,8 @@ let echartDataFc = reactive({
     },
     xData: []
 })
+let echartDw=ref('(mg/m³)')
+let echartDw1=ref('(%)')
 
 //顶部区域选项切换
 function topAreaClick(index) {
@@ -87,7 +95,7 @@ watch(() => props.listData, (val) => {
                 content: [
                     { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--', },
                     { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--', },
-                    { ids: 2, label: '喷雾水压', value: el.readData.waterPressure || '--', },
+                    { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--', },
                     { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--', },
                 ],
             },)
@@ -151,7 +159,8 @@ watch(() => props.listData, (val) => {
                 text-align: center;
                 position: absolute;
                 left: 50%;
-                top: 3%;
+                top: 2%;
+                font-size: 16px;
                 transform: translate(-50%, 0);
             }
 
@@ -172,22 +181,22 @@ watch(() => props.listData, (val) => {
                     width: 50%;
                     height: 50%;
                     background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-                    background-size: 82% 50%;
+                    background-size: 88% 50%;
 
                     .item-label {
                         position: absolute;
-                        left: 18%;
+                        left: 14%;
                         top: 50%;
                         transform: translate(0, -44%);
-                        font-size: 12px;
+                        // font-size: 12px;
                     }
 
                     .item-value {
                         position: absolute;
-                        right: 18%;
+                        right: 14%;
                         top: 50%;
                         transform: translate(0, -44%);
-                        font-size: 12px;
+                        // font-size: 12px;
                         font-family: 'douyuFont';
                         color: #3df6ff;
                     }
@@ -208,7 +217,8 @@ watch(() => props.listData, (val) => {
                 text-align: center;
                 position: absolute;
                 left: 50%;
-                top: 3%;
+                top: 2%;
+                font-size: 16px;
                 transform: translate(-50%, 0);
             }
 
@@ -231,22 +241,22 @@ watch(() => props.listData, (val) => {
                     width: 50%;
                     height: 50%;
                     background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-                    background-size: 82% 50%;
+                    background-size: 88% 50%;
 
                     .item-label {
                         position: absolute;
-                        left: 18%;
+                        left: 14%;
                         top: 50%;
                         transform: translate(0, -44%);
-                        font-size: 12px;
+                        // font-size: 12px;
                     }
 
                     .item-value {
                         position: absolute;
-                        right: 18%;
+                        right: 14%;
                         top: 50%;
                         transform: translate(0, -44%);
-                        font-size: 12px;
+                        // font-size: 12px;
                         font-family: 'douyuFont';
                         color: #3df6ff;
                     }
@@ -257,8 +267,27 @@ watch(() => props.listData, (val) => {
 
     .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;
+
+            .text-t {
+                font-family: 'douyuFont';
+                font-size: 16px;
+            }
+        }
+        .echart-boxd{
+            width: 100%;
+            height: calc(100% - 40px);
+        }
+       
     }
 }
 </style>

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

@@ -39,7 +39,11 @@
             <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">{{ items.title }}</div>
+                        <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>
@@ -52,7 +56,7 @@
                 </div>
             </div>
             <div class="echart-box">
-                <echartLine1 :echartDataSg="echartDataSg"></echartLine1>
+                <echartLine1 :echartDataSg="echartDataSg" :lengedDataName="echartDataSg.lengedDataName"></echartLine1>
             </div>
         </div>
     </div>
@@ -84,6 +88,7 @@ let echartDataSg = reactive({
     xData: [],
     yData: [],
     lengedData: 'O₂',
+    lengedDataName:'(%)'
 })
 let echartDataSgList = reactive<any[]>([])
 //束管实时数据选项点击
@@ -91,6 +96,9 @@ 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 => {
@@ -132,7 +140,6 @@ function getSgClick(items) {
 }
 
 watch(() => props.listData, (val, val1) => {
-    console.log(val, '火灾详情')
     echartDataGq.xData.length = 0
     echartDataGq.maxData.data.length = 0
     echartDataSgList.length = 0
@@ -359,7 +366,7 @@ watch(() => props.listData, (val, val1) => {
             .title {
                 font-family: 'douyuFont';
                 font-size: 16px;
-                color: #3df6ff;
+                // color: #3df6ff;
             }
         }
 
@@ -388,7 +395,7 @@ watch(() => props.listData, (val, val1) => {
                 line-height: 30px;
                 font-family: 'douyuFont';
                 font-size: 16px;
-                color: #3df6ff;
+                // color: #3df6ff;
             }
         }
 

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

@@ -1,28 +1,35 @@
 <template>
     <div class="gasPage">
         <div class="top-area" v-if="topAreaListWs.length != 0">
-            <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 :class="{
-                            'box-value': items.val == 0 && items.name == '报警状态',
-                            'box-value1': items.val == 101 && items.name == '报警状态',
-                            'box-value2': items.val == 102 && items.name == '报警状态',
-                            'box-value3': items.val == 103 && items.name == '报警状态',
-                            'box-value4': items.val == 104 && items.name == '报警状态',
-                            'box-value5': items.val == 201 && items.name == '报警状态',
-                        }">{{ items.val == 0 && items.name == '报警状态' ? '正常' : items.val == 101 && items.name == '报警状态'
-    ? '较低风险'
-    : items.val == 102 && items.name == '报警状态' ? '低风险' : items.val == 103 && items.name == '报警状态' ?
-        '中风险' :
-        items.val == 104 && items.name == '报警状态' ? '高风险' : items.val == 201 && items.name == '报警状态' ?
-            '报警' :
-            items.val }}</span>
+            <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>
                 </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'">
@@ -64,6 +71,8 @@ let topAreaListWs = reactive<any[]>([])
 //瓦斯监控列表数据
 let cardListWs = reactive<any[]>([])
 
+let warnText = ref(0)
+
 
 
 watch(() => props.listData, (val) => {
@@ -71,25 +80,35 @@ watch(() => props.listData, (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: '抽采泵流量', 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('&'))
+            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.readTime || '--' },
+                    { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
                     { id: 3, label: '测点状态', value: el.warnFlag },
                 ]
             })
@@ -112,94 +131,144 @@ watch(() => props.listData, (val) => {
     box-sizing: border-box;
 
     .top-area {
-        height: 19%;
-        margin: 10px 0px;
-        display: flex;
-        justify-content: space-between;
-
-        .top-box {
-            position: relative;
-            width: 330px;
-            height: 128px;
-            background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
-            background-size: 100% 100%;
-
-            .box-label {
-                position: absolute;
-                left: 50%;
-                top: 86px;
-                transform: translate(-50%, 0);
-                width: 80%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                word-wrap: break-word;
+        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;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .text-t {
+                font-family: 'douyuFont';
+                font-size: 16px;
             }
+        }
 
-            .box-values {
-                position: absolute;
-                left: 50%;
-                top: 26px;
-                transform: translate(-50%, 0);
-                width: 84%;
-                height: 40px;
+        .top-bt {
+            height: 276px;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+
+            .bt-box {
+                width: 50%;
+                height: 100%;
                 display: flex;
-                justify-content: space-between;
+                justify-content: center;
                 align-items: center;
-                flex-wrap: wrap;
 
-                .value-b {
-                    width: calc(50% - 10px);
-                    height: 100%;
-                    display: flex;
-                    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%;
 
-                    span {
-                        font-size: 14px;
+                    .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);
+                                }
+                            }
 
-                        &:last-child {
-                            font-family: 'douyuFont';
 
-                            color: rgb(0, 242, 255);
                         }
-                    }
 
-                    .box-value {
-                        color: rgb(145, 230, 9) !important;
                     }
 
-                    .box-value1 {
-                        color: rgb(0, 242, 255) !important;
-                    }
 
-                    .box-value2 {
-                        color: #ffff35 !important;
-                    }
+                }
 
-                    .box-value3 {
-                        color: #ffbe69 !important;
-                    }
+                .box-value {
+                    font-family: 'douyuFont';
+                    font-size: 24px;
+                    color: rgb(145, 230, 9) !important;
+                }
 
-                    .box-value4 {
-                        color: #ff6f00 !important;
-                    }
+                .box-value1 {
+                    font-family: 'douyuFont';
+                    font-size: 24px;
+                    color: rgb(0, 242, 255) !important;
+                }
 
-                    .box-value5 {
-                        color: #ff0000 !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;
+                }
+            }
 
         }
+
     }
 
 
 
     .bot-area {
-        height: calc(81% - 20px);
+        height: calc(100% - 356px);
         padding: 10px 15px 0px 15px;
         background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
@@ -216,12 +285,6 @@ watch(() => props.listData, (val) => {
                 font-family: 'douyuFont';
                 font-size: 16px;
             }
-
-            // .select-b {
-            //     display: flex;
-            //     justify-content: flex-start;
-            //     align-items: center;
-            // }
         }
 
         .content-b {
@@ -270,7 +333,7 @@ watch(() => props.listData, (val) => {
                 @media screen and (max-width:1920px) {
                     .item-r {
                         position: absolute;
-                        left:132px;
+                        left: 132px;
                         top: 50%;
                         transform: translate(0, -50%);
                         height: 128px;
@@ -429,7 +492,7 @@ watch(() => props.listData, (val) => {
                 @media screen and (max-width:1920px) {
                     .item-r {
                         position: absolute;
-                        left:132px;
+                        left: 132px;
                         top: 50%;
                         transform: translate(0, -50%);
                         height: 128px;

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

@@ -138,7 +138,7 @@
                     <div class="title-text">{{ `${type}趋势` }}</div>
                 </div>
                 <div class="echarts-box">
-                    <echartLine1 :echartDataSg="echartDataSg1"></echartLine1>
+                    <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName"></echartLine1>
                 </div>
             </div>
         </div>
@@ -236,6 +236,8 @@ let echartDataSg1 = reactive({
     xData: [],
     yData: [],
     lengedData: 'O₂',
+    lengedDataName:'(%)'
+    
 })
 let echartDataSgList = reactive<any[]>([])
 
@@ -269,6 +271,8 @@ function btnClick(item, ind) {
     echartDataSg1.xData.length = 0
     echartDataSg1.yData.length = 0
     echartDataSg1.lengedData = type.value
+    echartDataSg1.lengedDataName = item.dw
+    
     switch (type.value) {
         case 'O₂':
             echartDataSgList.forEach(el => {
@@ -756,17 +760,18 @@ watch(() => props.listData, (val) => {
 
     .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;
-            padding: 0px 15px;
             display: flex;
             justify-content: space-between;
             align-items: center;
 
             .echart-label {
+                font-family: 'douyuFont';
                 font-size: 16px;
                 color: #fff;
             }
@@ -779,17 +784,18 @@ watch(() => props.listData, (val) => {
 
     .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;
-            padding: 0px 15px;
             display: flex;
             justify-content: space-between;
             align-items: center;
 
             .echart-label {
+                font-family: 'douyuFont';
                 font-size: 16px;
                 color: #fff;
             }

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

@@ -35,7 +35,13 @@
       </div>
     </div>
     <div class="bot-area">
-      <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
+      <div class="title-t">
+        <div class="text-t">通风信息状态监测</div>
+      </div>
+      <div class="echart-boxd">
+        <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
+      </div>
+
     </div>
   </div>
 </template>
@@ -64,6 +70,10 @@ const echartDataFc1 = reactive({
     lengedData: '回风量',
     data: []
   },
+  aveValue: {
+    lengedData: '需风量',
+    data: []
+  },
   xData: [],
 });
 
@@ -83,6 +93,8 @@ watch(
     console.log(val, '详情数据');
     echartDataFc1.maxData.data.length = 0;
     echartDataFc1.minData.data.length = 0;
+    echartDataFc1.aveValue.data.length = 0;
+
     echartDataFc1.xData.length = 0;
     topAreaList.length = 0;
     if (JSON.stringify(val.common) != '{}') {
@@ -124,6 +136,12 @@ watch(
         val.common.history.forEach((v) => {
           echartDataFc1.maxData.data.push(parseFloat(v.jin));
           echartDataFc1.minData.data.push(parseFloat(v.hui));
+          if(centerAreaListB1[2].content && centerAreaListB1[2].content!='--'){
+            echartDataFc1.aveValue.data.push(centerAreaListB1[2].content);
+          }else {
+            echartDataFc1.aveValue.data.push(0);
+          }
+       
           echartDataFc1.xData.push(v.time);
         });
       }
@@ -165,7 +183,8 @@ watch(
       .top-title {
         position: absolute;
         left: 50%;
-        top: 4%;
+        top: 2%;
+        font-size: 16px;
         transform: translate(-50%, 0);
       }
 
@@ -186,22 +205,20 @@ watch(
           width: 50%;
           height: 50%;
           background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-          background-size: 72% 54%;
+          background-size: 82% 54%;
 
           .item-label {
             position: absolute;
-            left: 20%;
+            left: 16%;
             top: 50%;
             transform: translate(0, -44%);
-            font-size: 12px;
           }
 
           .item-value {
             position: absolute;
-            right: 21%;
+            right: 16%;
             top: 50%;
             transform: translate(0, -32%);
-            font-size: 12px;
             font-family: 'douyuFont';
             color: #3df6ff;
           }
@@ -291,6 +308,8 @@ watch(
         background-size: 100% 100%;
 
         .box-label {
+          font-size: 16px;
+          color: #06edcd;
           text-align: center;
         }
       }
@@ -327,8 +346,27 @@ watch(
 
   .bot-area {
     height: calc(100% - 58% - 30px);
+    padding: 10px 15px;
     background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
     background-size: 100% 100%;
+    box-sizing: border-box;
+    .title-t {
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .text-t {
+        font-family: 'douyuFont';
+        font-size: 16px;
+      }
+    }
+
+    .echart-boxd {
+      width: 100%;
+      height: calc(100% - 30px);
+    }
+
   }
 
 }