[Feat 0000] 保德配置更新、爆炸三角形和图表模块问题修复与更改

src/views/vent/home/configurable/components/ModuleBD.vue

@@ -118,7 +118,6 @@
   watch(
     () => props.data,
     (d) => {
-      console.log('debug data changed');
       init(d);
       selectedDeviceID.value = options.value[0]?.value;
     },

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -24,10 +24,12 @@
   );
 
   const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
 
   // 核心方法，生成适用与 echart 的选项，这个方法需要适配 chart 类型的每种子类型
   const genChartOption = () => {
+    const inst = getInstance();
+    const domWidth = inst ? inst.getWidth() : 500;
     // 依据每一个图表配置生成图表选项
     const { yAxis = [], xAxis = [], legend, order, type, sortBy, series } = props.chartConfig;
     const textStyle = {
@@ -432,7 +434,7 @@
             type: 'category',
             axisLabel: {
               interval: 0,
-              width: 800 / get(baseSeries, '[0].data.length', 1),
+              width: (domWidth - 100) / get(baseSeries, '[0].data.length', 1),
               overflow: 'break',
             },
           };

src/views/vent/home/configurable/index.vue

@@ -23,28 +23,26 @@
         </div>
         <div class="tcontent-c">
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
-            {{ data.dustAllMineWarn }}
+            {{ data.fireAllMineWarn }}
           </div>
-          <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
+          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
         </div>
         <div class="tcontent-r">
-          <div>粉尘</div>
+          <div>火灾</div>
           <div>风险</div>
         </div>
       </div>
     </div>
-    <!-- <div class="right-t">
-      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
-        <div>智能</div>
-        <div>灌浆系统</div>
+    <div class="right-t">
+      <div class="tcontent-l" @click="redirectTo('/grout-home')">
+        <div>智能注浆系统</div>
       </div>
-      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
-        <div>智能</div>
-        <div>注氟系统</div>
+      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
+        <div>智能注氮系统</div>
       </div>
-    </div> -->
+    </div>
     <ModuleBD
-      v-for="cfg in configs"
+      v-for="cfg in cfgs"
       :key="cfg.deviceType"
       :show-style="cfg.showStyle"
       :module-data="cfg.moduleData"
@@ -53,45 +51,67 @@
       :data="data"
       :visible="true"
     />
-    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+    <ModuleBDDual
+      v-if="cfgA && cfgB"
+      :show-style="cfgA.showStyle"
+      :module-data-a="cfgA.moduleData"
+      :module-name-a="cfgA.moduleName"
+      :device-type-a="cfgA.deviceType"
+      :module-data-b="cfgB.moduleData"
+      :module-name-b="cfgB.moduleName"
+      :device-type-b="cfgB.deviceType"
+      :data="data"
+      :visible="true"
+    />
+    <div style="width: 1000px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue';
+  import { computed, onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
+  import ModuleBDDual from './components/ModuleBDDual.vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getDisHome } from './configurable.api';
-  import { testConfigBDDust } from './configurable.data.bd';
+  import { testConfigBDFire } from './configurable.data.bd';
   // import { getToken } from '/@/utils/auth';
 
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData } = useInitPage('保德煤矿粉尘灾害预警系统');
+  const cfgs = computed(() =>
+    configs.value.filter((_, index) => {
+      return index !== 4 && index !== 3;
+    })
+  );
+  const cfgA = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 3;
+    })
+  );
+  const cfgB = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 4;
+    })
+  );
+  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('保德煤矿火灾预警系统');
   let interval: number | undefined;
   // function hideLoading() {
   //   loading.value = false;
   // }
   onMounted(() => {
-    // fetchConfigs('BD_dust').then(() => {
-    configs.value = testConfigBDDust;
+    // fetchConfigs('BD_fire').then(() => {
+    configs.value = testConfigBDFire;
 
     getDisHome({
-      dataList: configs.value
-        .map((e) => e.deviceType)
-        .concat('dustAllMineWarn')
-        .join(','),
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
     }).then(updateData);
     // });
     // setInterval(() => {
     //   getDisHome({
-    //     dataList: configs.value
-    //       .map((e) => e.deviceType)
-    //       .concat('dustAllMineWarn')
-    //       .join(','),
+    //     dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
     //   }).then(updateData);
     // }, 60000);
   });
