预警管控系统界面修改-提交

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

@@ -1,223 +0,0 @@
-<template>
-  <BasicModal @register="register" title="预警详情" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
-    <div class="alarm-modal">
-      <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>
-  </BasicModal>
-</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 { warningList } from './alarm.api';
-  import { levelColumns, levelHisColumns } from './alarm.data';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-
-  const props = defineProps({
-    deviceId: { type: String },
-  });
-
-  const emit = defineEmits(['close', 'register']);
-
-  // 默认初始是第一行
-  const activeKey = ref('1');
-  const dataSource = ref([]);
-
-  const tabChange = (activeKeyVal) => {
-    activeKey.value = activeKeyVal;
-  };
-
-  // 注册 modal
-  const [register, { closeModal }] = useModalInner();
-
-  // 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
-      );
-    }
-  }
-  //设备预警监测列表
-  async function getDataSource() {
-    const res = await warningList({ isok: 0 });
-    dataSource.value = res.list || [];
-  }
-
-  async function onSubmit() {
-    clearTimeout(timer);
-    emit('close');
-    closeModal();
-  }
-
-  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: 10px;
-    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/DetailModalFire.vue

@@ -1,570 +0,0 @@
-<template>
-  <BasicModal @register="register" :title="titleName" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
-    <div class="alarm-modal">
-      <div class="containers">
-        <div class="alarm-menu">
-          <div class="type-btn" v-if="isShowModule">
-            <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="alarm-content">
-          <component :is="componentName[current]" :listData="listData" :strType="strType" />
-        </div>
-      </div>
-    </div>
-  </BasicModal>
-</template>
-<script lang="ts" setup>
-  import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent, defineProps } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { typeMenuList, componentName } from './fire.data';
-  import { sysTypeWarnList, sysWarn } from './alarm.api';
-
-  let props = defineProps({
-    moduleObj: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-  });
-
-  let listData = reactive({
-    common: {},
-    bundletube: [],
-    fiber: [],
-    fire: [],
-    smoke: [],
-    spray: [],
-    temperature: [],
-  }); //详情数据
-  let isShowModule = ref(true); //是否显示内外因火灾切换按钮
-  let titleName = ref('');
-  let menuList = reactive<any[]>([]); //左侧菜单列表
-  let menuList1 = reactive({
-    external: [],
-    internal: [],
-  });
-  //内外因火灾激活索引
-  let activeIndex = ref(0);
-  //当前激活菜单的索引
-  let activeIndex1 = ref(0);
-  //当前加载组件
-  let current = ref('');
-
-  let strType = ref(''); //火灾外因-区别工作面和煤层
-
-  const emit = defineEmits(['close', 'register']);
-
-  // 注册 modal
-  const [register, { closeModal }] = useModalInner();
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(deviceID, flag?) {
-    timer = setTimeout(
-      async () => {
-        await getSysWarnList(deviceID, props.moduleObj.moduleName);
-        if (timer) {
-          timer = null;
-        }
-        getMonitor(deviceID);
-      },
-      flag ? 0 : 1000
-    );
-  }
-
-  //清空数据
-  function getClearList() {
-    listData.common = {};
-    listData.bundletube.length = 0;
-    listData.fiber.length = 0;
-    listData.fire.length = 0;
-    listData.smoke.length = 0;
-    listData.spray.length = 0;
-    listData.temperature.length = 0;
-  }
-
-  async function onSubmit() {
-    activeIndex1.value = 0;
-    activeIndex.value = 0;
-    getClearList();
-    clearTimeout(timer);
-    emit('close');
-    closeModal();
-  }
-  //内外因火灾选项切换
-  function btnClick(ind) {
-    activeIndex.value = ind;
-    switch (ind) {
-      case 0:
-        activeIndex1.value = 0;
-        menuList.length = 0;
-        current.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;
-        current.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);
-          current.value = '';
-        }
-        break;
-    }
-  }
-  //菜单选项切换
-  function cardClick(ind, item) {
-    activeIndex1.value = ind;
-    strType.value = item.strtype;
-    clearTimeout(timer);
-    getClearList();
-    if (props.moduleObj.moduleName == 'fire') {
-      current.value = '';
-    }
-    getMonitor(item.deviceID, true);
-  }
-
-  //加载组件
-  function loadZj() {
-    if (!activeIndex.value && listData.fiber.length != 0 && listData.bundletube.length != 0) {
-      current.value = 'fireWork';
-    } else if (!activeIndex.value && listData.bundletube.length != 0) {
-      current.value = 'closeWall';
-    } else if (activeIndex.value) {
-      current.value = 'mainWell';
-      // current.value = ''
-    } else {
-      current.value = '';
-    }
-  }
-
-  //获取预警详情弹窗左侧数据
-  function getSysTypeWarnList(data) {
-    sysTypeWarnList({ type: data }).then((res) => {
-      if (props.moduleObj.moduleName == 'vent') {
-        res.forEach((el) => {
-          menuList.push({
-            name: el.deviceName,
-            // warn: el.netStatus ? '高风险' : '低风险',
-            warn: '低风险',
-            type: 'on',
-            deviceID: el.deviceID,
-            strtype: el.deviceType,
-          });
-        });
-        getMonitor(menuList[0].deviceID, true);
-      } else if (props.moduleObj.moduleName == 'fire') {
-        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);
-      } else if (props.moduleObj.moduleName == 'dust') {
-        res.forEach((el) => {
-          menuList.push({
-            name: el.systemname,
-            warn: '低风险',
-            type: 'on',
-            deviceID: el.id,
-            strtype: el.strtype,
-          });
-        });
-        getMonitor(menuList[0].deviceID, true);
-      } else if (props.moduleObj.moduleName == 'gas') {
-        res.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) => {
-      if (type == 'fire') {
-        (listData.bundletube = res.bundletube), (listData.fiber = res.fiber);
-        (listData.fire = res.fire), (listData.smoke = res.smoke), (listData.spray = res.spray), (listData.temperature = res.temperature), loadZj();
-      } else if (type == 'vent' || type == 'dust' || type == 'gas') {
-        listData.common = res;
-      }
-    });
-  }
-  watch(
-    () => props.moduleObj,
-    (val) => {
-      if (val.moduleName == 'fire') {
-        menuList.length = 0;
-        menuList1.external.length = 0;
-        menuList1.internal.length = 0;
-        current.value = '';
-        titleName.value = '火灾监测';
-        isShowModule.value = true;
-        getSysTypeWarnList('fire');
-      } else if (val.moduleName == 'dust') {
-        menuList.length = 0;
-        current.value = '';
-        titleName.value = '粉尘监测';
-        isShowModule.value = false;
-        current.value = 'dustPage';
-        getSysTypeWarnList('dust');
-      } else if (val.moduleName == 'vent') {
-        menuList.length = 0;
-        current.value = '';
-        titleName.value = '通风监测';
-        isShowModule.value = false;
-        current.value = 'ventilate';
-        getSysTypeWarnList('vent');
-      } else if (val.moduleName == 'gas') {
-        menuList.length = 0;
-        current.value = '';
-        titleName.value = '瓦斯监测';
-        isShowModule.value = false;
-        current.value = 'gasPage';
-        getSysTypeWarnList('gas');
-      }
-    },
-    { immediate: true, deep: true }
-  );
-
-  onMounted(async () => {});
-</script>
-<style scoped lang="less">
-  @import '/@/design/vent/color.less';
-  @import '/@/design/vent/modal.less';
-
-  .alarm-modal {
-    position: relative;
-    z-index: 999;
-
-    max-height: calc(100vh - 150px);
-
-    .@{ventSpace}-tabs {
-      max-height: calc(100vh - 100px);
-    }
-
-    .containers {
-      width: 100%;
-      height: calc(100vh - 159px);
-      display: flex;
-      justify-content: space-between;
-
-      .alarm-menu {
-        height: 100%;
-        // width: 272px;
-        width: 15%;
-
-        .type-btn {
-          width: 68%;
-          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;
-
-            @media screen and (max-width: 1920px) {
-              .text {
-                width: 80%;
-                position: absolute;
-                left: 50%;
-                top: 22px;
-                font-size: 16px;
-                color: #01fefc;
-                text-align: center;
-                transform: translate(-50%, 0);
-              }
-            }
-
-            @media screen and (min-width: 1921px) and (max-width: 2560px) {
-              .text {
-                width: 100%;
-                position: absolute;
-                left: 50%;
-                top: 38px;
-                font-size: 16px;
-                color: #01fefc;
-                text-align: center;
-                transform: translate(-50%, 0);
-              }
-            }
-
-            @media screen and (max-width: 1920px) {
-              .warn {
-                width: 100%;
-                position: absolute;
-                left: 50%;
-                top: 70px;
-                font-size: 16px;
-                color: #fff;
-                text-align: center;
-                transform: translate(-50%, 0);
-              }
-            }
-
-            @media screen and (min-width: 1921px) and (max-width: 2560px) {
-              .warn {
-                width: 100%;
-                position: absolute;
-                left: 50%;
-                top: 103px;
-                font-size: 16px;
-                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;
-
-            @media screen and (max-width: 1920px) {
-              .text {
-                width: 80%;
-                position: absolute;
-                left: 50%;
-                top: 22px;
-                font-size: 16px;
-                color: #01fefc;
-                text-align: center;
-                transform: translate(-62%, 0);
-              }
-            }
-
-            @media screen and (min-width: 1921px) and (max-width: 2560px) {
-              .text {
-                width: 100%;
-                position: absolute;
-                left: 50%;
-                top: 38px;
-                font-size: 16px;
-                color: #01fefc;
-                text-align: center;
-                transform: translate(-60%, 0);
-              }
-            }
-
-            @media screen and (max-width: 1920px) {
-              .warn {
-                width: 100%;
-                position: absolute;
-                left: 50%;
-                top: 70px;
-                font-size: 16px;
-                color: #fff;
-                text-align: center;
-                transform: translate(-60%, 0);
-              }
-            }
-
-            @media screen and (min-width: 1921px) and (max-width: 2560px) {
-              .warn {
-                width: 100%;
-                position: absolute;
-                left: 50%;
-                top: 103px;
-                font-size: 16px;
-                color: #fff;
-                text-align: center;
-                transform: translate(-60%, 0);
-              }
-            }
-          }
-        }
-      }
-
-      .alarm-content {
-        width: calc(85% - 10px);
-        height: 100%;
-        margin-left: 10px;
-        background: url('../../../../assets//images/fire/border.png') no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-  }
-
-  :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/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,194 @@
+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: '外因火灾' }];
+//当前加载组件
+export const componentName = {
+    fireWork: markRaw(defineAsyncComponent(() => import('./common/fireWork.vue'))),
+    closeWall: markRaw(defineAsyncComponent(() => import('./common/closeWall.vue'))),
+    mainWell: markRaw(defineAsyncComponent(() => import('./common/mainWell.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: 2, 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' },
+  ];

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

@@ -63,7 +63,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref, reactive, watch, defineProps } from 'vue';
-  import echartLine1 from './common/echartLine1.vue';
+  import echartLine1 from './echartLine1.vue';
 
   let props = defineProps({
     listData: Object,
@@ -333,13 +333,13 @@
 
             .text {
               font-family: 'douyuFont';
-              font-size: 36px;
+              font-size: 32px;
               margin: 0px 15px;
               color: #3df6ff;
             }
 
             .dw {
-              font-size: 16px;
+              font-size: 14px;
               color: #b3b8cc;
             }
           }
@@ -351,7 +351,7 @@
             justify-content: space-around;
 
             .text {
-              font-size: 18px;
+              font-size: 14px;
 
               .text-label {
                 color: #b3b8cc;
@@ -368,7 +368,7 @@
         }
 
         .text1 {
-          font-size: 18px;
+          font-size: 16px;
           color: #b3b8cc;
           font-weight: bold;
         }
@@ -378,7 +378,7 @@
     .content {
       width: 100%;
       height: calc(83% - 20px);
-      padding: 15px 20px 0px 20px;
+      padding: 10px;
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
       box-sizing: border-box;
@@ -387,7 +387,8 @@
         height: 30px;
         line-height: 30px;
         font-family: 'douyuFont';
-        font-size: 16px;
+        font-size: 14px;
+        color: #fff;
         // color: #3df6ff;
       }
 
@@ -528,7 +529,8 @@
 
           .title-text {
             font-family: 'douyuFont';
-            font-size: 16px;
+            font-size: 14px;
+            color: #fff;
             // color: #3df6ff;
           }
         }

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

@@ -64,9 +64,9 @@
 <script lang="ts" setup>
   import { onMounted, ref, reactive, watch, defineProps } from 'vue';
   import imgUrl from '../../../../../assets/images/fire/pie.png';
-  import echartLine from './common/echartLine.vue';
-  import echartLine1 from './common/echartLine1.vue';
-  import { topList, contentList } from '../fire.data';
+  import echartLine from './echartLine.vue';
+  import echartLine1 from './echartLine1.vue';
+  import { topList, contentList } from '../common.data';
 
   let props = defineProps({
     listData: Object,
@@ -349,7 +349,7 @@
     .center-echart {
       width: 100%;
       height: 32%;
-      padding: 15px;
+      padding: 10px;
       margin-bottom: 20px;
       box-sizing: border-box;
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
@@ -363,7 +363,8 @@
 
         .title {
           font-family: 'douyuFont';
-          font-size: 16px;
+          font-size: 14px;
+          color: #fff;
           // color: #3df6ff;
         }
       }
@@ -378,7 +379,7 @@
       position: relative;
       width: 100%;
       height: calc(53% - 40px);
-      padding: 15px 15px 0px 15px;
+      padding: 10px 10px 0px 10px;
       box-sizing: border-box;
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
@@ -392,8 +393,8 @@
           height: 30px;
           line-height: 30px;
           font-family: 'douyuFont';
-          font-size: 16px;
-          // color: #3df6ff;
+          font-size: 14px;
+          color: #fff;
         }
       }
 
@@ -437,6 +438,8 @@
               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%;

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

@@ -195,10 +195,10 @@
 
 <script lang="ts" setup>
   import { ref, computed, reactive, watch, defineProps } from 'vue';
-  import { topOutList, tabList, tabLists, columns } from '../fire.data';
+  import { topOutList, tabList, tabLists, columns } from '../common.data';
   import imgUrl from '../../../../../assets/images/fire/pie.png';
-  import echartLine2 from './common/echartLine2.vue';
-  import echartLine1 from './common/echartLine1.vue';
+  import echartLine2 from './echartLine2.vue';
+  import echartLine1 from './echartLine1.vue';
 
   let props = defineProps({
     listData: Object,
@@ -547,7 +547,7 @@
 
             &:nth-child(2) {
               font-family: 'douyuFont';
-              font-size: 20px;
+              font-size: 16px;
               color: #3df6ff;
             }
           }
@@ -607,13 +607,13 @@
 
             .text {
               font-family: 'douyuFont';
-              font-size: 36px;
+              font-size: 32px;
               margin: 0px 15px;
               color: #3df6ff;
             }
 
             .dw {
-              font-size: 16px;
+              font-size: 14px;
               color: #b3b8cc;
             }
           }
@@ -642,7 +642,7 @@
         }
 
         .text1 {
-          font-size: 18px;
+          font-size: 16px;
           color: #b3b8cc;
           font-weight: bold;
         }
@@ -681,7 +681,7 @@
 
           .title-label {
             // font-family: 'douyuFont';
-            font-size: 16px;
+            font-size: 14px;
             color: #fff;
           }
 
@@ -805,7 +805,7 @@
 
     .footer-box {
       height: calc(38% - 40px);
-      padding: 10px 15px;
+      padding: 10px;
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
       box-sizing: border-box;
@@ -817,7 +817,7 @@
 
         .echart-label {
           font-family: 'douyuFont';
-          font-size: 16px;
+          font-size: 14px;
           color: #fff;
         }
       }
@@ -854,7 +854,7 @@
     .content-s {
       width: 100%;
       height: 608px;
-      padding: 15px 20px 0px 20px;
+      padding: 10px;
       background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
       box-sizing: border-box;
@@ -863,8 +863,8 @@
         height: 30px;
         line-height: 30px;
         font-family: 'douyuFont';
-        font-size: 16px;
-        color: #3df6ff;
+        font-size: 14px;
+        color: #fff;
       }
 
       .card-btn {
@@ -1006,8 +1006,8 @@
 
           .title-text {
             font-family: 'douyuFont';
-            font-size: 16px;
-            color: #3df6ff;
+            font-size: 14px;
+            color: #fff;
           }
         }
 

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

@@ -1,563 +0,0 @@
-import { reactive, markRaw, defineAsyncComponent } from 'vue';
-
-import { getAssetURL } from '/@/utils/ui';
-
-//内外因火灾菜单列表
-export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' }];
-
-//当前加载组件
-export const componentName = {
-  fireWork: markRaw(defineAsyncComponent(() => import('./fire/fireWork.vue'))),
-  closeWall: markRaw(defineAsyncComponent(() => import('./fire/closeWall.vue'))),
-  mainWell: markRaw(defineAsyncComponent(() => import('./fire/mainWell.vue'))),
-  dustPage: markRaw(defineAsyncComponent(() => import('./fire/dustPage.vue'))),
-  gasPage: markRaw(defineAsyncComponent(() => import('./fire/gasPage.vue'))),
-  ventilate: markRaw(defineAsyncComponent(() => import('./fire/ventilate.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 echartDataGq = {
-  maxData: [],
-  minData: [],
-  aveValue: [],
-  xData: [],
-};
-
-//束管监测选项列表
-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: '--',
-      },
-    ],
-  },
-];
-
-//其他工作面table列
-export const columnsOther = [
-  { rowIndex: 1, dataIndex: 'info', title: '监测位置', type: '1', align: 'center' },
-  { rowIndex: 2, dataIndex: 'wd', title: '甲烷浓度(℃)', type: '1', align: 'center' },
-  { rowIndex: 3, dataIndex: 'tempmax', title: '一氧化碳(℃)', type: '1', align: 'center' },
-  { rowIndex: 4, dataIndex: 'tempmin', title: '二氧化碳(℃)', type: '1', align: 'center' },
-  { rowIndex: 5, dataIndex: 'info.netStatus', title: '氧气', type: '1', align: 'center' },
-  { rowIndex: 6, dataIndex: 'info.warnStatus', title: '温度', type: '1', align: 'center' },
-  { rowIndex: 7, dataIndex: 'createTime', title: '检测人', type: '1', align: 'center' },
-  { rowIndex: 8, dataIndex: 'createTime1', title: '日期', type: '1', align: 'center' },
-];
-
-//外因火灾-工作面顶部区域数据
-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: 2, 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' },
-];
-//井下消防材料库列表
-export const dataList = [
-  {
-    fq: '1防区',
-    btnText: '开启灭火器',
-    label: '喷气',
-    value: '正常',
-    contentList: [
-      {
-        id: 0,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气',
-        value: '正常',
-      },
-      {
-        id: 1,
-        imgSrc: getAssetURL('fire/smoke.svg'),
-        label: '喷气1',
-        value: '正常',
-      },
-      {
-        id: 2,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气2',
-        value: '正常',
-      },
-      {
-        id: 3,
-        imgSrc: getAssetURL('fire/warn.svg'),
-        label: '喷气3',
-        value: '正常',
-      },
-    ],
-  },
-  {
-    fq: '2防区',
-    btnText: '开启灭火器',
-    label: '喷气',
-    value: '正常',
-    contentList: [
-      {
-        id: 0,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气',
-        value: '正常',
-      },
-      {
-        id: 1,
-        imgSrc: getAssetURL('fire/smoke.svg'),
-        label: '喷气1',
-        value: '正常',
-      },
-      {
-        id: 2,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气2',
-        value: '正常',
-      },
-      {
-        id: 3,
-        imgSrc: getAssetURL('fire/warn.svg'),
-        label: '喷气3',
-        value: '正常',
-      },
-    ],
-  },
-  {
-    fq: '3防区',
-    btnText: '开启灭火器',
-    label: '喷气',
-    value: '正常',
-    contentList: [
-      {
-        id: 0,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气',
-        value: '正常',
-      },
-      {
-        id: 1,
-        imgSrc: getAssetURL('fire/smoke.svg'),
-        label: '喷气1',
-        value: '正常',
-      },
-      {
-        id: 2,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气2',
-        value: '正常',
-      },
-      {
-        id: 3,
-        imgSrc: getAssetURL('fire/warn.svg'),
-        label: '喷气3',
-        value: '正常',
-      },
-    ],
-  },
-  {
-    fq: '1防区',
-    btnText: '开启灭火器',
-    label: '喷气',
-    value: '正常',
-    contentList: [
-      {
-        id: 0,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气',
-        value: '正常',
-      },
-      {
-        id: 1,
-        imgSrc: getAssetURL('fire/smoke.svg'),
-        label: '喷气1',
-        value: '正常',
-      },
-      {
-        id: 2,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气2',
-        value: '正常',
-      },
-      {
-        id: 3,
-        imgSrc: getAssetURL('fire/warn.svg'),
-        label: '喷气3',
-        value: '正常',
-      },
-    ],
-  },
-  {
-    fq: '2防区',
-    btnText: '开启灭火器',
-    label: '喷气',
-    value: '正常',
-    contentList: [
-      {
-        id: 0,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气',
-        value: '正常',
-      },
-      {
-        id: 1,
-        imgSrc: getAssetURL('fire/smoke.svg'),
-        label: '喷气1',
-        value: '正常',
-      },
-      {
-        id: 2,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气2',
-        value: '正常',
-      },
-      {
-        id: 3,
-        imgSrc: getAssetURL('fire/warn.svg'),
-        label: '喷气3',
-        value: '正常',
-      },
-    ],
-  },
-  {
-    fq: '3防区',
-    btnText: '开启灭火器',
-    label: '喷气',
-    value: '正常',
-    contentList: [
-      {
-        id: 0,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气',
-        value: '正常',
-      },
-      {
-        id: 1,
-        imgSrc: getAssetURL('fire/smoke.svg'),
-        label: '喷气1',
-        value: '正常',
-      },
-      {
-        id: 2,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气2',
-        value: '正常',
-      },
-      {
-        id: 3,
-        imgSrc: getAssetURL('fire/warn.svg'),
-        label: '喷气3',
-        value: '正常',
-      },
-    ],
-  },
-  {
-    fq: '1防区',
-    btnText: '开启灭火器',
-    label: '喷气',
-    value: '正常',
-    contentList: [
-      {
-        id: 0,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气',
-        value: '正常',
-      },
-      {
-        id: 1,
-        imgSrc: getAssetURL('fire/smoke.svg'),
-        label: '喷气1',
-        value: '正常',
-      },
-      {
-        id: 2,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气2',
-        value: '正常',
-      },
-      {
-        id: 3,
-        imgSrc: getAssetURL('fire/warn.svg'),
-        label: '喷气3',
-        value: '正常',
-      },
-    ],
-  },
-  {
-    fq: '2防区',
-    btnText: '开启灭火器',
-    label: '喷气',
-    value: '正常',
-    contentList: [
-      {
-        id: 0,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气',
-        value: '正常',
-      },
-      {
-        id: 1,
-        imgSrc: getAssetURL('fire/smoke.svg'),
-        label: '喷气1',
-        value: '正常',
-      },
-      {
-        id: 2,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气2',
-        value: '正常',
-      },
-      {
-        id: 3,
-        imgSrc: getAssetURL('fire/warn.svg'),
-        label: '喷气3',
-        value: '正常',
-      },
-    ],
-  },
-  {
-    fq: '3防区',
-    btnText: '开启灭火器',
-    label: '喷气',
-    value: '正常',
-    contentList: [
-      {
-        id: 0,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气',
-        value: '正常',
-      },
-      {
-        id: 1,
-        imgSrc: getAssetURL('fire/smoke.svg'),
-        label: '喷气1',
-        value: '正常',
-      },
-      {
-        id: 2,
-        imgSrc: getAssetURL('fire/fire.svg'),
-        label: '喷气2',
-        value: '正常',
-      },
-      {
-        id: 3,
-        imgSrc: getAssetURL('fire/warn.svg'),
-        label: '喷气3',
-        value: '正常',
-      },
-    ],
-  },
-];
-
-//外应火灾井下消防材料库标题列表1
-export const tabList1 = [
-  { id: 0, label: '综采工作面温度监测', details: '设备类型名称' },
-  { id: 1, label: '掘进工作面监测', details: '设备类型名称' },
-  { id: 2, label: '运输系统烟雾传感器监测', details: '设备类型名称' },
-  { id: 3, label: '机电硐室及配电点温度监测', details: '设备类型名称' },
-];
-//综采温度table列
-export const columnWd = [
-  { rowIndex: 1, dataIndex: 'nodePlacement', title: '测点位置', align: 'center', width: '210px', type: '1' },
-  { rowIndex: 2, dataIndex: 'detectValue', title: '温度(℃)', align: 'center', type: '1' },
-  { rowIndex: 3, dataIndex: 'warningMsg', title: '预警级别', align: 'center', type: '1' },
-  { rowIndex: 4, dataIndex: 'dateTime', title: '时间', align: 'center', type: '1' },
-];
-//掘进监测table列
-export const columnsJj = [
-  { rowIndex: 1, dataIndex: 'name', title: '测点位置', align: 'center', width: '180px', type: '1' },
-  { rowIndex: 2, dataIndex: 'co', title: 'CO浓度(%)', align: 'center', type: '1' },
-  { rowIndex: 3, dataIndex: 'wd', title: '温度(℃)', align: 'center', type: '1' },
-  { rowIndex: 4, dataIndex: 'warningMsg', title: '预警级别', align: 'center', type: '1' },
-  { rowIndex: 5, dataIndex: 'dateTime', title: '时间', align: 'center', width: '180px', type: '1' },
-];
-//运输烟雾table列
-export const columnsYw = [
-  { rowIndex: 1, dataIndex: 'nodePlacement', title: '测点位置', align: 'center', width: '180px', type: '1' },
-  { rowIndex: 2, dataIndex: 'detectValue', title: '温度(℃)', align: 'center', type: '1' },
-  { rowIndex: 3, dataIndex: 'warningMsg', title: '预警级别', align: 'center', type: '1' },
-  { rowIndex: 4, dataIndex: 'dateTime', title: '时间', align: 'center', width: '180px', type: '1' },
-];
-//机电硐室table列
-export const columnsJd = [
-  { rowIndex: 1, dataIndex: 'nodePlacement', title: '测点位置', align: 'center', width: '180px', type: '1' },
-  { rowIndex: 2, dataIndex: 'detectValue', title: '温度(℃)', align: 'center', type: '1' },
-  { rowIndex: 3, dataIndex: 'warningMsg', title: '预警级别', align: 'center', type: '1' },
-  { rowIndex: 4, dataIndex: 'dateTime', title: '时间', align: 'center', width: '180px', type: '1' },
-];
-
-//粉尘
-
-//中间区域数据-粉尘
-export const centerAreaListT = [
-  { id: 0, label: '粉尘浓度(mg/m³)' },
-  { id: 1, label: '总尘浓度(%)' },
-  { id: 2, label: '呼尘加权容许浓度(mg/m³)' },
-  { id: 3, label: '喷雾状态' },
-];
-//中间区域数据-通风
-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: '',
-  },
-];

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

