add：po2 guan2

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

@@ -231,6 +231,12 @@ export default {
       // 加载 guan.png
       this.guanImage = new Image();
       this.guanImage.src = require("@/assets/images/jrx/guan0.png");
+      // 加载 guan1.png
+      this.guanImage1 = new Image();
+      this.guanImage1.src = require("@/assets/images/jrx/guan1.png");
+      // 加载 guan2.png
+      this.guanImage2 = new Image();
+      this.guanImage2.src = require("@/assets/images/jrx/guan2.png");
 
       // 等待所有图片加载完成
       Promise.all([
@@ -238,6 +244,9 @@ export default {
         new Promise((resolve) => (this.waterImage.onload = resolve)),
         new Promise((resolve) => (this.poImage.onload = resolve)),
         new Promise((resolve) => (this.guanImage.onload = resolve)),
+        new Promise((resolve) => (this.guanImage1.onload = resolve)),
+        new Promise((resolve) => (this.guanImage2.onload = resolve)),
+
       ])
         .then(() => {
           // 所有图片加载完成后绘制
@@ -274,6 +283,22 @@ export default {
       );
       this.ctx.restore();
 
+       // 新增：第二张po.png（在第一张上方叠加）
+       this.ctx.save();
+      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+      const secondPoWidth = 879 - 250; // 宽度减少100px
+      const secondPoHeight = 150; // 高度保持不变
+      const secondPoY = (this.canvas.height - 150) - secondPoHeight; // Y坐标：第一张顶部位置（原Y坐标 - 自身高度）
+      this.ctx.drawImage(
+        this.poImage,
+        0, // X轴保持0
+        secondPoY, // Y轴为第一张顶部位置
+        secondPoWidth, // 新宽度
+        secondPoHeight // 保持高度
+      );
+      this.ctx.restore();
+
+
       // 3. 绘制 guan0.png（po.png 右侧中间，上层）
       this.ctx.save();
       this.ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -292,6 +317,35 @@ export default {
       );
       this.ctx.restore();
 
+
+      /**
+       * canvas绘画原则。坐标轴从左上角开始画，y轴要从上往下找y轴的起始原点。
+       * canvasWidth：this.canvas.height // 画布的宽度（目前为600）
+
+       * poHeight：150px // 每个坡的高度
+
+       * guanPaddingTop：30px // 每个管孔距离对应层级坡顶部的距离
+
+         drawImage:(imgsrc, 起始x，起始y，绘画宽度距离， 绘画高度距离)
+       */
+      // 新增：第二张guanImage（在第一张基础上叠加）
+      this.ctx.save();
+      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+      const canvasHeight = this.canvas.height
+      const secondGuanX = secondPoWidth - 150; // x轴：原宽度值（6px）-250px
+        const secondGuanY = this.canvas.height - 135.5;      // y轴：原高度值（121px）
+        this.ctx.drawImage(
+          this.guanImage,
+          secondGuanX,  // 新x坐标
+          secondPoY + 30,  // 新y坐标
+          6,            // 保持宽度6px
+          secondPoY/1.5       // 保持高度121px
+        );
+        console.log((secondPoY/2), '(secondPoY/2) ')
+
+        this.ctx.restore();
+
+
       // 2. 绘制 water.png（临时恢复默认坐标系，避免翻转）
       this.ctx.save(); // 保存当前变换状态
       this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）