add：po数量》4 《=7容器高度处理

src/views/dataMonitor/jrx/history/index.vue

@@ -12,23 +12,20 @@
     </div>
 
     <div class="new-container" style="display: flex">
-      <div class="canvas-wrapper" style="width: 1000px; height: 600px">
+      <div class="canvas-wrapper" style="width: 1000px;">
         <!-- 替换为 Canvas 元素 -->
         <canvas
           ref="canvas"
           id="mainCanvas"
           width="1000"
-          height="600"
           style="background: #f0f0f0"
         ></canvas>
       </div>
       <div class="chart-wrapper" style="padding-left: 0px;">
-        <!-- 图表容器780 -->
         <div
           ref="chartContainer"
           style="width: 870px; height: 550px; margin-bottom: 20px;border:1px solid gainsboro;"
         ></div>
-        <!-- 图表操作区域（调整到最下方左侧） -->
         <div class="chart-btn-group">
           <button
             size="small"
@@ -180,32 +177,58 @@ export default {
     this.pageApi.created && this.pageApi.created();
   },
   mounted() {
+      // 新增：动态调整Canvas尺寸 目前支持7层。
+      const poCount = 4;
+      const lineCount = 5
+      let canvasWidth = 1000; // 默认宽度
+      let canvasHeight = 600; // 默认高度
+      if (poCount > 4) {
+        canvasHeight = poCount * 150; // 高度 = 个数 × 150px
+        // canvasWidth = 1000 + (poCount - 4) * 150; // 宽度 = 原宽度 + (个数-4)×150px
+      }
+
+      // 更新Canvas元素属性和样式
+      const canvasEl = this.$refs.canvas;
+      if (canvasEl) {
+        // 实际绘图区域尺寸（关键属性）
+        canvasEl.width = canvasWidth;
+        canvasEl.height = canvasHeight;
+        // 显示尺寸（与绘图区域保持一致）
+        canvasEl.style.width = `${canvasWidth}px`;
+        canvasEl.style.height = `${canvasHeight}px`;
+      }
+
 
     // 数据清洗
-    const canvasH = 600
-    const canvasW = 1000
-    const po_pad_right = 180 // 第一个台阶距离画布的距离
+    const po_pad_right = poCount > 4 ? 130 : 180 // 第一个台阶距离画布的距离
     const poH = 150
     const line_color = ['red', 'yellow', 'green', 'blue', 'white']
     this.poConfigs = []
     this.guanConfigs = []
     this.lineConfigs = []
-    for (let index = 0; index < 4; index++) {
+
+    for (let index = 0; index < poCount; index++) {
+       // 坡数据数据格式处理
       this.poConfigs.push({
         x: 0, 
-        y: canvasH-((index+1)*poH), 
-        width: canvasW - ((index+1)*po_pad_right), 
-        height: 150 
+        y: canvasHeight-((index+1)*poH), 
+        width: canvasWidth - ((index+1)*po_pad_right), 
+        height: poH 
 
       })
+       // 管孔数据数据格式处理
       this.guanConfigs.push({
-        x: this.poConfigs[index].width *0.75, y: canvasH - (this.poConfigs[index].height*(index+1)) + 30, width: 6, height: index==0?100:200, image: 'guanImage'
+        x: this.poConfigs[index].width *0.75,
+        y: canvasHeight - (this.poConfigs[index].height*(index+1)) + 30,
+        width: 6,
+        height: index == 0 ? 100 : 200, 
+        image: 'guanImage'
       })
     }
     
      
      // 警戒线逻辑- 初始化4条线
-     for (let index1 = 0; index1 < 5; index1++) {
+     for (let index1 = 0; index1 < lineCount; index1++) {
       this.lineConfigs.push({ // 设置
         points: [], 
         color: line_color[index1],