设备预警-通风监测接口对接

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

@@ -690,11 +690,12 @@ export const columnsJd = [
 export const topAreaList = [
   {
     id: 0,
-    title: '',
+    title: '15218采煤工作面粉尘',
     content: [
       { ids: 0, label: '温度(°C)', value: 16.3 },
       { ids: 1, label: '粉尘浓度(%)', value: 16.3 },
-     
+      { ids: 2, label: '喷雾水压', value: 16.3 },
+      { ids: 3, label: '喷雾装置', value: 16.3 },
     ],
   },
   {
@@ -725,6 +726,12 @@ export const centerAreaListT = [
   { id: 2, label: '呼尘加权容许浓度(mg/m³)' },
   { id: 3, label: '爆炸浓度(mg/m³)' },
 ];
+//中间区域数据-通风
+export const centerAreaListT1 = [
+  { id: 0, label: '进风量(m³/min)' },
+  { id: 1, label: '回风量(m³/min)' },
+  { id: 2, label: '需风量(m³/min)' },
+];
 //中间区域底部数据-粉尘
 export const centerAreaListB = [
   {
@@ -744,6 +751,22 @@ export const centerAreaListB = [
     content: [{ label: '0.00' }],
   },
 ];
+//中间区域底部数据-通风
+export const centerAreaListB1 = [
+  {
+    id: 0,
+    content: '',
+  },
+  {
+    id: 1,
+    content:'',
+  },
+  {
+    id: 2,
+    content: '',
+  },
+  
+];
 //粉尘图表数据
 export const echartDataFc = {
   maxData: [45, 42, 43, 46, 44, 41, 42, 45, 47, 46, 48],

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

@@ -1,269 +1,181 @@
 <template>
-    <div class="echartLine">
-        <div class="line" ref="line"></div>
-    </div>
+  <div class="echartLine">
+    <div class="line" ref="line"></div>
+  </div>
 </template>
-  
+
 <script lang="ts" setup>
-import { onMounted, ref, defineEmits, nextTick, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
-import * as echarts from 'echarts'
+  import {defineProps, onMounted, ref, defineEmits, nextTick, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+  import * as echarts from 'echarts';
 
-let props = defineProps({
+  let props = defineProps({
     echartDataGq: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-})
-//获取dom元素节点
-let line = ref<any>()
-watch(() => props.echartDataGq, (data: never[]) => {
-    console.log(data, '光钎图表数据')
-    // props.echartDataGq = data
-    getOption()
-}, { immediate: true })
-function getOption() {
+      type: Object,
+    },
+  });
+  //获取dom元素节点
+  let line = ref<any>();
+  let echartDataGqs=reactive({})
+  watch(
+    () => props.echartDataGq,
+    (data) => {
+      console.log(data, '光钎图表数据');
+      echartDataGqs=Object.assign({},data)
+      getOption();
+    },
+    { immediate: true,deep:true }
+  );
+  function getOption() {
     nextTick(() => {
-        const myChart = echarts.init(line.value)
-        let option = {
-            grid: {
-                top: '6%',
-                left: '4%',
-                bottom: '18%',
-                right: '5%',
-                //   containLabel: true,
+      const myChart = echarts.init(line.value);
+      let option = {
+        grid: {
+          top: '6%',
+          left: '4%',
+          bottom: '8%',
+          right: '5%',
+            containLabel: true,
+        },
+        tooltip: {
+          trigger: 'axis',
+         
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLabel: {
+              formatter: '{value}',
+              fontSize: 14,
+              margin: 20,
+              textStyle: {
+                color: '#b3b8cc',
+              },
             },
-            tooltip: {
-                trigger: 'axis',
-                //   axisPointer: {
-                //     lineStyle: {
-                //       color: {
-                //         type: 'linear',
-                //         x: 0,
-                //         y: 0,
-                //         x2: 0,
-                //         y2: 1,
-                //         colorStops: [
-                //           {
-                //             offset: 0,
-                //             color: 'rgba(255,255,255,0)', // 0% 处的颜色
-                //           },
-                //           {
-                //             offset: 0.5,
-                //             color: 'rgba(255,255,255,1)', // 100% 处的颜色
-                //           },
-                //           {
-                //             offset: 1,
-                //             color: 'rgba(255,255,255,0)', // 100% 处的颜色
-                //           },
-                //         ],
-                //         global: false, // 缺省为 false
-                //       },
-                //     },
-                //   },
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(14, 53, 95)',
+              },
             },
-            xAxis: [
-                {
-                    type: 'category',
-                    boundaryGap: false,
-                    axisLabel: {
-                        formatter: '{value}',
-                        fontSize: 14,
-                        margin: 20,
-                        textStyle: {
-                            color: '#b3b8cc',
-                        },
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(14, 53, 95)',
-                        },
-                    },
-                    splitLine: {
-                        show: false,
-                        //   lineStyle: {
-                        //     color: '#243753',
-                        //   },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    data: props.echartDataGq.xData,
-                },
-            ],
-            yAxis: [
-                {
-                    boundaryGap: false,
-                    type: 'value',
-                    max: 50,
-                    axisLabel: {
-                        textStyle: {
-                            color: '#b3b8cc',
-                        },
-                    },
-                    nameTextStyle: {
-                        color: '#fff',
-                        fontSize: 12,
-                        lineHeight: 40,
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: 'rgba(14, 53, 95)',
-                        },
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: 'rgba(14, 53, 95)',
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                },
-            ],
-            series: [
-                {
-                    name: '最大值',
-                    type: 'line',
-                    smooth: true,
-                    showSymbol: true,
-                    symbolSize: 8,
-                    zlevel: 3,
-                    itemStyle: {
-                        color: '#19a3df',
-                        borderColor: '#a3c8d8',
-                    },
-                    lineStyle: {
-                        normal: {
-                            width: 2,
-                            color: '#19a3df',
-                        },
-                    },
-                    // areaStyle: {
-                    //   normal: {
-                    //     color: new echarts.graphic.LinearGradient(
-                    //       0,
-                    //       0,
-                    //       0,
-                    //       1,
-                    //       [
-                    //         {
-                    //           offset: 0,
-                    //           color: 'rgba(88,255,255,0.2)',
-                    //         },
-                    //         {
-                    //           offset: 0.8,
-                    //           color: 'rgba(88,255,255,0)',
-                    //         },
-                    //       ],
-                    //       false
-                    //     ),
-                    //   },
-                    // },
-                    data: props.echartDataGq.maxData,
-                },
-                {
-                    name: '最小值',
-                    type: 'line',
-                    smooth: true,
-                    showSymbol: true,
-                    symbolSize: 8,
-                    zlevel: 3,
-                    itemStyle: {
-                        color: '#4fffad',
-                        borderColor: '#a3c8d8',
-                    },
-                    lineStyle: {
-                        normal: {
-                            width: 2,
-                            color: '#4fffad',
-                        },
-                    },
-                    // areaStyle: {
-                    //   normal: {
-                    //     color: new echarts.graphic.LinearGradient(
-                    //       0,
-                    //       0,
-                    //       0,
-                    //       1,
-                    //       [
-                    //         {
-                    //           offset: 0,
-                    //           color: 'rgba(88,255,255,0.2)',
-                    //         },
-                    //         {
-                    //           offset: 0.8,
-                    //           color: 'rgba(88,255,255,0)',
-                    //         },
-                    //       ],
-                    //       false
-                    //     ),
-                    //   },
-                    // },
-                    data: props.echartDataGq.minData,
-                },
-                {
-                    name: '平均值',
-                    type: 'line',
-                    smooth: true,
-                    showSymbol: true,
-                    symbolSize: 8,
-                    zlevel: 3,
-                    itemStyle: {
-                        color: '#fc8452',
-                        borderColor: '#a3c8d8',
-                    },
-                    lineStyle: {
-                        normal: {
-                            width: 2,
-                            color: '#fc8452',
-                        },
-                    },
-                    // areaStyle: {
-                    //   normal: {
-                    //     color: new echarts.graphic.LinearGradient(
-                    //       0,
-                    //       0,
-                    //       0,
-                    //       1,
-                    //       [
-                    //         {
-                    //           offset: 0,
-                    //           color: 'rgba(88,255,255,0.2)',
-                    //         },
-                    //         {
-                    //           offset: 0.8,
-                    //           color: 'rgba(88,255,255,0)',
-                    //         },
-                    //       ],
-                    //       false
-                    //     ),
-                    //   },
-                    // },
-                    data: props.echartDataGq.aveValue,
-                },
-            ],
-        }
-        myChart.setOption(option)
-        window.onresize = function () {
-            myChart.resize()
-        }
-    })
-}
-
-
+            splitLine: {
+              show: false,
+              //   lineStyle: {
+              //     color: '#243753',
+              //   },
+            },
+            axisTick: {
+              show: false,
+            },
+            data: echartDataGqs.xData,
+          },
+        ],
+        yAxis: [
+          {
+            boundaryGap: false,
+            type: 'value',
+            max: 5000,
+            axisLabel: {
+              textStyle: {
+                color: '#b3b8cc',
+              },
+            },
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 12,
+              lineHeight: 40,
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(14, 53, 95)',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(14, 53, 95)',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '最大值',
+            type: 'line',
+            smooth: true,
+            showSymbol: true,
+            symbolSize: 8,
+            zlevel: 3,
+            itemStyle: {
+              color: '#19a3df',
+              borderColor: '#a3c8d8',
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#19a3df',
+              },
+            },
+            data:echartDataGqs.maxData,
+          },
+          {
+            name: '最小值',
+            type: 'line',
+            smooth: true,
+            showSymbol: true,
+            symbolSize: 8,
+            zlevel: 3,
+            itemStyle: {
+              color: '#4fffad',
+              borderColor: '#a3c8d8',
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#4fffad',
+              },
+            },
+            data:echartDataGqs.minData,
+          },
+          {
+            name: '平均值',
+            type: 'line',
+            smooth: true,
+            showSymbol: true,
+            symbolSize: 8,
+            zlevel: 3,
+            itemStyle: {
+              color: '#fc8452',
+              borderColor: '#a3c8d8',
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#fc8452',
+              },
+            },
+       
+            data: echartDataGqs.aveValue,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
 </script>
-  
-<style scoped lang='less'>
-.echartLine {
+
+<style scoped lang="less">
+  .echartLine {
     width: 100%;
     height: 100%;
-
     .line {
-        width: 100%;
-        height: 100%;
+      width: 100%;
+      height: 100%;
     }
-}
-</style>
+  }
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="dustPage">
-    <div class="top-area">
+    <div class="top-area" v-if="isShowTop">
       <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">
@@ -13,34 +13,46 @@
     </div>
     <div class="center-area">
       <div class="center-t">
-        <div class="t-box" v-for="(item, index) in centerAreaListT" :key="index">
+        <div class="t-box" v-for="(item, index) in centerAreaListT1" :key="index">
           <div class="box-label">{{ item.label }}</div>
         </div>
       </div>
       <div class="center-b">
-        <div class="b-box" v-for="(item, index) in centerAreaListB" :key="index">
-          <div class="box-label" v-for="(items, ind) in item.content" :key="ind">{{ items.label }}</div>
+        <div class="b-box" v-for="(item, index) in centerAreaListB1" :key="index">
+          <div class="box-label">{{ item.content }}</div>
         </div>
       </div>
     </div>
-    <div class="bot-area">
-      <echartLine :echartDataGq="echartDataFc" />
+    <div :class="isShowTop ? 'bot-area' : 'bot-area1'">
+      <echartLine v-if="alive" :echartDataGq="echartDataFc1" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent, defineProps } from 'vue';
-  import { topAreaList, centerAreaListT, centerAreaListB, echartDataFc } from '../fire.data';
+  import { ref, nextTick,  reactive, watch, defineProps } from 'vue';
+  import { centerAreaListT1, centerAreaListB1 } from '../fire.data';
   import echartLine from './common/echartLine.vue';
 
   let props = defineProps({
     listData: Object,
   });
 
+  //是否显示报警区域
+  let isShowTop = ref(true);
+  //报警区域数据
+  let topAreaList = reactive<any[]>([]);
   //顶部区域激活选项
   let activeIndex = ref(0);
+  //通风图表数据
+  const echartDataFc1 = reactive({
+    maxData: [],
+    minData: [],
+    aveValue: [],
+    xData: [],
+  });
 
+  let alive = ref(true);
   //顶部区域选项切换
   function topAreaClick(index) {
     activeIndex.value = index;
@@ -50,7 +62,48 @@
     () => props.listData,
     (val) => {
       console.log(val, '详情数据');
-      
+      if (JSON.stringify(val) != '{}') {
+        isShowTop.value = val.warnFlag;
+        alive.value = false;
+        nextTick(() => {
+          alive.value = true;
+          topAreaList.length = 0;
+          val.warnDevices.forEach((el) => {
+            topAreaList.push({
+              title: el.typeName,
+              content: [
+                { ids: 0, label: '设备类型', value: el.datalist[0].typeName },
+                {
+                  ids: 1,
+                  label: '报警等级',
+                  value:
+                    el.datalist[0].warnLevel == 0
+                      ? '正常'
+                      : el.datalist[0].warnLevel == 101
+                      ? '低风险'
+                      : el.datalist[0].warnLevel == 102
+                      ? '中风险'
+                      : el.datalist[0].warnLevel == 103
+                      ? '高风险'
+                      : '报警',
+                },
+                { ids: 2, label: '报警描述', value: el.datalist[0].warnDes },
+              ],
+            });
+          });
+          centerAreaListB1[0].content = val.jin;
+          centerAreaListB1[1].content = val.hui;
+          centerAreaListB1[2].content = val.xufengliang;
+          echartDataFc1.maxData.length = 0;
+          echartDataFc1.minData.length = 0;
+          echartDataFc1.xData.length = 0;
+          val.history.forEach((v) => {
+            echartDataFc1.maxData.push(parseFloat(v.jin));
+            echartDataFc1.minData.push(parseFloat(v.hui));
+            echartDataFc1.xData.push(v.time);
+          });
+        });
+      }
     },
     { immediate: true }
   );
@@ -68,6 +121,8 @@
       display: flex;
       justify-content: space-between;
       margin-bottom: 10px;
+      padding: 0px 15px;
+      box-sizing: border-box;
 
       .top-box {
         position: relative;
@@ -184,13 +239,13 @@
 
       .center-t {
         height: 50%;
-        padding: 0px 80px;
+        // padding: 0px 80px;
         display: flex;
         justify-content: space-around;
         align-items: center;
         background: url('../../../../../assets/images/fire/dz.png') no-repeat;
         background-size: 100% 100%;
-        box-sizing: border-box;
+        // box-sizing: border-box;
 
         .t-box {
           width: 218px;
@@ -205,11 +260,11 @@
 
       .center-b {
         height: 50%;
-        padding: 0px 80px;
+        // padding: 0px 80px;
         display: flex;
         justify-content: space-around;
         align-items: center;
-        box-sizing: border-box;
+        // box-sizing: border-box;
 
         .b-box {
           width: 218px;
@@ -238,5 +293,10 @@
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
       background-size: 100% 100%;
     }
+    .bot-area1 {
+      height: calc(100% - 278px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+      background-size: 100% 100%;
+    }
   }
 </style>