预警管控-瓦斯监测

src/views/vent/home/clique/components/echart-scene.vue

@@ -13,7 +13,7 @@
 </template>
   
 <script lang="ts" setup>
-import { defineProps, ref, nextTick, reactive, watch,onMounted } from 'vue';
+import { defineProps, ref, nextTick, reactive, watch, onMounted } from 'vue';
 import * as echarts from 'echarts';
 //获取dom元素节点
 let scene = ref<any>();
@@ -31,158 +31,154 @@ let echartData = reactive([
 let xData = reactive([])
 let yData = reactive([])
 
-function deepCopy(obj) {
-    if (typeof obj !== 'object') {
-        return obj
-    }
-    let newobj = {}
-    for (var attr in obj) {
-        newobj[attr] = obj[attr]
-    }
-    return newobj
-}
+
 
 function getOption() {
     nextTick(() => {
-        xData.length = 0
-        yData.length = 0
-        echartData.forEach((a, b) => {
-            xData.push(a.name)
-            yData.push(a.value)
-        })
-        let startColor = ['rgba(27, 164, 255,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 225, 255,.6)']
-        let borderStartColor = ['#1ba4ff', '#1ff8fb', '#9ae1ff']
-        let RealData = []
-        let borderData = []
-        echartData.forEach((item, index) => {
-            let newobj = deepCopy(item)
-            let newobj1 = deepCopy(item)
-            RealData.push(newobj)
-            borderData.push(newobj1)
-        })
-        RealData.forEach((item, index) => {
-            item.itemStyle = {
-                normal: {
-                    color: startColor[index]
-                }
-            }
-        })
-        borderData.forEach((item, index) => {
-            item.itemStyle = {
-                normal: {
-                    color: borderStartColor[index]
-                }
+        let placeHolderStyle = {
+            normal: {
+                color: '#fff',
+                opacity: 0.1
+            },
+            emphasis: {
+                color: '#fff',
+                opacity: .1
             }
-        })
-        console.log(scene.value,'scene')
+        }
+        console.log(scene.value, 'scene')
         const myChart = echarts.init(scene.value);
         let option = {
-            legend: [
-                {
-                    // orient: 'vertical',
-                    x: '65%',
-                    y: '12%',
-                    itemWidth: 10,
-                    itemHeight: 10,
-                    align: 'left',
-                    textStyle: {
-                        fontSize: 14,
-                        color: '#1ba4ff'
-                    },
-                    data: ['进风区']
-                },
-                {
-                    // orient: 'vertical',
-                    x: '65%',
-                    y: '45%',
-                    itemWidth: 10,
-                    itemHeight: 10,
-                    align: 'left',
-                    textStyle: {
-                        fontSize: 14,
-                        color: '#1ff8fb'
-                    },
-                    data: ['用风区']
-                },
-                {
-                    // orient: 'vertical',
-                    x: '65%',
-                    y: '76%',
-                    itemWidth: 10,
-                    itemHeight: 10,
-                    align: 'left',
-                    textStyle: {
-                        fontSize: 14,
-                        color: '#9ae1ff'
-                    },
-                    data: ['回风区']
-                }
-            ],
+            color: ['#DA64A8', '#7A54CF', '#47B7E1'],
+            textStyle: {
+                fontSize: 14,
+                color: '#40E7F4 '
+            },
+            grid: {
+                top: '6%',
+                left: '2%',
+                bottom: '6%',
+                right: '2%',
+                containLabel: true,
+            },
             tooltip: {
-                formatter: '{b}:{c}'
+                trigger: 'item',
+                formatter: "{a} : {b}{c} ({d}%)"
             },
-            series: [
-                // 主要展示层的
-                {
-                    radius: ['35%', '70%'],
-                    center: ['30%', '50%'],
-                    type: 'pie',
-                    z: 10,
-                    label: {
-                        normal: {
-                            show: false
-                        },
-                        emphasis: {
-                            show: false
-                        }
-                    },
-                    labelLine: {
+            // legend: {
+            //     show: true,
+            //     top: '10%',
+            //     right: '10%',
+            //     data: ['当日人员', '施工人员', '管理人员'],
+            //     textStyle: {
+            //         color: '#fff ',
+            //         fontSize: 14
+            //     },
+            //     formatter(name) {
+            //         return name
+            //     },
+            //     itemGap: 16
+            // },
+            series: [{
+                name: '当日人员',
+                type: 'pie',
+                radius: ['40%', '41%'],
+                label: true,
+                startAngle: 50,
+                clockWise: true,
+                hoverAnimation: true,
+                hoverOffset: 8,
+                data: [{
+                    value: 300,
+                    name: '到场总人数',
+                    itemStyle: {
                         normal: {
-                            show: false
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                // 0% 处的颜色   
+                                offset: 0, color: '#FF7671'
+                            },
+                            {
+
+                                // 100% 处的颜色
+                                offset: 1, color: '#A14AFF'
+                            }],
+
+                                false)
+
                         },
-                        emphasis: {
-                            show: false
-                        }
-                    },
+                    }
+                },
+                {
+                    value: 25,
+                    name: '未到场总人数',
+                    hoverAnimation: true,
+                    itemStyle: placeHolderStyle
+                }
+                ]
+            }, {
+                name: '施工人员',
+                type: 'pie',
+                radius: ['30%', '31%'],
+                label: false,
+                startAngle: 200,
+                clockWise: true,
+                hoverAnimation: true,
+                hoverOffset: 3,
+                data: [{
+                    value: 120,
+                    name: '到场人数',
                     itemStyle: {
-                        normal: {
-                            borderWidth: 5,
-                            borderColor: 'rgba(7, 45, 84,.9)'
+                        color: { // 完成的圆环的颜色
+                            colorStops: [{
+                                offset: 0,
+                                color: '#A568FF' // 0% 处的颜色
+                            }, {
+                                offset: 1,
+                                color: '#006CFF' // 100% 处的颜色
+                            }]
                         }
-                    },
-                    data: RealData
+                    }
                 },
-                // 边框的设置
                 {
-                    radius: ['35%', '42%'],
-                    center: ['30%', '50%'],
-                    type: 'pie',
-                    z: 5,
-                    label: {
-                        normal: {
-                            show: false
-                        },
-                        emphasis: {
-                            show: false
-                        }
-                    },
-                    labelLine: {
-                        normal: {
-                            show: false
-                        },
-                        emphasis: {
-                            show: false
+                    value: 15,
+                    hoverAnimation: true,
+                    name: '未到场人数',
+                    itemStyle: placeHolderStyle
+                }
+                ]
+            }, {
+                name: '管理人员',
+                type: 'pie',
+                radius: ['15%', '16%'],
+                label: false,
+                startAngle: 80,
+                clockWise: true, //顺时加载
+                hoverAnimation: true,
+                hoverOffset: 3,
+                data: [{
+                    value: 160,
+                    name: '到场人数',
+                    itemStyle: {
+                        color: { // 完成的圆环的颜色
+                            colorStops: [{
+                                offset: 0,
+                                color: '#57FFE0' // 0% 处的颜色
+                            }, {
+                                offset: 1,
+                                color: '#3469E2' // 100% 处的颜色
+                            }]
                         }
-                    },
-
-                    animation: false,
-                    tooltip: {
-                        show: false
-                    },
-                    data: borderData
+                    }
+                },
+                {
+                    value: 10,
+                    name: '未到场人数',
+                    hoverAnimation: true, //鼠标移入变大
+                    itemStyle: placeHolderStyle
                 }
-            ]
-        }
+
+                ]
+            }]
+        };
         myChart.setOption(option);
         window.onresize = function () {
             myChart.resize();
@@ -190,7 +186,7 @@ function getOption() {
     });
 }
 
-onMounted(()=>{
+onMounted(() => {
     getOption()
 })
 </script>
@@ -252,5 +248,6 @@ onMounted(()=>{
             }
         }
     }
-}</style>
+}
+</style>
   

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

@@ -143,7 +143,7 @@ function loadZj() {
     current.value = 'closeWall'
   } else if (activeIndex.value) {
     current.value = 'mainWell'
-  }else {
+  } else {
     current.value = ''
   }
 }
@@ -206,22 +206,7 @@ function getSysWarnList(id, type) {
   timer = setInterval(() => {
     sysWarn({ sysid: id, type: type }).then((res) => {
       if (type == 'fire') {
-
-        let data=[
-          {
-            readData:{
-              temperature:10,
-              ch2val:'1.1',
-              chval:'1.1',
-              co2val:'1.1',
-              coval:'1.1',
-              gasval:'1.1'
-            },
-            readTime:'2023-12-22',
-            strinstallpos:'测试'
-          }
-        ]
-        listData.bundletube = data,
+        listData.bundletube = res.bundletube,
           listData.fiber = res.fiber
         listData.fire = res.fire,
           listData.smoke = res.smoke,

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

@@ -581,15 +581,7 @@ export const centerAreaListB1 = [
 
 
 //瓦斯
-//瓦斯顶部区域数据
-export const topAreaListWs = [
-  { id: 0, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
-  { id: 1, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
-  { id: 2, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
-  { id: 3, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
-  { id: 4, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
-  { id: 5, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
-]
+
 //测点类型列表-安全监控
 export const pointListWs = [
   { label: '测点类型1', value: 0 },
@@ -602,112 +594,7 @@ export const tabHeadList = [
   { id: 1, label: '所属单位1' },
   { id: 2, label: '所属单位2' },
   { id: 3, label: '所属单位3' },
-  { id: 4, label: '所属单位4' },
-]
-//安全监控-列表
-export const tableListWs = [
-  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
-  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
-  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
-  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
-  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
-  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
-  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
 ]
+
 //测点类型-瓦斯巡检列表
-export const pointListWs1 = [
-  { label: '测点类型1', value: 0 },
-  { label: '测点类型2', value: 1 },
-  { label: '测点类型3', value: 2 }
-]
-//瓦斯监控列表数据
-export const cardListWs = [
-  {
-      id: 0,
-      label: '甲烷',
-      value: '0.00',
-      listR: [
-          { id: 0, label: '测点编号', value: '7-1' },
-          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
-          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
-          { id: 3, label: '测点状态', value: '正常' },
-      ]
-  },
-  {
-      id: 1,
-      label: '甲烷',
-      value: '0.00',
-      listR: [
-          { id: 0, label: '测点编号', value: '7-1' },
-          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
-          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
-          { id: 3, label: '测点状态', value: '正常' },
-      ]
-  },
-  {
-      id: 2,
-      label: '甲烷',
-      value: '0.00',
-      listR: [
-          { id: 0, label: '测点编号', value: '7-1' },
-          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
-          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
-          { id: 3, label: '测点状态', value: '正常' },
-      ]
-  },
-  {
-      id: 3,
-      label: '甲烷',
-      value: '0.00',
-      listR: [
-          { id: 0, label: '测点编号', value: '7-1' },
-          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
-          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
-          { id: 3, label: '测点状态', value: '正常' },
-      ]
-  },
-  {
-      id: 4,
-      label: '甲烷',
-      value: '0.00',
-      listR: [
-          { id: 0, label: '测点编号', value: '7-1' },
-          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
-          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
-          { id: 3, label: '测点状态', value: '正常' },
-      ]
-  },
-  {
-      id: 5,
-      label: '甲烷',
-      value: '0.00',
-      listR: [
-          { id: 0, label: '测点编号', value: '7-1' },
-          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
-          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
-          { id: 3, label: '测点状态', value: '正常' },
-      ]
-  },
-  {
-      id: 6,
-      label: '甲烷',
-      value: '0.00',
-      listR: [
-          { id: 0, label: '测点编号', value: '7-1' },
-          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
-          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
-          { id: 3, label: '测点状态', value: '正常' },
-      ]
-  },
-  {
-      id: 7,
-      label: '甲烷',
-      value: '0.00',
-      listR: [
-          { id: 0, label: '测点编号', value: '7-1' },
-          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
-          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
-          { id: 3, label: '测点状态', value: '正常' },
-      ]
-  },
-]
+export const pointListWs1 = []

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

@@ -205,7 +205,7 @@ watch(() => props.listData, (val) => {
     console.log(val, 'val---')
     if (JSON.stringify(val) != '{}') {
         if (val.bundletube.length != 0) {
-            // topContent.temperature = val.temperature[0].readData.temperature
+            topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : 0
             topContent.position = val.bundletube[0].stationname
             topContent.time = val.bundletube[0].warnTime
             topContent.warn = val.bundletube[0].warnLevel == 0 ? '正常' : val.bundletube[0].warnLevel == 101 ? '低风险' : val.bundletube[0].warnLevel == 102 ? '中风险' : val.bundletube[0].warnLevel == 103 ? '高风险' : '报警'
@@ -221,7 +221,6 @@ watch(() => props.listData, (val) => {
                 el.address = val.bundletube[0].strinstallpos
             })
             console.log(mbList, '=====000000')
-
             echartDataSg1.xData.length = 0
             echartDataSg1.yData.length = 0
             echartDataSgList.length = 0

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

@@ -12,6 +12,9 @@
     echartDataGq: {
       type: Object,
     },
+    maxY:{
+      type:Number
+    }
   });
   //获取dom元素节点
   let line = ref<any>();
@@ -72,7 +75,7 @@
           {
             boundaryGap: false,
             type: 'value',
-            max: 1000,
+            max: props.maxY,
             axisLabel: {
               textStyle: {
                 color: '#b3b8cc',

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

@@ -107,7 +107,7 @@ function getOption() {
                     boundaryGap: false,
                     name: '(%)',
                     type: 'value',
-                    max: 1000,
+                    max: 2000,
                     axisLabel: {
                         textStyle: {
                             color: '#b3b8cc',

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

@@ -113,7 +113,7 @@ function getOption() {
                         padding: 0,
                     },
                     min: 0,
-                    max: 1000,
+                    max: 2000,
                     splitLine: {
                         show: true,
                         lineStyle: {

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

@@ -25,7 +25,7 @@
             </div>
         </div>
         <div class="bot-area">
-            <echartLine :echartDataGq="echartDataFc"></echartLine>
+            <echartLine :echartDataGq="echartDataFc" :maxY="maxY"></echartLine>
         </div>
     </div>
 </template>
@@ -39,6 +39,7 @@ let props = defineProps({
     listData: Object,
 });
 
+let maxY=ref(10)
 //顶部区域数据
 let topAreaList = reactive<any[]>([])
 

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

@@ -34,7 +34,7 @@
                 </a-select>
             </div>
             <div class="echart-box">
-                <echartLine :echartDataGq="echartDataGq"></echartLine>
+                <echartLine :echartDataGq="echartDataGq" :maxY="maxY"></echartLine>
             </div>
         </div>
         <!-- 底部区域 -->
@@ -86,6 +86,7 @@ let props = defineProps({
     listData: Object,
 });
 
+let maxY=ref(2000)
 //束管监测-图表数据
 let echartDataSg = reactive({
     xData: [],

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

@@ -3,7 +3,7 @@
         <div class="top-area">
             <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
                 <div class="box-label">{{ item.label }}</div>
-                <div class="box-value">{{ `${item.value}%` }}</div>
+                <div class="box-value">{{ item.value }}</div>
             </div>
         </div>
         <div class="center-area">
@@ -19,7 +19,6 @@
                         </a-select-option>
                     </a-select>
                 </div>
-
             </div>
             <div class="content-c">
                 <div class="content-head">
@@ -31,7 +30,6 @@
                         <div class="body-td">{{ item.value1 }}</div>
                         <div class="body-td">{{ item.value2 }}</div>
                         <div class="body-td">{{ item.value3 }}</div>
-                        <div class="body-td">{{ item.value4 }}</div>
                     </div>
                 </div>
             </div>
@@ -71,8 +69,22 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
-import { topAreaListWs, pointListWs, tabHeadList, tableListWs, pointListWs1, cardListWs } from '../fire.data'
+import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
+import { pointListWs, tabHeadList, pointListWs1, } from '../fire.data'
+
+let props = defineProps({
+    listData: Object,
+});
+
+//瓦斯顶部区域数据
+let topAreaListWs = reactive<any[]>([])
+
+//安全监控-列表
+let tableListWs = reactive<any[]>([])
+
+//瓦斯监控列表数据
+let cardListWs = reactive<any[]>([])
+
 
 //测点类型-安全监控
 let pointType = ref('')
@@ -89,6 +101,30 @@ function handleChange1(val) {
     pointType1.value = val
 }
 
+watch(() => props.listData, (val) => {
+    console.log(val, '瓦斯详情数据-------')
+    if (JSON.stringify(val.common) != '{}' && val.common.gas.length != 0) {
+        topAreaListWs.length = 0
+        tableListWs.length = 0
+        cardListWs.length = 0
+
+        val.common.gas.forEach(el => {
+            topAreaListWs.push({ label: el.strinstallpos, value: el.readData.gasC })
+            tableListWs.push({ value: el.readData.gasC, value1: el.readData.gasMass, value2: el.readData.gasMixMass, value3: el.readData.gasTotalMass, })
+            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: 3, label: '测点状态', value: el.warnFlag ? '异常' : '正常'  },
+                ]
+            })
+        })
+    }
+}, { immediate: true, deep: true })
+
 </script>
 
 <style lang="less" scoped>
@@ -112,12 +148,14 @@ function handleChange1(val) {
 
             .box-label {
                 position: absolute;
-                left: 0;
+                left: 50%;
                 top: 6px;
+                transform: translate(-50%, 0);
+                width: 80%;
                 height: 68px;
-                text-align: center;
-                padding: 10px 15px;
-                box-sizing: border-box;
+                display: flex;
+                justify-content: center;
+                align-items: center;
                 word-wrap: break-word;
             }
 
@@ -294,9 +332,22 @@ function handleChange1(val) {
                     justify-content: space-around;
                     box-sizing: border-box;
 
-                    span {
+                    .content-r{
+                        display: flex;
+                        span {
                         font-size: 14px;
+                        &:first-child{
+                            display: inline-block;
+                            width: 68px;
+                        }
+                        &:last-child{
+                            display: inline-block;
+                            width: calc(100% - 68px);
+                        }
+                    }
                     }
+
+                   
                 }
 
             }

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

@@ -24,7 +24,7 @@
       </div>
     </div>
     <div class="bot-area">
-      <echartLine :echartDataGq="echartDataFc1" />
+      <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" />
     </div>
   </div>
 </template>
@@ -38,6 +38,7 @@ let props = defineProps({
   listData: Object,
 });
 
+let maxY=ref(2000)
 //是否显示报警区域
 // let isShowTop = ref(true);
 //报警区域数据