@@ -1,302 +0,0 @@
-<template>
-  <div class="dustPage">
-    <div class="top-area">
-      <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
-        <div class="top-title">{{ item.title }}</div>
-        <div class="top-content">
-          <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
-            <span class="item-label">{{ items.label }}</span>
-            <span class="item-value">{{ items.value }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="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>
-</template>
-
-<script lang="ts" setup>
-  import { ref, reactive, watch, defineProps } from 'vue';
-  import echartLine from './common/echartLine.vue';
-
-  let props = defineProps({
-    listData: Object,
-  });
-
-  let maxY = ref(0);
-  //顶部区域数据
-  let topAreaList = reactive<any[]>([]);
-
-  //顶部区域激活选项
-  let activeIndex = ref(0);
-
-  let choiceData = reactive<any[]>([]);
-
-  //粉尘图表数据
-  let echartDataFc = reactive({
-    maxData: {
-      lengedData: '粉尘浓度(mg/m³)',
-      data: [],
-    },
-    // minData: {
-    //     lengedData: '粉尘呼尘占比(%)',
-    //     data: []
-    // },
-    // aveValue: {
-    //     lengedData: '总尘浓度',
-    //     data: []
-    // },
-    xData: [],
-  });
-  let echartDw = ref('(mg/m³)');
-
-  //顶部区域选项切换
-  function topAreaClick(index) {
-    activeIndex.value = index;
-    echartDataFc.maxData.data.length = 0;
-    // echartDataFc.minData.data.length = 0
-    // echartDataFc.aveValue.data.length = 0
-    echartDataFc.xData.length = 0;
-    choiceData[index].history.forEach((el) => {
-      echartDataFc.maxData.data.push(el.dustval);
-      // echartDataFc.minData.data.push(el.ratio)
-      // echartDataFc.aveValue.data.push(el.totalDust)
-      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);
-  }
-
-  watch(
-    () => props.listData,
-    (val) => {
-      topAreaList.length = 0;
-      echartDataFc.maxData.data.length = 0;
-      // echartDataFc.minData.data.length = 0
-      // echartDataFc.aveValue.data.length = 0
-      echartDataFc.xData.length = 0;
-      if (JSON.stringify(val.common) != '{}') {
-        // let dustList = val.common.dust.slice(0, 3);
-        val.common.dust.forEach((el) => {
-          topAreaList.push({
-            title: el.strinstallpos,
-            content: [
-              // { ids: 0, label: '温度(°C)', value: (Math.random() * (21 - 20) + 20).toFixed(2) },
-              // { ids: 1, label: '粉尘浓度(mg/m³)', value: (Math.random() * (0.4 - 0.3) + 0.3).toFixed(2) },
-              // { ids: 2, label: '喷雾水压(MPa)', value: (Math.random() * (0.6 - 0.5) + 0.5).toFixed(2) },
-              // { ids: 3, label: '喷雾状态', value: '正常' },
-              { 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 = val.common.dust;
-
-        if (choiceData[activeIndex.value]) {
-          choiceData[activeIndex.value].history.forEach((el) => {
-            echartDataFc.maxData.data.push(el.dustval);
-            // echartDataFc.minData.data.push(el.ratio)
-            // echartDataFc.aveValue.data.push(el.totalDust)
-            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.minData.data.push(el.ratio)
-            // echartDataFc.aveValue.data.push(el.totalDust)
-            echartDataFc.xData.push(el.time);
-          });
-          let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
-            return acr > cur ? acr : cur;
-          });
-          maxY.value = formatRoundNum(max1 * 1.5);
-        }
-      }
-    },
-    { deep: true }
-  );
-</script>
-
-<style lang="less" scoped>
-  .dustPage {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-
-    .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: 2%;
-          font-size: 16px;
-          transform: translate(-50%, 0);
-        }
-
-        .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: 12px;
-            }
-
-            .item-value {
-              position: absolute;
-              right: 14%;
-              top: 50%;
-              transform: translate(0, -44%);
-              // font-size: 12px;
-              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: 2%;
-          font-size: 16px;
-          transform: translate(-50%, 0);
-        }
-
-        .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%);
-              // font-size: 12px;
-            }
-
-            .item-value {
-              position: absolute;
-              right: 14%;
-              top: 50%;
-              transform: translate(0, -44%);
-              // font-size: 12px;
-              font-family: 'douyuFont';
-              color: #3df6ff;
-            }
-          }
-        }
-      }
-    }
-
-    .bot-area {
-      height: calc(76% - 10px);
-      padding: 10px 15px;
-      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: 16px;
-        }
-      }
-      .echart-boxd {
-        width: 100%;
-        height: calc(100% - 40px);
-      }
-    }
-  }
-</style>

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

