fix: 组态修改逻辑版本

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

@@ -1788,6 +1788,66 @@ const ConfigurationView = (props) => {
       ),
     );
 
+    // 更新时间定义
+    myDiagram.nodeTemplateMap.add(
+      'timeCase',
+      goJS(
+        go.Node,
+        'Auto',
+        nodeStyle(),
+        'Spot',
+        { locationSpot: go.Spot.Center, zOrder: 3, cursor: 'default' },
+        new go.Binding('zOrder', 'zOrder').makeTwoWay(),
+        new go.Binding('cursor', 'cursor').makeTwoWay(),
+        new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        new go.Binding('angle').makeTwoWay(),
+        roleVisibleBinding(), // 绑定角色可见
+        goJS(
+          go.Shape,
+          'RoundedRectanglePlus',
+          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
+          new go.Binding('fill', 'fillColor').makeTwoWay(),
+          new go.Binding('stroke').makeTwoWay(),
+          new go.Binding('strokeWidth').makeTwoWay(),
+          new go.Binding('parameter1', 'radius').makeTwoWay(),
+          new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
+        ),
+        goJS(
+          go.TextBlock,
+          textStyle(),
+          {
+            // margin: 5,
+            maxSize: new go.Size(NaN, NaN),
+            minSize: new go.Size(NaN, 1),
+            wrap: go.TextBlock.WrapFit,
+            textAlign: 'center',
+            editable: true,
+            font: 'bold 12px Helvetica, Arial, sans-serif',
+            stroke: '#454545',
+          },
+          new go.Binding('text').makeTwoWay(),
+          new go.Binding('font', 'fontStyle'),
+          new go.Binding('stroke', 'fontStroke').makeTwoWay(),
+          new go.Binding('textAlign', 'fontAlign'),
+          new go.Binding('maxSize', 'textSize'),
+          new go.Binding('minSize', 'textSize'),
+        ),
+        {
+          // define a tooltip for each node that displays the color as text
+          toolTip: goJS(
+            'ToolTip',
+            goJS(
+              go.TextBlock,
+              { margin: 2 },
+              new go.Binding('text', 'timeStr'),
+              new go.Binding('visible', 'toolTip'),
+            ),
+            new go.Binding('visible', 'toolTip'),
+          ),
+        },
+      ),
+    );
+
     // 公用管定义
     myDiagram.nodeTemplateMap.add(
       'HBar',
@@ -2463,9 +2523,11 @@ const ConfigurationView = (props) => {
         <LoadBox spinning={spinning} />
         {isEmpty && <Empty theme={'dark'} description={description} />}
       </div>
-      <div className={classNames('configurationLoad')}>
-        <LoadBox spinning={spinLoad} />
-      </div>
+      {spinLoad && (
+        <div className={classNames('configurationLoad')}>
+          <LoadBox spinning={spinLoad} />
+        </div>
+      )}
       {/* 历史曲线 */}
       {isHIModalVisible && (
         <Modal

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

@@ -64,10 +64,11 @@ let historyInfoParams = [];
 let statisticalInfoParams = {};
 let nodeData = null; // 选中节点的数据
 let twoID = '';
+let myDiagram = null;
 const waterFlow = new WaterFlowControlView();
 
 const ConfigurationView = (props) => {
-  let myDiagram = null;
+  // let myDiagram = null;
   let mqttView = null;
   let editionArr = [];
   let globalControl = false;
@@ -835,6 +836,16 @@ const ConfigurationView = (props) => {
     };
   };
 
+  useEffect(() => {
+    diagramInit();
+    return () => {
+      if (myDiagram) {
+        myDiagram.div = null;
+        myDiagram = null;
+      }
+    };
+  }, []);
+
   useEffect(() => {
     if (!props.name) {
       setDescription('咦~工艺图配置信息不全哦~');
@@ -842,16 +853,17 @@ const ConfigurationView = (props) => {
       setSpinning(false);
       return false;
     }
+    setSpinning(true);
     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;
-      if (myDiagram) {
-        myDiagram.div = null;
-        myDiagram = null;
-      }
+      // if (myDiagram) {
+      //   myDiagram.div = null;
+      //   myDiagram = null;
+      // }
     };
   }, [props.name]);
 
@@ -880,6 +892,7 @@ const ConfigurationView = (props) => {
           ? globalConfig.userInfo.LocalSite
           : '',
     });
+    setSpinning(false);
     if (response.code === 0) {
       if (isClose) return false;
       const fromJson = response.data
@@ -1523,7 +1536,7 @@ const ConfigurationView = (props) => {
   };
 
   /** **********************************画布渲染************************************ */
-  const diagramRender = (jsonStr, chartInfo) => {
+  const diagramInit = (jsonStr, chartInfo) => {
     myDiagram = goJS(
       go.Diagram,
       twoID, // must name or refer to the DIV HTML element
@@ -2965,7 +2978,8 @@ const ConfigurationView = (props) => {
     //     }),
     //   ),
     // );
-
+  };
+  const diagramRender = (jsonStr, chartInfo) => {
     const fromJson = JSON.parse(jsonStr);
     myTimeout(() => {
       loop();
@@ -3027,9 +3041,14 @@ const ConfigurationView = (props) => {
   return (
     <div className={classNames(prefixCls)} ref={ConfigurationRef}>
       <div id={twoID} className={classNames('configurationView')}>
-        <LoadBox spinning={spinning} />
+        {/* <LoadBox spinning={spinning} /> */}
         {isEmpty && <Empty theme={'dark'} description={description} />}
       </div>
+      {spinning && (
+        <div className={classNames('configurationLoad')}>
+          <LoadBox spinning={spinning} />
+        </div>
+      )}
       {/* 远程控制 */}
       {isModalVisible && (
         <Modal

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

@@ -3,9 +3,9 @@ import { Button } from 'antd';
 import PandaConfiguration from '../index';
 // import PandaConfigurationView from '../../es/index';
 const Demo = () => {
-  const [name, setName] = useState('调度');
+  const [name, setName] = useState('水厂工艺流程段');
   const [devices, setDevices] = useState(
-    'QSBF00000001,CGS00000001,SZ00000001,SZ00000008,SZ00000006,SZ00000010,SZ00000007,YLB00000019,YLB00000018,YLB00000031,YLB00000036,YLB00000006,YLB00000029,YLB00000038,YLB00000033,YLB00000027,YLB00000044,YLB00000030,YLB00000035,YLB00000013,YLB00000041,YLB00000042,JFJ00000001,XNCDC00000001,SLC00000001,TLC00000001,SC00000023,SZ00000005,SZ00000004,SZ00000015,SZ00000014,SZ00000011,SZ00000012,YLB00000039,YLB00000034,YLB00000040,SB00000014,SB00000007,SB00000006,SB00000004,SB00000018,SB00000027,SB00000026,SB00000019,SB00000048,SB00000302,SB00000045,SB00000047,SB00000041,SB00000036,SB00000029,SC00000023,SB00000288,SB00000028,SB00000030,SZ00000016,LLJ00000002,LLJ00000003,LLJ00000004,LLJ00000001',
+    'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004,SC00000003',
   );
   return (
     <>
@@ -44,18 +44,18 @@ export default Demo;
 
 const globalConfig = {
   token: 'a1372ef0ce7b4e4884d31cfd99fe92f6',
-  mqtt_iotIP: '221.229.200.85:8083',
+  mqtt_iotIP: 'emqttd10.panda-water.cn:443',
   mqtt_path: '/mqtt',
-  mqtt_IsSSL: false,
-  mqtt_site_code: 'site_qd5880vd',
+  mqtt_IsSSL: true,
+  mqtt_site_code: 'site_dc8302ni',
   mqtt_mess: {
     MessageLevel: '1.0',
-    TcpIP: '221.229.200.85',
-    TcpPort: 8083,
-    site_code: 'site_qd5880vd',
+    TcpIP: 'emqttd10.panda-water.cn',
+    TcpPort: 443,
+    site_code: 'site_dc8302ni',
   },
   userInfo: {
-    LocalSite: 'site_qd5880vd',
+    LocalSite: 'site_dc8302ni',
     site: '',
   },
 };

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

@@ -312,5 +312,6 @@
     justify-content: center;
     width: 100%;
     height: 100%;
+    z-index: 10;
   }
 }
\ No newline at end of file