@@ -99,6 +119,10 @@
   onUnmounted(() => {
     clearInterval(interval);
   });
+
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -132,13 +156,13 @@
 
     // .module-left {
     //   position: absolute;
-    //   width: 450px;
+    //   width: 440px;
     //   height: 280px;
     //   left: 0;
     // }
     // .module-right {
     //   position: absolute;
-    //   width: 450px;
+    //   width: 440px;
     //   height: 280px;
     //   right: 0;
     // }
@@ -176,7 +200,7 @@
   .left-t {
     position: absolute;
     height: 115px;
-    top: 50px;
+    top: 40px;
     left: 10px;
     width: 440px;
     background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
@@ -236,10 +260,11 @@
   }
   .right-t {
     position: absolute;
-    height: 160px;
-    right: 0;
+    // height: 160px;
+    height: 115px;
+    right: 10px;
     top: 50px;
-    width: 450px;
+    width: 440px;
     background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
     background-color: #000723;
     background-repeat: no-repeat;
@@ -248,44 +273,31 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
+    z-index: 1;
 
     .tcontent-l {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
-      background-size:
-        auto 100%,
-        auto auto;
+      background-image: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
+      background-size: auto 100%;
       background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
+      background-position: center;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
+      padding-top: 85px;
     }
     .tcontent-r {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
-      background-size:
-        auto 100%,
-        auto auto;
+      background-image: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
+      background-size: auto 100%;
       background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
+      background-position: center;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
+      padding-top: 85px;
     }
   }
 

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

@@ -3,20 +3,16 @@
     <!-- <div class="blast-title">爆炸三角形</div> -->
     <div ref="coord" class="coords">
       <div class="coord-lineY">
-        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10"
-          :key="item"></div>
+        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
       </div>
       <div class="coord-labelY">
-        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind
-          == 0 ? maxY : '' }}</div>
+        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 0 ? maxY : '' }}</div>
       </div>
       <div class="coord-lineX">
-        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15"
-          :key="item"></div>
+        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15" :key="item"></div>
       </div>
       <div class="coord-labelX">
-        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind
-          == 14 ? maxX : '' }}</div>
+        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind == 14 ? maxX : '' }}</div>
       </div>
       <div class="line-AB" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
         <canvas id="myCanvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
