爆炸三角形修改-提交

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

@@ -1,500 +1,539 @@
 <template>
   <div class="blastDelta">
-    <div class="blast-title">爆炸三角形</div>
+    <!-- <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 10" :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 10" :key="ind">{{ ind == 9 ? 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% - 15px)', height: 'calc(100% - 10px)' }">
         <canvas id="myCanvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
       </div>
-      <div class="line-legend">
+      <!-- <div class="line-legend">
         <div class="legend-ite" v-for="ite in 4" :key="ite"></div>
       </div>
       <div class="legend-name">
         <div class="item-name" v-for="item in legendList" :key="item">{{ item.name }}</div>
+      </div> -->
+    </div>
+    <div class="line-legend">
+      <div class="legend-box" v-for="(item, index) in legendList" :key="index">
+        <span class="legend-icon"></span>
+        <span class="legend-label">{{ item.name }}</span>
       </div>
     </div>
   </div>
 </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: 250, height: 245 };
-      },
+  },
+  canvasSize: {
+    type: Object,
+    default: () => {
+      return { width: 364, 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);
-    // 获取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(); // 进行绘制
+}
+//根据A,B,E,G等点坐标绘制爆炸三角形
+function getBlast() {
+  maxY.value = getCoordABY(0);
+  maxX.value = getCoordABX(0);
+  // 获取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)',
+    },
+  ];
 
-    //绘制GE线条
+  pointData.forEach((item, index) => {
     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)',
-      },
-    ];
-
-    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.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);
+      }
     });
-
-    // 标记点A
-    ctx.beginPath();
-    ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
-    ctx.fillStyle = '#eee';
+    ctx.closePath();
+    ctx.fillStyle = item.color;
     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); // 文字位置略微偏上，以便于文字与点对齐
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
 
-    //标记点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); // 文字位置略微偏上，以便于文字与点对齐
+  // 标记点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 = 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)',
+    },
+  ];
 
-    //标记点G
+  pointData.forEach((item, index) => {
     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.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);
+      }
     });
-
-    // 标记点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.closePath();
+    ctx.fillStyle = item.color;
     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))
-    );
-  }
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
 
-  watch(
-    () => props.posMonitor,
-    (newV, oldV) => {
-      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;
-        let btTriBlasts = JSON.parse(newV.btTriBlast);
-        coordinateA.x = btTriBlasts.A_x;
-        coordinateA.y = btTriBlasts.A_y;
-        coordinateB.x = btTriBlasts.B_x;
-        coordinateB.y = btTriBlasts.B_y;
-        coordinateE.x = btTriBlasts.E_x;
-        coordinateE.y = btTriBlasts.E_y;
-        coordinateF.x = btTriBlasts.F_x;
-        coordinateF.y = btTriBlasts.F_y;
-        coordinateG.x = btTriBlasts.G_x;
-        coordinateG.y = btTriBlasts.G_y;
-        if (
-          !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
-          (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
-        ) {
-          getUnblast();
-        } else {
-          getBlast();
-        }
-      }
-    },
-    { deep: true }
+  // 标记点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) => {
+    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;
+      let btTriBlasts = JSON.parse(newV.btTriBlast);
+      coordinateA.x = btTriBlasts.A_x;
+      coordinateA.y = btTriBlasts.A_y;
+      coordinateB.x = btTriBlasts.B_x;
+      coordinateB.y = btTriBlasts.B_y;
+      coordinateE.x = btTriBlasts.E_x;
+      coordinateE.y = btTriBlasts.E_y;
+      coordinateF.x = btTriBlasts.F_x;
+      coordinateF.y = btTriBlasts.F_y;
+      coordinateG.x = btTriBlasts.G_x;
+      coordinateG.y = btTriBlasts.G_y;
+      if (
+        !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
+        (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
+      ) {
+        getUnblast();
+      } else {
+        getBlast();
+      }
+    }
+  },
+  { deep: true }
+);
 
-  onMounted(() => {
-    getAreas();
-  });
+onMounted(() => {
+  getAreas();
+});
 </script>
 
 <style lang="less" scoped>
-  .blastDelta {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .blast-title {
-      position: absolute;
-      left: 50%;
-      top: 24px;
-      transform: translate(-50%, 0);
+.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: 25px;
+    transform: translate(-50%, 0);
+    display: flex;
+    justify-content: space-around;
+
+    .legend-box {
+      display: flex;
+      flex: 1;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
       font-size: 12px;
-      color: #fff;
-    }
 
-    .coords {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 80%;
-      height: 80%;
-      border-left: 1px solid #006c9d;
-      border-bottom: 1px solid #006c9d;
-      transform: translate(-50%, -50%);
-
-      .coord-lineY {
-        position: absolute;
-        left: -5px;
-        top: 10px;
-        width: 5px;
-        height: calc(100% - 10px);
-      }
-
-      .coord-labelY {
-        position: absolute;
-        left: -25px;
-        top: -5px;
-        width: 20px;
-        height: 100%;
+      &:nth-child(1) {
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #7ffe02;
+          margin-right: 5px;
+        }
       }
 
-      .coord-lineX {
-        display: flex;
-        position: absolute;
-        bottom: -5px;
-        right: 10px;
-        width: calc(100% - 10px);
-        height: 5px;
+      &:nth-child(2) {
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #017f02;
+          margin-right: 5px;
+        }
       }
 
-      .coord-labelX {
-        display: flex;
-        justify-content: flex-end;
-        position: absolute;
-        bottom: -25px;
-        left: -5px;
-        width: 100%;
-        height: 20px;
+      &:nth-child(3) {
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ff0000;
+          margin-right: 5px;
+        }
       }
 
-      .line-AB {
-        position: absolute;
-        left: 0;
-        top: 10px;
+      &:nth-child(4) {
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ffff00;
+          margin-right: 5px;
+        }
       }
+    }
+  }
 
-      .line-legend {
-        position: absolute;
-        right: 80px;
-        top: 20px;
-        width: 20px;
-        height: 80px;
 
-        .legend-ite {
-          width: 20px;
-          height: 20px;
+  .coords {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 80%;
+    height: 80%;
+    border-left: 1px solid #006c9d;
+    border-bottom: 1px solid #006c9d;
+    transform: translate(-50%, -46%);
 
-          &:nth-child(1) {
-            background-color: #7ffe02;
-          }
+    .coord-lineY {
+      position: absolute;
+      left: -5px;
+      top: 10px;
+      width: 5px;
+      height: calc(100% - 10px);
+    }
 
-          &:nth-child(2) {
-            background-color: #017f02;
-          }
+    .coord-labelY {
+      position: absolute;
+      left: -25px;
+      top: -5px;
+      width: 20px;
+      height: 100%;
+    }
 
-          &:nth-child(3) {
-            background-color: #ff0000;
-          }
+    .coord-lineX {
+      display: flex;
+      position: absolute;
+      bottom: -5px;
+      right: 10px;
+      width: calc(100% - 10px);
+      height: 5px;
+    }
 
-          &:nth-child(4) {
-            background-color: #ffff00;
-          }
-        }
-      }
+    .coord-labelX {
+      display: flex;
+      justify-content: flex-end;
+      position: absolute;
+      bottom: -25px;
+      left: -5px;
+      width: 100%;
+      height: 20px;
+    }
 
-      .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;
-        }
-      }
+    .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;
+    //   }
+    // }
   }
