smart_storage_app/pages/tabbar/components/topology/ceshiL.vue

<template>
	<view class="warp">
		<topoCanvas ref="topoCanvasRef" cId="secondcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
	</view>
</template>
<script>
	import topoCanvas from '@/components/new-canvas/index.vue'
	export default {
		components: {
			topoCanvas
		},
		data() {
			return {
				canvasData: [],
				partList: {},
				noloading:false,
				// 文字
				textCanvasData: [
					{
						type: "text",
						coord: [
							[275, 60]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[10, 65]
						],
						font: [{
							text: this.$t("homePage.home.grid"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[75, 150]
						],
						font: [{
							text: this.$t('homePage.home.operatingPower'),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[80, 165]
						],
						font: [{
							text: '(kW)',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[155, 150]
						],
						font: [{
							text: this.$t('homePage.home.accumulatedElectricityConsumption'),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[155, 165]
						],
						font: [{
							text: '(kWh)',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[240, 150]
						],
						font: [{
							text: 'SOC',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[240, 165]
						],
						font: [{
							text: '(%)',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[280, 150]
						],
						font: [{
							text:  'SOH',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[280, 165]
						],
						font: [{
							text: '(%)',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					}

				],

				// 图片
				imageCanvasData: [
					{
						//负载
						type: "image",
						url: "/static/topology/pv8pcs4.png",
						coord: [
							[10, 10],
							[320, 420],
						]
					}
				],
				// 线
				lineCanvasData: [],
				// 静态点
				circleCanvasData: [
					{
						type: "circle",
						coord: [
							[65, 27]
						],
						color: "#0DA17D",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[250, 27]
						],
						color: "#FB4444",
						isMove: false,
						r: 3,
					},

					{
						type: "circle",
						coord: [
							[38, 182]
						],
						color: "#338EFE",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 204]
						],
						color: "#338EFE",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 226]
						],
						color: "#58D86B",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 248]
						],
						color: "#338EFE",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 270]
						],
						color: "#338EFE",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 292]
						],
						color: "#58D86B",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 314]
						],
						color: "#338EFE",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 336]
						],
						color: "#338EFE",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 358]
						],
						color: "#58D86B",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 380]
						],
						color: "#338EFE",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 402]
						],
						color: "#338EFE",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[38, 424]
						],
						color: "#58D86B",
						isMove: false,
						r: 3,
					}
				],
				animationId: null, // requestAnimationFrame ID
				movingPoints: [
					// 点1：左上角 → 向右移动
					{
						x: 65,
						y: 27,
						path: [{
								x: 65,
								y: 27
							}, // 起点
							{
								x: 250,
								y: 27
							} // 终点
						],
						color:'#0DA17D',
						currentStep: 0, // 当前在路径的哪一步
						isActive: false, // 标识动画是否激活
						id: 'point-1'
					},
					// 点2：左上角 → 向右 → 向下 → 向左
					{
						x: 65,
						y: 27,
						path: [{
								x: 65,
								y: 27
							},
							{
								x: 122,
								y: 27
							},
							{
								x: 122,
								y: 112
							},
							{
								x: 90,
								y: 112
							}
						],
						color:'#0DA17D',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-2'
					},
					// 点3：中间右 → 向右 → 向上 → 向左
					{
						x: 90,
						y: 112,
						path: [{
								x: 90,
								y: 112
							},
							{
								x: 122,
								y: 112
							},
							{
								x: 122,
								y: 27
							},
							{
								x: 250,
								y: 27
							}
						],
						color:'#0DA17D',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-3'
					},
					// 点4：中间左 → 向左 → 向下 → 向右
					{
						x: 55,
						y: 112,
						path: [{
								x: 55,
								y: 112
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 11,
								y: 226
							},
							{
								x: 38,
								y: 226
							}
						],
						color:'#0DA17D',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-4'
					},
					// 点5：中间左 → 向左 → 向下 → 向右
					{
						x: 55,
						y: 112,
						path: [{
								x: 55,
								y: 112
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 11,
								y: 292
							},
							{
								x: 38,
								y: 292
							}
						],
						color:'#0DA17D',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-5'
					},
					// 点6：中间左 → 向左 → 向下 → 向右
					{
						x: 55,
						y: 112,
						path: [{
								x: 55,
								y: 112
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 11,
								y: 358
							},
							{
								x: 38,
								y: 358
							}
						],
						color:'#0DA17D',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-6'
					},
					// 点7：中间左 → 向左 → 向下 → 向右
					{
						x: 55,
						y: 112,
						path: [{
								x: 55,
								y: 112
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 11,
								y: 424
							},
							{
								x: 38,
								y: 424
							}
						],
						color:'#0DA17D',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-7'
					},
					// 点8：pv1 → 向左 → 向下 → 向右
					{
						x: 38,
						y: 182,
						path: [{
								x: 38,
								y: 182
							},
							{
								x: 11,
								y: 182
							},
							{
								x: 11,
								y: 226
							},
							{
								x: 38,
								y: 226
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-8'
					},
					// 点9：pv1 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 182,
						path: [{
								x: 38,
								y: 182
							},
							{
								x: 11,
								y: 182
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-9'
					},
					// 点10：pv2 → 向左 → 向下 → 向右
					{
						x: 38,
						y: 204,
						path: [{
								x: 38,
								y: 204
							},
							{
								x: 11,
								y: 204
							},
							{
								x: 11,
								y: 226
							},
							{
								x: 38,
								y: 226
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-10'
					},
					// 点11：pv2 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 204,
						path: [{
								x: 38,
								y: 204
							},
							{
								x: 11,
								y: 204
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-11'
					},
					// 点12：pcs1 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 226,
						path: [{
								x: 38,
								y: 226
							},
							{
								x: 11,
								y: 226
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#58D86B',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-12'
					},
					// 点13：pv3 → 向左 → 向下 → 向右
					{
						x: 38,
						y: 248,
						path: [{
								x: 38,
								y: 248
							},
							{
								x: 11,
								y: 248
							},
							{
								x: 11,
								y: 292
							},
							{
								x: 38,
								y: 292
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-13'
					},
					// 点14：pv3 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 248,
						path: [{
								x: 38,
								y: 248
							},
							{
								x: 11,
								y: 248
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-14'
					},
					// 点15：pv4 → 向左 → 向下 → 向右
					{
						x: 38,
						y: 270,
						path: [{
								x: 38,
								y: 270
							},
							{
								x: 11,
								y: 270
							},
							{
								x: 11,
								y: 292
							},
							{
								x: 38,
								y: 292
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-15'
					},
					// 点16：pv4 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 270,
						path: [{
								x: 38,
								y: 270
							},
							{
								x: 11,
								y: 270
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-16'
					},
					// 点17：pcs2 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 292,
						path: [{
								x: 38,
								y: 292
							},
							{
								x: 11,
								y: 292
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#58D86B',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-17'
					},
					// 点18：pv5 → 向左 → 向下 → 向右
					{
						x: 38,
						y: 314,
						path: [{
								x: 38,
								y: 314
							},
							{
								x: 11,
								y: 314
							},
							{
								x: 11,
								y: 358
							},
							{
								x: 38,
								y: 358
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-18'
					},
					// 点19：pv5 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 314,
						path: [{
								x: 38,
								y: 314
							},
							{
								x: 11,
								y: 314
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-19'
					},
					// 点20：pv6 → 向左 → 向下 → 向右
					{
						x: 38,
						y: 336,
						path: [{
								x: 38,
								y: 336
							},
							{
								x: 11,
								y: 336
							},
							{
								x: 11,
								y: 358
							},
							{
								x: 38,
								y: 358
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-20'
					},
					// 点21：pv6 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 336,
						path: [{
								x: 38,
								y: 336
							},
							{
								x: 11,
								y: 336
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-21'
					},
					// 点22：pcs3 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 358,
						path: [{
								x: 38,
								y: 358
							},
							{
								x: 11,
								y: 358
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#58D86B',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-22'
					},
					// 点23：pv7 → 向左 → 向下 → 向右
					{
						x: 38,
						y: 380,
						path: [{
								x: 38,
								y: 380
							},
							{
								x: 11,
								y: 380
							},
							{
								x: 11,
								y: 424
							},
							{
								x: 38,
								y: 424
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-23'
					},
					// 点24：pv7 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 380,
						path: [{
								x: 38,
								y: 380
							},
							{
								x: 11,
								y: 380
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-24'
					},
					// 点25：pv8 → 向左 → 向下 → 向右
					{
						x: 38,
						y: 402,
						path: [{
								x: 38,
								y: 402
							},
							{
								x: 11,
								y: 402
							},
							{
								x: 11,
								y: 424
							},
							{
								x: 38,
								y: 424
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-25'
					},
					// 点26：pv8 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 402,
						path: [{
								x: 38,
								y: 402
							},
							{
								x: 11,
								y: 402
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#338EFE',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-26'
					},
					// 点27：pcs4 → 向左 → 向上 → 向右
					{
						x: 38,
						y: 424,
						path: [{
								x: 38,
								y: 424
							},
							{
								x: 11,
								y: 424
							},
							{
								x: 11,
								y: 112
							},
							{
								x: 55,
								y: 112
							}
						],
						color:'#58D86B',
						currentStep: 0,
						isActive: false, // 标识动画是否激活
						id: 'point-27'
					}
					
				],
				pointSpeed: 1, // 移动速度（像素/帧）
				kWValues: {
					pv1:null,
					pv2:null,
					pv3:null,
					pv4:null,
					pv5:null,
					pv6:null,
					pv7:null,
					pv8:null,
					pcs1:null,
					pcs2:null,
					pcs3:null,
					pcs4:null
				}
				
			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},
		beforeDestroy() {
			// 强制取消动画帧
			  if (this.animationId) {
			    if (typeof requestAnimationFrame !== 'undefined') {
			      cancelAnimationFrame(this.animationId);
			    } else {
			      clearTimeout(this.animationId);
			    }
			    this.animationId = null; // 重置ID
			  }
			  // 重置所有动态点状态
			  this.movingPoints.forEach(point => {
			    point.isActive = false;
			    point.currentStep = 0;
			    point.x = point.path[0].x;
			    point.y = point.path[0].y;
			  });
			  // 清空canvasData
			  this.canvasData = [];
		},
		watch:{
			stationId(newVal,oldVal){
				if (newVal) {
					this.getData(newVal);
				}
			}
		},
		methods: {
			// 启动动画
			startAnimation() {
			    const canvasRef = this.$refs.topoCanvasRef;
			    if (!canvasRef) return;
			
			    // 清除旧动画
			    if (this.animationId !== null) {
			        if (requestAnimationFrame && this.animationId) {
			            cancelAnimationFrame(this.animationId);
			        } else {
			            clearTimeout(this.animationId);
			        }
			        this.animationId = null;
			    }
			
			    // 直接启动新动画
			    this.animate();
			},
			
			animate() {
			    const canvasRef = this.$refs.topoCanvasRef;
			    if (!canvasRef) return;
			
			    const animateFrame = () => {
			        // 1. 更新移动点的位置
			        this.movingPoints.forEach(point => {
			            if (!point.isActive) return;
			            const currentIndex = point.currentStep;
			            const nextTarget = point.path[currentIndex + 1];
			
			            if (!nextTarget) {
			                point.x = point.path[0].x;
			                point.y = point.path[0].y;
			                point.currentStep = 0;
			                return;
			            }
			
			            const dx = nextTarget.x - point.x;
			            const dy = nextTarget.y - point.y;
			            const distance = Math.sqrt(dx * dx + dy * dy);
			
			            if (distance < this.pointSpeed) {
			                point.x = nextTarget.x;
			                point.y = nextTarget.y;
			                point.currentStep++;
			            } else {
			                point.x += (dx / distance) * this.pointSpeed;
			                point.y += (dy / distance) * this.pointSpeed;
			            }
			        });
			
			        // 2. 更新 canvasData 中的动态点
			        this.updateMovingPoints();
			
			        // 3. 清除并重绘
			        canvasRef.clear();
			        canvasRef.draw(null);
			
			        // 4. 继续下一帧（✅ 安全判断）
			        if (typeof requestAnimationFrame !== 'undefined') {
			            this.animationId = requestAnimationFrame(animateFrame);
			        } else {
			            this.animationId = setTimeout(animateFrame, 16);
			        }
			    };
			
			    // 启动第一帧（✅ 安全判断）
			    if (typeof requestAnimationFrame !== 'undefined') {
			        requestAnimationFrame(animateFrame);
			    } else {
			        setTimeout(animateFrame, 16);
			    }
			},
			updateMovingPoints() {
				this.movingPoints.forEach(point => {
					const dataIndex = this.canvasData.findIndex(item => item.id === point.id);
					if (dataIndex !== -1) {
						this.canvasData[dataIndex].coord = [
							[point.x, point.y]
						];
					}
				});
			},
			changeEnglish(){
				this.textCanvasData = [
					{
						type: "text",
						coord: [
							[275, 60]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[10, 65]
						],
						font: [{
							text: this.$t("homePage.home.grid"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[80, 150]
						],
						font: [{
							text: this.$t('homePage.home.operatingPower'),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[80, 165]
						],
						font: [{
							text: '(kW)',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[155, 150]
						],
						font: [{
							text: this.$t('homePage.home.accumulatedElectricityConsumption'),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[155, 165]
						],
						font: [{
							text: '(kWh)',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[240, 150]
						],
						font: [{
							text: 'SOC',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[240, 165]
						],
						font: [{
							text: '(%)',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[280, 150]
						],
						font: [{
							text:  'SOH',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[280, 165]
						],
						font: [{
							text: '(%)',
							size: 12,
							color: "#666666",
							width: 50,
						}]
					}
				]

			},
			getData(val){
				// 彻底重置画布数据
				this.canvasData = [];
				// 重置所有点状态
				this.movingPoints.forEach(point => (point.isActive = false,point.isMove = false,point.currentStep = 0,point.x = point.path[0].x,point.y = point.path[0].y));
				this.stationId = val
				this.textCanvasData.splice(10)
				const api = [ this.getpv1(), this.getpv2(), this.getPcs1(),
							  this.getpv3(), this.getpv4(), this.getPcs2(), 
							  this.getpv5(), this.getpv6(), this.getPcs3(), 
							  this.getpv7(), this.getpv8(), this.getPcs4(), 
							  this.getacdcCenter(), this.getAmmeter() 
						]
				Promise.all(api).finally((result) => {
					// 获取三个 kW 值
					const {pv1,pv2,pv3,pv4,pv5,pv6,pv7,pv8,pcs1,pcs2,pcs3,pcs4} = this.kWValues;
					const pvvalues = [pv1,pv2,pv3,pv4,pv5,pv6,pv7,pv8];
					const pcsvalues = [pcs1,pcs2,pcs3,pcs4];
					const pvallZero = pvvalues.every(v => v === 0);
					const anyPositive = pvvalues.some(v => v > 1);
					const anyNegative = pvvalues.some(v => v < 0);
					const pcsanyNegative = pvvalues.some(v => v < 15);
					
					// 重置所有点（确保干净）
					this.movingPoints.forEach(p => (p.isActive = false));
					// 条件3：全部为0 → 只显示点1
					if (pvallZero) {
						this.movingPoints.find(p => p.id === 'point-1').isActive = true;
						if(pcsanyNegative){
							this.movingPoints.find(p => p.id === 'point-2').isActive = true;
							this.movingPoints.find(p => p.id === 'point-4').isActive = true;
							this.movingPoints.find(p => p.id === 'point-5').isActive = true;
							this.movingPoints.find(p => p.id === 'point-6').isActive = true;
							this.movingPoints.find(p => p.id === 'point-7').isActive = true;
						}
					} else {
						// 条件1：任一大于0 → 点6运动
						if (anyPositive) {
							this.movingPoints.find(p => p.id === 'point-3').isActive = true;
						}
						// 再设置其他点显示逻辑
						this.updatePvPcsPoints();
					}
					this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
						.lineCanvasData, ...this.circleCanvasData
					]
					// 动态添加 movingPoints
					this.movingPoints.forEach(point => {
						this.canvasData.push({
							type: "circle",
							id: point.id,
							coord: [
								[point.x, point.y]
							],
							color: point.color,
							r: 3,
							isMove: true
						});
					});
					this.noloading = true
					this.$nextTick(() => {
						this.startAnimation();
					});
				});
			},
			countChineseAndEnglishCharacters(str, x) {
			      var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
			      var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
			      var otherCount = str.length - chineseCount - englishCount
			      const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
			      return (obj.englishCount * 4) + (obj.chineseCount * 10	) + (obj.otherCount * 8) + x
			    },
			getAmmeter(){
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation:'triad-ammeter'
						})
						.then((res) => {
							if(res.data && res.data.length){
								res.data.forEach((item,index) => {
									this.textCanvasData.push(
									{
										type: "text",
										coord: [
											[120, 80 + index * 15]
										],
										font: [{
											text: `${item.name}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},
									{
										type: "text",
										coord: [
											[this.countChineseAndEnglishCharacters(item.name,130), 80 + index * 15]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},
									)
								
								})
							}
						
							resolve()
					})
				})
				
			},
			
			updatePvPcsPoints() {
			    const {pv1,pv2,pv3,pv4,pv5,pv6,pv7,pv8,pcs1,pcs2,pcs3,pcs4} = this.kWValues;
				
			    // 处理左边：点8、9、10、11、12
			    const point8 = this.movingPoints.find(p => p.id === 'point-8');
			    const point9 = this.movingPoints.find(p => p.id === 'point-9');
			    const point10 = this.movingPoints.find(p => p.id === 'point-10');
			    const point11 = this.movingPoints.find(p => p.id === 'point-11');
			    const point12 = this.movingPoints.find(p => p.id === 'point-12');
				if(pv1 > 1){
			        point8.isActive = true;
			        point9.isActive = true;
				}else if (pv1 < 1){
			        point8.isActive = false;
			        point9.isActive = false;
				}
				if(pv2 > 1){
				    point10.isActive = true;
				    point11.isActive = true;
				}else if (pv2 < 1){
				    point10.isActive = false;
				    point11.isActive = false;
				}
				if(pcs1 > 5){
					point12.isActive = true;
				}
			    // 处理左边：点13、14、15、16、17
			    const point13 = this.movingPoints.find(p => p.id === 'point-13');
			    const point14 = this.movingPoints.find(p => p.id === 'point-14');
			    const point15 = this.movingPoints.find(p => p.id === 'point-15');
			    const point16 = this.movingPoints.find(p => p.id === 'point-16');
			    const point17 = this.movingPoints.find(p => p.id === 'point-17');
				if(pv3 > 1){
			        point13.isActive = true;
			        point14.isActive = true;
				}else if (pv3 < 1){
			        point13.isActive = false;
			        point14.isActive = false;
				}
				if(pv4 > 1){
				    point15.isActive = true;
				    point16.isActive = true;
				}else if (pv4 < 1){
				    point15.isActive = false;
				    point16.isActive = false;
				}
				if(pcs2 > 5){
					point17.isActive = true;
				}
			    // 处理左边：点18、19、20、21、22
			    const point18 = this.movingPoints.find(p => p.id === 'point-18');
			    const point19 = this.movingPoints.find(p => p.id === 'point-19');
			    const point20 = this.movingPoints.find(p => p.id === 'point-20');
			    const point21 = this.movingPoints.find(p => p.id === 'point-21');
			    const point22 = this.movingPoints.find(p => p.id === 'point-22');
				if(pv5 > 1){
			        point18.isActive = true;
			        point19.isActive = true;
				}else if (pv5 < 1){
			        point18.isActive = false;
			        point19.isActive = false;
				}
				if(pv6 > 1){
				    point20.isActive = true;
				    point21.isActive = true;
				}else if (pv6 < 1){
				    point20.isActive = false;
				    point21.isActive = false;
				}
				if(pcs3 > 5){
					point22.isActive = true;
				}
			    // 处理左边：点23、24、25、26、27
			    const point23 = this.movingPoints.find(p => p.id === 'point-23');
			    const point24 = this.movingPoints.find(p => p.id === 'point-24');
			    const point25 = this.movingPoints.find(p => p.id === 'point-25');
			    const point26 = this.movingPoints.find(p => p.id === 'point-26');
			    const point27 = this.movingPoints.find(p => p.id === 'point-27');
				if(pv7 > 1){
			        point23.isActive = true;
			        point24.isActive = true;
				}else if (pv7 < 1){
			        point23.isActive = false;
			        point24.isActive = false;
				}
				if(pv8 > 1){
				    point25.isActive = true;
				    point26.isActive = true;
				}else if (pv8 < 1){
				    point25.isActive = false;
				    point26.isActive = false;
				}
				if(pcs4 > 5){
					point27.isActive = true;
				}
			    
			},

			getacdcCenter() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-acdc-center'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									// 这里可以根据实际需求处理交直流中心数据
								})
							}
							resolve()
						})
						.catch(reject); // 新增错误捕获
				})
			},
			
			getpv1() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pv-1'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									if (index == 0 && item.deviceType.includes('mppt')) {
										const value = parseFloat(item.value);
										this.kWValues.pv1 = value; // 只记录
									}
									
									this.textCanvasData.push({
										type: "text",
										coord: [
											[80 + index * 75, 188]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
								this.textCanvasData.push({
										type: "text",
										coord: [
											[240, 188]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[280, 188]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
							} else {
								this.kWValues.pv1 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pv1 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getpv2() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pv-2'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									if (index == 0 && item.deviceType.includes('mppt')) {
										const value = parseFloat(item.value);
										this.kWValues.pv2 = value; // 只记录
									}	
									this.textCanvasData.push({
										type: "text",
										coord: [
											[80 + index * 75, 208]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
								this.textCanvasData.push({
										type: "text",
										coord: [
											[240, 208]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[280, 208]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
							} else {
								this.kWValues.pv2 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pv2 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getPcs1() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pcs-1'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								this.textCanvasData.push({
										type: "text",
										coord: [
											[80, 228]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[155, 228]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
								res.data.forEach((item, index) => {
									if (item.name.includes('SOC')) {
										const value = parseFloat(item.value);
										this.kWValues.pcs1 = value;
									}
									this.textCanvasData.push({
										type: "text",
										coord: [
											[240 + index * 40, 228]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
							} else {
								this.kWValues.pcs1 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pcs1 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getpv3() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pv-3'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									if (index == 0 && item.deviceType.includes('mppt')) {
										const value = parseFloat(item.value);
										this.kWValues.pv3 = value; // 只记录
									}	
									this.textCanvasData.push({
										type: "text",
										coord: [
											[80 + index * 75, 250]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
								this.textCanvasData.push({
										type: "text",
										coord: [
											[240, 250]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[280, 250]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
							} else {
								this.kWValues.pv3 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pv3 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getpv4() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pv-4'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									if (index == 0 && item.deviceType.includes('mppt')) {
										const value = parseFloat(item.value);
										this.kWValues.pv4 = value; // 只记录
									}	
									this.textCanvasData.push({
										type: "text",
										coord: [
											[80 + index * 75, 272]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
								this.textCanvasData.push({
										type: "text",
										coord: [
											[240, 272]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[280, 272]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
							} else {
								this.kWValues.pv4 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pv4 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getPcs2() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pcs-2'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								this.textCanvasData.push({
										type: "text",
										coord: [
											[80, 294]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[155, 294]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
								res.data.forEach((item, index) => {
									if (item.name.includes('SOC')) {
										const value = parseFloat(item.value);
										this.kWValues.pcs2 = value;
									}
									this.textCanvasData.push({
										type: "text",
										coord: [
											[240 + index * 40, 294]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
							} else {
								this.kWValues.pcs2 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pcs2 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getpv5() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pv-5'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									if (index == 0 && item.deviceType.includes('mppt')) {
										const value = parseFloat(item.value);
										this.kWValues.pv5 = value; // 只记录
									}	
									this.textCanvasData.push({
										type: "text",
										coord: [
											[80 + index * 75, 316]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
								this.textCanvasData.push({
										type: "text",
										coord: [
											[240, 316]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[280, 316]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
							} else {
								this.kWValues.pv5 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pv5 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getpv6() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pv-6'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									if (index == 0 && item.deviceType.includes('mppt')) {
										const value = parseFloat(item.value);
										this.kWValues.pv6 = value; // 只记录
									}	
									this.textCanvasData.push({
										type: "text",
										coord: [
											[80 + index * 75, 338]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
								this.textCanvasData.push({
										type: "text",
										coord: [
											[240, 338]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[280, 338]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
							} else {
								this.kWValues.pv6 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pv6 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getPcs3() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pcs-3'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								this.textCanvasData.push({
										type: "text",
										coord: [
											[80, 360]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[155, 360]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
								res.data.forEach((item, index) => {
									if (item.name.includes('SOC')) {
										const value = parseFloat(item.value);
										this.kWValues.pcs3 = value;
									}
									this.textCanvasData.push({
										type: "text",
										coord: [
											[240 + index * 40, 360]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
							} else {
								this.kWValues.pcs3 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pcs3 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getpv7() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pv-7'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									if (index == 0 && item.deviceType.includes('mppt')) {
										const value = parseFloat(item.value);
										this.kWValues.pv7 = value; // 只记录
									}	
									this.textCanvasData.push({
										type: "text",
										coord: [
											[80 + index * 75, 382]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
								this.textCanvasData.push({
										type: "text",
										coord: [
											[240, 382]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[280, 382]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
							} else {
								this.kWValues.pv7 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pv7 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getpv8() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pv-8'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									if (index == 0 && item.deviceType.includes('mppt')) {
										const value = parseFloat(item.value);
										this.kWValues.pv8 = value; // 只记录
									}	
									this.textCanvasData.push({
										type: "text",
										coord: [
											[80 + index * 75, 404]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
								this.textCanvasData.push({
										type: "text",
										coord: [
											[240, 404]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[280, 404]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
							} else {
								this.kWValues.pv8 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pv8 = 0; // 出错也视为 0
							resolve();
						})
				})
			},
			
			getPcs4() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation: 'triad-pcs-4'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								this.textCanvasData.push({
										type: "text",
										coord: [
											[80, 426]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},{
										type: "text",
										coord: [
											[155, 426]
										],
										font: [{
											text: '--',
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}
								)
								res.data.forEach((item, index) => {
									if (item.name.includes('SOC')) {
										const value = parseFloat(item.value);
										this.kWValues.pcs4 = value;
									}
									this.textCanvasData.push({
										type: "text",
										coord: [
											[240 + index * 40, 426]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									})
								})
							} else {
								this.kWValues.pcs4 = 0; // 没数据视为 0
							}
							resolve()
						}).catch(() => {
							this.kWValues.pcs4 = 0; // 出错也视为 0
							resolve();
						})
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
	.warp {
		width: 650rpx;
		height: 900rpx;
		position: relative;
	}
</style>