@@ -1,582 +0,0 @@
-<template>
-  <div class="gasPage">
-    <div class="top-area" v-if="topAreaListWs.length != 0">
-      <div class="title-t">
-        <div class="text-t">瓦斯抽采泵信息</div>
-      </div>
-
-      <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 && 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
-              }}</span
-            >
-          </div>
-        </div>
-      </div>
-
-      <!-- <div class="bt-box">
-          <div
-            :class="{
-              'box-value': warnText == 0,
-              'box-value1': warnText == 101,
-              'box-value2': warnText == 102,
-              'box-value3': warnText == 103,
-              'box-value4': warnText == 104,
-              'box-value5': warnText == 201,
-            }"
-            >{{
-              warnText == 0
-                ? '正常'
-                : warnText == 101
-                  ? '较低风险'
-                  : warnText == 102
-                    ? '低风险'
-                    : warnText == 103
-                      ? '中风险'
-                      : warnText == 104
-                        ? '高风险'
-                        : warnText == 201
-                          ? '报警'
-                          : warnText
-            }}</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>
-</template>
-
-<script lang="ts" setup>
-  import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
-
-  let props = defineProps({
-    listData: Object,
-  });
-
-  //瓦斯顶部区域数据
-  let topAreaListWs = reactive<any[]>([]);
-
-  //瓦斯监控列表数据
-  let cardListWs = reactive<any[]>([]);
-
-  let warnText = ref(0);
-
-  watch(
-    () => props.listData,
-    (val) => {
-      console.log(val, '瓦斯详情数据-------');
-      topAreaListWs.length = 0;
-      cardListWs.length = 0;
-      if (JSON.stringify(val.common) != '{}') {
-        warnText.value = val.common.pump.length != 0 && val.common.pump[0].warnLevel != null ? val.common.pump[0].warnLevel : 0;
-        console.log(warnText.value, ' warnText.value-------');
-        val.common.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 : '-' },
-            ],
-          });
-        });
-
-        val.common.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 },
-            ],
-          });
-        });
-      }
-    },
-    { immediate: true, deep: true }
-  );
-</script>
-
-<style lang="less" scoped>
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
-  }
-
-  .gasPage {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-
-    .top-area {
-      height: 356px;
-      margin-bottom: 10px;
-      padding: 10px 15px;
-      // display: flex;
-      // justify-content: space-between;
-      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: 16px;
-        }
-      }
-
-      .top-box {
-        position: relative;
-        width: 724px;
-        height: 276px;
-        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: 24px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          word-wrap: break-word;
-        }
-
-        .box-values {
-          position: absolute;
-          left: 50%;
-          top: 26px;
-          transform: translate(-50%, 0);
-          width: 84%;
-          // height: 26px;
-          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;
-
-            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 {
-      // width: 400px;
-      height: calc(100% - 356px);
-      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: 16px;
-        }
-      }
-
-      .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;
-              transform: translate(-50%, 0);
-            }
-
-            .value-l {
-              position: absolute;
-              left: 50%;
-              top: 50px;
-              transform: translate(-50%, 0);
-              font-family: 'douyuFont';
-              font-size: 16px;
-              color: #3df6ff;
-            }
-          }
-
-          @media screen and (max-width: 1920px) {
-            .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;
-
-                  &:first-child {
-                    display: inline-block;
-                    width: 68px;
-                  }
-
-                  &:last-child {
-                    display: inline-block;
-                    width: calc(100% - 68px);
-                  }
-                }
-
-                .status-f {
-                  color: #ff0000;
-                }
-
-                .status-l {
-                  color: #3df6ff;
-                }
-              }
-            }
-          }
-
-          @media screen and (min-width: 1921px) and (max-width: 2560px) {
-            .item-r {
-              position: absolute;
-              left: 138px;
-              top: 50%;
-              transform: translate(0, -50%);
-              width: calc(100% - 138px);
-              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;
-
-                  &: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: 16px;
-        }
-
-        // .select-b {
-        //     display: flex;
-        //     justify-content: flex-start;
-        //     align-items: center;
-        // }
-      }
-
-      .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;
-              transform: translate(-50%, 0);
-            }
-
-            .value-l {
-              position: absolute;
-              left: 50%;
-              top: 50px;
-              transform: translate(-50%, 0);
-              font-family: 'douyuFont';
-              font-size: 16px;
-              color: #3df6ff;
-            }
-          }
-
-          @media screen and (max-width: 1920px) {
-            .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;
-
-                  &:first-child {
-                    display: inline-block;
-                    width: 68px;
-                  }
-
-                  &:last-child {
-                    display: inline-block;
-                    width: calc(100% - 68px);
-                  }
-                }
-
-                .status-f {
-                  color: #ff0000;
-                }
-
-                .status-l {
-                  color: #3df6ff;
-                }
-              }
-            }
-          }
-
-          @media screen and (min-width: 1921px) and (max-width: 2560px) {
-            .item-r {
-              position: absolute;
-              left: 138px;
-              top: 50%;
-              transform: translate(0, -50%);
-              width: calc(100% - 138px);
-              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;
-
-                  &: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/fire/ventilate.vue

@@ -1,373 +0,0 @@
-<template>
-  <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>
-</template>
-
-<script lang="ts" setup>
-import { ref, nextTick, reactive, watch, defineProps } from 'vue';
-import { centerAreaListT1, centerAreaListB1 } from '../fire.data';
-import echartLine from './common/echartLine.vue';
-
-let props = defineProps({
-  listData: Object,
-});
-
-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: [],
-});
-
-
-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)
-}
-
-
-
-
-watch(
-  () => props.listData,
-  (val) => {
-    console.log(val, '详情数据');
-    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(val.common) != '{}') {
-      if (val.common.warnDevices.length != 0) {
-        val.common.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: val.common.warnLevel || '正常',
-            },
-            { ids: 2, label: '报警描述', value: '--' },
-          ],
-        });
-      }
-
-      centerAreaListB1[0].content = val.common.jin || '--';
-      centerAreaListB1[1].content = val.common.hui || '--';
-      centerAreaListB1[2].content = val.common.xufengliang || '--';
-
-      if (val.common.history.length != 0) {
-        val.common.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)
-    }
-  },
-  { deep: true, immediate: true }
-);
-</script>
-
-<style lang="less" scoped>
-.dustPage {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  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: 2%;
-        font-size: 16px;
-        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%;
-          background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-          background-size: 82% 54%;
-
-          .item-label {
-            position: absolute;
-            left: 16%;
-            top: 50%;
-            transform: translate(0, -44%);
-          }
-
-          .item-value {
-            position: absolute;
-            right: 16%;
-            top: 50%;
-            transform: translate(0, -32%);
-            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: 16px;
-      }
-    }
-
-    .echart-boxd {
-      width: 100%;
-      height: calc(100% - 30px);
-    }
-
-  }
-
-}
-</style>

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

