瓦斯监测预警修改，注浆详情修改-提交

src/views/vent/monitorManager/alarmMonitor/common/gasCcb.vue

@@ -0,0 +1,251 @@
+<template>
+    <div class="gas-ccb">
+        <div class="top-box" v-if="typeData.includes('pump_under')">
+            <div class="box-label">{{ pumpUnder.label }}</div>
+            <div class="box-values">
+                <div class="value-b" v-for="(items, ind) in pumpUnder.data" :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 == 1001 && items.name == '报警状态'
+                                                    ? '网络断开'
+                                                    : items.val
+                    }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="top-box" v-if="typeData.includes('pump_over')">
+            <div class="box-label">{{ pumpOver.label }}</div>
+            <div class="box-values">
+                <div class="value-b" v-for="(items, ind) in pumpOver.data" :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 == 1001 && items.name == '报警状态'
+                                                    ? '网络断开'
+                                                    : items.val
+                    }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch, reactive } from 'vue'
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+
+let props = defineProps({
+    gasData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+let typeData = ref<any[]>([])
+let pumpUnder = reactive({})
+let pumpOver = reactive({})
+
+
+
+
+watch(() => props.gasData, (newV, oldV) => {
+    console.log(newV, 'ccc---')
+    let data = newV.pump
+
+    if (data && data.length != 0) {
+        typeData.value = data.map(v => v.deviceType)
+
+        let list = {
+            label: '',
+            data: []
+        }
+        if (typeData.value.includes('pump_under')) {
+            let labelData = getTableHeaderColumns('pump_under_monitor')
+            let param = labelData.map((el: any) => {
+                return {
+                    name: el.title, val: el.dataIndex
+                }
+            })
+            let filterData = data.filter(v => v.deviceType == 'pump_under')[0]
+            list.label = filterData.strinstallpos
+            list.data = param.map(item => {
+                return {
+                    name: item.name, val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-'
+                }
+            })
+            pumpUnder = Object.assign({}, list)
+        } else if (typeData.value.includes('pump_over')) {
+            let labelData = getTableHeaderColumns('pump_over_monitor')
+            let param = labelData.map((el: any) => {
+                return {
+                    name: el.title, val: el.dataIndex
+                }
+            })
+            let filterData = data.filter(v => v.deviceType == 'pump_over')[0]
+            list.label = filterData.strinstallpos
+            list.data = param.map(item => {
+                return {
+                    name: item.name, val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-'
+                }
+            })
+            pumpOver = Object.assign({}, list)
+        }
+
+    }
+}, { immediate: true })
+
+onMounted(() => {
+    // initTitle()
+})
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .gas-ccb {
+        --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
+        --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
+        --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-top-area: url('/@/assets/images/themify/deepblue/fire/top-area.png');
+    }
+}
+
+.gas-ccb {
+    --image-no-choice: url('/@/assets/images/fire/no-choice.png');
+    --image-choice: url('/@/assets/images/fire/choice.png');
+    --image-border: url('/@/assets/images/fire/border.png');
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-top-area: url('/@/assets/images/fire/top-area.png');
+
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 10px;
+    box-sizing: border-box;
+
+    .top-box {
+        position: relative;
+        width: 724px;
+        height: 100%;
+        background: var(--image-top-area) 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: 16px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            word-wrap: break-word;
+            color: #fff;
+        }
+
+        .box-values {
+            position: absolute;
+            left: 50%;
+            top: 26px;
+            transform: translate(-50%, 0);
+            width: 84%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+
+            .value-b {
+                width: calc(50% - 10px);
+                height: 25px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                color: #fff;
+                font-size: 14px;
+
+                span {
+                    font-size: 14px;
+
+                    &:last-child {
+                        font-family: 'douyuFont';
+                        color: var(--vent-table-action-link);
+                    }
+                }
+
+                .box-value {
+                    color: rgb(145, 230, 9) !important;
+                }
+
+                .box-value1 {
+                    color: var(--vent-table-action-link) !important;
+                }
+
+                .box-value2 {
+                    color: #ffff35 !important;
+                }
+
+                .box-value3 {
+                    color: #ffbe69 !important;
+                }
+
+                .box-value4 {
+                    color: #ff6f00 !important;
+                }
+
+                .box-value5 {
+                    color: #ff0000 !important;
+                }
+            }
+        }
+    }
+
+
+
+
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/warn/gasWarn.vue

@@ -23,47 +23,16 @@
     </div>
     <div class="gas-content">
       <div style="width: 100%; height: 100%" v-if="isShow == 'yjjc'">
-        <div class="top-area" v-if="topAreaListWs.length != 0">
+        <div class="top-area" v-if="gasData">
           <div class="title-t">
             <div class="text-t">瓦斯抽采泵信息</div>
           </div>
           <div class="content-t">
-            <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 || item.val == 1001) && 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 == 1001 && items.name == '报警状态'
-                                  ? '网络断开'
-                                  : items.val
-                  }}</span>
-                </div>
-              </div>
-            </div>
+              <gasCcb :gasData="gasData"></gasCcb>
           </div>
         </div>
 
