1. 添加误删文件

.env.development

@@ -27,6 +27,6 @@ VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//10.10.150.72:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
-#VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+#VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

.gitignore

@@ -36,3 +36,4 @@ os_del.cmd
 /.vscode/
 /.history/
 /svn clear.bat
+/src/views/vent/monitorManager/alarmMonitor

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

@@ -0,0 +1,42 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/ventanaly-device/monitor/device',
+  baseList = '/safety/ventanalyWindow/list',
+  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',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });
+
+export const warningList = (params) => defHttp.get({ url: Api.warningList, params });
+
+export const warningHistoryList = (params) => defHttp.get({ url: Api.warningHistoryList, 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/common.api.ts

@@ -0,0 +1,18 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  sysTypeWarnList = '/ventanaly-device/safety/ventanalyAlarmLog/sysTypeWarn',
+  sysWarn = '/ventanaly-device/safety/ventanalyAlarmLog/sysWarn',
+}
+
+/**
+ *预警详情弹窗左侧
+ * @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/common.data.ts

@@ -0,0 +1,204 @@
+import { reactive, markRaw, defineAsyncComponent } from 'vue';
+import { getAssetURL } from '/@/utils/ui';
+
+//中间区域数据-通风
+export const centerAreaListT1 = [
+    { id: 0, label: '进风量(m³/min)' },
+    { id: 1, label: '回风量(m³/min)' },
+    { id: 2, label: '需风量(m³/min)' },
+];
+//中间区域底部数据-通风
+export const centerAreaListB1 = [
+    {
+        id: 0,
+        content: '',
+    },
+    {
+        id: 1,
+        content: '',
+    },
+    {
+        id: 2,
+        content: '',
+    },
+];
+
+//内外因火灾菜单列表
+export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' },{name:'火灾指标'}];
+//瓦斯监测菜单列表
+export const typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' },];
+//当前加载组件
+export const componentName = {
+    fireWork: markRaw(defineAsyncComponent(() => import('./common/fireWork.vue'))),
+    closeWall: markRaw(defineAsyncComponent(() => import('./common/closeWall.vue'))),
+    mainWell: markRaw(defineAsyncComponent(() => import('./common/mainWell.vue'))),
+    warnTargetFire: markRaw(defineAsyncComponent(() => import('./common/warnTargetFire.vue'))),
+};
+//顶部区域数据
+export const topList = [
+    {
+        id: 0,
+        label: '最高温度(°C)',
+        imgSrc: true,
+        value: '--',
+        text: '',
+        list: [],
+    },
+    {
+        id: 1,
+        label: '最低温度(°C)',
+        imgSrc: true,
+        value: '--',
+        text: '',
+        list: [],
+    },
+    {
+        id: 2,
+        label: '平均温度(°C)',
+        imgSrc: true,
+        value: '--',
+        text: '',
+        list: [],
+    },
+    { id: 3, imgSrc: false, label: '', value: null, text: '--', list: [] },
+    {
+        id: 4,
+        imgSrc: false,
+        label: '回风隅角',
+        value: null,
+        text: '',
+        list: [
+            { id: 0, label: 'O₂', value: 0 },
+            { id: 1, label: 'CO', value: 0 },
+        ],
+    },
+];
+//束管监测选项列表
+export const contentList = [
+    {
+        id: 0,
+        list: [
+            {
+                id: '0-0',
+                title: 'O₂',
+                dw: '(%)',
+                label: '浓度 : ',
+                value: '--',
+                label1: '时间 : ',
+                time: '--',
+            },
+            {
+                id: '0-1',
+                title: 'C₂H₄',
+                dw: '(ppm)',
+                label: '浓度 : ',
+                value: '--',
+                label1: '时间 : ',
+                time: '--',
+            },
+        ],
+    },
+    {
+        id: 1,
+        list: [
+            {
+                id: '1-0',
+                title: 'CO',
+                dw: '(ppm)',
+                label: '浓度 : ',
+                value: '--',
+                label1: '时间 : ',
+                time: '--',
+            },
+            {
+                id: '1-1',
+                title: 'CH₄',
+                dw: '(ppm)',
+                label: '浓度 : ',
+                value: '--',
+                label1: '时间 : ',
+                time: '--',
+            },
+        ],
+    },
+    {
+        id: 2,
+        list: [
+            {
+                id: '2-0',
+                title: 'CO₂',
+                dw: '(%)',
+                label: '浓度 : ',
+                value: '--',
+                label1: '时间 : ',
+                time: '--',
+            },
+            {
+                id: '2-1',
+                title: 'C₂H₂',
+                dw: '(ppm)',
+                label: '浓度 : ',
+                value: '--',
+                label1: '时间 : ',
+                time: '--',
+            },
+        ],
+    },
+];
+//外因火灾-工作面顶部区域数据
+export const topOutList = [
+    {
+      id: 0,
+      imgSrc: true,
+      label: '最高温度(°C)',
+      value: '0',
+      text: '',
+    },
+    {
+      id: 1,
+      imgSrc: true,
+      label: '最低温度(°C)',
+      value: '0',
+      text: '',
+    },
+    {
+      id: 2,
+      imgSrc: true,
+      label: '平均温度(°C)',
+      value: '0',
+      text: '',
+    },
+    { id: 3, imgSrc: false, label: '', value: null, text: '' },
+    // {
+    //   id: 4,
+    //   imgSrc: false,
+    //   label: '',
+    //   value: null,
+    //   text: '井下消防材料库',
+    // },
+  ];
+  //外因火灾-中间区域标题数据
+export const tabList = [
+    { id: 0, label: '烟雾传感器监测', details: '设备类型名称' },
+    { id: 1, label: '一氧化碳传感器监测', details: '设备类型名称' },
+    { id: 2, label: '自动喷淋灭火装置监测', details: '设备类型名称' },
+  ];
+  export const tabLists = [
+    { id: 0, label: '烟雾传感器监测', details: '设备类型名称' },
+    { id: 1, label: '温度传感器监测', details: '设备类型名称' },
+    { id: 2, label: '自动喷淋灭火装置监测', details: '设备类型名称' },
+    { id: 3, label: '一氧化碳传感器监测', details: '设备类型名称' },
+  ];
+  //外因火灾-传感器table列
+export const columns = [
+    { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
+    { rowIndex: 2, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
+    { rowIndex: 3, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
+  ];
+  //外因火灾-烟雾传感器table列
+export const columnsSmoke = [
+    { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
+    { rowIndex: 2, dataIndex: 'val', title: '值', type: '1', align: 'center' },
+    { rowIndex: 3, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
+    { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
+  ];

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

@@ -0,0 +1,544 @@
+<template>
+  <div class="closeWall">
+    <div class="title">
+      <div class="box-container">
+        <div class="contents">
+          <img src="../../../../../assets/images/fire/pie.png" alt="" />
+          <span class="text">{{ topContent.temperature }}</span>
+          <span class="dw">°C</span>
+        </div>
+        <div class="contents">
+          <div class="text">
+            <span class="text-label">位置 : </span>
+            <span class="text-value">{{ topContent.position }}</span>
+          </div>
+          <div class="text">
+            <span class="text-label">时间 : </span>
+            <span class="text-value">{{ topContent.time }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="box-container">
+        <div class="text1">{{ topContent.warn }}</div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="title-b">采空区密闭参数</div>
+      <div class="card-btn">
+        <div
+          :class="activeIndex == index ? 'box-container1' : 'box-container'"
+          v-for="(item, index) in mbList"
+          :key="index"
+          @click="btnClick(item, index)"
+        >
+          <div class="box-label">
+            <span> {{ item.label }}</span>
+            <span>{{ item.dw }}</span>
+          </div>
+          <div class="box-item box-item1">
+            <span class="text-t">{{ `${item.label1}:` }}</span>
+            <span class="text-v">{{ item.nd }}</span>
+          </div>
+          <div class="box-item box-item2">
+            <span class="text-t">{{ `${item.label2}:` }}</span>
+            <span class="text-v">{{ item.time1 }}</span>
+          </div>
+          <div class="box-item box-item3">
+            <span class="text-t">{{ `${item.label3}:` }}</span>
+            <span class="text-v">{{ item.address }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="echart-box">
+        <div class="title-f">
+          <div class="title-text">{{ `${type}趋势` }}</div>
+        </div>
+        <div class="echarts-box">
+          <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
+  import echartLine1 from './echartLine1.vue';
+
+  let props = defineProps({
+    listData: Object,
+  });
+
+  //密闭-顶部区域数据
+  let topContent = reactive({
+    temperature: 0,
+    position: '',
+    time: '',
+    warn: '',
+  });
+  //密闭参数列表
+  let mbList = reactive([
+    {
+      label: 'O₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'CO',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'CO₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'CH₄',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'C₂H₂',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'C₂H₄',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+  ]);
+
+  //当前密闭参数激活选项
+  let activeIndex = ref(0);
+  //当前激活密闭参数类型
+  let type = ref('O₂');
+
+  let echartDataSg1 = reactive({
+    xData: [],
+    yData: [],
+    lengedData: 'O₂',
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
+
+  //密闭参数选项切换
+  function btnClick(item, ind) {
+    activeIndex.value = ind;
+    type.value = item.label;
+    echartDataSg1.xData.length = 0;
+    echartDataSg1.yData.length = 0;
+    echartDataSg1.lengedData = type.value;
+    echartDataSg1.lengedDataName = item.dw;
+
+    switch (type.value) {
+      case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.o2val);
+        });
+        break;
+      case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.ch2val);
+        });
+        break;
+      case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.coval);
+        });
+        break;
+      case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.chval);
+        });
+        break;
+      case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.co2val);
+        });
+        break;
+      case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.gasval);
+        });
+        break;
+    }
+  }
+
+  watch(
+    () => props.listData,
+    (val) => {
+      console.log(val, 'val---');
+      echartDataSg1.xData.length = 0;
+      echartDataSg1.yData.length = 0;
+      echartDataSgList.length = 0;
+      if (JSON.stringify(val) != '{}') {
+        if (val.bundletube.length != 0) {
+          topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+          topContent.position = val.bundletube[0].strinstallpos || '--';
+          topContent.time = val.bundletube[0].readTime || '--';
+          topContent.warn =
+            val.bundletube[0].warnLevel == 0
+              ? '正常'
+              : val.bundletube[0].warnLevel == 101
+              ? '较低风险'
+              : val.bundletube[0].warnLevel == 102
+              ? '低风险'
+              : val.bundletube[0].warnLevel == 103
+              ? '中风险'
+              : val.bundletube[0].warnLevel == 104
+              ? '高风险'
+              : val.bundletube[0].warnLevel == 201
+              ? '报警'
+              : '正常';
+          mbList[0].nd = val.bundletube[0].readData.o2val || '--';
+          mbList[1].nd = val.bundletube[0].readData.coval || '--';
+          mbList[2].nd = val.bundletube[0].readData.co2val || '--';
+          mbList[3].nd = val.bundletube[0].readData.chval || '--';
+          mbList[4].nd = val.bundletube[0].readData.ch2val || '--';
+          mbList[5].nd = val.bundletube[0].readData.gasval || '--';
+          mbList.forEach((el) => {
+            el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--';
+            el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--';
+          });
+
+          val.bundletube[0].history.forEach((v) => {
+            echartDataSg1.xData.push(v.time);
+            if (echartDataSg1.lengedData == 'O₂') {
+              echartDataSg1.yData.push(v.o2val);
+            } else if (echartDataSg1.lengedData == 'C₂H₄') {
+              echartDataSg1.yData.push(v.ch2val);
+            } else if (echartDataSg1.lengedData == 'CO') {
+              echartDataSg1.yData.push(v.coval);
+            } else if (echartDataSg1.lengedData == 'CH₄') {
+              echartDataSg1.yData.push(v.chval);
+            } else if (echartDataSg1.lengedData == 'CO₂') {
+              echartDataSg1.yData.push(v.co2val);
+            } else if (echartDataSg1.lengedData == 'C₂H₂') {
+              echartDataSg1.yData.push(v.gasval);
+            }
+            echartDataSgList.push(v);
+          });
+        } else {
+          topContent.temperature = 0;
+          topContent.position = '--';
+          topContent.time = '--';
+          topContent.warn = '正常';
+          mbList[0].nd = '--';
+          mbList[1].nd = '--';
+          mbList[2].nd = '--';
+          mbList[3].nd = '--';
+          mbList[4].nd = '--';
+          mbList[5].nd = '--';
+          mbList.forEach((el) => {
+            el.time1 = '--';
+            el.address = '--';
+          });
+        }
+      }
+    },
+    { immediate: true, deep: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .closeWall {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .title {
+      width: 100%;
+      height: 17%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      align-items: center;
+
+      .box-container {
+        display: flex;
+
+        &:nth-child(1) {
+          justify-content: space-around;
+          align-items: center;
+          flex: 2;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(2) {
+          flex: 1;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+        }
+
+        .contents {
+          height: 73%;
+
+          &:nth-child(1) {
+            width: 40%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+              position: relative;
+              width: 23%;
+              height: 100%;
+              background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+              background-size: 50% 50%;
+            }
+
+            .text {
+              font-family: 'douyuFont';
+              font-size: 28px;
+              margin: 0px 15px;
+              color: #3df6ff;
+            }
+
+            .dw {
+              font-size: 14px;
+              color: #b3b8cc;
+            }
+          }
+
+          &:nth-child(2) {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .text {
+              font-size: 14px;
+
+              .text-label {
+                color: #b3b8cc;
+                font-weight: bold;
+              }
+
+              .text-value {
+                font-family: 'douyuFont';
+                color: #3df6ff;
+                margin-left: 10px;
+              }
+            }
+          }
+        }
+
+        .text1 {
+          font-size: 16px;
+          color: #b3b8cc;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .content {
+      width: 100%;
+      height: calc(83% - 20px);
+      padding: 10px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+
+      .title-b {
+        height: 30px;
+        line-height: 30px;
+        font-family: 'douyuFont';
+        font-size: 14px;
+        color: #fff;
+        // color: #3df6ff;
+      }
+
+      .card-btn {
+        height: 28%;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+
+        .box-container {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .box-label {
+            position: absolute;
+            left: 50%;
+            top: 2px;
+            transform: translate(-50%);
+            color: #fff;
+          }
+
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
+            }
+
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
+            }
+          }
+
+          .box-item1 {
+            top: 24%;
+          }
+
+          .box-item2 {
+            top: 50%;
+          }
+
+          .box-item3 {
+            top: 75%;
+          }
+        }
+
+        .box-container1 {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .box-label {
+            position: absolute;
+            left: 50%;
+            top: 2px;
+            transform: translate(-50%);
+            color: #fff;
+          }
+
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
+            }
+
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
+            }
+          }
+
+          .box-item1 {
+            top: 19%;
+          }
+
+          .box-item2 {
+            top: 41%;
+          }
+
+          .box-item3 {
+            top: 63%;
+          }
+        }
+      }
+
+      .echart-box {
+        height: calc(72% - 41px);
+        border: 1px solid #114aac;
+
+        .title-f {
+          height: 40px;
+          padding: 0px 10px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .title-text {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+            // color: #3df6ff;
+          }
+        }
+
+        .echarts-box {
+          height: calc(100% - 40px);
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,285 @@
+<template>
+  <div class="echartLine">
+    <div class="line" ref="line"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, ref, nextTick, reactive, watch, } from 'vue';
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  echartDataGq: {
+    type: Object,
+  },
+  maxY: {
+    type: Number
+  },
+  echartDw: {
+    type: String
+  },
+  echartDw1:{
+    type:String,
+  }
+});
+//获取dom元素节点
+let line = ref<any>();
+let echartDataGqs = reactive({})
+watch(
+  () => props.echartDataGq,
+  (data) => {
+    echartDataGqs = Object.assign({}, data)
+    getOption();
+  },
+  { immediate: true, deep: true }
+);
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(line.value);
+    let option = {
+      grid: {
+        top: '15%',
+        left: '2%',
+        bottom: '6%',
+        right: '2%',
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'item',
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+      },
+      legend: {
+        align: 'left',
+        right: 'center',
+        top: '0%',
+        type: 'plain',
+        textStyle: {
+          color: '#7ec7ff',
+          fontSize: 14,
+        },
+        // icon:'rect',
+        itemGap: 25,
+        itemWidth: 18,
+        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+        data: [
+          {
+            name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData  : '',
+          },
+          {
+            name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
+          },
+
+          {
+            name:echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : ''
+          }
+        ],
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            // formatter: '{value}',
+            fontSize: 14,
+            margin: 20,
+            textStyle: {
+              color: '#b3b8cc',
+            },
+            formatter: function (params) {
+              let newParamsName = ref('')  // 最终拼接成的字符串
+              let paramsNameNumber = ref(params.length) // 实际标签的个数
+              let provideNumber = ref(10)  // 每行能显示的字的个数
+              let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber.value > provideNumber.value) {
+                /** 循环每一行,p表示行 */
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = '' // 表示每一次截取的字符串
+                  var start = p * provideNumber.value // 开始截取的位置
+                  var end = start + provideNumber.value // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p == rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber.value)
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n'
+                  }
+                  newParamsName.value += tempStr // 最终拼成的字符串
+                }
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName.value = params
+              }
+              //将最终的字符串返回
+              return newParamsName.value
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
+            },
+          },
+          splitLine: {
+            show: false,
+            //   lineStyle: {
+            //     color: '#243753',
+            //   },
+          },
+          axisTick: {
+            show: false,
+          },
+          data: echartDataGqs.xData ? echartDataGqs.xData : [],
+        },
+      ],
+      yAxis: [
+        {
+          boundaryGap: false,
+          type: 'value',
+          max: props.maxY,
+          axisLabel: {
+            textStyle: {
+              color: '#b3b8cc',
+            },
+            formatter:'{value}'
+          },
+          name: props.echartDw,
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        {
+          boundaryGap: false,
+          type: 'value',
+          max: props.maxY,
+          axisLabel: {
+            textStyle: {
+              color: '#b3b8cc',
+            },
+            formatter:'{value}'
+          },
+          name: props.echartDw1,
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(14, 53, 95)',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
+          type: 'line',
+          smooth: true,
+          showSymbol: true,
+          symbolSize: 8,
+          zlevel: 3,
+          itemStyle: {
+            color: '#19a3df',
+            borderColor: '#a3c8d8',
+          },
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: '#19a3df',
+            },
+          },
+          data: echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
+        },
+        {
+          name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
+          type: 'line',
+          smooth: true,
+          showSymbol: true,
+          symbolSize: 8,
+          zlevel: 3,
+          itemStyle: {
+            color: '#4fffad',
+            borderColor: '#a3c8d8',
+          },
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: '#4fffad',
+            },
+          },
+          data: echartDataGqs.minData ? echartDataGqs.minData.data : [],
+        },
+        {
+          name: echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : '',
+          type: 'line',
+          smooth: true,
+          showSymbol: true,
+          symbolSize: 8,
+          zlevel: 3,
+          itemStyle: {
+            color: '#fc8452',
+            borderColor: '#a3c8d8',
+          },
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: '#fc8452',
+            },
+          },
+
+          data: echartDataGqs.aveValue ? echartDataGqs.aveValue.data : [],
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+</script>
+
+<style scoped lang="less">
+.echartLine {
+  width: 100%;
+  height: 100%;
+
+  .line {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,232 @@
+<template>
+    <div class="echartLine">
+        <div class="line" ref="line"></div>
+    </div>
+</template>
+  
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { ref, nextTick, reactive, watch, defineProps } from 'vue';
+let props = defineProps({
+    echartDataSg: {
+        type: Object,
+    },
+    lengedDataName: {
+        type: String,
+    }
+})
+
+//获取dom元素节点
+let line = ref<any>()
+let echartDataSgs = reactive({})
+watch(() => props.echartDataSg, (data) => {
+    echartDataSgs = Object.assign({}, data)
+    getOption()
+}, { immediate: true, deep: true })
+
+
+
+function getOption() {
+    nextTick(() => {
+        const myChart = echarts.init(line.value)
+        let option = {
+            grid: {
+                top: '8%',
+                left: '5%',
+                bottom: '14%',
+                right: '5%',
+                //   containLabel: true,
+            },
+            tooltip: {
+                trigger: 'axis',
+                backgroundColor: 'rgba(0, 0, 0, .6)',
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 12,
+                },
+            },
+            legend: {
+                align: 'left',
+                right: '50%',
+                top: '0%',
+                type: 'plain',
+                textStyle: {
+                    color: '#7ec7ff',
+                    fontSize: 14,
+                },
+                // icon:'rect',
+                itemGap: 25,
+                itemWidth: 18,
+                icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+                data: [
+                    {
+                        name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
+                    },
+               
+                ],
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLabel: {
+                        // formatter: '{value}',
+                        fontSize: 14,
+                        margin: 10,
+                        textStyle: {
+                            color: '#b3b8cc',
+                        },
+                        // interval: 0,
+                        formatter: function (params) {
+                            let newParamsName = ref('')  // 最终拼接成的字符串
+                            let paramsNameNumber = ref(params.length) // 实际标签的个数
+                            let provideNumber = ref(10)  // 每行能显示的字的个数
+                            let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
+                            /**
+                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+                             */
+                            // 条件等同于rowNumber>1
+                            if (paramsNameNumber.value > provideNumber.value) {
+                                /** 循环每一行,p表示行 */
+                                for (var p = 0; p < rowNumber; p++) {
+                                    var tempStr = '' // 表示每一次截取的字符串
+                                    var start = p * provideNumber.value // 开始截取的位置
+                                    var end = start + provideNumber.value // 结束截取的位置
+                                    // 此处特殊处理最后一行的索引值
+                                    if (p == rowNumber - 1) {
+                                        // 最后一次不换行
+                                        tempStr = params.substring(start, paramsNameNumber.value)
+                                    } else {
+                                        // 每一次拼接字符串并换行
+                                        tempStr = params.substring(start, end) + '\n'
+                                    }
+                                    newParamsName.value += tempStr // 最终拼成的字符串
+                                }
+                            } else {
+                                // 将旧标签的值赋给新标签
+                                newParamsName.value = params
+                            }
+                            //将最终的字符串返回
+                            return newParamsName.value
+                        }
+
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#244a94',
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#0d2973',
+                            type: 'dashed',
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    data: echartDataSgs.xData,
+                },
+            ],
+            yAxis: [
+                {
+                    boundaryGap: false,
+                    name: props.lengedDataName ? props.lengedDataName : '',
+                    type: 'value',
+                    max: 50,
+                    axisLabel: {
+                        textStyle: {
+                            color: '#b3b8cc',
+                        },
+                    },
+                    nameTextStyle: {
+                        color: '#fff',
+                        fontSize: 12,
+                        lineHeight: 5,
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: '#0d2973',
+                            type: 'dashed',
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#244a94',
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+            ],
+            series: [
+                {
+                    name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
+                    type: 'line',
+                    smooth: false,
+                    showSymbol: false,
+                    symbolSize: 8,
+                    zlevel: 3,
+                    itemStyle: {
+                        color: '#02f2de',
+                        borderColor: '#a3c8d8',
+                    },
+                    lineStyle: {
+                        normal: {
+                            width: 3,
+                            color: '#02f2de',
+                        },
+                    },
+                    areaStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                0,
+                                1,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(2, 242, 222,0.8)',
+                                    },
+                                    {
+                                        offset: 0.5,
+                                        color: 'rgba(2, 242, 222,0.4)',
+                                    },
+                                    {
+                                        offset: 0.9,
+                                        color: 'rgba(2, 242, 222,0)',
+                                    },
+                                ],
+                                false
+                            ),
+                        },
+                    },
+                    data: echartDataSgs.yData,
+                },
+            ],
+        }
+        myChart.setOption(option)
+        window.onresize = function () {
+            myChart.resize()
+        }
+    })
+}
+
+
+</script>
+  
+<style scoped lang='less'>
+.echartLine {
+    width: 100%;
+    height: 100%;
+
+    .line {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

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

@@ -0,0 +1,229 @@
+<template>
+    <div class="echart-work">
+        <div ref="work" class="work-box"></div>
+    </div>
+</template>
+  
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { ref, nextTick, reactive, watch, defineProps } from 'vue';
+
+let props = defineProps({
+    echartDataWd: {
+        type: Object,
+    }
+})
+
+//获取dom元素节点
+let work = ref<any>()
+let echartDataWds = reactive({})
+
+watch(() => props.echartDataWd, (data) => {
+    echartDataWds = Object.assign({}, data)
+    getOption()
+}, { immediate: true, deep: true })
+
+function getOption() {
+    nextTick(() => {
+        const myChart = echarts.init(work.value)
+        let option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                },
+            },
+
+            legend: {
+                align: 'left',
+                right: '50%',
+                top: '0%',
+                type: 'plain',
+                textStyle: {
+                    color: '#7ec7ff',
+                    fontSize: 14,
+                },
+                // icon:'rect',
+                itemGap: 25,
+                itemWidth: 18,
+                icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+                data: [
+                    {
+                        name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
+                    },
+               
+                ],
+            },
+
+            grid: {
+                top: '20%',
+                left: '4%',
+                right: '4%',
+                bottom: '20%',
+                // containLabel: true
+            },
+
+            xAxis: [
+                {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLine: {
+                        //坐标轴轴线相关设置。数学上的x轴
+                        show: true,
+                        lineStyle: {
+                            color: '#244a94',
+                        },
+                    },
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置
+                        textStyle: {
+                            color: '#b3b8cc',
+                            padding: 5,
+                            fontSize: 14,
+                        },
+                        formatter: function (data) {
+                            return data
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#0d2973',
+                            type: 'dashed',
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    data: echartDataWds.xData,
+                },
+            ],
+
+            yAxis: [
+                {
+                    name: '(℃)',
+                    nameTextStyle: {
+                        color: '#7ec7ff',
+                        fontSize: 14,
+                        padding: 0,
+                    },
+                    min: 0,
+                    max: 2000,
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#0d2973',
+                            type: 'dashed',
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#244a94',
+                        },
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#b3b8cc',
+                            padding: 5,
+                        },
+                        formatter: function (value) {
+                            if (value === 0) {
+                                return value
+                            }
+                            return value
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+            ],
+            series: [
+                {
+                    name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
+                    type: 'line',
+                    smooth: true,
+                    yAxisIndex: 0,
+                    symbolSize: 8,
+                    lineStyle: {
+                        normal: {
+                            width: 2,
+                            color: '#4653fd', // 线条颜色
+                        },
+                        borderColor: 'rgba(0,0,0,.4)',
+                    },
+                    itemStyle: {
+                        color: '#4653fd',
+                        borderColor: '#646ace',
+                        borderWidth: 0,
+                    },
+                    data: echartDataWds.maxData ? echartDataWds.maxData.data : [],
+                },
+                {
+                    name: echartDataWds.minData ? echartDataWds.minData.lengedData : '',
+                    type: 'line',
+                    smooth: true,
+                    yAxisIndex: 0,
+                    symbolSize: 8,
+
+                    lineStyle: {
+                        normal: {
+                            width: 2,
+                            color: '#46fda8', // 线条颜色
+                        },
+                        borderColor: 'rgba(0,0,0,.4)',
+                    },
+                    itemStyle: {
+                        color: '#46fda8',
+                        borderColor: '#646ace',
+                        borderWidth: 0,
+                    },
+                    data: echartDataWds.minData ? echartDataWds.minData.data : [],
+                },
+                {
+                    name: echartDataWds.aveaData ? echartDataWds.aveaData.lengedData : '',
+                    type: 'line',
+                    smooth: true,
+                    yAxisIndex: 0,
+                    symbolSize: 8,
+
+                    lineStyle: {
+                        normal: {
+                            width: 2,
+                            color: '#1eb0fc', // 线条颜色
+                        },
+                        borderColor: 'rgba(0,0,0,.4)',
+                    },
+                    itemStyle: {
+                        color: '#1eb0fc',
+                        borderColor: '#646ace',
+                        borderWidth: 0,
+                    },
+                    data: echartDataWds.aveaData ? echartDataWds.aveaData.data : [],
+                },
+            ],
+        }
+        myChart.setOption(option)
+        window.onresize = function () {
+            myChart.resize()
+        }
+    })
+}
+
+
+</script>
+  
+<style scoped lang="less">
+.echart-work {
+    width: 100%;
+    height: 100%;
+
+    .work-box {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
+  

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

@@ -0,0 +1,480 @@
+<template>
+  <div class="fireWork">
+    <!-- 顶部区域 -->
+    <div class="work-nav">
+      <div class="nav" v-for="(item, index) in topList" :key="index">
+        <div class="pic" v-if="item.imgSrc">
+          <img :src="imgUrl" alt="" />
+        </div>
+        <div class="content" v-if="item.label && item.value">
+          <span>{{ item.label }}</span>
+          <span>{{ item.value }}</span>
+        </div>
+        <div class="text" v-if="item.text">{{ item.text }}</div>
+        <div class="percent" v-if="item.list.length != 0">
+          <div class="title">{{ item.label }}</div>
+          <div class="value">
+            <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
+              <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
+              <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 中间区域 -->
+    <div class="center-echart">
+      <div class="nav-title">
+        <div class="title">光纤测温系统温度实时监测</div>
+      </div>
+      <div class="echart-box">
+        <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw" />
+      </div>
+    </div>
+    <!-- 底部区域 -->
+    <div class="bot-content">
+      <div class="title">
+        <div class="text">束管系统监测</div>
+      </div>
+      <div class="content">
+        <div class="content-box" v-for="(item, index) in contentList" :key="index">
+          <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
+            <div class="content-title">
+              <span> {{ items.title }}</span>
+              <span> {{ items.dw }}</span>
+            </div>
+            <div class="content-item">
+              <span>{{ items.label }}</span>
+              <span class="bolds">{{ items.value }}</span>
+            </div>
+            <div class="content-item">
+              <span>{{ items.label1 }}</span>
+              <span class="bolds">{{ items.time }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="echart-box">
+        <echartLine1 :echartDataSg="echartDataSg" :lengedDataName="echartDataSg.lengedDataName" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
+  import imgUrl from '../../../../../assets/images/fire/pie.png';
+  import echartLine from './echartLine.vue';
+  import echartLine1 from './echartLine1.vue';
+  import { topList, contentList } from '../common.data';
+
+  let props = defineProps({
+    listData: Object,
+  });
+
+  let maxY = ref(2000);
+  let echartDw = ref('(­°C)');
+  //光钎测温-图表数据
+  let echartDataGq = reactive({
+    maxData: {
+      lengedData: '当前温度',
+      data: [],
+    },
+    xData: [],
+  });
+  //束管监测-图表数据
+  let echartDataSg = reactive({
+    xData: [],
+    yData: [],
+    lengedData: 'O₂',
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
+  //束管实时数据选项点击
+  function getSgClick(items) {
+    echartDataSg.xData.length = 0;
+    echartDataSg.yData.length = 0;
+    echartDataSg.lengedData = items.title;
+    echartDataSg.lengedDataName = items.dw;
+
+    switch (items.title) {
+      case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.o2val);
+        });
+        break;
+      case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.ch2val);
+        });
+        break;
+      case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.coval);
+        });
+        break;
+      case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.chval);
+        });
+        break;
+      case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.co2val);
+        });
+        break;
+      case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.gasval);
+        });
+        break;
+    }
+  }
+
+  watch(
+    () => props.listData,
+    (val, val1) => {
+      echartDataGq.xData.length = 0;
+      echartDataGq.maxData.data.length = 0;
+      echartDataSgList.length = 0;
+      echartDataSg.xData.length = 0;
+      echartDataSg.yData.length = 0;
+      if (JSON.stringify(val) != '{}') {
+        if (val.fiber.length != 0) {
+          topList[0].value = val.fiber[0].readData.fmax;
+          topList[1].value = val.fiber[0].readData.fmin;
+          topList[2].value = val.fiber[0].readData.favg;
+          topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常';
+          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
+            echartDataGq.xData.push(el.pos);
+            echartDataGq.maxData.data.push(el.value);
+          });
+        } else {
+          topList[0].value = '--';
+          topList[1].value = '--';
+          topList[2].value = '--';
+          topList[3].text = '正常';
+        }
+
+        if (val.bundletube.length != 0) {
+          contentList[0].list[0].value = val.bundletube[0].readData.o2val;
+          contentList[0].list[1].value = val.bundletube[0].readData.ch2val;
+          contentList[1].list[0].value = val.bundletube[0].readData.coval;
+          contentList[1].list[1].value = val.bundletube[0].readData.chval;
+          contentList[2].list[0].value = val.bundletube[0].readData.co2val;
+          contentList[2].list[1].value = val.bundletube[0].readData.gasval;
+          contentList.forEach((el) => {
+            el.list.forEach((v) => {
+              v.time = val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':'));
+            });
+          });
+
+          val.bundletube[0].history.forEach((el) => {
+            echartDataSg.xData.push(el.time);
+            if (echartDataSg.lengedData == 'O₂') {
+              echartDataSg.yData.push(el.o2val);
+            } else if (echartDataSg.lengedData == 'C₂H₄') {
+              echartDataSg.yData.push(el.ch2val);
+            } else if (echartDataSg.lengedData == 'C₂H₂') {
+              echartDataSg.yData.push(el.gasval);
+            } else if (echartDataSg.lengedData == 'CH₄') {
+              echartDataSg.yData.push(el.chval);
+            } else if (echartDataSg.lengedData == 'CO') {
+              echartDataSg.yData.push(el.coval);
+            } else if (echartDataSg.lengedData == 'CO₂') {
+              echartDataSg.yData.push(el.co2val);
+            }
+            echartDataSgList.push(el);
+          });
+        } else {
+          contentList[0].list[0].value = '--';
+          contentList[0].list[1].value = '--';
+          contentList[1].list[0].value = '--';
+          contentList[1].list[1].value = '--';
+          contentList[2].list[0].value = '--';
+          contentList[2].list[1].value = '--';
+          contentList.forEach((el) => {
+            el.list.forEach((v) => {
+              v.time = '--';
+            });
+          });
+        }
+      }
+    },
+    { deep: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .fireWork {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .work-nav {
+      height: 15%;
+      width: 100%;
+      margin-bottom: 20px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .nav {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:nth-child(1) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(2) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(3) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(4) {
+          flex: 0.6;
+          color: #b3b8cc;
+          font-size: 16px;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(5) {
+          flex: 1.4;
+          height: 100%;
+
+          .percent {
+            width: 100%;
+            height: 82%;
+            padding: 0px 20px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .title {
+              font-size: 14px;
+              padding: 5px 0px;
+              color: #b3b8cc;
+              text-align: center;
+            }
+
+            .value {
+              display: flex;
+              justify-content: space-between;
+
+              span {
+                font-family: 'douyuFont';
+                font-size: 18px;
+              }
+            }
+          }
+        }
+
+        .pic {
+          width: 30%;
+          height: 82%;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .content {
+          height: 82%;
+          margin-left: 15px;
+          color: #fff;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          span {
+            font-size: 14px;
+
+            &:nth-child(1) {
+              padding: 5px 0px;
+              color: #b3b8cc;
+            }
+
+            &:nth-child(2) {
+              font-family: 'douyuFont';
+              font-size: 16px;
+              color: #3df6ff;
+            }
+          }
+        }
+      }
+
+      .nav:nth-child(1) .pic {
+        background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
+
+      .nav:nth-child(2) .pic {
+        background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
+
+      .nav:nth-child(3) .pic {
+        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
+    }
+
+    .center-echart {
+      width: 100%;
+      height: 32%;
+      padding: 10px;
+      margin-bottom: 20px;
+      box-sizing: border-box;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .nav-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title {
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
+          // color: #3df6ff;
+        }
+      }
+
+      .echart-box {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
+    }
+
+    .bot-content {
+      position: relative;
+      width: 100%;
+      height: calc(53% - 40px);
+      padding: 10px 10px 0px 10px;
+      box-sizing: border-box;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        .text {
+          height: 30px;
+          line-height: 30px;
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+
+      .content {
+        height: calc(100% - 30px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .content-box {
+          width: 100%;
+          height: 29%;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0px !important;
+
+          .box-item {
+            position: relative;
+            width: 16%;
+            height: 100%;
+            background: url('../../../../../assets/images/fire/14174.png') no-repeat center;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .content-title {
+              position: absolute;
+              left: 50%;
+              top: 0;
+              transform: translate(-50%);
+              color: #fff;
+              font-size: 14px;
+            }
+
+            .content-item {
+              position: absolute;
+              width: 93%;
+              height: 27%;
+              display: flex;
+              align-items: center;
+              padding: 0px 10px;
+              box-sizing: border-box;
+              background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+              background-size: 100% 100%;
+              color: #fff;
+              font-size: 14px;
+
+              &:nth-child(2) {
+                left: 50%;
+                top: 28%;
+                transform: translate(-50%);
+                display: flex;
+                justify-content: space-between;
+              }
+
+              &:nth-child(3) {
+                left: 50%;
+                top: 62%;
+                transform: translate(-50%);
+                display: flex;
+                justify-content: space-between;
+              }
+
+              .bolds {
+                font-family: 'douyuFont';
+                color: #3df6ff;
+                font-size: 12px;
+              }
+            }
+          }
+        }
+      }
+
+      .echart-box {
+        position: absolute;
+        left: 50%;
+        top: 50px;
+        transform: translate(-50%, 0);
+        width: 66%;
+        height: calc(100% - 50px);
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,1060 @@
+<template>
+  <div class="mainWell">
+    <!-- 光钎测温 -->
+    <div class="work-nav" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
+      <div class="nav" v-for="(item, index) in topOutList" :key="index">
+        <div class="pic" v-if="item.imgSrc">
+          <img :src="imgUrl" alt="" />
+        </div>
+        <div class="content" v-if="item.label && item.value">
+          <span>{{ item.label }}</span>
+          <span>{{ item.value }}</span>
+        </div>
+        <div class="text" v-if="item.text">{{ item.text }}</div>
+      </div>
+    </div>
+    <!-- 束管监测 -->
+    <div class="work-nav" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
+      <div class="content-box">
+        <div class="contents">
+          <img src="../../../../../assets/images/fire/pie.png" alt="" />
+          <span class="text">{{ topContent.temperature }}</span>
+          <span class="dw">°C</span>
+        </div>
+        <!-- <div class="contents">
+          <div class="text">
+            <span class="text-label">位置 : </span>
+            <span class="text-value">{{ topContent.position }}</span>
+          </div>
+          <div class="text">
+            <span class="text-label">时间 : </span>
+            <span class="text-value">{{ topContent.time }}</span>
+          </div>
+        </div> -->
+      </div>
+      <div class="content-box">
+        <div class="text1">{{ topContent.warn }}</div>
+      </div>
+    </div>
+
+    <div class="center-box" v-if="strType != 'sys_coalseam'">
+      <div class="content-box" v-for="(items, index) in tabList" :key="index">
+        <div class="title">
+          <span class="title-label">{{ items.label }}</span>
+          <span class="details">{{ `${items.details}>>` }}</span>
+        </div>
+        <div class="content">
+          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x: 0, y: 273 }" :columns="columnsSmoke"
+            :data-source="monitorlistYw" :pagination="false">
+            <span slot="action" slot-scope="text, record"></span>
+          </a-table>
+          <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
+            :pagination="false" :scroll="{ y: 273 }">
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: 273 }" :columns="columns"
+            :data-source="monitorlistPl" :pagination="false">
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+        </div>
+      </div>
+    </div>
+    <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
+      <div v-for="(items, index) in tabLists" :class="index != 2 && index != 3 ? 'content-box' : 'content-boxs'"
+        :key="index">
+        <div class="title">
+          <span class="title-label">{{ items.label }}</span>
+          <span class="details">{{ `${items.details}>>` }}</span>
+        </div>
+        <div class="content">
+          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
+            :columns="columnsSmoke" :data-source="monitorlistYw" :pagination="false">
+            <span slot="action" slot-scope="text, record"></span>
+          </a-table>
+
+          <a-table v-if="index == 1" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
+            :columns="columnsSmoke" :data-source="monitorlistWd" :pagination="false">
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
+            :columns="columns" :data-source="monitorlistPl" :pagination="false">
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+          <a-table v-if="index == 3" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
+            :pagination="false" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }">
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+        </div>
+      </div>
+    </div>
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
+      v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
+      <div class="footer-title">
+        <div class="echart-label">光钎测温系统实时温度监测</div>
+      </div>
+      <div class="echart-content">
+        <echartLine2 :echartDataWd="echartDataWd" />
+      </div>
+    </div>
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
+      v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
+      <div class="footer-title">
+        <div class="echart-label">光钎测温系统实时温度监测</div>
+      </div>
+      <div class="echart-content">
+        <echartLine2 :echartDataWd="echartDataWd" />
+      </div>
+    </div>
+
+    <!-- 束管监测 -->
+    <div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
+      <div class="title-b">采空区密闭参数</div>
+      <div class="card-btn">
+        <div :class="activeIndex == index ? 'content-box1' : 'content-box'" v-for="(item, index) in mbList" :key="index"
+          @click="btnClick(item, index)">
+          <div class="btn-label">
+            <span>{{ item.label }}</span>
+            <span>{{ item.dw }}</span>
+          </div>
+          <div class="box-item box-item1">
+            <span class="text-t">{{ `${item.label1}:` }}</span>
+            <span class="text-v">{{ item.nd }}</span>
+          </div>
+          <div class="box-item box-item2">
+            <span class="text-t">{{ `${item.label2}:` }}</span>
+            <span class="text-v">{{ item.time1 }}</span>
+          </div>
+          <div class="box-item box-item3">
+            <span class="text-t">{{ `${item.label3}:` }}</span>
+            <span class="text-v">{{ item.address }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="echart-box">
+        <div class="title-f">
+          <div class="title-text">{{ `${type}趋势` }}</div>
+        </div>
+        <div class="echarts-box">
+          <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, reactive, watch, defineProps } from 'vue';
+import { topOutList, tabList, tabLists, columns, columnsSmoke } from '../common.data';
+import imgUrl from '../../../../../assets/images/fire/pie.png';
+import echartLine2 from './echartLine2.vue';
+import echartLine1 from './echartLine1.vue';
+
+let props = defineProps({
+  listData: Object,
+  strType: String,
+});
+
+//束管监测-顶部区域数据
+let topContent = reactive({
+  temperature: '0',
+  position: '',
+  time: '',
+  warn: '',
+});
+//束管监测当前密闭参数激活选项
+let activeIndex = ref(0);
+//束管监测当前激活密闭参数类型
+let type = ref('O₂');
+//束管监测密闭参数列表
+let mbList = reactive([
+  {
+    label: 'O₂',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CO',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CO₂',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CH₄',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'C₂H₂',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'C₂H₄',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '',
+    address: '',
+  },
+]);
+let echartDataSg1 = reactive({
+  xData: [],
+  yData: [],
+  lengedData: 'O₂',
+  lengedDataName: '(%)',
+});
+let echartDataSgList = reactive<any[]>([]);
+
+//外因火灾温度监测-图表数据
+let echartDataWd = reactive({
+  xData: [],
+  maxData: {
+    data: [],
+    lengedData: '实时温度',
+  },
+});
+
+//烟雾传感器列表数据
+let monitorlistYw = reactive([]);
+
+//火焰传感器列表数据
+let monitorlistHy = reactive([]);
+
+//喷淋装置列表数据
+let monitorlistPl = reactive([]);
+
+//温度传感器列表数据
+let monitorlistWd = reactive([]);
+
+//束管监测密闭参数选项切换
+function btnClick(item, ind) {
+  activeIndex.value = ind;
+  type.value = item.label;
+  echartDataSg1.xData.length = 0;
+  echartDataSg1.yData.length = 0;
+  echartDataSg1.lengedData = type.value;
+  echartDataSg1.lengedDataName = item.dw;
+
+  switch (type.value) {
+    case 'O₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.o2val);
+      });
+      break;
+    case 'C₂H₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.ch2val);
+      });
+      break;
+    case 'CO':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.coval);
+      });
+      break;
+    case 'CH₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.chval);
+      });
+      break;
+    case 'CO₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.co2val);
+      });
+      break;
+    case 'C₂H₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.gasval);
+      });
+      break;
+  }
+}
+
+watch(
+  () => props.listData,
+  (val) => {
+    console.log(val, 'val---------------');
+    props.listData = val;
+    if (JSON.stringify(val) != '{}') {
+      echartDataSg1.xData.length = 0;
+      echartDataSg1.yData.length = 0;
+      echartDataSgList.length = 0;
+      echartDataWd.xData.length = 0;
+      echartDataWd.maxData.data.length = 0;
+      monitorlistYw.length = 0;
+      monitorlistHy.length = 0;
+      monitorlistPl.length = 0;
+      monitorlistWd.length = 0;
+      if (val.fiber.length != 0) {
+        topOutList[0].value = val.fiber[0].readData.fmax;
+        topOutList[1].value = val.fiber[0].readData.fmin;
+        topOutList[2].value = val.fiber[0].readData.favg;
+        topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
+        JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
+          echartDataWd.xData.push(el.pos);
+          echartDataWd.maxData.data.push(el.value);
+        });
+      } else {
+        topOutList[0].value = '--';
+        topOutList[1].value = '--';
+        topOutList[2].value = '--';
+        topOutList[3].text = '正常';
+      }
+
+      if (val.bundletube.length != 0) {
+        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+        topContent.position = val.bundletube[0].strinstallpos || '--';
+        topContent.time = val.bundletube[0].readTime || '--';
+        topContent.warn =
+          val.bundletube[0].warnLevel == 0
+            ? '正常'
+            : val.bundletube[0].warnLevel == 101
+              ? '较低风险'
+              : val.bundletube[0].warnLevel == 102
+                ? '低风险'
+                : val.bundletube[0].warnLevel == 103
+                  ? '中风险'
+                  : val.bundletube[0].warnLevel == 104
+                    ? '高风险'
+                    : val.bundletube[0].warnLevel == 201
+                      ? '报警'
+                      : '正常';
+        val.bundletube[0].history.forEach((v) => {
+          echartDataSg1.xData.push(v.time);
+          if (echartDataSg1.lengedData == 'O₂') {
+            echartDataSg1.yData.push(v.o2val);
+          } else if (echartDataSg1.lengedData == 'C₂H₄') {
+            echartDataSg1.yData.push(v.ch2val);
+          } else if (echartDataSg1.lengedData == 'CO') {
+            echartDataSg1.yData.push(v.coval);
+          } else if (echartDataSg1.lengedData == 'CH₄') {
+            echartDataSg1.yData.push(v.chval);
+          } else if (echartDataSg1.lengedData == 'CO₂') {
+            echartDataSg1.yData.push(v.co2val);
+          } else if (echartDataSg1.lengedData == 'C₂H₂') {
+            echartDataSg1.yData.push(v.gasval);
+          }
+          echartDataSgList.push(v);
+        });
+      } else {
+        topContent.temperature = '--';
+        topContent.position = '--';
+        topContent.time = '--';
+        topContent.warn = '正常';
+      }
+
+      if (val.smoke.length != 0) {
+        val.smoke.forEach((el) => {
+          monitorlistYw.push({ strinstallpos: el.strinstallpos, val: el.readData.smokeval, warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str, readTime: el.readTime });
+        });
+      }
+
+      if (val.co.length != 0) {
+        val.co.forEach((el) => {
+          monitorlistHy.push(el);
+        });
+      }
+
+      if (val.spray.length != 0) {
+        val.spray.forEach((el) => {
+          monitorlistPl.push(el);
+        });
+      }
+
+      if (val.temperature.length != 0) {
+        val.temperature.forEach((el) => {
+          monitorlistWd.push({ strinstallpos: el.strinstallpos, val: el.readData.fireval, warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str, readTime: el.readTime });
+        });
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<style lang="less" scoped>
+.mainWell {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+
+  .work-nav {
+    height: 15%;
+    width: 100%;
+    margin-bottom: 20px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .nav {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:nth-child(1) {
+        flex: 1;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
+
+      &:nth-child(2) {
+        flex: 1;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
+
+      &:nth-child(3) {
+        flex: 1;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
+
+      &:nth-child(4) {
+        flex: 1.2;
+        color: #b3b8cc;
+        font-size: 16px;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
+
+      &:nth-child(5) {
+        flex: 0.8;
+        color: #2b87ff;
+        font-size: 14px;
+        height: 100%;
+      }
+
+      .pic {
+        width: 26%;
+        height: 84%;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .content {
+        height: 84%;
+        margin-left: 15px;
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        span {
+          font-size: 14px;
+
+          &:nth-child(1) {
+            padding: 5px 0px;
+            color: #b3b8cc;
+          }
+
+          &:nth-child(2) {
+            font-family: 'douyuFont';
+            font-size: 16px;
+            color: #3df6ff;
+          }
+        }
+      }
+    }
+
+    .nav:nth-child(1) .pic {
+      background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
+      background-size: 50% 50%;
+    }
+
+    .nav:nth-child(2) .pic {
+      background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
+      background-size: 50% 50%;
+    }
+
+    .nav:nth-child(3) .pic {
+      background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+      background-size: 50% 50%;
+    }
+
+    .content-box {
+      display: flex;
+
+      &:nth-child(1) {
+        justify-content: space-around;
+        align-items: center;
+        flex: 2;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
+
+      &:nth-child(2) {
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+      }
+
+      .contents {
+        height: 73%;
+
+        &:nth-child(1) {
+          width: 40%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          img {
+            position: relative;
+            width: 23%;
+            height: 100%;
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+            background-size: 50% 50%;
+          }
+
+          .text {
+            font-family: 'douyuFont';
+            font-size: 28px;
+            margin: 0px 15px;
+            color: #3df6ff;
+          }
+
+          .dw {
+            font-size: 14px;
+            color: #b3b8cc;
+          }
+        }
+
+        &:nth-child(2) {
+          width: 60%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          .text {
+            font-size: 18px;
+
+            .text-label {
+              color: #b3b8cc;
+              font-weight: bold;
+            }
+
+            .text-value {
+              font-family: 'douyuFont';
+              color: #3df6ff;
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+
+      .text1 {
+        font-size: 16px;
+        color: #b3b8cc;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .center-box {
+    height: 47%;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .content-box {
+      display: flex;
+      flex-direction: column;
+      width: 32%;
+      height: 100%;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      &:nth-child(2) {
+        margin: 0px 20px;
+      }
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-label {
+          // font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
+        }
+
+        .details {
+          font-size: 14px;
+          color: #1f81df;
+        }
+      }
+
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .center-box1 {
+    height: 70%;
+    // margin-bottom: 20px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .content-box {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(70% - 10px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      &:nth-child(3) {
+        margin: 0px 20px 0px 0px;
+      }
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-label {
+          font-size: 16px;
+          color: #fff;
+        }
+
+        .details {
+          font-size: 14px;
+          color: #1f81df;
+        }
+      }
+
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
+      }
+    }
+
+    .content-boxs {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(30% - 30px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      &:nth-child(3) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-label {
+          font-size: 16px;
+          color: #fff;
+        }
+
+        .details {
+          font-size: 14px;
+          color: #1f81df;
+        }
+      }
+
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .center-box2 {
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .content-box {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(70% - 10px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      &:nth-child(3) {
+        margin: 0px 20px 0px 0px;
+      }
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-label {
+          font-size: 16px;
+          color: #fff;
+        }
+
+        .details {
+          font-size: 14px;
+          color: #1f81df;
+        }
+      }
+
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
+      }
+    }
+
+    .content-boxs {
+      display: flex;
+      flex-direction: column;
+      width: calc(50% - 10px);
+      height: calc(30% - 30px);
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      &:nth-child(1) {
+        margin: 0px 20px 20px 0px;
+      }
+
+      &:nth-child(3) {
+        margin: 0px 20px 20px 0px;
+      }
+
+
+      .title {
+        width: 100%;
+        height: 40px;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #0c3c88;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-label {
+          font-size: 16px;
+          color: #fff;
+        }
+
+        .details {
+          font-size: 14px;
+          color: #1f81df;
+        }
+      }
+
+      .content {
+        height: calc(100% - 40px);
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .footer-box {
+    height: calc(38% - 40px);
+    padding: 10px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+
+    .footer-title {
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .echart-label {
+        font-family: 'douyuFont';
+        font-size: 14px;
+        color: #fff;
+      }
+    }
+
+    .echart-content {
+      height: calc(100% - 30px);
+    }
+  }
+
+  .footer-box1 {
+    height: calc(30% - 20px);
+    padding: 10px 15px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+
+    .footer-title {
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .echart-label {
+        font-family: 'douyuFont';
+        font-size: 16px;
+        color: #fff;
+      }
+    }
+
+    .echart-content {
+      height: calc(100% - 30px);
+    }
+  }
+
+  .content-s {
+    width: 100%;
+    height: 608px;
+    padding: 10px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+
+    .title-b {
+      height: 30px;
+      line-height: 30px;
+      font-family: 'douyuFont';
+      font-size: 14px;
+      color: #fff;
+    }
+
+    .card-btn {
+      height: 28%;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .content-box {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .btn-label {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%);
+          font-size: 16px;
+          color: #fff;
+        }
+
+        .box-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 89%;
+          height: 16%;
+          padding: 0px 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .text-t {
+            width: 17%;
+            color: #fff;
+            font-size: 12px;
+          }
+
+          .text-v {
+            width: 83%;
+            font-family: 'douyuFont';
+            font-size: 10px;
+            color: #3df6ff;
+            display: flex;
+            justify-content: flex-end;
+          }
+        }
+
+        .box-item1 {
+          top: 24%;
+        }
+
+        .box-item2 {
+          top: 50%;
+        }
+
+        .box-item3 {
+          top: 75%;
+        }
+      }
+
+      .content-box1 {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .btn-label {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%);
+          font-size: 16px;
+          color: #fff;
+        }
+
+        .box-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 89%;
+          height: 16%;
+          padding: 0px 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .text-t {
+            width: 17%;
+            color: #fff;
+            font-size: 12px;
+          }
+
+          .text-v {
+            width: 83%;
+            font-family: 'douyuFont';
+            font-size: 10px;
+            color: #3df6ff;
+            display: flex;
+            justify-content: flex-end;
+          }
+        }
+
+        .box-item1 {
+          top: 19%;
+        }
+
+        .box-item2 {
+          top: 41%;
+        }
+
+        .box-item3 {
+          top: 63%;
+        }
+      }
+    }
+
+    .echart-box {
+      height: calc(72% - 41px);
+      border: 1px solid #114aac;
+
+      .title-f {
+        height: 40px;
+        padding: 0px 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-text {
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+
+      .echarts-box {
+        height: calc(100% - 40px);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,473 @@
+<template>
+    <div class="warnTargetFire">
+        <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 720 }">
+            <template #bodyCell="{ column, text }">
+                <template v-if="column.dataIndex === 'name'">
+                    <a href="javascript:;">{{ text }}</a>
+                </template>
+            </template>
+        </a-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+let tableData = ref<any[]>([
+    {
+        key: '1',
+        one: '回风测氧化带CO浓度',
+        two: '一级预警',
+        three: 'CO>60ppm',
+    },
+    {
+        key: '2',
+        one: '回风测氧化带CO浓度',
+        two: '二级预警',
+        three: '240ppm>CO>60ppm',
+
+    },
+    {
+        key: '3',
+        one: '回风测氧化带CO浓度',
+        two: '三级预警',
+        three: 'CO>240ppm',
+    },
+    {
+        key: '4',
+        one: '回风测氧化带CO浓度',
+        two: '四级预警',
+        three: 'CO>1000ppm',
+    },
+    {
+        key: '5',
+        one: '回风测氧化带氧温度',
+        two: '一级预警',
+        three: '温度>40℃',
+    },
+    {
+        key: '6',
+        one: '回风测氧化带氧温度',
+        two: '二级预警',
+        three: '70℃<温度<40℃',
+    },
+    {
+        key: '7',
+        one: '回风测氧化带氧温度',
+        two: '三级预警',
+        three: '70℃<温度<210℃',
+    },
+    {
+        key: '8',
+        one: '回风测氧化带氧温度',
+        two: '四级预警',
+        three: '温度>210℃',
+    },
+    {
+        key: '9',
+        one: '回风隅角CO浓度',
+        two: '一级预警',
+        three: 'CO>24ppm',
+    },
+    {
+        key: '10',
+        one: '回风隅角CO浓度',
+        two: '二级预警',
+        three: 'CO>100ppm',
+    },
+    {
+        key: '11',
+        one: '回风隅角CO浓度',
+        two: '三级预警',
+        three: 'CO>160ppm',
+    },
+    {
+        key: '12',
+        one: '回风隅角CO浓度',
+        two: '四级预警',
+        three: 'CO>200ppm',
+    },
+    {
+        key: '13',
+        one: '回风隅角气体温度',
+        two: '一级预警',
+        three: '温度>33℃',
+    },
+    {
+        key: '14',
+        one: '回风隅角气体温度',
+        two: '二级预警',
+        three: '温度>40℃',
+    },
+    {
+        key: '15',
+        one: '回风隅角气体温度',
+        two: '三级预警',
+        three: '温度>50℃',
+    },
+    {
+        key: '16',
+        one: '回风隅角气体温度',
+        two: '四级预警',
+        three: '温度>60℃',
+    },
+    {
+        key: '17',
+        one: '回风流CO浓度',
+        two: '一级预警',
+        three: 'CO>12ppm',
+    },
+    {
+        key: '18',
+        one: '回风流CO浓度',
+        two: '二级预警',
+        three: 'CO>24ppm',
+    },
+    {
+        key: '19',
+        one: '回风流CO浓度',
+        two: '三级预警',
+        three: 'CO>40ppm',
+    },
+    {
+        key: '20',
+        one: '回风流CO浓度',
+        two: '四级预警',
+        three: 'CO>70ppm',
+    },
+    {
+        key: '21',
+        one: '回风流巷道气体温度',
+        two: '一级预警',
+        three: '温度>30℃',
+    },
+    {
+        key: '22',
+        one: '回风流巷道气体温度',
+        two: '二级预警',
+        three: '温度>35℃',
+    },
+    {
+        key: '23',
+        one: '回风流巷道气体温度',
+        two: '三级预警',
+        three: '温度>45℃',
+    },
+    {
+        key: '24',
+        one: '回风流巷道气体温度',
+        two: '四级预警',
+        three: '温度>70℃',
+    },
+    {
+        key: '25',
+        one: '回风测氧化带C2H4浓度',
+        two: '三级预警',
+        three: 'C2H4>0pmm',
+    },
+    {
+        key: '26',
+        one: '回风测氧化带C2H2浓度',
+        two: '四级预警',
+        three: 'C2H2>0pmm',
+    },
+    {
+        key: '27',
+        one: '回风测氧化带100*CO/O2',
+        two: '一级预警',
+        three: '0.2~0.5',
+    },
+    {
+        key: '28',
+        one: '回风测氧化带100*CO/O2',
+        two: '二级预警',
+        three: '>0.5',
+    },
+    {
+        key: '29',
+        one: '回风测氧化带100*CO/O2',
+        two: '三级预警',
+        three: '无限大，出现C2H4',
+    },
+    {
+        key: '30',
+        one: '回风测氧化带100*CO/O2',
+        two: '四级预警',
+        three: '无限大，出现C2H2',
+    },
+    {
+        key: '31',
+        one: '回风测氧化带O2浓度',
+        two: '一级预警',
+        three: '7%>CO>5%',
+    },
+    {
+        key: '32',
+        one: '回风测氧化带O2浓度',
+        two: '二级预警',
+        three: '10%>CO>7%',
+    },
+    {
+        key: '33',
+        one: '回风测氧化带O2浓度',
+        two: '三级预警',
+        three: '18%>CO>12%',
+    },
+    {
+        key: '34',
+        one: '回风测氧化带O2浓度',
+        two: '四级预警',
+        three: 'CO>18%',
+    },
+    {
+        key: '35',
+        one: '月推进度',
+        two: '一级预警',
+        three: 'LS<0.95LX',
+    },
+    {
+        key: '36',
+        one: '月推进度',
+        two: '二级预警',
+        three: 'LS<0.9LX',
+    },
+    {
+        key: '37',
+        one: '月推进度',
+        two: '三级预警',
+        three: 'LS<0.85LX',
+    },
+    {
+        key: '38',
+        one: '月推进度',
+        two: '四级预警',
+        three: 'LS<0.8LX',
+    },
+    {
+        key: '39',
+        one: '皮带最高火灾温度',
+        two: '一级预警',
+        three: '3.5Rp>Rs>1.5Rp',
+    },
+    {
+        key: '40',
+        one: '皮带最高火灾温度',
+        two: '二级预警',
+        three: '6Rp>Rs>3.5Rp',
+    },
+    {
+        key: '41',
+        one: '皮带最高火灾温度',
+        two: '三级预警',
+        three: 'Rs>Rr>6Rp',
+    },
+    {
+        key: '42',
+        one: '皮带最高火灾温度',
+        two: '四级预警',
+        three: 'Rs>Rs',
+    },
+    {
+        key: '43',
+        one: '电缆火灾最高温度',
+        two: '一级预警',
+        three: '有烟雾',
+    },
+    {
+        key: '44',
+        one: '电缆火灾最高温度',
+        two: '二级预警',
+        three: 'Rs>1.5Rp',
+    },
+    {
+        key: '45',
+        one: '电缆火灾最高温度',
+        two: '三级预警',
+        three: 'Rs>Rr>6Rp',
+    },
+    {
+        key: '46',
+        one: '电缆火灾最高温度',
+        two: '四级预警',
+        three: 'Rs>3.5Rp',
+    },
+
+])
+
+let columns = reactive([
+    {
+        title: '序号',
+        width: 60,
+        align: 'center',
+        customRender: ({ index }: { index: number }) =>{
+          if(index>=0 && index<=3){
+            return 1
+          }else if(index>=4 && index<=7){
+            return 2
+          }else if(index>=8 && index<=11){
+            return 3
+          }else if(index>=12 && index<=15){
+            return 4
+          }else if(index>=16 && index<=19){
+            return 5
+          }else if(index>=20 && index<=23){
+            return 6
+          }else if(index==24){
+            return 7
+          }else if(index==25){
+            return 8
+          }else if(index>=26 && index<=29){
+            return 9
+          }else if(index>=30 && index<=33){
+            return 10
+          }else if(index>=34 && index<=37){
+            return 11
+          }else if(index>=38 && index<=41){
+            return 12
+          }else if(index>=42 && index<=45){
+            return 13
+          }
+        },
+        customCell: (_, index) => {
+            if (index == 0) {
+                return { rowSpan: 4 };
+            } else if (index > 0 && index <= 3) {
+                return { rowSpan: 0 };
+            }
+            if (index == 4) {
+                return { rowSpan: 4 };
+            } else if (index > 4 && index <= 7) {
+                return { rowSpan: 0 };
+            }
+            if (index == 8) {
+                return { rowSpan: 4 };
+            } else if (index > 8 && index <= 11) {
+                return { rowSpan: 0 };
+            }
+            if (index == 12) {
+                return { rowSpan: 4 };
+            } else if (index > 12 && index <= 15) {
+                return { rowSpan: 0 };
+            }
+            if (index == 16) {
+                return { rowSpan: 4 };
+            } else if (index > 16 && index <= 19) {
+                return { rowSpan: 0 };
+            }
+            if (index == 20) {
+                return { rowSpan: 4 };
+            } else if (index > 20 && index <= 23) {
+                return { rowSpan: 0 };
+            }
+            if (index == 26) {
+                return { rowSpan: 4 };
+            } else if (index > 26 && index <= 29) {
+                return { rowSpan: 0 };
+            }
+            if (index == 30) {
+                return { rowSpan: 4 };
+            } else if (index > 30 && index <= 33) {
+                return { rowSpan: 0 };
+            }
+            if (index == 34) {
+                return { rowSpan: 4 };
+            } else if (index > 34 && index <= 37) {
+                return { rowSpan: 0 };
+            }
+            if (index == 38) {
+                return { rowSpan: 4 };
+            } else if (index > 38 && index <= 41) {
+                return { rowSpan: 0 };
+            }
+            if (index == 42) {
+                return { rowSpan: 4 };
+            } else if (index > 42 && index <= 45) {
+                return { rowSpan: 0 };
+            }
+        },
+    },
+    {
+        title: '指标',
+        dataIndex: 'one',
+        align: 'center',
+        customCell: (_, index) => {
+            if (index == 0) {
+                return { rowSpan: 4 };
+            } else if (index > 0 && index <= 3) {
+                return { rowSpan: 0 };
+            }
+            if (index == 4) {
+                return { rowSpan: 4 };
+            } else if (index > 4 && index <= 7) {
+                return { rowSpan: 0 };
+            }
+            if (index == 8) {
+                return { rowSpan: 4 };
+            } else if (index > 8 && index <= 11) {
+                return { rowSpan: 0 };
+            }
+            if (index == 12) {
+                return { rowSpan: 4 };
+            } else if (index > 12 && index <= 15) {
+                return { rowSpan: 0 };
+            }
+            if (index == 16) {
+                return { rowSpan: 4 };
+            } else if (index > 16 && index <= 19) {
+                return { rowSpan: 0 };
+            }
+            if (index == 20) {
+                return { rowSpan: 4 };
+            } else if (index > 20 && index <= 23) {
+                return { rowSpan: 0 };
+            }
+            if (index == 26) {
+                return { rowSpan: 4 };
+            } else if (index > 26 && index <= 29) {
+                return { rowSpan: 0 };
+            }
+            if (index == 30) {
+                return { rowSpan: 4 };
+            } else if (index > 30 && index <= 33) {
+                return { rowSpan: 0 };
+            }
+            if (index == 34) {
+                return { rowSpan: 4 };
+            } else if (index > 34 && index <= 37) {
+                return { rowSpan: 0 };
+            }
+            if (index == 38) {
+                return { rowSpan: 4 };
+            } else if (index > 38 && index <= 41) {
+                return { rowSpan: 0 };
+            }
+            if (index == 42) {
+                return { rowSpan: 4 };
+            } else if (index > 42 && index <= 45) {
+                return { rowSpan: 0 };
+            }
+        },
+    },
+    {
+        title: '预警级别',
+        dataIndex: 'two',
+        align: 'center',
+    },
+    {
+        title: '阈值',
+        align: 'center',
+        dataIndex: 'three',
+
+    },
+])
+
+</script>
+
+<style lang="less" scoped>
+.warnTargetFire {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,336 @@
+<template>
+    <div class="warnTarget">
+        <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 700 }">
+            <template #bodyCell="{ column, text }">
+                <template v-if="column.dataIndex === 'name'">
+                    <a href="javascript:;">{{ text }}</a>
+                </template>
+            </template>
+        </a-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+let tableData = ref<any[]>([
+    {
+        key: '1',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '甲烷浓度',
+        warnLow: '（0，0.8%）',
+        warnCen: '（0.8%，1.0%）',
+        warnJg: '（1.0%，1.5%）',
+        warnHign: '（1.5%，+）',
+    },
+    {
+        key: '2',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '甲烷浓度单班浮动',
+        warnLow: '（0，0.15%）',
+        warnCen: '（0.15%，0.20%）',
+        warnJg: '（0.20%，0.30%）',
+        warnHign: '（0.30%，+）',
+    },
+    {
+        key: '3',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '甲烷浓度邻班浮动',
+        warnLow: '（0，0.15%）',
+        warnCen: '（0.15%，0.20%）',
+        warnJg: '（0.20%，0.30%）',
+        warnHign: '（0.30%，+）',
+    },
+    {
+        key: '4',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '滑动平均值',
+        warnLow: '（0，0.20%）',
+        warnCen: '（0.20%，0.30%）',
+        warnJg: '（0.30%，0.40%）',
+        warnHign: '（0.40%，+）',
+    },
+    {
+        key: '5',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '离散率',
+        warnLow: '（0，0.06%）',
+        warnCen: '（0.06%，0.08%）',
+        warnJg: '（0.08%，0.10%）',
+        warnHign: '（0.10%，+）',
+    },
+    {
+        key: '6',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '变化率',
+        warnLow: '（0，0.04%）',
+        warnCen: '（0.04%，0.06%）',
+        warnJg: '（0.06%，0.08%）',
+        warnHign: '（0.08%，+）',
+    },
+    {
+        key: '7',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '异常持续时间',
+        warnLow: '（0，1）',
+        warnCen: '（1，2）',
+        warnJg: '（2，3）',
+        warnHign: '（3，+）',
+    },
+    {
+        key: '8',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '二氧化碳浓度',
+        warnLow: '（0，0.50%）',
+        warnCen: '（0.50%，0.75%）',
+        warnJg: '（0.75%，1.5%）',
+        warnHign: '（1.5%，+）',
+    },
+    {
+        key: '9',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '风速',
+        warnLow: '（0，0.15）',
+        warnCen: '（0.15，0.25）',
+        warnJg: '（0.25，1.0）',
+        warnHign: '（1.0，+）',
+    },
+    {
+        key: '10',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '吨煤瓦斯涌出量',
+        warnLow: '（0，6）',
+        warnCen: '（6，8）',
+        warnJg: '（8，10）',
+        warnHign: '（10，+）',
+    },
+    {
+        key: '11',
+        one: '监测监控',
+        two: '瓦斯涌出',
+        three: '炮后吨煤瓦斯涌出量V30',
+        warnLow: '（0，8）',
+        warnCen: '（8，10）',
+        warnJg: '（10，12）',
+        warnHign: '（12，+）',
+    },
+    {
+        key: '12',
+        one: '监测监控',
+        two: '瓦斯抽采',
+        three: '残余瓦斯含量（抽采计算）',
+        warnLow: '（0，5）',
+        warnCen: '（5，6）',
+        warnJg: '（6，8）',
+        warnHign: '（8，+）',
+    },
+    {
+        key: '13',
+        one: '监测监控',
+        two: '气压变化',
+        three: '风压极差',
+        warnLow: '（0，1）',
+        warnCen: '（1，2.5）',
+        warnJg: '（2.5，4）',
+        warnHign: '（4，+）',
+    },
+    {
+        key: '14',
+        one: '瓦斯地质',
+        two: '瓦斯赋存',
+        three: '原始瓦斯含量',
+        warnLow: '（0，6）',
+        warnCen: '（6，8）',
+        warnJg: '（8，10）',
+        warnHign: '（10，+）',
+    },
+    {
+        key: '15',
+        one: '瓦斯地质',
+        two: '瓦斯赋存',
+        three: '残余瓦斯含量',
+        warnLow: '（0，5）',
+        warnCen: '（5，6）',
+        warnJg: '（6，8）',
+        warnHign: '（8，+）',
+    },
+    {
+        key: '16',
+        one: '瓦斯地质',
+        two: '瓦斯赋存',
+        three: '瓦斯压力',
+        warnLow: '（0，0.5）',
+        warnCen: '（0.5，0.74）',
+        warnJg: '（0.74，1.0）',
+        warnHign: '（1.0，+）',
+    },
+    {
+        key: '17',
+        one: '瓦斯地质',
+        two: '煤层赋存',
+        three: '煤层厚度',
+        warnLow: '（0，1.3）',
+        warnCen: '（1.3，3.5）',
+        warnJg: '（3.5，8.0）',
+        warnHign: '（8.0，+）',
+    },
+    {
+        key: '18',
+        one: '瓦斯地质',
+        two: '煤层赋存',
+        three: '厚度变化',
+        warnLow: '（0，5%）',
+        warnCen: '（5%，10%）',
+        warnJg: '（10%，15%）',
+        warnHign: '（15%，+）',
+    },
+    {
+        key: '19',
+        one: '瓦斯地质',
+        two: '煤层赋存',
+        three: '煤层倾角',
+        warnLow: '（0，8）',
+        warnCen: '（8，25）',
+        warnJg: '（25，45）',
+        warnHign: '（45，+）',
+    },
+    {
+        key: '20',
+        one: '瓦斯地质',
+        two: '煤层赋存',
+        three: '倾角变化',
+        warnLow: '（0，5%）',
+        warnCen: '（5%，10%）',
+        warnJg: '（10%，15%）',
+        warnHign: '（15%，+）',
+    },
+    {
+        key: '21',
+        one: '瓦斯地质',
+        two: '地质构造',
+        three: '构造距离',
+        warnLow: '（50，+）',
+        warnCen: '（50，30）',
+        warnJg: '（30，5）',
+        warnHign: '（5，0）',
+    },
+
+])
+
+let columns = reactive([
+    {
+        title: '序号',
+        width: 60,
+        align: 'center',
+        customRender: ({ index }: { index: number }) => {
+            if (index >= 0 && index <= 12) {
+                return 1
+            } else {
+                return 2
+            }
+        },
+        customCell: (_, index) => {
+            if (index == 0) {
+                return { rowSpan: 13 };
+            } else if (index > 0 && index <= 12) {
+                return { rowSpan: 0 };
+            }
+            if (index == 13) {
+                return { rowSpan: 8 };
+            } else if (index > 13 && index <= 20) {
+                return { rowSpan: 0 };
+            }
+
+        },
+    },
+    {
+        title: '一级指标',
+        dataIndex: 'one',
+        align: 'center',
+        customCell: (_, index) => {
+            if (index == 0) {
+                return { rowSpan: 13 };
+            } else if (index > 0 && index <= 12) {
+                return { rowSpan: 0 };
+            }
+            if (index == 13) {
+                return { rowSpan: 8 };
+            } else if (index > 13 && index <= 20) {
+                return { rowSpan: 0 };
+            }
+
+        },
+    },
+    {
+        title: '二级指标',
+        dataIndex: 'two',
+        align: 'center',
+        customCell: (_, index) => {
+            if (index == 0) {
+                return { rowSpan: 11 };
+            } else if (index > 0 && index <= 10) {
+                return { rowSpan: 0 };
+            }
+            if (index == 13) {
+                return { rowSpan: 3 };
+            } else if (index > 13 && index <= 15) {
+                return { rowSpan: 0 };
+            }
+            if (index == 16) {
+                return { rowSpan: 4 };
+            } else if (index > 16 && index <= 19) {
+                return { rowSpan: 0 };
+            }
+
+
+        },
+    },
+    {
+        title: '三级指标',
+        align: 'center',
+        dataIndex: 'three',
+
+    },
+    {
+        title: '低风险',
+        dataIndex: 'warnLow',
+        align: 'center',
+    },
+    {
+        title: '一般风险',
+        dataIndex: 'warnCen',
+        align: 'center',
+    },
+    {
+        title: '较高风险',
+        dataIndex: 'warnJg',
+        align: 'center',
+    },
+    {
+        title: '高风险',
+        dataIndex: 'warnHign',
+        align: 'center',
+    },
+
+])
+
+</script>
+
+<style lang="less" scoped>
+.warnTarget {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,1472 @@
+<template>
+  <customHeader>预警监测管控系统</customHeader>
+  <div class="sensor-container">
+    <div class="lr left-box">
+      <ventBox1>
+        <template #title>
+          <div class="monitor-title" @click="showModal('vent')">通风监测预警</div>
+        </template>
+        <template #container>
+          <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
+          <div class="vent-param">
+            <div class="light-group">
+              <div class="param-item">
+                <div class="param">
+                  <div class="param-icon">
+                    <div class="param-title">总进风量</div>
+                    <div class="param-unit">(m³/min)</div>
+                  </div>
+
+                  <div class="param-val-box">
+                    <div class="param-val-icon"></div>
+                    <div class="param-val">{{ windData.jf || 0 }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="param-item">
+                <div class="param">
+                  <div class="param-icon">
+                    <div class="param-title">总回风量</div>
+                    <div class="param-unit">(m³/min)</div>
+                  </div>
+                  <div class="param-val-box">
+                    <div class="param-val-icon"></div>
+                    <div class="param-val">{{ windData.hf || 0 }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="param-item">
+                <div class="param">
+                  <div class="param-icon">
+                    <div class="param-title">总需风量</div>
+                    <div class="param-unit">(m³/min)</div>
+                  </div>
+                  <div class="param-val-box">
+                    <div class="param-val-icon"></div>
+                    <div class="param-val">{{ windData.xf || 0 }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
+          <BarSingle :xAxisData="xAxisData" :dataSource="windData.levels" height="225px" :chartsColumns="chartsColumns"
+            :option="option" :color="colors" :fontColor="fontColor" />
+        </template>
+      </ventBox1>
+      <ventBox1 class="vent-margin-t-10">
+        <template #title>
+          <div class="monitor-title" @click="showModal('sbyj')">设备监测预警</div>
+        </template>
+        <template #container>
+          <div class="icons-box" @mouseleave="resetScroll">
+            <template v-for="(item, key) in iconsMonitor" :key="key">
+              <div class="icon-item" v-if="[0, 101, 103, 104, 201].includes(item.level)">
+                <div class="wrapper">
+                  {{ item.text }}
+                </div>
+                <div></div>
+                <img :src="item.url" :alt="item.text" />
+                <div class="level-text" :class="{
+                  'level-text-0': item.level == 0,
+                  'level-text-1': item.level == 101,
+                  'level-text-2': item.level == 102,
+                  'level-text-3': item.level == 103,
+                  'level-text-4': item.level == 104,
+                  'level-text-5': item.level == 201,
+                  'level-text-6':
+                    item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
+                }">{{
+                    item.level == 0
+                      ? '低风险'
+                      : item.level == 101
+                        ? '低风险'
+                        : item.level == 102
+                          ? '一般风险'
+                          : item.level == 103
+                            ? '较大风险'
+                            : item.level == 104
+                              ? '较大风险'
+                              : item.level == 201
+                                ? '报警'
+                                : '未连接'
+                  }}</div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </ventBox1>
+    </div>
+    <div class="center-box">
+      <div class="animation-box">
+        <canvas class="rain"></canvas>
+        <div class="bottom" :class="{
+          bottom1: centerData.levels == 101 || centerData.levels == 0 || centerData.levels == 10000,
+          bottom2: centerData.levels == 102,
+          bottom3: centerData.levels == 103,
+          bottom4: centerData.levels == 104,
+          bottom5: centerData.levels == 201,
+        }">
+          <div class="animation1">
+            <div class="ball"></div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559"
+              style="opacity: 0.5">
+              <g id="组_14135" data-name="组 14135" transform="translate(-755.058 -139.886)">
+                <path id="椭圆_2595" data-name="椭圆 2595"
+                  d="M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z"
+                  transform="translate(755.808 140.636)" fill="#28a6ff" opacity="0.7" />
+              </g>
+            </svg>
+          </div>
+          <div class="animation2">
+            <div class="ball1"></div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="414.878" height="91.7" viewBox="0 0 414.878 91.7">
+              <g id="组_14136" data-name="组 14136" transform="translate(-721.822 -158.273)">
+                <path id="椭圆_2595" data-name="椭圆 2595"
+                  d="M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z"
+                  transform="translate(722.572 159.023)" fill="#3dd8ff" opacity="0.5" />
+              </g>
+            </svg>
+          </div>
+          <div class="text-box">
+            <div class="text1">{{
+              centerData.levels == 101
+                ? '低风险'
+                : centerData.levels == 102
+                  ? '一般风险'
+                  : centerData.levels == 103
+                    ? '较大风险'
+                    : centerData.levels == 104
+                      ? '重大风险'
+                      : centerData.levels == 201
+                        ? '报警'
+                        : // : centerData.levels == 0
+                        // ? '正常'
+                        // : centerData.levels == 10000
+                        // ? '正常'
+                        '低风险'
+            }}</div>
+            <div class="text2">风险分析</div>
+          </div>
+          <div class="icon-animation"></div>
+        </div>
+
+        <div class="total-item-monitor-box">
+          <div class="item item1">
+            <div class="icon-box">
+              <div class="icon"></div>
+            </div>
+            <div class="item-monitor-box">
+              <span class="title">火灾监测预警</span>
+              <span :class="centerData.fire ? 'value' : 'value1'">{{ centerData.fire == '正常' ? '低风险' : centerData.fire
+                }}</span>
+            </div>
+          </div>
+          <div class="item item2">
+            <div class="icon-box">
+              <div class="icon"></div>
+            </div>
+            <div class="item-monitor-box">
+              <span class="title">设备监测预警</span>
+              <span :class="centerData.sb ? 'value' : 'value1'">{{ centerData.sb == '正常' ? '低风险' : centerData.sb
+                }}</span>
+            </div>
+          </div>
+          <div class="item item3">
+            <div class="icon-box">
+              <div class="icon"></div>
+            </div>
+            <div class="item-monitor-box">
+              <span class="title">粉尘监测预警</span>
+              <span :class="centerData.fc ? 'value' : 'value1'">{{ centerData.fc == '正常' ? '低风险' : centerData.fc
+                }}</span>
+            </div>
+          </div>
+          <div class="item item4">
+            <div class="icon-box">
+              <div class="icon"></div>
+            </div>
+            <div class="item-monitor-box">
+              <span class="title">瓦斯监测预警</span>
+              <span :class="centerData.ws ? 'value' : 'value1'">{{ centerData.ws == '正常' ? '低风险' : centerData.ws
+                }}</span>
+              <div class="">
+                <span class="title">矿井瓦斯鉴定等级监测</span>
+                <span class="value">低瓦斯</span>
+              </div>
+            </div>
+          </div>
+          <div class="item item5">
+            <div class="icon-box">
+              <div class="icon"></div>
+            </div>
+            <div class="item-monitor-box">
+              <span class="title">通风监测预警</span>
+              <span :class="centerData.tf ? 'value' : 'value1'">{{ centerData.tf == '正常' ? '低风险' : centerData.tf
+                }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fire-monitor">
+        <div class="monitor-title top" @click="showModal('fire')">火灾监测预警</div>
+        <div class="container">
+          <div class="item item1">
+            <div class="icon"></div>
+            <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
+              <div :class="{
+                value1: item.level == 0,
+                value2: item.level == 101,
+                value3: item.level == 102,
+                value4: item.level == 103,
+                value5: item.level == 104,
+                value6: item.level == 201,
+                value: item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
+              }">{{ item.value ? item.value : '-' }}
+              </div>
+              <div class="title">{{ item.title }}</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="icon"></div>
+            <div class="data-box" v-for="(item, index) in fireMonitor" :key="index">
+              <div class="value1"> {{ !item.value ? '-' : item.value == '正常' ? '低风险' : item.value }} </div>
+              <div class="title">{{ item.title }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="bottom"></div>
+      </div>
+    </div>
+    <div class="lr right-box">
+      <ventBox1>
+        <template #title>
+          <div class="monitor-title" @click="showModal('gas')">瓦斯监测预警</div>
+        </template>
+        <template #container>
+          <div class="gas-box">
+            <div class="gas-item">
+              <div class="top">
+                <div class="value">{{ gasData.sums }}</div>
+                <div class="title">安全监测系统监测点</div>
+              </div>
+              <div class="detail-box">
+                <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
+                  <div class="">{{ item.label }}</div>
+                  <div class="value">{{ !item.value && item.value != '0' ? '-' : item.value }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="gas-item">
+              <div class="top">
+                <div class="value">{{ gasData.sums1 != 0 ? gasData.sums1 : '-' }}</div>
+                <div class="title">瓦斯抽采系统监测点</div>
+              </div>
+              <div class="detail-box">
+                <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
+                  <div class="">{{ item.label }}</div>
+                  <div class="value">{{ !item.value1 && item.value1 != '0' ? '-' : item.value1 }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ventBox1>
+      <ventBox1 class="vent-margin-t-10">
+        <template #title>
+          <div class="monitor-title" @click="showModal('dust')">粉尘监测预警</div>
+        </template>
+        <template #container>
+          <!-- <div class="dust-monitor">
+            <div v-for="(item, index) in dustMonitor" :key="index" class="item-box">
+              <div class="title">{{ item.title }}</div>
+              <div class="value">0个</div>
+            </div>
+          </div> -->
+
+          <BarSingle :xAxisData="xAxisData" :dataSource="dustData.levels" height="332px" :chartsColumns="chartsColumns"
+            :option="option" :color="colors" :fontColor="fontColor" />
+        </template>
+      </ventBox1>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import customHeader from '/@/components/vent/customHeader.vue';
+import { getTotalList, sysTypeWarnList } from './alarm.api';
+import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor, fireMonitor1 } from './alarm.data';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import BarSingle from '../../../../components/chart/BarSingle.vue';
+import { rainBg } from '/@/utils/ui.js';
+
+let router = useRouter();
+
+const warnNumMap = new Map([
+  ['fire', 0],
+  ['dust', 0],
+  ['vent', 0],
+  ['gas', 0],
+]);
+
+const resetScroll = (e: Event) => {
+  if (e.target && e.target) (e.target as Element).scrollTop = 0;
+};
+let windData = reactive({
+  levels: {},
+  jf: 0,
+  hf: 0,
+  xf: 0,
+}); //通风监测数据
+let dustData = reactive({
+  //粉尘监测数据
+  levels: {},
+});
+let centerData = reactive({
+  fire: '',
+  tf: '',
+  ws: '',
+  sb: '',
+  fc: '',
+  levels: 0,
+});
+//瓦斯
+let gasMonitor = reactive<any[]>([]);
+let gasData = {
+  sums: 0,
+  sums1: 0,
+};
+
+//跳转详情
+function showModal(data) {
+  switch (data) {
+    case 'vent':
+      router.push('/ventilate/warn/home');
+      break;
+    case 'fire':
+      router.push('/fire/warn/home');
+      break;
+    case 'dust':
+      router.push('/dust/warn/home');
+      break;
+    case 'gas':
+      router.push('/gas/warn/home');
+      break;
+    case 'sbyj':
+      router.push('/device/warn/home');
+      break;
+  }
+}
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag = false) {
+  timer = setTimeout(
+    async () => {
+      // await getDataSource();
+      await getList();
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    },
+    flag ? 0 : 10000
+  );
+}
+
+// 获取预警数据
+async function getList() {
+  const res = await getTotalList({});
+  console.log(res, '预警数据--------------');
+  let data = [];
+  windData.levels = res.info.sysInfo.ventS.levels;
+  windData.levels['blue'] = warnNumMap.get('vent');
+  // windData.jf = res.ventInfo.zongfengliang;
+  windData.jf = res.ventInfo.zongjinfeng;
+  windData.hf = res.ventInfo.zonghuifeng;
+  windData.xf = res.ventInfo.xufengliang;
+  dustData.levels = res.info.sysInfo.dustS.levels;
+  dustData.levels['blue'] = warnNumMap.get('dust');
+  centerData.fire = res.info.sysInfo.fireS.status;
+  centerData.tf = res.info.sysInfo.ventS.status;
+  centerData.ws = res.info.sysInfo.gasS.status;
+  centerData.sb = res.info.deviceWarnInfo.status;
+  centerData.fc = res.info.sysInfo.dustS.status;
+  Object.keys(res.info.sysInfo).forEach((v) => {
+    if (res.info.sysInfo[v].maxLevel) {
+      data.push(res.info.sysInfo[v].maxLevel);
+    } else {
+      data.push(0);
+    }
+  });
+  data = data.sort((a, b) => b - a);
+  centerData.levels = data[0];
+  Object.keys(iconsMonitor).forEach((el) => {
+    if (res.info.devicekindInfo[el]) {
+      iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
+    }
+  });
+  fireMonitor[0].value =
+    res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
+      ? '正常'
+      : '';
+  fireMonitor[1].value =
+    res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
+      res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel &&
+      res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel == '0'
+      ? '正常'
+      : '';
+  fireMonitor[2].value =
+    res.info.sysInfo.fireS.summaryInfo.external.fireval &&
+      res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel &&
+      res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel == '0'
+      ? '正常'
+      : '';
+  fireMonitor[3].value =
+    res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
+      ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
+      : '';
+
+  // fireMonitor[0].level = res.info.sysInfo.fireS.summaryInfo.external.temperature ? res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel : '';
+  // fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo.external.coval ? res.info.sysInfo.fireS.summaryInfo.external.coval.value : '';
+  // fireMonitor[1].level = res.info.sysInfo.fireS.summaryInfo.external.coval ? res.info.sysInfo.fireS.summaryInfo.external.coval.maxlevel : '';
+  // fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo.external.chval ? res.info.sysInfo.fireS.summaryInfo.external.chval.value : '';
+  // fireMonitor[2].level = res.info.sysInfo.fireS.summaryInfo.external.chval ? res.info.sysInfo.fireS.summaryInfo.external.chval.maxlevel : '';
+  // fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo.external.ch2val ? res.info.sysInfo.fireS.summaryInfo.external.ch2val.value : '';
+  // fireMonitor[3].level = res.info.sysInfo.fireS.summaryInfo.external.ch2val ? res.info.sysInfo.fireS.summaryInfo.external.ch2val.maxlevel : '';
+  // fireMonitor[4].value = res.info.sysInfo.fireS.summaryInfo.external.co2val ? res.info.sysInfo.fireS.summaryInfo.external.co2val.value : '';
+  // fireMonitor[4].level = res.info.sysInfo.fireS.summaryInfo.external.co2val ? res.info.sysInfo.fireS.summaryInfo.external.co2val.maxlevel : '';
+  // fireMonitor[5].value = res.info.sysInfo.fireS.summaryInfo.external.o2val ? res.info.sysInfo.fireS.summaryInfo.external.o2val.value : '';
+  // fireMonitor[5].level = res.info.sysInfo.fireS.summaryInfo.external.o2val ? res.info.sysInfo.fireS.summaryInfo.external.o2val.maxlevel : '';
+
+  // fireMonitor1[0].value = res.info.sysInfo.fireS.summaryInfo.internal.coval ? res.info.sysInfo.fireS.summaryInfo.internal.coval.value : '';
+  fireMonitor1[0].value = res.info.sysInfo.fireS.summaryInfo.internal.coval ? '50.0' : '';
+  // fireMonitor1[0].value = '';
+  fireMonitor1[0].level = res.info.sysInfo.fireS.summaryInfo.internal.coval ? res.info.sysInfo.fireS.summaryInfo.internal.coval.maxlevel : '';
+  fireMonitor1[1].value = res.info.sysInfo.fireS.summaryInfo.internal.chval ? res.info.sysInfo.fireS.summaryInfo.internal.chval.value : '';
+  fireMonitor1[1].level = res.info.sysInfo.fireS.summaryInfo.internal.chval ? res.info.sysInfo.fireS.summaryInfo.internal.chval.maxlevel : '';
+  fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val ? res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value : '';
+  fireMonitor1[2].level = res.info.sysInfo.fireS.summaryInfo.internal.ch2val ? res.info.sysInfo.fireS.summaryInfo.internal.ch2val.maxlevel : '';
+  fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val ? res.info.sysInfo.fireS.summaryInfo.internal.co2val.value : '';
+  fireMonitor1[3].level = res.info.sysInfo.fireS.summaryInfo.internal.co2val ? res.info.sysInfo.fireS.summaryInfo.internal.co2val.maxlevel : '';
+  fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val ? res.info.sysInfo.fireS.summaryInfo.internal.o2val.value : '';
+  fireMonitor1[4].level = res.info.sysInfo.fireS.summaryInfo.internal.o2val ? res.info.sysInfo.fireS.summaryInfo.internal.o2val.maxlevel : '';
+  gasMonitor.length = 0;
+  gasData.sums = 0;
+  gasData.sums1 = 0;
+  res.info.sysInfo.gasS.devices.forEach((el) => {
+    gasData.sums += el.gasNumber;
+    gasData.sums1 += el.pumpNumber;
+    gasMonitor.push({ label: el.systemname, value: el.gasNumber, value1: el.pumpNumber });
+  });
+}
+
+function getLevelNum() {
+  return new Promise(async (resolve) => {
+    const typeArr = ['fire', 'dust', 'vent', 'gas'];
+    for (let i = 0; i < typeArr.length; i++) {
+      const type = typeArr[i];
+      const result = await sysTypeWarnList({ type });
+      warnNumMap.set(type, result['length']);
+    }
+    resolve(null);
+  });
+}
+
+onMounted(async () => {
+  await getLevelNum();
+  await getMonitor(true);
+  rainBg('rain', 'animation-box');
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/vent/color.less';
+@a: 370px; // 椭圆x轴半径(长半径)
+@b: 107px; // 椭圆y轴半径(短半径)
+@s: 40; // 坐标点的数目(数目越大，动画越精细)
+
+@bg: #e6e2df;
+
+.loop(@index) when (@index < @s + 1) {
+  .loop((@index + 1));
+  @keyframeSel: @index * 100% ./ @s;
+
+  @{keyframeSel} {
+    transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
+  }
+}
+
+.sensor-container {
+  width: 100%;
+  height: calc(100% - 86px);
+  display: flex;
+  position: relative;
+  top: 78px;
+
+  .lr {
+    width: 650px;
+    height: 100%;
+
+    // background-color: #ffffff10;
+  }
+
+  .left-box {
+    .vent-param {
+      width: 100%;
+      margin-top: 10px;
+
+      .light-group {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        position: relative;
+
+        .param-item {
+          width: 150px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          position: reactive;
+
+          .icon {
+            display: block;
+            position: absolute;
+            top: -5px;
+          }
+
+          .param {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            .param-icon {
+              width: 121px;
+              height: 69px;
+              background: url('/@/assets/images/vent/vent-param-bg.png');
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              position: relative;
+              top: -20px;
+              margin-top: 10px;
+
+              .param-title {
+                position: relative;
+                top: -4px;
+              }
+
+              .param-unit {
+                position: relative;
+                top: -2px;
+                font-size: 12px;
+              }
+            }
+
+            .param-val-box {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              position: relative;
+              top: -20px;
+
+              .param-val-icon {
+                width: 2px;
+                height: 15px;
+                background: #00d8ff;
+                position: relative;
+
+                &::after {
+                  content: '';
+                  display: block;
+                  position: absolute;
+                  width: 6px;
+                  height: 6px;
+                  border-radius: 3px;
+                  background: #00d8ff;
+                  bottom: -2px;
+                  left: -2px;
+                }
+              }
+
+              .param-val {
+                position: relative;
+                font-family: 'douyuFont';
+                // color: #20dbfd;
+                text-shadow: 0 0 25px #00d8ff;
+                font-size: 13px;
+                border: 1px solid #40b7f3;
+                padding: 5px 30px 2px 30px;
+                top: 2px;
+
+                &::after {
+                  width: calc(100% - 4px);
+                  height: calc(100% - 4px);
+                  content: '';
+                  position: absolute;
+                  top: 2px;
+                  left: 2px;
+                  display: block;
+                  border: 1px solid #006ea6;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .icons-box {
+      display: flex;
+      flex-wrap: wrap;
+      // max-height: 365px;
+      height: 365px;
+      overflow-y: hidden;
+
+      // align-items: start ;
+      &:hover {
+        overflow-y: auto;
+        overflow-x: auto;
+
+        // &>.icon-item {
+        //   animation-play-state: paused;
+        //   animation: move1 2s linear;
+        // }
+      }
+
+      .icon-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3px;
+        // animation: move 10s linear infinite;
+
+        &:nth-child(even) {
+          padding-right: 0px;
+        }
+
+        .level-text {
+          position: absolute;
+          top: 51px;
+          right: 25px;
+          color: #fff;
+          font-family: 'douyuFont';
+          font-size: 12px;
+        }
+
+        .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-2 {
+          color: #ffff35;
+          text-shadow: 2px 2px 4px #313100;
+        }
+
+        .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-5 {
+          color: #ff0000;
+          text-shadow: 2px 2px 4px #200000;
+        }
+
+        .level-text-6 {
+          color: #bbb;
+          text-shadow: 2px 2px 4px #001c22;
+        }
+
+        img {
+          width: 225px;
+          height: 79px;
+        }
+      }
+
+      .wrapper {
+        position: absolute;
+        top: 48px;
+        left: 82px;
+        color: #ffffffe0;
+        font-size: 13px;
+        text-align: center;
+        letter-spacing: 1px;
+      }
+    }
+
+    @keyframes move {
+      0% {
+        transform: translateY(0px);
+      }
+
+      100% {
+        transform: translateY(-269px);
+      }
+    }
+
+    @keyframes move1 {
+      0% {
+        transform: translateY(0px);
+      }
+    }
+  }
+
+  .center-box {
+    width: calc(100% - 710px);
+    // background-color: #ffffff10;
+    margin: 0 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    .fire-monitor {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      position: relative;
+
+      .top {
+        width: 100%;
+        height: 35px;
+        background: url('/@/assets/images/vent/box-top-bg.png');
+        background-size: 100% 100%;
+        text-align: center;
+        color: #fff;
+        padding-top: 6px;
+      }
+
+      .container {
+        width: calc(100% - 2px);
+        min-height: 50px;
+        padding: 0 10px;
+        color: #fff;
+        background-color: #00213236;
+        backdrop-filter: blur(5px);
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 5px;
+          left: 0;
+          width: 1px;
+          height: calc(100% - 10px);
+          background-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+        }
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          right: 0;
+          top: 5px;
+          width: 1px;
+          height: calc(100% - 10px);
+          background: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+        }
+
+        .item {
+          height: 130px;
+          width: 100%;
+          position: relative;
+          top: -10px;
+          display: flex;
+          // justify-content: space-between;
+          align-content: center;
+          padding-top: 50px;
+
+          &::before {
+            content: '';
+            width: 100%;
+            height: 150px;
+            position: absolute;
+            top: 0px;
+            background: url('/@/assets/images/vent/fire-bg-top.png');
+            background-size: 100% 100%;
+          }
+
+          .icon {
+            width: 82px;
+            height: 36px;
+            margin: 0 20px 0 50px;
+            background: url('/@/assets/images/vent/icon-bottom-bg.png');
+            position: relative;
+            top: 30px;
+
+            &::after {
+              position: absolute;
+              content: '';
+              width: 50px;
+              height: 50px;
+              top: -25px;
+              left: 20px;
+              background: url('/@/assets/images/vent/outer-icon.svg') no-repeat;
+            }
+          }
+
+          .data-box {
+            display: flex;
+            flex-direction: column;
+            // margin: 0 10px;
+            width: 118px;
+            align-items: center;
+
+            .value {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              color: #2bdcff;
+              margin-bottom: 5px;
+            }
+
+            .value1 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: rgb(145, 230, 9);
+            }
+
+            .value2 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: rgb(0, 242, 255);
+            }
+
+            .value3 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ffff35;
+            }
+
+            .value4 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ffbe69;
+            }
+
+            .value5 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ff6f00;
+            }
+
+            .value6 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ff0000;
+            }
+
+            .title {
+              font-size: 13px;
+            }
+          }
+        }
+
+        .item1 {
+          top: -10px;
+
+          &::before {
+            transform: matrix(1, 0, 0, -1, 0, 0);
+          }
+
+          .icon {
+            &::after {
+              background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
+            }
+          }
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 35px;
+        background: url('/@/assets/images/vent/box-bottom-bg.png');
+        background-size: 100% 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    }
+
+    .animation-box {
+      height: fit-content;
+      flex: 1;
+      margin-bottom: 10px;
+      background: url('/@/assets/images/vent/alarm/center-bg.png');
+      background-size: contain;
+      background-position: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      top: 45px;
+
+      .rain {
+        position: absolute;
+      }
+
+      .bottom {
+        width: 528px;
+        height: 395px;
+        background-repeat: no-repeat;
+        position: absolute;
+        z-index: 999;
+
+        &::before {
+          content: '';
+          width: 325px;
+          height: 379px;
+          position: absolute;
+          left: 105px;
+          top: -60px;
+          background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
+        }
+
+        .animation1 {
+          width: 390px;
+          height: 78px;
+          position: absolute;
+          top: -30px;
+          left: 80px;
+          z-index: 999;
+
+          // animation: rotate3 3s linear infinite;
+          .ball {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+            border-radius: 6px;
+            background-size: cover;
+            offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
+              );
+            animation: 10s linear 0s infinite alternate ball;
+          }
+        }
+
+        .animation2 {
+          width: 430px;
+          height: 92px;
+          position: absolute;
+          top: 0px;
+          left: 60px;
+          z-index: 999;
+
+          // animation: rotate4 3s linear infinite;
+          .ball1 {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+            border-radius: 6px;
+            background-size: cover;
+            offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
+              );
+            animation: 10s linear 0s infinite alternate ball1;
+          }
+        }
+
+        .text-box {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          color: #fff;
+          align-items: center;
+          margin-top: 90px;
+
+          .text1 {
+            font-size: 26px;
+            font-weight: 600;
+            letter-spacing: 2px;
+            margin-bottom: 10px;
+          }
+
+          .text2 {
+            font-size: 18px;
+            color: #ffffffdd;
+          }
+        }
+
+        .icon-animation {
+          width: 178px;
+          height: 208px;
+          margin: 0 auto;
+          top: -130px;
+          left: 4px;
+          position: relative;
+          animation: 0.5s linear 0s infinite alternate iconMove;
+        }
+      }
+
+      .bottom1 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
+
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
+        }
+
+        .text-box {
+          .text1 {
+            color: #00d8ff;
+          }
+        }
+      }
+
+      .bottom2 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
+
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
+        }
+
+        .text-box {
+          .text1 {
+            color: #fcfc22;
+          }
+        }
+      }
+
+      .bottom3 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
+
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
+        }
+
+        .text-box {
+          .text1 {
+            color: #ff7010;
+          }
+        }
+      }
+
+      .bottom4 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
+
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
+        }
+
+        .text-box {
+          .text1 {
+            color: #df4e43;
+          }
+        }
+      }
+
+      .bottom5 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
+
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
+        }
+
+        .text-box {
+          .text1 {
+            color: #ff2313;
+            // animation: color-blink 1s infinite;
+          }
+
+          // @keyframes color-blink {
+          //   0% { color: red; }
+          //   50% { color: blue; }
+          //   100% { color: red; }
+          // }
+        }
+      }
+
+      .total-item-monitor-box {
+        width: 100%;
+        height: 237px;
+        position: relative;
+        top: 180px;
+        left: 265px;
+        background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
+        background-size: contain;
+
+        &::after {
+          content: '';
+          width: 750px;
+          height: 750px;
+          position: absolute;
+          transform-style: preserve-3d;
+          transform: translateX(0%) translateY(0%) rotateX(72deg);
+          background: url('/@/assets/images/vent/alarm/bottom.png');
+          animation: rotate1 3s linear infinite;
+          top: -200px;
+          left: -180px;
+        }
+
+        .item {
+          position: absolute;
+
+          // width: 107px;
+          // height: 107px;
+          // left: 120px;
+          // top: 115px;
+          // animation: red-ball 10s linear infinite;
+          .icon-box {
+            width: 100px;
+            height: 100px;
+
+            position: relative;
+            z-index: 0;
+
+            &::before {
+              position: absolute;
+              content: '';
+              width: 105px;
+              height: 68px;
+              top: 15px;
+              z-index: -1;
+              background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
+            }
+
+            &::after {
+              position: absolute;
+              content: '';
+              width: 71px;
+              height: 71px;
+              top: 26px;
+              left: 14px;
+              z-index: 1;
+              background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
+              transform: translateX(0%) rotateX(70deg);
+              animation: rotate2 2s linear infinite;
+            }
+
+            .icon {
+              width: 100px;
+              height: 100px;
+              background-repeat: no-repeat;
+              background-position: top center;
+              position: relative;
+              top: 5px;
+            }
+          }
+
+          .item-monitor-box {
+            color: #fff;
+            position: relative;
+            top: -135px;
+            left: -20px;
+            font-weight: 600;
+            // background: #06020066;
+            padding: 5px 20px 8px 20px;
+
+            &::before {
+              position: absolute;
+              content: '';
+              width: 196px;
+              height: 48px;
+              left: -20px;
+              top: -10px;
+              background: url('/@/assets/images/vent/alarm/data-bg.png');
+            }
+
+            .value {
+              color: #2bdcff;
+              margin-left: 20px;
+            }
+
+            .value1 {
+              font-size: 16px;
+              font-weight: 800;
+              margin-top: 6px;
+              margin-left: 10px;
+              color: #ff0000;
+              animation: color-blink 1s infinite;
+            }
+
+            @keyframes color-blink {
+              0% {
+                color: red;
+              }
+
+              50% {
+                color: rgb(198, 0, 0);
+              }
+
+              100% {
+                color: rgb(255, 18, 18);
+              }
+            }
+          }
+        }
+
+        .item1 {
+          top: 230px;
+          left: 150px;
+
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
+          }
+        }
+
+        .item2 {
+          top: 185px;
+          left: -120px;
+
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
+          }
+        }
+
+        .item3 {
+          top: 185px;
+          left: 420px;
+
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
+          }
+        }
+
+        .item4 {
+          top: 20px;
+          left: 390px;
+
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
+          }
+
+          .item-monitor-box {
+            top: -155px;
+
+            &::before {
+              top: 10px;
+            }
+          }
+        }
+
+        .item5 {
+          top: 25px;
+          left: -110px;
+
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
+          }
+        }
+      }
+
+      @keyframes iconMove {
+        100% {
+          opacity: 0;
+        }
+      }
+
+      @keyframes rotate1 {
+        0% {
+          transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
+        }
+
+        100% {
+          transform: translateX(0%) rotateX(72deg) rotateZ(0);
+        }
+      }
+
+      @keyframes rotate2 {
+        0% {
+          transform: translateX(0%) rotateX(70deg) rotateZ(0);
+        }
+
+        100% {
+          transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
+        }
+      }
+
+      @keyframes rotate3 {
+        0% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(0);
+        }
+
+        100% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+        }
+      }
+
+      @keyframes rotate4 {
+        100% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(0);
+        }
+
+        0% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+        }
+      }
+
+      @keyframes ball {
+        100% {
+          offset-distance: 100%;
+        }
+
+        0% {
+          offset-distance: 0%;
+        }
+      }
+
+      @keyframes ball1 {
+        0% {
+          offset-distance: 100%;
+        }
+
+        100% {
+          offset-distance: 0%;
+        }
+      }
+    }
+  }
+
+  .right-box {
+    .dust-monitor {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 20px;
+      margin-bottom: 20px;
+      margin-top: 15px;
+
+      .value {
+        width: 131px;
+        height: 44px;
+        background: url('/@/assets/images/vent/value-bg.png');
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .title {
+        text-align: center;
+        margin-bottom: 5px;
+      }
+
+      .value {
+        font-size: 16px;
+        font-family: 'douyuFont';
+        color: #3df5ff;
+      }
+    }
+
+    .gas-box {
+      height: 390px;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 10px;
+
+      .gas-item {
+        position: relative;
+
+        .top {
+          height: 136px;
+          padding-top: 30px;
+
+          .value {
+            font-size: 26px;
+            font-family: 'douyuFont';
+            color: #3df5ff;
+            text-align: center;
+            margin-bottom: 5px;
+          }
+
+          .title {
+            width: 205px;
+            height: 48px;
+            text-align: center;
+            background: url('/@/assets/images/vent/plane.png') no-repeat;
+            background-size: contain;
+            background-position: bottom;
+          }
+
+          &::before {
+            position: absolute;
+            content: '';
+            width: 136px;
+            height: 101px;
+            left: 35px;
+            top: 15px;
+            background: url('/@/assets/images/vent/small-bg1.png') no-repeat;
+            background-size: cover;
+          }
+        }
+
+        .detail-box {
+          position: relative;
+          margin: 0 auto;
+          width: 184px;
+          height: calc(100% - 136px);
+          background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
+          background-size: cover;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: center;
+          overflow-y: auto;
+          // padding: 50px 0 20px 0;
+
+          &::after {
+            position: absolute;
+            content: '';
+            left: 0px;
+            bottom: 0px;
+            width: 184px;
+            height: 31px;
+            background: url('/@/assets/images/vent/plane1.png') no-repeat center;
+            background-size: 100% 100%;
+            background-position: bottom;
+          }
+
+          .detail-item {
+            width: 100%;
+            height: 40px;
+            background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
+            // margin: 5px 0;
+            display: flex;
+            padding: 0 10px;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+
+            .value {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              color: #2bdcff;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .monitor-title {
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,385 @@
+<template>
+  <div class="sensor-container">
+    <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
+      <a-tab-pane key="1" tab="实时预警">
+        <div class="box-bg table-box" style="margin-bottom: 10px">
+          <label style="color: #fff">设备类型：</label>
+          <MonitorTable
+            ref="SensorMonitorRef"
+            columnsType="alarm_history"
+            :dataSource="dataSource"
+            design-scope="alarm"
+            @select-row="getSelectRow"
+            :formConfi="formConfig"
+            title="传感器监测"
+          >
+            <template #filterCell="{ column, record }">
+              <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
+                record.warnFlag == 0 ? '正常' : '报警'
+              }}</a-tag>
+              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                record.netStatus == '0' ? '断开' : '连接'
+              }}</a-tag>
+            </template>
+          </MonitorTable>
+        </div>
+        <div class="charts-box box-bg">
+          <BarAndLine
+            v-if="chartsColumns.length > 0"
+            :chartsColumnsType="selectData.deviceType"
+            xAxisPropType="readTime"
+            :dataSource="detailDataSource"
+            height="100%"
+            :chartsColumns="chartsColumns"
+            chartsType="detail"
+            :option="echartsOption"
+            @refresh="refreshEchatrs"
+          />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="实时报警">
+        <div class="tab-item table-box box-bg padding-0">
+          <HistoryTable columns-type="modelsensor" device-type="modelsensor" @change="historyDataSourceChange" designScope="modelsensor-history" />
+        </div>
+        <div class="charts-box box-bg">
+          <BarAndLine
+            v-if="chartsColumns.length > 0"
+            :chartsColumnsType="selectData.deviceType"
+            xAxisPropType="gcreatetime"
+            :dataSource="historyDataSource"
+            height="100%"
+            :chartsColumns="chartsColumns"
+            chartsType="history"
+            :option="echartsOption1"
+            @refresh="refreshEchatrs"
+          />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="报警历史">
+        <div class="tab-item box-bg">
+          <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" :device-list-api="baseList" designScope="alarm-history" />
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <div class="title-text">
+      {{ selectData.strname }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, toRaw, reactive, nextTick } from 'vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import { warningList } from './alarm.api';
+  import { formConfig } from './alarm.data';
+  import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
+
+  const SensorMonitorRef = ref();
+  const deviceBaseList = ref([]);
+  const activeKey = ref('1');
+  const deviceKind = ref('');
+  const deviceTypeOption = ref([]);
+  // 默认初始是第一行
+  const selectRowIndex = ref(0);
+  const dataSource = ref([]);
+  const detailDataSource = ref<any[]>([]);
+  const historyDataSource = ref<any[]>([]);
+  const chartsColumns = ref<any[]>([]);
+
+  const echartsOption = {
+    grid: {
+      top: '20%',
+      left: '10px',
+      right: '5px',
+      bottom: '5%',
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+
+  const selectData = reactive({
+    strname: '',
+    deviceType: '',
+    deviceID: '',
+  });
+
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+  };
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  const getMonitor = (flag = false) => {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          await getDataSource();
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 1000
+      );
+    }
+  };
+
+  const getDataSource = async () => {
+    const res = await warningList({});
+    dataSource.value = res.list.records || [];
+    // if(dataSource.value.length > 0){
+    //   dataSource.value.map((data: any) => {
+    //     const readData = data.readData;
+    //     data = Object.assign(data, readData);
+    //     return data;
+    //   });
+    // }
+  };
+
+  const getSelectRow = (selectRow, index) => {
+    if (!selectRow) return;
+    selectRowIndex.value = index;
+    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
+    Object.assign(selectData, selectRow, baseData);
+    if (selectData.deviceType) {
+      if (timer) {
+        clearTimeout(timer);
+        timer = undefined;
+      }
+      if (activeKey.value === '1') detailDataSource.value = [];
+      if (activeKey.value === '2') historyDataSource.value = [];
+      handleChange(selectData.deviceType);
+    }
+  };
+
+  function handleChange(type) {
+    if (type === 'modelsensor_multi') {
+      chartsColumns.value = [
+        {
+          legend: '气压值',
+          seriesName: '(Pa)',
+          ymax: 50,
+          yname: 'Pa',
+          linetype: 'bar',
+          yaxispos: 'left',
+          color: '#37BCF2',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'pa',
+        },
+        {
+          legend: '温度',
+          seriesName: '(℃)',
+          ymax: 50,
+          yname: '℃',
+          linetype: 'bar',
+          yaxispos: 'right',
+          color: '#FC4327',
+          sort: 2,
+          xRotate: 0,
+          dataIndex: 'temperature',
+        },
+      ];
+    } else if (type === 'modelsensor_smoke') {
+      chartsColumns.value = [
+        {
+          legend: '烟雾浓度',
+          seriesName: '(%)',
+          ymax: 20,
+          yname: '%',
+          linetype: 'bar',
+          yaxispos: 'left',
+          color: '#37BCF2',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'windSpeed',
+        },
+      ];
+    } else if (type === 'modelsensor_speed') {
+      chartsColumns.value = [
+        {
+          legend: '风速',
+          seriesName: '(m/s)',
+          ymax: 20,
+          yname: 'm/s',
+          linetype: 'bar',
+          yaxispos: 'left',
+          color: '#37BCF2',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'windSpeed',
+        },
+      ];
+    } else if (type === 'modelsensor_gas') {
+      chartsColumns.value = [
+        {
+          legend: '甲烷',
+          seriesName: '(%)',
+          ymax: 20,
+          yname: '%',
+          linetype: 'bar',
+          yaxispos: 'left',
+          color: '#37BCF2',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'windSpeed',
+        },
+      ];
+    }
+
+    console.log('[ type ] >', type, chartsColumns.value);
+  }
+
+  function refreshEchatrs() {
+    timer = null;
+    getMonitor();
+    console.log('echarts 刷新');
+  }
+
+  function historyDataSourceChange(dataSource) {
+    historyDataSource.value = dataSource;
+    if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
+  }
+
+  onMounted(async () => {
+    getMonitor(true);
+  });
+
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/vent/color.less';
+  @import '/@/design/vent/modal.less';
+  .padding-0 {
+    padding: 10px 0 !important;
+  }
+  .sensor-container {
+    position: relative;
+    top: 65px;
+    padding: 10px;
+    z-index: 999;
+    max-height: calc(100vh - 150px);
+    .@{ventSpace}-tabs {
+      max-height: calc(100vh - 100px);
+      .tab-item {
+        max-height: calc(100vh - 170px);
+        overflow-y: auto;
+      }
+    }
+    .title-text {
+      position: absolute;
+      top: -14px;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      color: #fff;
+    }
+    .table-box {
+      height: calc(60vh - 150px);
+      padding: 20px 10px;
+      overflow-y: auto;
+    }
+
+    .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;
+    }
+    .charts-box {
+      height: calc(40vh - 80px);
+      padding: 5px 10px;
+      margin-top: 10px;
+    }
+  }
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
+  }
+  :deep(.@{ventSpace}-tabs-card) {
+    .@{ventSpace}-tabs-tab {
+      background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      border-color: #74e9fe;
+      border-radius: 0%;
+      &:hover {
+        color: #64d5ff;
+      }
+    }
+    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+      color: aqua;
+    }
+    .@{ventSpace}-tabs-nav::before {
+      border-color: #74e9fe;
+    }
+    .@{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}-pagination-next,
+    .action,
+    .@{ventSpace}-select-arrow,
+    .@{ventSpace}-picker-separator {
+      color: #fff !important;
+    }
+    .@{ventSpace}-table-cell-row-hover {
+      background: #264d8833 !important;
+    }
+    .@{ventSpace}-table-row-selected {
+      background: #00c0a311 !important;
+      td {
+        background-color: #00000000 !important;
+      }
+    }
+    .@{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 > td {
+        padding: 12px;
+      }
+    }
+    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
+      background-color: #26648855 !important;
+    }
+
+    .jeecg-basic-table-row__striped {
+      // background: #97efff11 !important;
+      td {
+        background-color: #97efff11 !important;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,241 @@
+<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-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
+      <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="预警监测">
+            <template #filterCell="{ column, record }">
+              <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
+                record.warnFlag == 0 ? '正常' : '报警'
+              }}</a-tag>
+              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                record.netStatus == '0' ? '断开' : '连接'
+              }}</a-tag>
+            </template>
+          </MonitorTable>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="报警历史">
+        <div class="tab-item box-bg">
+          <AlarmHistoryTable v-if="activeKey == '2'" :columns="levelHisColumns" designScope="alarm-history" />
+        </div>
+      </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;
+    }
+  }
+
+  .title-text {
+    position: absolute;
+    top: -14px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+  }
+
+  .table-box {
+    height: calc(90vh - 152px);
+    padding: 20px 10px;
+    overflow-y: auto;
+  }
+
+  .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;
+  }
+
+  .charts-box {
+    height: calc(40vh - 80px);
+    padding: 5px 10px;
+    margin-top: 10px;
+  }
+}
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  height: 100%;
+}
+
+:deep(.@{ventSpace}-tabs-card) {
+  .@{ventSpace}-tabs-tab {
+    background: linear-gradient(#2cd1ff55, #1eb0ff55);
+    border-color: #74e9fe;
+    border-radius: 0%;
+
+    &:hover {
+      color: #64d5ff;
+    }
+  }
+
+  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+    color: aqua;
+  }
+
+  .@{ventSpace}-tabs-nav::before {
+    border-color: #74e9fe;
+  }
+
+  .@{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}-pagination-next,
+  .action,
+  .@{ventSpace}-select-arrow,
+  .@{ventSpace}-picker-separator {
+    color: #fff !important;
+  }
+
+  .@{ventSpace}-table-cell-row-hover {
+    background: #264d8833 !important;
+  }
+
+  .@{ventSpace}-table-row-selected {
+    background: #00c0a311 !important;
+
+    td {
+      background-color: #00000000 !important;
+    }
+  }
+
+  .@{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>td {
+      padding: 12px;
+    }
+  }
+
+  .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
+    background-color: #26648855 !important;
+  }
+
+  .jeecg-basic-table-row__striped {
+
+    // background: #97efff11 !important;
+    td {
+      background-color: #97efff11 !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,448 @@
+<template>
+    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 粉尘监测预警 </customHeader>
+    <div class="dustWarn">
+        <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="alarm-menu">
+            <div class="card-btn">
+                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
+                    @click="cardClick(ind, item)">
+                    <div class="text">{{ item.name }}</div>
+                    <div class="warn">{{ item.warn }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="dust-content">
+            <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="bot-area">
+                <div class="title-t">
+                    <div class="text-t">粉尘信息状态监测</div>
+                </div>
+                <div class="echart-boxd">
+                    <echartLine :echartDataGq="echartDataFc" :maxY="maxY" :echartDw="echartDw" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted,onUnmounted } from 'vue'
+import { sysTypeWarnList, sysWarn } from '../common.api'
+import echartLine from '../common/echartLine.vue';
+import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+import { useRouter } from 'vue-router';
+import CustomHeader from '/@/components/vent/customHeader.vue';
+
+const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+//左侧数据列表
+let menuList = reactive<any[]>([])
+//当前左侧激活菜单的索引
+let activeIndex1 = ref(0);
+//顶部区域激活选项
+let activeIndex = ref(0);
+//顶部区域数据
+let topAreaList = reactive<any[]>([]);
+let choiceData = reactive<any[]>([]);
+//粉尘图表数据
+let echartDataFc = reactive({
+    maxData: {
+        lengedData: '粉尘浓度(mg/m³)',
+        data: [],
+    },
+    xData: [],
+});
+let maxY = ref(0);
+let echartDw = ref('(mg/m³)');
+let router = useRouter()
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(deviceID, flag?) {
+    timer = setTimeout(
+        async () => {
+            await getSysWarnList(deviceID, 'dust');
+            if (timer) {
+                timer = null;
+            }
+            getMonitor(deviceID);
+        },
+        flag ? 0 : 1000
+    );
+}
+
+//返回首页
+function getBack() {
+    router.push('/monitorChannel/monitor-alarm-home')
+}
+
+//获取左侧菜单列表
+async function getMenuList() {
+    let res = await sysTypeWarnList({ type: 'dust' })
+    if (res.length != 0) {
+        menuList.length = 0
+        res.forEach((el) => {
+            menuList.push({
+                name: el.systemname,
+                warn: '低风险',
+                deviceID: el.id,
+                strtype: el.strtype,
+            });
+        });
+        getMonitor(menuList[0].deviceID, true);
+    }
+}
+//获取预警详情弹窗右侧数据
+function getSysWarnList(id, type) {
+    sysWarn({ sysid: id, type: type }).then((res) => {
+        // listData.common = res;
+        topAreaList.length = 0;
+        echartDataFc.maxData.data.length = 0;
+        echartDataFc.xData.length = 0;
+        if (JSON.stringify(res) != '{}') {
+            res.dust.forEach((el) => {
+                topAreaList.push({
+                    title: el.strinstallpos,
+                    content: [
+                        { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
+                        { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
+                        { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--' },
+                        { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
+                    ],
+                });
+            });
+            choiceData = res.dust;
+            if (choiceData[activeIndex.value]) {
+                choiceData[activeIndex.value].history.forEach((el) => {
+                    echartDataFc.maxData.data.push(el.dustval);
+                    echartDataFc.xData.push(el.time);
+                });
+                let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
+                    return acr > cur ? acr : cur;
+                });
+                maxY.value = formatRoundNum(max1 * 1.5);
+            } else {
+                activeIndex.value = 0;
+                choiceData[activeIndex.value].history.forEach((el) => {
+                    echartDataFc.maxData.data.push(el.dustval);
+                    echartDataFc.xData.push(el.time);
+                });
+                let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
+                    return acr > cur ? acr : cur;
+                });
+                maxY.value = formatRoundNum(max1 * 1.5);
+            }
+        }
+    });
+}
+//菜单选项切换
+function cardClick(ind, item) {
+    activeIndex1.value = ind;
+    clearTimeout(timer);
+    getMonitor(item.deviceID, true);
+}
+
+//顶部区域选项切换
+function topAreaClick(index) {
+    activeIndex.value = index;
+    echartDataFc.maxData.data.length = 0;
+    echartDataFc.xData.length = 0;
+    choiceData[index].history.forEach((el) => {
+        echartDataFc.maxData.data.push(el.dustval);
+        echartDataFc.xData.push(el.time);
+    });
+}
+function formatRoundNum(num) {
+    let interger = Math.ceil(num);
+    let leng = String(interger).length;
+    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
+}
+
+onMounted(() => {
+    getMenuList()
+})
+onUnmounted(() => {
+    if (timer) {
+        clearTimeout(timer);
+        timer = undefined;
+    }
+});
+</script>
+
+<style lang="less" scoped>
+.dustWarn {
+    width: 100%;
+    height: 100%;
+    padding: 80px 10px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+
+    .alarm-menu {
+        height: 100%;
+        width: 15%;
+
+        .card-btn {
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
+
+            .btn {
+                position: relative;
+                width: 81%;
+                height: 14%;
+                margin-bottom: 10%;
+                font-family: 'douyuFont';
+                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .text {
+                    width: 80%;
+                    position: absolute;
+                    left: 50%;
+                    top: 28px;
+                    font-size: 16px;
+                    color: #01fefc;
+                    text-align: center;
+                    transform: translate(-50%, 0);
+                }
+
+                .warn {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    bottom: 14px;
+                    font-size: 14px;
+                    color: #fff;
+                    text-align: center;
+                    transform: translate(-50%, 0);
+                }
+            }
+
+            .btn1 {
+                position: relative;
+                width: 100%;
+                height: 14%;
+                margin-bottom: 10%;
+                font-family: 'douyuFont';
+                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .text {
+                    width: 80%;
+                    position: absolute;
+                    left: 50%;
+                    top: 28px;
+                    font-size: 16px;
+                    color: #01fefc;
+                    text-align: center;
+                    transform: translate(-62%, 0);
+                }
+
+                .warn {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    bottom: 14px;
+                    font-size: 14px;
+                    color: #fff;
+                    text-align: center;
+                    transform: translate(-60%, 0);
+                }
+            }
+        }
+    }
+
+    .dust-content {
+        width: calc(85% - 10px);
+        height: 100%;
+        margin-left: 10px;
+        padding: 15px;
+        box-sizing: border-box;
+        background: url('../../../../../assets/images/fire/border.png') no-repeat;
+        background-size: 100% 100%;
+
+        .top-area {
+            width: 100%;
+            height: 24%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-end;
+            margin-bottom: 10px;
+            overflow-x: auto;
+            transform: scaleY(-1);
+
+            .top-box {
+                position: relative;
+                width: 474px;
+                height: 88%;
+                flex-shrink: 0;
+                background: url('../../../../../assets/images/fire/fc-t.png') no-repeat center;
+                background-size: 100% 100%;
+                margin: 0px 20px;
+                transform: scaleY(-1);
+
+                .top-title {
+                    width: 80%;
+                    text-align: center;
+                    position: absolute;
+                    left: 50%;
+                    top: 8px;
+                    font-size: 14px;
+                    transform: translate(-50%, 0);
+                    color: #fff;
+                }
+
+                .top-content {
+                    position: absolute;
+                    top: 17%;
+                    left: 0;
+                    width: 100%;
+                    height: 83%;
+                    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;
+                        background-size: 88% 50%;
+
+                        .item-label {
+                            position: absolute;
+                            left: 14%;
+                            top: 50%;
+                            transform: translate(0, -44%);
+                            font-size: 14px;
+                            color: #fff;
+                            // font-size: 12px;
+                        }
+
+                        .item-value {
+                            position: absolute;
+                            right: 14%;
+                            top: 50%;
+                            transform: translate(0, -38%);
+                            // font-size: 12px;
+                            font-size: 14px;
+                            font-family: 'douyuFont';
+                            color: #3df6ff;
+                        }
+                    }
+                }
+            }
+
+            .top-box1 {
+                position: relative;
+                width: 474px;
+                height: 100%;
+                flex-shrink: 0;
+                background: url('../../../../../assets/images/fire/fc-t1.png') no-repeat center;
+                background-size: 100% 100%;
+                margin: 0px 20px;
+                transform: scaleY(-1);
+
+                .top-title {
+                    width: 80%;
+                    text-align: center;
+                    position: absolute;
+                    left: 50%;
+                    top: 8px;
+                    font-size: 14px;
+                    transform: translate(-50%, 0);
+                    color: #fff;
+                }
+
+                .top-content {
+                    position: absolute;
+                    top: 17%;
+                    left: 0;
+                    width: 100%;
+                    height: 83%;
+                    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;
+                        background-size: 88% 50%;
+
+                        .item-label {
+                            position: absolute;
+                            left: 14%;
+                            top: 50%;
+                            transform: translate(0, -44%);
+                            color: #fff;
+                            font-size: 14px;
+                            // font-size: 12px;
+                        }
+
+                        .item-value {
+                            position: absolute;
+                            right: 14%;
+                            top: 50%;
+                            transform: translate(0, -38%);
+                            // font-size: 12px;
+                            font-size: 14px;
+                            font-family: 'douyuFont';
+                            color: #3df6ff;
+                        }
+                    }
+                }
+            }
+        }
+
+        .bot-area {
+            height: calc(76% - 10px);
+            padding: 10px;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+            background-size: 100% 100%;
+            box-sizing: border-box;
+
+            .title-t {
+                height: 30px;
+                margin-bottom: 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .text-t {
+                    font-family: 'douyuFont';
+                    font-size: 14px;
+                    color: #fff;
+                }
+            }
+
+            .echart-boxd {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+
+    }
+}
+</style>

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

@@ -0,0 +1,343 @@
+<template>
+    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 火灾监测预警 </customHeader>
+    <div class="fireWarn">
+        <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="alarm-menu">
+            <div class="type-btn">
+                <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuList" :key="index"
+                    @click="btnClick(index)">
+                    {{ item.name }}
+                </div>
+            </div>
+            <div class="card-btn">
+                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
+                    @click="cardClick(ind, item)">
+                    <div class="text">{{ item.name }}</div>
+                    <div class="warn">{{ item.warn }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="fire-content">
+            <component :is="componentName[currentLoad]" :listData="listData" :strType="strType"></component>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { typeMenuList, componentName } from '../common.data'
+import { sysTypeWarnList, sysWarn } from '../common.api'
+import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+import { useRouter } from 'vue-router';
+import CustomHeader from '/@/components/vent/customHeader.vue';
+
+const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+//当前加载组件
+let currentLoad = ref('')
+//内外因火灾激活索引
+let activeIndex = ref(0);
+//当前激活菜单的索引
+let activeIndex1 = ref(0);
+let menuList = reactive<any[]>([]); //左侧菜单列表
+let menuList1 = reactive({
+    external: [],
+    internal: [],
+});
+//详情数据
+let listData = reactive({
+    common: {},
+    bundletube: [],
+    fiber: [],
+    fire: [],
+    co:[],
+    smoke: [],
+    spray: [],
+    temperature: [],
+}); //详情数据
+let strType = ref(''); //火灾外因-区别工作面和煤层
+let router = useRouter()
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(deviceID, flag?) {
+    timer = setTimeout(
+        async () => {
+            await getSysWarnList(deviceID, 'fire');
+            if (timer) {
+                timer = null;
+            }
+            getMonitor(deviceID);
+        },
+        flag ? 0 : 1000
+    );
+}
+
+//返回首页
+function getBack() {
+    router.push('/monitorChannel/monitor-alarm-home')
+}
+
+//获取左侧菜单列表
+async function getMenuList() {
+    let res = await sysTypeWarnList({ type: 'fire' })
+    console.log(res, '火灾左侧菜单列表-------')
+    if (res.length != 0) {
+        menuList.length = 0
+        menuList1.external = res.external;
+        menuList1.internal = res.internal;
+        menuList1.internal.forEach((el) => {
+            menuList.push({
+                name: el.systemname,
+                warn: '低风险',
+                type: 'on',
+                deviceID: el.id,
+                strtype: el.strtype,
+            });
+        });
+        getMonitor(menuList[0].deviceID, true);
+    }
+}
+
+//获取预警详情弹窗右侧数据
+function getSysWarnList(id, type) {
+    sysWarn({ sysid: id, type: type }).then((res) => {
+        listData.bundletube = res.bundletube;
+        listData.fiber = res.fiber;
+        listData.fire = res.fire;
+        listData.co=res.co;
+        listData.smoke = res.smoke;
+        listData.spray = res.spray;
+        listData.temperature = res.temperature;
+        loadZj();
+    });
+}
+
+
+//内外因火灾、预警指标选项切换
+function btnClick(ind) {
+    activeIndex.value = ind;
+    switch (ind) {
+        case 0:
+            activeIndex1.value = 0;
+            menuList.length = 0;
+            currentLoad.value = '';
+            menuList1.internal.forEach((el) => {
+                menuList.push({
+                    name: el.systemname,
+                    warn: '低风险',
+                    type: 'on',
+                    deviceID: el.id,
+                    strtype: el.strtype,
+                });
+            });
+            clearTimeout(timer);
+            getClearList();
+            getMonitor(menuList[0].deviceID, true);
+            break;
+        case 1:
+            activeIndex1.value = 0;
+            menuList.length = 0;
+            currentLoad.value = '';
+            if (menuList1.external.length != 0) {
+                menuList1.external.forEach((el) => {
+                    menuList.push({
+                        name: el.systemname,
+                        warn: '低风险',
+                        type: 'out',
+                        deviceID: el.id,
+                        strtype: el.strtype,
+                    });
+                });
+                clearTimeout(timer);
+                getClearList();
+                getMonitor(menuList[0].deviceID, true);
+                strType.value = menuList[0].strtype;
+            } else {
+                menuList.length = 0;
+                clearTimeout(timer);
+                currentLoad.value = '';
+            }
+            break;
+        case 2:
+            activeIndex1.value = 0;
+            menuList.length = 0;
+            currentLoad.value = 'warnTargetFire';
+            break;
+    }
+}
+//菜单选项切换
+function cardClick(ind, item) {
+    activeIndex1.value = ind;
+    strType.value = item.strtype;
+    clearTimeout(timer);
+    getClearList();
+    currentLoad.value = '';
+    getMonitor(item.deviceID, true);
+}
+//加载组件
+function loadZj() {
+    if (!activeIndex.value && listData.fiber.length != 0 && listData.bundletube.length != 0) {
+        currentLoad.value = 'fireWork';
+    } else if (!activeIndex.value && listData.bundletube.length != 0) {
+        currentLoad.value = 'closeWall';
+    } else if (activeIndex.value && activeIndex.value!=2) {
+        currentLoad.value = 'mainWell';
+    }else if(activeIndex.value==2){
+        currentLoad.value = 'warnTargetFire';
+    } else {
+        currentLoad.value = '';
+    }
+}
+//清空数据
+function getClearList() {
+    listData.common = {};
+    listData.bundletube.length = 0;
+    listData.fiber.length = 0;
+    listData.fire.length = 0;
+    listData.co.length=0;
+    listData.smoke.length = 0;
+    listData.spray.length = 0;
+    listData.temperature.length = 0;
+}
+
+onMounted(() => {
+    getMenuList()
+})
+onUnmounted(() => {
+    if (timer) {
+        clearTimeout(timer);
+        timer = undefined;
+    }
+});
+</script>
+
+<style lang="less" scoped>
+.fireWarn {
+    width: 100%;
+    height: 100%;
+    padding: 80px 10px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+
+    .alarm-menu {
+        height: 100%;
+        width: 15%;
+
+        .type-btn {
+            width: 100%;
+            height: 28px;
+            line-height: 28px;
+            border: 1px solid #0058ee;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+
+            .btn {
+                width: 33%;
+                height: 100%;
+                font-size: 14px;
+                text-align: center;
+                color: #fff;
+                cursor: pointer;
+            }
+
+            .btn1 {
+                width: 33%;
+                height: 100%;
+                font-size: 14px;
+                color: #fff;
+                text-align: center;
+                border-radius: 2px;
+                background: #0058ee;
+                cursor: pointer;
+            }
+        }
+
+        .card-btn {
+            width: 100%;
+            height: calc(100% - 48px);
+            overflow-y: auto;
+
+            .btn {
+                position: relative;
+                width: 81%;
+                height: 14%;
+                margin-bottom: 10%;
+                font-family: 'douyuFont';
+                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .text {
+                    width: 80%;
+                    position: absolute;
+                    left: 50%;
+                    top: 28px;
+                    font-size: 16px;
+                    color: #01fefc;
+                    text-align: center;
+                    transform: translate(-50%, 0);
+                }
+
+                .warn {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    bottom: 14px;
+                    font-size: 14px;
+                    color: #fff;
+                    text-align: center;
+                    transform: translate(-50%, 0);
+                }
+            }
+
+            .btn1 {
+                position: relative;
+                width: 100%;
+                height: 14%;
+                margin-bottom: 10%;
+                font-family: 'douyuFont';
+                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .text {
+                    width: 80%;
+                    position: absolute;
+                    left: 50%;
+                    top: 28px;
+                    font-size: 16px;
+                    color: #01fefc;
+                    text-align: center;
+                    transform: translate(-62%, 0);
+                }
+
+                .warn {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    bottom: 14px;
+                    font-size: 14px;
+                    color: #fff;
+                    text-align: center;
+                    transform: translate(-60%, 0);
+                }
+            }
+        }
+    }
+
+    .fire-content {
+        width: calc(85% - 10px);
+        height: 100%;
+        margin-left: 10px;
+        background: url('../../../../../assets/images/fire/border.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+}
+</style>

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

@@ -0,0 +1,693 @@
+<template>
+    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯监测预警 </customHeader>
+    <div class="gasWarn">
+        <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="alarm-menu">
+            <div class="type-btn">
+                <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListGas"
+                    :key="index" @click="btnClick(index)">
+                    {{ item.name }}
+                </div>
+            </div>
+            <div class="card-btn">
+                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
+                    @click="cardClick(ind, item)">
+                    <div class="text">{{ item.name }}</div>
+                    <div class="warn">{{ item.warn }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="gas-content">
+            <div style="width:100%;height:100%" v-if="isShow">
+                <div class="top-area" v-if="topAreaListWs.length != 0">
+                    <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>
+                    </div>
+
+                </div>
+
+                <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
+                    <div class="title-b">
+                        <div class="text-b">安全监控测点信息</div>
+                    </div>
+                    <div class="content-b">
+                        <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
+                            <div class="item-l">
+                                <div class="label-l">{{ item.label }}</div>
+                                <div class="value-l">{{ `${item.value}%` }}</div>
+                            </div>
+                            <div class="item-r">
+                                <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
+                                    <span>{{ `${items.label} : ` }}</span>
+                                    <span :class="{
+                                        'status-f': items.value == 1,
+                                        'status-l': items.value == 0,
+                                    }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div style="width:100%;height:100%" v-else>
+                <warnTargetGas></warnTargetGas>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { sysTypeWarnList, sysWarn } from '../common.api'
+import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+import { useRouter } from 'vue-router';
+import CustomHeader from '/@/components/vent/customHeader.vue';
+import warnTargetGas from '../common/warnTargetGas.vue'
+import { typeMenuListGas } from '../common.data'
+
+const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+//当前左侧激活菜单的索引
+let activeIndex1 = ref(0);
+//左侧数据列表
+let menuList = reactive<any[]>([])
+//瓦斯顶部区域数据
+let topAreaListWs = reactive<any[]>([]);
+//瓦斯监控列表数据
+let cardListWs = reactive<any[]>([]);
+let router = useRouter()
+//监测/指标激活索引
+let activeIndex = ref(0);
+let isShow = ref(true)
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(deviceID, flag?) {
+    timer = setTimeout(
+        async () => {
+            await getSysWarnList(deviceID, 'gas');
+            if (timer) {
+                timer = null;
+            }
+            getMonitor(deviceID);
+        },
+        flag ? 0 : 1000
+    );
+}
+
+//返回首页
+function getBack() {
+    router.push('/monitorChannel/monitor-alarm-home')
+}
+
+//获取预警详情弹窗右侧数据
+function getSysWarnList(id, type) {
+    sysWarn({ sysid: id, type: type }).then((res) => {
+        // listData.common = res;
+        topAreaListWs.length = 0;
+        cardListWs.length = 0;
+        if (JSON.stringify(res) != '{}') {
+            res.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 : '-' },
+                    ],
+                });
+            });
+
+            res.gas.forEach((el) => {
+                el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
+                cardListWs.push({
+                    label: '甲烷',
+                    // value: el.readData.gasC || '--',
+                    value: 0,
+                    listR: [
+                        { id: 0, label: '测点类型', value: '瓦斯' },
+                        { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
+                        { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
+                        { id: 3, label: '测点状态', value: el.warnFlag },
+                    ],
+                });
+            });
+        }
+    });
+}
+
+//获取左侧菜单列表
+async function getMenuList() {
+    let res = await sysTypeWarnList({ type: 'gas' })
+    if (res.length != 0) {
+        menuList.length = 0
+        res.forEach((el) => {
+            menuList.push({
+                name: el.systemname,
+                warn: '低风险',
+                deviceID: el.id,
+                strtype: el.strtype,
+            });
+        });
+        getMonitor(menuList[0].deviceID, true);
+    }
+}
+
+//监测/预警指标选项切换
+function btnClick(ind) {
+    activeIndex.value = ind;
+    clearTimeout(timer);
+    switch (ind) {
+        case 0:
+            activeIndex1.value = 0;
+            isShow.value = true
+            break;
+        case 1:
+            activeIndex1.value = 0;
+            isShow.value = false
+            break;
+    }
+}
+
+//菜单选项切换
+function cardClick(ind, item) {
+    activeIndex1.value = ind;
+    clearTimeout(timer);
+    getMonitor(item.deviceID, true);
+}
+
+onMounted(() => {
+    getMenuList()
+})
+onUnmounted(() => {
+    if (timer) {
+        clearTimeout(timer);
+        timer = undefined;
+    }
+});
+
+</script>
+
+<style lang="less" scoped>
+.gasWarn {
+    width: 100%;
+    height: 100%;
+    padding: 80px 10px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+
+    .alarm-menu {
+        height: 100%;
+        width: 15%;
+
+        .type-btn {
+            width: 100%;
+            height: 28px;
+            line-height: 28px;
+            border: 1px solid #0058ee;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+
+            .btn {
+                width: 50%;
+                height: 100%;
+                font-size: 14px;
+                text-align: center;
+                color: #fff;
+                cursor: pointer;
+            }
+
+            .btn1 {
+                width: 50%;
+                height: 100%;
+                font-size: 14px;
+                color: #fff;
+                text-align: center;
+                border-radius: 2px;
+                background: #0058ee;
+                cursor: pointer;
+            }
+        }
+
+        .card-btn {
+            width: 100%;
+            height: calc(100% - 48px);
+            overflow-y: auto;
+
+            .btn {
+                position: relative;
+                width: 81%;
+                height: 14%;
+                margin-bottom: 10%;
+                font-family: 'douyuFont';
+                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .text {
+                    width: 80%;
+                    position: absolute;
+                    left: 50%;
+                    top: 28px;
+                    font-size: 16px;
+                    color: #01fefc;
+                    text-align: center;
+                    transform: translate(-50%, 0);
+                }
+
+                .warn {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    bottom: 14px;
+                    font-size: 14px;
+                    color: #fff;
+                    text-align: center;
+                    transform: translate(-50%, 0);
+                }
+            }
+
+            .btn1 {
+                position: relative;
+                width: 100%;
+                height: 14%;
+                margin-bottom: 10%;
+                font-family: 'douyuFont';
+                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .text {
+                    width: 80%;
+                    position: absolute;
+                    left: 50%;
+                    top: 28px;
+                    font-size: 16px;
+                    color: #01fefc;
+                    text-align: center;
+                    transform: translate(-62%, 0);
+                }
+
+                .warn {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    bottom: 14px;
+                    font-size: 14px;
+                    color: #fff;
+                    text-align: center;
+                    transform: translate(-60%, 0);
+                }
+            }
+        }
+    }
+
+    .gas-content {
+        position: relative;
+        width: calc(85% - 10px);
+        height: 100%;
+        margin-left: 10px;
+        padding: 15px;
+        background: url('../../../../../assets/images/fire/border.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+
+        .top-area {
+            height: 356px;
+            margin-bottom: 10px;
+            padding: 10px;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+            background-size: 100% 100%;
+            box-sizing: border-box;
+
+            .title-t {
+                height: 30px;
+                margin-bottom: 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .text-t {
+                    font-family: 'douyuFont';
+                    font-size: 14px;
+                    color: #fff;
+                }
+            }
+
+            .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: url('../../../../../assets/images/fire/top-area.png') 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: rgb(0, 242, 255);
+                                }
+                            }
+
+                            .box-value {
+                                color: rgb(145, 230, 9) !important;
+                            }
+
+                            .box-value1 {
+                                color: rgb(0, 242, 255) !important;
+                            }
+
+                            .box-value2 {
+                                color: #ffff35 !important;
+                            }
+
+                            .box-value3 {
+                                color: #ffbe69 !important;
+                            }
+
+                            .box-value4 {
+                                color: #ff6f00 !important;
+                            }
+
+                            .box-value5 {
+                                color: #ff0000 !important;
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+
+        .bot-area {
+            height: calc(100% - 356px);
+            padding: 10px;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+            background-size: 100% 100%;
+            box-sizing: border-box;
+
+            .title-b {
+                height: 30px;
+                margin-bottom: 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .text-b {
+                    font-family: 'douyuFont';
+                    font-size: 14px;
+                    color: #fff;
+                }
+            }
+
+            .content-b {
+                height: calc(100% - 40px);
+                display: flex;
+                justify-content: flex-start;
+                align-items: flex-start;
+                flex-wrap: wrap;
+                overflow-y: auto;
+
+                .card-b {
+                    position: relative;
+                    width: 30%;
+                    height: 128px;
+                    margin: 0px 15px 15px 15px;
+                    background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
+                    background-size: 100% 100%;
+
+                    .item-l {
+                        position: absolute;
+                        left: 32px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                        width: 89px;
+                        height: 98px;
+                        background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+                        .label-l {
+                            position: absolute;
+                            left: 50%;
+                            top: 7px;
+                            color: #fff;
+                            font-size: 14px;
+                            transform: translate(-50%, 0);
+                        }
+
+                        .value-l {
+                            position: absolute;
+                            left: 50%;
+                            top: 50px;
+                            transform: translate(-50%, 0);
+                            font-family: 'douyuFont';
+                            font-size: 16px;
+                            color: #3df6ff;
+                        }
+                    }
+
+                    .item-r {
+                        position: absolute;
+                        left: 132px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                        height: 128px;
+                        padding: 5px 0px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        box-sizing: border-box;
+
+                        .content-r {
+                            display: flex;
+
+                            span {
+                                font-size: 14px;
+                                color: #fff;
+
+                                &:first-child {
+                                    display: inline-block;
+                                    width: 68px;
+                                }
+
+                                &:last-child {
+                                    display: inline-block;
+                                    width: calc(100% - 68px);
+                                }
+                            }
+
+                            .status-f {
+                                color: #ff0000;
+                            }
+
+                            .status-l {
+                                color: #3df6ff;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .bot-area1 {
+            height: 100%;
+            padding: 10px 15px 0px 15px;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+            background-size: 100% 100%;
+            box-sizing: border-box;
+
+            .title-b {
+                height: 30px;
+                margin-bottom: 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .text-b {
+                    font-family: 'douyuFont';
+                    font-size: 14px;
+                    color: #fff;
+                }
+            }
+
+            .content-b {
+                width: 100%;
+                height: calc(100% - 40px);
+                display: flex;
+                justify-content: flex-start;
+                align-items: flex-start;
+                flex-wrap: wrap;
+                overflow-y: auto;
+
+                .card-b {
+                    position: relative;
+                    width: 30%;
+                    height: 128px;
+                    margin: 0px 15px 15px 15px;
+                    background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
+                    background-size: 100% 100%;
+
+                    .item-l {
+                        position: absolute;
+                        left: 32px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                        width: 89px;
+                        height: 98px;
+                        background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+                        .label-l {
+                            position: absolute;
+                            left: 50%;
+                            top: 7px;
+                            font-size: 14px;
+                            color: #fff;
+                            transform: translate(-50%, 0);
+                        }
+
+                        .value-l {
+                            position: absolute;
+                            left: 50%;
+                            top: 50px;
+                            transform: translate(-50%, 0);
+                            font-family: 'douyuFont';
+                            font-size: 16px;
+                            color: #3df6ff;
+                        }
+                    }
+
+                    .item-r {
+                        position: absolute;
+                        left: 132px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+                        height: 128px;
+                        padding: 5px 0px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        box-sizing: border-box;
+
+                        .content-r {
+                            display: flex;
+
+                            span {
+                                font-size: 14px;
+                                color: #fff;
+
+                                &:first-child {
+                                    display: inline-block;
+                                    width: 68px;
+                                }
+
+                                &:last-child {
+                                    display: inline-block;
+                                    width: calc(100% - 68px);
+                                }
+                            }
+
+                            .status-f {
+                                color: #ff0000;
+                            }
+
+                            .status-l {
+                                color: #3df6ff;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,531 @@
+<template>
+    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
+    <div class="ventilateWarn">
+        <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="alarm-menu">
+            <div class="card-btn">
+                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
+                    @click="cardClick(ind, item)">
+                    <div class="text">{{ item.name }}</div>
+                    <div class="warn">{{ item.warn }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="dustPage">
+            <div class="top-area">
+                <div class="top-box" v-for="(item, index) in topAreaList" :key="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-value1': items.value == 0,
+                                'item-value2': items.value == 101,
+                                'item-value3': items.value == 102,
+                                'item-value4': items.value == 103,
+                                'item-value5': items.value == 104,
+                                'item-value6': items.value == 201,
+                                'item-value': items.value != 0 && items.value != 101 && items.value != 102 && items.value != 103 && items.value != 104 && items.value != 201,
+
+                            }">{{ items.value == 0 ? '正常' : items.value == 101 ? '较低风险' : items.value == 102 ? '低风险' :
+                                items.value ==
+                                    103 ?
+                                    '中风险' : items.value == 104 ? '高风险' : items.value == 201 ? '报警' : items.value }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="center-area">
+                <div class="center-t">
+                    <div class="t-box" v-for="(item, index) in centerAreaListT1" :key="index">
+                        <div class="box-label">{{ item.label }}</div>
+                    </div>
+                </div>
+                <div class="center-b">
+                    <div class="b-box" v-for="(item, index) in centerAreaListB1" :key="index">
+                        <div class="box-label">{{ item.content }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="bot-area">
+                <div class="title-t">
+                    <div class="text-t">通风信息状态监测</div>
+                </div>
+                <div class="echart-boxd">
+                    <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { sysTypeWarnList, sysWarn } from '../common.api'
+import { centerAreaListT1, centerAreaListB1 } from '../common.data';
+import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+import { useRouter } from 'vue-router';
+import echartLine from '../common/echartLine.vue';
+import CustomHeader from '/@/components/vent/customHeader.vue';
+
+const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+//左侧数据列表
+let menuList = reactive<any[]>([])
+//当前左侧激活菜单的索引
+let activeIndex1 = ref(0);
+let maxY = ref(0)
+let echartDw = ref('(m³/min)')
+//报警区域数据
+let topAreaList = reactive<any[]>([]);
+//通风图表数据
+const echartDataFc1 = reactive({
+    maxData: {
+        lengedData: '进风量',
+        data: []
+    },
+    minData: {
+        lengedData: '回风量',
+        data: []
+    },
+    aveValue: {
+        lengedData: '需风量',
+        data: []
+    },
+    xData: [],
+});
+let router = useRouter()
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(deviceID, flag?) {
+    timer = setTimeout(
+        async () => {
+            await getSysWarnList(deviceID, 'vent');
+            if (timer) {
+                timer = null;
+            }
+            getMonitor(deviceID);
+        },
+        flag ? 0 : 1000
+    );
+}
+//返回首页
+function getBack() {
+    router.push('/monitorChannel/monitor-alarm-home')
+}
+//菜单选项切换
+function cardClick(ind, item) {
+    activeIndex1.value = ind;
+    clearTimeout(timer);
+    getMonitor(item.deviceID, true);
+}
+//获取左侧数据列表
+async function getMenuList() {
+    let res = await sysTypeWarnList({ type: 'vent' })
+    console.log(res, '通风预警监测左侧列表数据-------------')
+    if (res.length != 0) {
+        menuList.length = 0
+        res.forEach((el) => {
+            menuList.push({
+                name: el.deviceName,
+                warn: '低风险',
+                deviceID: el.deviceID,
+                strtype: el.deviceType,
+            });
+        });
+        getMonitor(menuList[0].deviceID, true);
+    }
+}
+function formatRoundNum(num) {
+    let interger = Math.ceil(num)
+    let leng = String(interger).length
+    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
+}
+//获取预警详情弹窗右侧数据
+function getSysWarnList(id, type) {
+    sysWarn({ sysid: id, type: type }).then((res) => {
+        echartDataFc1.maxData.data.length = 0;
+        echartDataFc1.minData.data.length = 0;
+        echartDataFc1.aveValue.data.length = 0;
+        echartDataFc1.xData.length = 0;
+        topAreaList.length = 0;
+        if (JSON.stringify(res) != '{}') {
+            if (res.warnDevices.length != 0) {
+                res.warnDevices.forEach((el) => {
+                    topAreaList.push({
+                        title: el.typeName,
+                        content: [
+                            { ids: 0, label: '设备类型', value: '工作面风量' },
+                            {
+                                ids: 1,
+                                label: '报警等级',
+                                value: el.datalist[0].warnLevel || 0,
+                            },
+                            { ids: 2, label: '报警描述', value: el.datalist[0].warnDes || '--' },
+                        ],
+                    });
+                });
+            } else {
+                topAreaList.push({
+                    title: '工作面',
+                    content: [
+                        { ids: 0, label: '设备类型', value: '工作面风量' },
+                        {
+                            ids: 1,
+                            label: '报警等级',
+                            value: res.warnLevel || '正常',
+                        },
+                        { ids: 2, label: '报警描述', value: '--' },
+                    ],
+                });
+            }
+
+            centerAreaListB1[0].content = res.jin || '--';
+            centerAreaListB1[1].content = res.hui || '--';
+            centerAreaListB1[2].content = res.xufengliang || '--';
+
+            if (res.history.length != 0) {
+                res.history.forEach((v) => {
+                    echartDataFc1.maxData.data.push(parseFloat(v.jin));
+                    echartDataFc1.minData.data.push(parseFloat(v.hui));
+                    if (centerAreaListB1[2].content && centerAreaListB1[2].content != '--') {
+                        echartDataFc1.aveValue.data.push(centerAreaListB1[2].content);
+                    } else {
+                        echartDataFc1.aveValue.data.push(0);
+                    }
+
+                    echartDataFc1.xData.push(v.time);
+                });
+            }
+
+            let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
+                return acr > cur ? acr : cur
+            })
+            let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
+                return acr1 > cur1 ? acr1 : cur1
+            })
+            maxY.value = max1 >= max2 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2)
+        }
+    });
+}
+
+onMounted(() => {
+    getMenuList()
+})
+onUnmounted(() => {
+    if (timer) {
+        clearTimeout(timer);
+        timer = undefined;
+    }
+});
+</script>
+
+<style lang="less" scoped>
+.ventilateWarn {
+    width: 100%;
+    height: 100%;
+    padding: 80px 10px 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+
+    .alarm-menu {
+        height: 100%;
+        width: 15%;
+
+        .card-btn {
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
+
+            .btn {
+                position: relative;
+                width: 81%;
+                height: 14%;
+                margin-bottom: 10%;
+                font-family: 'douyuFont';
+                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .text {
+                    width: 80%;
+                    position: absolute;
+                    left: 50%;
+                    top: 28px;
+                    font-size: 16px;
+                    color: #01fefc;
+                    text-align: center;
+                    transform: translate(-50%, 0);
+                }
+
+                .warn {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    bottom: 14px;
+                    font-size: 14px;
+                    color: #fff;
+                    text-align: center;
+                    transform: translate(-50%, 0);
+                }
+            }
+
+            .btn1 {
+                position: relative;
+                width: 100%;
+                height: 14%;
+                margin-bottom: 10%;
+                font-family: 'douyuFont';
+                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .text {
+                    width: 80%;
+                    position: absolute;
+                    left: 50%;
+                    top: 28px;
+                    font-size: 16px;
+                    color: #01fefc;
+                    text-align: center;
+                    transform: translate(-62%, 0);
+                }
+
+                .warn {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    bottom: 14px;
+                    font-size: 14px;
+                    color: #fff;
+                    text-align: center;
+                    transform: translate(-60%, 0);
+                }
+            }
+        }
+    }
+
+    .dustPage {
+        width: calc(85% - 10px);
+        height: 100%;
+        margin-left: 10px;
+        padding: 15px;
+        background: url('../../../../../assets/images/fire/border.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+
+        .top-area {
+            height: 24%;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+
+            .top-box {
+                position: relative;
+                width: 32%;
+                height: 88%;
+                background: url('../../../../../assets/images/fire/fc-t.png') no-repeat;
+                background-size: 100% 100%;
+
+                .top-title {
+                    position: absolute;
+                    left: 50%;
+                    top: 8px;
+                    font-size: 14px;
+                    color: #fff;
+                    transform: translate(-50%, 0);
+                }
+
+                .top-content {
+                    position: absolute;
+                    top: 20%;
+                    left: 0;
+                    width: 100%;
+                    height: 80%;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: flex-start;
+                    flex-wrap: wrap;
+                    cursor: pointer;
+
+                    .content-item {
+                        position: relative;
+                        width: 50%;
+                        height: 50%;
+                        font-size: 14px;
+                        background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+                        background-size: 82% 54%;
+
+                        .item-label {
+                            position: absolute;
+                            left: 16%;
+                            top: 50%;
+                            color: #fff;
+                            transform: translate(0, -44%);
+                        }
+
+                        .item-value {
+                            position: absolute;
+                            right: 16%;
+                            top: 50%;
+                            transform: translate(0, -38%);
+                            font-family: 'douyuFont';
+                            color: #3df6ff;
+                        }
+
+                        .item-value1 {
+                            position: absolute;
+                            right: 21%;
+                            top: 50%;
+                            transform: translate(0, -32%);
+                            font-size: 12px;
+                            font-family: 'douyuFont';
+                            color: rgb(145, 230, 9);
+                        }
+
+                        .item-value2 {
+                            position: absolute;
+                            right: 21%;
+                            top: 50%;
+                            transform: translate(0, -32%);
+                            font-size: 12px;
+                            font-family: 'douyuFont';
+                            color: rgb(0, 242, 255);
+                        }
+
+                        .item-value3 {
+                            position: absolute;
+                            right: 21%;
+                            top: 50%;
+                            transform: translate(0, -32%);
+                            font-size: 12px;
+                            font-family: 'douyuFont';
+                            color: #ffff35;
+                        }
+
+                        .item-value4 {
+                            position: absolute;
+                            right: 21%;
+                            top: 50%;
+                            transform: translate(0, -32%);
+                            font-size: 12px;
+                            font-family: 'douyuFont';
+                            color: #ffbe69;
+                        }
+
+                        .item-value5 {
+                            position: absolute;
+                            right: 21%;
+                            top: 50%;
+                            transform: translate(0, -32%);
+                            font-size: 12px;
+                            font-family: 'douyuFont';
+                            color: #ff6f00;
+                        }
+
+                        .item-value6 {
+                            position: absolute;
+                            right: 21%;
+                            top: 50%;
+                            transform: translate(0, -32%);
+                            font-size: 12px;
+                            font-family: 'douyuFont';
+                            color: #ff0000;
+                        }
+                    }
+                }
+            }
+        }
+
+        .center-area {
+            height: 34%;
+            margin-bottom: 20px;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+            background-size: 100% 100%;
+
+            .center-t {
+                height: 50%;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                background: url('../../../../../assets/images/fire/dz.png') no-repeat;
+                background-size: 100% 100%;
+
+                .t-box {
+                    width: 14%;
+                    height: 75%;
+                    background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
+                    background-size: 100% 100%;
+
+                    .box-label {
+                        font-size: 16px;
+                        color: #06edcd;
+                        text-align: center;
+                    }
+                }
+            }
+
+            .center-b {
+                height: 50%;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+
+                .b-box {
+                    width: 14%;
+                    height: 75%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+
+                    .box-label {
+                        width: 78%;
+                        height: 44%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        color: #3df6ff;
+                        font-family: 'douyuFont';
+                        background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
+                        background-size: 100% 100%;
+                    }
+                }
+            }
+        }
+
+        .bot-area {
+            height: calc(100% - 58% - 30px);
+            padding: 10px 15px;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+            background-size: 100% 100%;
+            box-sizing: border-box;
+
+            .title-t {
+                height: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .text-t {
+                    font-family: 'douyuFont';
+                    font-size: 14px;
+                    color: #fff;
+                }
+            }
+
+            .echart-boxd {
+                width: 100%;
+                height: calc(100% - 30px);
+            }
+
+        }
+
+    }
+
+}
+</style>