火灾监测-界面迁移提交

.env.development

@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
 #VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
-VITE_PROXY = [["/jeecgsystem","http://47.94.222.6:9999"],["/upload","http://localhost:3300/upload"]]
+VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://localhost:3300/upload"]]
 #VITE_PROXY = [["/jeecgsystem","http://192.168.1.8:9999"],["/upload","http://localhost:3300/upload"]]
 
 # 控制台不输出
@@ -18,7 +18,7 @@ VITE_GLOB_API_URL=/jeecgsystem
 
 
 #后台接口全路径地址(必填)
-VITE_GLOB_DOMAIN_URL=http://47.94.222.6:9999
+VITE_GLOB_DOMAIN_URL=http://182.92.126.35:9999
 #VITE_GLOB_DOMAIN_URL=http://192.168.1.8:9999
 
 # 接口前缀

src/assets/images/fire/fire.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.062" height="22.015" viewBox="0 0 19.062 22.015">
+  <path id="路径_55293" data-name="路径 55293" d="M174.845,95.77c1.017.339,1.355-.593.932-.932a3.7,3.7,0,0,1-1.525-4.151c.508-1.694,1.864-2.372,1.864-4.914a3.576,3.576,0,0,1,1.355,3.219c1.694-1.948.932-4.49.593-5.676,4.321,2.287,8.048,7.286,3.728,11.522-.508.424,0,1.186.762.932,11.776-6.693,2.88-16.689,1.355-17.875.508,1.186.593,3.05-.424,3.982-1.779-6.693-6.1-8.048-6.1-8.048.508,3.473-1.948,7.2-4.236,10.081a7.684,7.684,0,0,0-.847-3.643c-.169,2.457-2.118,4.49-2.626,7.032-.678,3.389.508,5.845,5.168,8.472h0Z" transform="translate(-169.501 -73.828)" fill="#daedff"/>
+</svg>

src/assets/images/fire/max.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31.761" height="46.177" viewBox="0 0 31.761 46.177">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#29b8ff"/>
+      <stop offset="1" stop-color="#2986ff" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14172" data-name="组 14172" transform="translate(-506.549 -355.112)">
+    <path id="路径_55369" data-name="路径 55369" d="M226.661,25.849V14.585a1.244,1.244,0,0,0-1.242-1.242h-.1a1.2,1.2,0,0,0-1.206,1.206v11.3a4.375,4.375,0,0,0-3.211,4.17,4.486,4.486,0,1,0,5.757-4.17Zm6.6-4.99a1.134,1.134,0,0,1-.443-.861V7.262a7.432,7.432,0,0,0-14.86,0V19.637a1.771,1.771,0,0,1-.6,1.357,11.81,11.81,0,0,0-4.224,9.029,12.264,12.264,0,0,0,24.521,0A11.811,11.811,0,0,0,233.259,20.859Zm-7.873,17.333a8.3,8.3,0,0,1-8.4-8.172,8.1,8.1,0,0,1,3.924-6.905l.595-.365a.659.659,0,0,0,.312-.558V7.262a3.573,3.573,0,0,1,7.143,0v14.93a.659.659,0,0,0,.312.558l.595.365a8.086,8.086,0,0,1,3.92,6.905,8.3,8.3,0,0,1-8.4,8.172Z" transform="translate(293.42 359.295)" fill="url(#linear-gradient)"/>
+    <path id="路径_55370" data-name="路径 55370" d="M282,155.954v9.231h1.865v-9.231l1.958,1.958,1.305-1.4-4.2-4.2-4.2,4.2,1.305,1.305Zm-4.662-4.755h11.189v-1.865H277.333Z" transform="translate(249.788 205.778)" fill="#3df6ff"/>
+  </g>
+</svg>

src/assets/images/fire/min.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31.761" height="46.177" viewBox="0 0 31.761 46.177">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#29b8ff"/>
+      <stop offset="1" stop-color="#2986ff" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <g id="组_13335" data-name="组 13335" transform="translate(-0.001 0)">
+    <path id="路径_55369" data-name="路径 55369" d="M226.661,25.849V14.585a1.244,1.244,0,0,0-1.242-1.242h-.1a1.2,1.2,0,0,0-1.206,1.206v11.3a4.375,4.375,0,0,0-3.211,4.17,4.486,4.486,0,1,0,5.757-4.17Zm6.6-4.99a1.134,1.134,0,0,1-.443-.861V7.262a7.432,7.432,0,0,0-14.86,0V19.637a1.771,1.771,0,0,1-.6,1.357,11.81,11.81,0,0,0-4.223,9.029,12.264,12.264,0,0,0,24.521,0A11.811,11.811,0,0,0,233.259,20.859Zm-7.873,17.333a8.3,8.3,0,0,1-8.4-8.172,8.1,8.1,0,0,1,3.924-6.905l.595-.365a.659.659,0,0,0,.312-.558V7.262a3.573,3.573,0,0,1,7.143,0v14.93a.659.659,0,0,0,.312.558l.595.365a8.086,8.086,0,0,1,3.92,6.905,8.3,8.3,0,0,1-8.4,8.172Z" transform="translate(-213.129 4.184)" fill="url(#linear-gradient)"/>
+    <path id="路径_55370" data-name="路径 55370" d="M282,158.565v-9.231h1.865v9.231l1.958-1.958,1.305,1.4-4.2,4.2-4.2-4.2,1.305-1.305Zm-4.662,4.755h11.189v1.865H277.333Z" transform="translate(-256.76 -149.334)" fill="#3df6ff"/>
+  </g>
+</svg>

src/assets/images/fire/pj.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31.761" height="46.177" viewBox="0 0 31.761 46.177">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#29b8ff"/>
+      <stop offset="1" stop-color="#2986ff" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <g id="组_13336" data-name="组 13336" transform="translate(0 0)">
+    <path id="路径_55369" data-name="路径 55369" d="M226.661,25.849V14.585a1.244,1.244,0,0,0-1.242-1.242h-.1a1.2,1.2,0,0,0-1.206,1.206v11.3a4.375,4.375,0,0,0-3.211,4.17,4.486,4.486,0,1,0,5.757-4.17Zm6.6-4.99a1.134,1.134,0,0,1-.443-.861V7.262a7.432,7.432,0,0,0-14.86,0V19.637a1.771,1.771,0,0,1-.6,1.357,11.81,11.81,0,0,0-4.223,9.029,12.264,12.264,0,0,0,24.521,0A11.811,11.811,0,0,0,233.259,20.859Zm-7.873,17.333a8.3,8.3,0,0,1-8.4-8.172,8.1,8.1,0,0,1,3.924-6.905l.595-.365a.659.659,0,0,0,.312-.558V7.262a3.573,3.573,0,0,1,7.143,0v14.93a.659.659,0,0,0,.312.558l.595.365a8.086,8.086,0,0,1,3.92,6.905,8.3,8.3,0,0,1-8.4,8.172Z" transform="translate(-213.129 4.184)" fill="url(#linear-gradient)"/>
+    <path id="路径_55371" data-name="路径 55371" d="M64,120.4v2.264H75.189V120.4Zm0,13.846H75.189v-2.264H64Zm0-5.79H75.189v-2.264H64Z" transform="translate(-43.428 -120.4)" fill="#3df6ff"/>
+  </g>
+</svg>

src/assets/images/fire/smoke.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.384" height="19.402" viewBox="0 0 19.384 19.402">
+  <path id="路径_55652" data-name="路径 55652" d="M142.32,152.781a.968.968,0,0,1-.969-.969v-7.77a.965.965,0,0,1,.288-.687l1.965-1.95a.975.975,0,0,1,.681-.282h2.88v-3.876H142.68l-4.209,3.631v10.934a.969.969,0,0,1-1.938,0V140.433a.968.968,0,0,1,.336-.733l4.814-4.154a.97.97,0,0,1,.633-.236h5.814a.968.968,0,0,1,.969.969v5.814a.968.968,0,0,1-.969.969h-3.446l-1.4,1.384v7.367a.968.968,0,0,1-.969.969Zm9.692-15.533a.968.968,0,0,1-.533-1.777l2.937-1.932a.969.969,0,1,1,1.063,1.62l-2.937,1.932A.974.974,0,0,1,152.012,137.248Zm2.934,2.943h-2.937a.969.969,0,1,1,0-1.938h2.937a.969.969,0,1,1,0,1.938Zm0,4.821a.972.972,0,0,1-.536-.16l-2.937-1.95a.97.97,0,1,1,1.072-1.617l2.937,1.95a.969.969,0,0,1-.536,1.777Z" transform="translate(-136.533 -133.379)" fill="#daedff"/>
+</svg>

