dcim-topology2d 2.0.5 → 2.0.6

package/chart-diagram/src/echarts/index.js

@@ -7,12 +7,14 @@ import {
     setMap3dBarOptions,
     setMapTopOptions,
     setMapGlobalOptions,
-    setMapDataOptions
+    setMapDataOptions,
+    initBindTabSetting
 } from '../utils';
 import {echartsTypeMap} from '../../../static';
 
 export function echarts(ctx, node) {
-    if (!(commonStore[node.TID] && commonStore[node.TID].data.dataResize)) return;
+    const currentStore = commonStore[node.TID];
+    if (!(currentStore && currentStore.data.dataResize)) return;
     //console.log('echarts绘制-----node', node);
     // if(currentElement) currentElement.style.display = !node.visible ? 'none': 'block';
     // if(!node.visible) return;
@@ -32,7 +34,7 @@ export function echarts(ctx, node) {
     if (!node.elementId) {
         node.elementId = s8()
     }
-    let echartsData = commonStore[node.TID].echartsDataPool[node.id];
+    let echartsData = currentStore.echartsDataPool[node.id];
     if (!node.elementLoaded && !(echartsData && echartsData.div)) {
         if(!echartsData) {
             echartsData = {
@@ -51,7 +53,7 @@ export function echarts(ctx, node) {
         setTimeout(function () {
             echartsData.chart.resize()
         });
-        commonStore[node.TID].echartsDataPool[node.id] = echartsData;
+        currentStore.echartsDataPool[node.id] = echartsData;
     }
     if (!node.elementRendered) {
         const appearance = node.appearance;
@@ -59,8 +61,10 @@ export function echarts(ctx, node) {
         setTimeout(function () {
             let option = node.data.echarts.option;
             if(!(echartsData && echartsData.chart)) return;
-            const isLocked = commonStore[node.TID] && commonStore[node.TID].data.locked;
-            if (!isLocked || !commonStore[node.TID].echartsOptionsPool[node.id]) {
+            if(node.data.params) node.data.params.tabCorrelationType = echartsData.tabCorrelationType || ''; // 统计图与Tab关联
+            const isLocked = currentStore.data.locked;
+            if (!isLocked || !currentStore.echartsOptionsPool[node.id]) {
+                const tabData = initBindTabSetting(node); // 初始化Tabs数据配置
                 // 【未锁定（编辑）状态, options未初始化的状态】
                 if (!appearance.type) appearance.type = echartsTypeMap[`type_${option.displayMode}`]; // 兼容旧数据配置
                 // 公共配置 Top排行榜跳过公共属性配置
@@ -77,18 +81,20 @@ export function echarts(ctx, node) {
                 if (appearance.type === 'TOP') setMapTopOptions(option, node);
                 //option.title = appearance.title;
                 option.backgroundColor = appearance.backgroundColor;
-                commonStore[node.TID].echartsOptionsPool[node.id] = {
+                currentStore.echartsOptionsPool[node.id] = {
                     option: JSON.parse(JSON.stringify(option)),
                     data: {
+                        TID: node.TID,
                         appearance,
                         id: node.id,
-                        params: node.data.params
+                        params: node.data.params,
+                        tabData
                     }
                 };
                 if (!isLocked) echartsData.chart.clear();
             }
             // echarts 数据渲染更新
-            setMapDataOptions(option, node);
+            setMapDataOptions(option, currentStore.echartsOptionsPool[node.id].data);
 
             node.elementRendered = true;
         })

package/chart-diagram/src/utils/changeOptions.js

@@ -82,7 +82,11 @@ export function setChartXAxisData(xAxis, appearance) {
     //return xAxis;
 }
 
-// 图表Y轴数据
+/**
+ * 图表Y轴数据
+ * @param yAxis Y轴配置数据
+ * @param appearance 图表自定义配置
+ */
 export function setChartYAxisData(yAxis, appearance) {
     if (typeof appearance.ySplitLineShow !== 'boolean') {
         appearance.ySplitLineShow = yAxis[0].splitLine.show;

package/chart-diagram/src/utils/conversion.d.ts

@@ -6,6 +6,7 @@ interface echartsOptions {
     tooltip: null
 }
 export declare function getXYAxisLabelVal(index: number, intervalNum: number, value: any): string;
+export declare function initBindTabSetting(node: any): string;
 export declare function setMapLineBarOptions(option: echartsOptions, node: any): void;
 export declare function setMapGaugeOptions(option: echartsOptions, node: any): void;
 export declare function setMapRingOptions(option: echartsOptions, node: any): void;

package/chart-diagram/src/utils/conversion.js

@@ -17,7 +17,7 @@ import {
     pieRingNormalAuto,
     topRankingListAuto
 } from './render';
-import {commonStore} from "../../../core";
+import {commonStore, echartsStaticType} from "../../../core";
 
 export function getXYAxisLabelVal(index, intervalNum, value) {
     if (index === 0 || index % intervalNum === 0) {
@@ -27,6 +27,26 @@ export function getXYAxisLabelVal(index, intervalNum, value) {
     }
 }
 
+/**
+ * 初始化图表与tabs关联的配置数据
+ * @param node 元件节点
+ */
+export function initBindTabSetting(node) {
+    const tabStaticKey = node.tags && node.tags.find((tag) => {return tag.includes('switchTabType')});
+    const switchTabData = tabStaticKey && commonStore[node.TID].switchTabDataPool[`${tabStaticKey}Data`];
+    if(switchTabData) {
+        const tabNode = Object.values(switchTabData)[0];
+        const tabEventNode = tabNode.events.find((ev) => {return ev.action === 8});
+        const tabStaticType = tabEventNode && tabEventNode.dcimStaticForType || '';
+        node.data.params.staticForType = tabStaticType;
+        return {
+            type: tabStaticType,
+            data: tabNode.tabData
+        };
+    }
+    return null;
+}
+
 // 自动滑动展示数据
 export function setMapAutoMoveOptions(option, chartNode, node, callback) {
     option.dataZoom = echartsDataRoom;
@@ -181,7 +201,11 @@ export function setMapTopOptions(option, node) {
     Object.assign(option.grid, appearance.grid);
 }
 
-// 公共配置
+/**
+ * 公共配置
+ * @param option 图表配置数据
+ * @param node 元件数据
+ */
 export function setMapGlobalOptions(option, node) {
     // const chartOption = JSON.parse(JSON.stringify(option));
     const appearance = node.appearance;
@@ -205,18 +229,31 @@ export function setMapGlobalOptions(option, node) {
 export function setMapDataOptions(option, node) {
     const optionNode = commonStore[node.TID].echartsOptionsPool[node.id].option;
     const appearance = node.appearance;
-    const params = node.data ? node.data.params : node.params;
+    const params = node.params;
     // 3d 柱状图
     if (appearance.type === '3dBar') renderMap3dBarSeriesItem(optionNode.series[0], appearance);
     const displayMode = parseInt(option.displayMode); // 图表类型
-    const staticForType = params && params.staticForType || ''; //统计类型：日，周，月，年，实时
+    const staticForType = params && params.staticForType || ''; //统计类型：日，周，月，年，实时，其他
     const syncEchartsData = commonStore[node.TID].echartsRealDataPool[node.id]; // 统计图实时数据
-    const staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData; // 统计类型数据
+    let staticTypeData = null; // 统计类型数据
+    if(staticForType === 'OTHER'){
+        // 其他类型，类型中的数据通常统计的都是历史数据，日、周、月、年、实时中的某一类，通常搭配分组统计使用。
+        // 类型中绑定一个测点为一个类型，绑定多个测点为多个类型。比如：有电功率和功率因数为两个分类，图表分组中分类数据绑定时就要同时绑定有电功率和功率因数两个测点，否则无法实现切换
+        for (let i = 0 ; i < echartsStaticType.length; i++) {
+            const chartData = syncEchartsData && syncEchartsData[`${echartsStaticType[i]}_Data`];
+            if(chartData) staticTypeData = chartData;
+        }
+    }else {
+        // 日，周，月，年，实时类型，不与分组统计一起使用
+        staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData;
+    }
     // 实时数据加载
     if(staticTypeData) {
 
         if (displayMode === 1 || displayMode === 2) { // 折线图，柱状图
 
+            if(node.tabData && node.tabData.data.state && optionNode.yAxis[0].max) Object.assign(optionNode.yAxis[0], node.tabData.data); //若Tabs切换配置了数据，则修改Y轴原有配置
+
             lineBarDataAuto(optionNode, params, staticTypeData);
 
         }

package/chart-diagram/src/utils/render.js

@@ -10,6 +10,13 @@ export function lineBarDataAuto(option, params, data) {
     const seriesNodes = option.series;
     if(data && data.XData) option.xAxis[0].data = data.XData;
     if(!(data && data.seriesData && data.seriesData.length)) return;
+    if(params.tabCorrelationType) {
+        // 如果操作类型是select下拉分组下的tab切换，执行下面的逻辑
+        const realSeriesNode = data.seriesData[params.tabVisitOrder || 0];
+        seriesNodes[0].data = realSeriesNode.data;
+        if(realSeriesNode.name) seriesNodes[0].name = realSeriesNode.name;
+        return;
+    }
     if(seriesNodes.length > 1 || params && params.curveNum > 1){
         // 双曲线|柱状
         const legendData = [];

package/core/src/common.js

@@ -13,6 +13,9 @@ import {
     setConnectionTagForConf,
     setInitConfData,
     getParams,
+    tabHideShowOperation,
+    tabStaticOperation,
+    echartsStaticType
 } from './utils';
 import {useStore, clearStore, commonStore} from './store'
 import * as mqtt from './mqtt.min';
@@ -233,7 +236,7 @@ var Common = /** @class */ (function () {
                 })
             }
             if (node.children && node.children.length) {
-                renderForAssetPoperties(asset, node.children);
+                this.renderForAssetPoperties(asset, node.children);
             }
         });
     };
@@ -475,29 +478,24 @@ var Common = /** @class */ (function () {
         if(!changeNode[node.id]) return;
         // 如果存在按钮组节点数据
         const tabAreaData = topologyChangeData[`${switchTabData}AreaData`];
+        let tabIndex = 0;
+        const visitParams = {
+            order: 0
+        };
         for (let switchNode of Object.values(changeNode)) {
             const penNode = this.store.data.pens[switchNode.order];
             if(!penNode) return;
-            penNode.activeImgeIndex = switchNode.id !== node.id;
-            if(staticType === 'SH'){
-                // 对显示隐藏的功能进行交互处理
-                const areaNode = tabAreaData[switchNode.bindStaticId];
-                if(areaNode && this.store.data.pens[areaNode.order]) {
-                    const tagNode = this.store.data.pens[areaNode.order];
-                    tagNode.visible = !(switchNode.id !== node.id);
-                    setElementSwitchTabState(tagNode);
-                }
+            const isActive = switchNode.id !== node.id;
+            if(!isActive) {
+                visitParams.order = tabIndex;
+                visitParams.data = switchNode.tabData;
             }
+            penNode.activeImgeIndex = isActive;
+            tabIndex++;
+            if(staticType === 'SH') tabHideShowOperation(switchNode, tabAreaData); // 对显示隐藏的功能进行交互处理
         }
         // 对绑定的图表进行数据处理
-        if (node.bindStaticId && ['DAY', 'WEEK', 'MONTH', 'YEAR'].includes(staticType)) {
-            const findCurentEchart = tabAreaData[node.bindStaticId]; // 获取当前点中的节点绑定的统计图表数据
-            if (findCurentEchart && findCurentEchart.data.params) {
-                const cn = this.store.data.pens[findCurentEchart.order];
-                cn.data.params['staticForType'] = staticType; // 统计类型赋值
-                cn.elementRendered = false;
-            }
-        }
+        tabStaticOperation(staticType, node, tabAreaData, visitParams);
         this.store.data.dataResize = 1;
         this.render();
     };
@@ -763,6 +761,9 @@ var Common = /** @class */ (function () {
             if (item.children && item.children.length) {
                 this.mqttDataDrawing(item.children, retData);
             }
+            if (item.formData && item.formData.detailPageData && item.formData.detailPageData.pens && item.formData.detailPageData.pens.length) {
+                this.mqttDataDrawing(item.formData.detailPageData.pens, retData);
+            }
         });
         //console.log('执行完毕-----', this.store.data.pens)
         this.render();
@@ -826,6 +827,28 @@ var Common = /** @class */ (function () {
             }
         }
     };
+    Common.prototype.formOverflowConversionData = function (obj) {
+        if (!obj) {
+            obj = {pens: []};
+        }
+        let data = JSON.parse(JSON.stringify(obj));
+        Object.assign(this.store.data, data);
+        this.store.data.pens = [];
+        this.openCount = 0
+        const type = this.store.options.type;
+        if (data.pens) {
+            for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
+                const item = _e[_d];
+                if (!item.from) {
+                    const node = new Node(item);
+                    this.store.data.pens.push(node);
+                } else {
+                    const linNode = new Line(item);
+                    this.store.data.pens.push(linNode);
+                }
+            }
+        }
+    };
     Common.prototype.destroyStatic = function () {
         this.clear('destroy');
         //this.closeSocket();

package/core/src/core.js

@@ -2340,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]);

package/core/src/element/select.js

@@ -196,7 +196,9 @@ export function getSelectedData(e, data, editData) {
         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) {
         // 数据展示
@@ -215,6 +217,32 @@ export function getSelectedData(e, data, editData) {
         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
+            };
+        }
+        if(penNode) {
+            penNode.activeImgeIndex = tabInit;
+            tabInit = true;
+        }
+    }
+    return true;
+}
 // 配置下拉展示的主题风格
 export function setSelectElementTheme(node) {
     const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';

package/core/src/element/tab.js

@@ -9,7 +9,11 @@ export function setElementSwitchTabState(node) {
     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';
+    if(ele) {
+        ele.style.display = !node.visible ? 'none': 'block';
+    }else {
+        commonStore[node.TID].data.dataResize = 1;
+    }
     if(node.children && node.children.length) {
         node.children.map((ch) => {
             ch.visible = node.visible;

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)
+}
+

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

@@ -25,19 +25,27 @@ export function formSelect(ctx, node) {
             },
             dom: {}
         };
-        const bindBlockId = node.formData && node.formData.bindBlockId;
+        let bindBlockId = '';
+        if(node.formData.bindBlockId) {
+            // 去空格重新赋值
+            bindBlockId = node.formData.bindBlockId.trim();
+            node.formData.bindBlockId = bindBlockId;
+        }
+        if(node.formData.bindBlockTag) {
+            // 去空格重新赋值
+            node.formData.bindBlockTag = node.formData.bindBlockTag.trim();
+        }
         let selectRealData = bindBlockId && currentStore.selectRealDataPool[bindBlockId];
         if(bindBlockId && selectRealData) {
             // select与echarts互相关联
             currentStore.selectDataPool[node.id].data = selectRealData;
             const echartsData = currentStore.echartsDataPool[bindBlockId];
-            if(echartsData){
-                echartsData.bindId = node.id;
-            }else {
-                currentStore.echartsDataPool[bindBlockId] = {
-                    bindId: node.id
-                }
-            }
+            echartsData ? echartsData.bindId = node.id : currentStore.echartsDataPool[bindBlockId] = {
+                bindId: node.id
+            };
+            // select与Tab关联
+            const bindBlockTagData = currentStore.switchTabDataPool[`${node.formData.bindBlockTag}Data`];
+            if(bindBlockTagData) currentStore.echartsDataPool[bindBlockId].tabCorrelationType = 'select';
         }else {
             if(node.formData.ids) {
                 const optionIds = node.formData.ids.split(',');

package/core/src/middles/nodes/index.d.ts

@@ -44,4 +44,5 @@ export * from './tablePagination';
 export * from './text';
 export * from './triangle';
 export * from './triangle.anchor';
-export * from './triangle.rect';
+export * from './triangle.rect';
+export * from './formoverflow';

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

@@ -45,4 +45,5 @@ export * from './text';
 export * from './triangle';
 export * from './triangle.anchor';
 export * from './triangle.rect';
+export * from './formoverflow';
 //# sourceMappingURL=index.js.map

package/core/src/models/node.js

@@ -48,6 +48,13 @@ var Node = /** @class */ (function (_super) {
         _this.iconSize = +json.iconSize;
         _this.iconColor = json.iconColor;
         _this.image = json.image;
+        _this.tabData = json.tabData || {
+            state: false,
+            name: '℃',
+            min: 0,
+            max: 60,
+            interval: 20
+        };
         _this.floorImageIndex = json.floorImageIndex || false;
         _this.formData = json.formData || null;
         _this.formStyle = json.formStyle || null;

package/core/src/options.d.ts

@@ -45,7 +45,7 @@ export interface Options {
     alwaysAnchor?: boolean;
     disableEmptyLine?: boolean;
     disableRepeatLine?: boolean;
-    disableScale?: boolean;
+    disableScale?: boolean; // 禁止缩放
     disableMoveOutParent?: boolean;
     disableDockLine?: boolean;
     playIcon?: string;

package/core/src/store/data.d.ts

@@ -63,6 +63,8 @@ export interface visualization2DStore {
     selectRealDataPool: {}; // form select
     selectTabDataPool: {}; // form select
     iframeDataPool: {}; // iframe
+    formoverDataPool: {}; // 滚动组件 Dom节点数据
+    formoverCanvasDataPool: {}; // 滚动组件 画布节点数据
     emitter: Emitter;
     dpiRatio?: number;
     lastScale?: number; //记录上次模版的scale
@@ -113,6 +115,8 @@ export const createStore = () => {
         selectRealDataPool: {}, // form select
         selectTabDataPool: {}, // form select
         iframeDataPool: {}, // iframe
+        formoverDataPool: {}, // 滚动组件 Dom节点数据
+        formoverCanvasDataPool: {}, // 滚动组件 画布节点数据
         emitter: mitt(),
         cacheDatas: [],
         dpiRatio: 1,

package/core/src/store/data.js

@@ -59,6 +59,8 @@ export var createStore = function () {
         selectRealDataPool: {}, // form select
         selectTabDataPool: {}, // form select
         iframeDataPool: {}, // iframe
+        formoverDataPool: {}, // 滚动组件 Dom节点数据
+        formoverCanvasDataPool: {}, // 滚动组件 画布节点数据
         emitter: mitt(),
         cacheDatas: [],
         dpiRatio: 1,
@@ -76,7 +78,7 @@ export var useStore = function (id) {
     return commonStore[id];
 };
 export function clearElementDataPool(data) {
-    const { echartsDataPool, selectDataPool, iframeDataPool} = data;
+    const { echartsDataPool, selectDataPool, iframeDataPool, formoverDataPool, formoverCanvasDataPool} = data;
     for (let [key, node] of Object.entries(echartsDataPool)) {
         if(node) {
             clearInterval(node.timeTicket);
@@ -107,6 +109,16 @@ export function clearElementDataPool(data) {
         node.iframe.parentNode.removeChild(node.iframe);
         delete data.iframeDataPool[key];
     }
+    for (let key of Object.keys(formoverDataPool)) {
+        delete formoverDataPool[key];
+    }
+    for (let key of Object.keys(formoverCanvasDataPool)) {
+        const elementNode = document.getElementById(key);
+        if(elementNode) {
+            elementNode.parentNode.removeChild(elementNode);   
+        }
+        delete formoverCanvasDataPool[key];
+    }
 }
 export var clearStore = function (store, del) {
     store.lastScale = store.data.scale;
@@ -154,6 +166,8 @@ export var clearStore = function (store, del) {
         echartsDataPool: store.echartsDataPool,
         selectDataPool: store.selectDataPool,
         iframeDataPool: store.iframeDataPool,
+        formoverDataPool: store.formoverDataPool,
+        formoverCanvasDataPool: store.formoverCanvasDataPool,
     });
     if(del) {
         delete commonStore[store.id];

package/core/src/utils/assignment.js

@@ -105,7 +105,7 @@ export function setDefaultNodeValidat(node, retData) {
              * 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
              * 需要注意：自定义函数中要通过 return {monitorAlarm: boolean}的格式将元件告警状态返回
              */
-            if(funcData && funcData.monitorAlarm) commonStore[node.TID].monitorAlarm = true;
+            if(funcData && funcData.monitorAlarm && commonStore[node.TID]) commonStore[node.TID].monitorAlarm = true;
         }catch (e) {
             console.log(`自定义函数出错>>>`,);
             console.log(`目标元件：${node.id}>>>`,);
@@ -114,7 +114,7 @@ export function setDefaultNodeValidat(node, retData) {
     } else {
         // console.log('默认函数')
         const newData = setConfItemNode(node, retData);
-        if(newData && newData.monitorAlarm) commonStore[node.TID].monitorAlarm = true;
+        if(newData && newData.monitorAlarm && commonStore[node.TID]) commonStore[node.TID].monitorAlarm = true;
     }
     if (node.animateFrames && node.animateFrames.length) {
         for (var _a = 0, _af = node.animateFrames; _a < _af.length; _a++) {

package/core/src/utils/construction.d.ts

@@ -1,4 +1,6 @@
 // @ts-ignore
+export declare const echartsStaticType: Array<string> = [];
+// @ts-ignore
 export declare const winEventActionFns: Array<string> = [];
 export interface MoveDataType {
     None?: string | number;

package/core/src/utils/construction.js

@@ -1,3 +1,4 @@
+export const echartsStaticType = ['DAY', 'WEEK', 'MONTH', 'YEAR', 'REALTIME'];
 export const winEventActionFns = ['Link', 'DoAnimate', 'DoFn', 'DoWindowFn', 'openImg'];
 export const moveDataType = {
     None: 0,

package/core/src/utils/conversion.d.ts

@@ -1,5 +1,6 @@
 import {Node} from "../models";
-
+export declare function tabStaticOperation(type: string, node: Node, areaData: any, params: object): void;
+export declare function tabHideShowOperation(node: any, areaData: any): void;
 export declare function getEchartsRealData(node: {}, data: []): void;
 export declare function setInitConfData(id: string, data: object): void;
 export declare function setTagIdData(data: any): [];

package/core/src/utils/conversion.js

@@ -1,4 +1,56 @@
 import {commonStore} from '../store';
+import {setElementSwitchTabState} from '../element';
+import {echartsStaticType} from '../utils';
+
+/**
+ * Tab 数据统计
+ * @param type 统计类型
+ * @param node 元件数据
+ * @param areaData tab展示区域数据
+ * @param params Tab 切换选中参数
+ */
+export function tabStaticOperation(type, node, areaData, params) {
+    if(!node.bindStaticId || !(echartsStaticType.includes(type) || type === 'OTHER')) return;
+    const curentEchart = areaData && areaData[node.bindStaticId]; // 获取当前点中的节点绑定的统计图表数据
+    if(!curentEchart || !curentEchart.data.params) return console.log('未能找到匹配的echarts图表>>>');
+    const currentStore = commonStore[node.TID];
+    const echartNode = currentStore.data.pens[curentEchart.order]; // 获取tab 绑定的图表元件数据
+    if(type === 'OTHER') {
+        const tabCorrelationType = currentStore.echartsDataPool[node.bindStaticId].tabCorrelationType; // 获取select与tab关联的标识
+        const optionNode = currentStore.echartsOptionsPool[node.bindStaticId];
+        if(tabCorrelationType === 'select') {
+            // tab类型为包含在select下的切换则执行下面的逻辑
+            echartNode.data.params['tabVisitOrder'] = params.order;
+        }else {
+            // 非 年、月、日、周、实时类型的切换
+            const groupData = currentStore.selectRealDataPool[node.bindStaticId];
+            if (optionNode) currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[groupData[params.order].id];
+        }
+        if(optionNode) optionNode.data.tabData = {
+            type,
+            data: params.data
+        };
+    }
+    echartNode.data.params['staticForType'] = type
+    echartNode.elementRendered = false;
+}
+/**
+ * Tab 显示/隐藏切换
+ * @param node tab页签数据
+ * @param areaData // tab展示区域数据
+ */
+export function tabHideShowOperation(node, areaData) {
+    const confIds = node.bindStaticId && node.bindStaticId.split(',') || [];
+    const pens = commonStore[node.TID].data.pens;
+    for (let i = 0; i < confIds.length; i++) {
+        const confid = confIds[i];
+        const areaNode = areaData[confid];
+        if(!(areaNode && pens[areaNode.order])) return;
+        const tagNode = pens[areaNode.order];
+        tagNode.visible = !(node.id !== node.id);
+        setElementSwitchTabState(tagNode);
+    }
+}
 /**
  * 获取echarts和select实时数据
  * @param node 节点

package/core/src/utils/params.js

@@ -6,6 +6,9 @@ export function getParams(id, data) {
         if (item.children && item.children.length) {
             getParams(id, item.children);
         }
+        if (item.formData && item.formData.detailPageData && item.formData.detailPageData.pens && item.formData.detailPageData.pens.length) {
+            getParams(id, item.formData.detailPageData.pens);
+        }
     });
 }
 // 过滤出参数

package/myShape-diagram/index.js

@@ -1,5 +1,7 @@
 // 源码版写法
 import { registerNode } from '../core'
+import { formOverflow } from '../core/src/middles/nodes/formoverflow'
+
 
 // 组件版写法和bundle一致
 // window.Le5leTopology.registerNode
@@ -7,87 +9,87 @@ import { registerNode } from '../core'
 // 画骨架
 
 function drawOuterLine(ctx, node) {
-    const R = Math.floor((node.rect.width - 6) / 2);
-    const r = Math.round((R * 1) / 2);
-
-    ctx.beginPath();
-    // 上半个圆形
-    ctx.arc(node.rect.x + R, node.rect.y + r, r, 0, Math.PI, true);
-    // 下半个圆形
-    const theta = Math.acos((r * 1.0) / R);
-    ctx.arc(
-            node.rect.x + R,
-            node.rect.y + node.rect.height - R,
-            R,
-            theta + Math.PI,
-            -theta,
-            true
-    ); // 逆时针
-    ctx.closePath();
-    ctx.stroke();
+  const R = Math.floor((node.rect.width - 6) / 2);
+  const r = Math.round((R * 1) / 2);
+
+  ctx.beginPath();
+  // 上半个圆形
+  ctx.arc(node.rect.x + R, node.rect.y + r, r, 0, Math.PI, true);
+  // 下半个圆形
+  const theta = Math.acos((r * 1.0) / R);
+  ctx.arc(
+    node.rect.x + R,
+    node.rect.y + node.rect.height - R,
+    R,
+    theta + Math.PI,
+    -theta,
+    true
+  ); // 逆时针
+  ctx.closePath();
+  ctx.stroke();
 }
 
 // 画底色
 function drawBasic(ctx, node) {
-    const lingrad = ctx.createLinearGradient(
-            node.rect.x,
-            node.rect.y,
-            node.rect.width,
-            node.rect.height
-    );
-    lingrad.addColorStop(0, 'mediumvioletred');
-    lingrad.addColorStop(0.2, 'darkorange');
-    lingrad.addColorStop(0.4, 'gold');
-    lingrad.addColorStop(0.6, 'limegreen');
-    lingrad.addColorStop(0.8, 'navy');
-    lingrad.addColorStop(1, 'purple');
-    ctx.fillStyle = lingrad;
-    ctx.fill('evenodd');
+  const lingrad = ctx.createLinearGradient(
+    node.rect.x,
+    node.rect.y,
+    node.rect.width,
+    node.rect.height
+  );
+  lingrad.addColorStop(0, 'mediumvioletred');
+  lingrad.addColorStop(0.2, 'darkorange');
+  lingrad.addColorStop(0.4, 'gold');
+  lingrad.addColorStop(0.6, 'limegreen');
+  lingrad.addColorStop(0.8, 'navy');
+  lingrad.addColorStop(1, 'purple');
+  ctx.fillStyle = lingrad;
+  ctx.fill('evenodd');
 }
 
 function getYByValue(node, i) {
-    const R = Math.floor((node.rect.width - 6) / 2);
-    const r = Math.round((R * 1) / 2);
-
-    const min = 0;
-    const max = 40;
-
-    // 刻度线总高度
-    const scale_height = node.rect.height - 2 * R - 2 * r;
-    // 0刻度线所在位置
-    const zero_scale_y = node.rect.height - 2 * R;
-    const dy_dtem = scale_height / (max - min);
-    return zero_scale_y - dy_dtem * node.value;
+  const R = Math.floor((node.rect.width - 6) / 2);
+  const r = Math.round((R * 1) / 2);
+
+  const min = 0;
+  const max = 40;
+
+  // 刻度线总高度
+  const scale_height = node.rect.height - 2 * R - 2 * r;
+  // 0刻度线所在位置
+  const zero_scale_y = node.rect.height - 2 * R;
+  const dy_dtem = scale_height / (max - min);
+  return zero_scale_y - dy_dtem * node.value;
 }
 
 // 画刻度线
 function drawScale(ctx, node) {
-    const min = 0;
-    const max = 40;
-    const R = Math.floor((node.rect.width - 6) / 2);
-    const r = Math.round((R * 1) / 2);
-
-    for (let i = min; i <= max; i++) {
-        // 画刻度线
-        const y = getYByValue(node, i);
-        ctx.beginPath();
-        ctx.moveTo(R + r, y);
-        if (i % 10 == 0) {
-            ctx.lineWidth = 2;
-            ctx.lineTo(R + r - (r * 2) / 3, y);
-            // ctx.font = "15px bold";
-            ctx.fillText(i + '', R + r, y + 6);
-            ctx.stroke();
-        } else {
-            ctx.lineWidth = 1;
-            if (i % 5 == 0) {
-                ctx.lineTo(R + r - r / 2, y);
-            } else {
-                ctx.lineTo(R + r - r / 3, y);
-            }
-            ctx.stroke();
-        }
+  const min = 0;
+  const max = 40;
+  const R = Math.floor((node.rect.width - 6) / 2);
+  const r = Math.round((R * 1) / 2);
+
+  for (let i = min; i <= max; i++) {
+    // 画刻度线
+    const y = getYByValue(node, i);
+    ctx.beginPath();
+    ctx.moveTo(R + r, y);
+    if (i % 10 == 0) {
+      ctx.lineWidth = 2;
+      ctx.lineTo(R + r - (r * 2) / 3, y);
+      // ctx.font = "15px bold";
+      ctx.fillText(i + '', R + r, y + 6);
+      ctx.stroke();
+    } else {
+      ctx.lineWidth = 1;
+      if (i % 5 == 0) {
+        ctx.lineTo(R + r - r / 2, y);
+      } else {
+        ctx.lineTo(R + r - r / 3, y);
+      }
+      ctx.stroke();
     }
+  }
 }
 
 /////////////////////
@@ -96,101 +98,102 @@ function drawScale(ctx, node) {
 
 // 自定义图形库绘画函数
 export function thermometer(ctx, node) {
-    ctx.beginPath();
-
-    drawOuterLine(ctx, node);
-    drawBasic(ctx, node);
-    ctx.clearRect(
-            node.rect.x,
-            node.rect.y,
-            node.rect.width,
-            getYByValue(node, node.value)
-    );
-    drawOuterLine(ctx, node);
-    drawScale(ctx, node);
+  ctx.beginPath();
+
+  drawOuterLine(ctx, node);
+  drawBasic(ctx, node);
+  ctx.clearRect(
+    node.rect.x,
+    node.rect.y,
+    node.rect.width,
+    getYByValue(node, node.value)
+  );
+  drawOuterLine(ctx, node);
+  drawScale(ctx, node);
 }
 
 // 自定义图形库绘画函数
 export function pool(ctx, node) {
-    var wr = node.borderRadius;
-    var hr = node.borderRadius;
-    if (node.borderRadius < 1) {
-        wr = node.rect.width * node.borderRadius;
-        hr = node.rect.height * node.borderRadius;
-    }
-    var r = wr < hr ? wr : hr;
-    if (node.rect.width < 2 * r) {
-        r = node.rect.width / 2;
-    }
-    if (node.rect.height < 2 * r) {
-        r = node.rect.height / 2;
-    }
-    ctx.beginPath();
-    ctx.strokeStyle = "rgba(0,0,0,.0)"
-    var value = (1-node.value) * (node.rect.height - node.lineWidth/2)
-    ctx.moveTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
-    ctx.lineTo(node.rect.ex - node.lineWidth/2, node.rect.y + value);
-    ctx.arcTo(node.rect.ex - node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, r);
-    ctx.arcTo(node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y, r);
-    ctx.lineTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
-    ctx.closePath();
-    (node.fillStyle || node.bkType) && ctx.fill();
-    ctx.stroke();
-
-    ctx.beginPath();
-    ctx.strokeStyle = node.strokeStyle
-    ctx.lineWidth = node.lineWidth
-    ctx.moveTo(node.rect.x + node.rect.width, node.rect.y);
-    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
-    ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
-    ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
-    // ctx.closePath();
-    (node.fillStyle || node.bkType);
-    ctx.stroke();
+  var wr = node.borderRadius;
+  var hr = node.borderRadius;
+  if (node.borderRadius < 1) {
+      wr = node.rect.width * node.borderRadius;
+      hr = node.rect.height * node.borderRadius;
+  }
+  var r = wr < hr ? wr : hr;
+  if (node.rect.width < 2 * r) {
+      r = node.rect.width / 2;
+  }
+  if (node.rect.height < 2 * r) {
+      r = node.rect.height / 2;
+  }
+  ctx.beginPath();
+  ctx.strokeStyle = "rgba(0,0,0,.0)"
+  var value = (1-node.value) * (node.rect.height - node.lineWidth/2)
+  ctx.moveTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
+  ctx.lineTo(node.rect.ex - node.lineWidth/2, node.rect.y + value);
+  ctx.arcTo(node.rect.ex - node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, r);
+  ctx.arcTo(node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y, r);
+  ctx.lineTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
+  ctx.closePath();
+  (node.fillStyle || node.bkType) && ctx.fill();
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.strokeStyle = node.strokeStyle
+  ctx.lineWidth = node.lineWidth
+  ctx.moveTo(node.rect.x + node.rect.width, node.rect.y);
+  ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
+  ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
+  ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
+  // ctx.closePath();
+  (node.fillStyle || node.bkType);
+  ctx.stroke();
 }
 
 // 自定义图形库绘画函数
 export function  electricFan(ctx, node) {
-    var wwr = node.rect.width / 2;
-    var hwr = node.rect.height / 2;
-    var hwr = node.rect.height / 2;
-    var x0 = node.rect.x + node.rect.width /2
-    var y0 = node.rect.y + node.rect.height / 2
-    var withinRadius = wwr < hwr ? wwr : hwr;
-    ctx.beginPath();
-    ctx.lineWidth = node.lineWidth
-    ctx.arc(x0,y0,withinRadius,0,2*Math.PI);
-    ctx.closePath();
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.lineWidth = 1;
-    var fanCount = node.fanCount;
-    for(var i = 0; i < fanCount; i++){
-        var fanAngle = 2 * Math.PI / fanCount * i;
-        var x1 = x0 - withinRadius*Math.sin(fanAngle);
-        var y1 = y0 - withinRadius*Math.cos(fanAngle);
-        var xr = x0 - withinRadius*Math.sin(fanAngle)/2;
-        var yr = y0 - withinRadius*Math.cos(fanAngle)/2;
-        ctx.moveTo(x0, y0);
-        ctx.lineTo(x1, y1);
-        ctx.arc(xr, yr, withinRadius/2, Math.PI / 2 - fanAngle,3 * Math.PI / 2 - fanAngle);
-    }
-    ctx.closePath();
-    (node.fillStyle || node.bkType) && ctx.fill();
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.lineWidth = 3;
-    ctx.arc(x0,y0,withinRadius/5,0,2*Math.PI);
-    ctx.closePath();
-    (node.fillStyle || node.bkType) && ctx.fill();
-    ctx.stroke();
+  var wwr = node.rect.width / 2;
+  var hwr = node.rect.height / 2;
+  var hwr = node.rect.height / 2;
+  var x0 = node.rect.x + node.rect.width /2
+  var y0 = node.rect.y + node.rect.height / 2
+  var withinRadius = wwr < hwr ? wwr : hwr;
+  ctx.beginPath();
+  ctx.lineWidth = node.lineWidth
+  ctx.arc(x0,y0,withinRadius,0,2*Math.PI);
+  ctx.closePath();
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.lineWidth = 1;
+  var fanCount = node.fanCount;
+  for(var i = 0; i < fanCount; i++){
+    var fanAngle = 2 * Math.PI / fanCount * i;
+    var x1 = x0 - withinRadius*Math.sin(fanAngle);
+    var y1 = y0 - withinRadius*Math.cos(fanAngle);
+    var xr = x0 - withinRadius*Math.sin(fanAngle)/2;
+    var yr = y0 - withinRadius*Math.cos(fanAngle)/2;
+    ctx.moveTo(x0, y0);
+    ctx.lineTo(x1, y1);
+    ctx.arc(xr, yr, withinRadius/2, Math.PI / 2 - fanAngle,3 * Math.PI / 2 - fanAngle);
+  }
+  ctx.closePath();
+  (node.fillStyle || node.bkType) && ctx.fill();
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.lineWidth = 3;
+  ctx.arc(x0,y0,withinRadius/5,0,2*Math.PI);
+  ctx.closePath();
+  (node.fillStyle || node.bkType) && ctx.fill();
+  ctx.stroke();
 }
 
 // 注册自定义图形库
 export function registerMyShape() {
-    registerNode('electricFan', electricFan);
-    registerNode('pool', pool);
-    registerNode('thermometer', thermometer);
+  registerNode('electricFan', electricFan);
+  registerNode('pool', pool);
+  registerNode('thermometer', thermometer);
+  registerNode('formOverflow', formOverflow);
 }
 
 // src\views\data.ts 里面加载到工具栏，第一个就是此自定义图形库

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "",
   "main": "-",
   "scripts": {