dcim-topology2d 2.0.8 → 2.2.0

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

@@ -0,0 +1,252 @@
+import {echartsColorData} from '../../../static';
+
+/**
+ *
+ * @param startRatio 开始绘制位置
+ * @param endRatio 结束绘制位置
+ * @param isSelected 是否选中
+ * @param isHovered 鼠标悬浮在图表之上？
+ * @param k 内廷半径
+ * @param h 高
+ * @returns {{u: {min: number, max: number, step: number}, v: {min: number, max: number, step: number}, x: ((function(*, *): *)|*), y: ((function(*, *): *)|*), z: ((function(*, *): (number|number))|*)}}
+ */
+export function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h){
+    // 计算
+    let midRatio = (startRatio + endRatio) / 2;
+    let startRadian = startRatio * Math.PI * 2;
+    let endRadian = endRatio * Math.PI * 2;
+    let midRadian = midRatio * Math.PI * 2;
+    isSelected = false;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+        isSelected = true;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = typeof k !== 'undefined' ? k : 1 / 3;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    let hoverRate = isHovered ? 1.05 : 1;
+    // 返回曲面参数方程
+    return {
+        u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+        },
+        v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+        },
+        x: function(u, v) {
+            if (u < startRadian) {
+                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function(u, v) {
+            if (u < startRadian) {
+                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function(u, v) {
+            if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+                return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        }
+    };
+}
+/**
+ * 获取3D饼图数据
+ * @param internalDiameterRatio 透明的空心占比
+ * @param type 'pie':饼图；'ring':环形图
+ * @param appearance 配置数据
+ * @param labelLineData 引线静态数据
+ * @param realData 实时数据
+ * @returns {{series: *[], legendData: *[]}}
+ */
+export function getPie3D(internalDiameterRatio, type, appearance, labelLineData, realData){
+    const { seriesStyleData, chartData, labelLine, grid } = appearance;
+    let k = typeof internalDiameterRatio !== "undefined" ?
+            (1 - internalDiameterRatio) / (1 + internalDiameterRatio) :
+            1 / 3; // 3d 环形图
+    const pieData = realData && realData.length ? realData : chartData;
+    if(type === 'pie'){
+        // 3d 饼图
+        k = 1;
+        pieData.sort((a, b) => {
+            return b.value - a.value;
+        });
+    }
+    
+    let sumValue = pieData.reduce((total, obj) => total + obj.value, 0);
+    let startValue = 0;
+    let endValue = 0;
+    let total = 0;
+    let boxHeight = (grid.boxHeight * 25) / pieData[0].value;
+    let legendData = [];
+    let series = [];
+    let node = {};
+    const lineData = [];
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i++) {
+        const {name, value, itemColor, itemOpacity} = pieData[i];
+        const pieDataItem =  chartData[i];
+        const seriesItemColor = itemColor || pieDataItem && pieDataItem.itemColor || echartsColorData[i];
+        endValue = startValue + value;
+        let hv = seriesStyleData && seriesStyleData[i] || value;
+        let pk = 1 / 10;
+        if(type === 'pie') {
+            hv = value;
+            pk = k;
+            if(labelLine.data[i]) {
+                const lineItem = labelLine.data[i];
+                lineItem.valueColor = seriesItemColor;
+                lineItem.unitColor = seriesItemColor;
+            }
+        }else {
+            total += value;
+            node[name] = {
+                order: i,
+                value
+            };
+        }
+        const newStartRatio = startValue / sumValue;
+        const newEndRatio = endValue / sumValue;
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形
+        const parametricEquation = getParametricEquation(newStartRatio, newEndRatio, false, false, k, hv);
+        let seriesItem = {
+            name: typeof name === 'undefined' ? `series${i}` : name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            pieData: {
+                name,
+                value,
+                startRatio: newStartRatio,
+                endRatio: newEndRatio
+            },
+            pieStatus: {
+                selected: false,
+                hovered: false,
+                k: pk,
+            },
+            parametricEquation,
+            itemStyle: {
+                color: seriesItemColor,
+                opacity: itemOpacity || pieDataItem && pieDataItem.itemOpacity || 1
+            }
+        };
+        startValue = endValue;
+        legendData.push(seriesItem.name);
+        series.push(seriesItem);
+        if(labelLineData) {
+            const lineStyleNode = labelLineData.data[i] || labelLineData.data[0];
+            lineStyleNode.lineStyle.color = seriesItemColor;
+            const labelLineItem = {
+                name,
+                value,
+                labelLine: {...lineStyleNode}
+            };
+            lineData.push(labelLineItem);
+        }
+    }
+    if(lineData.length) {
+        labelLineData.data = lineData;
+        series.push(labelLineData);
+    }
+    return {
+        legendData,
+        series,
+        node,
+        total,
+        boxHeight
+    };
+}
+export function set3DPieMouseHover(myChart, type, option, valueData){
+    let selectedIndex = '';
+    let hoveredIndex = '';
+    let isSelected;
+    let isHovered;
+    let startRatio;
+    let endRatio;
+    let k;
+    // 监听 mouseover，近似实现高亮（放大）效果
+    myChart.on('mouseover', function(params) {
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) return;
+        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+        if (hoveredIndex !== '') {
+            const value = type === 'pie' ? option.series[hoveredIndex].pieData.value : valueData[hoveredIndex];
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = option.series[hoveredIndex].pieData.startRatio;
+            endRatio = option.series[hoveredIndex].pieData.endRatio;
+            k = option.series[hoveredIndex].pieStatus.k;
+
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, value);
+            option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = '';
+        }
+
+        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+        if (params.seriesName !== 'mouseoutSeries') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            const pieStatus = option.series[params.seriesIndex].pieStatus;
+            if(!pieStatus) return; // 先退出，后期若有hover引线时，图形联动的需求时再做逻辑处理
+            const value = type === 'pie' ? option.series[params.seriesIndex].pieData.value : valueData[params.seriesIndex];
+            isSelected = option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio = option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = option.series[params.seriesIndex].pieData.endRatio;
+            k = option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, value + 5);
+            option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(option);
+    });
+    // 修正取消高亮失败的 bug
+    myChart.on('globalout', function(params) {
+        if (hoveredIndex !== '') {
+            const value = type === 'pie' ? option.series[hoveredIndex].pieData.value : valueData[hoveredIndex];
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            k = option.series[hoveredIndex].pieStatus.k;
+            startRatio = option.series[hoveredIndex].pieData.startRatio;
+            endRatio = option.series[hoveredIndex].pieData.endRatio;
+
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, value);
+            option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = '';
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(option);
+    });
+}