@@ -38,333 +34,236 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, watch } from 'vue';
-
-let props = defineProps({
-  posMonitor: {
-    type: Object,
-    default: () => {
-      return {};
+  import { ref, reactive, onMounted, watch } from 'vue';
+
+  let props = defineProps({
+    posMonitor: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
-  },
-  canvasSize: {
-    type: Object,
-    default: () => {
-      return { width: 348, height: 245 };
+    canvasSize: {
+      type: Object,
+      default: () => {
+        return { width: 348, height: 245 };
+      },
     },
-  },
-});
-let coord = ref(null);
-let lengY = ref(0);
-//与x,y轴相交最大值坐标
-let maxY = ref(0);
-let maxX = ref(0);
-let maxY1 = ref(0);
-let maxX1 = ref(0);
-
-//A点坐标
-let coordinateA = reactive({
-  x: 0,
-  y: 0,
-});
-//B点坐标
-let coordinateB = reactive({
-  x: 0,
-  y: 0,
-});
-//E点坐标
-let coordinateE = reactive({
-  x: 0,
-  y: 0,
-});
-//F点坐标
-let coordinateF = reactive({
-  x: 0,
-  y: 0,
-});
-//G点坐标
-let coordinateG = reactive({
-  x: 0,
-  y: 0,
-});
-
-let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
-
-function getAreas() {
-  if (coord.value) {
-    let width = coord.value.offsetWidth;
-    let height = coord.value.offsetHeight;
-    lengY.value = Math.ceil((height - 10) / 10);
+  });
+  let coord = ref(null);
+  let lengY = ref(0);
+  //与x,y轴相交最大值坐标
+  let maxY = ref(0);
+  let maxX = ref(0);
+  let maxY1 = ref(0);
+  let maxX1 = ref(0);
+
+  //A点坐标
+  let coordinateA = reactive({
+    x: 0,
+    y: 0,
+  });
+  //B点坐标
+  let coordinateB = reactive({
+    x: 0,
+    y: 0,
+  });
+  //E点坐标
+  let coordinateE = reactive({
+    x: 0,
+    y: 0,
+  });
+  //F点坐标
+  let coordinateF = reactive({
+    x: 0,
+    y: 0,
+  });
+  //G点坐标
+  let coordinateG = reactive({
+    x: 0,
+    y: 0,
+  });
+
+  let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
+
+  function getAreas() {
+    if (coord.value) {
+      let width = coord.value.offsetWidth;
+      let height = coord.value.offsetHeight;
+      lengY.value = Math.ceil((height - 10) / 10);
+    }
   }
-}
-//根据A,B,E,G等点坐标绘制爆炸三角形
-function getBlast() {
-  maxY.value = getCoordABY(0);
-  // maxX.value = getCoordABX(0);
-  maxX.value = 50;
-  // 获取canvas元素
-  let canvas = document.getElementById('myCanvas');
-  let ctx = canvas.getContext('2d');
-  let scalcY = canvas.height / maxY.value;
-  let scalcX = canvas.width / maxX.value;
-
-  //绘制AB点线条
-  ctx.beginPath();
-  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
-  ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
-  ctx.strokeStyle = '#000';
-  ctx.stroke(); // 进行绘制
-
-  //绘制AE线条
-  ctx.beginPath();
-  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
-  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
-  ctx.strokeStyle = '#000';
-  ctx.stroke(); // 进行绘制
-
-  //绘制BE线条
-  ctx.beginPath();
-  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
-  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
-  ctx.strokeStyle = '#000';
-  ctx.stroke(); // 进行绘制
-
-  //绘制A点与坐标轴连线
-  ctx.beginPath();
-  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
-  ctx.lineTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 结束绘制的点
-  ctx.strokeStyle = '#000';
-  ctx.stroke(); // 进行绘制
-
-  //绘制B点与坐标轴连线
-  ctx.beginPath();
-  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
-  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
-  ctx.strokeStyle = '#000';
-  ctx.stroke(); // 进行绘制
-
-  //绘制E,F线条
-  ctx.beginPath();
-  ctx.moveTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 开始绘制的点
-  ctx.lineTo(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY); // 结束绘制的点
-  ctx.strokeStyle = '#000';
-  ctx.stroke(); // 进行绘制
-
-  //绘制GE线条
-  ctx.beginPath();
-  ctx.moveTo(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY); // 开始绘制的点
-  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
-  ctx.strokeStyle = '#000';
-  ctx.stroke(); // 进行绘制
-
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  let pointData = [
-    {
-      arr: [
-        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
-        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
-        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
-        { x: 0, y: canvas.height - maxY.value * scalcY },
-      ],
-      color: 'rgb(1, 127, 2, .9)',
-    },
-    {
-      arr: [
-        { x: 0, y: canvas.height }, //原点
-        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
-        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
-        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
-      ],
-      color: 'rgb(127, 254, 2, .9)',
-    },
-    {
-      arr: [
-        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
-        { x: maxX.value * scalcX, y: canvas.height },
-        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
-        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
-      ],
-      color: 'rgb(255, 255, 0, .9)',
-    },
-    {
-      arr: [
-        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
-        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
-        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
-      ],
-      color: 'rgb(255, 0, 0, .9)',
-    },
-  ];
+  //根据A,B,E,G等点坐标绘制爆炸三角形
+  function getBlast() {
+    maxY.value = getCoordABY(0);
+    // maxX.value = getCoordABX(0);
+    maxX.value = 50;
+    // 获取canvas元素
+    let canvas = document.getElementById('myCanvas');
+    let ctx = canvas.getContext('2d');
+    let scalcY = canvas.height / maxY.value;
+    let scalcX = canvas.width / maxX.value;
+
+    //绘制AB点线条
+    ctx.beginPath();
+    ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+    ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
+    ctx.strokeStyle = '#000';
+    ctx.stroke(); // 进行绘制
 
-  pointData.forEach((item, index) => {
+    // 标记点A
     ctx.beginPath();
-    ctx.moveTo(item.arr[0].x, item.arr[0].y);
-    item.arr.forEach((items, ind) => {
-      if (ind != 0) {
-        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
-      }
-    });
-    ctx.closePath();
-    ctx.fillStyle = item.color;
+    ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
-    ctx.strokeStyle = 'transparent';
-    ctx.lineWidth = 1;
-    ctx.stroke();
-  });
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
 
-  // 标记点A
-  ctx.beginPath();
-  ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
-  ctx.fillStyle = '#eee';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#fff';
-  ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
-
-  //标记点B
-  ctx.beginPath();
-  ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
-  ctx.fillStyle = '#eee';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#fff';
-  ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
-
-  //标记点E
-  ctx.beginPath();
-  ctx.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
-  ctx.fillStyle = '#eee';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#fff';
-  ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
-
-  //标记点G
-  ctx.beginPath();
-  ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
-  ctx.fillStyle = '#eee';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#fff';
-  ctx.fillText('G', coordinateG.x * scalcX + 5, canvas.height - coordinateG.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
-  //标记点F
-  ctx.beginPath();
-  ctx.arc(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY, 1, 0, 2 * Math.PI);
-  ctx.fillStyle = '#eee';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#fff';
-  ctx.fillText('F', coordinateF.x * scalcX + 10, canvas.height - coordinateF.y * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
-  //标记点
-  ctx.beginPath();
-  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
-  ctx.fillStyle = 'blue';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#fff';
-  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
-}
-//绘制不爆炸三角形
-function getUnblast() {
-  maxY.value = 21;
-  maxX.value = 50;
-  // 获取canvas元素
-  let canvas = document.getElementById('myCanvas');
-  let ctx = canvas.getContext('2d');
-  let scalcY = canvas.height / maxY.value;
-  let scalcX = canvas.width / maxX.value;
-
-  //绘制AB点线条
-  ctx.beginPath();
-  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
-  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
-  ctx.strokeStyle = '#000';
-  ctx.stroke(); // 进行绘制
-
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  let pointData = [
-    {
-      arr: [
-        { x: 0, y: canvas.height }, //原点
-        { x: 0, y: canvas.height - maxY.value * scalcY }, //A
-        { x: maxX.value * scalcX, y: canvas.height }, //B
-      ],
-      color: 'rgb(127, 254, 2, .9)',
-    },
-  ];
+    //标记点B
+    ctx.beginPath();
+    ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
 
-  pointData.forEach((item, index) => {
+    //标记点E
     ctx.beginPath();
-    ctx.moveTo(item.arr[0].x, item.arr[0].y);
-    item.arr.forEach((items, ind) => {
-      if (ind != 0) {
-        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
-      }
+    ctx.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+
+    //标记点G
+    ctx.beginPath();
+    ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('G', coordinateG.x * scalcX + 5, canvas.height - coordinateG.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+    //标记点F
+    ctx.beginPath();
+    ctx.arc(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('F', coordinateF.x * scalcX + 10, canvas.height - coordinateF.y * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+    //标记点
+    ctx.beginPath();
+    ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+    ctx.fillStyle = 'blue';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+  }
+
+  //绘制不爆炸三角形
+  function getUnblast() {
+    maxY.value = 21;
+    maxX.value = 100;
+    // 获取canvas元素
+    let canvas = document.getElementById('myCanvas');
+    let ctx = canvas.getContext('2d');
+    let scalcY = canvas.height / maxY.value;
+    let scalcX = canvas.width / maxX.value;
+
+    //绘制AB点线条
+    ctx.beginPath();
+    ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+    ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
+    ctx.strokeStyle = '#000';
+    ctx.stroke(); // 进行绘制
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    let pointData = [
+      {
+        arr: [
+          { x: 0, y: canvas.height }, //原点
+          { x: 0, y: canvas.height - maxY.value * scalcY }, //A
+          { x: maxX.value * scalcX, y: canvas.height }, //B
+        ],
+        color: 'rgb(127, 254, 2, .9)',
+      },
+    ];
+
+    pointData.forEach((item, index) => {
+      ctx.beginPath();
+      ctx.moveTo(item.arr[0].x, item.arr[0].y);
+      item.arr.forEach((items, ind) => {
+        if (ind != 0) {
+          ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+        }
+      });
+      ctx.closePath();
+      ctx.fillStyle = item.color;
+      ctx.fill();
+      ctx.strokeStyle = 'transparent';
+      ctx.lineWidth = 1;
+      ctx.stroke();
     });
-    ctx.closePath();
-    ctx.fillStyle = item.color;
+
+    // 标记点A
+    ctx.beginPath();
+    ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
-    ctx.strokeStyle = 'transparent';
-    ctx.lineWidth = 1;
-    ctx.stroke();
-  });
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('A', 10, canvas.height - maxY.value * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+    // 标记点B
+    ctx.beginPath();
+    ctx.arc(maxX.value * scalcX, canvas.height, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('B', maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上，以便于文字与点对齐
+    //标记点
+    ctx.beginPath();
+    ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+    ctx.fillStyle = 'blue';
+    ctx.fill();
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+  }
+  //根据横坐标获取直线AB纵坐标
+  function getCoordABY(params) {
+    return Math.ceil(
+      ((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params -
+        parseFloat(coordinateA.x) * parseFloat(coordinateB.y) +
+        parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+        (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
+    );
+  }
+  //根据纵坐标获取直线AB横坐标
+  function getCoordABX(params1) {
+    return Math.floor(
+      ((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 +
+        parseFloat(coordinateA.x) * parseFloat(coordinateB.y) -
+        parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+        (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
+    );
+  }
 
-  // 标记点A
-  ctx.beginPath();
-  ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
-  ctx.fillStyle = '#eee';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#fff';
-  ctx.fillText('A', 10, canvas.height - maxY.value * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
-  // 标记点B
-  ctx.beginPath();
-  ctx.arc(maxX.value * scalcX, canvas.height, 1, 0, 2 * Math.PI);
-  ctx.fillStyle = '#eee';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#fff';
-  ctx.fillText('B', maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上，以便于文字与点对齐
-  //标记点
-  ctx.beginPath();
-  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
-  ctx.fillStyle = 'blue';
-  ctx.fill();
-  // 在点附近添加文字
-  ctx.font = '12px Arial';
-  ctx.fillStyle = '#fff';
-  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
-}
-//根据横坐标获取直线AB纵坐标
-function getCoordABY(params) {
-  return Math.ceil(
-    ((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params -
-      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) +
-      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
-    (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
-  );
-}
-//根据纵坐标获取直线AB横坐标
-function getCoordABX(params1) {
-  return Math.floor(
-    ((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 +
-      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) -
-      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
-    (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
-  );
-}
-
-watch(
-  () => props.posMonitor,
-  (newV, oldV) => {
+  // 单独写为一个方法是为了兼容未初始化时已经有数据的情况下也能正确显示三角形
+  function watchHandler(newV) {
     if (newV.btTriBlast) {
       maxY1.value = parseFloat(newV.o2val);
       maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
@@ -388,157 +287,156 @@ watch(
         getBlast();
       }
     }
-  },
-  { deep: true }
-);
+  }
 
-onMounted(() => {
-  getAreas();
-});
+  watch(() => props.posMonitor, watchHandler, { deep: true });
+
+  onMounted(() => {
+    getAreas();
+    watchHandler(props.posMonitor);
+  });
 </script>
 
 <style lang="less" scoped>
-.blastDelta {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  // .blast-title {
-  //   position: absolute;
-  //   left: 50%;
-  //   top: 24px;
-  //   transform: translate(-50%, 0);
-  //   font-size: 12px;
-  //   color: #fff;
-  // }
-
-  .line-legend {
-    position: absolute;
-    left: 50%;
-    top: 20px;
-    width: 75%;
-    height: 20px;
-    transform: translate(-50%, 0);
-    display: flex;
-    justify-content: space-around;
-
-    .legend-box {
+  .blastDelta {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    // .blast-title {
+    //   position: absolute;
+    //   left: 50%;
+    //   top: 24px;
+    //   transform: translate(-50%, 0);
+    //   font-size: 12px;
+    //   color: #fff;
+    // }
+
+    .line-legend {
+      position: absolute;
+      left: 50%;
+      top: 20px;
+      width: 75%;
+      height: 20px;
+      transform: translate(-50%, 0);
       display: flex;
-     
-      height: 100%;
-      justify-content: center;
-      align-items: center;
-      font-size: 12px;
-
-      &:nth-child(1) {
-        flex: 1;
-        .legend-icon {
-          width: 10px;
-          height: 10px;
-          background-color: #7ffe02;
-          margin-right: 5px;
+      justify-content: space-around;
+
+      .legend-box {
+        display: flex;
+
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+
+        &:nth-child(1) {
+          flex: 1;
+          .legend-icon {
+            width: 10px;
+            height: 10px;
+            background-color: #7ffe02;
+            margin-right: 5px;
+          }
         }
-      }
 
-      &:nth-child(2) {
-        flex: 1.5;
-        .legend-icon {
-          width: 10px;
-          height: 10px;
-          background-color: #017f02;
-          margin-right: 5px;
+        &:nth-child(2) {
+          flex: 1.5;
+          .legend-icon {
+            width: 10px;
+            height: 10px;
+            background-color: #017f02;
+            margin-right: 5px;
+          }
         }
-      }
 
-      &:nth-child(3) {
-        flex:1;
-        .legend-icon {
-          width: 10px;
-          height: 10px;
-          background-color: #ff0000;
-          margin-right: 5px;
+        &:nth-child(3) {
+          flex: 1;
+          .legend-icon {
+            width: 10px;
+            height: 10px;
+            background-color: #ff0000;
+            margin-right: 5px;
+          }
         }
-      }
 
-      &:nth-child(4) {
-        flex:1;
-        .legend-icon {
-          width: 10px;
-          height: 10px;
-          background-color: #ffff00;
-          margin-right: 5px;
+        &:nth-child(4) {
+          flex: 1;
+          .legend-icon {
+            width: 10px;
+            height: 10px;
+            background-color: #ffff00;
+            margin-right: 5px;
+          }
         }
       }
     }
-  }
-
-
-  .coords {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 90%;
-    height: 80%;
-    border-left: 1px solid #006c9d;
-    border-bottom: 1px solid #006c9d;
-    transform: translate(-45%, -46%);
-
-    .coord-lineY {
-      position: absolute;
-      left: -5px;
-      top: 10px;
-      width: 5px;
-      height: calc(100% - 10px);
-    }
 
-    .coord-labelY {
+    .coords {
       position: absolute;
-      left: -25px;
-      top: -5px;
-      width: 20px;
-      height: 100%;
-    }
+      left: 50%;
+      top: 50%;
+      width: 90%;
+      height: 80%;
+      border-left: 1px solid #006c9d;
+      border-bottom: 1px solid #006c9d;
+      transform: translate(-45%, -46%);
+
+      .coord-lineY {
+        position: absolute;
+        left: -5px;
+        top: 10px;
+        width: 5px;
+        height: calc(100% - 10px);
+      }
 
-    .coord-lineX {
-      display: flex;
-      position: absolute;
-      bottom: -5px;
-      right: 10px;
-      width: calc(100% - 10px);
-      height: 5px;
-    }
+      .coord-labelY {
+        position: absolute;
+        left: -25px;
+        top: -5px;
+        width: 20px;
+        height: 100%;
+      }
 
-    .coord-labelX {
-      display: flex;
-      justify-content: flex-end;
-      position: absolute;
-      bottom: -25px;
-      left: -5px;
-      width: 100%;
-      height: 20px;
-    }
+      .coord-lineX {
+        display: flex;
+        position: absolute;
+        bottom: -5px;
+        right: 10px;
+        width: calc(100% - 10px);
+        height: 5px;
+      }
 
-    .line-AB {
-      position: absolute;
-      left: 0;
-      top: 10px;
-    }
+      .coord-labelX {
+        display: flex;
+        justify-content: flex-end;
+        position: absolute;
+        bottom: -25px;
+        left: -5px;
+        width: 100%;
+        height: 20px;
+      }
 
+      .line-AB {
+        position: absolute;
+        left: 0;
+        top: 10px;
+      }
 
-    // .legend-name {
-    //   position: absolute;
-    //   right: 0;
-    //   top: 20px;
-    //   height: 80px;
-
-    //   .item-name {
-    //     height: 20px;
-    //     line-height: 20px;
-    //     font-size: 10px;
-    //     color: #fff;
-    //     letter-spacing: 2px;
-    //   }
-    // }
+      // .legend-name {
+      //   position: absolute;
+      //   right: 0;
+      //   top: 20px;
+      //   height: 80px;
+
+      //   .item-name {
+      //     height: 20px;
+      //     line-height: 20px;
+      //     font-size: 10px;
+      //     color: #fff;
+      //     letter-spacing: 2px;
+      //   }
+      // }
+    }
   }
-}
 </style>