组网页面

web-network/client/src/sections/network/components/device-tree/zuwang-main.js

@@ -300,7 +300,7 @@ export default function ({ ...props }) {
       });
       const { links } = deviceInfos;
 
-    function getLeaf(parentId) {
+      function getLeaf (parentId) {
          const fromStructs = nodes.get(parentId);
          let tempTreeData = [];
          links.forEach((m) => {
@@ -347,9 +347,8 @@ export default function ({ ...props }) {
                checkable
                onCheck={(checkedKeys, e) => onTreeNodeSelect(checkedKeys, e, treeData.treeData)}
                onSelect={(checkedKeys, e) => {
-            console.log(3213,checkedKeys, e);
                   onTreeNodeClick(checkedKeys, e)
-          } }
+               }}
                defaultCheckedKeys={treeData.defaultTreeNodesCheckedKeys}
                checkStrictly
                // checkedKeys={checkedKeys}
@@ -364,8 +363,8 @@ export default function ({ ...props }) {
                   emitChange={emitChange}
                   changeFinish={_finishDataChange}
                   emitDataChange_={emitDataChange_}
-            width={width}
+                  width={width + 100}
-            height={height}
+                  height={height + 75}
                   targetNode={targetNode}
                   handelNodeClick={_handelNodeClick}
                   onCollapse={onCollapse}

web-network/client/src/sections/network/containers/device-monitor.js

@@ -20,7 +20,7 @@ function DeviceMonitor ({ ...props }) {
       dispatch, actions, user, clientWidth, clientHeight, loading,
       myStructList, deviceMetasWithFollow, devices, dimensions, deviceListAlarms, factorStations,
    } = props;
-console.log(3213,actions);
+
    const { analysis } = actions
 
    const [params, setParams] = useState({});

web/client/src/sections/analysis/containers/network.jsx

@@ -18,7 +18,7 @@ const Network = ({
    const [projectList, setProjectList] = useState([])  //项目列表
    const [projectValue, setProjectValue] = useState()  //选中的项目
    const [thingId, setThingId] = useState()  //结构物thingId
-
+   const [spinning, setSpinning] = useState(true)
    const form = useRef();//表单
 
 
@@ -59,6 +59,21 @@ const Network = ({
       }
    }, [organizationsStruc])
 
+   useEffect(() => {
+      // 获取iframe元素
+      const iframe = document.getElementById('myIframe');
+      console.log(4324, iframe);
+      if (iframe) {
+         // 监听iframe的load事件
+         iframe.addEventListener('load', function () {
+            console.log('IFrame is loaded');
+            setSpinning(false)
+            // 在这里可以执行一些处理，表示iframe加载完毕
+         });
+      }
+
+   }, [])
+
    return (
       <>
          <div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px', height: clientHeight - 72, display: 'flex', flexDirection: 'column' }}>
@@ -87,6 +102,7 @@ const Network = ({
                      optionList={projectList || []}
                      onSelect={v => {
                         setProjectValue(v)
+                        setSpinning(true)
                         form.current.setValue('projectId', v)
                      }}
                   />
@@ -100,6 +116,7 @@ const Network = ({
                      showClear
                      optionList={organizationsStruc?.map(d => ({ value: d.thingId, label: d.strucName })) || []}
                      onSelect={v => {
+                        setSpinning(true)
                         setThingId(v)
                         form.current.setValue('thingId', v)
                      }}
@@ -109,8 +126,14 @@ const Network = ({
             </div>
 
 
-            <div id='show' style={{ width: "100%", height: "calc(100% - 106px)" }}>
+
+            <Spin
+               //  style={{ }}
+               childStyle={{ width: "100%", height: clientHeight - 188 }}
+               spinning={spinning}>
+               <div id='show' style={{ width: "100%", height: "100%" }}>
                   <iframe
+                     id="myIframe"
                      style={{
                         width: '100%',
                         height: '100%',
@@ -121,9 +144,11 @@ const Network = ({
                   >
                      <p>你的浏览器不支持 iframe 。</p>
                   </iframe>
-            </div>
 
 
+               </div>
+            </Spin>
+
             {/* <div id='show' style={{ width: "100%", height: "calc(100% - 106px)" }}>
                <div style={{
                   display: "flex", alignItems: 'center', justifyContent: "space-between",