1.解决需风量跳转问题

2.新增王庄预警监测页面

src/components/vent/micro/needAir.vue

@@ -5,23 +5,25 @@
   <div id="micro-need-air"></div>
 </template>
 <script lang="ts">
-  import { onMounted, onBeforeUnmount, defineComponent, ref } from 'vue';
+  import { onMounted, onBeforeUnmount, defineComponent, ref, unref } from 'vue';
   import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
   import { resetMicroContentWH } from '/@/utils/domUtils';
+  import { useRouter } from 'vue-router';
   export default defineComponent({
     name: 'NeedAir',
     setup() {
       const loading = ref(true);
+      const { currentRoute } = useRouter();
       onMounted(() => {
-        mountMicroApp('/micro-need-air');
+        mountMicroApp(unref(currentRoute).fullPath);
         resetMicroContentWH('micro-need-air', () => {
           loading.value = false;
         });
       });
 
-      // onBeforeUnmount(() => {
-      //   unmountMicroApps(['/micro-need-air']);
-      // });
+      onBeforeUnmount(() => {
+        unmountMicroApps(currentRoute);
+      });
 
       return { loading };
     },

src/layouts/default/sider/bottomSideder.vue

@@ -104,11 +104,13 @@
           url.location = 'https://swkhmi.shendong.vip:9043/#SW_CA'; //使这个窗口跳转到。
           return;
         }
-        if (currentRoute.value.path.startsWith('/micro-vent-3dModal')) {
-          go(path.path);
-        } else {
-          go(path.path);
-        }
+        // if (currentRoute.value.path.startsWith('/micro')) {
+        //   go(path.path);
+        //   // window.history.pushState({}, '', path.path);
+        // } else {
+        //   go(path.path);
+        // }
+        go(path.path);
 
         isShowMenu.value = 0;
       }
