dcim-topology2d 2.2.3 → 2.2.5

package/core/src/utils/assignment.js

@@ -17,7 +17,7 @@ export function setInitNodeDataValidat(node, TID, type, order, options) {
 
     node.TID = TID;
 
-    if(options.pageId){
+    if(options && options.pageId){
         // tabs页面元件偏移量计算
         node.rect.x += options.x;
         node.rect.y += options.y;
@@ -56,10 +56,8 @@ export function setInitNodeDataValidat(node, TID, type, order, options) {
 // 初始化默认节点值
 export function initDefaultValidat(node, retData) {
     node.defaultFillStyle = node.fillStyle;
-    node.defaultFontColor = node.font.color;
-    if (node.name === 'line') {
-        node.defaultStrokeStyle = node.strokeStyle;
-    }
+    node.defaultFontColor = node.font && node.font.color;
+    node.defaultStrokeStyle = node.strokeStyle;
     setPickerDateConnectData(node);
     setVarBranchData(node, retData);
 }
@@ -80,51 +78,51 @@ function setPickerDateConnectData(node) {
 }
 // 设置变量类型和支路地址的异步数据
 function setVarBranchData(node, retData) {
-    if(!retData) return;
-    const componentData = retData.componentData;
-    let varData = null;
-    let branchNameData = null;
-    if(componentData && Object.keys(componentData).length) {
-        varData = componentData[node.id] || {};
-        branchNameData = componentData[node.id] || {};
-    }else {
-        varData = retData.varData;
-        branchNameData = retData.branchNameData;
-    }
-    const dataDictionary = {...varData, ...branchNameData};
+    if(!retData || !Array.isArray(node.data)) return;
     // 变量类型数据展示，不需要实时更新
-    if(Array.isArray(node.data) && Object.keys(dataDictionary).length) {
-        let typeName = '';
-        let imgs = '';
-        const assetId = retData.asset && retData.asset.assetId;
-        node.data.map((vd) => {
-            const varNode = dataDictionary[vd.value] || dataDictionary[`${assetId}_${vd.value}`];
-            if((vd.key.includes('varValue') || vd.key.includes('branchVal')) && varNode){
-                const showType = varNode.showType ? parseInt(varNode.showType) : 1;
-                if(showType === 1 && varNode.value) typeName += typeName ? `,${varNode.value}` : varNode.value;
-                if(showType === 2 && varNode.value) console.log('显示图标>>>');
-                if(showType === 3 && varNode.value) imgs = `/dcim-api${varNode.value}`; //imgs += imgs ? `,${varData.value}` : varData.value;
-            }
-        });
-        if(typeName) node.text = typeName;
-        if(imgs) {
-            node.text = '';
-            node.image = imgs;
-            node.paddingBottom = 0;
-            node.paddingBottomNum = 0;
-            node.paddingLeft = 0;
-            node.paddingLeftNum = 0;
-            node.paddingRight = 0;
-            node.paddingRightNum = 0;
-            node.paddingTop = 0;
-            node.paddingTopNum = 0;
+    let varData = retData.varData || {};
+    let branchNameData = retData.branchNameData || {};
+    const dataDictionary = {...varData, ...branchNameData};
+    if(!Object.keys(dataDictionary).length) return;
+    let typeName = '';
+    let imgs = '';
+    const assetId = retData.asset && retData.asset.assetId;
+    node.data.forEach((vd) => {
+        const varNode = dataDictionary[vd.value] || dataDictionary[`${assetId}_${vd.value}`];
+        if(!varNode || !varNode.value || !['varValue', 'branchVal'].includes(vd.key)) return;
+        const showType = varNode.showType ? parseInt(varNode.showType) : 1;
+        if(showType === 1) {
+
+            typeName += typeName ? `,${varNode.value}` : varNode.value;
+
+        } else if(showType === 2) {
+
+            console.log('显示图标>>>');
+
+        } else if(showType === 3) {
+
+            imgs = `/dcim-api${varNode.value}`; //imgs += imgs ? `,${varData.value}` : varData.value;
+
         }
+    });
+    if(typeName) node.text = typeName;
+    if(imgs) {
+        node.text = '';
+        node.image = imgs;
+        node.paddingBottom = 0;
+        node.paddingBottomNum = 0;
+        node.paddingLeft = 0;
+        node.paddingLeftNum = 0;
+        node.paddingRight = 0;
+        node.paddingRightNum = 0;
+        node.paddingTop = 0;
+        node.paddingTopNum = 0;
     }
 }
 // 初始化mqtt实时值
 export function setDefaultNodeValidat(node, retData) {
     //const item = JSON.parse(JSON.stringify(node));
-    if (!retData) return;
+    if (!node.events || !node.events.length || !retData) return;
     //const node = detailData.length > 0 ? detailData : syncData
     const functionData = node.events.filter((ev) => {
         return ev.action === EventAction.Function

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

@@ -64,6 +64,23 @@ export interface ConfAssociateDateValueShowType {
     real?:number; // 实时值
     date?:number; // 日期值
 }
+export enum DateBindType {
+    // 字符串别名
+    TAG = 'tag', // 测点
+    KPI = 'kpi', // 指标
+    ASSET = 'asset', // 资产
+    AREA = 'area', // 区域
+    VAR_TYPE = 'varType', // 变量类型
+    BRANCH = 'branch', // 支路地址
+    VIDEO = 'video', // 视频
+    // 数字值
+    tag = 0, // 测点
+    kpi = 1, // 指标
+    asset = 2, // 资产
+    area = 3, // 区域
+    varType = 4, // 变量类型
+    branch = 5 // 支路地址
+}
 export const moveDataType: MoveDataType;
 export const downDataType: DownDataType;
 export const previewType: PreviewType;
@@ -72,3 +89,4 @@ export const selectStaticType: SelectStaticType;
 export const datePickerBindType: DatePickerBindType;
 export const confBindValueType: ConfBindValueType;
 export const confAssociateDateValueShowType: ConfAssociateDateValueShowType;
+export const dataBindType: DateBindType;

package/core/src/utils/construction.js

@@ -61,4 +61,27 @@ export const confBindValueType = {
 export const confAssociateDateValueShowType = {
     real: 1, // 实时值
     date: 2 // 日期值
+};
+export const dataBindType = {
+    // 字符串别名
+    TAG: 'tag', // 测点
+    KPI: 'kpi', // 指标
+    ASSET: 'asset', // 资产
+    AREA: 'area', // 区域
+    VAR_TYPE: 'varType', // 变量类型
+    BRANCH: 'branch', // 支路地址
+    VIDEO: 'video', // 视频
+    // 数字值
+    tag: 0, // 测点
+    '0': 'tag',
+    kpi: 1, // 指标
+    '1': 'kpi',
+    asset: 2, // 资产
+    '2': 'asset',
+    area: 3, // 区域
+    '3': 'area',
+    varType: 4, // 变量类型
+    '4': 'varType',
+    branch: 5, // 支路地址
+    '5': 'branch'
 };

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

@@ -6,10 +6,8 @@ export declare function tabStaticOperation(type: string, node: Node, areaData: a
 export declare function tabHideShowOperation(node: any, areaData: any, visible: boolean): void;
 export declare function getEchartsRealData(node: {}, data: []): void;
 export declare function setInitConfData(id: string, data: object): void;
-export declare function setTagIdData(data: any): [];
-export declare function setKpiAddrData(data: any): [];
-export declare function setAssetIdData(data: any): [];
-export declare function setAreaIdData(data: any): [];
-export declare function setVarValueData(data: any): [];
-export declare function setBranchAddressData(data: any): [];
-export declare function setThreeCategoryIdData(pen: Node, data: any): [];
+export declare function setConfBindPointMonitorData(type: number, eventNode: object, data: any): {};
+export declare function createEchartsLineIcon(type: number, pen: Node, data: any): {};
+export declare function bindDataConfig(item: object, type: number): {};
+// @ts-ignore
+export declare function hasBoundData(boundData: Set<string>, item: object, type: number): boolean;

package/core/src/utils/conversion.js

@@ -1,7 +1,9 @@
 import {commonStore} from '../store';
 import {setElementSwitchTabState} from '../element';
-import {echartsStaticType} from '../utils';
+import {echartsStaticType, dataBindType} from '../utils';
 import {datePickerType, datePickerTypeList} from "../../../store";
+import {echartsInitRealDataPoll} from "../../../store";
+import {svgEchartsLineData} from "../../../static";
 
 /**
  * yyyy-MM-dd 格式转换
@@ -147,28 +149,35 @@ export function getTabConnectSHConf(node) {
  * Tab 数据统计
  * @param type 统计类型
  * @param node 元件数据
- * @param areaData tab展示区域数据
+ * @param index 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图表>>>');
+export function tabStaticOperation(type, node, index, params) {
+    if(!(echartsStaticType.includes(type) || type === 'OTHER')) return;
     const currentStore = commonStore[node.TID];
-    const echartNode = currentStore.data.pens[curentEchart.order]; // 获取tab 绑定的图表元件数据
-    if(type === 'OTHER') {
+    const echartNode = currentStore.data.pens[index]; // 获取tab 绑定的图表元件数据
+    if(type === 'OTHER' || type === 'CUSTOMIZE') {
         const tabCorrelationType = currentStore.echartsDataPool[node.bindStaticId].tabCorrelationType; // 获取select与tab关联的标识
         const optionNode = currentStore.echartsOptionsPool[node.bindStaticId];
+        const order = params.order;
         if(tabCorrelationType === 'select') {
             // tab类型为包含在select下的切换则执行下面的逻辑
-            echartNode.data.params['tabVisitOrder'] = params.order;
+            echartNode.data.params['tabVisitOrder'] = order;
         }else {
             // 非 年、月、日、周、实时类型的切换
-            const groupData = currentStore.selectRealDataPool[node.bindStaticId];
-            if (optionNode) currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[groupData[params.order].id];
+            let echartsRealData = null;
+            if(node.formData.dateId) {
+                // 绑定了日期元件的逻辑处理
+                echartsRealData = echartsInitRealDataPoll[node.bindStaticId][order];
+            }else {
+                const groupData = currentStore.selectRealDataPool[node.bindStaticId];
+                echartsRealData = currentStore.echartsRealDataPool[groupData[order].id];
+            }
+            if (optionNode) currentStore.echartsRealDataPool[optionNode.data.id] = echartsRealData;
         }
         if(optionNode) optionNode.data.tabData = {
             type,
+            index: order,
             data: params.data
         };
     }
@@ -200,6 +209,8 @@ export function tabHideShowOperation(node, areaData, isActive) {
  * @param data 实时数据
  */
 export function getEchartsRealData(node, data){
+    if(!data.length) return;
+    if(!echartsInitRealDataPoll[node.id]) echartsInitRealDataPoll[node.id] = data;
     const currentStore = commonStore[node.TID];
     if(!currentStore.selectRealDataPool[node.id]) {
         const selectData = [];
@@ -216,13 +227,16 @@ export function getEchartsRealData(node, data){
         currentStore.selectRealDataPool[node.id] = selectData;
     }else {
         const selectId = currentStore.echartsDataPool[node.id] && currentStore.echartsDataPool[node.id].bindId;
-        const selected = selectId && currentStore.selectDataPool[selectId] && currentStore.selectDataPool[selectId].node.selected;
-        if(selected && selected.id) {
-            // 如有选中的数据
-            currentStore.echartsRealDataPool[node.id] = currentStore.echartsRealDataPool[selected.id];
+        if(selectId) {
+            const selected = currentStore.selectDataPool[selectId] && currentStore.selectDataPool[selectId].node.selected;
+            const id = selected && selected.id; // 选中的下拉节点id
+            currentStore.echartsRealDataPool[node.id] = currentStore.echartsRealDataPool[id];
         }else {
-            currentStore.echartsRealDataPool[node.id] = data[0];
+            const echartsOptionsData = currentStore.echartsOptionsPool[node.id].data;
+            const id = echartsOptionsData.tabData && echartsOptionsData.tabData.index || 0; // 实时数据索引id
+            currentStore.echartsRealDataPool[node.id] = data[id];
         }
+        currentStore.echartsOptionsPool[node.id].data.targetChange = false;
     }
 }
 export function setInitConfData(id, data){
@@ -242,8 +256,175 @@ export function setInitConfData(id, data){
     if(data.name === 'echarts') initNode.data = data.data;
     commonStore[id].initConfNode[data.id] = initNode;
 }
-export function setTagIdData(data) {
-    return [{
+export function setConfBindPointMonitorData(type, eventNode, data) {
+    if(eventNode.action !== 14) return;
+    eventNode.data.type = type;
+    if(type === 0) {
+        // 测点
+        const { tagId, tagName, assetId } = data;
+        eventNode.data.name = tagName;
+        eventNode.data.id = tagId;
+        eventNode.data.assetId = assetId;
+    }else if(type === 1) {
+        // 指标
+        const { kpiId, kpiAddr, devId, kpiName } = data;
+        eventNode.data.name = kpiName;
+        eventNode.data.id = kpiId;
+        eventNode.data.kpiAddr = kpiAddr;
+        eventNode.data.assetId = devId;
+    }
+}
+/**
+ * 生成echartsLine小图标节点数据
+ * @param type 绑定的数据类型
+ * @param pen 元件节点数据
+ * @param data 绑定的数据
+ * @returns {{rect: {width: number, height: number}, path: string[], strokeStyle: string, name: string, lineWidth: number}}
+ */
+export function createEchartsLineIcon(type, pen, data) {
+    const node = {...svgEchartsLineData};
+    let eventNode = {
+        action: 14,
+        type: 0,
+        data: {}
+    };
+    setConfBindPointMonitorData(type, eventNode, data);
+    node.events = [eventNode];
+    node.rect.x = pen.rect.x + pen.rect.width;
+    if(pen.name === 'text') {
+        node.rect.height = pen.rect.height - 12;
+        node.rect.y = pen.rect.y + (pen.rect.height - node.rect.height)/2;
+    }else {
+        node.rect.y = pen.rect.y;
+        node.rect.height = pen.rect.height;
+    }
+    node.rect.width = node.rect.height;
+    return node;
+}
+/**
+ * 绑定类型 -> 配置映射（
+ */
+const BIND_CONFIG_MAP = {
+    [dataBindType.TAG]: {
+        nameKey: 'tagName',
+        dataFn: setTagIdData,
+        titleKey: 'touchpname',
+    },
+    [dataBindType.KPI]: {
+        nameKey: 'kpiName',
+        dataFn: setKpiAddrData,
+    },
+    [dataBindType.ASSET]: {
+        nameKey: 'name',
+        dataFn: setAssetIdData,
+        titleKey: 'bak',
+        hasChildren: true,
+    },
+    [dataBindType.AREA]: {
+        nameKey: 'name',
+        dataFn: setAreaIdData,
+    },
+    [dataBindType.VAR_TYPE]: {
+        nameKey: 'name',
+        dataFn: setVarValueData,
+    },
+    [dataBindType.BRANCH]: {
+        nameKey: 'value',
+        dataFn: setBranchAddressData,
+    },
+};
+export function bindDataConfig(item, type) {
+    const itemNode = item && item.default || item;
+    const node = {
+        data: [],
+        events: [],
+        children: [],
+        title: '',
+        bindName: ''
+    };
+
+    // 视频类型单独处理
+    if (type === dataBindType.VIDEO) {
+        node.title = itemNode.params.name || '';
+        node.events = itemNode ? [itemNode] : [];
+        return node;
+    }
+    
+    const key = dataBindType[type];
+    const config = BIND_CONFIG_MAP[key];
+    if (!config) return node;
+
+    // 绑定名称
+    node.bindName = itemNode[config.nameKey] || '';
+
+    // 绑定数据
+    const dataList = config.dataFn(itemNode) || [];
+    node.data.push(...dataList);
+
+    // 绑定标题
+    if (config.titleKey) node.title = itemNode[config.titleKey] || '';
+
+    // 资产：温湿度子节点
+    if (config.hasChildren && item.isHumiture) node.children = setHumitureBindData(item, type) || [];
+
+    return node;
+}
+
+/**
+ * 校验：即将绑定的数据中是否存在已绑定的数据
+ * @param boundData 已绑定的数据
+ * @param item 绑定节点数据
+ * @param type 绑定的数据类型
+ */
+export function hasBoundData(boundData, item, type) {
+    let isSkip = false;
+    switch (type) {
+        case dataBindType.tag:
+            isSkip = boundData.has(item.tagId);
+            break;
+        case dataBindType.kpi:
+            isSkip = boundData.has(`${item.kpiId}_${item.kpiAddr}`);
+            break;
+        case dataBindType.asset:
+        case dataBindType.area:
+        case dataBindType.varType:
+            isSkip = boundData.has(item.id);
+            break;
+        case dataBindType.branch:
+            isSkip = boundData.has(item.value);
+            break;
+    }
+    return isSkip;
+}
+function setHumitureBindData(item, type) {
+    // 初始化子节点列表
+    const children = [];
+
+    // 通讯状态节点
+    children.push(bindDataConfig(item.default, type));
+
+    // 温度节点
+    if (item.temperature) children.push({ data: setTagIdData(item.temperature) });
+
+    // 湿度节点（存在才添加）
+    if (item.dampness) children.push({ data: setTagIdData(item.dampness) });
+
+    // 统一给所有子节点设置 MQTT 事件
+    const mqttEvent = [{ type: 3, action: 2, value: '', show: true }];
+    children.forEach(sub => {
+        if (sub) sub.events = mqttEvent;
+    });
+
+    return children;
+}
+// 测点数据配置
+function setTagIdData(data) {
+    //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
+    const threeCategory = [{
+        "key": "threeCategoryId",
+        "value": data.threeCategoryId
+    }];
+    return [...threeCategory, {
         "key": "tagId",
         "value": data.tagId,
         "isControlDis": data.isControlDis,
@@ -256,7 +437,8 @@ export function setTagIdData(data) {
         "value": data.tagName
     }];
 }
-export function setKpiAddrData(data) {
+// 指标数据配置
+function setKpiAddrData(data) {
     return [{
         "key": "kpiAddr",
         "value": data.kpiId + '_' + data.kpiAddr,
@@ -267,7 +449,8 @@ export function setKpiAddrData(data) {
         "value": data.kpiName
     }];
 }
-export function setAssetIdData(data) {
+// 资产数据配置
+function setAssetIdData(data) {
     return [{
         "key": "assetId",
         "value": data.id
@@ -276,7 +459,8 @@ export function setAssetIdData(data) {
         "value": data.name
     }];
 }
-export function setAreaIdData(data) {
+// 区域数据配置
+function setAreaIdData(data) {
     return [{
         "key": "areaId",
         "value": data.id
@@ -285,7 +469,8 @@ export function setAreaIdData(data) {
         "value": data.name
     }];
 }
-export function setVarValueData(data) {
+// 变量类型数据配置
+function setVarValueData(data) {
     return [{
         "key": "varId",
         "value": data.id
@@ -297,7 +482,8 @@ export function setVarValueData(data) {
         "value": data.name
     }];
 }
-export function setBranchAddressData(data) {
+// 支路地址数据配置
+function setBranchAddressData(data) {
     return [{
         "key": "branchVal",
         "value": data.value
@@ -306,7 +492,8 @@ export function setBranchAddressData(data) {
         "value": data.key
     }];
 }
-export function setThreeCategoryIdData(pen, data) {
+// 类别数据配置
+function setThreeCategoryIdData(pen, data) {
     let params = [];
     const hasThreeCategoryId = pen.data.find((tc) => {
         return tc.key === 'threeCategoryId' && tc.value === data.threeCategoryId;
@@ -316,4 +503,4 @@ export function setThreeCategoryIdData(pen, data) {
         "value": data.threeCategoryId
     }];
     return params;
-}
+}

package/core/src/utils/params.js

@@ -18,6 +18,7 @@ export function getParams(id, data) {
 }
 // 过滤出参数
 export function filterParams(id, node) {
+    if(!node.events || !node.events.length) return;
     let tagIds = [];
     let kpiAddrs = [];
     let assetIds = [];

package/myShape-diagram/index.js

@@ -1,6 +1,6 @@
 // 源码版写法
 import { registerNode } from '../core'
-import { formOverflow } from '../core/src/middles/nodes/formoverflow'
+import { formOverflow } from '../core/src/middles/nodes/form/formoverflow'
 
 
 // 组件版写法和bundle一致
@@ -155,7 +155,6 @@ export function pool(ctx, node) {
 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;

package/package.json

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

package/static/icon.js

@@ -0,0 +1,10 @@
+export const svgEchartsLineData = {
+    rect: {
+        width: 16,
+        height: 16
+    },
+    name: 'svgEchartsLine',
+    strokeStyle: '#3b82f6',
+    lineWidth: 1,
+    path: ['M85.333333 128a42.666667 42.666667 0 0 0-85.333333 0v682.666667a128 128 0 0 0 128 128h853.333333a42.666667 42.666667 0 1 0 0-85.333334H128a42.666667 42.666667 0 0 1-42.666667-42.666666V128z', 'M886.485333 332.672a42.666667 42.666667 0 1 0-63.232-57.344l-255.957333 282.24-115.498667-107.776a85.333333 85.333333 0 0 0-121.941333 5.632l-154.709333 173.653333a42.666667 42.666667 0 0 0 63.744 56.746667l154.709333-173.653333 115.498667 107.776a85.333333 85.333333 0 0 0 121.429333-5.077334l255.957333-282.197333z'],
+}

package/static/index.js

@@ -1,3 +1,4 @@
-export * from './echartsDefaultData';
+export * from './icon';
+export * from './echarts';
 export * from './form';
 export * from './element';

package/store/actions.js

@@ -1,2 +1,16 @@
 export const plugsPool = {};
-export const tabsPageContentData = {};
+export const tabsPageContentData = {};
+export const echartsInitRealDataPoll = {}; // echarts 初始数据
+// 单个或者批量为元件绑定数据时，若勾选了“点位监控”，则绑定数据的元件会与自动生成的图标进行关联，
+// 1、移动时图标会跟随/2、元件被删除时图标会跟着一起删除；3、元件修改绑定的测点或指标数据，关联的图标也会自动修改绑定数据；
+// 4、若元件修改绑定了除 “指标”或“测点”的其他数据，则关联的小图标会自动删除；
+export const bindDataWithIconAssociationPool = new Map();
+// 支持小图标跟随关联元件移动的属性
+export const iconMotionData = {
+    width: true,
+    height: true,
+    x: true,
+    y: true
+};
+// SVG path实例数据
+export const svgPathInstance = new Map();

package/store/clear.js

@@ -1,9 +1,24 @@
 import {setEventListener} from "../core";
-import {tabsPageContentData} from "./actions";
-export const removeAllElement = function (){
-    for (let key of Object.keys(tabsPageContentData)) {
-        delete tabsPageContentData[key];
+import {
+    tabsPageContentData,
+    echartsInitRealDataPoll,
+    bindDataWithIconAssociationPool,
+    svgPathInstance
+} from "./actions";
+function removeDomNodeElement(domNode) {
+    for (let ele of Object.keys(domNode)) {
+        ele.parentNode.removeChild(ele);
     }
+}
+function deleteDataPoolNode(domNode) {
+    if(!Object.keys(domNode).length) return;
+    for (let [key, node] of Object.entries(domNode)) {
+        node.dom && removeDomNodeElement(node.dom);
+        delete domNode[key];
+    }
+}
+export const removeDefineElement = function (){
+    deleteDataPoolNode(tabsPageContentData);
     const documentDefineEle = document.querySelectorAll('.documentDefine');
     if(documentDefineEle) {
         documentDefineEle.forEach(function(element) {
@@ -11,4 +26,52 @@ export const removeAllElement = function (){
             element.parentNode.removeChild(element);
         });
     }
+}
+export function clearElementDataPool(data) {
+    bindDataWithIconAssociationPool.clear();
+    svgPathInstance.clear();
+    const {
+        echartsDataPool,
+        selectDataPool,
+        iframeDataPool,
+        formoverDataPool,
+        formoverCanvasDataPool,
+        timeDataPool
+    } = data;
+    for (let [key, node] of Object.entries(echartsDataPool)) {
+        if(node) {
+            clearInterval(node.timeTicket);
+            if(node.chart) {
+                node.chart.off('mouseover');
+                node.chart.off('mouseout');
+                node.chart.off('globalout');
+                node.chart.dispose();
+            }
+            if(node.div && node.div.parentNode) node.div.parentNode.removeChild(node.div);
+        }
+        delete data.echartsDataPool[key];
+    }
+    if(Object.keys(selectDataPool).length) {
+        let dropdownEle = null,
+            dropdownListEle = null;
+        for (let [key, node] of Object.entries(selectDataPool)) {
+            if(!dropdownEle) {
+                dropdownEle = node.dom.selectDropdown;
+                dropdownListEle = node.dom.selectDropdownUl;
+            }
+            if(node.dom.selectEle && node.dom.selectEle.parentNode) node.dom.selectEle.parentNode.removeChild(node.dom.selectEle);
+            delete data.selectDataPool[key];
+        }
+        if(dropdownEle) dropdownEle.style.display = 'none';
+        if(dropdownListEle) dropdownListEle.innerHTML = '';
+    }
+    deleteDataPoolNode(iframeDataPool);
+    for (let key of Object.keys(formoverCanvasDataPool)) {
+        const elementNode = document.getElementById(key);
+        elementNode && elementNode.parentNode.removeChild(elementNode);
+        delete formoverCanvasDataPool[key];
+    }
+    deleteDataPoolNode(formoverDataPool);
+    deleteDataPoolNode(timeDataPool);
+    deleteDataPoolNode(echartsInitRealDataPoll);
 }