udpate

src/views/pages/OpticalStoragePage/index.vue

@@ -1323,26 +1323,19 @@ let handleAnimate = async (result: any) => {
     let middleDuration = duration / num1;
 
     for (let i = 0; i < numTriangles; i++) {
-      let triangle = draw
+      let triangle = draw.polygon('0,-1 4,0 0,1').fill('lightgreen').stroke({ color: 'lightgreen', width: 0.2 })
-        .polygon("0,-2 6,0 0,2")
-        .fill("lightgreen")
-        .stroke({ color: "lightgreen", width: 0.2 });
 
-      let triangleanimate = document.createElementNS(
+      let triangleanimate = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion')
-        "http://www.w3.org/2000/svg",
+      triangleanimate.setAttribute('path', pointsValue)
-        "animateMotion"
+      triangleanimate.setAttribute('dur', `${spacingDuration}s`)
-      );
+      let startTime = middleDuration - (duration / numTriangles) * i - i * spacingDuration
-      triangleanimate.setAttribute("path", pointsValue);
+      triangleanimate.setAttribute('begin', `${startTime}s`)
-      triangleanimate.setAttribute("dur", `${spacingDuration}s`);
+      triangleanimate.setAttribute('fill', 'remove')
-      let startTime =
+      triangleanimate.setAttribute('rotate', 'auto')
-        middleDuration - (duration / numTriangles) * i - i * spacingDuration;
+      triangleanimate.setAttribute('repeatCount', 'indefinite')
-      triangleanimate.setAttribute("begin", `${startTime}s`);
+      triangle.node.appendChild(triangleanimate)
-      triangleanimate.setAttribute("fill", "remove");
-      triangleanimate.setAttribute("rotate", "auto");
-      triangleanimate.setAttribute("repeatCount", "indefinite");
-      triangle.node.appendChild(triangleanimate);
 
-      lineDom.add(triangle);
+      lineDom.add(triangle)
     }
     let rect = draw.rect(30, 30).fill("#000").move(-5, -10);
     lineDom.add(rect);
@@ -1462,29 +1455,22 @@ let handleAnimate = async (result: any) => {
     let duration = numTriangles / num1;
     let middleDuration = duration / num1;
     for (let i = 0; i < numTriangles; i++) {
-      let triangle = draw
+      let triangle = draw.polygon('0,-1 -4,0 0,1').fill('lightgreen').stroke({ color: 'lightgreen', width: 0.2 })
-        .polygon("0,-2 -6,0 0,2")
-        .fill("lightgreen")
-        .stroke({ color: "lightgreen", width: 0.2 });
 
-      let triangleanimate = document.createElementNS(
+      let triangleanimate = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion')
-        "http://www.w3.org/2000/svg",
+      triangleanimate.setAttribute('path', pointsValue)
-        "animateMotion"
+      triangleanimate.setAttribute('dur', `${spacingDuration}s`)
-      );
+      let startTime = middleDuration - (duration / numTriangles) * i - i * spacingDuration
-      triangleanimate.setAttribute("path", pointsValue);
+      triangleanimate.setAttribute('begin', `${startTime}s`)
-      triangleanimate.setAttribute("dur", `${spacingDuration}s`);
+      triangleanimate.setAttribute('fill', 'remove')
-      let startTime =
+      triangleanimate.setAttribute('rotate', 'auto')
-        middleDuration - (duration / numTriangles) * i - i * spacingDuration;
+      triangleanimate.setAttribute('repeatCount', 'indefinite')
-      triangleanimate.setAttribute("begin", `${startTime}s`);
+      triangleanimate.setAttribute('keyPoints', '1;0')
-      triangleanimate.setAttribute("fill", "remove");
+      triangleanimate.setAttribute('keyTimes', '0;1')
-      triangleanimate.setAttribute("rotate", "auto");
+      triangleanimate.setAttribute('calcMode', 'linear')
-      triangleanimate.setAttribute("repeatCount", "indefinite");
+      triangle.node.appendChild(triangleanimate)
-      triangleanimate.setAttribute("keyPoints", "1;0");
-      triangleanimate.setAttribute("keyTimes", "0;1");
-      triangleanimate.setAttribute("calcMode", "linear");
-      triangle.node.appendChild(triangleanimate);
 
-      lineDom.add(triangle);
+      lineDom.add(triangle)
     }
     let rect = draw.rect(30, 30).fill("#000").move(-5, -10);
     lineDom.add(rect);
@@ -1506,12 +1492,12 @@ let handleAnimate = async (result: any) => {
       // 这是变压器上的文字和线段
       // 引出线
       draw
-        .line(centerX, centerY, centerX + 20, centerY - 20)
+        .line(centerX, centerY, centerX + 10, centerY - 10)
         .attr({
-          "stroke-width": 0.1,
+          'stroke-width': 0.1,
-          id: "load_" + data.load_id,
+          id: 'load_' + data.load_id,
-          stroke: "green",
+          stroke: 'green',
-          "stroke-dasharray": "3,3",
+          'stroke-dasharray': '1,1'
         })
         .font({ size: "8" });
       // 文本
@@ -1522,11 +1508,11 @@ let handleAnimate = async (result: any) => {
           ).toFixed(4)} kVar`
         )
         .attr({
-          x: centerX + 20,
+          x: centerX + 10,
-          y: centerY - 20,
+          y: centerY - 10,
-          id: "load_text" + data.load_id,
+          id: 'load_text' + data.load_id,
-          "font-size": "4",
+          'font-size': '2',
-          leading: "0.9",
+          leading: '0.9'
         })
         .fill("green");
     }