@@ -50,15 +50,8 @@
             </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"
-          />
+          <BarSingle :xAxisData="xAxisData" :dataSource="windData.levels" height="225px" :chartsColumns="chartsColumns"
+            :option="option" :color="colors" :fontColor="fontColor" />
         </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
@@ -74,34 +67,30 @@
                 </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
+                <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
-                >
+                        ? '一般风险'
+                        : item.level == 103
+                          ? '较大风险'
+                          : item.level == 104
+                            ? '较大风险'
+                            : item.level == 201
+                              ? '报警'
+                              : '未连接'
+                }}</div>
               </div>
             </template>
           </div>
@@ -111,28 +100,21 @@
     <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="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">
+            <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"
+                <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"
-                />
+                  transform="translate(755.808 140.636)" fill="#28a6ff" opacity="0.7" />
               </g>
             </svg>
           </div>
@@ -140,14 +122,9 @@
             <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"
+                <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"
-                />
+                  transform="translate(722.572 159.023)" fill="#3dd8ff" opacity="0.5" />
               </g>
             </svg>
           </div>
@@ -156,18 +133,18 @@
               centerData.levels == 101
                 ? '低风险'
                 : centerData.levels == 102
-                ? '一般风险'
-                : centerData.levels == 103
-                ? '较大风险'
-                : centerData.levels == 104
-                ? '重大风险'
-                : centerData.levels == 201
-                ? '报警'
-                : // : centerData.levels == 0
-                  // ? '正常'
-                  // : centerData.levels == 10000
-                  // ? '正常'
-                  '低风险'
+                  ? '一般风险'
+                  : centerData.levels == 103
+                    ? '较大风险'
+                    : centerData.levels == 104
+                      ? '重大风险'
+                      : centerData.levels == 201
+                        ? '报警'
+                        : // : centerData.levels == 0
+                        // ? '正常'
+                        // : centerData.levels == 10000
+                        // ? '正常'
+                        '低风险'
             }}</div>
             <div class="text2">风险分析</div>
           </div>