package/core/src/common.js

@@ -14,7 +14,7 @@ import {
     setInitConfData,
     getParams,
     tabHideShowOperation,
-    tabStaticOperation
+    tabStaticOperation, pageZoom
 } from './utils';
 import {useStore, clearStore, commonStore} from './store'
 import * as mqtt from './mqtt.min';
@@ -181,11 +181,13 @@ var Common = /** @class */ (function () {
             areaIds: this.store.mqttParams.areaIds.join(","),
             routingkey: this.store.mqttParams.routingkey,
             echart: this.store.mqttParams.tagEcharts.join(","),
-            echartData: this.store.mqttParams.echartData
+            echartData: this.store.mqttParams.echartData,
+            dataConfig: this.store.mqttParams.dataConfig.data
         }
         if (this.store.mqttParams.echartAssemblyData.length) params.echartAssemblyData = [...this.store.mqttParams.echartAssemblyData];
         if(assetId) {
             params.varValueIds = this.store.mqttParams.varVaule.join(",");
+            params.branchAddrs = this.store.mqttParams.branchValue.join(",");
         }else {
             if(this.store.mqttParams.assetIds.length && this.store.mqttParams.varVaule.length) {
                 const assetId = this.store.mqttParams.assetIds[this.store.mqttParams.assetIds.length -1];
@@ -219,6 +221,13 @@ var Common = /** @class */ (function () {
         })
         this.store.mqttParams.varVaule = ids;
     };
+    Common.prototype.getBranchValueIdsForBranchsData = function (data){
+        const ids = [];
+        data.map((item) => {
+            if(item.branchAddr) ids.push(`${item.assetId}_${item.branchAddr}`);
+        })
+        this.store.mqttParams.branchValue = ids;
+    };
     // 固定资产详情数据赋值
     Common.prototype.renderForAssetPoperties = function (asset, data){
         if(!Object.keys(asset).length) return;
@@ -248,10 +257,9 @@ var Common = /** @class */ (function () {
         }
         let data = JSON.parse(JSON.stringify(obj));
         Object.assign(this.store.data, data);
-        // pageZoomOnly 表示topology页面只全局缩放，不对局部缩放进行调整
-        if(this.store.options.type !== 'topology' && this.store.options.type !== 'pageZoomOnly') {
-            const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
-            const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
+        // topology编辑器下跳出程序
+        if(this.store.options.type !== 'topology') {
+            const zoom = pageZoom();
             this.store.data.pageZoom = zoom;
             this.store.parentElem.style.transform = `scale(${1/zoom})`;
             this.store.parentElem.style.transformOrigin = '0 0';
@@ -485,7 +493,7 @@ var Common = /** @class */ (function () {
         if(!switchTabData) return;
         const topologyChangeData = commonStore[node.TID].switchTabDataPool; // 获取所有按钮组和按类型统计图组数据
         const changeNode = topologyChangeData[`${switchTabData}Data`]; // 分别获取按钮组数据
-        if(!changeNode[node.id]) return;
+        if(!changeNode || !changeNode[node.id]) return;
         // 如果存在按钮组节点数据
         const tabAreaData = topologyChangeData[`${switchTabData}AreaData`];
         let tabIndex = 0;
@@ -698,10 +706,10 @@ var Common = /** @class */ (function () {
         this.divLayer.canvas.title = '';
         this.tip = '';
     };
-    Common.prototype.dispatch = function (event, data) {
+    Common.prototype.dispatch = function (event, node, data) {
         if(!this.store || !this.store.options) return;
         if (this.store.options.on) {
-            this.store.options.on(event, data);
+            this.store.options.on(event, node, data);
         }
         // 先注释掉
         // if (event === 'node' && data.name == 'tablePagination' && this.store.options.type !== 'topology') {
@@ -731,9 +739,9 @@ var Common = /** @class */ (function () {
             connectParams.password = resetDCIM.mqttPassword;
         }
         // 连接测试，MQTT
-        this.openMqtt(connectParams);
+        this.openMqtt(connectParams, resetDCIM.mqttDebug);
     };
-    Common.prototype.openMqtt = function (connectParams) {
+    Common.prototype.openMqtt = function (connectParams, debug) {
         const _this = this;
         _this.closeMqtt();
         if(!connectParams.mqttUrl) return;
@@ -741,9 +749,9 @@ var Common = /** @class */ (function () {
         const url = connectParams.mqttUrl.replace('ip', location.hostname);
         _this.mqttClient = mqtt.connect(url, connectParams);
         _this.mqttClient.on('message', function (topic, message) {
-            //console.log('openMqtt11===================', topic, message)
+            if(debug) console.log('mqttClientTopic>>>', topic, connectParams.mqttTopics)
             if (!topic || topic != connectParams.mqttTopics) return;
-            if (!this.isEnd) _this.doMqttDrow(message.toString());
+            if (!this.isEnd) _this.doMqttDrow(message.toString(), debug);
         });
         const topics = connectParams.mqttTopics;
         if (topics) {
@@ -756,9 +764,10 @@ var Common = /** @class */ (function () {
             this.mqttClient.end();
         }
     };
-    Common.prototype.doMqttDrow = function (ret) {
+    Common.prototype.doMqttDrow = function (ret, debug) {
         let canvasData = this.store.data;
         ret = JSON.parse(ret);
+        if(debug) console.log('mqttClientMessage>>>', ret)
         //console.log('处理消息', ret)
         this.mqttDataDrawing(canvasData.pens, ret)
     };
@@ -904,7 +913,7 @@ var Common = /** @class */ (function () {
             this[item] = null;
 
         })
-        //end
+        //end dcimStaticForType
         window.topology = null;
     };
     // Render or redraw

package/core/src/core.d.ts

@@ -19,6 +19,8 @@ export declare class Topology extends Common{
     lastHoverNode: Node;
     lastHoverLine: Line;
     needCache: boolean;
+    isTabHideShow: boolean;
+    nodeId: string; // 元件的id，一般用来做新旧数据对比
     gridElem: HTMLElement;
     private scheduledAnimationFrame;
     hoverLayer: HoverLayer;

package/core/src/core.js

@@ -27,8 +27,11 @@ import {
     setAssetIdData,
     setAreaIdData,
     setVarValueData,
+    setBranchAddressData,
     setThreeCategoryIdData,
-    setConnectionTagForConf
+    setConnectionTagForConf,
+    setConnectionTabsData,
+    getTabConnectSHConf
 } from './utils';
 import {setSelectElementPosition} from './element';
 import {elementType} from '../../static';
@@ -48,8 +51,10 @@ var Topology = (function (_super) {
             index: 0,
             list: [],
         };
+        _this.isTabHideShow = false;
         _this.needCache = false;
         _this.addingArbitraryGraph = false;
+        _this.nodeId = '';
         _this.arbitrarygGraphData = {
             points: [],
             circles: [],
@@ -107,6 +112,7 @@ var Topology = (function (_super) {
                     _this.dispatch('translate', {x, y});
                     return false;
                 }
+                
             }
             if (_this.store.data.locked && _this.mouseDown) {
                 return;
@@ -363,8 +369,7 @@ var Topology = (function (_super) {
         };
         _this.onmousedown = function (e) {
             _this.store.data.dataResize = 0;
-            if (e.button !== 0)
-                return;
+            if (e.button !== 0) return;
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
             _this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
             if (e.altKey) {
@@ -481,6 +486,7 @@ var Topology = (function (_super) {
                                         if (activeNode.paginationData.targetPageLocal.hide) _this.targetPageInputHandle(activeNode, e);
                                     }
                                 }else {
+                                    _this.changeTabsState(activeNode);
                                     _this.dispatch('node', activeNode);
                                 }
                             }
@@ -779,23 +785,23 @@ var Topology = (function (_super) {
                     }
             }
             event.preventDefault();
-            if (event.deltaY < 0) {
-                if (event.layerX && event.layerY) {
-                    _this.scale(1.1, {x: event.layerX, y: event.layerY});
-                    _this.canvas.scale(1.1, {x: event.layerX, y: event.layerY});
-                } else {
-                    _this.scale(1.1);
-                    _this.canvas.scale(1.1);
-                }
-            } else {
-                if (event.layerX && event.layerY) {
-                    _this.scale(0.9, {x: event.layerX, y: event.layerY});
-                    _this.canvas.scale(0.9, {x: event.layerX, y: event.layerY});
-                } else {
-                    _this.scale(0.9);
-                    _this.canvas.scale(0.9);
-                }
-            }
+            // if (event.deltaY < 0) {
+            //     if (event.layerX && event.layerY) {
+            //         _this.scale(1.1, {x: event.layerX, y: event.layerY});
+            //         _this.canvas.scale(1.1, {x: event.layerX, y: event.layerY});
+            //     } else {
+            //         _this.scale(1.1);
+            //         _this.canvas.scale(1.1);
+            //     }
+            // } else {
+            //     if (event.layerX && event.layerY) {
+            //         _this.scale(0.9, {x: event.layerX, y: event.layerY});
+            //         _this.canvas.scale(0.9, {x: event.layerX, y: event.layerY});
+            //     } else {
+            //         _this.scale(0.9);
+            //         _this.canvas.scale(0.9);
+            //     }
+            // }
             _this.divLayer.canvas.focus();
             return false;
         };
@@ -914,6 +920,20 @@ var Topology = (function (_super) {
         item.clearChildrenIds();
         return item;
     };
+    Topology.prototype.changeTabsState = function (node) {
+        if(this.nodeId === node.id) return;
+        this.nodeId = node.id;
+        this.isTabHideShow = node.events && node.events.some((ev) => {return ev.action === 8 && ev.dcimStaticForType === 'SH'});
+        if(!this.isTabHideShow) return;
+        // tab显示隐藏
+        const pens = this.store.data.pens;
+        // 重置tabs数据
+        for (let i = 0, pensLength = pens.length; i < pensLength; i++) {
+            pens[i].order = i;
+            setConnectionTabsData(pens[i]);
+        }
+        this.switchStaticsCheckType(node, {dcimStaticForType: 'SH'});
+    };
     // 添加温湿度元件
     Topology.prototype.dropTempNode = function(json) {
         const nodeChildren = json.children;
@@ -1565,7 +1585,15 @@ var Topology = (function (_super) {
     };
     Topology.prototype.delete = function (force, nodes) {
         var pens = [];
-        const deleteNodes = nodes ? nodes : this.activeLayer.pens;
+        var deleteNodes = [];
+        if(this.isTabHideShow) {
+            // 如果删除的是tab显示隐藏元件
+            deleteNodes = getTabConnectSHConf(this.activeLayer.pens[0]);
+            this.activeLayer.pens = [];
+        }else {
+            deleteNodes = nodes || this.activeLayer.pens;
+        }
+        let dateIds = '';
         for (var i = 0; i < deleteNodes.length; i++) {
             var pen = deleteNodes[i];
             if (!force && pen.locked) {
@@ -1573,6 +1601,7 @@ var Topology = (function (_super) {
             }
             var found = this.findIndex(pen);
             if (found > -1) {
+                if(pen.pickerOptions) dateIds += `${pen.id},`;
                 if (this.store.data.pens[found].type === PenType.Node) {
                     this.divLayer.removeDiv(this.store.data.pens[found]);
                 }
@@ -1585,6 +1614,7 @@ var Topology = (function (_super) {
             }
             this.animateLayer.pens.delete(pen.id);
         }
+        if(dateIds) this.resetAssociateDateData(dateIds);
         if (!pens.length) {
             return;
         }
@@ -1592,6 +1622,17 @@ var Topology = (function (_super) {
         this.cache();
         this.dispatch('delete', pens);
     };
+    Topology.prototype.resetAssociateDateData = function (dateIds) {
+        // 重置关联日期数据的元件属性值
+        const pens = this.store.data.pens;
+        for (var i = 0, length = pens.length; i < length; ++i) {
+            const pen = pens[i];
+            if(pen.formData && dateIds.includes(pen.formData.dateId)){
+                pen.events = pen.events.filter((ev) => { return ev.type !== 4 });
+                pen.formData = null;
+            }
+        }
+    };
     Topology.prototype.delEmptyLines = function (deleteedId) {
         for (var i = 0; i < this.store.data.pens.length; i++) {
             if (this.store.data.pens[i].type !== PenType.Line) {
@@ -1738,16 +1779,18 @@ var Topology = (function (_super) {
         for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
             var pen = _a[_i];
             pen.data = [];
-            this.bindInfo(item, pen, dataType, index);
+            this.bindInfo(item, pen, dataType, index, exite);
             this.clipboard.pens.push(pen.clone());
         }
         if (exite == true) {
             this.paste();
         }
     };
-    Topology.prototype.bindInfo = async function (item, pen, type, index) {
+    Topology.prototype.bindInfo = async function (item, pen, type, index, exite) {
         const itemNode = item && item.default || item;
+        let bindName = '';
         if ([0, '0'].includes(type)) {
+            bindName = itemNode.tagName;
             const setTagId = setTagIdData(itemNode);
             pen.data.push(...setTagId);
             // 绑定悬浮文字
@@ -1756,9 +1799,11 @@ var Topology = (function (_super) {
             const setThreeCategory = setThreeCategoryIdData(pen, itemNode);
             pen.data.push(...setThreeCategory);
         } else if ([1, '1'].includes(type)) {
+            bindName = itemNode.kpiName;
             const setKpiAddr = setKpiAddrData(itemNode);
             pen.data.push(...setKpiAddr);
         } else if ([2, '2'].includes(type)) {
+            bindName = itemNode.name;
             const setAssetId = setAssetIdData(itemNode);
             pen.data.push(...setAssetId);
             // 绑定悬浮文字
@@ -1791,12 +1836,19 @@ var Topology = (function (_super) {
                 })
             }
         } else if ([3, '3'].includes(type)) {
+            bindName = itemNode.name;
             const setAreaId = setAreaIdData(itemNode);
             pen.data.push(...setAreaId);
         }else if ([4, '4'].includes(type)) {
+            bindName = itemNode.name;
             const setVarId = setVarValueData(itemNode);
             pen.data.push(...setVarId);
+        }else if ([5, '5'].includes(type)) {
+            bindName = itemNode.value;
+            const setBranch = setBranchAddressData(itemNode);
+            pen.data.push(...setBranch);
         }
+        if(typeof exite === 'boolean') pen.text = bindName;
         // if([0, 2, '0', '2'].includes(type)) {
         //     //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
         //     const setThreeCategory = setThreeCategoryIdData(pen, itemNode);

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

@@ -2,4 +2,5 @@ import { Node } from '../models';
 import { visualization2DStore } from '../store';
 export declare function setStyleForElementIdDiv(node: Node, elem: HTMLElement, data: visualization2DStore): void;
 export declare function createDiv(node: Node): HTMLDivElement;
-// export declare function loadJS(url: string, callback?: () => void, render?: boolean): void;
+// @ts-ignore
+export declare function loadJS(url: string): Promise;

package/core/src/element/common.js

@@ -2,13 +2,22 @@ import {Lock} from '../models';
 import {commonStore} from '../store';
 export function setStyleForElementIdDiv(node, elem, data) {
     if (!elem) return;
-    const store = commonStore[node.TID].data;
+    node.attribute = 'dom';
+    const currentStore = commonStore[node.TID];
+    if(!currentStore.elementInteractivePoor.dom) currentStore.elementInteractivePoor.dom = {};
+    currentStore.elementInteractivePoor.dom[node.id] = elem;
+    let width = node.rect.width;
+    let height = node.rect.height;
+    if(node.name === 'echarts') {
+        width /= currentStore.data.pageZoom;
+        height /= currentStore.data.pageZoom;
+    }
     elem.style.position = 'absolute';
     elem.style.outline = 'none';
     elem.style.left = node.rect.x + 'px';
     elem.style.top = node.rect.y + 'px';
-    elem.style.width = node.rect.width / store.pageZoom + 'px';
-    elem.style.height = node.rect.height / store.pageZoom + 'px';
+    elem.style.width = width + 'px';
+    elem.style.height = height + 'px';
     if (node.rotate || node.offsetRotate) {
         elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
     }
@@ -35,20 +44,20 @@ export function createDiv(node) {
     return div;
 }
 
-// export function loadJS(url, callback, render) {
-//     var loaderScript = document.createElement('script');
-//     loaderScript.type = 'text/javascript';
-//     loaderScript.src = url;
-//     loaderScript.addEventListener('load', function () {
-//         if (callback) {
-//             callback();
-//         }
-//         // how to do
-//         if (render) {
-//             Store.set('LT:render', true);
-//         }
-//     });
-//     document.body.appendChild(loaderScript);
-// }
+export function loadJS(url) {
+    var loaderScript = document.createElement('script');
+    loaderScript.type = 'text/javascript';
+    loaderScript.src = url;
+    document.body.appendChild(loaderScript);
+    window.datePickerRegister = true;
+    return new Promise((resolve, reject) => {
+        loaderScript.onload = function () {
+            resolve(true);
+        };
+        loaderScript.onerror = (e) => {
+            reject(e);
+        };
+    });
+}
 
 //# sourceMappingURL=dom.js.map

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

@@ -0,0 +1,3 @@
+import { Node } from '../models';
+export declare function createDatePickerElement(node: Node): HTMLElement;
+export declare function setDataPickerElementStyle(node: Node): void;