fix: 组态增加图片模型、功能跳转方法

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

@@ -541,6 +541,10 @@ const ConfigurationView = (props) => {
     onlineMethod(`${url}civweb4/assets/images/bootPage/熊猫图标.png`, url);
     return () => {
       isClose = true;
+      if (myDiagram) {
+        myDiagram.div = null;
+        myDiagram = null;
+      }
     };
   }, []);
 
@@ -791,8 +795,10 @@ const ConfigurationView = (props) => {
 
   /** **************************************跳转方法****************************************** */
   const menuJumpMethod = (node) => {
-    const list = querySkipUrl(globalConfig?.widgets || [], node?.widget || '');
-    if (!list || !node?.widget) return false;
+    const opRule = JSON.parse(data.opRule);
+    const widget = opRule && opRule.widget ? opRule.widget : '';
+    const list = querySkipUrl(globalConfig?.widgets || [], widget);
+    if (!list || !widget) return false;
     window.history.pushState({}, null, `/civbase/${list.product || 'civweb4'}/${list.url}`);
   };
 

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

@@ -97,6 +97,7 @@ const ConfigurationView = (props) => {
   const [spinning, setSpinning] = useState(true); // 画板loading
   const [isEmpty, setIsEmpty] = useState(false); // 画板无数据状态
   const [description, setDescription] = useState(''); // 画板无数据描述
+  const [first, setFirst] = useState(true); // 第一次加载
 
   twoID = `TDG${Date.now().toString(36)}`;
   const AdjustControlInput = useRef();
@@ -665,14 +666,17 @@ const ConfigurationView = (props) => {
 
   /** ************************************联网判断******************************* */
   const onlineMethod = (pathImg, url) => {
+    if (!first) return getConfiguraList();
     const ImgObj = new Image();
     ImgObj.src = pathImg;
     ImgObj.onload = () => {
       online = ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0);
+      setFirst(false);
       getConfiguraList();
     };
     ImgObj.onerror = () => {
       online = false;
+      setFirst(false);
       getConfiguraList();
     };
   };
@@ -690,8 +694,12 @@ const ConfigurationView = (props) => {
       isClose = true;
       mqttView && mqttView.disSaveWaconnect();
       mqttView = null;
+      if (myDiagram) {
+        myDiagram.div = null;
+        myDiagram = null;
+      }
     };
-  }, []);
+  }, [props.name, props.devices]);
 
   useEffect(() => {
     if (!isModalVisible) {
@@ -1166,9 +1174,11 @@ const ConfigurationView = (props) => {
   };
 
   /** **************************************跳转方法****************************************** */
-  const menuJumpMethod = (node) => {
-    const list = querySkipUrl(globalConfig?.widgets || [], node?.widget || '');
-    if (!list || !node?.widget) return false;
+  const menuJumpMethod = (data) => {
+    const opRule = JSON.parse(data.opRule);
+    const widget = opRule && opRule.widget ? opRule.widget : '';
+    const list = querySkipUrl(globalConfig?.widgets || [], widget);
+    if (!list || !widget) return false;
     window.history.pushState({}, null, `/civbase/${list.product || 'civweb4'}/${list.url}`);
   };
 

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

-import React from 'react';
+import React, { useState } from 'react';
+import { Button } from 'antd';
 import PandaConfiguration from '../index';
 // import PandaConfigurationView from '../../es/index';
 const Demo = () => {
+  const [name, setName] = useState('水厂工艺流程段');
+  const [devices, setDevices] = useState(
+    'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004,SC00000003',
+  );
   return (
-    <div style={{ width: '100%', height: '600px', background: '#242835' }}>
-      <PandaConfiguration
-        name={'水厂工艺流程段'}
-        devices={'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004,SC00000003'.split(
-          ',',
-        )}
-        // name={'崇左丽江水厂原水泵房'}
-        // devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003'.split(
-        //   ',',
-        // )}
-        // name={'丽江水厂原水提升泵D单元'}
-        // devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')}
-        config={globalConfig}
-        deviceName={['工艺流程1', '工艺流程2', '工艺流程3']}
-        // isZoom={true}
-        // flowShow={false}
-      />
-    </div>
+    <>
+      <div style={{ width: '100%', height: '600px', background: '#242835' }}>
+        <PandaConfiguration
+          name={name}
+          devices={devices.split(',')}
+          // name={'崇左丽江水厂原水泵房'}
+          // devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003'.split(
+          //   ',',
+          // )}
+          // name={'丽江水厂原水提升泵D单元'}
+          // devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')}
+          config={globalConfig}
+          deviceName={['工艺流程1', '工艺流程2', '工艺流程3']}
+          // isZoom={true}
+          // flowShow={false}
+        />
+      </div>
+      <Button
+        onClick={() => {
+          setName('崇左丽江水厂原水泵房');
+          setDevices(
+            'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003',
+          );
+        }}
+        style={{ margin: '10px' }}
+      >
+        改变组态名称
+      </Button>
+    </>
   );
 };