feat: 组态增加动画、图片翻转

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

@@ -644,6 +644,29 @@ const ConfigurationView = (props) => {
     if (dataType === '统计') getStatisticsData(false);
   }, [props.params]);
 
+  // 图片模型翻转
+  const pictureFlipMethod = (type) => {
+    let flipType = '';
+    switch (type) {
+      case 'none':
+        flipType = go.GraphObject.None;
+        break;
+      case 'horizontal':
+        flipType = go.GraphObject.FlipHorizontal;
+        break;
+      case 'vertical':
+        flipType = go.GraphObject.FlipVertical;
+        break;
+      case 'both':
+        flipType = go.GraphObject.FlipBoth;
+        break;
+      default:
+        flipType = go.GraphObject.None;
+        break;
+    }
+    return flipType;
+  };
+
   /** ************************************获取画板JSON******************************* */
   const getDiagramJson = async (list, siteInfo) => {
     const response = await getSketchPadContent({
@@ -1382,12 +1405,14 @@ const ConfigurationView = (props) => {
               column: 0,
               scale: 1,
               source: require('./images/组态/默认.png'),
+              flip: go.GraphObject.None,
             },
             new go.Binding('source', 'imgSrc', function (v) {
               return !v
                 ? require('./images/组态/默认.png')
                 : `/PandaMonitor/Monitor/SketchPad/PreviewResource?name=${v}&_site=${siteCodeStr}`;
             }).makeTwoWay(),
+            new go.Binding('flip', 'flip', pictureFlipMethod),
             new go.Binding('scale', 'scale').makeTwoWay(),
             new go.Binding('width', 'width').makeTwoWay(),
             new go.Binding('height', 'height').makeTwoWay(),
@@ -1440,13 +1465,22 @@ const ConfigurationView = (props) => {
           new go.Binding('visible', 'visible').makeTwoWay(),
           goJS(
             go.Picture,
-            { name: 'animateSvg', width: 56, height: 56, column: 0, scale: 1, source: '' },
+            {
+              name: 'animateSvg',
+              width: 56,
+              height: 56,
+              column: 0,
+              scale: 1,
+              source: '',
+              flip: go.GraphObject.None,
+            },
             new go.Binding('source', 'imgSrc', (v) => {
               return `${imgUrl}Model/Preview/${encodeURIComponent(v)}`;
             }),
             new go.Binding('scale', 'scale').makeTwoWay(),
             new go.Binding('width', 'width').makeTwoWay(),
             new go.Binding('height', 'height').makeTwoWay(),
+            new go.Binding('flip', 'flip', pictureFlipMethod),
           ),
         ),
         {

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

@@ -75,6 +75,8 @@ const ConfigurationView = (props) => {
   let mqttView = null;
   let editionArr = [];
   let globalControl = false;
+  // 入场动画
+  let entryAnim = '';
   const guidAggre = {};
   const bindData = [];
   const stationList = [];
@@ -912,6 +914,7 @@ const ConfigurationView = (props) => {
       mqttView && mqttView.disSaveWaconnect();
       mqttView = null;
       if (myDiagram) {
+        myDiagram.removeDiagramListener('InitialAnimationStarting', animationStarting);
         myDiagram.div = null;
         myDiagram = null;
         setIsDiagram(null);
@@ -1003,6 +1006,29 @@ const ConfigurationView = (props) => {
     return shRule;
   };
 
+  // 图片模型翻转
+  const pictureFlipMethod = (type) => {
+    let flipType = '';
+    switch (type) {
+      case 'none':
+        flipType = go.GraphObject.None;
+        break;
+      case 'horizontal':
+        flipType = go.GraphObject.FlipHorizontal;
+        break;
+      case 'vertical':
+        flipType = go.GraphObject.FlipVertical;
+        break;
+      case 'both':
+        flipType = go.GraphObject.FlipBoth;
+        break;
+      default:
+        flipType = go.GraphObject.None;
+        break;
+    }
+    return flipType;
+  };
+
   /** ************************************获取画板JSON******************************* */
   const getDiagramJson = async (list, siteInfo) => {
     const response = await getSketchPadContent({
@@ -1726,6 +1752,12 @@ const ConfigurationView = (props) => {
     return modalComponent && nodeData ? modalComponent() : null;
   };
 
+  // 监听初始化动画渲染动画
+  const animationStarting = (e) => {
+    const animations = e.subject.defaultAnimation;
+    if (entryAnim === 'opacity') animations.add(e.diagram, 'opacity', 0, 1);
+  };
+
   /** **********************************画布渲染************************************ */
   const diagramRender = (jsonStr, chartInfo) => {
     myDiagram = goJS(
@@ -2019,12 +2051,14 @@ const ConfigurationView = (props) => {
               column: 0,
               scale: 1,
               source: require('./images/组态/默认.png'),
+              flip: go.GraphObject.None,
             },
             new go.Binding('source', 'imgSrc', function (v) {
               return !v
                 ? require('./images/组态/默认.png')
                 : `/PandaMonitor/Monitor/SketchPad/PreviewResource?name=${v}&_site=${siteCodeStr}`;
             }).makeTwoWay(),
+            new go.Binding('flip', 'flip', pictureFlipMethod),
             new go.Binding('scale', 'scale').makeTwoWay(),
             new go.Binding('width', 'width').makeTwoWay(),
             new go.Binding('height', 'height').makeTwoWay(),
@@ -2084,13 +2118,22 @@ const ConfigurationView = (props) => {
           new go.Binding('visible', 'visible').makeTwoWay(),
           goJS(
             go.Picture,
-            { name: 'animateSvg', width: 56, height: 56, column: 0, scale: 1, source: '' },
+            {
+              name: 'animateSvg',
+              width: 56,
+              height: 56,
+              column: 0,
+              scale: 1,
+              source: '',
+              flip: go.GraphObject.None,
+            },
             new go.Binding('source', 'imgSrc', (v) => {
               return `${imgUrl}Model/Preview/${encodeURIComponent(v)}`;
             }),
             new go.Binding('scale', 'scale').makeTwoWay(),
             new go.Binding('width', 'width').makeTwoWay(),
             new go.Binding('height', 'height').makeTwoWay(),
+            new go.Binding('flip', 'flip', pictureFlipMethod),
           ),
         ),
         {
@@ -3261,6 +3304,7 @@ const ConfigurationView = (props) => {
       }
       if (item.category === 'bgCase') {
         myDiagram.defaultScale = item.scaling || item.scaling === 0 ? item.scaling * 1 : 1;
+        entryAnim = item?.entryAnim || '';
       }
       if (item.category === 'groupCase') {
         item.dtVisible = item?.visible || false;
@@ -3273,6 +3317,26 @@ const ConfigurationView = (props) => {
       if (item.controlType === '开关展示') item.switch = '是';
       if (item.category === 'valCase') item.shType = '值显示';
     });
+    // 初始化动画
+    switch (entryAnim) {
+      case 'none':
+        myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
+        break;
+      case 'default':
+        myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.Default;
+        break;
+      case 'location':
+        myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.AnimateLocations;
+        break;
+      case 'opacity':
+        myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
+        break;
+      default:
+        myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.Default;
+        break;
+    }
+    // 动画监听
+    myDiagram.addDiagramListener('InitialAnimationStarting', animationStarting);
     myDiagram.model = go.Model.fromJson(json);
     getDataModel();
     setIsDiagram(myDiagram);

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

@@ -975,6 +975,29 @@ const ConfigurationView = (props) => {
     return shRule;
   };
 
+  // 图片模型翻转
+  const pictureFlipMethod = (type) => {
+    let flipType = '';
+    switch (type) {
+      case 'none':
+        flipType = go.GraphObject.None;
+        break;
+      case 'horizontal':
+        flipType = go.GraphObject.FlipHorizontal;
+        break;
+      case 'vertical':
+        flipType = go.GraphObject.FlipVertical;
+        break;
+      case 'both':
+        flipType = go.GraphObject.FlipBoth;
+        break;
+      default:
+        flipType = go.GraphObject.None;
+        break;
+    }
+    return flipType;
+  };
+
   /** ************************************获取画板JSON******************************* */
   const getDiagramJson = async (list, siteInfo) => {
     const response = await getSketchPadContent({
@@ -1957,12 +1980,14 @@ const ConfigurationView = (props) => {
               column: 0,
               scale: 1,
               source: require('./images/组态/默认.png'),
+              flip: go.GraphObject.None,
             },
             new go.Binding('source', 'imgSrc', function (v) {
               return !v
                 ? require('./images/组态/默认.png')
                 : `/PandaMonitor/Monitor/SketchPad/PreviewResource?name=${v}&_site=${siteCodeStr}`;
             }).makeTwoWay(),
+            new go.Binding('flip', 'flip', pictureFlipMethod),
             new go.Binding('scale', 'scale').makeTwoWay(),
             new go.Binding('width', 'width').makeTwoWay(),
             new go.Binding('height', 'height').makeTwoWay(),
@@ -2022,13 +2047,22 @@ const ConfigurationView = (props) => {
           new go.Binding('visible', 'visible').makeTwoWay(),
           goJS(
             go.Picture,
-            { name: 'animateSvg', width: 56, height: 56, column: 0, scale: 1, source: '' },
+            {
+              name: 'animateSvg',
+              width: 56,
+              height: 56,
+              column: 0,
+              scale: 1,
+              source: '',
+              flip: go.GraphObject.None,
+            },
             new go.Binding('source', 'imgSrc', (v) => {
               return `${imgUrl}Model/Preview/${encodeURIComponent(v)}`;
             }),
             new go.Binding('scale', 'scale').makeTwoWay(),
             new go.Binding('width', 'width').makeTwoWay(),
             new go.Binding('height', 'height').makeTwoWay(),
+            new go.Binding('flip', 'flip', pictureFlipMethod),
           ),
         ),
         {

packages/extend-components/EC_ConfigurationView/src/demos/Basic.tsx

@@ -39,10 +39,10 @@ const Demo = () => {
       </div>
       <Button
         onClick={() => {
-          // setName('崇左丽江水厂原水泵房');
-          // setDevices(
-          //   'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003',
-          // );
+          setName('崇左丽江水厂原水泵房');
+          setDevices(
+            'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003',
+          );
           setMessaged({
             age: '运行监控',
           });