+}
 </style>

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

@@ -1,21 +1,10 @@
 <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>
@@ -28,7 +17,8 @@
             </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">
@@ -37,7 +27,8 @@
             </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">
@@ -46,7 +37,8 @@
             </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">
@@ -55,7 +47,8 @@
             </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">
@@ -64,7 +57,8 @@
             </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">
@@ -73,7 +67,8 @@
             </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">
@@ -82,14 +77,11 @@
             </div>
             <div class="item-container">
               <div class="title">风险等级</div>
-              <div
-                :class="{
-                  value1: posMonitor['syswarnLevel_str'] == '绿色预警',
-                  value2: posMonitor['syswarnLevel_str'] == '黄色预警',
-                  value3: posMonitor['syswarnLevel_str'] == '红色预警',
-                }"
-                >{{ posMonitor['syswarnLevel_str'] || '-' }}</div
-              >
+              <div :class="{
+                value1: posMonitor['syswarnLevel_str'] == '绿色预警',
+                value2: posMonitor['syswarnLevel_str'] == '黄色预警',
+                value3: posMonitor['syswarnLevel_str'] == '红色预警',
+              }">{{ posMonitor['syswarnLevel_str'] || '-' }}</div>
             </div>
           </div>
           <div class="top-item warning-box">
@@ -102,455 +94,460 @@
             </div>
           </div>
         </div>
-        <div class="right-bottom">
-          <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"
-            />
-
-            <!-- 爆炸三角形 -->
-            <div style="width: 35%; height: 100%; margin: 0px auto">
+        <div style="width: 100%;display: flex">
+          <div class="right-bottom">
+            <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="100%" :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
+            </div>
+          </div>
+          <div class="right-bottom1">
+            <span class="base-title">爆炸三角形</span>
+            <div class="echarts-box">
               <blastDelta :posMonitor="posMonitor" />
             </div>
           </div>
         </div>
+
       </div>
     </div>
   </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: null,
-        },
-      };
-
-      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) {
+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: '20',
+        bottom: '3%',
+        containLabel: true,
+      },
+      toolbox: {
+        feature: null,
+      },
+    };
+
+    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;
-          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 300);
-        getListdays();
+        }, 1000);
       }
+    }
 
-      function handleOk(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    // 选择监测
+    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 handleCancel(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    function handleOk(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,
+    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;
           });
-          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;
+
+    .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;
       }
+    }
 
-      .right-top {
+    .right-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+
+      .top-item {
+        width: 220px;
+        height: 100px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        margin-bottom: 10px;
+        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;
+        }
 
-        .top-item {
-          width: 220px;
-          height: 100px;
+        .item-container {
+          width: 110px;
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           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;
-          }
 
-          .item-container {
-            width: 110px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
+          div {
+            text-align: center;
+          }
 
-            div {
-              text-align: center;
-            }
+          .title {
+            font-size: 18px;
+          }
 
-            .title {
+          .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;
-            }
-
-            .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;
-              }
+              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;
-            color: #ffff35 !important;
-          }
+        .value2 {
+          font-size: 18px;
+          // color: rgb(0, 242, 255) !important;
+          color: #ffff35 !important;
+        }
 
-          .value3 {
-            font-size: 18px;
-            // color: #ffff35 !important;
-            color: #ff0000 !important;
-          }
+        .value3 {
+          font-size: 18px;
+          // color: #ffff35 !important;
+          color: #ff0000 !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 {
+      width: 50%;
+      margin-top: 10px;
 
-        .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;
 
-    .zxm-table-tbody > tr > td {
-      border: none !important;
+    .right-bottom1 {
+      width: 50%;
+      margin-top: 10px;
+      .echarts-box {
+        width: 100%;
+        height: 320px;
+      }
     }
   }
+}
 
-  :deep(.zxm-table-cell) {
-    border-right: none !important;
+:deep(.zxm-table-body) {
+  border: 1px solid rgba(57, 232, 255, 0.2) !important;
+
+  .zxm-table-tbody>tr>td {
+    border: none !important;
   }
+}
+
+:deep(.zxm-table-cell) {
+  border-right: none !important;
+}
 </style>