@@ -181,7 +158,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">火灾预警监测</span>
-              <span :class="centerData.fire ? 'value' : 'value1'">{{ centerData.fire == '正常' ? '低风险' : centerData.fire }}</span>
+              <span :class="centerData.fire ? 'value' : 'value1'">{{ centerData.fire == '正常' ? '低风险' : centerData.fire
+                }}</span>
             </div>
           </div>
           <div class="item item2">
@@ -190,7 +168,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">设备预警监测</span>
-              <span :class="centerData.sb ? 'value' : 'value1'">{{ centerData.sb == '正常' ? '低风险' : centerData.sb }}</span>
+              <span :class="centerData.sb ? 'value' : 'value1'">{{ centerData.sb == '正常' ? '低风险' : centerData.sb
+                }}</span>
             </div>
           </div>
           <div class="item item3">
@@ -199,7 +178,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">粉尘预警监测</span>
-              <span :class="centerData.fc ? 'value' : 'value1'">{{ centerData.fc == '正常' ? '低风险' : centerData.fc }}</span>
+              <span :class="centerData.fc ? 'value' : 'value1'">{{ centerData.fc == '正常' ? '低风险' : centerData.fc
+                }}</span>
             </div>
           </div>
           <div class="item item4">
@@ -208,7 +188,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">瓦斯预警监测</span>
-              <span :class="centerData.ws ? 'value' : 'value1'">{{ centerData.ws == '正常' ? '低风险' : centerData.ws }}</span>
+              <span :class="centerData.ws ? 'value' : 'value1'">{{ centerData.ws == '正常' ? '低风险' : centerData.ws
+                }}</span>
               <div class="">
                 <span class="title">矿井瓦斯鉴定等级监测</span>
                 <span class="value">低瓦斯</span>
@@ -221,7 +202,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">通风预警监测</span>
-              <span :class="centerData.tf ? 'value' : 'value1'">{{ centerData.tf == '正常' ? '低风险' : centerData.tf }}</span>
+              <span :class="centerData.tf ? 'value' : 'value1'">{{ centerData.tf == '正常' ? '低风险' : centerData.tf
+                }}</span>
             </div>
           </div>
         </div>
@@ -232,17 +214,15 @@
           <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 :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>
@@ -259,7 +239,9 @@
                 '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="value1"> {{ !item.value && item.value != '0' ? '-' : item.value == '正常' ? '低风险' : item.value }} </div>
+              <div class="value1"> {{ !item.value && item.value != '0' ? '-' : item.value == '正常' ? '低风险' : item.value
+                }}
+              </div>
               <div class="title">{{ item.title }}</div>
             </div>
           </div>
@@ -313,1199 +295,1188 @@
             </div>
           </div> -->
 
-          <BarSingle
-            :xAxisData="xAxisData"
-            :dataSource="dustData.levels"
-            height="332px"
-            :chartsColumns="chartsColumns"
-            :option="option"
-            :color="colors"
-            :fontColor="fontColor"
-          />
+          <BarSingle :xAxisData="xAxisData" :dataSource="dustData.levels" height="332px" :chartsColumns="chartsColumns"
+            :option="option" :color="colors" :fontColor="fontColor" />
         </template>
       </ventBox1>
     </div>
   </div>
-  <DetailModal v-if="isShowDialog == 'table'" v-model:visible="modalVisible" @register="register" @close="hideModal" />
-  <!-- 火灾监测弹框 -->
-  <DetailModalFire v-if="isShowDialog == 'others'" v-model:visible="modalVisible" @register="register" :moduleObj="moduleObj" @close="hideModal" />
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, reactive } from 'vue';
-  import customHeader from '/@/components/vent/customHeader.vue';
-  import DetailModal from './DetailModal.vue';
-  import DetailModalFire from './DetailModalFire.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';
-  import { useModal } from '/@/components/Modal';
-
-  let isShowDialog = ref(''); //切换弹窗显示
-  let moduleObj = reactive({
-    ids: 0,
-    moduleName: '',
-  }); //火灾、粉尘、瓦斯模块名
-  const alarmCounts = ref();
-  const modalVisible = ref(false);
-
-  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,
-  };
-  const [register, { openModal }] = useModal();
-
-  function showModal(data) {
-    isShowDialog.value = data == 'sbyj' ? 'table' : 'others';
-    moduleObj.ids = new Date().getTime();
-    moduleObj.moduleName = data;
-    modalVisible.value = true;
-    openModal();
+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')
+      break;
+    case 'fire':
+      router.push('/fire/warn')
+      break;
+    case 'dust':
+      router.push('/dust/warn')
+      break;
+    case 'gas':
+      router.push('/gas/warn')
+      break;
+    case 'sbyj':
+      router.push('/device/warn')
+      break;
   }
-
-  function hideModal() {
-    modalVisible.value = false;
+}
+
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag = false) {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = setTimeout(
+      async () => {
+        // await getDataSource();
+        await getList();
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      },
+      flag ? 0 : 10000
+    );
   }
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(flag = false) {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      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);
     }
-  }
-
-  // 获取预警数据
-  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 &&
+  });
+  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 &&
+      ? '正常'
+      : '-';
+  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].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');
+      ? '正常'
+      : '-';
+  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].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 });
   });
-
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
+}
+
+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; // 坐标点的数目(数目越大，动画越精细)
+@import '/@/design/vent/color.less';
+@a: 370px; // 椭圆x轴半径(长半径)
+@b: 107px; // 椭圆y轴半径(短半径)
+@s: 40; // 坐标点的数目(数目越大，动画越精细)
 
-  @bg: #e6e2df;
+@bg: #e6e2df;
 