-        <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
+        <div :class="gasData ? 'bot-area' : 'bot-area1'">
           <MeasurePoint title="安全监控测点信息" :timeout="1000" :cards="cardListWs" :charts="chartListWs" />
         </div>
       </div>
@@ -91,21 +60,23 @@ import warnTargetGas from '../common/warnTargetGas.vue';
 import PipeWarn from '../common/PipeWarn.vue';
 import gasParamter from '../common/gasParamter.vue';
 import faultDiagnose from '../common/faultDiagnose.vue'
-import { getMonitorComponent,getMonitorFlag } from '../common.data';
+import { getMonitorComponent, getMonitorFlag } from '../common.data';
 import { usePermission } from '/@/hooks/web/usePermission';
 import MeasurePoint from '../common/measurePoint.vue';
+import gasCcb from '../common/gasCcb.vue'
 import dayjs from 'dayjs';
 
+
 let typeMenuListGas = getMonitorComponent();
-let isflag=getMonitorFlag()
+let isflag = getMonitorFlag()
 const { hasPermission } = usePermission();
 const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
 //当前左侧激活菜单的索引
 let activeIndex1 = ref(0);
 //左侧数据列表
 let menuList = reactive<any[]>([]);
-//瓦斯顶部区域数据
-let topAreaListWs = reactive<any[]>([]);
+//瓦斯顶部区域
+let gasData=reactive({})
 //瓦斯监控列表数据
 let cardListWs = reactive<any[]>([]);
 const chartListWs = reactive<any[]>([]);
