fix: 组态增加展示方式

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

@@ -125,7 +125,11 @@ const ConfigurationView = (props) => {
       switch (node.category) {
         case 'svgCase': // 图片模型
           shRule = ruleOperation(node, realVal);
-          myDiagram.model.setDataProperty(node, 'imgSrc', shRule ? shRule.attr : node.dtImgSrc);
+          if (node.shType === '模型切换') {
+            myDiagram.model.setDataProperty(node, 'imgSrc', shRule ? shRule.attr : node.dtImgSrc);
+          } else if (node.shType === '显隐展示') {
+            myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
+          }
           break;
         case 'nameCase': // 名称模型
           if (node.shType === '文本变化') {
@@ -151,6 +155,12 @@ const ConfigurationView = (props) => {
           } else {
             myDiagram.model.setDataProperty(node, 'showVal', realVal);
           }
+          shRule = ruleOperation(node, realVal);
+          myDiagram.model.setDataProperty(
+            node,
+            'fontStroke',
+            shRule ? shRule.attr : node.fontStroke,
+          );
           break;
         case 'waterCase': // 水池模型
           const height = node.height - node.strokeWidth * 2;
@@ -215,15 +225,39 @@ const ConfigurationView = (props) => {
           break;
         case 'modelCase': // 模板块模型
           shRule = ruleOperation(node, realVal);
-          myDiagram.model.setDataProperty(node, 'zOrder', shRule ? shRule.text : node.dtzOrder);
+          if (node.shType === '层级展示') {
+            myDiagram.model.setDataProperty(
+              node,
+              'zOrder',
+              shRule ? shRule.text * 1 || node.dtzOrder : node.dtzOrder,
+            );
+          } else if (node.shType === '显隐展示') {
+            myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
+          }
           break;
         case 'ellipseCase': // 圆形模型
           shRule = ruleOperation(node, realVal);
-          myDiagram.model.setDataProperty(
-            node,
-            'zOrder',
-            shRule ? shRule.text * 1 || 0 : node.dtzOrder,
-          );
+          if (node.shType === '层级展示') {
+            myDiagram.model.setDataProperty(
+              node,
+              'zOrder',
+              shRule ? shRule.text * 1 || node.dtzOrder : node.dtzOrder,
+            );
+          } else if (node.shType === '显隐展示') {
+            myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
+          }
+          break;
+        case 'imgCase': // 图片模型
+          shRule = ruleOperation(node, realVal);
+          if (node.shType === '层级展示') {
+            myDiagram.model.setDataProperty(
+              node,
+              'zOrder',
+              shRule ? shRule.text * 1 || node.dtzOrder : node.dtzOrder,
+            );
+          } else if (node.shType === '显隐展示') {
+            myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
+          }
           break;
         default:
           break;
@@ -948,6 +982,7 @@ const ConfigurationView = (props) => {
         new go.Binding('cursor', 'cursor').makeTwoWay(),
         new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
         new go.Binding('angle').makeTwoWay(),
+        roleVisibleBinding(), // 绑定角色可见
 
         // the main object is a Panel that surrounds a TextBlock with a Shape ~图形：Panel包围着TextBlock
         goJS(
@@ -957,7 +992,7 @@ const ConfigurationView = (props) => {
             name: 'PANEL',
           },
           new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
-
+          new go.Binding('visible', 'visible').makeTwoWay(),
           goJS(
             go.Picture,
             {
@@ -1025,7 +1060,7 @@ const ConfigurationView = (props) => {
             name: 'PANEL',
           },
           new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
-
+          new go.Binding('visible', 'visible').makeTwoWay(),
           goJS(
             go.Picture,
             { name: 'animateSvg', width: 56, height: 56, column: 0, scale: 1, source: '' },
@@ -1079,6 +1114,7 @@ const ConfigurationView = (props) => {
           go.Shape,
           'RoundedRectanglePlus',
           { name: 'SHAPE', fill: 'rgba(128,128,128,0.2)', stroke: 'gray', parameter1: 0 },
+          new go.Binding('visible', 'visible').makeTwoWay(),
           new go.Binding('parameter1', 'radius').makeTwoWay(),
           new go.Binding('fill', 'fillColor').makeTwoWay(),
           new go.Binding('stroke').makeTwoWay(),
@@ -1109,6 +1145,7 @@ const ConfigurationView = (props) => {
           go.Shape,
           'Ellipse',
           { name: 'SHAPE', fill: 'rgba(128,128,128,0.2)', stroke: 'gray' },
+          new go.Binding('visible', 'visible').makeTwoWay(),
           new go.Binding('fill', 'fillColor').makeTwoWay(),
           new go.Binding('stroke').makeTwoWay(),
           new go.Binding('strokeWidth').makeTwoWay(),
@@ -1892,7 +1929,7 @@ const ConfigurationView = (props) => {
       if (item.category === 'modelCase' || item.category === 'ellipseCase') {
         item.dtzOrder = item.zOrder;
       }
-      if (item.category == 'deviceCase' && deviceName && deviceName.length) {
+      if (item.category == 'deviceCase' && item.shType && deviceName && deviceName.length) {
         var device = deviceName.find(function (arr, index) {
           return '设备' + stationList[index] == item.stationName;
         });

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

@@ -155,7 +155,11 @@ const ConfigurationView = (props) => {
       switch (node.category) {
         case 'svgCase': // 图片模型
           shRule = ruleOperation(node, realVal);
-          myDiagram.model.setDataProperty(node, 'imgSrc', shRule ? shRule.attr : node.dtImgSrc);
+          if (node.shType === '模型切换') {
+            myDiagram.model.setDataProperty(node, 'imgSrc', shRule ? shRule.attr : node.dtImgSrc);
+          } else if (node.shType === '显隐展示') {
+            myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
+          }
           break;
         case 'nameCase': // 名称模型
           if (node.shType === '文本变化') {
@@ -181,6 +185,12 @@ const ConfigurationView = (props) => {
           } else {
             myDiagram.model.setDataProperty(node, 'showVal', realVal);
           }
+          shRule = ruleOperation(node, realVal);
+          myDiagram.model.setDataProperty(
+            node,
+            'fontStroke',
+            shRule ? shRule.attr : node.fontStroke,
+          );
           break;
         case 'waterCase': // 水池模型
           const height = node.height - node.strokeWidth * 2;
@@ -245,15 +255,39 @@ const ConfigurationView = (props) => {
           break;
         case 'modelCase': // 模板块模型
           shRule = ruleOperation(node, realVal);
-          myDiagram.model.setDataProperty(node, 'zOrder', shRule ? shRule.text : node.dtzOrder);
+          if (node.shType === '层级展示') {
+            myDiagram.model.setDataProperty(
+              node,
+              'zOrder',
+              shRule ? shRule.text * 1 || node.dtzOrder : node.dtzOrder,
+            );
+          } else if (node.shType === '显隐展示') {
+            myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
+          }
           break;
         case 'ellipseCase': // 圆形模型
           shRule = ruleOperation(node, realVal);
-          myDiagram.model.setDataProperty(
-            node,
-            'zOrder',
-            shRule ? shRule.text * 1 || 0 : node.dtzOrder,
-          );
+          if (node.shType === '层级展示') {
+            myDiagram.model.setDataProperty(
+              node,
+              'zOrder',
+              shRule ? shRule.text * 1 || node.dtzOrder : node.dtzOrder,
+            );
+          } else if (node.shType === '显隐展示') {
+            myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
+          }
+          break;
+        case 'imgCase': // 图片模型
+          shRule = ruleOperation(node, realVal);
+          if (node.shType === '层级展示') {
+            myDiagram.model.setDataProperty(
+              node,
+              'zOrder',
+              shRule ? shRule.text * 1 || node.dtzOrder : node.dtzOrder,
+            );
+          } else if (node.shType === '显隐展示') {
+            myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
+          }
           break;
         default:
           break;
@@ -1366,6 +1400,7 @@ const ConfigurationView = (props) => {
         new go.Binding('cursor', 'cursor').makeTwoWay(),
         new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
         new go.Binding('angle').makeTwoWay(),
+        roleVisibleBinding(), // 绑定角色可见
 
         // the main object is a Panel that surrounds a TextBlock with a Shape ~图形：Panel包围着TextBlock
         goJS(
@@ -1375,7 +1410,7 @@ const ConfigurationView = (props) => {
             name: 'PANEL',
           },
           new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
-
+          new go.Binding('visible', 'visible').makeTwoWay(),
           goJS(
             go.Picture,
             {
@@ -1445,7 +1480,7 @@ const ConfigurationView = (props) => {
             name: 'PANEL',
           },
           new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
-
+          new go.Binding('visible', 'visible').makeTwoWay(),
           goJS(
             go.Picture,
             { name: 'animateSvg', width: 56, height: 56, column: 0, scale: 1, source: '' },
@@ -1511,6 +1546,7 @@ const ConfigurationView = (props) => {
           go.Shape,
           'RoundedRectanglePlus',
           { name: 'SHAPE', fill: 'rgba(128,128,128,0.2)', stroke: 'gray', parameter1: 0 },
+          new go.Binding('visible', 'visible').makeTwoWay(),
           new go.Binding('parameter1', 'radius').makeTwoWay(),
           new go.Binding('fill', 'fillColor').makeTwoWay(),
           new go.Binding('stroke').makeTwoWay(),
@@ -1541,6 +1577,7 @@ const ConfigurationView = (props) => {
           go.Shape,
           'Ellipse',
           { name: 'SHAPE', fill: 'rgba(128,128,128,0.2)', stroke: 'gray' },
+          new go.Binding('visible', 'visible').makeTwoWay(),
           new go.Binding('fill', 'fillColor').makeTwoWay(),
           new go.Binding('stroke').makeTwoWay(),
           new go.Binding('strokeWidth').makeTwoWay(),
@@ -2352,7 +2389,7 @@ const ConfigurationView = (props) => {
       if (item.category === 'modelCase' || item.category === 'ellipseCase') {
         item.dtzOrder = item.zOrder;
       }
-      if (item.category == 'deviceCase' && deviceName && deviceName.length) {
+      if (item.category == 'deviceCase' && item.shType && deviceName && deviceName.length) {
         var device = deviceName.find(function (arr, index) {
           return '设备' + stationList[index] == item.stationName;
         });

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

@@ -21,14 +21,14 @@ const Demo = () => {
     <>
       <div style={{ width: '100%', height: '600px', background: '#242835' }}>
         <PandaHistoryConfiguration
-          // name={'水厂工艺流程段'}
-          // devices={'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004'.split(
-          //   ',',
-          // )}
-          name={'崇左丽江水厂原水泵房'}
-          devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001'.split(
+          name={'水厂工艺流程段'}
+          devices={'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004'.split(
             ',',
           )}
+          // name={'崇左丽江水厂原水泵房'}
+          // devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001'.split(
+          //   ',',
+          // )}
           // name={'丽江水厂原水提升泵D单元'}
           // devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')}
           config={globalConfig}