add：po0 guan0

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

@@ -201,70 +201,91 @@ export default {
 			  this.loadAllImages();
 		},
 
-		    /** 加载所有图片并绘制 */
-			loadAllImages() {
-        // 加载背景图（原有）
-        this.bgImage = new Image();
-        this.bgImage.src = require('@/assets/images/jrx/bg.png');
-
-        // 加载 water.png
-        this.waterImage = new Image();
-        this.waterImage.src = require('@/assets/images/jrx/water.png');
-
-        // 加载 po.png
-        this.poImage = new Image();
-        this.poImage.src = require('@/assets/images/jrx/po.png');
-
-        // 等待所有图片加载完成
-        Promise.all([
-            new Promise(resolve => this.bgImage.onload = resolve),
-            new Promise(resolve => this.waterImage.onload = resolve),
-            new Promise(resolve => this.poImage.onload = resolve)
-        ]).then(() => {
-            // 所有图片加载完成后绘制
-            this.drawAllImages();
-        }).catch(() => {
-            console.error('部分图片加载失败');
-        });
-    },
-
-    /** 绘制所有图片（背景图 + 新增图片） */
-    drawAllImages() {
-        // 1. 绘制背景图（原有逻辑）
-		this.ctx.save(); // 保存当前变换状态
-		this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）
-        this.ctx.drawImage(
-            this.bgImage, 
-            0, 0, 
-            this.canvas.width, 
-            this.canvas.height
-        );
-		this.ctx.restore(); // 恢复之前的变换
-
-
-		// 3. 绘制 po.png（同样临时恢复默认坐标系）
-		this.ctx.save();
-		this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-		this.ctx.drawImage(
-			this.poImage, 
-			0, this.canvas.height - 150, // Y坐标调整为画布高度 - 图片高度
-			879, 150      // 绘制尺寸（与原尺寸一致）
-		);
-		this.ctx.restore();
-
-        // 2. 绘制 water.png（临时恢复默认坐标系，避免翻转）
-	    this.ctx.save(); // 保存当前变换状态
-		this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）
-        this.ctx.drawImage(
-            this.waterImage, 
-            0, this.canvas.height - 255, // Y坐标调整为画布高度 - 图片高度（原点在左下角）
-            485, 255      // 绘制尺寸（与原尺寸一致）
-        );
-		this.ctx.restore(); // 恢复之前的变换
+		/** 加载所有图片并绘制 */
+		loadAllImages() {
+			// 加载背景图（原有）
+			this.bgImage = new Image();
+			this.bgImage.src = require('@/assets/images/jrx/bg.png');
+
+			// 加载 water.png
+			this.waterImage = new Image();
+			this.waterImage.src = require('@/assets/images/jrx/water.png');
+
+			// 加载 po.png
+			this.poImage = new Image();
+			this.poImage.src = require('@/assets/images/jrx/po.png');
+
+			// 加载 guan.png
+			this.guanImage = new Image();
+			this.guanImage.src = require('@/assets/images/jrx/guan0.png');
+
+			// 等待所有图片加载完成
+			Promise.all([
+				new Promise(resolve => this.bgImage.onload = resolve),
+				new Promise(resolve => this.waterImage.onload = resolve),
+				new Promise(resolve => this.poImage.onload = resolve),
+				new Promise(resolve => this.guanImage.onload = resolve)
+			]).then(() => {
+				// 所有图片加载完成后绘制
+				this.drawAllImages();
+			}).catch(() => {
+				console.error('部分图片加载失败');
+			});
+		},
+
+		/** 绘制所有图片（背景图 + 新增图片） */
+		drawAllImages() {
+			// 1. 绘制背景图（原有逻辑）
+			this.ctx.save(); // 保存当前变换状态
+			this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）
+			this.ctx.drawImage(
+				this.bgImage, 
+				0, 0, 
+				this.canvas.width, 
+				this.canvas.height
+			);
+			this.ctx.restore(); // 恢复之前的变换
+
+
+			// 3. 绘制 po.png（同样临时恢复默认坐标系）
+			this.ctx.save();
+			this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+			this.ctx.drawImage(
+				this.poImage, 
+				0, this.canvas.height - 150, // Y坐标调整为画布高度 - 图片高度
+				879, 150      // 绘制尺寸（与原尺寸一致）
+			);
+			this.ctx.restore();
+
+			// 3. 绘制 guan0.png（po.png 右侧中间，上层）
+			this.ctx.save();
+			this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+			// 计算位置：
+			// po.png 右侧 x 坐标 = po.png x + po.png 宽度 = 0 + 879 = 879
+			// po.png 垂直中间 y 坐标 = po.png y + po.png 高度/2 = (canvas.height - 150) + 75 = canvas.height - 75
+			// guan0.png 垂直居中需要 y = po.png中间y - guan0.png高度/2 = (canvas.height - 75) - (121/2) = canvas.height - 135.5
+			const guanX = 879-150; 
+			const guanY = this.canvas.height - 135.5; 
+			this.ctx.drawImage(
+				this.guanImage, 
+				guanX, guanY,  // 目标位置（右侧中间）
+				6, 121         // 目标尺寸（宽6px，高121px）
+			);
+       		 this.ctx.restore();
+
+			// 2. 绘制 water.png（临时恢复默认坐标系，避免翻转）
+			this.ctx.save(); // 保存当前变换状态
+			this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）
+			this.ctx.drawImage(
+				this.waterImage, 
+				0, this.canvas.height - 255, // Y坐标调整为画布高度 - 图片高度（原点在左下角）
+				485, 255      // 绘制尺寸（与原尺寸一致）
+			);
+			this.ctx.restore(); // 恢复之前的变换
 
-		
 			
-	},
+				
+		},
 
 
 		/** 加载背景图并绘制 */