设备预警提交

package.json

@@ -85,6 +85,7 @@
     "tinymce": "^5.10.3",
     "vditor": "^3.8.13",
     "vite-plugin-theme": "^0.8.6",
+    "vite-plugin-top-level-await": "^1.3.1",
     "vue": "^3.2.33",
     "vue-cropper": "^0.5.6",
     "vue-cropperjs": "^5.0.0",

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

@@ -22,7 +22,7 @@
               {{ items.label }}
             </div>
           </div> -->
-          <component :is="componentName[current]" />
+          <component :is="componentName[current]" :listData="listData" />
         </div>
       </div>
     </div>
@@ -32,11 +32,13 @@
   import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent, defineProps } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { typeMenuList, componentName } from './fire.data';
+  import { sysTypeWarnList, sysWarn } from './alarm.api';
 
   let props = defineProps({
     moduleName: String,
   });
 
+  let listData = ref({}); //详情数据
   let isShowModule = ref(true); //是否显示内外因火灾切换按钮
   let titleName = ref('');
   let menuList = reactive<any[]>([]); //左侧菜单列表
@@ -84,43 +86,75 @@
   function cardClick(ind, item) {
     console.log(ind, 'index');
     activeIndex1.value = ind;
-    switch (ind) {
-      case 0:
-        current.value = item.type == 'on' ? 'fireWork' : 'mainWell';
-        break;
-      case 1:
-        current.value = item.type == 'on' ? 'closeWall' : 'subStation';
-        break;
-      case 2:
-        current.value = item.type == 'on' ? 'otherMonitor' : 'otherOut';
-        break;
+    if (props.moduleName == 'fire') {
+      switch (ind) {
+        case 0:
+          current.value = item.type == 'on' ? 'fireWork' : 'mainWell';
+          break;
+        case 1:
+          current.value = item.type == 'on' ? 'closeWall' : 'subStation';
+          break;
+        case 2:
+          current.value = item.type == 'on' ? 'otherMonitor' : 'otherOut';
+          break;
+      }
+    } else if (props.moduleName == 'tf') {
+      getSysWarnList(item.deviceID, 'vent');
     }
   }
 
+  //获取预警详情弹窗左侧数据
+  function getSysTypeWarnList(data) {
+    sysTypeWarnList({ type: data }).then((res) => {
+      menuList.length = 0;
+      if (props.moduleName == 'tf') {
+        res.forEach((el) => {
+          menuList.push({
+            name: el.deviceName,
+            warn: el.netStatus ? '高风险' : '低风险',
+            type: 'on',
+            deviceID: el.deviceID,
+          });
+        });
+        getSysWarnList(menuList[0].deviceID, 'vent');
+        console.log(menuList, '通风预警详情');
+      }
+    });
+  }
+  //获取预警详情弹窗右侧数据
+  function getSysWarnList(id, type) {
+    sysWarn({ sysid: id, type: type }).then((res) => {
+      console.log(res, '预警详情弹窗右侧数据');
+      listData.value = res;
+    });
+  }
+
   watch(
     () => props.moduleName,
     (val) => {
       if (val == 'fire') {
         titleName.value = '火灾监测';
         isShowModule.value = true;
-        menuList = [
-          { name: '综采工作面1', warn: '低风险', type: 'on' },
-          { name: '密闭工作面1', warn: '低风险', type: 'on' },
-          { name: '其他工作面1', warn: '低风险', type: 'on' },
-        ];
+        getSysTypeWarnList('fire');
+        current.value = 'fireWork';
       } else if (val == 'dust') {
         titleName.value = '粉尘监测';
         isShowModule.value = false;
-        menuList = [{ name: '粉尘', warn: '低风险', type: 'on' }];
+        getSysTypeWarnList('dust');
         current.value = 'dustPage';
+      } else if (val == 'tf') {
+        titleName.value = '通风监测';
+        isShowModule.value = false;
+        current.value = 'ventilate';
+        getSysTypeWarnList('vent');
       } else {
         titleName.value = '瓦斯监测';
         isShowModule.value = false;
-        menuList = [{ name: '瓦斯', warn: '低风险', type: 'on' }];
+        getSysTypeWarnList('gas');
         current.value = 'gasPage';
       }
     },
-    {immediate:true}
+    { immediate: true }
   );
 
   onMounted(async () => {});

src/views/vent/monitorManager/alarmMonitor/alarm.api.ts

@@ -6,6 +6,10 @@ enum Api {
   warningList = '/safety/ventanalyAlarmLog/now_alarmlist',
   warningHistoryList = '/safety/ventanalyAlarmLog/list',
   totalList = '/safety/ventanalyAlarmLog/total',
+
+  sysTypeWarnList='/ventanaly-device/safety/ventanalyAlarmLog/sysTypeWarn',
+  sysWarn='/ventanaly-device/safety/ventanalyAlarmLog/sysWarn'
+
 }
 /**
  * 列表接口
@@ -24,4 +28,17 @@ export const warningList = (params) => defHttp.get({ url: Api.warningList, param
 export const warningHistoryList = (params) => defHttp.get({ url: Api.warningHistoryList, params });
 
 //预警列表接口
-export const getTotalList = (params) => defHttp.get({ url: Api.totalList, params });
+export const getTotalList = (params) => defHttp.get({ url: Api.totalList, params });
+
+
+/**
+ *预警详情弹窗左侧
+ * @param params
+ */
+export const sysTypeWarnList = (params) => defHttp.post({ url: Api.sysTypeWarnList, params });
+
+/**
+ *预警详情弹窗右侧
+ * @param params
+ */
+ export const sysWarn = (params) => defHttp.post({ url: Api.sysWarn, params });

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

@@ -18,6 +18,7 @@ export const componentName = {
   otherOut: markRaw(defineAsyncComponent(() => import('./fire/otherOut.vue'))),
   dustPage: markRaw(defineAsyncComponent(() => import('./fire/dustPage.vue'))),
   gasPage: markRaw(defineAsyncComponent(() => import('./fire/gasPage.vue'))),
+  ventilate:markRaw(defineAsyncComponent(() => import('./fire/ventilate.vue'))),
 };
 
 //工作面
@@ -689,12 +690,11 @@ export const columnsJd = [
 export const topAreaList = [
   {
     id: 0,
-    title: '15218采煤工作面粉尘',
+    title: '',
     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 },
+     
     ],
   },
   {

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

@@ -0,0 +1,242 @@
+<template>
+  <div class="dustPage">
+    <div class="top-area">
+      <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
+        <div class="top-title">{{ item.title }}</div>
+        <div class="top-content">
+          <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
+            <span class="item-label">{{ items.label }}</span>
+            <span class="item-value">{{ items.value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="center-area">
+      <div class="center-t">
+        <div class="t-box" v-for="(item, index) in centerAreaListT" :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>
+      </div>
+    </div>
+    <div class="bot-area">
+      <echartLine :echartDataGq="echartDataFc" />
+    </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 echartLine from './common/echartLine.vue';
+
+  let props = defineProps({
+    listData: Object,
+  });
+
+  //顶部区域激活选项
+  let activeIndex = ref(0);
+
+  //顶部区域选项切换
+  function topAreaClick(index) {
+    activeIndex.value = index;
+  }
+
+  watch(
+    () => props.listData,
+    (val) => {
+      console.log(val, '详情数据');
+      
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .dustPage {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .top-area {
+      height: 183px;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+
+      .top-box {
+        position: relative;
+        width: 480px;
+        height: 160px;
+        background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
+
+        .top-title {
+          position: absolute;
+          left: 50%;
+          top: 6px;
+          transform: translate(-50%, 0);
+        }
+
+        .top-content {
+          position: absolute;
+          top: 33px;
+          left: 0;
+          width: 100%;
+          height: calc(100% - 33px);
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          flex-wrap: wrap;
+          cursor: pointer;
+
+          .content-item {
+            position: relative;
+            width: 50%;
+            height: 50%;
+            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+
+            .item-label {
+              position: absolute;
+              left: 52px;
+              top: 50%;
+              transform: translate(0, -44%);
+              font-size: 12px;
+            }
+
+            .item-value {
+              position: absolute;
+              right: 52px;
+              top: 50%;
+              transform: translate(0, -44%);
+              font-size: 12px;
+              font-family: 'douyuFont';
+              color: #3df6ff;
+            }
+          }
+        }
+      }
+
+      .top-box1 {
+        position: relative;
+        width: 480px;
+        height: 183px;
+        background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
+
+        .top-title {
+          position: absolute;
+          left: 50%;
+          top: 6px;
+          transform: translate(-50%, 0);
+        }
+
+        .top-content {
+          position: absolute;
+          top: 33px;
+          left: 0;
+          width: 100%;
+          height: calc(100% - 33px);
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          flex-wrap: wrap;
+          padding-bottom: 20px;
+          box-sizing: border-box;
+          cursor: pointer;
+
+          .content-item {
+            position: relative;
+            width: 50%;
+            height: 50%;
+            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+
+            .item-label {
+              position: absolute;
+              left: 52px;
+              top: 50%;
+              transform: translate(0, -44%);
+              font-size: 12px;
+            }
+
+            .item-value {
+              position: absolute;
+              right: 52px;
+              top: 50%;
+              transform: translate(0, -44%);
+              font-size: 12px;
+              font-family: 'douyuFont';
+              color: #3df6ff;
+            }
+          }
+        }
+      }
+    }
+
+    .center-area {
+      height: 258px;
+      margin-bottom: 20px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+      background-size: 100% 100%;
+
+      .center-t {
+        height: 50%;
+        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;
+
+        .t-box {
+          width: 218px;
+          height: 97px;
+          background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
+
+          .box-label {
+            text-align: center;
+          }
+        }
+      }
+
+      .center-b {
+        height: 50%;
+        padding: 0px 80px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        box-sizing: border-box;
+
+        .b-box {
+          width: 218px;
+          height: 97px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          .box-label {
+            width: 169px;
+            height: 42px;
+            line-height: 42px;
+            text-align: center;
+            margin-bottom: 5px;
+            color: #3df6ff;
+            font-family: 'douyuFont';
+            background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
+          }
+        }
+      }
+    }
+
+    .bot-area {
+      height: calc(100% - 471px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+</style>

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

@@ -218,17 +218,18 @@
       <div class="fire-monitor">
         <div class="monitor-title top" @click="showModal('fire')">火灾监测</div>
         <div class="container">
-          <div class="item">
+        
+          <div class="item item1">
             <div class="icon"></div>
-            <div class="data-box" v-for="(item, index) in fireMonitor" :key="index">
-              <div class="value"> {{ item.value }} </div>
+            <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
+              <div class="value" :style="{ color: item.value == '报警' ? '#ff0000' : '' }">{{ item.value }} </div>
               <div class="title">{{ item.title }}</div>
             </div>
           </div>
-          <div class="item item1">
+          <div class="item">
             <div class="icon"></div>
-            <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
-              <div class="value" :style="{ color: item.value == '报警' ? '#ff0000' : '' }">{{ item.value }} </div>
+            <div class="data-box" v-for="(item, index) in fireMonitor" :key="index">
+              <div class="value"> {{ item.value }} </div>
               <div class="title">{{ item.title }}</div>
             </div>
           </div>
@@ -356,7 +357,7 @@
   const [register, { openModal }] = useModal();
 
   function showModal(data) {
-    isShowDialog.value = data == 'tf' || data == 'sbyj' ? true : false;
+    isShowDialog.value =data == 'sbyj' ? true : false;
     moduleName.value = data;
     modalVisible.value = true;
     openModal();
@@ -419,12 +420,17 @@
     Object.keys(iconsMonitor).forEach((el) => {
       iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
     });
-    fireMonitor[0].value = 0;
+    fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo.external.temperature.value;
     fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo.external.coval.value;
     fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo.external.chval.value;
     fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo.external.ch2val.value;
     fireMonitor[4].value = res.info.sysInfo.fireS.summaryInfo.external.co2val.value;
     fireMonitor[5].value = res.info.sysInfo.fireS.summaryInfo.external.o2val.value;
+    fireMonitor1[1].value = res.info.sysInfo.fireS.summaryInfo.internal.coval.value;
+    fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.chval.value;
+    fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value;
+    fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val.value;
+    fireMonitor1[5].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val.value;
   }
 
   onMounted(async () => {
@@ -735,7 +741,7 @@
                 height: 50px;
                 top: -25px;
                 left: 20px;
-                background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
+                background: url('/@/assets/images/vent/outer-icon.svg') no-repeat;
               }
             }
             .data-box{
@@ -761,7 +767,7 @@
             }
             .icon{
               &::after{
-                background: url('/@/assets/images/vent/outer-icon.svg') no-repeat;
+                background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
               }
             }
           }