-  .loop(@index) when (@index < @s + 1) {
-    .loop((@index + 1));
-    @keyframeSel: @index * 100% ./ @s;
+.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)));
-    }
+  @{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;
+.sensor-container {
+  width: 100%;
+  height: calc(100% - 86px);
+  display: flex;
+  position: relative;
+  top: 78px;
 
-    .lr {
-      width: 650px;
-      height: 100%;
+  .lr {
+    width: 650px;
+    height: 100%;
 
-      // background-color: #ffffff10;
-    }
+    // background-color: #ffffff10;
+  }
 
-    .left-box {
-      .vent-param {
-        width: 100%;
-        margin-top: 10px;
+  .left-box {
+    .vent-param {
+      width: 100%;
+      margin-top: 10px;
 
-        .light-group {
+      .light-group {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        position: relative;
+
+        .param-item {
+          width: 150px;
           display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          position: relative;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          position: reactive;
+
+          .icon {
+            display: block;
+            position: absolute;
+            top: -5px;
+          }
 
-          .param-item {
-            width: 150px;
+          .param {
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            position: reactive;
 
-            .icon {
-              display: block;
-              position: absolute;
-              top: -5px;
-            }
-
-            .param {
+            .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-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;
+              .param-title {
                 position: relative;
-                top: -20px;
-                margin-top: 10px;
-
-                .param-title {
-                  position: relative;
-                  top: -4px;
-                }
+                top: -4px;
+              }
 
-                .param-unit {
-                  position: relative;
-                  top: -2px;
-                  font-size: 12px;
-                }
+              .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-box {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
+              .param-val-icon {
+                width: 2px;
+                height: 15px;
+                background: #00d8ff;
                 position: relative;
-                top: -20px;
 
-                .param-val-icon {
-                  width: 2px;
-                  height: 15px;
+                &::after {
+                  content: '';
+                  display: block;
+                  position: absolute;
+                  width: 6px;
+                  height: 6px;
+                  border-radius: 3px;
                   background: #00d8ff;
-                  position: relative;
-
-                  &::after {
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    width: 6px;
-                    height: 6px;
-                    border-radius: 3px;
-                    background: #00d8ff;
-                    bottom: -2px;
-                    left: -2px;
-                  }
+                  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;
+              .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;
-
-                  &::after {
-                    width: calc(100% - 4px);
-                    height: calc(100% - 4px);
-                    content: '';
-                    position: absolute;
-                    top: 2px;
-                    left: 2px;
-                    display: block;
-                    border: 1px solid #006ea6;
-                  }
+                  left: 2px;
+                  display: block;
+                  border: 1px solid #006ea6;
                 }
               }
             }
           }
         }
       }
+    }
 
-      .icons-box {
-        display: flex;
-        flex-wrap: wrap;
-        // max-height: 365px;
-        height: 365px;
-        overflow-y: hidden;
+    .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;
+        // }
+      }
 
-        // align-items: start ;
-        &:hover {
-          overflow-y: auto;
-          overflow-x: auto;
+      .icon-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3px;
+        // animation: move 10s linear infinite;
 
-          // &>.icon-item {
-          //   animation-play-state: paused;
-          //   animation: move1 2s linear;
-          // }
+        &:nth-child(even) {
+          padding-right: 0px;
         }
 
-        .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 {
+          position: absolute;
+          top: 51px;
+          right: 25px;
+          color: #fff;
+          font-family: 'douyuFont';
+          font-size: 12px;
+        }
 
-          .level-text-1 {
-            color: rgb(0, 242, 255);
-            text-shadow: 2px 2px 4px #001c22;
-          }
+        .level-text-0 {
+          color: rgb(145, 230, 9);
+          text-shadow: 2px 2px 4px #001c22;
+        }
 
-          .level-text-2 {
-            color: #ffff35;
-            text-shadow: 2px 2px 4px #313100;
-          }
+        .level-text-1 {
+          color: rgb(0, 242, 255);
+          text-shadow: 2px 2px 4px #001c22;
+        }
 
-          .level-text-3 {
-            color: #ffbe69;
-            text-shadow: 2px 2px 4px #271600;
-          }
+        .level-text-2 {
+          color: #ffff35;
+          text-shadow: 2px 2px 4px #313100;
+        }
 
-          .level-text-4 {
-            color: #ff6f00;
-            // color: #09caff;
-            text-shadow: 2px 2px 4px #060200;
-          }
+        .level-text-3 {
+          color: #ffbe69;
+          text-shadow: 2px 2px 4px #271600;
+        }
 
-          .level-text-5 {
-            color: #ff0000;
-            text-shadow: 2px 2px 4px #200000;
-          }
+        .level-text-4 {
+          color: #ff6f00;
+          // color: #09caff;
+          text-shadow: 2px 2px 4px #060200;
+        }
 
-          .level-text-6 {
-            color: #bbb;
-            text-shadow: 2px 2px 4px #001c22;
-          }
+        .level-text-5 {
+          color: #ff0000;
+          text-shadow: 2px 2px 4px #200000;
+        }
 
-          img {
-            width: 225px;
-            height: 79px;
-          }
+        .level-text-6 {
+          color: #bbb;
+          text-shadow: 2px 2px 4px #001c22;
         }
 
-        .wrapper {
-          position: absolute;
-          top: 48px;
-          left: 82px;
-          color: #ffffffe0;
-          font-size: 13px;
-          text-align: center;
-          letter-spacing: 1px;
+        img {
+          width: 225px;
+          height: 79px;
         }
       }
 
-      @keyframes move {
-        0% {
-          transform: translateY(0px);
-        }
+      .wrapper {
+        position: absolute;
+        top: 48px;
+        left: 82px;
+        color: #ffffffe0;
+        font-size: 13px;
+        text-align: center;
+        letter-spacing: 1px;
+      }
+    }
 
-        100% {
-          transform: translateY(-269px);
-        }
+    @keyframes move {
+      0% {
+        transform: translateY(0px);
       }
 
-      @keyframes move1 {
-        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;
 
-    .center-box {
-      width: calc(100% - 710px);
-      // background-color: #ffffff10;
-      margin: 0 8px;
+    .fire-monitor {
       display: flex;
       flex-direction: column;
-      justify-content: flex-end;
+      width: 100%;
+      position: relative;
 
-      .fire-monitor {
-        display: flex;
-        flex-direction: column;
+      .top {
         width: 100%;
-        position: relative;
+        height: 35px;
+        background: url('/@/assets/images/vent/box-top-bg.png');
+        background-size: 100% 100%;
+        text-align: center;
+        color: #fff;
+        padding-top: 6px;
+      }
 
-        .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);
         }
 
-        .container {
-          width: calc(100% - 2px);
-          min-height: 50px;
-          padding: 0 10px;
-          color: #fff;
-          background-color: #00213236;
-          backdrop-filter: blur(5px);
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          right: 0;
+          top: 5px;
+          width: 1px;
+          height: calc(100% - 10px);
+          background: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+        }
 
-          &::before {
-            content: '';
-            display: block;
-            position: absolute;
-            top: 5px;
-            left: 0;
-            width: 1px;
-            height: calc(100% - 10px);
-            background-image: 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;
 
-          &::after {
+          &::before {
             content: '';
-            display: block;
+            width: 100%;
+            height: 150px;
             position: absolute;
-            right: 0;
-            top: 5px;
-            width: 1px;
-            height: calc(100% - 10px);
-            background: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+            top: 0px;
+            background: url('/@/assets/images/vent/fire-bg-top.png');
+            background-size: 100% 100%;
           }
 
-          .item {
-            height: 130px;
-            width: 100%;
+          .icon {
+            width: 82px;
+            height: 36px;
+            margin: 0 20px 0 50px;
+            background: url('/@/assets/images/vent/icon-bottom-bg.png');
             position: relative;
-            top: -10px;
-            display: flex;
-            // justify-content: space-between;
-            align-content: center;
-            padding-top: 50px;
+            top: 30px;
 
-            &::before {
-              content: '';
-              width: 100%;
-              height: 150px;
+            &::after {
               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;
-              }
+              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;
+          .data-box {
+            display: flex;
+            flex-direction: column;
+            // margin: 0 10px;
+            width: 118px;
 
-              .value {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                color: #2bdcff;
-                margin-bottom: 5px;
-              }
+            .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);
-              }
+            .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);
-              }
+            .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;
-              }
+            .value3 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ffff35;
+            }
 
-              .value4 {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ffbe69;
-              }
+            .value4 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ffbe69;
+            }
 
-              .value5 {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff6f00;
-              }
+            .value5 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ff6f00;
+            }
 
-              .value6 {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff0000;
-              }
+            .value6 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ff0000;
+            }
 
-              .title {
-                font-size: 13px;
-              }
+            .title {
+              font-size: 13px;
             }
           }
+        }
 
-          .item1 {
-            top: -10px;
+        .item1 {
+          top: -10px;
 
-            &::before {
-              transform: matrix(1, 0, 0, -1, 0, 0);
-            }
+          &::before {
+            transform: matrix(1, 0, 0, -1, 0, 0);
+          }
 
-            .icon {
-              &::after {
-                background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
-              }
+          .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;
-        }
+      .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;
+    .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 {
+      .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;
         }
 
-        .bottom {
-          width: 528px;
-          height: 395px;
-          background-repeat: no-repeat;
+        .animation1 {
+          width: 390px;
+          height: 78px;
           position: absolute;
+          top: -30px;
+          left: 80px;
           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;
+          // animation: rotate3 3s linear infinite;
+          .ball {
             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'
+            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;
-            }
+            animation: 10s linear 0s infinite alternate ball;
           }
+        }
 
-          .animation2 {
-            width: 430px;
-            height: 92px;
-            position: absolute;
-            top: 0px;
-            left: 60px;
-            z-index: 999;
+        .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: 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;
-            }
+            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;
-            }
+        .text-box {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          color: #fff;
+          align-items: center;
+          margin-top: 90px;
 
-            .text2 {
-              font-size: 18px;
-              color: #ffffffdd;
-            }
+          .text1 {
+            font-size: 26px;
+            font-weight: 600;
+            letter-spacing: 2px;
+            margin-bottom: 10px;
           }
 
-          .icon-animation {
-            width: 178px;
-            height: 208px;
-            margin: 0 auto;
-            top: -130px;
-            left: 4px;
-            position: relative;
-            animation: 0.5s linear 0s infinite alternate iconMove;
+          .text2 {
+            font-size: 18px;
+            color: #ffffffdd;
           }
         }
 
-        .bottom1 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
+        .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');
-          }
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
+        }
 
-          .text-box {
-            .text1 {
-              color: #00d8ff;
-            }
+        .text-box {
+          .text1 {
+            color: #00d8ff;
           }
         }
+      }
 
-        .bottom2 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
+      .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');
-          }
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
+        }
 
-          .text-box {
-            .text1 {
-              color: #fcfc22;
-            }
+        .text-box {
+          .text1 {
+            color: #fcfc22;
           }
         }
+      }
 
-        .bottom3 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
+      .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');
-          }
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
+        }
 
-          .text-box {
-            .text1 {
-              color: #ff7010;
-            }
+        .text-box {
+          .text1 {
+            color: #ff7010;
           }
         }
+      }
 
-        .bottom4 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
+      .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');
-          }
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
+        }
 
-          .text-box {
-            .text1 {
-              color: #df4e43;
-            }
+        .text-box {
+          .text1 {
+            color: #df4e43;
           }
         }
+      }
 
-        .bottom5 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
+      .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');
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
+        }
+
+        .text-box {
+          .text1 {
+            color: #ff2313;
+            // animation: color-blink 1s infinite;
           }
 
-          .text-box {
-            .text1 {
-              color: #ff2313;
-              // animation: color-blink 1s infinite;
-            }
+          // @keyframes color-blink {
+          //   0% { color: red; }
+          //   50% { color: blue; }
+          //   100% { color: red; }
+          // }
+        }
+      }
 
-            // @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;
         }
 
