光伏功能逻辑代码及BUG修改

pages/tabbar/components/topology/ceshiT.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<svg style="width:100%; height:100%;" xmlns="http://www.w3.org/2000/svg"
-			xmlns:xlink="http://www.w3.org/1999/xlink" id="svgBox" viewBox="0 0 1280 1360">
+			xmlns:xlink="http://www.w3.org/1999/xlink" id="svgBox" ref="svgBox" viewBox="0 0 1280 1360">
 			
 			<!-- 图片相关，不用管 -->
 			<path
@@ -562,9 +562,8 @@
 			<!-- <circle cx="573" cy="500" r="16" fill="#58D86B" /> -->
 			<circle class="anim-topright anim-boxele" cx="573" cy="500" r="16" fill="#58D86B" />
 			<!-- 动画元素 -->
-			<circle id="myCircle" cx="280" cy="67" r="15" fill="#0DA17D">
-			    <animate attributeName="cx" from="280" to="1000" dur="3000ms" fill="freeze" repeatCount="indefinite" />
-			</circle>
+			<circle class="myCircle" cx="280" cy="67" r="15" fill="#0DA17D"/>
+			
 		</svg>
 	</view>
 	
@@ -664,7 +663,7 @@
 			}
 		},
 		mounted() {
-			document.getElementById('svgBox')?.appendChild(this.createSvgText(this.tags))
+			this.$refs.svgBox?.appendChild(this.createSvgText(this.tags))
 		},
 	}
 </script>
@@ -674,6 +673,24 @@
 		font-family: Arial, sans-serif;
 		font-size: 40px;
 		fill: #7F7F7F;
+	}
+	.myCircle {
+		r: 15;
+		fill: #0DA17D;
+		animation: moveRight 3s linear 0s infinite both;
+	}
+	/* 关键帧：定义运动轨迹（向右→向下→复位） */
+	@keyframes moveRight {
+	  /* 0%：初始位置（cx=280, cy=67） */
+		0% {
+			cx: 280;
+			cy: 67;
+		}
+		/* 100%：瞬间复位（避免卡顿） */
+		100% {
+			cx: 1000;
+			cy: 67;
+		}
 	}
 		/* 通用动画点样式 */
 	    .anim-pv1 {