预警管控-修改提交（待）

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

@@ -85,7 +85,7 @@
       <div class="echart-box">
         <div class="left-echartbox">
           <div class="title-f">
-            <div class="title-text">{{ `${type}趋势` }}&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ?
+            <div class="title-text">{{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ?
               '(设备未连接)' :
                 '' }}</span></div>
           </div>
@@ -95,7 +95,7 @@
         </div>
         <div class="right-echartbox">
           <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
-            :heightCanvas="heightCanvas"></warnZb>
+            :heightCanvas="heightCanvas" :warnLevel="topContent.warn"></warnZb>
         </div>
 
       </div>
@@ -116,6 +116,8 @@ let heightV = ref('80%')
 let coordDw = ref<any[]>([26, 46, 80, 128, 190, 260,])
 let widthCanvas = ref(562)
 let heightCanvas = ref(316)
+//设备连接状态
+let netStatus=ref(0)
 //密闭-顶部区域数据
 let topContent = reactive({
   temperature: 0,
@@ -272,7 +274,7 @@ watch(
           el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--';
           el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--';
         });
-
+        netStatus.value=  val.bundletube[0]['netStatus']
         val.bundletube[0].history.forEach((v) => {
           echartDataSg1.xData.push(v.time);
           if (echartDataSg1.lengedData == 'O₂') {

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

@@ -84,7 +84,7 @@ let columns = reactive([
 <style lang="less" scoped>
 .warnTargetFire {
     width: 100%;
-    height: calc(100vh - 126px);
+    height: 100%;
     padding: 15px 0px;
     box-sizing: border-box;
 

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

@@ -38,284 +38,357 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted, watch } from 'vue';
 
-  let props = defineProps({
-    widthV: {
-      type: String,
-      default: '',
+let props = defineProps({
+  widthV: {
+    type: String,
+    default: '',
+  },
+  heightV: {
+    type: String,
+    default: '',
+  },
+  coordDw: {
+    type: Array,
+    default: () => {
+      return [];
     },
-    heightV: {
-      type: String,
-      default: '',
-    },
-    coordDw: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    widthCanvas: {
-      type: Number,
-      default: 0,
-    },
-    heightCanvas: {
-      type: Number,
-      default: 0,
-    },
-  });
+  },
+  widthCanvas: {
+    type: Number,
+    default: 0,
+  },
+  heightCanvas: {
+    type: Number,
+    default: 0,
+  },
+  warnLevel: {
+    type: String,
+    default: ''
+  }
+});
 
-  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);
+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;
   }
-  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; // 随机增加长度，使曲线更加平滑
+  ctx.fillStyle = 'rgba(61, 246, 255,.2)'; // 设置填充颜色
+  // 绘制递增曲线
+  ctx.beginPath();
+  ctx.moveTo(xValues[0], yValues[0]);
+  for (var i = 1; i < xValues.length; i++) {
+    ctx.lineTo(xValues[i], yValues[i]);
+    if(props.warnLevel=='1'){
+      if(props.widthCanvas < 600 && i<=4500){
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }else if(i<=4000) {
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }
+     
+    }else if(props.warnLevel=='2'){
 
-      xValues[i] = x;
-      yValues[i] = y;
-    }
+    }else if(props.warnLevel=='3'){
 
-    // 绘制递增曲线
-    ctx.beginPath();
-    ctx.moveTo(xValues[0], yValues[0]);
-    for (var i = 1; i < xValues.length; i++) {
-      ctx.lineTo(xValues[i], yValues[i]);
-    }
-    ctx.stroke();
+    }else if(props.warnLevel=='4'){
 
-    //标记点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); // 文字位置略微偏上，以便于文字与点对齐
+    }else if(props.warnLevel=='5'){
+
+    }else if(props.warnLevel=='6'){
 
-    // 设置线条样式（颜色、宽度等）
-    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); // 文字位置略微偏上，以便于文字与点对齐
     }
+  
+  }
+  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();
-  });
+
+onMounted(() => {
+  getAreas();
+  getCanvas();
+});
 </script>
 
 <style lang="less" scoped>
-  .warnZb {
-    position: relative;
-    width: 100%;
-    height: 100%;
+.warnZb {
+  position: relative;
+  width: 100%;
+  height: 100%;
 
-    .blast-title {
+  .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: 50%;
-      top: 24px;
-      transform: translate(-50%, 0);
-      font-size: 12px;
-      color: #fff;
+      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;
     }
 
-    .coords {
+    .triangle-y {
       position: absolute;
-      left: 50%;
-      top: 50%;
+      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;
-      border-bottom: 1px solid #006c9d;
-      transform: translate(-50%, -55%);
 
-      .triangle-x {
+      .left-jt {
         position: absolute;
-        left: -6px;
-        top: -15px;
+        left: 0px;
+        top: 30px;
         width: 0px;
         height: 0px;
         border-top: 5px solid transparent;
+        border-right: 10px solid #006c9d;
         border-left: 5px solid transparent;
-        border-right: 5px solid transparent;
-        border-bottom: 10px solid #006c9d;
+        border-bottom: 5px solid transparent;
       }
 
-      .triangle-y {
+      .right-jt {
         position: absolute;
-        right: -15px;
-        bottom: -6px;
+        right: 0px;
+        top: 30px;
         width: 0px;
         height: 0px;
         border-top: 5px solid transparent;
@@ -324,102 +397,53 @@
         border-bottom: 5px solid transparent;
       }
 
-      .coord-dw {
+      .text {
         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;
-        }
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 14px;
+        color: #db9753;
       }
 
-      .coord-bj {
-        display: flex;
+      .line {
+        width: calc(100% - 30px);
+        height: 1px;
         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;
-        }
+        left: 14px;
+        top: 34px;
+        background-color: #006c9d;
+      }
 
-        .bj-zrq {
-          flex-shrink: 0;
-          position: relative;
-          // width: 699px;
-          height: 100%;
-          border-right: 1px dashed #006c9d;
-        }
+      .bj-qfq {
+        flex-shrink: 0;
+        position: relative;
+        // width: 401px;
+        height: 100%;
+        border-right: 1px dashed #006c9d;
+      }
 
-        .bj-rsq {
-          flex-shrink: 0;
-          position: relative;
-          // width: 415px;
-          height: 100%;
-        }
+      .bj-zrq {
+        flex-shrink: 0;
+        position: relative;
+        // width: 699px;
+        height: 100%;
+        border-right: 1px dashed #006c9d;
       }
 
-      .coord-area {
-        position: absolute;
-        left: 0;
-        top: 10px;
+      .bj-rsq {
+        flex-shrink: 0;
+        position: relative;
+        // width: 415px;
+        height: 100%;
       }
     }
+
+    .coord-area {
+      position: absolute;
+      left: 0;
+      top: 10px;
+    }
   }
+}
 </style>

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

@@ -353,7 +353,7 @@ onUnmounted(() => {
 
     .alarm-menu {
         width: 100%;
-        
+
         .type-btn {
             width: 100%;
             height: 30px;
@@ -390,8 +390,12 @@ onUnmounted(() => {
             height: calc(100% - 30px);
             overflow-y: auto;
             display: none;
-         
+
         }
     }
+
+    .fire-content {
+        height: calc(100% - 15px)
+    }
 }
 </style>