-        .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;
+        .item {
+          position: absolute;
 
-          &::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;
-          }
+          // width: 107px;
+          // height: 107px;
+          // left: 120px;
+          // top: 115px;
+          // animation: red-ball 10s linear infinite;
+          .icon-box {
+            width: 100px;
+            height: 100px;
 
-          .item {
-            position: absolute;
+            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;
+            }
 
-            // width: 107px;
-            // height: 107px;
-            // left: 120px;
-            // top: 115px;
-            // animation: red-ball 10s linear infinite;
-            .icon-box {
+            .icon {
               width: 100px;
               height: 100px;
-
+              background-repeat: no-repeat;
+              background-position: top center;
               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;
-              }
+              top: 5px;
+            }
+          }
 
-              &::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;
-              }
+          .item-monitor-box {
+            color: #fff;
+            position: relative;
+            top: -135px;
+            left: -20px;
+            font-weight: 600;
+            // background: #06020066;
+            padding: 5px 20px 8px 20px;
 
-              .icon {
-                width: 100px;
-                height: 100px;
-                background-repeat: no-repeat;
-                background-position: top center;
-                position: relative;
-                top: 5px;
-              }
+            &::before {
+              position: absolute;
+              content: '';
+              width: 196px;
+              height: 48px;
+              left: -20px;
+              top: -10px;
+              background: url('/@/assets/images/vent/alarm/data-bg.png');
             }
 
-            .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;
+            }
 
-              .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;
+            }
 
-              .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;
               }
 
-              @keyframes color-blink {
-                0% {
-                  color: red;
-                }
-
-                50% {
-                  color: rgb(198, 0, 0);
-                }
+              50% {
+                color: rgb(198, 0, 0);
+              }
 
-                100% {
-                  color: rgb(255, 18, 18);
-                }
+              100% {
+                color: rgb(255, 18, 18);
               }
             }
           }
+        }
 
-          .item1 {
-            top: 230px;
-            left: 150px;
+        .item1 {
+          top: 230px;
+          left: 150px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
           }
+        }
 
-          .item2 {
-            top: 185px;
-            left: -120px;
+        .item2 {
+          top: 185px;
+          left: -120px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
           }
+        }
 
-          .item3 {
-            top: 185px;
-            left: 420px;
+        .item3 {
+          top: 185px;
+          left: 420px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
           }
+        }
 
-          .item4 {
-            top: 20px;
-            left: 390px;
+        .item4 {
+          top: 20px;
+          left: 390px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
+          }
 
-            .item-monitor-box {
-              top: -155px;
+          .item-monitor-box {
+            top: -155px;
 
-              &::before {
-                top: 10px;
-              }
+            &::before {
+              top: 10px;
             }
           }
+        }
 
-          .item5 {
-            top: 25px;
-            left: -110px;
+        .item5 {
+          top: 25px;
+          left: -110px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
           }
         }
+      }
 
-        @keyframes iconMove {
-          100% {
-            opacity: 0;
-          }
+      @keyframes iconMove {
+        100% {
+          opacity: 0;
         }
+      }
 
-        @keyframes rotate1 {
-          0% {
-            transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
-          }
+      @keyframes rotate1 {
+        0% {
+          transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
+        }
 
-          100% {
-            transform: translateX(0%) rotateX(72deg) rotateZ(0);
-          }
+        100% {
+          transform: translateX(0%) rotateX(72deg) rotateZ(0);
         }
+      }
 
-        @keyframes rotate2 {
-          0% {
-            transform: translateX(0%) rotateX(70deg) rotateZ(0);
-          }
+      @keyframes rotate2 {
+        0% {
+          transform: translateX(0%) rotateX(70deg) rotateZ(0);
+        }
 
-          100% {
-            transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
-          }
+        100% {
+          transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
         }
+      }
 
-        @keyframes rotate3 {
-          0% {
-            transform: translateX(0%) rotateX(80deg) rotateZ(0);
-          }
+      @keyframes rotate3 {
+        0% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(0);
+        }
 
-          100% {
-            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
-          }
+        100% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
         }
+      }
 
-        @keyframes rotate4 {
-          100% {
-            transform: translateX(0%) rotateX(80deg) rotateZ(0);
-          }
+      @keyframes rotate4 {
+        100% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(0);
+        }
 
-          0% {
-            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
-          }
+        0% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
         }
+      }
 
-        @keyframes ball {
-          100% {
-            offset-distance: 100%;
-          }
+      @keyframes ball {
+        100% {
+          offset-distance: 100%;
+        }
 
-          0% {
-            offset-distance: 0%;
-          }
+        0% {
+          offset-distance: 0%;
         }
+      }
 
-        @keyframes ball1 {
-          0% {
-            offset-distance: 100%;
-          }
+      @keyframes ball1 {
+        0% {
+          offset-distance: 100%;
+        }
 
-          100% {
-            offset-distance: 0%;
-          }
+        100% {
+          offset-distance: 0%;
         }
       }
     }
+  }
 
-    .right-box {
-      .dust-monitor {
+  .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: 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;
-        }
+        justify-content: center;
+        align-items: center;
+      }
 
-        .title {
-          text-align: center;
-          margin-bottom: 5px;
-        }
+      .title {
+        text-align: center;
+        margin-bottom: 5px;
+      }
 
-        .value {
-          font-size: 16px;
-          font-family: 'douyuFont';
-          color: #3df5ff;
-        }
+      .value {
+        font-size: 16px;
+        font-family: 'douyuFont';
+        color: #3df5ff;
       }
+    }
 
-      .gas-box {
-        height: 390px;
-        display: flex;
-        justify-content: space-between;
-        padding: 0 10px;
+    .gas-box {
+      height: 390px;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 10px;
 
-        .gas-item {
-          position: relative;
+      .gas-item {
+        position: relative;
 
-          .top {
-            height: 136px;
-            padding-top: 30px;
+        .top {
+          height: 136px;
+          padding-top: 30px;
 
-            .value {
-              font-size: 26px;
-              font-family: 'douyuFont';
-              color: #3df5ff;
-              text-align: center;
-              margin-bottom: 5px;
-            }
+          .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;
-            }
+          .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;
-            }
+          &::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;
+        .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: calc(100% - 136px);
-            background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
-            background-size: cover;
+            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;
-            flex-direction: column;
-            justify-content: flex-start;
+            padding: 0 10px;
+            justify-content: space-between;
             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;
+            margin-bottom: 30px;
 
-              .value {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                color: #2bdcff;
-                text-align: center;
-              }
+            .value {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              color: #2bdcff;
+              text-align: center;
             }
           }
         }
       }
     }
+  }
 
-    .monitor-title {
-      cursor: pointer;
-    }
+  .monitor-title {
+    cursor: pointer;
   }
+}
 </style>

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

