dcim-topology2d 2.0.2 → 2.0.6

package/core/src/core.js

@@ -28,7 +28,7 @@ import {
     setAreaIdData,
     setVarValueData,
     setThreeCategoryIdData,
-    initSwitchTabData
+    setConnectionTagForConf
 } from './utils';
 import {setSelectElementPosition} from './element';
 import {elementType} from '../../static';
@@ -999,8 +999,10 @@ var Topology = (function (_super) {
         if (this.store.data.scale !== 1) {
             node.scale(this.store.data.scale);
         }
+        node.visibleSwitch = true;
+        node.order = this.store.data.pens.length;
         this.store.data.pens.push(node);
-        initSwitchTabData(node);
+        setConnectionTagForConf(node);
         if (focus) {
             this.render();
             this.animate(true);
@@ -1105,7 +1107,7 @@ var Topology = (function (_super) {
                 }
             }
         }
-        // In active pen.
+        // In active pen. 
         if (!this.store.data.locked) {
             for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
                 var item = _a[_i];
@@ -1130,13 +1132,15 @@ var Topology = (function (_super) {
         this.divLayer.canvas.style.cursor = 'default';
         var len = this.store.data.pens.length;
         for (var i = len - 1; i > -1; --i) {
-            if (this.store.data.pens[i].type === PenType.Node &&
-                    this.inNode(pt, this.store.data.pens[i])) {
-                return;
-            } else if (this.store.data.pens[i].type === PenType.Line &&
-                    this.inLine(pt, this.store.data.pens[i])) {
-                // 需要优先判断十分在节点锚点上
-                // return;
+            if(this.store.data.pens[i].visible || this.store.data.pens[i].visibleSwitch){
+                if (this.store.data.pens[i].type === PenType.Node &&
+                        this.inNode(pt, this.store.data.pens[i])) {
+                    return;
+                } else if (this.store.data.pens[i].type === PenType.Line &&
+                        this.inLine(pt, this.store.data.pens[i])) {
+                    // 需要优先判断十分在节点锚点上
+                    // return;
+                }
             }
         }
     };
@@ -1706,9 +1710,10 @@ var Topology = (function (_super) {
                 }
                 pen.controlPoints = controlPoints;
             }
+            pen.order = this.store.data.pens.length;
             this.store.data.pens.push(pen);
             this.activeLayer.add(pen);
-            initSwitchTabData(pen);
+            setConnectionTagForConf(pen);
         }
         this.render();
         this.animate(true);
@@ -1924,6 +1929,8 @@ var Topology = (function (_super) {
             paddingTop: 0,
             paddingBottom: 0,
             strokeStyle: 'transparent',
+            visible: true,
+            visibleSwitch: true,
             children: [],
         });
         if (temp) {
@@ -1934,9 +1941,13 @@ var Topology = (function (_super) {
             item.stand = stand;
             item.parentId = node.id;
             item.animatePlay = false;
+            item.visible = true;
+            item.visibleSwitch = true;
             item.calcRectInParent(node);
+            this.deleteSelectTabOptionNode(item);
             node.children.push(item);
         }
+        node.order = this.store.data.pens.length;
         this.store.data.pens.push(node);
         this.activeLayer.setPens([node]);
         this.dispatch('node', node);
@@ -1950,23 +1961,53 @@ var Topology = (function (_super) {
             return;
         }
         const nodeChildren = JSON.parse(JSON.stringify(node));
+        var i = this.findIndex(nodeChildren);
+        if (i > -1 && nodeChildren.name === 'combine') {
+            this.store.data.pens.splice(i, 1);
+        } else {
+            nodeChildren.children = null;
+        }
         for (var _i = 0, _a = nodeChildren.children; _i < _a.length; _i++) {
             var item = new Node(_a[_i]);
             item.parentId = undefined;
             item.rectInParent = undefined;
             item.locked = Lock.None;
+            item.order = this.store.data.pens.length;
+            this.addSelectTabOptionNode(item);
             this.store.data.pens.push(item);
         }
-        var i = this.findIndex(nodeChildren);
-        if (i > -1 && nodeChildren.name === 'combine') {
-            this.store.data.pens.splice(i, 1);
-        } else {
-            nodeChildren.children = null;
-        }
+        this.deleteSelectTabOptionNode(nodeChildren);
         this.cache();
         this.activeLayer.clear();
         this.hoverLayer.clear();
     };
+    Topology.prototype.deleteSelectTabOptionNode = function (node) {
+        const tagNode = node.tags.find((t) => {return t.includes('selectOption')});
+        if(tagNode){
+            // 删除下拉节点关联的这个元件
+            const tagArr = tagNode.split('-');
+            const parentId = tagArr[1] && tagArr[1].trim();
+            if(parentId && this.store.selectTabDataPool[parentId].has(node.id)) this.store.selectTabDataPool[parentId].delete(node.id);
+        }
+    },
+    Topology.prototype.addSelectTabOptionNode = function (node) {
+        const tagNode = node.tags.find((t) => {return t.includes('selectOption')});
+        if(tagNode){
+            // 添加下拉节点关联的这个元件
+            const tagArr = tagNode.split('-');
+            const parentId = tagArr[1] && tagArr[1].trim();
+            if(!parentId) return;
+            const params = {
+                TID: node.TID,
+                id: node.id,
+                name: node.name,
+                order: node.order,
+                visible: node.visible,
+                tag: tagNode
+            }
+            this.store.selectTabDataPool[parentId].set(node.id, params);
+        }
+    },
     Topology.prototype.find = function (idOrTag, pens) {
         var _this = this;
         if (!pens) {
@@ -2299,6 +2340,31 @@ var Topology = (function (_super) {
 
         return true
     };
+    Topology.prototype.formOverflowOpen = function (data) {
+        this.formOverflowConversionData(data);
+        this.overflowView();
+        this.render(true);
+    }
+    Topology.prototype.overflowView = function (data) {
+        try {
+            var rect = this.getRect();
+            let _a = this.canvas;
+            if(!_a.width) return;
+            let width = _a.width, height = _a.height;
+            let rectWidth = rect.width? (rect.ex + 4) : rect.width
+            let rectHeight= rect.height? (rect.ey + 4) : rect.height
+            if (width < rectWidth) {
+                width = rectWidth;
+            }
+            if (height < rectHeight) {
+                height = rectHeight;
+            }
+            this.resize({width: width, height: height});
+            return rect;
+        }catch (e){
+            console.log('-error--------overflowView---',e)
+        }
+    }
     return Topology;
 }(Common));
 

package/core/src/divLayer.js

@@ -76,7 +76,7 @@ var DivLayer = /** @class */ (function (_super) {
         return _this;
     }
     DivLayer.prototype.addElement = function (node){
-        if(['iframe', 'echarts'].includes(node.name)) {
+        if(['iframe', 'echarts', 'formOverflow'].includes(node.name)) {
             this.canvas.parentNode.appendChild(this.elements[node.id]);
         }else {
             this.canvas.appendChild(this.elements[node.id]);
@@ -97,7 +97,7 @@ var DivLayer = /** @class */ (function (_super) {
         if (item.elementId) {
             const elementNode = this.elements[item.id];
             if(elementNode) {
-                this.canvas.parentElement.removeChild(elementNode);
+                elementNode.parentNode.removeChild(elementNode);
                 this.elements[item.id] = null;
             }
         }

package/core/src/element/select.d.ts

@@ -3,9 +3,9 @@ import { Node } from '../models';
 export declare function createSelectElement(node: Node): HTMLDivElement;
 export declare function createSelectDropdown(node: Node): HTMLDivElement;
 export declare function createSelectOptions(data: [], node: Node): string;
-export declare function getSelectedData(e: Event, data: any): void;
+export declare function getSelectedData(e: Event, data: any, editData: any): void;
 export declare function setSelectInteractiveState(selected: any, node: Node): void;
 export declare function resetSelectInteractiveState(node: Node): void;
-export declare function setSelectDropdownInteractiveState(node: Node, staticType: any, type: any): void;
+export declare function setSelectDropdownInteractiveState(node: any, staticType: any, type: any): void;
 export declare function setSelectElementPosition(node: Node, type: string): void;
 export declare function setSelectElementTheme(node: Node): void;

package/core/src/element/select.js

@@ -1,17 +1,15 @@
-import {
-    elementInteractivePoor,
-    selectDataPool,
-    echartsRealDataPool,
-    echartsOptionsPool
-} from "../../../store";
+import {Store} from 'le5le-store';
+import {commonStore} from "../store";
 import { setMapDataOptions } from '../../../chart-diagram';
 import {previewType, selectStaticType} from '../utils';
+import {setElementSwitchTabState} from './tab';
 let nodeId = '';
 let downId = '';
 // 创建下拉头
 export function createSelectElement(node) {
     const selectEle = document.createElement('div');
-    const inputValue = selectDataPool[node.id].data[0] && selectDataPool[node.id].data[0].name;
+    const order = node.formData.selected && node.formData.selected.order || 0;
+    const inputValue = commonStore[node.TID].selectDataPool[node.id].data[order] && commonStore[node.TID].selectDataPool[node.id].data[order].name;
     let attrName = 'topology-select-icon-arrow';
     if(node.selectDropdown) attrName += ' reverse';
     const children = `<i class="${attrName}" 
@@ -31,7 +29,7 @@ export function createSelectDropdown(node) {
     const selectDropdownEle = document.createElement('div');
     let liElements = '';
     if(node.selectDropdown) {
-        liElements = createSelectOptions(selectDataPool[node.id].data, node);
+        liElements = createSelectOptions(commonStore[node.TID].selectDataPool[node.id].data, node);
         selectDropdownEle.style.display = 'block';
         setSelectDropdownPosition(node, selectDropdownEle);
     }
@@ -44,7 +42,7 @@ export function createSelectDropdown(node) {
 }
 // 创建下拉options列表
 export function createSelectOptions(data, node) {
-    const selectNode = selectDataPool[node.id];
+    const selectNode = commonStore[node.TID].selectDataPool[node.id];
     const selectDropdownUl = selectNode.dom.selectDropdownUl;
     if(selectDropdownUl) selectDropdownUl.innerHTML = '';
     let leElement = '';
@@ -66,35 +64,43 @@ export function createSelectOptions(data, node) {
 }
 // 配置下拉头的交互状态：展开时三角图标向上，否则向下
 export function setSelectInteractiveState(selected, node) {
-    const selectNode = selectDataPool[node.id];
+    const selectNode = commonStore[node.TID].selectDataPool[node.id];
     selectNode.dom.selectIconArrow.style.display = selected ? 'none' : 'block';
     //selectNode.dom['selectRemove'].style.display = selected ? 'block' : 'none';
 }
 // 重置下拉状态
 export function resetSelectInteractiveState(node) {
-    if(!Object.keys(selectDataPool).length) return;
-    for (let data of Object.values(selectDataPool)) {
+    const currentStore = commonStore[node.TID];
+    if(!Object.keys(currentStore.selectDataPool).length) return;
+    for (let data of Object.values(currentStore.selectDataPool)) {
         if(node && node.id !== data.node.id) {
             if(data.dom.selectIconArrow) data.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
             data.slideState = false;
-        };
+        }
     }
     document.querySelector('.topology-select-dropdown').style.display = 'none';
-    elementInteractivePoor.node = null;
+    currentStore.elementInteractivePoor.node = null;
 }
-// 配置下拉options容器的交互状态，展开和收起
+
+/**
+ * 配置下拉options容器的交互状态，展开和收起
+ * @param node 下拉元件节点数据
+ * @param staticType 下拉功能类型：1: 数据统计；2：数据展示；3：显示隐藏
+ * @param type 功能作用区域类型：Dcim，Topology，Logo
+ */
 export function setSelectDropdownInteractiveState(node, staticType, type) {
-    const selectNode = selectDataPool[node.id];
+    const currentStore = commonStore[node.TID];
+    const selectNode = currentStore.selectDataPool[node.id];
     if(!selectNode.staticType) selectNode.staticType = staticType;
     if(!selectNode) return;
     if(downId !== node.id && type === previewType.Dcim) {
         // 点击的不是同一个下拉则重置交互样式，清空数据
         resetSelectInteractiveState(node);
-        elementInteractivePoor.options = null;
+        currentStore.elementInteractivePoor.options = null;
     }
     downId = node.id;
-    elementInteractivePoor.node = node;
-    selectElementStore(node.id);
+    currentStore.elementInteractivePoor.node = node;
+    selectElementStore(node.id, node.TID);
     setSelectElementPosition(node);
     const { selectIconArrow, selectDropdown } = selectNode.dom;
     selectNode.slideState = !selectNode.slideState || node.selectDropdown; // 下拉展开状态
@@ -109,23 +115,23 @@ export function setSelectDropdownInteractiveState(node, staticType, type) {
     // 图标旋转
     selectIconArrow.setAttribute('class', attrName);
     // 添加列表数据
-    if(!elementInteractivePoor.options) createSelectOptions(selectNode.data, node);
+    if(!currentStore.elementInteractivePoor.options) createSelectOptions(selectNode.data, node);
 }
 // 配置下拉偏移位置
 export function setSelectElementPosition(node, type) {
     // 不同元件切换
-    selectElementStore(node.id);
-    const selectNode = selectDataPool[node.id];
+    selectElementStore(node.id, node.TID);
+    const selectNode = commonStore[node.TID].selectDataPool[node.id];
     if(type === 'down') {
         if(nodeId === node.id) return;
-        elementInteractivePoor.options = null;
+        commonStore[node.TID].elementInteractivePoor.options = null;
         createSelectOptions(selectNode.data, node);
     }
     nodeId = node.id;
     setSelectDropdownPosition(node, selectNode.dom.selectDropdown);
 }
 function setSelectDropdownPosition(node, selectDropdown) {
-    const selectEle = selectDataPool[node.id].dom.selectEle;
+    const selectEle = commonStore[node.TID].selectDataPool[node.id].dom.selectEle;
     let left = selectEle.getBoundingClientRect().left; // 获取下拉元素距离窗体左侧位置
     let top = selectEle.getBoundingClientRect().top + node.rect.height;
     if(window.location.pathname.includes('workspace')) {
@@ -139,57 +145,114 @@ function setSelectDropdownPosition(node, selectDropdown) {
     const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
     selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
 }
-// 获取下拉选中的数据
-export function getSelectedData(e, data) {
-    const selectNode = selectDataPool[data.id];
-    if(!elementInteractivePoor.options) elementInteractivePoor.options = selectNode.dom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
-    const parentNode = e.target.parentNode;
-    const type = parentNode.getAttribute('type');
-    if(type === 'option') {
+
+/**
+ * 获取下拉选中的数据
+ * @param e 节点选中事件
+ * @param data 下拉元件节点数据
+ * @param editData 编辑显下拉的数据
+ */
+export function getSelectedData(e, data, editData) {
+    const currentStore = commonStore[data.TID];
+    const selectNode = currentStore.selectDataPool[data.id];
+    if(!currentStore.elementInteractivePoor.options && data.selectDropdown) currentStore.elementInteractivePoor.options = selectNode.dom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
+    let order = 0;
+    let staticType = selectNode.staticType;
+    if(!editData) {
+        const parentNode = e.target.parentNode;
+        const type = parentNode.getAttribute('type');
+        if(type !== 'option') return;
+        selectNode.slideState = false;
+        selectNode.dom.selectDropdown.style.display = 'none';
+        // 图标旋转
+        selectNode.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
         // 选中节点操作
-        const order = parentNode.getAttribute('data-order');
-        selectNode.optionOrder = order;
-        for(let i = 0, leng = elementInteractivePoor.options.length; i < leng; i++) {
+        order = parentNode.getAttribute('data-order');
+    }else {
+        order = editData.order;
+        staticType = editData.staticType;
+    }
+    if(data.selectDropdown) {
+        for(let i = 0, leng = currentStore.elementInteractivePoor.options.length; i < leng; i++) {
             let name = 'topology-select-dropdown-item';
             if(i == order) {
                 name += ' selected';
             }else {
                 name.replace(' selected', '');
             }
-            elementInteractivePoor.options[i].setAttribute('class', name);
+            currentStore.elementInteractivePoor.options[i].setAttribute('class', name);
         }
-        const node = selectNode.data[order];
-        selectNode.dom.selectEle.querySelector('.topology-select-input').value = node.name;
-        selectNode.slideState = false;
-        selectNode.dom.selectDropdown.style.display = 'none';
-        // 图标旋转
-        selectNode.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
-        if(selectNode.staticType === selectStaticType.static) {
-            // 数据统计
-            const optionNode = data.formData.bindBlockId && echartsOptionsPool[data.formData.bindBlockId];
-            if(!optionNode) return;
-            // 切换数据
-            echartsRealDataPool[optionNode.data.id] = echartsRealDataPool[node.id];
-            setMapDataOptions(optionNode.option, optionNode.data);
-            selectNode.node.selected = {
-                order: parseInt(order),
-                id: node.id
+    }
+    selectNode.optionOrder = order;
+    const node = selectNode.data[order];
+    selectNode.dom.selectEle.querySelector('.topology-select-input').value = node.name;
+    selectNode.node.selected = {
+        order: parseInt(order),
+        id: node.id
+    };
+    if(staticType === selectStaticType.static) {
+        // 数据统计
+        const optionNode = data.formData.bindBlockId && currentStore.echartsOptionsPool[data.formData.bindBlockId];
+        if(!optionNode) return;
+        // 切换数据
+        currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[node.id];
+        const isInitTable = initTabSwitchPage(data.formData.bindBlockTag, optionNode.data, currentStore);
+        setMapDataOptions(optionNode.option, optionNode.data);
+        if(isInitTable) Store.set(`${data.TID}-LT:render`, true);
+    }
+    if(staticType === selectStaticType.dataShow) {
+        // 数据展示
+    }
+    if(staticType === selectStaticType.visible) {
+        // 显示隐藏
+        const optionsVisibleData = currentStore.selectTabDataPool[data.id];
+        if(!optionsVisibleData || !optionsVisibleData.size) return;
+        for(const [key, value] of optionsVisibleData){
+            const eque = node.id === value.tag;
+            currentStore.data.pens[value.order].visible = eque;
+            currentStore.data.pens[value.order].visibleSwitch = eque;
+            value.visible = eque;
+            setElementSwitchTabState(value);
+        }
+        Store.set(`${data.TID}-LT:render`, true);
+    }
+}
+// 初始化Tab页签选中状态
+function initTabSwitchPage(bindBlockTag, data, currentStore) {
+    if(!bindBlockTag) return false;
+    // 初始化分类选中状态
+    const tabData = currentStore.switchTabDataPool[`${bindBlockTag}Data`]; // 获取Tab组数据
+    if(!tabData) return false;
+    const tabKeys = Object.keys(tabData);
+    const pens = currentStore.data.pens;
+    if(!tabKeys.length || !pens[tabData[tabKeys[0]].order].activeImgeIndex) return false; //Tab默认选中第一个页签就退出程序，不执行初始化状态
+    let tabInit = false;
+    for (let tabNode of Object.values(tabData)) {
+        const penNode = pens[tabNode.order];
+        if(!tabInit) {
+            data.params.tabVisitOrder = 0;
+            data.tabData = {
+                type: '',
+                data: tabNode.tabData
             };
-        }else {
-            // 数据展示
+        }
+        if(penNode) {
+            penNode.activeImgeIndex = tabInit;
+            tabInit = true;
         }
     }
+    return true;
 }
 // 配置下拉展示的主题风格
 export function setSelectElementTheme(node) {
     const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
-    const { selectEle, selectDropdown } = selectDataPool[node.id].dom;
+    const { selectEle, selectDropdown } = commonStore[node.TID].selectDataPool[node.id].dom;
     selectEle.setAttribute('class', `topology-select${themeType}`);
     selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
 }
 // 存储下拉Dom节点
-function selectElementStore(id) {
-    const selectNode = selectDataPool[id];
+function selectElementStore(id, TID) {
+    const selectNode = commonStore[TID].selectDataPool[id];
     if(!selectNode.dom.selectIconArrow) selectNode.dom.selectIconArrow = selectNode.dom.selectEle.querySelector('.topology-select-icon-arrow');
     if(!selectNode.dom.selectDropdown) {
         selectNode.dom.selectDropdown = document.querySelector('.topology-select-dropdown');

package/core/src/element/tab.js

@@ -1,18 +1,19 @@
-import {
-    echartsDataPool,
-    elementInteractivePoor,
-    selectDataPool
-} from '../../../store';
 import {jsonLength} from '../utils';
+import {commonStore} from "../store";
 // 设置tab切换显示隐藏时的 Dom元件状态
 export function setElementSwitchTabState(node) {
-    if(typeof elementInteractivePoor.elementDataLength !== 'number') {
-        elementInteractivePoor.elementDataLength = jsonLength(echartsDataPool) || jsonLength(selectDataPool);
+    if(node.name !== 'echarts' && (!node.children || !node.children.length)) return;
+    if(typeof commonStore[node.TID].elementInteractivePoor.elementDataLength !== 'number') {
+        commonStore[node.TID].elementInteractivePoor.elementDataLength = jsonLength(commonStore[node.TID].echartsDataPool) || jsonLength(commonStore[node.TID].selectDataPool);
+    }
+    if(!commonStore[node.TID].elementInteractivePoor.elementDataLength) return;
+    const ele = commonStore[node.TID].echartsDataPool[node.id] && commonStore[node.TID].echartsDataPool[node.id].div ||
+            commonStore[node.TID].selectDataPool[node.id] && commonStore[node.TID].selectDataPool[node.id].dom.selectEle;
+    if(ele) {
+        ele.style.display = !node.visible ? 'none': 'block';
+    }else {
+        commonStore[node.TID].data.dataResize = 1;
     }
-    if(!elementInteractivePoor.elementDataLength) return;
-    const ele = echartsDataPool[node.id] && echartsDataPool[node.id].div ||
-            selectDataPool[node.id] && selectDataPool[node.id].dom.selectEle;
-    if(ele) ele.style.display = !node.visible ? 'none': 'block';
     if(node.children && node.children.length) {
         node.children.map((ch) => {
             ch.visible = node.visible;

package/core/src/healps/changeData.js

@@ -1,10 +1,20 @@
 //let DETAILDATA = null;
 import {commonStore} from '../store';
-import {echartsRealDataPool} from '../../../store';
 import { getEchartsRealData } from '../utils/conversion';
 export function setConfItemNode(pen, syn_synata) {
+    const entranceGuard = pen.events.find((ev) => {
+        return ev.value === 'entranceGuard';
+    });
+    if(entranceGuard) {
+        // 绑定门禁的元件实时数据
+        const nullUndefinedRegex = /^(?:null|undefined|\s*)$/;
+        const doorData = syn_synata.doorData && syn_synata.doorData[entranceGuard.params];
+        const doorState = doorData && !nullUndefinedRegex.test(doorData.state) && parseInt(doorData.state);
+        pen.text = doorState === 1 ? '开门' : '关门'; // 1-开门，其他值为关门
+    }
     if (!pen.data) return;
     if(commonStore[pen.TID]) commonStore[pen.TID].data.dataResize = 1;
+    let isAlarm = false; // 判断元件绑定的数据中是否有告警发生，用于九所项目服务器自身监控功能
     if(pen.data instanceof Array) {
         let _syn = null;
         let isResetVal = false;
@@ -62,9 +72,11 @@ export function setConfItemNode(pen, syn_synata) {
         switch (state) {
             case 0: // 正常告警
                 color = '#FF0000';
+                isAlarm = true;
                 break;
             case 1: // 离线告警, 通讯开关告警
                 color = '#6d6d6d';
+                isAlarm = true;
                 break;
             case 2: // 未告警
             case 3: // 无告警
@@ -94,18 +106,20 @@ export function setConfItemNode(pen, syn_synata) {
         if (name === 'electricFan') setFanData(pen, _syn)
     }else {
         if (pen.elementRendered) pen.elementRendered = false;
-        if(pen.data.echarts) {
-            const { echartDataValue } = syn_synata;
+        if (pen.data.echarts) {
+            const {echartDataValue} = syn_synata;
             const seriesData = echartDataValue;
             const realData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
             if (Array.isArray(realData)) {
                 getEchartsRealData(pen, realData);
-            }else {
-                echartsRealDataPool[pen.id] = realData;
+            } else {
+                commonStore[pen.TID].echartsRealDataPool[pen.id] = realData;
             }
         }
     }
-    return pen
+    return {
+        monitorAlarm: isAlarm
+    }
 }
 
 export function setNodeEvents(item, pen) {

package/core/src/middles/nodes/formoverflow.js

@@ -0,0 +1,61 @@
+// import {} from './rectangle';
+import {rectangle, createDiv, s8, Topology} from  '../../../../core';
+import {commonStore} from "../../store";
+
+export async function formOverflow(ctx, node) {
+    // 绘制一个底图，类似于占位符。
+    rectangle(ctx, node)
+    console.log('绘制滚动组件--')
+    // 添加当前节点到div层
+    if (!node.elementId) {
+        node.elementId = s8()
+    }
+    let formoverData = commonStore[node.TID].formoverDataPool[node.id];
+    let id = node.formData.detailPageId
+    const color = node.formData.scrollbarColor? node.formData.scrollbarColor: 'auto'
+    const colorBg =  node.formData.scrollbarColorBg? node.formData.scrollbarColorBg: 'auto'
+    const scrollbarColor = color + ' ' + colorBg
+
+    if (!node.elementLoaded && !formoverData) {
+        console.log('是否存在--formoverData--0-',formoverData)
+        if(!formoverData) {
+            formoverData = {
+                div: createDiv(node)
+            };
+        }else {
+            formoverData.div = createDiv(node);
+        }
+        formoverData.div.setAttribute('class', 'topoOverflow');
+        formoverData.div.style.setProperty('scrollbar-color', scrollbarColor);
+        formoverData.div.style.setProperty('scrollbar-width', 'thin');
+
+        node.elementLoaded = true
+        document.body.appendChild(formoverData.div)
+        // 添加当前节点到div层
+        node.addToDiv()
+        commonStore[node.TID].formoverDataPool[node.id] = formoverData;
+
+
+        console.log('请求子页面接口-----id =',id)
+        let canvas = new Topology(node.id, {
+            rotateCursor: '/img/rotate.cur',
+        })
+        canvas.formOverflowOpen(node.formData.detailPageData)
+        commonStore[node.TID].formoverCanvasDataPool[node.id]  = canvas
+    }else if(formoverData && id){
+        console.log('是否存在--formoverData--1-',formoverData)
+        formoverData.div.style.setProperty('scrollbar-color', scrollbarColor);
+        formOverflowChange(node)
+    }
+}
+
+// 更新滚动组件中子页面
+export function formOverflowChange(node) {
+        //绘制画布
+        console.log('更新滚动组件中子页面-',node)
+        let canvas = commonStore[node.TID].formoverCanvasDataPool[node.id] 
+        let data =  node.formData.detailPageData
+        console.log('改变滚动组件中子页面-',data)
+        canvas.formOverflowOpen(data)
+}
+