src/assets/images/fire/warn.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.631" height="22.631" viewBox="0 0 22.631 22.631">
+  <path id="路径_55651" data-name="路径 55651" d="M10.815,4.056a6.76,6.76,0,0,1,6.76,6.76v5.408a1.352,1.352,0,0,1-1.352,1.352H5.408a1.352,1.352,0,0,1-1.352-1.352V10.815a6.76,6.76,0,0,1,6.76-6.76Zm0,10.815A4.056,4.056,0,1,0,6.76,10.815,4.056,4.056,0,0,0,10.815,14.871Zm0-1.352a2.7,2.7,0,1,1,2.7-2.7A2.7,2.7,0,0,1,10.815,13.519ZM10.139,0h1.353V2.7H10.139V0Zm8.788,9.464h2.7v1.352h-2.7ZM0,9.464H2.7v1.352H0Zm2.542-6.48L3.5,2.028,5.409,3.94,4.454,4.9,2.542,2.984Zm15.594-.955.955.955L17.179,4.9l-.956-.956,1.912-1.912ZM2.7,18.927H18.927a1.352,1.352,0,0,1,0,2.7H2.7a1.352,1.352,0,0,1,0-2.7Z" transform="translate(0.5 0.5)" fill="#daedff" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+</svg>

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

@@ -0,0 +1,364 @@
+<template>
+  <BasicModal @register="register" title="火灾监测" 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">
+            <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">
+          <!-- <div class="toggle-btn">
+            <div :class="activeIndex2 == ind ? 'btn-item1' : 'btn-item'" v-for="(items, ind) in btnList" :key="ind"
+              @click="toggleClick(ind)">
+              {{ items.label }}
+            </div>
+          </div> -->
+          <component :is="componentName[current]"></component>
+        </div>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { typeMenuList, menuList, componentName } from './fire.data'
+
+//内外因火灾激活索引
+let activeIndex = ref(0);
+//当前激活菜单的索引
+let activeIndex1 = ref(0);
+//当前加载组件
+let current = ref('fireWork')
+//实时/历史数据激活索引
+let activeIndex2 = ref(0);
+// //实时历史数据按钮列表
+// let btnList = reactive([{ label: '实时' }]);
+
+const emit = defineEmits(['close', 'register']);
+
+// 注册 modal
+const [register, { closeModal }] = useModalInner();
+
+async function onSubmit() {
+  emit('close');
+  closeModal();
+}
+//内外因火灾选项切换
+function btnClick(ind) {
+  activeIndex.value = ind;
+  switch (ind) {
+    case 0:
+      activeIndex1.value = 0;
+      current.value = 'fireWork';
+      menuList.forEach(el=>{
+        el.type='on'
+      })
+      //   this.getFireAreaInfoList()
+      break;
+    case 1:
+      activeIndex1.value = 0;
+      current.value = 'mainWell';
+      menuList.forEach(el=>{
+        el.type='out'
+      })
+      //   this.getFireAreaInfoList()
+      break;
+  }
+}
+//菜单选项切换
+function cardClick(ind, item) {
+  console.log(ind, 'index');
+  activeIndex1.value = ind;
+  switch (ind) {
+    case 0:
+      current.value = item.type == 'on' ? 'fireWork' : 'mainWell';
+      //   this.getFireAreaInfoList()
+      break;
+    case 1:
+      current.value = item.type == 'on' ? 'closeWall' : 'subStation';
+      //   this.getFireAreaInfoList()
+      break;
+    case 2:
+      current.value = item.type == 'on' ? 'otherMonitor' : 'otherOut';
+      //   this.getFireAreaInfoList()
+      break;
+  }
+}
+
+onMounted(async () => { });
+onUnmounted(() => { });
+</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: 262px;
+
+      .type-btn {
+        width: 192px;
+        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: 212px;
+          height: 99px;
+          margin-bottom: 30px;
+          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: 22px;
+            font-size: 16px;
+            color: #01fefc;
+            text-align: center;
+            transform: translate(-50%, 0);
+          }
+
+          .warn {
+            width: 100%;
+            position: absolute;
+            left: 50%;
+            top: 68px;
+            font-size: 16px;
+            color: #fff;
+            text-align: center;
+            transform: translate(-50%, 0);
+          }
+        }
+
+        .btn1 {
+          position: relative;
+          width: 262px;
+          height: 99px;
+          margin-bottom: 30px;
+          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: 22px;
+            font-size: 16px;
+            color: #01fefc;
+            text-align: center;
+            transform: translate(-62%, 0);
+          }
+
+          .warn {
+            width: 100%;
+            position: absolute;
+            left: 50%;
+            top: 68px;
+            font-size: 16px;
+            color: #fff;
+            text-align: center;
+            transform: translate(-60%, 0);
+          }
+        }
+      }
+    }
+
+    .alarm-content {
+      width: calc(100% - 282px);
+      height: 100%;
+      margin-left: 20px;
+      background: url('../../../../assets//images/fire/border.png') no-repeat;
+      background-size: 100% 100%;
+
+      // .toggle-btn {
+      //   position: absolute;
+      //   right: 10px;
+      //   top: -34px;
+      //   display: flex;
+
+      //   .btn-item {
+      //     width: 157px;
+      //     height: 36px;
+      //     line-height: 36px;
+      //     text-align: center;
+      //     color: #fff;
+      //     font-size: 14px;
+      //     cursor: pointer;
+      //     background: url('../../../../assets//images//fire/tab-2.png') no-repeat;
+      //   }
+
+      //   .btn-item1 {
+      //     width: 157px;
+      //     height: 36px;
+      //     line-height: 36px;
+      //     text-align: center;
+      //     color: #fff;
+      //     font-size: 14px;
+      //     cursor: pointer;
+      //     background: url('../../../../assets/images//fire/tab-1.png') no-repeat;
+      //   }
+      // }
+    }
+  }
+}
+
+: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/fire.data.ts