@@ -0,0 +1,213 @@
+<template>
+      <div class="alarm-modal">
+        <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 { warningList } from '../alarm.api';
+    import { levelColumns, levelHisColumns } from '../alarm.data';
+  
+    // const props = defineProps({
+    //   deviceId: { type: String },
+    // });
+  
+  
+    // 默认初始是第一行
+    const activeKey = ref('1');
+    const dataSource = ref([]);
+  
+    const tabChange = (activeKeyVal) => {
+      activeKey.value = activeKeyVal;
+    };
+  
+  
+    // 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
+        );
+      }
+    }
+    //设备预警监测列表
+    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: 10px;
+      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,430 @@
+<template>
+    <div class="dustWarn">
+        <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 } from 'vue'
+import { sysTypeWarnList, sysWarn } from '../common.api'
+import echartLine from '../common/echartLine.vue';
+
+//左侧数据列表
+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³)');
+
+// 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
+    );
+}
+
+//获取左侧菜单列表
+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()
+})
+
+</script>
+
+<style lang="less" scoped>
+.dustWarn {
+    width: 100%;
+    height: calc(100% - 52px);
+    padding: 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,310 @@
+<template>
+    <div class="fireWarn">
+        <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 } from 'vue'
+import { typeMenuList, componentName } from '../common.data'
+import { sysTypeWarnList, sysWarn } from '../common.api'
+
+//当前加载组件
+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: [],
+    smoke: [],
+    spray: [],
+    temperature: [],
+}); //详情数据
+let strType = ref(''); //火灾外因-区别工作面和煤层
+
+// 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
+    );
+}
+
+//获取左侧菜单列表
+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.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;
+    }
+}
+//菜单选项切换
+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) {
+        currentLoad.value = 'mainWell';
+    } else {
+        currentLoad.value = '';
+    }
+}
+//清空数据
+function getClearList() {
+    listData.common = {};
+    listData.bundletube.length = 0;
+    listData.fiber.length = 0;
+    listData.fire.length = 0;
+    listData.smoke.length = 0;
+    listData.spray.length = 0;
+    listData.temperature.length = 0;
+}
+
+onMounted(() => {
+    getMenuList()
+})
+
+</script>
+
+<style lang="less" scoped>
+.fireWarn {
+    width: 100%;
+    height: calc(100% - 52px);
+    padding: 15px 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+
+    .alarm-menu {
+        height: 100%;
+        width: 15%;
+
+        .type-btn {
+            width: 68%;
+            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);
+                }
+            }
+        }
+    }
+
+    .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,588 @@
+<template>
+    <div class="gasWarn">
+        <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="gas-content">
+            <div class="top-area" v-if="topAreaListWs.length != 0">
+                <div class="title-t">
+                    <div class="text-t">瓦斯抽采泵信息</div>
+                </div>
+
+                <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 && 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
+                            }}</span>
+                        </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>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { sysTypeWarnList, sysWarn } from '../common.api'
+
+//当前左侧激活菜单的索引
+let activeIndex1 = ref(0);
+//左侧数据列表
+let menuList = reactive<any[]>([])
+//瓦斯顶部区域数据
+let topAreaListWs = reactive<any[]>([]);
+//瓦斯监控列表数据
+let cardListWs = reactive<any[]>([]);
+
+// 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 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 cardClick(ind, item) {
+    activeIndex1.value = ind;
+    clearTimeout(timer);
+    getMonitor(item.deviceID, true);
+}
+
+onMounted(() => {
+    getMenuList()
+})
+
+</script>
+
+<style lang="less" scoped>
+.gasWarn {
+    width: 100%;
+    height: calc(100% - 52px);
+    padding: 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);
+                }
+            }
+        }
+    }
+
+    .gas-content {
+        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;
+                }
+            }
+
+            .top-box {
+                position: relative;
+                width: 724px;
+                height: 276px;
+                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;
+                            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: 16px;
+                }
+            }
+
+            .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;
+                            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,496 @@
+<template>
+    <div class="ventilateWarn">
+        <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 } from 'vue';
+import { sysTypeWarnList, sysWarn } from '../common.api'
+import { centerAreaListT1, centerAreaListB1 } from '../common.data';
+import echartLine from '../common/echartLine.vue';
+
+//左侧数据列表
+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: [],
+});
+
+// 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 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()
+})
+</script>
+
+<style lang="less" scoped>
+.ventilateWarn {
+    width: 100%;
+    height: calc(100% - 52px);
+    padding: 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>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/gaspatrol.modal.vue

@@ -24,74 +24,75 @@
         <div class="right-top">
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
+              <SvgIcon class="icon-style" name="o2val" style="width: 76px; height: 50px" />
             </div>
             <div class="item-container">
-              <div class="title">一氧化碳</div>
-              <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-' }} <span>ppm</span> </div>
+              <div class="title">氧气</div>
+              <div class="value">{{ posMonitor.o2 !== undefined && posMonitor.o2 !== null ? posMonitor.o2 : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="co2val" style="width: 72px; height: 46px" />
+              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
             </div>
             <div class="item-container">
-              <div class="title">二氧化碳</div>
-              <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val : '-' }} <span>%</span></div>
+              <div class="title">一氧化碳</div>
+              <div class="value">{{ posMonitor.co !== undefined && posMonitor.co !== null ? posMonitor.co : '-' }} <span>ppm</span> </div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="gasval" style="width: 72px; height: 46px" />
+              <SvgIcon class="icon-style" name="co2val" style="width: 72px; height: 46px" />
             </div>
             <div class="item-container">
-              <div class="title">甲烷</div>
-              <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval : '-' }} <span>%</span></div>
+              <div class="title">二氧化碳</div>
+              <div class="value">{{ posMonitor.co2 !== undefined && posMonitor.co2 !== null ? posMonitor.co2 : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="ch2val" style="width: 76px; height: 42px" />
+              <SvgIcon class="icon-style" name="gasval" style="width: 72px; height: 46px" />
             </div>
             <div class="item-container">
-              <div class="title">乙烯</div>
-              <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val : '-' }} <span>ppm</span></div>
+              <div class="title">甲烷</div>
+              <div class="value">{{ posMonitor.ch4 !== undefined && posMonitor.ch4 !== null ? posMonitor.ch4 : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="chval" style="width: 76px; height: 42px" />
+              <SvgIcon class="icon-style"  name="max-temperature" style="width: 76px; height: 42px" />
             </div>
             <div class="item-container">
-              <div class="title">乙炔</div>
-              <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-' }} <span>ppm</span></div>
+              <div class="title">温度</div>
+              <div class="value">{{ posMonitor.temperature !== undefined && posMonitor.temperature !== null ? posMonitor.temperature : '-' }} <span>℃</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="o2val" style="width: 76px; height: 50px" />
+              <SvgIcon class="icon-style"  name="max-temperature" style="width: 76px; height: 42px" />
             </div>
             <div class="item-container">
-              <div class="title">氧气</div>
-              <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-' }} <span>%</span></div>
+              <div class="title">湿度</div>
+              <div class="value">{{ posMonitor.humidity !== undefined && posMonitor.humidity !== null ? posMonitor.humidity : '-' }} <span>%</span></div>
             </div>
           </div>
+         
           <div class="top-item warning-box">
             <div class="icon">
-              <SvgIcon class="icon-style" size="42" name="alarm-warning" style="margin-top: 5px" />
+              <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px" />
             </div>
             <div class="item-container">
-              <div class="title">风险等级</div>
-              <div class="warning-value">{{ posMonitor['warnLevel_str'] ? posMonitor['warnLevel_str'] : '-' }}</div>
+              <div class="title">传感器通讯</div>
+              <div class="warning-value">{{ posMonitor['deviceConnect'] == 1 ? '连接' : '未连接' }}</div>
             </div>
           </div>
           <div class="top-item warning-box">
             <div class="icon">
-              <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px" />
+              <SvgIcon class="icon-style" size="42" name="alarm-warning" style="margin-top: 5px" />
             </div>
             <div class="item-container">
-              <div class="title">连接状态</div>
-              <div class="warning-value">{{ posMonitor['netStatus'] == 1 ? '连接' : '未连接' }}</div>
+              <div class="title">更新时间</div>
+              <div class="warning-value">{{ posMonitor['lastDataTime'] ? posMonitor['lastDataTime'] : '-' }}</div>
             </div>
           </div>
         </div>
@@ -151,41 +152,29 @@
       };
 
       const chartsColumns = [
-        {
-          legend: '一氧化碳',
-          seriesName: '(ppm)',
-          ymax: 10,
-          yname: 'ppm',
-          linetype: 'line',
-          yaxispos: 'left',
-          color: '#FDB146',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'coval',
-        },
-        {
-          legend: '乙炔',
+      {
+          legend: '氧气',
           seriesName: '',
           ymax: 10,
-          yname: 'ppm',
+          yname: '%',
           linetype: 'line',
           yaxispos: 'left',
           color: '#00FFA8',
           sort: 1,
           xRotate: 0,
-          dataIndex: 'chval',
+          dataIndex: 'o2',
         },
         {
-          legend: '乙烯',
-          seriesName: '',
+          legend: '一氧化碳',
+          seriesName: '(ppm)',
           ymax: 10,
           yname: 'ppm',
           linetype: 'line',
           yaxispos: 'left',
-          color: '#AE19FF',
+          color: '#FDB146',
           sort: 1,
           xRotate: 0,
-          dataIndex: 'ch2val',
+          dataIndex: 'co',
         },
         {
           legend: '二氧化碳',
@@ -197,7 +186,7 @@
           color: '#9C83D9',
           sort: 2,
           xRotate: 0,
-          dataIndex: 'co2val',
+          dataIndex: 'co2',
         },
         {
           legend: '甲烷',
@@ -209,19 +198,7 @@
           color: '#DA3914',
           sort: 2,
           xRotate: 0,
-          dataIndex: 'gasval',
-        },
-        {
-          legend: '氧气',
-          seriesName: '(氧气%)',
-          ymax: 30,
-          yname: '%',
-          linetype: 'line',
-          yaxispos: 'right',
-          color: '#03C2EC',
-          sort: 3,
-          xRotate: 0,
-          dataIndex: 'o2val',
+          dataIndex: 'ch4',
         },
       ];
       const [register, { setModalProps, closeModal }] = useModalInner();