组网页面

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

@@ -4,7 +4,7 @@ import Immutable from 'immutable';
 import { sort, Request, PinyinHelper } from '@peace/utils';
 import { ApiTable } from '$utils';
 import {
-  Spin, Modal, Card, Input, Button, message, Menu, Dropdown, Tree,
+   Spin, Modal, Card, Input, Button, message, Menu, Dropdown, Tree,
 } from 'antd';
 import Ps from 'perfect-scrollbar';
 import createG6 from './edit-map';
@@ -12,368 +12,367 @@ import createG6 from './edit-map';
 // import { useThingsLinkStatus } from '../../actions/hooks';
 
 const Tree_ = createG6((tree) => {
-  tree.render();
+   tree.render();
 });
 
 export default function ({ ...props }) {
-  const {
-    struct, data, resetFoldAllG6ToCenter, foldAllG6ToCenter, g6TreeDirection, emitChange, emitDataChange_,
-    width, height, collapseAll, collapsed, expanded, expandAll, changeFinish, targetNode, inputSearching, setInputSearching,
-    onCollapse, handleNodeEnter, handelNodeClick,
-  } = props;
-  const [isGetLinkStateDone, { setTrue, setFalse }] = useBoolean(false);
-  const [devicesLinkState, setDevicesLinkState] = useSafeState(null);
-  const [treeNodeCheckedKeys, setTreeNodeCheckedKeys] = useSafeState([]);
-  const [currSDids, setCurrSDids] = useSafeState([]);
-  const [g6Tree, setG6Tree] = useSafeState(null);
-  const [g6TreeData, setG6TreeData] = useSafeState(null);
-  const [lastClickNodeKey, setLastClickNodeKey] = useSafeState(null);
-  const [disCheckedKeys, setDisCheckedKeys] = useSafeState([]);
-  let intervalLinkStatus = null;
+   const {
+      struct, data, resetFoldAllG6ToCenter, foldAllG6ToCenter, g6TreeDirection, emitChange, emitDataChange_,
+      width, height, collapseAll, collapsed, expanded, expandAll, changeFinish, targetNode, inputSearching, setInputSearching,
+      onCollapse, handleNodeEnter, handelNodeClick,
+   } = props;
+   const [isGetLinkStateDone, { setTrue, setFalse }] = useBoolean(false);
+   const [devicesLinkState, setDevicesLinkState] = useSafeState(null);
+   const [treeNodeCheckedKeys, setTreeNodeCheckedKeys] = useSafeState([]);
+   const [currSDids, setCurrSDids] = useSafeState([]);
+   const [g6Tree, setG6Tree] = useSafeState(null);
+   const [g6TreeData, setG6TreeData] = useSafeState(null);
+   const [lastClickNodeKey, setLastClickNodeKey] = useSafeState(null);
+   const [disCheckedKeys, setDisCheckedKeys] = useSafeState([]);
+   let intervalLinkStatus = null;
 
-  // const da =  useThingsLinkStatus(struct?.iotaThingId);
+   // const da =  useThingsLinkStatus(struct?.iotaThingId);
 
-  const getThingsLinkStatus = (isCycle = false) => {
-    const iotaThingId = struct?.thingId;
-    if (iotaThingId) {
-      const url = ApiTable.getIotaThingsLlinkStatus.replace('{iotaThingId}', iotaThingId);
-      Request.get(url).then((res) => {
-        if (res.devices.length >= 0) {
-          setDevicesLinkState(res.devices);
-        } else {
-          intervalLinkStatus && clearInterval(intervalLinkStatus);
-        }
-        if (!isCycle) {
-          setTrue();
-        }
-      }, (error) => {
-        if (!isCycle) {
-          message.warning('设备在线状态获取失败');
-          setTrue();
-        }
-      });
-    }
-  };
-  useEffect(() => {
-    getThingsLinkStatus();
-    intervalLinkStatus = setInterval(() => {
-      getThingsLinkStatus(true);
-    }, 4000);
-    new Ps('#deviceTree', { suppressScrollX: true });
-    return () => {
-      intervalLinkStatus && clearInterval(intervalLinkStatus);
-    };
-  }, []);
+   const getThingsLinkStatus = (isCycle = false) => {
+      const iotaThingId = struct?.thingId;
+      if (iotaThingId) {
+         const url = ApiTable.getIotaThingsLlinkStatus.replace('{iotaThingId}', iotaThingId);
+         Request.get(url).then((res) => {
+            if (res.devices.length >= 0) {
+               setDevicesLinkState(res.devices);
+            } else {
+               intervalLinkStatus && clearInterval(intervalLinkStatus);
+            }
+            if (!isCycle) {
+               setTrue();
+            }
+         }, (error) => {
+            if (!isCycle) {
+               message.warning('设备在线状态获取失败');
+               setTrue();
+            }
+         });
+      }
+   };
+   useEffect(() => {
+      getThingsLinkStatus();
+      intervalLinkStatus = setInterval(() => {
+         getThingsLinkStatus(true);
+      }, 4000);
+      new Ps('#deviceTree', { suppressScrollX: true });
+      return () => {
+         intervalLinkStatus && clearInterval(intervalLinkStatus);
+      };
+   }, []);
 
-  useEffect(() => {
-    const nextDeviceIds = Object.keys(data);
-    if (currSDids.length != nextDeviceIds.length) {
-      const nextSDids = [];
-      const checked = [].concat(treeNodeCheckedKeys);
-      for (const id of nextDeviceIds) {
-        if ((data[id]?.type == 's.d' || data[id]?.type == 's.iota') && !currSDids.some((c) => c == id)) {
-          checked.push(id);
-        }
-        nextSDids.push(id);
+   useEffect(() => {
+      const nextDeviceIds = Object.keys(data);
+      if (currSDids.length != nextDeviceIds.length) {
+         const nextSDids = [];
+         const checked = [].concat(treeNodeCheckedKeys);
+         for (const id of nextDeviceIds) {
+            if ((data[id]?.type == 's.d' || data[id]?.type == 's.iota') && !currSDids.some((c) => c == id)) {
+               checked.push(id);
+            }
+            nextSDids.push(id);
+         }
+         emitDataChange_ && emitDataChange_(true);
+         setTreeNodeCheckedKeys(checked);
+         setCurrSDids(nextSDids);
+      }
+      if (foldAllG6ToCenter && g6Tree) {
+         toG6Center(width, height, g6TreeDirection);
+         resetFoldAllG6ToCenter();
       }
-      emitDataChange_ && emitDataChange_(true);
-      setTreeNodeCheckedKeys(checked);
-      setCurrSDids(nextSDids);
-    }
-    if (foldAllG6ToCenter && g6Tree) {
-      toG6Center(width, height, g6TreeDirection);
-      resetFoldAllG6ToCenter();
-    }
-  }, [data, foldAllG6ToCenter]);
+   }, [data, foldAllG6ToCenter]);
 
-  useEffect(() => {
-    if (g6Tree) {
-      toG6Center(width, height, g6TreeDirection);
-      g6Tree.changeLayout(
-        new G6.Layout.CompactBoxTree({ direction: g6TreeDirection }),
-      );
-    }
-  }, [g6TreeDirection]);
+   useEffect(() => {
+      if (g6Tree) {
+         toG6Center(width, height, g6TreeDirection);
+         g6Tree.changeLayout(
+            new G6.Layout.CompactBoxTree({ direction: g6TreeDirection }),
+         );
+      }
+   }, [g6TreeDirection]);
 
-  useEffect(() => {
-    if (g6Tree && inputSearching) {
-      const items = g6Tree.getItems();
+   useEffect(() => {
+      if (g6Tree && inputSearching) {
+         const items = g6Tree.getItems();
 
-      if (items && items.length) {
-        items.forEach((item) => {
-          const { model } = item._attrs;
-          if (model && model.label && targetNode && (
-            model.label.indexOf(targetNode) != -1 || PinyinHelper.isPinyinMatched(model.label, targetNode)
-          )) {
-            g6Tree.update(model.id, {
-              color: '#ff7300',
-            });
+         if (items && items.length) {
+            items.forEach((item) => {
+               const { model } = item._attrs;
+               if (model && model.label && targetNode && (
+                  model.label.indexOf(targetNode) != -1 || PinyinHelper.isPinyinMatched(model.label, targetNode)
+               )) {
+                  g6Tree.update(model.id, {
+                     color: '#ff7300',
+                  });
 
-            g6Tree.focusPoint({ x: model.x, y: model.y });
-          } else if (model && model.type == 's.iota') {
-            g6Tree.update(model.id, {
-              color: '#108ee9',
-            });
-          } else {
-            g6Tree.update(model.id, {
-              color: '#fff',
+                  g6Tree.focusPoint({ x: model.x, y: model.y });
+               } else if (model && model.type == 's.iota') {
+                  g6Tree.update(model.id, {
+                     color: '#108ee9',
+                  });
+               } else {
+                  g6Tree.update(model.id, {
+                     color: '#fff',
+                  });
+               }
             });
-          }
-        });
+         }
+         // g6Tree.changeSize(width, height);
+         // g6Tree.refresh();
       }
-      // g6Tree.changeSize(width, height);
-      // g6Tree.refresh();
-    }
-    setInputSearching(false);
-  }, [targetNode, inputSearching]);
+      setInputSearching(false);
+   }, [targetNode, inputSearching]);
 
-  const toG6Center = (width, height, direction = null) => {
-    let x = 30; let
-      y = 50;
-    if (direction == 'LR') {
-      x = 400;
-      y = -10;
-    }
-    g6Tree.changeSize(width, height);
-    g6Tree.focusPoint({ x, y });
-  };
+   const toG6Center = (width, height, direction = null) => {
+      let x = 30; let
+         y = 50;
+      if (direction == 'LR') {
+         x = 400;
+         y = -10;
+      }
+      g6Tree.changeSize(width, height);
+      g6Tree.focusPoint({ x, y });
+   };
 
-  const _finishDataChange = () => {
-    changeFinish && changeFinish();
-  };
+   const _finishDataChange = () => {
+      changeFinish && changeFinish();
+   };
 
-  const _handelNodeClick = (node) => {
-    handelNodeClick(node);
-  };
-  const _handelNodeEnter = (node) => handleNodeEnter(node);
+   const _handelNodeClick = (node) => {
+      handelNodeClick(node);
+   };
+   const _handelNodeEnter = (node) => handleNodeEnter(node);
 
-  const renderTreeNodes = (data, parentId) => {
-    const combinTreeNode = (item, parentId) => {
-      const treeNode = {
-        title: item.name,
-        key: item.id,
-        disableCheckbox: item.name == '数据中心',
+   const renderTreeNodes = (data, parentId) => {
+      const combinTreeNode = (item, parentId) => {
+         const treeNode = {
+            title: item.name,
+            key: item.id,
+            disableCheckbox: item.name == '数据中心',
+         };
+         if (item.children) {
+            treeNode.children = item.children.map((ci) => combinTreeNode(ci, item.id));
+         }
+         return treeNode;
       };
-      if (item.children) {
-        treeNode.children = item.children.map((ci) => combinTreeNode(ci, item.id));
-      }
-      return treeNode;
-    };
-    return data.map((item) => combinTreeNode(item));
-  };
+      return data.map((item) => combinTreeNode(item));
+   };
 
-  const onTreeNodeSelect = (checkedKeys, e, data) => {
-    if (e.checked) {
-      const newDisCheckedKeys = [];
-      disCheckedKeys.forEach((d) => {
-        if (d != e.node.key) {
-          newDisCheckedKeys.push(d);
-        }
-      });
-      setDisCheckedKeys(newDisCheckedKeys);
-    } else {
-      setDisCheckedKeys([].concat(disCheckedKeys, [e.node.key]));
-    }
-    setTreeNodeCheckedKeys(checkedKeys.checked);
+   const onTreeNodeSelect = (checkedKeys, e, data) => {
+      if (e.checked) {
+         const newDisCheckedKeys = [];
+         disCheckedKeys.forEach((d) => {
+            if (d != e.node.key) {
+               newDisCheckedKeys.push(d);
+            }
+         });
+         setDisCheckedKeys(newDisCheckedKeys);
+      } else {
+         setDisCheckedKeys([].concat(disCheckedKeys, [e.node.key]));
+      }
+      setTreeNodeCheckedKeys(checkedKeys.checked);
 
-    toG6Center(width, height);
-    emitDataChange_();
-  };
+      toG6Center(width, height);
+      emitDataChange_();
+   };
 
-  const onTreeNodeClick = (nodeKeys, e) => {
-    const lastClickNodeKey_ = lastClickNodeKey;
-    if (nodeKeys.length) {
-      const nodeKey = nodeKeys[0];
+   const onTreeNodeClick = (nodeKeys, e) => {
+      const lastClickNodeKey_ = lastClickNodeKey;
+      if (nodeKeys.length) {
+         const nodeKey = nodeKeys[0];
 
-      if (g6Tree && treeNodeCheckedKeys.some((cid) => cid == nodeKey)) {
-        const node = g6Tree.find(nodeKey);
-        if (node) {
-          const boxStatsh = node._attrs.boxStash;
-          g6Tree.update(nodeKey, {
-            color: '#ff7300',
-          });
-          if (lastClickNodeKey_ && lastClickNodeKey_ != nodeKey) {
+         if (g6Tree && treeNodeCheckedKeys.some((cid) => cid == nodeKey)) {
+            const node = g6Tree.find(nodeKey);
+            if (node) {
+               const boxStatsh = node._attrs.boxStash;
+               g6Tree.update(nodeKey, {
+                  color: '#ff7300',
+               });
+               if (lastClickNodeKey_ && lastClickNodeKey_ != nodeKey) {
+                  const node = g6Tree.find(lastClickNodeKey_);
+                  if (node && node._attrs.model.type == 's.iota') {
+                     g6Tree.update(lastClickNodeKey_, {
+                        color: '#108ee9',
+                     });
+                  } else if (node) {
+                     g6Tree.update(lastClickNodeKey_, {
+                        color: '#fff',
+                     });
+                  }
+               }
+               setLastClickNodeKey(nodeKey);
+               // lastClickNodeKey = nodeKey;
+               g6Tree.focusPoint({ x: boxStatsh.centerX, y: boxStatsh.centerY });
+            }
+         }
+      } else if (lastClickNodeKey_) {
+         if (g6Tree) {
             const node = g6Tree.find(lastClickNodeKey_);
             if (node && node._attrs.model.type == 's.iota') {
-              g6Tree.update(lastClickNodeKey_, {
-                color: '#108ee9',
-              });
-            } else if (node) {
-              g6Tree.update(lastClickNodeKey_, {
-                color: '#fff',
-              });
+               g6Tree.update(lastClickNodeKey_, {
+                  color: '#108ee9',
+               });
+            } else {
+               g6Tree.update(lastClickNodeKey_, {
+                  color: '#fff',
+               });
             }
-          }
-          setLastClickNodeKey(nodeKey);
-          // lastClickNodeKey = nodeKey;
-          g6Tree.focusPoint({ x: boxStatsh.centerX, y: boxStatsh.centerY });
-        }
-      }
-    } else if (lastClickNodeKey_) {
-      if (g6Tree) {
-        const node = g6Tree.find(lastClickNodeKey_);
-        if (node && node._attrs.model.type == 's.iota') {
-          g6Tree.update(lastClickNodeKey_, {
-            color: '#108ee9',
-          });
-        } else {
-          g6Tree.update(lastClickNodeKey_, {
-            color: '#fff',
-          });
-        }
+         }
       }
-    }
-  };
+   };
 
-  const formedData = () => {
-    const deviceInfo = JSON.parse(JSON.stringify(data));
-    const deviceIds = Object.keys(deviceInfo);
-    const node = []; const
-      link = [];
-    const defaultTreeNodesCheckedKeys = [];
-    for (let i = 0; i < deviceIds.length; i++) {
-      if (deviceInfo[deviceIds[i]].type == 's.iota') {
-        deviceInfo[deviceIds[i]].name = '数据中心';
-        const a = {
-          ...deviceInfo[deviceIds[i]], id: deviceIds[i], label: '数据中心', color: '#108ee9', children: [],
-        };
-        node.push(a);
-        defaultTreeNodesCheckedKeys.push(a.id);
-      } else if (deviceInfo[deviceIds[i]].type == 's.d') {
-        let linkState = null;
-        if (devicesLinkState) {
-          linkState = devicesLinkState.find((dls) => dls.deviceId == deviceIds[i]);
-          if (linkState) {
-            linkState = linkState.status;
-          }
-        }
-        let linkStateMsg = '';
-        let LinlStateColor = '#666666';
-        if ((linkState != null || linkState != undefined)) {
-          if (linkState == 1) {
-            // linkStateMsg = "(在线)"
-          } else if (linkState == 0) {
-            linkStateMsg = '(离线)';
-            LinlStateColor = 'red';
-          }
-        }
+   const formedData = () => {
+      const deviceInfo = JSON.parse(JSON.stringify(data));
+      const deviceIds = Object.keys(deviceInfo);
+      const node = []; const
+         link = [];
+      const defaultTreeNodesCheckedKeys = [];
+      for (let i = 0; i < deviceIds.length; i++) {
+         if (deviceInfo[deviceIds[i]].type == 's.iota') {
+            deviceInfo[deviceIds[i]].name = '数据中心';
+            const a = {
+               ...deviceInfo[deviceIds[i]], id: deviceIds[i], label: '数据中心', color: '#108ee9', children: [],
+            };
+            node.push(a);
+            defaultTreeNodesCheckedKeys.push(a.id);
+         } else if (deviceInfo[deviceIds[i]].type == 's.d') {
+            let linkState = null;
+            if (devicesLinkState) {
+               linkState = devicesLinkState.find((dls) => dls.deviceId == deviceIds[i]);
+               if (linkState) {
+                  linkState = linkState.status;
+               }
+            }
+            let linkStateMsg = '';
+            let LinlStateColor = '#666666';
+            if ((linkState != null || linkState != undefined)) {
+               if (linkState == 1) {
+                  // linkStateMsg = "(在线)"
+               } else if (linkState == 0) {
+                  linkStateMsg = '(离线)';
+                  LinlStateColor = 'red';
+               }
+            }
 
-        const a = {
-          ...deviceInfo[deviceIds[i]],
-          id: deviceIds[i],
-          label: `${deviceInfo[deviceIds[i]]?.instance?.name || ''}${linkStateMsg}`,
-          style: { stroke: LinlStateColor },
-          children: [],
-          linkState,
-        };
-        if (collapseAll) {
-          if (expanded.some((c) => c == deviceIds[i])) {
-            a.isCollapsed = false;
-          } else {
-            a.isCollapsed = true;
-          }
-        }
-        if (expandAll) {
-          if (collapsed.some((c) => c == deviceIds[i])) {
-            a.isCollapsed = true;
-          } else {
-            a.isCollapsed = false;
-          }
-        }
-        node.push(a);
-        defaultTreeNodesCheckedKeys.push(a.id);
-      } else if (deviceInfo[deviceIds[i]]?.type == 's.l') {
-        const temp = deviceInfo[deviceIds[i]];
-        const b = { from: temp?.instance?.from?.ownerSvgId, to: temp?.instance?.to?.ownerSvgId };
-        link.push(b);
+            const a = {
+               ...deviceInfo[deviceIds[i]],
+               id: deviceIds[i],
+               label: `${deviceInfo[deviceIds[i]]?.instance?.name || ''}${linkStateMsg}`,
+               style: { stroke: LinlStateColor },
+               children: [],
+               linkState,
+            };
+            if (collapseAll) {
+               if (expanded.some((c) => c == deviceIds[i])) {
+                  a.isCollapsed = false;
+               } else {
+                  a.isCollapsed = true;
+               }
+            }
+            if (expandAll) {
+               if (collapsed.some((c) => c == deviceIds[i])) {
+                  a.isCollapsed = true;
+               } else {
+                  a.isCollapsed = false;
+               }
+            }
+            node.push(a);
+            defaultTreeNodesCheckedKeys.push(a.id);
+         } else if (deviceInfo[deviceIds[i]]?.type == 's.l') {
+            const temp = deviceInfo[deviceIds[i]];
+            const b = { from: temp?.instance?.from?.ownerSvgId, to: temp?.instance?.to?.ownerSvgId };
+            link.push(b);
+         }
       }
-    }
-    const deviceInfos = {
-      nodes: node,
-      links: link,
-    };
+      const deviceInfos = {
+         nodes: node,
+         links: link,
+      };
 
-    const parent = deviceInfos.nodes.filter((s) => s.type == 's.iota')[0]?.id;
-    const nodes = new Map();
-    deviceInfos.nodes.forEach((s) => {
-      nodes.set(s.id, s);
-    });
-    const { links } = deviceInfos;
+      const parent = deviceInfos.nodes.filter((s) => s.type == 's.iota')[0]?.id;
+      const nodes = new Map();
+      deviceInfos.nodes.forEach((s) => {
+         nodes.set(s.id, s);
+      });
+      const { links } = deviceInfos;
 
-    function getLeaf(parentId) {
-      const fromStructs = nodes.get(parentId);
-      let tempTreeData = [];
-      links.forEach((m) => {
-        if (m.to == parentId) {
-          const node = nodes.get(m.from);
+      function getLeaf (parentId) {
+         const fromStructs = nodes.get(parentId);
+         let tempTreeData = [];
+         links.forEach((m) => {
+            if (m.to == parentId) {
+               const node = nodes.get(m.from);
 
-          if (((treeNodeCheckedKeys && treeNodeCheckedKeys.some((c) => c == node.id))
+               if (((treeNodeCheckedKeys && treeNodeCheckedKeys.some((c) => c == node.id))
 
-            || treeNodeCheckedKeys.length == 0
-          ) && !disCheckedKeys.some((d) => d == node.id)) {
-            fromStructs.children.push(node);
-          }
-          const nextTempTreeData = getLeaf(m.from);
+                  || treeNodeCheckedKeys.length == 0
+               ) && !disCheckedKeys.some((d) => d == node.id)) {
+                  fromStructs.children.push(node);
+               }
+               const nextTempTreeData = getLeaf(m.from);
 
-          tempTreeData = tempTreeData.concat(nextTempTreeData.treeData);
-          // tempTreeData.push({ name: node.name, id: node.id, children: nextTempTreeData.treeData })
-        }
-      });
-      const treeData = [{ name: fromStructs.name, id: fromStructs.id, children: tempTreeData.length ? tempTreeData : null }];
+               tempTreeData = tempTreeData.concat(nextTempTreeData.treeData);
+               // tempTreeData.push({ name: node.name, id: node.id, children: nextTempTreeData.treeData })
+            }
+         });
+         const treeData = [{ name: fromStructs.name, id: fromStructs.id, children: tempTreeData.length ? tempTreeData : null }];
 
-      fromStructs.children = sort(fromStructs.children);
-      return { tree_data: fromStructs, treeData, defaultTreeNodesCheckedKeys };
-    }
+         fromStructs.children = sort(fromStructs.children);
+         return { tree_data: fromStructs, treeData, defaultTreeNodesCheckedKeys };
+      }
 
-    return getLeaf(parent);
-  };
+      return getLeaf(parent);
+   };
 
-  const treeData = formedData();
+   const treeData = formedData();
 
-  return (
-    <div id="editMap" style={{ position: 'relative', overflow: 'hidden' }}>
-      <div
-        id="deviceTree"
-        style={{
-          position: 'absolute',
-          top: 50,
-          zIndex: 999,
-          maxHeight: height - 50,
-          overflow: 'auto',
-        }}
-      >
-        <Tree
-          showIcon={false}
-          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}
-          treeData={renderTreeNodes(treeData.treeData, null)}
-        />
-      </div>
+   return (
+      <div id="editMap" style={{ position: 'relative', overflow: 'hidden' }}>
+         <div
+            id="deviceTree"
+            style={{
+               position: 'absolute',
+               top: 50,
+               zIndex: 999,
+               maxHeight: height - 50,
+               overflow: 'auto',
+            }}
+         >
+            <Tree
+               showIcon={false}
+               checkable
+               onCheck={(checkedKeys, e) => onTreeNodeSelect(checkedKeys, e, treeData.treeData)}
+               onSelect={(checkedKeys, e) => {
+                  onTreeNodeClick(checkedKeys, e)
+               }}
+               defaultCheckedKeys={treeData.defaultTreeNodesCheckedKeys}
+               checkStrictly
+               // checkedKeys={checkedKeys}
+               treeData={renderTreeNodes(treeData.treeData, null)}
+            />
+         </div>
 
-      {isGetLinkStateDone
-        ? (
-          <Tree_
-            data={treeData.tree_data}
-            emitChange={emitChange}
-            changeFinish={_finishDataChange}
-            emitDataChange_={emitDataChange_}
-            width={width}
-            height={height}
-            targetNode={targetNode}
-            handelNodeClick={_handelNodeClick}
-            onCollapse={onCollapse}
-            handleNodeEnter={_handelNodeEnter}
-            setG6Tree={(g6Tree) => { setG6Tree(g6Tree); }}
-            setG6TreeData={(data) => { setG6TreeData(data); }}
-          />
-        ) : null}
-    </div>
-  );
+         {isGetLinkStateDone
+            ? (
+               <Tree_
+                  data={treeData.tree_data}
+                  emitChange={emitChange}
+                  changeFinish={_finishDataChange}
+                  emitDataChange_={emitDataChange_}
+                  width={width + 100}
+                  height={height + 75}
+                  targetNode={targetNode}
+                  handelNodeClick={_handelNodeClick}
+                  onCollapse={onCollapse}
+                  handleNodeEnter={_handelNodeEnter}
+                  setG6Tree={(g6Tree) => { setG6Tree(g6Tree); }}
+                  setG6TreeData={(data) => { setG6TreeData(data); }}
+               />
+            ) : null}
+      </div>
+   );
 }

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,20 +126,28 @@ const Network = ({
             </div>
 
 
-            <div id='show' style={{ width: "100%", height: "calc(100% - 106px)" }}>
-               <iframe
-                  style={{
-                     width: '100%',
-                     height: '100%',
-                     zIndex: 7, border: 0
-                  }}
-                  src={`http://localhost:5000/network?strucData=${JSON.stringify(organizationsStruc?.find(v => v.thingId == thingId) || {})}`}
-                  allowFullScreen
-               >
-                  <p>你的浏览器不支持 iframe 。</p>
-               </iframe>
-            </div>
 
+            <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%',
+                        zIndex: 7, border: 0
+                     }}
+                     src={`http://localhost:5000/network?strucData=${JSON.stringify(organizationsStruc?.find(v => v.thingId == thingId) || {})}`}
+                     allowFullScreen
+                  >
+                     <p>你的浏览器不支持 iframe 。</p>
+                  </iframe>
+
+
+               </div>
+            </Spin>
 
             {/* <div id='show' style={{ width: "100%", height: "calc(100% - 106px)" }}>
                <div style={{