@@ -144,7 +115,7 @@ let timer: null | NodeJS.Timeout = null;
 function getMonitor(flag?) {
   timer = setTimeout(
     async () => {
-      if (isflag=='1') {
+      if (isflag == '1') {
         await getBjlist()
       } else {
         await getMenuList()
@@ -167,31 +138,9 @@ function getBack() {
 //获取右侧详情数据列表
 function getDetailList(param) {
   // listData.common = res;
-  topAreaListWs.length = 0;
   cardListWs.length = 0;
   chartListWs.length = 0;
   if (JSON.stringify(param) != '{}') {
-    param.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 && v.readData.coVal != '0' ? v.readData.coVal : '-' },
-          { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 != '0' ? v.readData.gas1 : '-' }, //v.readData.gas1
-          { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 && v.readData.gas2 != '0' ? v.readData.gas2 : '-' }, //v.readData.gas2
-          { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3 != '0' ? v.readData.gas3 : '-' }, //v.readData.gas3
-          { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4 != '0' ? v.readData.gas4 : '-' }, //v.readData.gas4
-          { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic != '0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
-          {
-            name: '输入管道内标况流量(m³/min)',
-            val: v.readData.standardTraffic && v.readData.standardTraffic != '0' ? v.readData.standardTraffic : '-',
-          }, //v.readData.standardTraffic
-          { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage != '0' ? v.readData.totalGasDrainage : '-' },
-        ],
-      });
-    });
-
     param.gas.forEach((el) => {
       el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
       cardListWs.push({
@@ -199,11 +148,11 @@ function getDetailList(param) {
         value: el.readData.gasC + '%' || '--',
         // value: 0,
         listR: [
-          { id: 0, label: '测点类型', dw:'', value: '瓦斯' },
-          { id: 1, label: '测点位置', dw:'', value: el.strinstallpos || '--' },
+          { id: 0, label: '测点类型', dw: '', value: '瓦斯' },
+          { id: 1, label: '测点位置', dw: '', value: el.strinstallpos || '--' },
           // { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
-          { id: 2, label: '数据时间', dw:'', value: el.readTime || '--' },
-          { id: 3, label: '测点状态',dw:'', value: el.warnFlag },
+          { id: 2, label: '数据时间', dw: '', value: el.readTime || '--' },
+          { id: 3, label: '测点状态', dw: '', value: el.warnFlag },
         ],
       });
       // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
@@ -235,6 +184,7 @@ async function getMenuList() {
         detail: el.detail,
       });
     });
+    gasData=Object.assign({},menuList[activeIndex1.value].detail) 
     getDetailList(menuList[activeIndex1.value].detail);
   }
 }
@@ -320,7 +270,7 @@ async function getDeviceList(param) {
     zdType.value = data.stationtype || ''
     let list = JSON.parse(data.readData.gasGlFaultDia)
     echartData.maxData.data = [list.y1 || 0, list.y2 || 0]
-    echartData.minData.data = [list.y3 || 0,  list.y4 || 0]
+    echartData.minData.data = [list.y3 || 0, list.y4 || 0]
     echartData.xData = [...new Set([list.x1, list.x2, list.x3, list.x4])].sort((a, b) => a - b)
   }
 
@@ -411,7 +361,7 @@ function cardClick(ind, item) {
 }
 
 onMounted(() => {
-  if (isflag== '1') {
+  if (isflag == '1') {
     getBjlist()
     getMonitor(true);
   } else {
@@ -597,89 +547,7 @@ onUnmounted(() => {
       .content-t {
         width: 100%;
         height: 276px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0px 10px;
-        box-sizing: border-box;
-
-        .top-box {
-          position: relative;
-          width: 724px;
-          height: 100%;
-          background: var(--image-top-area) 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: 16px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            word-wrap: break-word;
-            color: #fff;
-          }
-
-          .box-values {
-            position: absolute;
-            left: 50%;
-            top: 26px;
-            transform: translate(-50%, 0);
-            width: 84%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-
-            .value-b {
-              width: calc(50% - 10px);
-              height: 25px;
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              color: #fff;
-              font-size: 14px;
-
-              span {
-                font-size: 14px;
-
-                &:last-child {
-                  font-family: 'douyuFont';
-                  color: var(--vent-table-action-link);
-                }
-              }
-
-              .box-value {
-                color: rgb(145, 230, 9) !important;
-              }
-
-              .box-value1 {
-                color: var(--vent-table-action-link) !important;
-              }
-
-              .box-value2 {
-                color: #ffff35 !important;
-              }
-
-              .box-value3 {
-                color: #ffbe69 !important;
-              }
-
-              .box-value4 {
-                color: #ff6f00 !important;
-              }
-
-              .box-value5 {
-                color: #ff0000 !important;
-              }
-            }
-          }
-        }
+       
       }
     }
 

src/views/vent/monitorManager/groutMonitor/components/groutHomehlg.vue

@@ -72,7 +72,7 @@
     import { mountedThree, destroy, setModelType } from '../grout.threejs';
     import { formatNum } from '/@/utils/ventutil';
     import { deviceMonitorListHlg, groutFanMonitorDataHlg } from '../grout.data';
-    import { list } from '../grout.api';
+    import { device } from '../grout.api';
     import { useCamera } from '/@/hooks/system/useCamera';
   
     const props = defineProps({
@@ -117,7 +117,8 @@
     }
   
     async function getDataSource(systemID) {
-      const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
+      // const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
+      const res = await device({ devicetype: 'pulping', pagetype: 'normal' });
     if(res && res.result.msgTxt[0]){
         const result = res.result.msgTxt[0];
         if (result.type.startsWith('pulping')) {

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

@@ -5,6 +5,8 @@ enum Api {
   list = '/monitor/system',
   baseList = '/safety/ventanalyManageSystem/list',
   deviceList = '/safety/ventanalyDeviceInfo/list',
+  device='/monitor/device'
+
 }
 /**
  * 列表接口
@@ -21,3 +23,9 @@ export const systemList = (params) => defHttp.post({ url: Api.systemList, params
 export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });
 
 export const getDeviceList = (params) => defHttp.get({ url: Api.deviceList, params });
+
+/**
+ * 哈拉沟-注浆
+ * @param params
+ */
+export const device = (params) => defHttp.post({ url: Api.device, params });