1. 新增矿端预警历史金控系统页面

public/js/config.js

@@ -4,8 +4,8 @@ const VUE_APP_URL = {
   wsUrl: 'http://182.92.126.35:9999' // WebSocket 地址
 }
 const History_Type = {
-  // type: 'remote', // remote、vent  (remote 代表的是历史查询走的装备院的接口，vent是走的咱们的，目前神东的项目都用remote, 其他矿用vent)
-  type: 'vent', // remote、vent
+  type: 'remote', // remote、vent  (remote 代表的是历史查询走的装备院的接口，vent是走的咱们的，目前神东的项目都用remote, 其他矿用vent)
+  // type: 'vent', // remote、vent
   deviceType: []
 }
 

src/components/Container/src/Adaptive.vue

@@ -96,12 +96,13 @@
       const cssSize = () => {
         const currentWidth = document.body.clientWidth;
         const realWidth = width.value || originalWidth.value;
-        const whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
+        const whdef = 100 / currentWidth; // 表示1920的设计图,使用100PX的默认值
         const wW = currentWidth / realWidth; // 当前窗口的宽度
         const rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
+        // document.documentElement.style.fontSize = rem + 'px';
         document.documentElement.style.fontSize = rem + 'px';
         window.addEventListener('resize', function () {
-          const whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
+          const whdef = 100 / currentWidth; // 表示1920的设计图,使用100PX的默认值
           const wW = window.innerWidth; // 当前窗口的宽度
           const rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
           document.documentElement.style.fontSize = rem + 'px';

src/views/report/statisticst/index.vue

@@ -13,7 +13,7 @@
               </a-radio-group>
             </a-col>
           </a-row>
-          <Bar :chartData="dataSource" height="50vh"></Bar>
+          <Bar :chartData="dataSource" height="50vh" />
         </a-tab-pane>
         <a-tab-pane key="pie" tab="饼状图" force-render>
           <a-row :gutter="24">
@@ -25,7 +25,7 @@
                 <a-radio-button value="cabinet">按柜号统计</a-radio-button>
               </a-radio-group>
             </a-col>
-            <Pie :chartData="dataSource" height="40vh"></Pie>
+            <Pie :chartData="dataSource" height="40vh" />
           </a-row>
         </a-tab-pane>
       </a-tabs>

src/views/vent/home/colliery/components/wind-device.vue

@@ -42,399 +42,399 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, defineProps, watch } from 'vue';
-import { getAssetURL } from '/@/utils/ui';
-let props = defineProps({
-  devicedata: Object,
-});
-const emit = defineEmits(['goDetail']);
-let iconsMonitor = reactive({
-  // fanmain: {
-  //   url: getAssetURL('home-container/device/zhushan.png'),
-  //   level: 0,
-  //   text: '',
-  // },
- 
-  fanmain: {
-    url: getAssetURL('vent/alarm-icons/zhushan.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  fanlocal: {
-    url: getAssetURL('vent/alarm-icons/js.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  gate: {
-    url: getAssetURL('vent/alarm-icons/fm.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  window: {
-    url: getAssetURL('vent/alarm-icons/fc.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  windrect: {
-    url: getAssetURL('vent/alarm-icons/cf.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  forcFan: {
-    url: getAssetURL('vent/alarm-icons/yafeng.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  spray: {
-    url: getAssetURL('vent/alarm-icons/penlin.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  dustdev: {
-    url: getAssetURL('vent/alarm-icons/penfen.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  nitrogen: {
-    url: getAssetURL('vent/alarm-icons/zhudan.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  pulping: {
-    url: getAssetURL('vent/alarm-icons/zhujiang.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  atomizing: {
-    url: getAssetURL('vent/alarm-icons/pw.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  dustsensor: {
-    url: getAssetURL('vent/alarm-icons/ccq.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  gas: {
-    url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  pump: {
-    url: getAssetURL('vent/alarm-icons/wasibeng.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  modelsensor: {
-    url: getAssetURL('vent/alarm-icons/cf.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-});
+  import { ref, reactive, defineProps, watch } from 'vue';
+  import { getAssetURL } from '/@/utils/ui';
+  let props = defineProps({
+    devicedata: Object,
+  });
+  const emit = defineEmits(['goDetail']);
+  let iconsMonitor = reactive({
+    // fanmain: {
+    //   url: getAssetURL('home-container/device/zhushan.png'),
+    //   level: 0,
+    //   text: '',
+    // },
 
-const resetScroll = (e: Event) => {
-  if (e.target && e.target) (e.target as Element).scrollTop = 0;
-};
+    fanmain: {
+      url: getAssetURL('vent/alarm-icons/zhushan.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    fanlocal: {
+      url: getAssetURL('vent/alarm-icons/js.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    gate: {
+      url: getAssetURL('vent/alarm-icons/fm.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    window: {
+      url: getAssetURL('vent/alarm-icons/fc.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    windrect: {
+      url: getAssetURL('vent/alarm-icons/cf.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    forcFan: {
+      url: getAssetURL('vent/alarm-icons/yafeng.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    spray: {
+      url: getAssetURL('vent/alarm-icons/penlin.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    dustdev: {
+      url: getAssetURL('vent/alarm-icons/penfen.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    nitrogen: {
+      url: getAssetURL('vent/alarm-icons/zhudan.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    pulping: {
+      url: getAssetURL('vent/alarm-icons/zhujiang.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    atomizing: {
+      url: getAssetURL('vent/alarm-icons/pw.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    dustsensor: {
+      url: getAssetURL('vent/alarm-icons/ccq.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    gas: {
+      url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    pump: {
+      url: getAssetURL('vent/alarm-icons/wasibeng.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    modelsensor: {
+      url: getAssetURL('vent/alarm-icons/cf.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+  });
 
-//跳转详情
-function getDetail() {
-  // emit('goDetail', 'windrect')
-}
+  const resetScroll = (e: Event) => {
+    if (e.target && e.target) (e.target as Element).scrollTop = 0;
+  };
 
-watch(
-  () => props.devicedata,
-  (val) => {
-    Object.keys(iconsMonitor).forEach((el) => {
-      if (val && val[el]) {
-        iconsMonitor[el].level = val[el].maxLevel;
-        iconsMonitor[el]['text'] = val[el].name;
-        // iconsMonitor[el]['count'] = val[el].count;
-        iconsMonitor[el].allCount = val[el].totalcount
-        iconsMonitor[el].warnCount = val[el].count
-        iconsMonitor[el].closeCount = val[el].netstatus
-      }
-    });
-  },
-  {
-    deep: true,
+  //跳转详情
+  function getDetail() {
+    // emit('goDetail', 'windrect')
   }
-);
+
+  watch(
+    () => props.devicedata,
+    (val) => {
+      Object.keys(iconsMonitor).forEach((el) => {
+        if (val && val[el]) {
+          iconsMonitor[el].level = val[el].maxLevel;
+          iconsMonitor[el]['text'] = val[el].name;
+          // iconsMonitor[el]['count'] = val[el].count;
+          iconsMonitor[el].allCount = val[el].totalcount;
+          iconsMonitor[el].warnCount = val[el].count;
+          iconsMonitor[el].closeCount = val[el].netstatus;
+        }
+      });
+    },
+    {
+      deep: true,
+    }
+  );
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../../assets/font/douyuFont.otf');
-}
-
-.windDevice {
-  width: 100%;
-  // min-width: ;
-  height: 100%;
-  position: relative;
-
-  .title-top {
-    position: absolute;
-    top: 9px;
-    left: 46px;
-    color: #fff;
-    font-size: 16px;
+  @font-face {
     font-family: 'douyuFont';
-    cursor: pointer;
-
-    &:hover {
-      color: #66ffff;
-    }
+    src: url('../../../../../assets/font/douyuFont.otf');
   }
 
-  .device-contents {
-    position: absolute;
-    top: 30px;
-    left: 0;
-    height: calc(100% - 30px);
-    padding: 10px 15px;
-    box-sizing: border-box;
+  .windDevice {
     width: 100%;
-    overflow-y: auto;
+    // min-width: ;
+    height: 100%;
+    position: relative;
+
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+
+      &:hover {
+        color: #66ffff;
+      }
+    }
 
-    .icons-box {
-      // display: flex; lxh
-      // flex-wrap: wrap; lxh
-      // justify-content: space-around; 
-      // justify-content: space-between; lxh
-      height: 100%;
+    .device-contents {
+      position: absolute;
+      top: 30px;
+      left: 0;
+      height: calc(100% - 30px);
+      padding: 10px 15px;
+      box-sizing: border-box;
+      width: 100%;
+      overflow-y: auto;
 
-      // overflow-y: hidden;
-      // align-items: start ;
-      // &:hover {
-      //   overflow-y: auto;
-      //   & > .icon-item {
-      //     // animation-play-state: paused; lxh
-      //     // animation: move1 2s linear;lxh
-      //   }
-      // }
-      .icon-item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 3px;
-        // animation: move 10s linear infinite;lxh
+      .icons-box {
+        // display: flex; lxh
+        // flex-wrap: wrap; lxh
+        // justify-content: space-around;
+        // justify-content: space-between; lxh
+        height: 100%;
 
-        .level-text {
-          width: 220px;
+        // overflow-y: hidden;
+        // align-items: start ;
+        // &:hover {
+        //   overflow-y: auto;
+        //   & > .icon-item {
+        //     // animation-play-state: paused; lxh
+        //     // animation: move1 2s linear;lxh
+        //   }
+        // }
+        .icon-item {
+          position: relative;
           display: flex;
-          justify-content: space-between;
-          position: absolute;
-          // top: 42px;lxh
-          // right: 25px;lxh
-          // color: #fff;lxh
-          // font-family: 'douyuFont';lxh
-          // font-size: 12px;lxh
-          top: 47px;
-          left: 185px;
-          color: #ffffffe0;
-          font-size: 13px;
-          text-align: center;
-          letter-spacing: 1px;
+          align-items: center;
+          justify-content: center;
+          padding: 3px;
+          // animation: move 10s linear infinite;lxh
 
-          .all-count,
-          .warn-count,
-          .close-count {
-            // margin: 0px 5px;
-            .num-count {
-              font-family: 'douyuFont';
-              font-size: 12px;
+          .level-text {
+            width: 220px;
+            display: flex;
+            justify-content: space-between;
+            position: absolute;
+            // top: 42px;lxh
+            // right: 25px;lxh
+            // color: #fff;lxh
+            // font-family: 'douyuFont';lxh
+            // font-size: 12px;lxh
+            top: 47px;
+            left: 185px;
+            color: #ffffffe0;
+            font-size: 13px;
+            text-align: center;
+            letter-spacing: 1px;
+
+            .all-count,
+            .warn-count,
+            .close-count {
+              // margin: 0px 5px;
+              .num-count {
+                font-family: 'douyuFont';
+                font-size: 12px;
+              }
             }
           }
-        }
 
-        // .level-text-0 {
-        //   color: rgb(145, 230, 9);
-        //   text-shadow: 2px 2px 4px #001c22;
-        // }
+          // .level-text-0 {
+          //   color: rgb(145, 230, 9);
+          //   text-shadow: 2px 2px 4px #001c22;
+          // }
 
-        // .level-text-1 {
-        //   color: rgb(0, 242, 255);
-        //   text-shadow: 2px 2px 4px #001c22;
-        // }
+          // .level-text-1 {
+          //   color: rgb(0, 242, 255);
+          //   text-shadow: 2px 2px 4px #001c22;
+          // }
 
-        // .level-text-2 {
-        //   color: #ffff35;
-        //   text-shadow: 2px 2px 4px #313100;
-        // }
+          // .level-text-2 {
+          //   color: #ffff35;
+          //   text-shadow: 2px 2px 4px #313100;
+          // }
 
-        // .level-text-3 {
-        //   color: #ffbe69;
-        //   text-shadow: 2px 2px 4px #271600;
-        // }
+          // .level-text-3 {
+          //   color: #ffbe69;
+          //   text-shadow: 2px 2px 4px #271600;
+          // }
 
-        // .level-text-4 {
-        //   color: #ff6f00;
-        //   // color: #09caff;
-        //   text-shadow: 2px 2px 4px #060200;
-        // }
+          // .level-text-4 {
+          //   color: #ff6f00;
+          //   // color: #09caff;
+          //   text-shadow: 2px 2px 4px #060200;
+          // }
 
-        // .level-text-5 {
-        //   width: 35px;
-        //   color: #ff0000;
-        //   text-shadow: 2px 2px 4px #200000;
-        // }
+          // .level-text-5 {
+          //   width: 35px;
+          //   color: #ff0000;
+          //   text-shadow: 2px 2px 4px #200000;
+          // }
 
-        // .level-text-6 {
-        //   color: #bbb;
-        //   text-shadow: 2px 2px 4px #001c22;
-        // }
+          // .level-text-6 {
+          //   color: #bbb;
+          //   text-shadow: 2px 2px 4px #001c22;
+          // }
 
-        img {
-          // width: 208px; //lxh
-          // height: 69px;//lxh
-          width: 427px;
-          height: 79px;
+          img {
+            // width: 208px; //lxh
+            // height: 69px;//lxh
+            width: 427px;
+            height: 79px;
+          }
         }
-      }
 
-      @keyframes move {
-        0% {
-          transform: translateY(0px);
-        }
+        @keyframes move {
+          0% {
+            transform: translateY(0px);
+          }
 
-        100% {
-          transform: translateY(-269px);
+          100% {
+            transform: translateY(-269px);
+          }
         }
-      }
 
-      @keyframes move1 {
-        0% {
-          transform: translateY(0px);
+        @keyframes move1 {
+          0% {
+            transform: translateY(0px);
+          }
         }
-      }
 
-      .wrapper {
-        position: absolute;
-        // top: 40px;  lxh
-        // left: 82px;lxh
-        top: 47px;
-        left: 100px;
-        color: #ffffffe0;
-        font-size: 13px;
-        text-align: center;
-        letter-spacing: 1px;
-      }
+        .wrapper {
+          position: absolute;
+          // top: 40px;  lxh
+          // left: 82px;lxh
+          top: 47px;
+          left: 100px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
+        }
 
-      .level-warning {
-        font-weight: 600;
-        color: #ff2e2e;
-        text-shadow: 2px 2px 4px #000000;
+        .level-warning {
+          font-weight: 600;
+          color: #ff2e2e;
+          text-shadow: 2px 2px 4px #000000;
+        }
       }
     }
   }
-}
 
-:deep .zxm-select-selector {
-  width: 100%;
-  height: 30px !important;
-  padding: 0 11px 0px 25px !important;
-  background-color: rgba(8, 148, 255, 0.3) !important;
-  border: 1px solid #1d80da !important;
-}
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
 
-:deep .zxm-select-selection-item {
-  color: #fff !important;
-  line-height: 28px !important;
-}
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
 
-:deep .zxm-select-arrow {
-  color: #fff !important;
-}
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
 </style>

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

@@ -9,7 +9,7 @@ enum Api {
 
   sysTypeWarnList = '/ventanaly-device/safety/ventanalyAlarmLog/sysTypeWarn',
   sysWarn = '/ventanaly-device/safety/ventanalyAlarmLog/sysWarn',
-  getReferenceValue='/safety/managesysDevice/getReferenceValue'
+  getReferenceValue = '/safety/managesysDevice/getReferenceValue',
 }
 /**
  * 列表接口

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

@@ -1,13 +1,31 @@
 <template>
   <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 设备监测预警 </customHeader>
   <div class="alarm-modal">
-    <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
-      style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
+    <a-button
+      preIcon="ant-design:rollback-outlined"
+      type="text"
+      size="small"
+      style="position: absolute; left: 15px; top: 15px; color: #fff"
+      @click="getBack"
+      >返回</a-button
+    >
+    <!-- <div class="device-type-box">
+      <div v-for="item in iconsMonitor" :key="item.key" class="device-icon-box">
+        <img :src="item.url" :alt="item.text" />
+      </div>
+    </div> -->
     <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
-      <a-tab-pane key="1" tab="实时预警">
+      <a-tab-pane key="1" tab="未处理预警">
         <div v-if="activeKey == '1'" class="box-bg table-box" style="margin-bottom: 10px">
-          <MonitorTable ref="SensorMonitorRef" :columns="levelColumns" :dataSource="dataSource" design-scope="alarm"
-            :isShowSelect="false" title="预警监测">
+          <MonitorTable
+            ref="SensorMonitorRef"
+            :columns="levelColumns"
+            :dataSource="dataSource"
+            design-scope="alarm"
+            :isShowSelect="false"
+            title="预警监测"
+            :scroll="{ y: 530 }"
+          >
             <template #filterCell="{ column, record }">
               <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
                 record.warnFlag == 0 ? '正常' : '报警'
@@ -26,216 +44,335 @@
       </a-tab-pane>
     </a-tabs>
   </div>
-
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, defineEmits, reactive, onUnmounted, watch } from 'vue';
-import MonitorTable from '../../comment/MonitorTable.vue';
-import AlarmHistoryTable from '../alarmHistoryTable.vue';
-import CustomHeader from '/@/components/vent/customHeader.vue';
-import { warningList } from '../alarm.api';
-import { levelColumns, levelHisColumns } from '../alarm.data';
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-import { useRouter } from 'vue-router';
-
-// const props = defineProps({
-//   deviceId: { type: String },
-// });
-
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-// 默认初始是第一行
-const activeKey = ref('1');
-const dataSource = ref([]);
-
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-};
-let router = useRouter()
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag = false) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(
-      async () => {
-        await getDataSource();
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      },
-      flag ? 0 : 10000
-    );
-  }
-}
-
-//返回首页
-function getBack() {
-  router.push('/monitorChannel/monitor-alarm-home')
-}
-
-//设备预警监测列表
-async function getDataSource() {
-  const res = await warningList({ isok: 0 });
-  dataSource.value = res.list || [];
-}
-
-onMounted(async () => {
-  getMonitor(true);
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
-</script>
-<style scoped lang="less">
-@import '/@/design/vent/color.less';
-@import '/@/design/vent/modal.less';
-
-.padding-0 {
-  padding: 10px 0 !important;
-}
-
-.alarm-modal {
-  position: relative;
-  padding: 80px 10px 15px 10px;
-  box-sizing: border-box;
-  z-index: 999;
-  max-height: calc(100vh - 150px);
-
-  .@{ventSpace}-tabs {
-    max-height: calc(100vh - 100px);
-
-    .tab-item {
-      height: calc(90vh - 152px);
-      // max-height: calc(100vh - 170px);
-      overflow-y: auto;
+  import { onMounted, ref, defineEmits, reactive, onUnmounted, watch } from 'vue';
+  import MonitorTable from '../../comment/MonitorTable.vue';
+  import AlarmHistoryTable from '../alarmHistoryTable.vue';
+  import CustomHeader from '/@/components/vent/customHeader.vue';
+  import { warningList } from '../alarm.api';
+  import { levelColumns, levelHisColumns } from '../alarm.data';
+  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+  import { useRouter } from 'vue-router';
+  import { getAssetURL } from '/@/utils/ui';
+
+  // const props = defineProps({
+  //   deviceId: { type: String },
+  // });
+
+  let iconsMonitor = reactive({
+    // fanmain: {
+    //   url: getAssetURL('home-container/device/zhushan.png'),
+    //   level: 0,
+    //   text: '',
+    // },
+
+    fanmain: {
+      url: getAssetURL('vent/device/fanmain.png'),
+      activeUrl: getAssetURL('vent/device/fanmain.png'),
+      text: '主风机',
+      key: 'fanmain',
+    },
+    fanlocal: {
+      url: getAssetURL('vent/device/fanlocal.png'),
+      activeUrl: getAssetURL('vent/device/fanlocal.png'),
+      text: '',
+      key: 'fanlocal',
+    },
+    gate: {
+      url: getAssetURL('vent/device/gate.png'),
+      activeUrl: getAssetURL('vent/device/gate.png'),
+      text: 'gate',
+    },
+    window: {
+      url: getAssetURL('vent/device/window.png'),
+      activeUrl: getAssetURL('vent/device/window.png'),
+      text: '',
+      key: 'window',
+    },
+    windrect: {
+      url: getAssetURL('vent/device/windrect.png'),
+      activeUrl: getAssetURL('vent/device/windrect.png'),
+      text: '',
+      key: 'windrect',
+    },
+    forcFan: {
+      url: getAssetURL('vent/device/forcFan.png'),
+      activeUrl: getAssetURL('vent/device/forcFan.png'),
+      text: '',
+      key: 'forcFan',
+    },
+    spray: {
+      url: getAssetURL('vent/device/spray.png'),
+      activeUrl: getAssetURL('vent/device/spray.png'),
+      text: '',
+      key: 'spray',
+    },
+    dustdev: {
+      url: getAssetURL('vent/device/dustdev.png'),
+      activeUrl: getAssetURL('vent/device/dustdev.png'),
+      text: '',
+      key: 'dustdev',
+    },
+    nitrogen: {
+      url: getAssetURL('vent/device/nitrogen.png'),
+      activeUrl: getAssetURL('vent/device/nitrogen.png'),
+      text: '',
+      key: 'nitrogen',
+    },
+    pulping: {
+      url: getAssetURL('vent/device/pulping.png'),
+      activeUrl: getAssetURL('vent/device/pulping.png'),
+      text: '',
+      key: 'pulping',
+    },
+    atomizing: {
+      url: getAssetURL('vent/device/atomizing.png'),
+      activeUrl: getAssetURL('vent/device/atomizing.png'),
+      text: '',
+      key: 'atomizing',
+    },
+    pump: {
+      url: getAssetURL('vent/device/pump.png'),
+      activeUrl: getAssetURL('vent/device/pump.png'),
+      text: '',
+      key: 'pump',
+    },
+    modelsensor: {
+      url: getAssetURL('vent/device/modelsensor.png'),
+      activeUrl: getAssetURL('vent/device/modelsensor.png'),
+      text: '',
+      key: 'modelsensor',
+    },
+    dustsensor: {
+      url: getAssetURL('vent/device/dustsensor.png'),
+      activeUrl: getAssetURL('vent/device/dustsensor.png'),
+      text: '',
+      key: 'dustsensor',
+    },
+    gas: {
+      url: getAssetURL('vent/device/gas.png'),
+      activeUrl: getAssetURL('vent/device/gas.png'),
+      text: '',
+      key: 'gas',
+    },
+  });
+
+  const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+  // 默认初始是第一行
+  const activeKey = ref('1');
+  const dataSource = ref([]);
+
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+  };
+  let router = useRouter();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag = false) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          await getDataSource();
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 10000
+      );
     }
   }
 
-  .title-text {
-    position: absolute;
-    top: -14px;
-    left: 0;
-    width: 100%;
-    text-align: center;
-    color: #fff;
+  //返回首页
+  function getBack() {
+    router.push('/monitorChannel/monitor-alarm-home');
   }
 
-  .table-box {
-    height: calc(90vh - 152px);
-    padding: 20px 10px;
-    overflow-y: auto;
+  //设备预警监测列表
+  async function getDataSource() {
+    const res = await warningList({ isok: 0 });
+    dataSource.value = res.list || [];
   }
 
-  .box-bg {
-    border: 1px solid #4d7ad855;
-    border-radius: 2px;
-    // background-color: #001d3055;
-    // -webkit-backdrop-filter: blur(8px);
-    // backdrop-filter: blur(8px);
-    box-shadow: 0 0 10px #5984e055 inset;
-    // background-color: #00b3ff12;
-  }
+  onMounted(async () => {
+    getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+</script>
+<style scoped lang="less">
+  @import '/@/design/vent/color.less';
+  @import '/@/design/vent/modal.less';
 
-  .charts-box {
-    height: calc(40vh - 80px);
-    padding: 5px 10px;
-    margin-top: 10px;
+  .padding-0 {
+    padding: 10px 0 !important;
   }
-}
 
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
+  .alarm-modal {
+    position: relative;
+    padding: 80px 10px 15px 10px;
+    box-sizing: border-box;
+    z-index: 999;
+    max-height: calc(100% - 150px);
 
-:deep(.@{ventSpace}-tabs-card) {
-  .@{ventSpace}-tabs-tab {
-    background: linear-gradient(#2cd1ff55, #1eb0ff55);
-    border-color: #74e9fe;
-    border-radius: 0%;
+    .@{ventSpace}-tabs {
+      max-height: calc(100% - 100px);
 
-    &:hover {
-      color: #64d5ff;
+      // .tab-item {
+      //   height: 100px;
+      //   // max-height: calc(100vh - 170px);
+      // }
+    }
+    .device-type-box {
+      width: 1898px;
+      height: 120px;
+      color: #fff;
+      position: absolute;
+      top: 130px;
+      // border: 1px solid #4d7ad855;
+      // border-radius: 2px;
+      // background-color: #001d3055;
+      // -webkit-backdrop-filter: blur(8px);
+      // backdrop-filter: blur(8px);
+      // box-shadow: 0 0 10px #5984e055 inset;
+      display: flex;
+      flex-direction: row;
+      .device-icon-box {
+        width: 110px;
+        height: 110px;
+        border: 1px solid rgba(25, 237, 255, 0.4);
+        box-shadow: inset 0 0 20px #00c5ff44;
+        background: rgba(0, 0, 0, 0.06666667);
+        margin: 0 8px;
+      }
+    }
+    .title-text {
+      position: absolute;
+      top: -14px;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      color: #fff;
+    }
+    .table-box {
+      height: 650px;
+      padding: 20px 10px;
+      margin-bottom: 15px;
+    }
+
+    .box-bg {
+      border: 1px solid #4d7ad855;
+      border-radius: 2px;
+      // background-color: #001d3055;
+      // -webkit-backdrop-filter: blur(8px);
+      // backdrop-filter: blur(8px);
+      box-shadow: 0 0 10px #5984e055 inset;
+      // background-color: #00b3ff12;
     }
-  }
 
-  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-    color: aqua;
+    .charts-box {
+      height: calc(40vh - 80px);
+      padding: 5px 10px;
+      margin-top: 10px;
+    }
   }
 
-  .@{ventSpace}-tabs-nav::before {
-    border-color: #74e9fe;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
   }
 
-  .@{ventSpace}-picker,
-  .@{ventSpace}-select-selector {
-    width: 100% !important;
-    background: #00000017 !important;
-    border: 1px solid @vent-form-item-boder !important;
+  :deep(.@{ventSpace}-tabs-card) {
+    .@{ventSpace}-tabs-tab {
+      background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      border-color: #74e9fe;
+      border-radius: 0%;
 
-    input,
-    .@{ventSpace}-select-selection-item,
-    .@{ventSpace}-picker-suffix {
-      color: #fff !important;
+      &:hover {
+        color: #64d5ff;
+      }
     }
 
-    .@{ventSpace}-select-selection-placeholder {
-      color: #b7b7b7 !important;
+    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+      color: aqua;
+    }
+    .@{ventSpace}-tabs-nav {
+      // padding-bottom: 120px;
+    }
+    .@{ventSpace}-tabs-nav::before {
+      border-color: #74e9fe;
     }
-  }
-
-  .@{ventSpace}-pagination-next,
-  .action,
-  .@{ventSpace}-select-arrow,
-  .@{ventSpace}-picker-separator {
-    color: #fff !important;
-  }
 
-  .@{ventSpace}-table-cell-row-hover {
-    background: #264d8833 !important;
-  }
+    .@{ventSpace}-picker,
+    .@{ventSpace}-select-selector {
+      width: 100% !important;
+      background: #00000017 !important;
+      border: 1px solid @vent-form-item-boder !important;
+
+      input,
+      .@{ventSpace}-select-selection-item,
+      .@{ventSpace}-picker-suffix {
+        color: #fff !important;
+      }
+
+      .@{ventSpace}-select-selection-placeholder {
+        color: #b7b7b7 !important;
+      }
+    }
 
-  .@{ventSpace}-table-row-selected {
-    background: #00c0a311 !important;
+    .@{ventSpace}-pagination-next,
+    .action,
+    .@{ventSpace}-select-arrow,
+    .@{ventSpace}-picker-separator {
+      color: #fff !important;
+    }
 
-    td {
-      background-color: #00000000 !important;
+    .@{ventSpace}-table-cell-row-hover {
+      background: #264d8833 !important;
     }
-  }
 
-  .@{ventSpace}-table-thead {
-    // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-    background: #3d9dd45d !important;
+    .@{ventSpace}-table-row-selected {
+      background: #00c0a311 !important;
 
-    &>tr>th,
-    .@{ventSpace}-table-column-title {
-      // color: #70f9fc !important;
-      border-color: #84f2ff !important;
-      border-left: none !important;
-      border-right: none !important;
-      padding: 7px;
+      td {
+        background-color: #00000000 !important;
+      }
     }
-  }
 
-  .@{ventSpace}-table-tbody {
-    tr>td {
-      padding: 12px;
+    .@{ventSpace}-table-thead {
+      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
+      background: #3d9dd45d !important;
+
+      & > tr > th,
+      .@{ventSpace}-table-column-title {
+        // color: #70f9fc !important;
+        border-color: #84f2ff !important;
+        border-left: none !important;
+        border-right: none !important;
+        padding: 7px;
+      }
     }
-  }
 
-  .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
-    background-color: #26648855 !important;
-  }
+    .@{ventSpace}-table-tbody {
+      tr > td {
+        padding: 12px;
+      }
+    }
 
-  .jeecg-basic-table-row__striped {
+    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
+      background-color: #26648855 !important;
+    }
 
-    // background: #97efff11 !important;
-    td {
-      background-color: #97efff11 !important;
+    .jeecg-basic-table-row__striped {
+      // background: #97efff11 !important;
+      td {
+        background-color: #97efff11 !important;
+      }
     }
   }
-}
-</style>
+</style>

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

@@ -372,7 +372,7 @@ function setNoRtspVideo(id, videoAddr, cameraRate) {
         autoplay: true,
         autoplayMuted: true,
         plugins: [HlsPlugin], // 第二步
-        poster: '/src/assets/images/vent/noSinge.png',
+        poster: '/src/assets/images/vent/noSinge.png', 
         defaultPlaybackRate: cameraRate || 1,
         controls: false,
         hls: {

src/views/vent/monitorManager/comment/HistoryTable.vue

@@ -437,7 +437,8 @@
         showQuickJumper: false,
       },
       beforeFetch() {
-        const newParams = resetFormParam();
+        const newParams = { ...resetFormParam() };
+        debugger;
         return newParams;
       },
       // afterFetch(result) {
@@ -459,11 +460,12 @@
   const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
 
   function onExportXlsFn() {
+    const params = resetFormParam();
     // 判断时间间隔和查询时间区间，数据量下载大时进行提示
     if (stationType.value !== 'redis') {
-      return onExportXls();
+      return onExportXls(params);
     } else {
-      return onExportXlsPost();
+      return onExportXlsPost(params);
     }
   }
 

src/views/vent/monitorManager/warningMonitor/alarm.data.ts

@@ -0,0 +1,44 @@
+import { BasicColumn } from '/@/components/Table';
+import { render } from '/@/utils/common/renderUtils';
+
+export const manageAutoColumns: BasicColumn[] = [
+  {
+    title: '预警名称',
+    dataIndex: 'alarmName',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '报警开始时间',
+    dataIndex: 'starttime',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '所属场景',
+    dataIndex: 'systemName',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '报警描述',
+    dataIndex: 'autoContent',
+    width: 210,
+    align: 'center',
+  },
+  {
+    title: '报警等级',
+    dataIndex: 'alarmLevel',
+    customRender: ({ record }) => {
+      return render.renderDict(record.alarmLevel, 'leveltype');
+    },
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '是否解决',
+    dataIndex: 'isok_dictText',
+    width: 50,
+    align: 'center',
+  },
+];

src/views/vent/monitorManager/warningMonitor/index-mine.vue

@@ -0,0 +1,388 @@
+<template>
+  <customHeader>预警历史监控系统</customHeader>
+  <div class="data-statistics">
+    <div class="statistics-box" v-for="(item, index) in statisticsList" :key="index">
+      <div class="left-box">
+        <div class="box-title">{{ item.title }}</div>
+      </div>
+      <div class="right-box">
+        <div class="box-text">
+          <div class="text-label">监测数量</div>
+          <div class="text-value">{{ item.valueT }}</div>
+        </div>
+        <div class="warning-state box-text">
+          <div class="text-label">预警状态</div>
+          <div class="text-value">{{ item.valueB }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
+    <a-tab-pane tab="设备预警历史" key="device" />
+    <a-tab-pane tab="联动预警历史" key="manageAuto" />
+  </a-tabs>
+  <div class="alarm-history-table">
+    <BasicTable v-if="activeKey == 'device'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 340 }">
+      <template #form-onExportXls>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
+      </template>
+    </BasicTable>
+    <BasicTable v-if="activeKey == 'manageAuto'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 340 }">
+      <template #form-onExportXls>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" name="system-user" setup>
+  //ts语法
+  import { watch, ref, defineExpose, onMounted, reactive } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { manageAutoColumns } from './alarm.data';
+  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+  import { getAlarmLogList, getManageAutoLogList, getWarnCountInfo } from './warning.api';
+  import { useRoute } from 'vue-router';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  const props = defineProps({
+    formConfig: {
+      type: Object as PropType<FormProps> | undefined,
+      default: undefined,
+    },
+  });
+  const route = useRoute();
+  let statisticsList = reactive<any[]>([
+    { title: '通风', valueT: 0, valueB: '' },
+    { title: '粉尘', valueT: 0, valueB: '' },
+    { title: '瓦斯', valueT: 0, valueB: '' },
+    { title: '火灾', valueT: 0, valueB: '' },
+    { title: '安全监测', valueT: 0, valueB: '' },
+  ]);
+  const activeKey = ref('device');
+  const alarmHistory = ref();
+  const deviceColumns = getTableHeaderColumns('alarm_history') as [];
+  const dataColumns = ref(deviceColumns);
+  const list = ref<any>(getAlarmLogList);
+
+  // 列表页面公共参数、方法
+  const { tableContext, onExportXls } = useListPage({
+    tableProps: {
+      api: list,
+      columns: dataColumns,
+      canResize: true,
+      showTableSetting: false,
+      showActionColumn: false,
+      bordered: false,
+      size: 'small',
+      formConfig: {
+        labelAlign: 'left',
+        showAdvancedButton: false,
+        // autoAdvancedCol: 2,
+        schemas: [
+          {
+            label: '是否解决',
+            // field: 'isok',
+            field: 'isOk',
+            component: 'Select',
+            componentProps: {
+              options: [
+                {
+                  label: '未解决',
+                  value: false,
+                },
+                {
+                  label: '已解决',
+                  value: true,
+                },
+              ],
+            },
+            colProps: { span: 4 },
+          },
+          {
+            label: '所属系统',
+            // field: 'kindtype',systemType
+            field: 'systemType',
+            component: 'Select',
+            componentProps: {
+              options: [
+                {
+                  label: '通风',
+                  value: 'ventS',
+                },
+                {
+                  label: '防灭火',
+                  value: 'fireS',
+                },
+                {
+                  label: '防尘',
+                  value: 'dustS',
+                },
+                {
+                  label: '瓦斯',
+                  value: 'gasS',
+                },
+              ],
+            },
+            colProps: { span: 4 },
+          },
+          // {
+          //   label: '设备类型',
+          //   field: 'deviceKind',
+          //   component: 'MTreeSelect',
+          //   componentProps: {
+          //     virtual: false,
+          //   },
+          //   colProps: { span: 4 },
+          // },
+          {
+            field: 'starttime',
+            label: '开始时间',
+            component: 'DatePicker',
+            componentProps: {
+              showTime: true,
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+              getPopupContainer: getAutoScrollContainer,
+            },
+            colProps: {
+              span: 4,
+            },
+          },
+          {
+            field: 'endtime',
+            label: '结束时间',
+            component: 'DatePicker',
+            componentProps: {
+              showTime: true,
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+              getPopupContainer: getAutoScrollContainer,
+            },
+            colProps: {
+              span: 4,
+            },
+          },
+        ],
+      },
+      fetchSetting: {
+        listField: 'records',
+      },
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '30', '50', '100'],
+      },
+      beforeFetch(params) {
+        // if (!params['deviceKind']) {
+        //   params['deviceKind'] = null;
+        // }
+        return params;
+      },
+    },
+    exportConfig: {
+      name: '预警历史列表',
+      url: '/safety/ventanalyAlarmLog/exportXls',
+    },
+  });
+  //注册table数据
+  const [registerTable, { reload, setLoading, getForm }] = tableContext;
+
+  function onChangeTab(tab) {
+    if (tab === 'device') {
+      list.value = getAlarmLogList;
+      dataColumns.value = deviceColumns;
+    } else {
+      list.value = getManageAutoLogList;
+      dataColumns.value = manageAutoColumns;
+    }
+  }
+
+  //获取预警统计信息
+  async function getEachMineWarnCountInfoList() {
+    let res = await getWarnCountInfo({});
+    statisticsList[0].valueT = res.ventSWarnInfo.totalNum || 0;
+    statisticsList[0].valueB = res.ventSWarnInfo.maxWarnLevel || '';
+    statisticsList[1].valueT = res.dustSWarnInfo.totalNum || 0;
+    statisticsList[1].valueB = res.dustSWarnInfo.maxWarnLevel || '';
+    statisticsList[2].valueT = res.gasSWarnInfo.totalNum || 0;
+    statisticsList[2].valueB = res.gasSWarnInfo.maxWarnLevel || '';
+    statisticsList[3].valueT = res.fireSWarnInfo.totalNum || 0;
+    statisticsList[3].valueB = res.fireSWarnInfo.maxWarnLevel || '';
+    statisticsList[4].valueT = res.synthesizeSWarnInfo.totalNum || 0;
+    statisticsList[4].valueB = res.synthesizeSWarnInfo.maxWarnLevel || '';
+  }
+  onMounted(async () => {
+    getEachMineWarnCountInfoList();
+  });
+
+  defineExpose({ setLoading });
+</script>
+
+<style scoped lang="less">
+  @ventSpace: zxm;
+
+  :deep(.zxm-table-container) {
+    max-height: 720px !important;
+  }
+
+  :deep(.ventSpace-table-body) {
+    height: auto !important;
+  }
+
+  :deep(.zxm-picker) {
+    height: 30px !important;
+  }
+
+  :deep(.@{ventSpace}-picker-dropdown) {
+    position: absolute !important;
+    top: 35px !important;
+    left: 0 !important;
+  }
+
+  .data-statistics {
+    height: 200px;
+    padding: 20px;
+    margin-top: 90px;
+    background-color: #0ebbff15;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .statistics-box {
+      display: flex;
+      flex: 1;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+
+      .left-box {
+        position: relative;
+        width: 138px;
+        height: 100%;
+
+        .box-title {
+          position: absolute;
+          left: 50%;
+          bottom: 18px;
+          transform: translate(-50%, 0);
+          color: #fff;
+        }
+      }
+
+      &:nth-child(1) .left-box {
+        background: url('../../../../assets/images/vent-tf.png') no-repeat center;
+        background-size: 100% auto;
+      }
+
+      &:nth-child(2) .left-box {
+        background: url('../../../../assets/images/dust-fc.png') no-repeat center;
+        background-size: 100% auto;
+      }
+
+      &:nth-child(3) .left-box {
+        background: url('../../../../assets/images/gas-ws.png') no-repeat center;
+        background-size: 100% auto;
+      }
+
+      &:nth-child(4) .left-box {
+        background: url('../../../../assets/images/fire-fz.png') no-repeat center;
+        background-size: 100% auto;
+      }
+
+      &:nth-child(5) .left-box {
+        background: url('../../../../assets/images/aqjc.png') no-repeat center;
+        background-size: 100% auto;
+      }
+
+      .right-box {
+        position: relative;
+        width: 215px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+
+        .box-text {
+          position: relative;
+          width: 100%;
+          height: 40px;
+          color: #fff;
+          background: url('../../../../assets/images/his-one.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .text-label {
+            position: absolute;
+            left: 20px;
+            top: 50%;
+            transform: translate(0, -50%);
+          }
+
+          .text-value {
+            position: absolute;
+            left: 130px;
+            top: 50%;
+            transform: translate(0, -50%);
+            font-family: 'douyuFont';
+          }
+        }
+        .warning-state {
+          .text-value {
+            color: aqua !important;
+            font-family: 'douyuFont';
+          }
+        }
+      }
+    }
+  }
+  .tab-box {
+    display: flex;
+    color: #fff;
+    position: relative;
+    top: 11px;
+    background: linear-gradient(#001325, #012e4f);
+    :deep(.zxm-tabs-nav) {
+      margin: 0 !important;
+      .zxm-tabs-tab {
+        width: 180px;
+        height: 45px;
+        background: url('@/assets/images/top-btn.png') center no-repeat;
+        background-size: cover;
+        display: flex;
+        justify-content: center;
+        font-size: 16px;
+      }
+      .zxm-tabs-tab-active {
+        width: 180px;
+        position: relative;
+        background: url('@/assets/images/top-btn-select.png') center no-repeat;
+        background-size: cover;
+        .zxm-tabs-tab-btn {
+          color: #fff !important;
+        }
+      }
+      .zxm-tabs-ink-bar {
+        width: 0 !important;
+      }
+      .zxm-tabs-tab + .zxm-tabs-tab {
+        margin: 0 !important;
+      }
+    }
+  }
+  .alarm-history-table {
+    width: 100%;
+    background-color: #0ebbff15;
+    position: relative;
+    margin-top: 10px;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: calc(100% + 10px);
+      height: 2px;
+      top: 0px;
+      left: -10px;
+      border-bottom: 1px solid #0efcff44;
+    }
+  }
+</style>

src/views/vent/monitorManager/warningMonitor/warning.api.ts

@@ -3,8 +3,10 @@ import { defHttp } from '/@/utils/http/axios';
 enum Api {
   // list = '/safety/ventanalyAlarmLog/list',
   list = '/ventanaly-company/company/index/getEachMineWarnLogList',
-  getEachMineWarnCountInfo= '/ventanaly-company/company/index/getEachMineWarnCountInfo'
-
+  getEachMineWarnCountInfo = '/ventanaly-company/company/index/getEachMineWarnCountInfo',
+  getWarnCountInfo = '/ventanaly-device/monitor/groupCompany/getWarnCountInfo', // 获取矿端信息
+  getAlarmLogList = '/ventanaly-device/monitor/groupCompany/getAlarmLogList', //获取各矿预警统计信息
+  getManageAutoLogList = '/ventanaly-device/monitor/groupCompany/getManageAutoLogList', //获取各矿工作面智能管控预警信息
 }
 /**
  * 列表接口
@@ -16,3 +18,7 @@ export const list = (params) => defHttp.post({ url: Api.list, params });
  * @param params
  */
 export const getEachMineWarnCountInfo = (params) => defHttp.post({ url: Api.getEachMineWarnCountInfo, params });
+
+export const getWarnCountInfo = (params) => defHttp.post({ url: Api.getWarnCountInfo, params });
+export const getAlarmLogList = (params) => defHttp.post({ url: Api.getAlarmLogList, params });
+export const getManageAutoLogList = (params) => defHttp.post({ url: Api.getManageAutoLogList, params });