fix: 组态增加动画帧

packages/extend-components/EC_ConfigurationView/src/index.js

@@ -118,10 +118,7 @@ const ConfigurationView = (props) => {
     deviceName = [],
   } = props;
   const globalConfig = window.globalConfig || config;
-  let poolWater = null;
-  let tubeWater = null;
-  let pumpType = null;
-  let blenderType = null;
+  let isClose = false;
 
   /** **********************************获取工艺图画板信息*********************** */
   const getConfiguraList = async () => {
@@ -480,10 +477,70 @@ const ConfigurationView = (props) => {
     });
   };
 
+  /** 动画设置*********************************************** */
+  const animationSvg = () => {
+    const diagram = myDiagram;
+    const oldskips = diagram.skipsUndoManager;
+    diagram.skipsUndoManager = true;
+    diagram.nodes.map((node) => {
+      const shape = node.findObject('animateSvg');
+      if (!shape) return false;
+      const gpRule = JSON.parse(node.data.gpRule || '[]').concat();
+      const amTime = node.data.amTime || 0;
+      if (!amTime) return false;
+      gpRule.map((item) => {
+        mySetInterval(() => {
+          const { time = 0, fill = 100, scale = 1, angle = 0 } = item;
+          myTimeout(() => {
+            shape.opacity = (fill || 100) / 100;
+            shape.scale = (scale || 1) * 1;
+            shape.angle = (angle || 0) * 1;
+          }, 0.01 * amTime * time);
+        }, amTime * 1);
+      });
+    });
+    diagram.skipsUndoManager = oldskips;
+  };
+
+  const myTimeout = (fn, delay) => {
+    let timer;
+    const stime = +new Date();
+    const myLoop = () => {
+      if (isClose) return timer && cancelAnimationFrame(timer);
+      const etime = +new Date();
+      if (stime + delay <= etime) {
+        fn();
+        return;
+      }
+      timer = requestAnimationFrame(myLoop);
+    };
+    timer = requestAnimationFrame(myLoop);
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  };
+
+  const mySetInterval = (fn, interval) => {
+    let timer;
+    let stime = +new Date();
+    let etime;
+    let myLoop = () => {
+      etime = +new Date();
+      if (isClose) return timer && cancelAnimationFrame(timer);
+      timer = requestAnimationFrame(myLoop);
+      if (etime - stime >= interval) {
+        stime = etime = +new Date();
+        fn();
+      }
+    };
+    return requestAnimationFrame(myLoop);
+  };
+
   /** ******************************************水池效果****************************** */
   const waterSvg = () => {
     const diagram = myDiagram;
-    poolWater = setInterval(() => {
+    // poolWater = setInterval(() => {
+    mySetInterval(() => {
       const oldskips = diagram.skipsUndoManager;
       diagram.skipsUndoManager = true;
       diagram.nodes.each((node) => {
@@ -502,7 +559,8 @@ const ConfigurationView = (props) => {
   /** ***********************************水流效果********************************** */
   const loop = () => {
     const diagram = myDiagram;
-    tubeWater = setInterval(() => {
+    // tubeWater = setInterval(() => {
+    mySetInterval(() => {
       const oldskips = diagram.skipsUndoManager;
       diagram.skipsUndoManager = true;
       diagram.links.each((link) => {
@@ -526,7 +584,8 @@ const ConfigurationView = (props) => {
   /** **************************************泵状态效果*************************** */
   const rotateSvg = () => {
     const diagram = myDiagram;
-    pumpType = setInterval(() => {
+    // pumpType = setInterval(() => {
+    mySetInterval(() => {
       const oldskips = diagram.skipsUndoManager;
       diagram.skipsUndoManager = true;
       diagram.nodes.each((node) => {
@@ -545,7 +604,8 @@ const ConfigurationView = (props) => {
   /** *********************************搅拌机状态效果************************* */
   const blenderSvg = () => {
     const diagram = myDiagram;
-    blenderType = setInterval(() => {
+    // blenderType = setInterval(() => {
+    mySetInterval(() => {
       const oldskips = diagram.skipsUndoManager;
       diagram.skipsUndoManager = true;
       diagram.nodes.each((node) => {
@@ -632,16 +692,9 @@ const ConfigurationView = (props) => {
     const url = globalConfig.mainserver ? globalConfig.mainserver : 'https://panda-water.cn/';
     onlineMethod(`${url}civweb4/assets/images/bootPage/熊猫图标.png`, url);
     return () => {
+      isClose = true;
       mqttView && mqttView.disSaveWaconnect();
       mqttView = null;
-      poolWater && clearInterval(poolWater);
-      poolWater = null;
-      tubeWater && clearInterval(tubeWater);
-      tubeWater = null;
-      pumpType && clearInterval(pumpType);
-      pumpType = null;
-      blenderType && clearInterval(blenderType);
-      blenderType = null;
     };
   }, []);
 
@@ -668,6 +721,7 @@ const ConfigurationView = (props) => {
       _site: globalConfig.userInfo && globalConfig.userInfo.site ? globalConfig.userInfo.site : '',
     });
     if (response.code === 0) {
+      if (isClose) return false;
       const fromJson = response.data
         ? response.data
         : {
@@ -749,9 +803,7 @@ const ConfigurationView = (props) => {
           )
             return false;
           item.realVal = pvList.pv * 1;
-          const shRule = JSON.parse(item.shRule).find((rule) => {
-            return rule.val.toString().split(',').indexOf(item.realVal.toString()) > -1;
-          });
+          const shRule = ruleOperation(item, item.realVal);
           if (shRule) {
             myDiagram.model.setDataProperty(item, 'stroke', shRule.attr);
             myDiagram.model.setDataProperty(item, 'waterStroke', shRule.text);
@@ -1216,7 +1268,7 @@ const ConfigurationView = (props) => {
 
           goJS(
             go.Picture,
-            { width: 56, height: 56, column: 0, scale: 1, source: '' },
+            { name: 'animateSvg', width: 56, height: 56, column: 0, scale: 1, source: '' },
             new go.Binding('source', 'imgSrc', (v) => {
               return `${imgUrl}File/ModelManage/ModelFilePreview/${encodeURIComponent(v)}`;
             }),
@@ -2083,11 +2135,13 @@ const ConfigurationView = (props) => {
       ),
     );
     const fromJson = JSON.parse(jsonStr);
-    const setTime = setTimeout(() => {
+    // const setTime = setTimeout(() => {
+    myTimeout(() => {
       loop();
       waterSvg();
       rotateSvg();
       blenderSvg();
+      animationSvg();
     }, 100);
     const json = JSON.parse(JSON.stringify(fromJson));
     json.linkDataArray.forEach((item) => {