@@ -0,0 +1,456 @@
+import { reactive, markRaw, defineAsyncComponent } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import echarts from '/@/utils/lib/echarts';
+import type { EChartsOption } from 'echarts';
+import { getAssetURL } from '/@/utils/ui';
+
+//内外因火灾菜单列表
+export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' }];
+//菜单列表
+export const menuList = [
+  { name: '综采工作面1', warn: '低风险', type: 'on' },
+  { name: '密闭工作面1', warn: '低风险', type: 'on' },
+  { name: '其他工作面1', warn: '低风险', type: 'on' },
+];
+
+//当前加载组件
+export const componentName = {
+  fireWork: markRaw(defineAsyncComponent(() => import('./fire/fireWork.vue'))),
+  closeWall: markRaw(defineAsyncComponent(() => import('./fire/closeWall.vue'))),
+  otherMonitor: markRaw(defineAsyncComponent(() => import('./fire/otherMonitor.vue'))),
+  mainWell: markRaw(defineAsyncComponent(() => import('./fire/mainWell.vue'))),
+  subStation: markRaw(defineAsyncComponent(() => import('./fire/subStation.vue'))),
+  otherOut: markRaw(defineAsyncComponent(() => import('./fire/otherOut.vue'))),
+};
+
+//工作面
+//顶部区域数据
+export const topList = [
+  {
+    id: 0,
+    label: '最高温度(°C)',
+    imgSrc: true,
+    value: 10,
+    text: '',
+    list: [],
+  },
+  {
+    id: 1,
+    label: '最低温度(°C)',
+    imgSrc: true,
+    value: 20,
+    text: '',
+    list: [],
+  },
+  {
+    id: 2,
+    label: '平均温度(°C)',
+    imgSrc: true,
+    value: 15,
+    text: '',
+    list: [],
+  },
+  { id: 3, imgSrc: false, label: '', value: null, text: '无自然发火征兆和隐患', list: [] },
+  {
+    id: 4,
+    imgSrc: false,
+    label: '回风隅角',
+    value: null,
+    text: '',
+    list: [
+      { id: 0, label: 'O2', value: 0 },
+      { id: 1, label: 'CO', value: 0 },
+    ],
+  },
+];
+
+//光钎测温测点编号列表
+export const pointList = [
+  { label: '测点1', value: 0 },
+  { label: '测点2', value: 1 },
+];
+
+//光钎图表数据
+export const echartDataGq = {
+  maxData: [45, 42, 43, 46, 44, 41, 42, 45, 47, 46, 48],
+  minData: [25, 22, 23, 26, 24, 21, 22, 25, 27, 26, 28],
+  aveValue: [35, 32, 33, 36, 34, 31, 32, 35, 37, 36, 38],
+  xData: [
+    '2023-09-12 11:22',
+    '2023-09-12 11:23',
+    '2023-09-12 11:24',
+    '2023-09-12 11:25',
+    '2023-09-12 11:26',
+    '2023-09-12 11:27',
+    '2023-09-12 11:28',
+    '2023-09-12 11:29',
+    '2023-09-12 11:30',
+    '2023-09-12 11:31',
+    '2023-09-12 11:32',
+  ],
+};
+
+//束管监测-测点编号列表
+export const pointList1 = [
+  { label: '测点1', value: 0 },
+  { label: '测点2', value: 1 },
+];
+
+//束管监测选项列表
+export const contentList = [
+  {
+    id: 0,
+    list: [
+      {
+        id: '0-0',
+        title: 'O2',
+        label: '浓度 : ',
+        value: 10,
+        label1: '时间 : ',
+        time: '2023-09-12 14:00',
+      },
+      {
+        id: '0-1',
+        title: 'C2H4',
+        label: '浓度 : ',
+        value: 10,
+        label1: '时间 : ',
+        time: '2023-09-12 14:01',
+      },
+    ],
+  },
+  {
+    id: 1,
+    list: [
+      {
+        id: '1-0',
+        title: 'CO',
+        label: '浓度 : ',
+        value: 20,
+        label1: '时间 : ',
+        time: '2023-09-12 14:02',
+      },
+      {
+        id: '1-1',
+        title: 'CH4',
+        label: '浓度 : ',
+        value: 20,
+        label1: '时间 : ',
+        time: '2023-09-12 14:03',
+      },
+    ],
+  },
+  {
+    id: 2,
+    list: [
+      {
+        id: '2-0',
+        title: 'CO2',
+        label: '浓度 : ',
+        value: 30,
+        label1: '时间 : ',
+        time: '2023-09-12 14:04',
+      },
+      {
+        id: '2-1',
+        title: 'C2H2',
+        label: '浓度 : ',
+        value: 30,
+        label1: '时间 : ',
+        time: '2023-09-12 14:05',
+      },
+    ],
+  },
+];
+
+//束管监测-图表数据
+export const echartDataSg = {
+  xData: [
+    '2023-09-12 13:40',
+    '2023-09-12 13:41',
+    '2023-09-12 13:42',
+    '2023-09-12 13:43',
+    '2023-09-12 13:44',
+    '2023-09-12 13:45',
+    '2023-09-12 13:46',
+    '2023-09-12 13:47',
+  ],
+  yData: [42, 38, 41, 43, 40, 45, 44, 47, 43],
+};
+
+//密闭参数列表
+export const mbList = [
+  {
+    label: 'O2',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 4.45,
+    time1: '2023-09-12 15:04',
+    address: '综采工作面45联巷密闭',
+  },
+  {
+    label: 'CO',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 2.2,
+    time1: '2023-09-12 15:04',
+    address: '综采工作面45联巷密闭',
+  },
+  {
+    label: 'CO2',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0.28,
+    time1: '2023-09-12 15:04',
+    address: '综采工作面45联巷密闭',
+  },
+  {
+    label: 'CH4',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0.29,
+    time1: '2023-09-12 15:04',
+    address: '综采工作面45联巷密闭',
+  },
+  {
+    label: 'DP',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 0,
+    time1: '2023-09-12 15:04',
+    address: '综采工作面45联巷密闭',
+  },
+  {
+    label: 'T',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: 16.48,
+    time1: '2023-09-12 15:04',
+    address: '综采工作面45联巷密闭',
+  },
+];
+
+//其他工作面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: 17.69,
+    text: '',
+  },
+  {
+    id: 1,
+    imgSrc: true,
+    label: '最低温度(°C)',
+    value: 14.26,
+    text: '',
+  },
+  {
+    id: 2,
+    imgSrc: true,
+    label: '平均温度(°C)',
+    value: 16.78,
+    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: '设备类型名称' },
+];
+
+//外因火灾-传感器table列
+export const columns = [
+  { rowIndex: 1, dataIndex: 'pointName', title: '名称', type: '1', align: 'center' },
+  { rowIndex: 2, dataIndex: 'isOpen', title: '状态', type: '1', align: 'center' },
+  { rowIndex: 3, dataIndex: 'time', title: '时间', type: '1', align: 'center' },
+];
+
+//外因火灾温度监测-测点列表
+export const pointOutList = [
+  { label: '测点1', value: 0 },
+  { label: '测点2', value: 1 },
+];
+
+//外因火灾温度监测-图表数据
+export const echartDataWd = {
+  xData: [
+    '2023-09-13 10:15',
+    '2023-09-13 10:16',
+    '2023-09-13 10:17',
+    '2023-09-13 10:18',
+    '2023-09-13 10:19',
+    '2023-09-13 10:20',
+    '2023-09-13 10:21',
+    '2023-09-13 10:22',
+  ],
+  maxData: [32, 33, 31, 33, 34, 36, 35, 37],
+  minData: [13, 15, 14, 12, 16, 15, 17, 19],
+  aveaData: [21, 24, 23, 22, 26, 24, 25, 23],
+};
+
+//井下消防材料库列表
+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: '正常',
+      },
+    ],
+  },
+];
+
+//外应火灾井下消防材料库标题列表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' },
+];

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