@@ -117,18 +119,24 @@
         if (userStore.getUserInfo.homePath) {
           go(userStore.getUserInfo.homePath);
         } else {
-          if (currentRoute.value.path.startsWith('/micro-vent-3dModal/dashboard/analysis')) {
-            if (glob.homePath == '/micro-vent-3dModal/dashboard/analysis' || PageEnum.BASE_HOME == '/micro-vent-3dModal/dashboard/analysis') {
-              actions.setGlobalState({ pageObj: { pageType: 'home' } });
-              go(glob.homePath || PageEnum.BASE_HOME);
-            }
+          if (currentRoute.value.path.startsWith('/micro-need-air')) {
+            window.history.pushState({}, '', glob.homePath || PageEnum.BASE_HOME);
           } else {
-            if (glob.homePath == '/model3D/home' || PageEnum.BASE_HOME == '/model3D/home') {
-              go(glob.homePath || PageEnum.BASE_HOME);
-              // location.reload()
-            }
             go(glob.homePath || PageEnum.BASE_HOME);
           }
+          // if (currentRoute.value.path.startsWith('/micro-vent-3dModal/dashboard/analysis')) {
+          //   if (glob.homePath == '/micro-vent-3dModal/dashboard/analysis' || PageEnum.BASE_HOME == '/micro-vent-3dModal/dashboard/analysis') {
+          //     actions.setGlobalState({ pageObj: { pageType: 'home' } });
+          //     go(glob.homePath || PageEnum.BASE_HOME);
+          //   }
+          // } else {
+          //   if (glob.homePath == '/model3D/home' || PageEnum.BASE_HOME == '/model3D/home') {
+          //     go(glob.homePath || PageEnum.BASE_HOME);
+          //     // location.reload()
+          //   }
+
+          //   go(glob.homePath || PageEnum.BASE_HOME);
+          // }
         }
       }
       function closeMenu(e?: Event) {

src/qiankun/index.ts

@@ -27,7 +27,10 @@ const mountMicroApp = (path, toPath?) => {
   const app = microApps.find((item) => path.startsWith(item['activeRule']));
   if (app) {
     if (activeApps[app['activeRule']]) {
-      return;
+      // return;
+      activeApps[app['activeRule']].unmount();
+      activeApps[app['activeRule']] = null;
+      delete activeApps[app['activeRule']];
     }
     const instance = activeApps[app['activeRule']];
     console.log('子应用实例--------------->', instance);
@@ -59,12 +62,16 @@ const mountMicroApp = (path, toPath?) => {
 
 // 卸载app的方法
 const unmountMicroApps = (multipleApp) => {
-  for (const key in activeApps) {
-    const isExist = multipleApp.some((name) => name == key);
-    if (isExist) {
-      activeApps[key].unmount();
-      activeApps[key] = null;
-      delete activeApps[key];
+  debugger;
+  if (JSON.stringify(activeApps) !== '{}' && multipleApp.some) {
+    for (const key in activeApps) {
+      const isExist = multipleApp.some((name) => name == key);
+      debugger;
+      if (isExist) {
+        activeApps[key].unmount();
+        activeApps[key] = null;
+        delete activeApps[key];
+      }
     }
   }
 };

src/router/guard/index.ts

@@ -40,10 +40,10 @@ function createPageGuard(router: Router) {
 
   router.beforeEach(async (to, from) => {
     if (from.path.startsWith('/micro-') && !to.path.startsWith('/micro-')) {
-      // unmountMicroApps(['/micro-vent-3dModal', '/micro-need-air']);
+      unmountMicroApps(['/' + from.path.split('/')[1]]);
+    } else if (from.path.startsWith('/micro-') && to.path.startsWith('/micro-') && from.path.split('/')[1] != to.path.split('/')[1]) {
       unmountMicroApps(['/' + from.path.split('/')[1]]);
     }
-
     // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
     to.meta.loaded = !!loadedPageMap.get(to.path);
     // Notify routing changes

src/views/vent/monitorManager/alarmFire/common.data.ts

@@ -0,0 +1,45 @@
+//顶部区域数据
+export const topList = [
+  {
+    id: 0,
+    label: '最高温度(°C)',
+    imgSrc: true,
+    value: '--',
+    text: '',
+    list: [],
+  },
+  {
+    id: 1,
+    label: '最低温度(°C)',
+    imgSrc: true,
+    value: '--',
+    text: '',
+    list: [],
+  },
+  {
+    id: 2,
+    label: '平均温度(°C)',
+    imgSrc: true,
+    value: '--',
+    text: '',
+    list: [],
+  },
+  { id: 3, imgSrc: false, label: '预警等级', value: '正常', text: '', list: [] },
+];
+
+//外因火灾-烟雾传感器table列
+export const columnsSmoke = [
+  { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
+  { rowIndex: 2, dataIndex: 'val', title: '值', type: '1', align: 'center' },
+  { rowIndex: 3, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
+  { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
+];
+
+//外因火灾-g光纤table列
+export const columnsFiber = [
+  { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
+  { rowIndex: 2, dataIndex: 'fmax', title: '最高温度(℃)', type: '1', align: 'center' },
+  { rowIndex: 3, dataIndex: 'favg', title: '平均温度(℃)', type: '1', align: 'center' },
+  { rowIndex: 3, dataIndex: 'fmin', title: '最低温度(℃)', type: '1', align: 'center' },
+  { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
+];

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

@@ -0,0 +1,406 @@
+<template>
+  <customHeader>火灾监测预警管控</customHeader>
+  <div class="fireWork">
+    <!-- 顶部区域 -->
+    <div class="work-nav">
+      <div class="nav" v-for="(item, index) in topListData" :key="index">
+        <div class="pic" v-if="item.imgSrc">
+          <img :src="imgUrl" alt="" />
+        </div>
+        <div class="content">
+          <span>{{ item['label'] }}</span>
+          <span>{{ item['value'] }}</span>
+          <span v-if="item['text']">{{ item['text'] }}</span>
+        </div>
+        <!-- <div class="text" v-if="item.text">{{ item.text }}</div>
+        <div class="percent" v-if="item.list.length != 0">
+          <div class="title">{{ item.label }}</div>
+          <div class="value">
+            <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
+              <span style="color: #b3b8cc">{{ `${items['label']} :` }}</span>
+              <span style="color: #3df6ff; margin-left: 10px">{{ `${items['value']}%` }}</span>
+            </div>
+          </div>
+        </div> -->
+      </div>
+    </div>
+    <!-- 中间区域 -->
+    <div class="center-echart">
+      <div class="table-item">
+        <div></div>
+        <a-table size="small" :scroll="{ y: 340 }" :columns="columnsSmoke" :data-source="monitorlistYw" :pagination="false">
+          <template #bodyCell="{ column, record }">
+            <a-tag v-if="column.dataIndex === 'warnLevel_str'" color="green">正常</a-tag>
+          </template>
+        </a-table>
+      </div>
+      <div class="table-item">
+        <div></div>
+        <a-table size="small" :scroll="{ y: 340 }" :columns="columnsFiber" :data-source="monitorlistCf" :pagination="false" />
+      </div>
+    </div>
+    <!-- 底部区域 -->
+    <div class="bot-content">
+      <div v-for="(item, index) in 13" :key="index" class="qf-box">
+        <div class="label">球阀{{ item < 10 ? '0' + item : item }}(<span>关</span>)</div>
+        <div class="modal">烟雾模式</div>
+        <div class="state">烟雾: <span class="text">正常</span></div>
+        <div class="btn-box" @click="handler"><span>开启</span></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, reactive } from 'vue';
+  import imgUrl from '../../../../assets/images/fire/pie.png';
+  import { topList, columnsSmoke, columnsFiber } from './common.data';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import { cloneDeep } from 'lodash-es';
+  import dayjs from 'dayjs';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  const monitorlistYw = ref(
+    new Array(13).fill({
+      strinstallpos: '',
+      val: 0,
+      warnLevel_str: '正常',
+      readTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    })
+  );
+  const monitorlistCf = ref(
+    new Array(9).fill({
+      strinstallpos: '',
+      fmax: 0,
+      favg: 0,
+      fmin: 0,
+      readTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    })
+  );
+
+  const topListData = ref(topList);
+
+  function getSource() {
+    const readTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
+    // 模拟光纤测温分区数据
+    const ywList: any[] = [];
+    monitorlistYw.value.filter((item, index) => {
+      const obj = cloneDeep(item);
+      obj.strinstallpos = `烟雾${index < 10 ? '0' + index : index}`;
+      obj.readTime = readTime;
+      ywList.push(obj);
+    });
+    monitorlistYw.value = ywList;
+
+    const gxList: any[] = [];
+    let totalNum = 0;
+    monitorlistCf.value.filter((item, index) => {
+      const obj = cloneDeep(item);
+      switch (index) {
+        case 0:
+          obj.strinstallpos = '0m-150m';
+          break;
+        case 1:
+          obj.strinstallpos = '150m-300m';
+          break;
+        case 2:
+          obj.strinstallpos = '300m-450m';
+          break;
+        case 3:
+          obj.strinstallpos = '450m-600m';
+          break;
+        case 4:
+          obj.strinstallpos = '600m-750m';
+          break;
+        case 5:
+          obj.strinstallpos = '750m-900m';
+          break;
+        case 6:
+          obj.strinstallpos = '900m-1050m';
+          break;
+        case 7:
+          obj.strinstallpos = '1050m-1200m';
+          break;
+        case 8:
+          obj.strinstallpos = '1200m-1350m';
+          break;
+        default:
+          break;
+      }
+      obj.fmax = (26 + Math.random() * 3).toFixed(1);
+      obj.fmin = (22 + Math.random() * 2).toFixed(1);
+      obj.favg = (24 + Math.random() * 2).toFixed(1);
+      totalNum += Number(obj.favg);
+      obj.readTime = readTime;
+      gxList.push(obj);
+    });
+
+    const maxObj = gxList.reduce(function (pre, curv) {
+      return pre.fmax < curv.fmax ? curv : pre;
+    });
+    const minObj = gxList.reduce(function (pre, curv) {
+      return pre.fmin < curv.fmin ? pre : curv;
+    });
+    monitorlistCf.value = gxList;
+    const topData = cloneDeep(topList);
+    topData[0].value = maxObj.fmax;
+    topData[0].text = maxObj.strinstallpos;
+    topData[1].value = minObj.fmin;
+    topData[1].text = minObj.strinstallpos;
+
+    topData[2].value = (totalNum / 9).toFixed(1);
+    topListData.value = topData;
+  }
+
+  function getData(flag) {
+    setTimeout(
+      () => {
+        getSource();
+        getData(false);
+      },
+      flag ? 0 : 5000
+    );
+  }
+  function handler() {
+    createMessage.warning('暂无权限！');
+  }
+  onMounted(() => {
+    getData(true);
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  .fireWork {
+    width: 100%;
+    height: calc(100% - 65px);
+    padding: 20px;
+    box-sizing: border-box;
+    margin-top: 65px;
+
+    .work-nav {
+      height: 15%;
+      width: 100%;
+      margin-bottom: 20px;
+      // background: url('../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border: 1px solid rgba(25, 237, 255, 0.4);
+      box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+      background: rgba(0, 0, 0, 0.06666667);
+
+      .nav {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:nth-child(1) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(2) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(3) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(4) {
+          flex: 0.6;
+          color: #b3b8cc;
+          font-size: 16px;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
+
+        &:nth-child(5) {
+          flex: 1.4;
+          height: 100%;
+
+          .percent {
+            width: 100%;
+            height: 82%;
+            padding: 0px 20px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .title {
+              font-size: 14px;
+              padding: 5px 0px;
+              color: #b3b8cc;
+              text-align: center;
+            }
+
+            .value {
+              display: flex;
+              justify-content: space-between;
+
+              span {
+                font-family: 'douyuFont';
+                font-size: 18px;
+              }
+            }
+          }
+        }
+
+        .pic {
+          width: 100px;
+          height: 100px;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .content {
+          height: 82%;
+          margin-left: 15px;
+          color: #fff;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          span {
+            font-size: 14px;
+            display: inline-block;
+            width: 100px;
+            &:nth-child(1) {
+              padding: 5px 0px;
+              color: #b3b8cc;
+            }
+
+            &:nth-child(2) {
+              font-family: 'douyuFont';
+              font-size: 16px;
+              color: #3df6ff;
+            }
+          }
+        }
+      }
+
+      .nav:nth-child(1) .pic {
+        background: url('../../../../assets/images/fire/max.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
+
+      .nav:nth-child(2) .pic {
+        background: url('../../../../assets/images/fire/min.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
+
+      .nav:nth-child(3) .pic {
+        background: url('../../../../assets/images/fire/pj.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
+    }
+
+    .center-echart {
+      width: 100%;
+      height: 400px;
+      padding: 10px;
+      margin-bottom: 20px;
+      box-sizing: border-box;
+      border: 1px solid rgba(25, 237, 255, 0.4);
+      box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+      background: rgba(0, 0, 0, 0.06666667);
+      display: flex;
+
+      .nav-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title {
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
+          // color: #3df6ff;
+        }
+      }
+      .table-item {
+        height: 100%;
+        :deep(.zxm-table-body table) {
+          height: 340px !important;
+        }
+        &:last-child {
+          margin-left: 10px;
+        }
+      }
+    }
+
+    .bot-content {
+      position: relative;
+      width: 100%;
+      height: 260px;
+      padding: 10px 10px 0px 10px;
+      box-sizing: border-box;
+      border: 1px solid rgba(25, 237, 255, 0.4);
+      box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+      background: rgba(0, 0, 0, 0.06666667);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 30px;
+
+      .qf-box {
+        width: 120px;
+        height: 180px;
+        border: 1px solid rgba(25, 237, 255, 0.4);
+        box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.3);
+        background: rgba(0, 0, 0, 0.06666667);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        .label {
+          font-size: 20px;
+          font-weight: 600;
+          color: #3df6ff;
+          margin-bottom: 10px;
+          span {
+            color: rgb(255, 174, 0);
+          }
+        }
+        .text {
+          color: rgb(0, 255, 0);
+        }
+      }
+    }
+  }
+  .btn-box {
+    width: 100px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    span {
+      display: inline-block;
+      padding: 2px 18px;
+      background: #007099;
+      border-radius: 2px;
+      border: 1px solid rgb(125, 230, 249);
+      cursor: pointer;
+      &:hover {
+        background: #005574;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,425 @@
+<template>
+  <div class="warnZb">
+    <div ref="coord" class="coords" :style="{ width: widthV, height: heightV }">
+      <div class="triangle-x"></div>
+      <div class="triangle-y"></div>
+      <div class="coord-dw">
+        <div class="dw-item" :style="{ bottom: `${coordDw[0]}px` }">30~40℃</div>
+        <div class="dw-item" :style="{ bottom: `${coordDw[1]}px` }">50~60℃</div>
+        <div class="dw-item" :style="{ bottom: `${coordDw[2]}px` }">70~80℃</div>
+        <div class="dw-item" :style="{ bottom: `${coordDw[3]}px` }">90~110℃</div>
+        <div class="dw-item" :style="{ bottom: `${coordDw[4]}px` }">130~160℃</div>
+        <div class="dw-item" :style="{ bottom: `${coordDw[5]}px` }">210~350℃</div>
+      </div>
+      <div class="coord-bj">
+        <div class="bj-qfq" :style="{ width: widthCanvas < 600 ? '180px' : '401px' }">
+          <div class="left-jt"></div>
+          <div class="line"></div>
+          <div class="right-jt"></div>
+          <div class="text">潜伏期</div>
+        </div>
+        <div class="bj-zrq" :style="{ width: widthCanvas < 600 ? '360px' : '699px' }">
+          <div class="left-jt"></div>
+          <div class="line"></div>
+          <div class="right-jt"></div>
+          <div class="text">自热期</div>
+        </div>
+        <div class="bj-rsq" :style="{ width: widthCanvas < 600 ? '90px' : '305px' }">
+          <div class="left-jt"></div>
+          <div class="line"></div>
+          <div class="text">燃烧期</div>
+        </div>
+      </div>
+      <div class="coord-area" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
+        <canvas id="myCanvas" :width="widthCanvas" :height="heightCanvas"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, onMounted, watch } from 'vue';
+
+  let props = defineProps({
+    widthV: {
+      type: String,
+      default: '',
+    },
+    heightV: {
+      type: String,
+      default: '',
+    },
+    coordDw: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    widthCanvas: {
+      type: Number,
+      default: 0,
+    },
+    heightCanvas: {
+      type: Number,
+      default: 0,
+    },
+  });
+
+  let coord = ref(null);
+  let lengY = ref(0);
+  //与x,y轴相交最大值坐标
+  let maxY = ref(0);
+  let maxX = ref(0);
+  function getAreas() {
+    if (coord.value) {
+      let width = coord.value.offsetWidth;
+      let height = coord.value.offsetHeight;
+      lengY.value = Math.ceil((height - 10) / 10);
+    }
+  }
+  function getCanvas() {
+    // 获取canvas元素
+    let canvas = document.getElementById('myCanvas');
+    let ctx = canvas.getContext('2d');
+    let x = 0;
+    let step = props.widthCanvas < 600 ? 0.02 : 0.05; // 设置每次递增的长度
+    let y = props.widthCanvas < 600 ? 280 : 250; // 初始y坐标
+    // 设置线条样式
+    ctx.strokeStyle = '#3df6ff'; // 红色线条
+    ctx.lineWidth = 2; // 线宽为2
+    // 初始化曲线数据
+    let xValues: any[] = [];
+    let yValues: any[] = [];
+    for (let i = 0; i < 30000; i++) {
+      x += step;
+      if (props.widthCanvas < 600) {
+        y -= (step * Math.random() * i) / 15000; // 随机增加长度，使曲线更加平滑
+      } else {
+        y -= (step * Math.random() * i) / 30000; // 随机增加长度，使曲线更加平滑
+      }
+
+      xValues[i] = x;
+      yValues[i] = y;
+    }
+
+    // 绘制递增曲线
+    ctx.beginPath();
+    ctx.moveTo(xValues[0], yValues[0]);
+    for (var i = 1; i < xValues.length; i++) {
+      ctx.lineTo(xValues[i], yValues[i]);
+    }
+    ctx.stroke();
+
+    //标记点1
+    ctx.beginPath();
+    ctx.arc(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000], 6, 0, 2 * Math.PI);
+    ctx.fillStyle = '#ff6363';
+    ctx.fill();
+    //标记点2
+    ctx.beginPath();
+    ctx.arc(xValues[props.widthCanvas < 600 ? 9000 : 8000], yValues[props.widthCanvas < 600 ? 9000 : 8000], 6, 0, 2 * Math.PI);
+    ctx.fillStyle = '#ff6363';
+    ctx.fill();
+    //标记点3
+    ctx.beginPath();
+    ctx.arc(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000], 6, 0, 2 * Math.PI);
+    ctx.fillStyle = '#ff6363';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#ff6363';
+    ctx.fillText('临界', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 10, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+    //标记点4
+    ctx.beginPath();
+    ctx.arc(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000], 6, 0, 2 * Math.PI);
+    ctx.fillStyle = '#ff6363';
+    ctx.fill();
+    //标记点5
+    ctx.beginPath();
+    ctx.arc(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000], 6, 0, 2 * Math.PI);
+    ctx.fillStyle = '#ff6363';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#ff6363';
+    ctx.fillText('征兆', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 10, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+    //标记点5
+    ctx.beginPath();
+    ctx.arc(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000], 6, 0, 2 * Math.PI);
+    ctx.fillStyle = '#ff6363';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#ff6363';
+    ctx.fillText('火灾', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 10, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+
+    // 设置线条样式（颜色、宽度等）
+    ctx.strokeStyle = 'rgba(179, 223, 246,.3)';
+    ctx.lineWidth = 1;
+    ctx.lineCap = 'round';
+    // 定义虚线模式：[线段长度, 间隔长度]
+    ctx.setLineDash([5, 5]);
+    //绘制标记点1线条-x
+    ctx.beginPath();
+    ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 4500 : 4000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000]); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    //绘制标记点1线条-y
+    ctx.beginPath();
+    ctx.moveTo(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 4500 : 4000], canvas.height); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    // 在线条附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = 'rgba(179, 223, 246)';
+    if (props.widthCanvas < 600) {
+      ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 70, yValues[props.widthCanvas < 600 ? 4500 : 4000] + 25); // 文字位置略微偏上，以便于文字与点对齐
+      ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 70, yValues[props.widthCanvas < 600 ? 4500 : 4000] - 5); // 文字位置略微偏上，以便于文字与点对齐
+    } else {
+      ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 120, yValues[props.widthCanvas < 600 ? 4500 : 4000] + 18); // 文字位置略微偏上，以便于文字与点对齐
+      ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 120, yValues[props.widthCanvas < 600 ? 4500 : 4000] - 5); // 文字位置略微偏上，以便于文字与点对齐
+    }
+    //绘制标记点2线条-x
+    ctx.beginPath();
+    ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 9000 : 8000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 9000 : 8000], yValues[props.widthCanvas < 600 ? 9000 : 8000]); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    //绘制标记点2线条-y
+    ctx.beginPath();
+    ctx.moveTo(xValues[props.widthCanvas < 600 ? 9000 : 8000], yValues[props.widthCanvas < 600 ? 9000 : 8000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 9000 : 8000], canvas.height); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    // 在线条附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = 'rgba(179, 223, 246)';
+    if (props.widthCanvas < 600) {
+      ctx.fillText('自热阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 160, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 12); // 文字位置略微偏上，以便于文字与点对齐
+    } else {
+      ctx.fillText('自热阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 320, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 12); // 文字位置略微偏上，以便于文字与点对齐
+    }
+    //绘制标记点3线条-x
+    ctx.beginPath();
+    ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    //绘制标记点3线条-y
+    ctx.beginPath();
+    ctx.moveTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], canvas.height); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    // 在线条附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = 'rgba(179, 223, 246)';
+    if (props.widthCanvas < 600) {
+      ctx.fillText('临界阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 250, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 20); // 文字位置略微偏上，以便于文字与点对齐
+    } else {
+      ctx.fillText('临界阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 520, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 20); // 文字位置略微偏上，以便于文字与点对齐
+    }
+    //绘制标记点4线条-x
+    ctx.beginPath();
+    ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    //绘制标记点4线条-y
+    ctx.beginPath();
+    ctx.moveTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], canvas.height); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    // 在线条附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = 'rgba(179, 223, 246)';
+    if (props.widthCanvas < 600) {
+      ctx.fillText('热解阶段', xValues[props.widthCanvas < 600 ? 18000 : 16000] - 340, yValues[props.widthCanvas < 600 ? 18000 : 16000] - 25); // 文字位置略微偏上，以便于文字与点对齐
+    } else {
+      ctx.fillText('热解阶段', xValues[props.widthCanvas < 600 ? 18000 : 16000] - 720, yValues[props.widthCanvas < 600 ? 18000 : 16000] - 25); // 文字位置略微偏上，以便于文字与点对齐
+    }
+    //绘制标记点5线条-x
+    ctx.beginPath();
+    ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    //绘制标记点5线条-y
+    ctx.beginPath();
+    ctx.moveTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], canvas.height); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    // 在线条附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = 'rgba(179, 223, 246)';
+    if (props.widthCanvas < 600) {
+      ctx.fillText('裂变阶段', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 430, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 30); // 文字位置略微偏上，以便于文字与点对齐
+    } else {
+      ctx.fillText('裂变阶段', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 920, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+    }
+    //绘制标记点6线条-x
+    ctx.beginPath();
+    ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    //绘制标记点6线条-y
+    ctx.beginPath();
+    ctx.moveTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 开始绘制的点
+    ctx.lineTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], canvas.height); // 结束绘制的点
+    ctx.stroke(); // 进行绘制
+    // 在线条附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = 'rgba(179, 223, 246)';
+    if (props.widthCanvas < 600) {
+      ctx.fillText('燃烧阶段', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 520, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+    } else {
+      ctx.fillText('燃烧阶段', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 1020, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
+    }
+  }
+
+  onMounted(() => {
+    getAreas();
+    getCanvas();
+  });
+</script>
+
+<style lang="less" scoped>
+  .warnZb {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .blast-title {
+      position: absolute;
+      left: 50%;
+      top: 24px;
+      transform: translate(-50%, 0);
+      font-size: 12px;
+      color: #fff;
+    }
+
+    .coords {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      border-left: 1px solid #006c9d;
+      border-bottom: 1px solid #006c9d;
+      transform: translate(-50%, -55%);
+
+      .triangle-x {
+        position: absolute;
+        left: -6px;
+        top: -15px;
+        width: 0px;
+        height: 0px;
+        border-top: 5px solid transparent;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-bottom: 10px solid #006c9d;
+      }
+
+      .triangle-y {
+        position: absolute;
+        right: -15px;
+        bottom: -6px;
+        width: 0px;
+        height: 0px;
+        border-top: 5px solid transparent;
+        border-left: 10px solid #006c9d;
+        border-right: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+      }
+
+      .coord-dw {
+        position: absolute;
+        left: -100px;
+        top: 0;
+        width: 100px;
+        height: 100%;
+
+        .dw-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          color: #006c9d;
+          font-size: 14px;
+        }
+      }
+
+      .coord-bj {
+        display: flex;
+        position: absolute;
+        left: -1px;
+        bottom: -50px;
+        width: 100%;
+        height: 50px;
+        border-left: 1px solid #006c9d;
+
+        .left-jt {
+          position: absolute;
+          left: 0px;
+          top: 30px;
+          width: 0px;
+          height: 0px;
+          border-top: 5px solid transparent;
+          border-right: 10px solid #006c9d;
+          border-left: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+        }
+
+        .right-jt {
+          position: absolute;
+          right: 0px;
+          top: 30px;
+          width: 0px;
+          height: 0px;
+          border-top: 5px solid transparent;
+          border-left: 10px solid #006c9d;
+          border-right: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+        }
+
+        .text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 14px;
+          color: #db9753;
+        }
+
+        .line {
+          width: calc(100% - 30px);
+          height: 1px;
+          position: absolute;
+          left: 14px;
+          top: 34px;
+          background-color: #006c9d;
+        }
+
+        .bj-qfq {
+          flex-shrink: 0;
+          position: relative;
+          // width: 401px;
+          height: 100%;
+          border-right: 1px dashed #006c9d;
+        }
+
+        .bj-zrq {
+          flex-shrink: 0;
+          position: relative;
+          // width: 699px;
+          height: 100%;
+          border-right: 1px dashed #006c9d;
+        }
+
+        .bj-rsq {
+          flex-shrink: 0;
+          position: relative;
+          // width: 415px;
+          height: 100%;
+        }
+      }
+
+      .coord-area {
+        position: absolute;
+        left: 0;
+        top: 10px;
+      }
+    }
+  }
+</style>

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

@@ -1,10 +1,21 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情 ${currentTime}`" width="1200px" @ok="handleOk"
-    @cancel="handleCancel" wrapClassName="bundle-modal">
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="`束管监测详情 ${currentTime}`"
+    width="1200px"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    wrapClassName="bundle-modal"
+  >
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item"
-          :class="{ 'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
           <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
@@ -17,8 +28,7 @@
             </div>
             <div class="item-container">
               <div class="title">一氧化碳</div>
-              <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-'
-                }} <span>ppm</span> </div>
+              <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-' }} <span>ppm</span> </div>
             </div>
           </div>
           <div class="top-item">
@@ -27,8 +37,7 @@
             </div>
             <div class="item-container">
               <div class="title">二氧化碳</div>
-              <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val :
-                '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -37,8 +46,7 @@
             </div>
             <div class="item-container">
               <div class="title">甲烷</div>
-              <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval :
-                '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -47,8 +55,7 @@
             </div>
             <div class="item-container">
               <div class="title">乙烯</div>
-              <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val :
-                '-' }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val : '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -57,8 +64,7 @@
             </div>
             <div class="item-container">
               <div class="title">乙炔</div>
-              <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-'
-                }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
@@ -67,8 +73,7 @@
             </div>
             <div class="item-container">
               <div class="title">氧气</div>
-              <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-'
-                }} <span>%</span></div>
+              <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item warning-box">
@@ -77,20 +82,31 @@
             </div>
             <div class="item-container">
               <div class="title">风险等级</div>
-              <div :class="{
-                value1: posMonitor['internalFireWarnLevel'] == '1',
-                value2: posMonitor['internalFireWarnLevel'] == '2',
-                value3: posMonitor['internalFireWarnLevel'] == '3',
-                value4: posMonitor['internalFireWarnLevel'] == '4',
-                value5: posMonitor['internalFireWarnLevel'] == '5',
-                value6: posMonitor['internalFireWarnLevel'] == '6',
-              }">{{ posMonitor['internalFireWarnLevel'] == '1' ? '正常' : posMonitor['internalFireWarnLevel'] == '2' ?
-                '低风险' :
-                posMonitor['internalFireWarnLevel'] == '3' ? '一般风险' : posMonitor['internalFireWarnLevel'] == '4' ?
-                  '较高风险' :
-                  posMonitor['internalFireWarnLevel'] == '5' ? '高风险' : posMonitor['internalFireWarnLevel'] == '6' ? '报警' :
-                    '-'
-                }}</div>
+              <div
+                :class="{
+                  value1: posMonitor['internalFireWarnLevel'] == '1',
+                  value2: posMonitor['internalFireWarnLevel'] == '2',
+                  value3: posMonitor['internalFireWarnLevel'] == '3',
+                  value4: posMonitor['internalFireWarnLevel'] == '4',
+                  value5: posMonitor['internalFireWarnLevel'] == '5',
+                  value6: posMonitor['internalFireWarnLevel'] == '6',
+                }"
+                >{{
+                  posMonitor['internalFireWarnLevel'] == '1'
+                    ? '正常'
+                    : posMonitor['internalFireWarnLevel'] == '2'
+                    ? '低风险'
+                    : posMonitor['internalFireWarnLevel'] == '3'
+                    ? '一般风险'
+                    : posMonitor['internalFireWarnLevel'] == '4'
+                    ? '较高风险'
+                    : posMonitor['internalFireWarnLevel'] == '5'
+                    ? '高风险'
+                    : posMonitor['internalFireWarnLevel'] == '6'
+                    ? '报警'
+                    : '-'
+                }}</div
+              >
             </div>
           </div>
           <div class="top-item warning-box">
@@ -104,11 +120,20 @@
           </div>
         </div>
         <div class="right-bottom">
-          <span class="base-title">设备监测曲线&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' :
-            '' }}</span></span>
+          <span class="base-title"
+            >设备监测曲线&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' : '' }}</span></span
+          >
           <div class="echarts-box">
-            <BarAndLine class="echarts-line" :xAxisPropType="xAxisPropType" :dataSource="historyList" height="100%"
-              width="65%" :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
+            <BarAndLine
+              class="echarts-line"
+              :xAxisPropType="xAxisPropType"
+              :dataSource="historyList"
+              height="100%"
+              width="65%"
+              :chartsColumns="chartsColumns"
+              :option="echatsOption"
+              chartsType="listMonitor"
+            />
 
             <!-- 爆炸三角形 -->
             <div style="width: 35%; height: 100%; margin: 0px auto">
@@ -121,426 +146,426 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import blastDelta from './blastDelta.vue';
-import { SvgIcon } from '/@/components/Icon';
-import dayjs from 'dayjs';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { chartsColumnList } from '../device.data';
-import { listdays, getHistoryData } from '../device.api';
-
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, blastDelta },
-  props: {
-    dataSource: { type: Array },
-    activeID: { type: String },
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([]);
-    const historyList = ref<any[]>([]);
-    const posList = ref<any[]>([]);
-    const posMonitor = shallowRef({});
-
-    const echatsOption = {
-      grid: {
-        top: '29%',
-        left: '3',
-        right: '45',
-        bottom: '3%',
-        containLabel: true,
-      },
-      toolbox: {
-        feature: {},
-      },
-    };
-
-    const chartsColumnArr = getTableHeaderColumns('bundletube_chart');
-    const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
-    const xAxisPropType = ref('ttime');
-    const [register, { setModalProps, closeModal }] = useModalInner();
-
-    function handleVisibleChange(visible) {
-      if (visible) {
+  import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import blastDelta from './blastDelta.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import dayjs from 'dayjs';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { chartsColumnList } from '../device.data';
+  import { listdays, getHistoryData } from '../device.api';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, blastDelta },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const historyList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
+
+      const echatsOption = {
+        grid: {
+          top: '29%',
+          left: '3',
+          right: '45',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumnArr = getTableHeaderColumns('bundletube_chart');
+      const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
+      const xAxisPropType = ref('ttime');
+      const [register, { setModalProps, closeModal }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
+        getListdays();
       }
-    }
 
-    // 选择监测
-    function selectDevice(id) {
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-      setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id;
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-      getListdays();
-    }
-
-    function handleOk(e) {
-      e.preventDefault();
-      closeModal();
-    }
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-    function handleCancel(e) {
-      e.preventDefault();
-      closeModal();
-    }
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-    //获取历史数据
-    async function getListdays() {
-      if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
-        xAxisPropType.value = 'ttime';
-        const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss');
-        const ttime_end = dayjs().format('YYYY-MM-DD HH:mm:ss');
-        const pageNo = 1;
-        const pageSize = 100;
-        const skip = 8;
-        const strtype = posMonitor.value.deviceType;
-        let res = await listdays({
-          ttime_begin,
-          ttime_end,
-          pageNo,
-          pageSize,
-          skip,
-          strtype,
-          column: 'createTime',
-          gdeviceid: activeDeviceID.value,
-        });
-        console.log(res, '束管历史数据');
-        let data = res.datalist.records;
-        if (data.length != 0) {
-          data.forEach((el) => {
-            Object.assign(el, el.readData);
-          });
-        }
-        historyList.value = data;
-      } else {
-        const params = {
-          pageNum: 1,
-          pageSize: 100,
-          startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
-          endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
-          deviceId: activeDeviceID.value,
-          interval: '1h',
-          isEmployee: true,
-        };
-        xAxisPropType.value = 'time';
-        const result = await getHistoryData({ ...params });
-        if (result['records'].length != 0) {
-          result['records'].forEach((el) => {
-            el.ch2val = el.C2H4;
-            el.chval = el.C2H2;
-            el.co2val = el.CO2;
-            el.coval = el.CO;
-            el.gasval = el.CH4;
-            el.o2val = el.O2;
+      //获取历史数据
+      async function getListdays() {
+        if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
+          xAxisPropType.value = 'ttime';
+          const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss');
+          const ttime_end = dayjs().format('YYYY-MM-DD HH:mm:ss');
+          const pageNo = 1;
+          const pageSize = 100;
+          const skip = 8;
+          const strtype = posMonitor.value.deviceType;
+          let res = await listdays({
+            ttime_begin,
+            ttime_end,
+            pageNo,
+            pageSize,
+            skip,
+            strtype,
+            column: 'createTime',
+            gdeviceid: activeDeviceID.value,
           });
+          console.log(res, '束管历史数据');
+          let data = res.datalist.records;
+          if (data.length != 0) {
+            data.forEach((el) => {
+              Object.assign(el, el.readData);
+            });
+          }
+          historyList.value = data;
+        } else {
+          const params = {
+            pageNum: 1,
+            pageSize: 100,
+            startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
+            endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
+            deviceId: activeDeviceID.value,
+            interval: '1h',
+            isEmployee: true,
+          };
+          xAxisPropType.value = 'time';
+          const result = await getHistoryData({ ...params });
+          if (result['records'].length != 0) {
+            result['records'].forEach((el) => {
+              el.ch2val = el.C2H4;
+              el.chval = el.C2H2;
+              el.co2val = el.CO2;
+              el.coval = el.CO;
+              el.gasval = el.CH4;
+              el.o2val = el.O2;
+            });
+          }
+          historyList.value = result['records'];
         }
-        historyList.value = result['records'];
       }
-    }
 
-    watch(
-      [() => props.dataSource, () => props.activeID],
-      ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-        // if (newActiveID != oldActiveID) {
-        //   activeDeviceID.value = newActiveID as string;
-        // }
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-        deviceList.value = newDataSource?.filter((item: any, index) => {
-          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-            // activeDeviceID.value = item.deviceID;
-            posMonitor.value = Object.assign(item, item.readData);
-          }
-          item.readTime = item.readTime?.substring(11);
-          return item;
-        });
-      },
-      { immediate: true }
-    );
-    onMounted(() => {
-      getListdays();
-    });
-    return {
-      register,
-      model: modelRef,
-      currentTime,
-      handleVisibleChange,
-      selectDevice,
-      handleOk,
-      handleCancel,
-      deviceList,
-      historyList,
-      activeDeviceID,
-      posMonitor,
-      echatsOption,
-      posList,
-      chartsColumns,
-      xAxisPropType,
-    };
-  },
-});
+      watch(
+        [() => props.dataSource, () => props.activeID],
+        ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+          // if (newActiveID != oldActiveID) {
+          //   activeDeviceID.value = newActiveID as string;
+          // }
+          activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+          deviceList.value = newDataSource?.filter((item: any, index) => {
+            if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+              // activeDeviceID.value = item.deviceID;
+              posMonitor.value = Object.assign(item, item.readData);
+            }
+            item.readTime = item.readTime?.substring(11);
+            return item;
+          });
+        },
+        { immediate: true }
+      );
+      onMounted(() => {
+        getListdays();
+      });
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        historyList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+        xAxisPropType,
+      };
+    },
+  });
 </script>
 <style lang="less">
-.bundle-modal {
-  .zxm-modal {
-    top: 30px !important;
+  .bundle-modal {
+    .zxm-modal {
+      top: 30px !important;
+    }
   }
-}
 </style>
 
 <style lang="less" scoped>
-.fiber-modal {
-  width: 100%;
-  height: 650px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .modal-left {
-    width: 200px;
-    height: 100%;
-    overflow-y: auto;
-    background: #ffffff11;
-    padding: 5px;
-    border-radius: 5px;
-
-    .active-device-title {
-      color: aqua;
-    }
+  .fiber-modal {
+    width: 100%;
+    height: 650px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .active-device-title {
+        color: aqua;
+      }
 
-    .link-item {
-      position: relative;
-      cursor: pointer;
-      line-height: 30px;
-      padding-left: 30px;
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
 
-      span:hover {
-        color: #89ffff;
-      }
+        span:hover {
+          color: #89ffff;
+        }
 
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 8px;
-        height: 8px;
-        top: 12px;
-        left: 10px;
-        transform: rotateZ(45deg) skew(10deg, 10deg);
-        background: #45d3fd;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
       }
     }
-  }
 
-  .modal-right {
-    width: calc(100% - 220px);
-    overflow-y: auto;
-
-    .base-title {
-      line-height: 32px;
-      position: relative;
-      padding-left: 20px;
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 4px;
-        height: 12px;
-        top: 4px;
-        left: 10px;
-        background: #45d3fd;
-        border-radius: 4px;
-      }
-    }
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
 
-    .right-top {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      margin-bottom: 10px;
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
+        }
+      }
 
-      .top-item {
-        width: 220px;
-        height: 100px;
+      .right-top {
         display: flex;
         flex-direction: row;
-        justify-content: center;
-        border: 1px solid rgba(25, 237, 255, 0.4);
-        box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
-        background: rgba(0, 0, 0, 0.06666666666666667);
-        padding-top: 20px;
-        margin: 10px 0;
-
-        .icon {
-          margin-right: 10px;
-          margin-top: 5px;
-          color: #fdb146;
-        }
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-bottom: 10px;
 
-        .item-container {
-          width: 110px;
+        .top-item {
+          width: 220px;
+          height: 100px;
           display: flex;
-          flex-direction: column;
+          flex-direction: row;
           justify-content: center;
-
-          div {
-            text-align: center;
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
+          padding-top: 20px;
+          margin: 10px 0;
+
+          .icon {
+            margin-right: 10px;
+            margin-top: 5px;
+            color: #fdb146;
           }
 
-          .title {
-            font-size: 18px;
-          }
+          .item-container {
+            width: 110px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
 
-          .value {
-            text-shadow: 0 0 25px #00fbfe;
-            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-            font-style: normal;
-            background-size: cover;
-            font-family: electronicFont;
-            font-size: 30px;
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            position: relative;
-            top: -8px;
-
-            span {
-              font-family: Arial, Helvetica, sans-serif;
+            div {
+              text-align: center;
+            }
+
+            .title {
               font-size: 18px;
-              color: aliceblue;
+            }
+
+            .value {
+              text-shadow: 0 0 25px #00fbfe;
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+              font-style: normal;
+              background-size: cover;
+              font-family: electronicFont;
+              font-size: 30px;
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+              position: relative;
+              top: -8px;
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 18px;
+                color: aliceblue;
+              }
             }
           }
         }
-      }
 
-      .warning-box {
-        padding-top: 0px;
+        .warning-box {
+          padding-top: 0px;
 
-        .icon {
-          margin-top: 20px;
+          .icon {
+            margin-top: 20px;
 
-          :deep(.icon-style) {
-            width: auto;
-            color: #fdb146;
+            :deep(.icon-style) {
+              width: auto;
+              color: #fdb146;
+            }
           }
-        }
 
-        .warning-value {
-          font-size: 18px;
-          color: #61ddb1;
-        }
+          .warning-value {
+            font-size: 18px;
+            color: #61ddb1;
+          }
 
-        .value1 {
-          font-size: 18px;
-          color: rgb(145, 230, 9) !important;
-        }
+          .value1 {
+            font-size: 18px;
+            color: rgb(145, 230, 9) !important;
+          }
 
-        .value2 {
-          font-size: 18px;
-          color: rgb(0, 242, 255) !important;
-        }
+          .value2 {
+            font-size: 18px;
+            color: rgb(0, 242, 255) !important;
+          }
 
-        .value3 {
-          font-size: 18px;
-          color: #ffff35 !important;
-        }
+          .value3 {
+            font-size: 18px;
+            color: #ffff35 !important;
+          }
 
-        .value4 {
-          font-size: 18px;
-          color: #ffbe69 !important;
-        }
+          .value4 {
+            font-size: 18px;
+            color: #ffbe69 !important;
+          }
 
-        .value5 {
-          font-size: 18px;
-          color: #ff6f00 !important;
-        }
+          .value5 {
+            font-size: 18px;
+            color: #ff6f00 !important;
+          }
 
-        .value6 {
-          font-size: 18px;
-          color: #ff0000 !important;
+          .value6 {
+            font-size: 18px;
+            color: #ff0000 !important;
+          }
         }
       }
-    }
 
-    .right-center {
-      margin-top: 20px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+      .right-center {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
 
-      .table-box {
-        position: relative;
-        width: 500px;
-        height: 250px;
-      }
+        .table-box {
+          position: relative;
+          width: 500px;
+          height: 250px;
+        }
 
-      .warning-box {
-        width: calc(100% - 520px);
+        .warning-box {
+          width: calc(100% - 520px);
 
-        .warning-container {
-          width: 100%;
-          height: convert;
-          background: #009acd00;
+          .warning-container {
+            width: 100%;
+            height: convert;
+            background: #009acd00;
 
-          :deep(.dv-scroll-board) {
-            .row-item {
-              height: 40px !important;
-              line-height: 40px !important;
-            }
+            :deep(.dv-scroll-board) {
+              .row-item {
+                height: 40px !important;
+                line-height: 40px !important;
+              }
 
-            .header-item {
-              border-top: 1px solid #91e9fe !important;
-              border-bottom: 1px solid #91e9fe !important;
+              .header-item {
+                border-top: 1px solid #91e9fe !important;
+                border-bottom: 1px solid #91e9fe !important;
+              }
             }
           }
         }
       }
-    }
 
-    .right-bottom {
-      margin-top: 20px;
+      .right-bottom {
+        margin-top: 20px;
 
-      .echarts-box {
-        width: 100%;
-        height: 320px;
-        position: relative;
-        display: flex;
-        justify-content: space-between;
+        .echarts-box {
+          width: 100%;
+          height: 320px;
+          position: relative;
+          display: flex;
+          justify-content: space-between;
 
-        .echarts-line {
-          width: calc(100% + 80px);
-          position: absolute;
+          .echarts-line {
+            width: calc(100% + 80px);
+            position: absolute;
+          }
         }
       }
     }
   }
-}
 
-:deep(.zxm-table-body) {
-  border: 1px solid rgba(57, 232, 255, 0.2) !important;
+  :deep(.zxm-table-body) {
+    border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-  .zxm-table-tbody>tr>td {
-    border: none !important;
+    .zxm-table-tbody > tr > td {
+      border: none !important;
+    }
   }
-}
 
-:deep(.zxm-table-cell) {
-  border-right: none !important;
-}
+  :deep(.zxm-table-cell) {
+    border-right: none !important;
+  }
 </style>