@@ -0,0 +1,343 @@
+<template>
+    <div class="closeWall">
+        <div class="title">
+            <div class="box">
+                <div class="contents">
+                    <img src="../../../../../assets/images/fire/pie.png" alt="" />
+                    <span class="text">{{ topContent.temperature }}</span>
+                    <span class="dw">°C</span>
+                </div>
+                <div class="contents">
+                    <div class="text">
+                        <span class="label">位置 : </span>
+                        <span class="value">{{ topContent.position }}</span>
+                    </div>
+                    <div class="text">
+                        <span class="label">时间 : </span>
+                        <span class="value">{{ topContent.time }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <div class="text1">无自然发火征兆和隐患</div>
+            </div>
+        </div>
+        <div class="content">
+            <div class="title-b">采空区密闭参数</div>
+            <div class="card-btn">
+                <div :class="activeIndex == index ? 'box1' : 'box'" v-for="(item, index) in mbList" :key="index"
+                    @click="btnClick(item, index)">
+                    <div class="label">{{ item.label }}</div>
+                    <div class="box-item box-item1">
+                        <span class="text-t">{{ `${item.label1}:` }}</span>
+                        <span class="text-v">{{ `${item.nd}%` }}</span>
+                    </div>
+                    <div class="box-item box-item2">
+                        <span class="text-t">{{ `${item.label2}:` }}</span>
+                        <span class="text-v">{{ item.time1 }}</span>
+                    </div>
+                    <div class="box-item box-item3">
+                        <span class="text-t">{{ `${item.label3}:` }}</span>
+                        <span class="text-v">{{ item.address }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="echart-box">
+                <div class="title-f">
+                    <div class="title-text">O2趋势</div>
+                    <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                        :placeholder="['开始时间', '终止时间']" @change="onDataChange" />
+                </div>
+                <div class="echarts-box">
+                    <echartLine1 :echartDataSg="echartDataSg"></echartLine1>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import {echartDataSg,mbList} from '../fire.data'
+import echartLine1 from './common/echartLine1.vue'
+
+//密闭-顶部区域数据
+let topContent = reactive({
+    temperature: '16.88',
+    position: '51207综采工作面45联巷密闭',
+    time: '2023-09-12 15:04:36'
+})
+//当前密闭参数激活选项
+let activeIndex = ref(0)
+//当前激活密闭参数类型
+let type = ref('')
+//时间查询参数
+let TimeRange = reactive<any>([])
+
+//密闭参数选项切换
+function btnClick(item, ind) {
+    activeIndex.value = ind
+    type.value = item.label
+    //   this.getMbHistoryDataList()
+}
+//时间选项切换
+function onDataChange(value, dateString) {
+    TimeRange = [dateString[0], dateString[1]]
+    //   this.getMbHistoryDataList()
+}
+
+
+
+
+</script>
+
+<style lang="less" scoped>
+.closeWall {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .title {
+        width: 100%;
+        height: 128px;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+
+        .box {
+            display: flex;
+
+            &:nth-child(1) {
+                justify-content: space-around;
+                align-items: center;
+                flex: 2;
+                height: 100%;
+                border-right: 2px solid;
+                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            }
+
+            &:nth-child(2) {
+                flex: 1;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+            }
+
+            .contents {
+                height: 94px;
+
+                &:nth-child(1) {
+                    width: 40%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    img {
+                        position: relative;
+                        width: 94px;
+                        height: 94px;
+                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
+                        background-position: 50% 50%;
+                    }
+
+                    .text {
+                        font-family: 'douyuFont';
+                        font-size: 36px;
+                        margin: 0px 15px;
+                        color: #3df6ff;
+                    }
+
+                    .dw {
+                        font-size: 16px;
+                        color: #b3b8cc;
+                    }
+                }
+
+                &:nth-child(2) {
+                    width: 60%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+
+                    .text {
+                        font-size: 18px;
+
+                        .label {
+                            color: #b3b8cc;
+                            font-weight: bold;
+                        }
+
+                        .value {
+                            font-family: 'douyuFont';
+                            color: #3df6ff;
+                            margin-left: 10px;
+                        }
+                    }
+                }
+            }
+
+            .text1 {
+                font-size: 18px;
+                color: #b3b8cc;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .content {
+        width: 100%;
+        height: calc(100% - 148px);
+        padding: 15px 20px 0px 20px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+
+        .title-b {
+            font-family: 'douyuFont';
+            font-size: 16px;
+            color: #3df6ff;
+            margin-bottom: 10px;
+        }
+
+        .card-btn {
+            height: 169px;
+            margin-bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            .box {
+                position: relative;
+                width: 248px;
+                height: 100%;
+                background: url('../../../../../assets/images/fire/1.png') no-repeat;
+                cursor: pointer;
+
+                .label {
+                    position: absolute;
+                    left: 50%;
+                    top: 2px;
+                    transform: translate(-50%);
+                    font-size: 16px;
+                    color: #fff;
+                }
+
+                .box-item {
+                    position: absolute;
+                    left: 50%;
+                    transform: translate(-50%, 0);
+                    width: 226px;
+                    height: 27px;
+                    padding: 0px 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
+
+                    .text-t {
+                        color: #fff;
+                        font-size: 12px;
+                    }
+
+                    .text-v {
+                        font-family: 'douyuFont';
+                        font-size: 10px;
+                        color: #3df6ff;
+                    }
+                }
+
+                .box-item1 {
+                    top: 32px;
+                }
+
+                .box-item2 {
+                    top: 68px;
+                }
+
+                .box-item3 {
+                    top: 104px;
+                }
+            }
+
+            .box1 {
+                position: relative;
+                width: 248px;
+                height: 100%;
+                background: url('../../../../../assets/images/fire/2.png') no-repeat;
+                cursor: pointer;
+
+                .label {
+                    position: absolute;
+                    left: 50%;
+                    top: 2px;
+                    transform: translate(-50%);
+                    font-size: 16px;
+                    color: #fff;
+                }
+
+                .box-item {
+                    position: absolute;
+                    left: 50%;
+                    transform: translate(-50%, 0);
+                    width: 226px;
+                    height: 27px;
+                    padding: 0px 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
+
+                    .text-t {
+                        color: #fff;
+                        font-size: 12px;
+                    }
+
+                    .text-v {
+                        font-family: 'douyuFont';
+                        font-size: 10px;
+                        color: #3df6ff;
+                    }
+                }
+
+                .box-item1 {
+                    top: 32px;
+                }
+
+                .box-item2 {
+                    top: 68px;
+                }
+
+                .box-item3 {
+                    top: 104px;
+                }
+            }
+        }
+
+        .echart-box {
+            height: calc(100% - 215px);
+            border: 1px solid #114aac;
+
+            .title-f {
+                height: 40px;
+                padding: 0px 10px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .title-text {
+                    font-family: 'douyuFont';
+                    font-size: 16px;
+                    color: #3df6ff;
+                }
+            }
+
+            .echarts-box {
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,269 @@
+<template>
+    <div class="echartLine">
+        <div class="line" ref="line"></div>
+    </div>
+</template>
+  
+<script lang="ts" setup>
+import { onMounted, ref, defineEmits, nextTick, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import * as echarts from 'echarts'
+
+let props = defineProps({
+    echartDataGq: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+//获取dom元素节点
+let line = ref<any>()
+watch(() => props.echartDataGq, (data: never[]) => {
+    console.log(data, '光钎图表数据')
+    // props.echartDataGq = data
+    getOption()
+}, { immediate: true })
+function getOption() {
+    nextTick(() => {
+        const myChart = echarts.init(line.value)
+        let option = {
+            grid: {
+                top: '6%',
+                left: '4%',
+                bottom: '18%',
+                right: '5%',
+                //   containLabel: true,
+            },
+            tooltip: {
+                trigger: 'axis',
+                //   axisPointer: {
+                //     lineStyle: {
+                //       color: {
+                //         type: 'linear',
+                //         x: 0,
+                //         y: 0,
+                //         x2: 0,
+                //         y2: 1,
+                //         colorStops: [
+                //           {
+                //             offset: 0,
+                //             color: 'rgba(255,255,255,0)', // 0% 处的颜色
+                //           },
+                //           {
+                //             offset: 0.5,
+                //             color: 'rgba(255,255,255,1)', // 100% 处的颜色
+                //           },
+                //           {
+                //             offset: 1,
+                //             color: 'rgba(255,255,255,0)', // 100% 处的颜色
+                //           },
+                //         ],
+                //         global: false, // 缺省为 false
+                //       },
+                //     },
+                //   },
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLabel: {
+                        formatter: '{value}',
+                        fontSize: 14,
+                        margin: 20,
+                        textStyle: {
+                            color: '#b3b8cc',
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#0b256f',
+                        },
+                    },
+                    splitLine: {
+                        show: false,
+                        //   lineStyle: {
+                        //     color: '#243753',
+                        //   },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    data: props.echartDataGq.xData,
+                },
+            ],
+            yAxis: [
+                {
+                    boundaryGap: false,
+                    type: 'value',
+                    max: 50,
+                    axisLabel: {
+                        textStyle: {
+                            color: '#b3b8cc',
+                        },
+                    },
+                    nameTextStyle: {
+                        color: '#fff',
+                        fontSize: 12,
+                        lineHeight: 40,
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: '#0d2973',
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#0b256f',
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+            ],
+            series: [
+                {
+                    name: '最大值',
+                    type: 'line',
+                    smooth: true,
+                    showSymbol: true,
+                    symbolSize: 8,
+                    zlevel: 3,
+                    itemStyle: {
+                        color: '#19a3df',
+                        borderColor: '#a3c8d8',
+                    },
+                    lineStyle: {
+                        normal: {
+                            width: 2,
+                            color: '#19a3df',
+                        },
+                    },
+                    // areaStyle: {
+                    //   normal: {
+                    //     color: new echarts.graphic.LinearGradient(
+                    //       0,
+                    //       0,
+                    //       0,
+                    //       1,
+                    //       [
+                    //         {
+                    //           offset: 0,
+                    //           color: 'rgba(88,255,255,0.2)',
+                    //         },
+                    //         {
+                    //           offset: 0.8,
+                    //           color: 'rgba(88,255,255,0)',
+                    //         },
+                    //       ],
+                    //       false
+                    //     ),
+                    //   },
+                    // },
+                    data: props.echartDataGq.maxData,
+                },
+                {
+                    name: '最小值',
+                    type: 'line',
+                    smooth: true,
+                    showSymbol: true,
+                    symbolSize: 8,
+                    zlevel: 3,
+                    itemStyle: {
+                        color: '#4fffad',
+                        borderColor: '#a3c8d8',
+                    },
+                    lineStyle: {
+                        normal: {
+                            width: 2,
+                            color: '#4fffad',
+                        },
+                    },
+                    // areaStyle: {
+                    //   normal: {
+                    //     color: new echarts.graphic.LinearGradient(
+                    //       0,
+                    //       0,
+                    //       0,
+                    //       1,
+                    //       [
+                    //         {
+                    //           offset: 0,
+                    //           color: 'rgba(88,255,255,0.2)',
+                    //         },
+                    //         {
+                    //           offset: 0.8,
+                    //           color: 'rgba(88,255,255,0)',
+                    //         },
+                    //       ],
+                    //       false
+                    //     ),
+                    //   },
+                    // },
+                    data: props.echartDataGq.minData,
+                },
+                {
+                    name: '平均值',
+                    type: 'line',
+                    smooth: true,
+                    showSymbol: true,
+                    symbolSize: 8,
+                    zlevel: 3,
+                    itemStyle: {
+                        color: '#fc8452',
+                        borderColor: '#a3c8d8',
+                    },
+                    lineStyle: {
+                        normal: {
+                            width: 2,
+                            color: '#fc8452',
+                        },
+                    },
+                    // areaStyle: {
+                    //   normal: {
+                    //     color: new echarts.graphic.LinearGradient(
+                    //       0,
+                    //       0,
+                    //       0,
+                    //       1,
+                    //       [
+                    //         {
+                    //           offset: 0,
+                    //           color: 'rgba(88,255,255,0.2)',
+                    //         },
+                    //         {
+                    //           offset: 0.8,
+                    //           color: 'rgba(88,255,255,0)',
+                    //         },
+                    //       ],
+                    //       false
+                    //     ),
+                    //   },
+                    // },
+                    data: props.echartDataGq.aveValue,
+                },
+            ],
+        }
+        myChart.setOption(option)
+        window.onresize = function () {
+            myChart.resize()
+        }
+    })
+}
+
+
+</script>
+  
+<style scoped lang='less'>
+.echartLine {
+    width: 100%;
+    height: 100%;
+
+    .line {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

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

@@ -0,0 +1,170 @@
+<template>
+    <div class="echartLine">
+        <div class="line" ref="line"></div>
+    </div>
+</template>
+  
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { onMounted, ref, defineEmits, nextTick, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+let props = defineProps({
+    echartDataSg: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+//获取dom元素节点
+let line = ref<any>()
+watch(() => props.echartDataSg, (data: never[]) => {
+    console.log(data, '束管图表数据')
+    // props.echartDataGq = data
+    getOption()
+}, { immediate: true })
+
+
+
+function getOption() {
+    nextTick(() => {
+        const myChart = echarts.init(line.value)
+        let option = {
+            grid: {
+                top: '10%',
+                left: '7%',
+                bottom: '14%',
+                right: '7%',
+                //   containLabel: true,
+            },
+            tooltip: {
+                trigger: 'axis',
+
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLabel: {
+                        formatter: '{value}',
+                        fontSize: 14,
+                        margin: 20,
+                        textStyle: {
+                            color: '#b3b8cc',
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#244a94',
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#0d2973',
+                            type: 'dashed',
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    data: props.echartDataSg.xData,
+                },
+            ],
+            yAxis: [
+                {
+                    boundaryGap: false,
+                    name: '(%)',
+                    type: 'value',
+                    max: 50,
+                    axisLabel: {
+                        textStyle: {
+                            color: '#b3b8cc',
+                        },
+                    },
+                    nameTextStyle: {
+                        color: '#fff',
+                        fontSize: 12,
+                        lineHeight: 10,
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: '#0d2973',
+                            type: 'dashed',
+                        },
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#244a94',
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+            ],
+            series: [
+                {
+                    name: '束管监测',
+                    type: 'line',
+                    smooth: false,
+                    showSymbol: false,
+                    symbolSize: 8,
+                    zlevel: 3,
+                    itemStyle: {
+                        color: '#02f2de',
+                        borderColor: '#a3c8d8',
+                    },
+                    lineStyle: {
+                        normal: {
+                            width: 3,
+                            color: '#02f2de',
+                        },
+                    },
+                    areaStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                0,
+                                1,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(2, 242, 222,0.5)',
+                                    },
+                                    {
+                                        offset: 0.8,
+                                        color: 'rgba(2, 242, 222,0)',
+                                    },
+                                ],
+                                false
+                            ),
+                        },
+                    },
+                    data: props.echartDataSg.yData,
+                },
+            ],
+        }
+        myChart.setOption(option)
+        window.onresize = function () {
+            myChart.resize()
+        }
+    })
+}
+
+
+</script>
+  
+<style scoped lang='less'>
+.echartLine {
+    width: 100%;
+    height: 100%;
+
+    .line {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

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

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

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

@@ -0,0 +1,381 @@
+<template>
+    <div class="fireWork">
+        <!-- 顶部区域 -->
+        <div class="work-nav">
+            <div class="nav" v-for="(item, index) in topList" :key="index">
+                <div class="pic" v-if="item.imgSrc">
+                    <img :src="imgUrl" alt="" />
+                </div>
+                <div class="content" v-if="item.label && item.value">
+                    <span>{{ item.label }}</span>
+                    <span>{{ item.value }}</span>
+                </div>
+                <div class="text" v-if="item.text">{{ item.text }}</div>
+                <div class="percent" v-if="item.list.length != 0">
+                    <div class="title">{{ item.label }}</div>
+                    <div class="value">
+                        <div class="box" v-for="(items, ind) in item.list" :key="ind">
+                            <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
+                            <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 中间区域 -->
+        <div class="center-echart">
+            <div class="nav-title">
+                <div class="title">光纤测温系统温度实时监测</div>
+                <a-select style="width: 240px; margin-left: 10px" v-model="pointCode" allowClear class="code-mode-select"
+                    placeholder="请选择" @change="handleChange">
+                    <a-select-option v-for="device in pointList" :key="device.value" :value="device.value">{{ device.label
+                    }}
+                    </a-select-option>
+                </a-select>
+            </div>
+            <div class="echart-box">
+                <echartLine :echartDataGq="echartDataGq"></echartLine>
+            </div>
+        </div>
+        <!-- 底部区域 -->
+        <div class="bot-content">
+            <div class="title">
+                <div class="text">束管系统监测</div>
+                <div class="search">
+                    <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                        :placeholder="['开始时间', '终止时间']" @change="onDataChange" />
+
+                    <a-select style="width: 240px; margin-left: 10px" v-model="pointCode1" allowClear
+                        class="code-mode-select" placeholder="请选择" @change="handleChange1">
+                        <a-select-option v-for="device in pointList1" :key="device.value" :value="device.value">{{
+                            device.label }}
+                        </a-select-option>
+                    </a-select>
+                </div>
+            </div>
+            <div class="content">
+                <div class="box" v-for="(item, index) in contentList" :key="index">
+                    <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
+                        <div class="content-title">{{ items.title }}</div>
+                        <div class="content-item">
+                            <span>{{ items.label }}</span>
+                            <span class="bolds">{{ items.value }}</span>
+                        </div>
+                        <div class="content-item">
+                            <span>{{ items.label1 }}</span>
+                            <span class="bolds">{{ items.time }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="echart-box">
+                <echartLine1 :echartDataSg="echartDataSg"></echartLine1>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import imgUrl from '../../../../../assets/images/fire/pie.png'
+import echartLine from './common/echartLine.vue'
+import echartLine1 from './common/echartLine1.vue'
+import {  topList,pointList,echartDataGq,pointList1,contentList,echartDataSg} from '../fire.data'
+
+//光钎测温测点编号
+let pointCode = ref('')
+//束管监测-查询时间
+let TimeRange = reactive<any>([])
+//束管监测-测点编号
+let pointCode1 = ref('')
+
+
+//光钎测温测点编号选项切换
+function handleChange(val) {
+    console.log(val, '光钎测温测点编号')
+    pointCode.value = val
+}
+//束管监测-时间选项切换
+function onDataChange(value, dateString) {
+    TimeRange = [dateString[0], dateString[1]]
+    console.log(TimeRange, 'TimeRange')
+}
+//束管监测测点编号选项切换
+function handleChange1(val) {
+    pointCode1.value = val
+}
+//束管实时数据选项点击
+function getSgClick(items) {
+    console.log(items, '000000')
+    //   this.sgType = items.title
+    //   this.getSgjcHistoryDataList()
+}
+
+
+</script>
+
+<style lang="less" scoped>
+.fireWork {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .work-nav {
+        height: 115px;
+        width: 100%;
+        margin-bottom: 20px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .nav {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &:nth-child(1) {
+                flex: 1;
+                height: 100%;
+                border-right: 2px solid;
+                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            }
+
+            &:nth-child(2) {
+                flex: 1;
+                height: 100%;
+                border-right: 2px solid;
+                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            }
+
+            &:nth-child(3) {
+                flex: 1;
+                height: 100%;
+                border-right: 2px solid;
+                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            }
+
+            &:nth-child(4) {
+                flex: 0.6;
+                color: #b3b8cc;
+                font-size: 16px;
+                height: 100%;
+                border-right: 2px solid;
+                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            }
+
+            &:nth-child(5) {
+                flex: 1.4;
+                height: 100%;
+
+                .percent {
+                    width: 100%;
+                    height: 94px;
+                    padding: 0px 20px;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+
+                    .title {
+                        font-size: 14px;
+                        padding: 5px 0px;
+                        color: #b3b8cc;
+                        text-align: center;
+                    }
+
+                    .value {
+                        display: flex;
+                        justify-content: space-between;
+
+                        span {
+                            font-family: 'douyuFont';
+                            font-size: 18px;
+                        }
+                    }
+                }
+            }
+
+            .pic {
+                width: 94px;
+                height: 94px;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .content {
+                height: 94px;
+                margin-left: 15px;
+                color: #fff;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+
+                span {
+                    font-size: 14px;
+
+                    &:nth-child(1) {
+                        padding: 5px 0px;
+                        color: #b3b8cc;
+                    }
+
+                    &:nth-child(2) {
+                        font-family: 'douyuFont';
+                        font-size: 20px;
+                        color: #3df6ff;
+                    }
+                }
+            }
+        }
+
+        .nav:nth-child(1) .pic {
+            background: url('../../../../../assets/images/fire/max.svg') no-repeat;
+            background-position: 50% 50%;
+        }
+
+        .nav:nth-child(2) .pic {
+            background: url('../../../../../assets/images/fire/min.svg') no-repeat;
+            background-position: 50% 50%;
+        }
+
+        .nav:nth-child(3) .pic {
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
+            background-position: 50% 50%;
+        }
+    }
+
+    .center-echart {
+        width: 100%;
+        height: 242px;
+        padding: 15px;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+
+        .nav-title {
+            height: 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .title {
+                font-family: 'douyuFont';
+                font-size: 16px;
+                color: #3df6ff;
+            }
+        }
+
+        .echart-box {
+            width: 100%;
+            height: calc(100% - 30px);
+        }
+    }
+
+    .bot-content {
+        position: relative;
+        width: 100%;
+        height: calc(100% - 397px);
+        padding: 15px 15px 0px 15px;
+        box-sizing: border-box;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+
+        .title {
+            height: 32px;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+
+            .text {
+                height: 32px;
+                line-height: 32px;
+                font-family: 'douyuFont';
+                font-size: 16px;
+                color: #3df6ff;
+            }
+        }
+
+        .content {
+            height: calc(100% - 42px);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .box {
+                width: 100%;
+                height: 90px;
+                display: flex;
+                justify-content: space-between;
+
+                .box-item {
+                    position: relative;
+                    width: 242px;
+                    height: 100%;
+                    background: url('../../../../../assets/images/fire/14174.png') no-repeat;
+                    background-size: 100% 100%;
+                    cursor: pointer;
+
+                    .content-title {
+                        position: absolute;
+                        left: 50%;
+                        top: 0;
+                        transform: translate(-50%);
+                        color: #fff;
+                        font-size: 16px;
+                    }
+
+                    .content-item {
+                        position: absolute;
+                        width: 226px;
+                        height: 24px;
+                        line-height: 24px;
+                        padding: 0px 10px;
+                        box-sizing: border-box;
+                        color: #fff;
+                        font-size: 14px;
+                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
+                        background-size: 100% 100%;
+
+                        &:nth-child(2) {
+                            left: 50%;
+                            top: 26px;
+                            transform: translate(-50%);
+                            display: flex;
+                            justify-content: space-between;
+                        }
+
+                        &:nth-child(3) {
+                            left: 50%;
+                            top: 56px;
+                            transform: translate(-50%);
+                            display: flex;
+                            justify-content: space-between;
+                        }
+
+                        .bolds {
+                            font-family: 'douyuFont';
+                            color: #3df6ff;
+                            font-size: 12px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .echart-box {
+            position: absolute;
+            left: 50%;
+            top: 57px;
+            transform: translate(-50%, 0);
+            width: calc(100% - 514px);
+            height: calc(100% - 57px);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,321 @@
+<template>
+    <div class="mainWell">
+        <div class="work-nav">
+            <div class="nav" v-for="(item, index) in topOutList" :key="index">
+                <div class="pic" v-if="item.imgSrc">
+                    <img :src="imgUrl" alt="" />
+                </div>
+                <div class="content" v-if="item.label && item.value">
+                    <span>{{ item.label }}</span>
+                    <span>{{ item.value }}</span>
+                </div>
+                <div class="text" v-if="item.text">{{ item.text }}</div>
+            </div>
+        </div>
+        <div class="center-box">
+            <div class="box" v-for="(items, index) in tabList" :key="index">
+                <div class="title">
+                    <span class="label">{{ items.label }}</span>
+                    <span class="details">{{ `${items.details}>>` }}</span>
+                </div>
+                <div class="content">
+                    <a-table v-if="index == 0" ref="table" :row-selection="rowSelectionYw" size="small"
+                        :scroll="monitorscroll2" :columns="columns" :data-source="monitorlistYw" :pagination="false"
+                        :loading="loading">
+                        <span slot="action" slot-scope="text, record"> </span>
+                    </a-table>
+                    <a-table v-if="index == 1" ref="table1" :row-selection="rowSelectionHy" size="small"
+                        :scroll="monitorscroll2" :columns="columns" :data-source="monitorlistHy" :pagination="false"
+                        :loading="loading">
+                        <span slot="action" slot-scope="text, record"> </span>
+                    </a-table>
+                    <a-table v-if="index == 2" ref="table" :row-selection="rowSelectionPl" size="small"
+                        :scroll="monitorscroll2" :columns="columns" :data-source="monitorlistPl" :pagination="false"
+                        :loading="loading">
+                        <span slot="action" slot-scope="text, record"> </span>
+                    </a-table>
+                </div>
+            </div>
+        </div>
+        <div class="footer-box">
+            <div class="footer-title">
+                <div class="echart-label">实时温度监测</div>
+                <a-select style="width: 240px; margin-left: 10px" v-model="pointCode" allowClear class="code-mode-select"
+                    placeholder="请选择" @change="handleChange">
+                    <a-select-option v-for="device in pointOutList" :key="device.value" :value="device.value">{{
+                        device.label
+                    }}
+                    </a-select-option>
+                </a-select>
+            </div>
+            <div class="echart-content">
+                <echartLine2 :echartDataWd="echartDataWd"></echartLine2>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import { topOutList, tabList,columns, pointOutList, echartDataWd } from '../fire.data'
+import imgUrl from '../../../../../assets/images/fire/pie.png'
+import echartLine2 from './common/echartLine2.vue'
+
+//滚动条高度
+let monitorscroll2 = reactive({ y: 'calc(100% - 150px)' })
+//列表加载状态
+let loading = ref(false)
+
+//烟雾传感器列表数据
+let monitorlistYw = reactive([])
+//烟雾传感器列表当前选中数据
+let selectedRow = reactive([])
+//烟雾传感器-多选操作
+let rowSelectionYw = computed(() => {
+    return {
+        onChange: (selectedRowKeys, selectedRows) => {
+            selectedRow = selectedRows
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, '烟雾传感器: ', selectedRow)
+        },
+        getCheckboxProps: (record) => ({
+            props: {
+                realId: record.realId,
+            },
+        }),
+    }
+})
+
+//火焰传感器列表数据
+let monitorlistHy = reactive([])
+//火焰传感器当前选中数据
+let selectedRowHy = reactive([])
+//火焰传感器-多选操作
+let rowSelectionHy = computed(() => {
+    return {
+        onChange: (selectedRowKeys, selectedRows) => {
+            selectedRowHy = selectedRows
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, '火焰传感器: ', selectedRowHy)
+        },
+        getCheckboxProps: (record) => ({
+            props: {
+                realId: record.realId,
+            },
+        }),
+    }
+})
+
+//喷淋装置列表数据
+let monitorlistPl = reactive([])
+//喷淋装置当前选中数据
+let selectedRowPl = reactive([])
+//喷淋装置-多选操作
+let rowSelectionPl = computed(() => {
+    return {
+        onChange: (selectedRowKeys, selectedRows) => {
+            selectedRowPl = selectedRows
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, '喷淋装置: ', selectedRowPl)
+        },
+        getCheckboxProps: (record) => ({
+            props: {
+                realId: record.realId,
+            },
+        }),
+    }
+})
+
+//温度监测-测点编码
+let pointCode = ref('')
+
+//温度监测测点编号选项切换
+function handleChange(val) {
+    console.log(val, '测点编码')
+    pointCode.value = val
+    //   this.getGxcwHistoryDataByPointCodeLists()
+}
+
+
+</script>
+
+<style lang="less" scoped>
+.mainWell {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .work-nav {
+        height: 115px;
+        width: 100%;
+        margin-bottom: 20px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .nav {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &:nth-child(1) {
+                flex: 1;
+                height: 100%;
+                border-right: 2px solid;
+                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            }
+
+            &:nth-child(2) {
+                flex: 1;
+                height: 100%;
+                border-right: 2px solid;
+                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            }
+
+            &:nth-child(3) {
+                flex: 1;
+                height: 100%;
+                border-right: 2px solid;
+                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            }
+
+            &:nth-child(4) {
+                flex: 1.2;
+                color: #b3b8cc;
+                font-size: 16px;
+                height: 100%;
+                border-right: 2px solid;
+                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            }
+
+            &:nth-child(5) {
+                flex: 0.8;
+                color: #2b87ff;
+                font-size: 14px;
+                height: 100%;
+            }
+
+            .pic {
+                width: 94px;
+                height: 94px;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .content {
+                height: 94px;
+                margin-left: 15px;
+                color: #fff;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+
+                span {
+                    font-size: 14px;
+
+                    &:nth-child(1) {
+                        padding: 5px 0px;
+                        color: #b3b8cc;
+                    }
+
+                    &:nth-child(2) {
+                        font-family: 'douyuFont';
+                        font-size: 20px;
+                        color: #3df6ff;
+                    }
+                }
+            }
+        }
+
+        .nav:nth-child(1) .pic {
+            background: url('../../../../../assets/images/fire/max.svg') no-repeat;
+            background-position: 50% 50%;
+        }
+
+        .nav:nth-child(2) .pic {
+            background: url('../../../../../assets/images/fire/min.svg') no-repeat;
+            background-position: 50% 50%;
+        }
+
+        .nav:nth-child(3) .pic {
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
+            background-position: 50% 50%;
+        }
+    }
+
+    .center-box {
+        height: 355px;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .box {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            height: 100%;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+            background-size: 100% 100%;
+
+            &:nth-child(2) {
+                margin: 0px 20px;
+            }
+
+            .title {
+                width: 100%;
+                height: 40px;
+                padding: 0px 15px;
+                margin-bottom: 10px;
+                border-bottom: 1px solid #0c3c88;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .label {
+                    // font-family: 'douyuFont';
+                    font-size: 16px;
+                    color: #fff;
+                }
+
+                .details {
+                    font-size: 14px;
+                    color: #1f81df;
+                }
+            }
+
+            .content {
+                height: calc(100% - 60px);
+                margin-bottom: 10px;
+            }
+        }
+    }
+
+    .footer-box {
+        height: calc(100% - 510px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+
+        .footer-title {
+            height: 36px;
+            padding: 0px 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .echart-label {
+                font-size: 16px;
+                color: #fff;
+            }
+        }
+
+        .echart-content {
+            height: calc(100% - 36px);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+    <div class="otherMonitor">
+        <div class="container">
+            <a-table ref="table" :row-selection="rowSelection" size="small" :scroll="monitorscroll2" :columns="columnsOther"
+                :data-source="monitorlist" :pagination="false" :loading="loading">
+                <span slot="action" slot-scope="text, record">
+
+                </span>
+            </a-table>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import {columnsOther} from '../fire.data'
+
+//滚动条
+let monitorscroll2 = reactive({ y: 'calc(100% - 150px)' })
+
+//table列表
+let monitorlist = reactive([])
+//table加载状态
+let loading = ref(false)
+//table选中的数据
+let selectedRow = reactive([])
+//table复选框选择
+let rowSelection = computed(() => {
+    return {
+        onChange: (selectedRowKeys, selectedRows) => {
+            selectedRow = selectedRows
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRow)
+        },
+        getCheckboxProps: (record) => ({
+            props: {
+                realId: record.realId,
+            },
+        }),
+    }
+})
+
+</script>
+
+<style lang="less" scoped>
+.otherMonitor {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .container {
+        height: 100%;
+    }
+}
+</style>

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

@@ -0,0 +1,221 @@
+<template>
+    <div class="otherOut">
+        <div class="title">
+            <div :class="active == true ? 'btn1' : 'btn'" @click="btnClick">井下消防材料库</div>
+        </div>
+        <div class="content">
+            <div class="content-tab" v-for="(item, index) in tabList1" :key="index">
+                <div class="title">
+                    <span class="label">{{ item.label }}</span>
+                    <span class="details">{{ `${item.details}>>` }}</span>
+                </div>
+                <div class="content-item" v-if="index == 0">
+                    <a-table ref="table" :row-selection="rowSelectionWd" size="small" :scroll="monitorscroll2"
+                        :columns="columnWd" :data-source="monitorlistWd" :pagination="false" :loading="loading">
+                        <span slot="action" slot-scope="text, record"> </span>
+                    </a-table>
+                </div>
+                <div class="content-item" v-if="index == 1">
+                    <a-table ref="table1" :row-selection="rowSelectionJj" size="small" :scroll="monitorscroll2"
+                        :columns="columnsJj" :data-source="monitorlistJj" :pagination="false" :loading="loading">
+                        <span slot="action" slot-scope="text, record"> </span>
+                    </a-table>
+                </div>
+                <div class="content-item" v-if="index == 2">
+                    <a-table ref="table2" :row-selection="rowSelectionYw" size="small" :scroll="monitorscroll2"
+                        :columns="columnsYw" :data-source="monitorlistYw" :pagination="false" :loading="loading">
+                        <span slot="action" slot-scope="text, record"> </span>
+                    </a-table>
+                </div>
+                <div class="content-item" v-if="index == 3">
+                    <a-table ref="table3" :row-selection="rowSelectionJd" size="small" :scroll="monitorscroll2"
+                        :columns="columnsJd" :data-source="monitorlistJd" :pagination="false" :loading="loading">
+                        <span slot="action" slot-scope="text, record"></span>
+                    </a-table>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import { tabList1, columnWd, columnsJj, columnsYw, columnsJd } from '../fire.data'
+
+let active = ref(false) //井下消防材料库按钮切换
+//滚动条高度
+let monitorscroll2 = reactive({ y: 'calc(100% - 150px)' })
+//列表加载状态
+let loading = ref(false)
+
+
+//综采温度table列表
+let monitorlistWd = reactive([])
+//综采温度当前选中数据
+let selectedRow = reactive([])
+//综采温度-多选操作
+let rowSelectionWd = computed(() => {
+    return {
+        onChange: (selectedRowKeys, selectedRows) => {
+            selectedRow = selectedRows
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, '综采温度: ', selectedRow)
+        },
+        getCheckboxProps: (record) => ({
+            props: {
+                realId: record.realId,
+            },
+        }),
+    }
+})
+
+//掘进监测table列表
+let monitorlistJj = reactive([])
+
+//掘进监测当前选中数据
+let selectedRowJj = reactive([])
+//掘进监测-多选操作
+let rowSelectionJj = computed(() => {
+    return {
+        onChange: (selectedRowKeys, selectedRows) => {
+            selectedRowJj = selectedRows
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, '掘进监测: ', selectedRowJj)
+        },
+        getCheckboxProps: (record) => ({
+            props: {
+                realId: record.realId,
+            },
+        }),
+    }
+})
+
+
+//运输烟雾table列表
+let monitorlistYw = reactive([])
+
+//运输烟雾当前选中数据
+let selectedRowYw = reactive([])
+//运输烟雾-多选操作
+let rowSelectionYw = computed(() => {
+    return {
+        onChange: (selectedRowKeys, selectedRows) => {
+            selectedRowYw = selectedRows
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, '运输烟雾: ', selectedRowYw)
+        },
+        getCheckboxProps: (record) => ({
+            props: {
+                realId: record.realId,
+            },
+        }),
+    }
+})
+
+
+//机电硐室table列表
+let monitorlistJd = reactive([])
+//机电硐室当前选中数据
+let selectedRowJd = reactive([])
+//机电硐室-多选操作
+let rowSelectionJd = computed(() => {
+    return {
+        onChange: (selectedRowKeys, selectedRows) => {
+            selectedRowJd = selectedRows
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, '机电硐室: ', selectedRowJd)
+        },
+        getCheckboxProps: (record) => ({
+            props: {
+                realId: record.realId,
+            },
+        }),
+    }
+})
+
+function btnClick() {
+    active.value = !active.value
+}
+
+</script>
+
+<style lang="less" scoped>
+.otherOut {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .title {
+        height: 42px;
+        display: flex;
+        justify-content: flex-end;
+
+        .btn {
+            width: 120px;
+            height: 42px;
+            line-height: 42px;
+            text-align: center;
+            font-size: 14px;
+            color: #fff;
+            cursor: pointer;
+            background: url('../../../../../assets/images/fire/btn.png') no-repeat;
+            background-size: 100%;
+        }
+
+        .btn1 {
+            width: 120px;
+            height: 42px;
+            line-height: 42px;
+            text-align: center;
+            font-size: 14px;
+            color: #fff;
+            cursor: pointer;
+            background: url('../../../../../assets/images/fire/btn1.png') no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .content {
+        height: calc(100% - 42px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+
+        .content-tab {
+            width: calc(50% - 20px);
+            height: calc(50% - 20px);
+            margin: 10px;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+            background-size: 100% 100%;
+
+            .title {
+                width: 100%;
+                height: 40px;
+                padding: 0px 15px;
+                margin-bottom: 10px;
+                border-bottom: 1px solid #0c3c88;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .label {
+                    // font-family: 'douyuFont';
+                    font-size: 16px;
+                    color: #fff;
+                }
+
+                .details {
+                    font-size: 14px;
+                    color: #1f81df;
+                }
+            }
+
+            .content-item {
+                height: calc(100% - 60px);
+                margin-bottom: 10px;
+                overflow: hidden;
+                overflow-y: auto;
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,229 @@
+<template>
+    <div class="subStation">
+        <div class="title">
+            <div class="label">{{ `风险${warningLevel} : ${predictMsg}` }}</div>
+            <div :class="active ? 'btn1' : 'btn'" @click="btnClick">井下消防材料库</div>
+        </div>
+        <div class="content">
+            <div class="box" v-for="(item, index) in dataList" :key="index">
+                <div class="top-box">
+                    <div class="left">{{ item.fq }}</div>
+                    <div class="right">
+                        <span class="label">{{ item.label }}</span>
+                        <span class="value">{{ item.value }}</span>
+                    </div>
+                    <div class="right1">{{ item.btnText }}</div>
+                </div>
+                <div class="bot-box">
+                    <div class="content" v-for="(items, ind) in item.contentList" :key="ind">
+                        <div class="bg1">
+                            <img :src="items.imgSrc" alt="" />
+                            <div class="conts">
+                                <span class="text">{{ items.label }}</span>
+                                <span class="text1">{{ items.value }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import { dataList } from '../fire.data'
+
+//风险等级
+let warningLevel = ref(0)
+//风险等级描述
+let predictMsg = ref('')
+let active = ref(false)
+
+
+//井下消防材料库点击切换
+function btnClick() {
+    active.value = true
+}
+
+</script>
+
+<style lang="less" scoped>
+.subStation {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .title {
+        width: 100%;
+        height: 50px;
+        padding: 0px 30px;
+        box-sizing: border-box;
+        margin-bottom: 20px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .label {
+            font-size: 18px;
+            color: #b3b8cc;
+            font-weight: bold;
+        }
+
+        .btn {
+            width: 120px;
+            height: 36px;
+            line-height: 36px;
+            text-align: center;
+            font-size: 14px;
+            color: #fff;
+            background: url('../../../../../assets/images/fire/btn.png') no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+
+        .btn1 {
+            width: 120px;
+            height: 36px;
+            line-height: 36px;
+            text-align: center;
+            font-size: 14px;
+            color: #fff;
+            background: url('../../../../../assets/images/fire/btn1.png') no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+    }
+
+    .content {
+        height: calc(100% - 70px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+
+        .box {
+            width: 502px;
+            height: 210px;
+            margin: 10px;
+            background: url('../../../../../assets/images/fire/card.png') no-repeat;
+            background-size: 100% 100%;
+
+            .top-box {
+                position: relative;
+                height: 54px;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+
+                .left {
+                    width: 152px;
+                    height: 36px;
+                    line-height: 36px;
+                    padding-left: 20px;
+                    box-sizing: border-box;
+                    font-family: 'douyuFont';
+                    font-size: 14px;
+                    color: #3df6ff;
+                    background: url('../../../../../assets/images/fire/14.png') no-repeat;
+                }
+
+                .right {
+                    position: absolute;
+                    right: 128px;
+                    top: 50%;
+                    transform: translate(0, -50%);
+                    width: 120px;
+                    height: 36px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+                    background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+                    background-size: 100% 100%;
+
+                    .label {
+                        color: #fff;
+                        font-size: 14px;
+                    }
+
+                    .value {
+                        color: #3df6ff;
+                        font-size: 14px;
+                    }
+                }
+
+                .right1 {
+                    position: absolute;
+                    right: 10px;
+                    top: 50%;
+                    transform: translate(0, -50%);
+                    width: 100px;
+                    height: 36px;
+                    line-height: 36px;
+                    text-align: center;
+                    color: #fff;
+                    font-size: 14px;
+                    background: url('../../../../../assets/images/fire/btn.png') no-repeat;
+                    cursor: pointer;
+                }
+            }
+
+            .bot-box {
+                height: calc(100% - 54px);
+                padding: 15px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: flex-start;
+                align-items: flex-start;
+                flex-wrap: wrap;
+
+                .content {
+                    width: 50%;
+                    height: 50%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    .bg1 {
+                        position: relative;
+                        width: 232px;
+                        height: 50px;
+                        background: url('../../../../../assets/images/fire/bg-s.png') no-repeat;
+
+                        img {
+                            width: 18px;
+                            height: 18px;
+                            position: absolute;
+                            left: 19px;
+                            top: 10px;
+                        }
+
+                        .conts {
+                            position: absolute;
+                            left: 55px;
+                            top: 25px;
+                            width: 168px;
+                            height: 24px;
+                            display: flex;
+                            justify-content: space-between;
+
+                            .text {
+                                font-size: 14px;
+                                color: #fff;
+                            }
+
+                            .text1 {
+                                font-size: 14px;
+                                color: #3df6ff;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -160,7 +160,7 @@
        
       </div>
       <div class="fire-monitor">
-        <div class="monitor-title top" @click="showModal()">火灾监测</div>
+        <div class="monitor-title top" @click="showModal1()">火灾监测</div>
         <div class="container">
           <div class="item">
             <div class="icon"></div>
@@ -244,12 +244,15 @@
     </div>
   </div>
   <DetailModal v-model:visible="modalVisible" :monitor-data="dataSource" @register="register" @close="hideModal" />
+  <!-- 火灾监测弹框 -->
+  <DetailModalFire v-model:visible="modalVisible1" @register="register"  @close="hideModal1" />
 </template>
 
 <script setup lang="ts">
   import { ref, onMounted, onUnmounted, reactive } from 'vue';
   import customHeader from '/@/views/vent/comment/components/customHeader.vue';
   import DetailModal from './DetailModal.vue';
+  import DetailModalFire from './DetailModalFire.vue';//火灾监测弹窗
   import { warningList } from './alarm.api';
   import { iconsMonitor, chartsColumns, xAxisData, echartsDataSource, option, colors, fontColor, dustMonitor, gasMonitor, fireMonitor, fireMonitor1 } from './alarm.data'
   import ventBox1 from '/@/components/vent/ventBox1.vue'
@@ -260,6 +263,7 @@
   const alarmCounts = ref()
   const dataSource = ref([]);
   const modalVisible = ref(false)
+  const modalVisible1=ref(false)//控制火灾监测弹窗的显示与隐藏
 
   const resetScroll = (e: Event) => {
     if(e.target && e.target)
@@ -272,10 +276,19 @@
     modalVisible.value = true
     openModal()
   }
+  //打开火灾监测控制弹窗
+  function showModal1() {
+    modalVisible1.value = true
+    openModal()
+  }
 
   function hideModal() {
     modalVisible.value = false
   }
+  //关闭火灾监测控制弹窗
+  function hideModal1() {
+    modalVisible1.value = false
+  }
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;