dcim-topology2d 2.0.7 → 2.1.0

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

@@ -5,8 +5,9 @@ import {echartsColorData} from "../../../static";
  * @param option 图表配置数据
  * @param params 绑定的图表参数
  * @param data 实时图表数据
+ * @param appearance 配置参数
  */
-export function lineBarDataAuto(option, params, data) {
+export function lineBarDataAuto(option, params, data, appearance) {
     const seriesNodes = option.series;
     if(data && data.XData) option.xAxis[0].data = data.XData;
     if(!(data && data.seriesData && data.seriesData.length)) return;
@@ -17,33 +18,52 @@ export function lineBarDataAuto(option, params, data) {
         if(realSeriesNode.name) seriesNodes[0].name = realSeriesNode.name;
         return;
     }
-    if(seriesNodes.length > 1 || params && params.curveNum > 1){
-        // 双曲线|柱状
-        const legendData = [];
-        let legendChange = false;
-        seriesNodes.map((item, index) => {
-            const seriesItem = data.seriesData[index];
-            item.data = seriesItem ? seriesItem.data : [];
-            // 获取角标数据
-            if(seriesItem && seriesItem.name) {
-                item.name = seriesItem.name;
-                legendData.push(seriesItem.name);
-                legendChange = true;
-            }
-        });
-        if(option.legend && legendChange) option.legend.data = legendData; // 为角标数据赋值
-    }else{
-        if(!data.seriesData.length) return;
-        let seriesData = [];
-        for (let i = 0; i < data.seriesData.length; i++){
-            const realSeriesNode = data.seriesData[i];
-            const currSeriesNode = seriesNodes[i] ? seriesNodes[i] : JSON.parse(JSON.stringify(seriesNodes[0]));
-            if(realSeriesNode.name) currSeriesNode.name = realSeriesNode.name;
-            currSeriesNode.data = realSeriesNode.data;
-            seriesData.push(currSeriesNode);
+    const realSeriesData = data.seriesData;
+    // 双轴曲线间距配置
+    if(option.yAxis.length > 1 && appearance.yAxisValueAuto) {
+        if(!appearance.yAxisMaxIntervalue) appearance.yAxisMaxIntervalue = 1;
+        // 双轴曲线，且曲线值为自适应
+        const dataGroup = {
+            data1: realSeriesData[0] && realSeriesData[0].data || [],
+            data2: realSeriesData[1] && realSeriesData[1].data || []
+        };
+        const newData = [...dataGroup.data1, ...dataGroup.data2];
+        let min = Math.min(...newData);
+        let max = Math.max(...newData);
+        const power = Math.floor(Math.log10(min));
+        for (let i = 0; i < option.yAxis.length; i++) {
+            const currentData = dataGroup[`data${i + 1}`];
+            if(min < 0 && Math.max(...currentData) < max) max *= appearance.yAxisMaxIntervalue;
+            if(min > 0 && Math.max(...currentData) < max) min = Math.pow(10, power);
+            option.yAxis[i].min = Math.ceil(min);
+            option.yAxis[i].max = Math.ceil(max);
+        }
+    }
+    let legendChange = false;
+    let seriesData = [];
+    const legendData = [];
+    for (let i = 0; i < realSeriesData.length; i++){
+        const realSeriesNode = realSeriesData[i];
+        let currSeriesNode = {};
+        const seriesItem = seriesNodes[i];
+        if(seriesItem) {
+            currSeriesNode = seriesItem;
+        }else {
+            const newSeriesItem = JSON.parse(JSON.stringify(seriesNodes[0]));
+            newSeriesItem.itemStyle.normal.lineStyle.color = echartsColorData[i];
+            newSeriesItem.itemStyle.normal.color = echartsColorData[i];
+            currSeriesNode = newSeriesItem;
+        }
+        if(realSeriesNode.name) {
+            currSeriesNode.name = realSeriesNode.name;
+            legendData.push(realSeriesNode.name);
+            legendChange = true;
         }
-        option.series = seriesData;
+        currSeriesNode.data = realSeriesNode.data;
+        seriesData.push(currSeriesNode);
     }
+    if(option.legend && legendChange) option.legend.data = legendData; // 为角标数据赋值
+    option.series = seriesData;
 }
 
 export function barPileStaticDataAuto(option, data, appearance) {
@@ -53,7 +73,7 @@ export function barPileStaticDataAuto(option, data, appearance) {
     option.series[0].data = seriesData;
     const data2 = [];
     for (let i = 0; i < seriesData.length; i++) {
-        const dr = appearance.total[i] - Number(seriesData[i]);
+        const dr = appearance.total[i] ? appearance.total[i].value - Number(seriesData[i]) : data.seriesData[1].data[i];
         data2.push(dr);
     }
     option.series[1].data = data2;

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

@@ -0,0 +1,3 @@
+export declare function getPie3D(internalDiameterRatio: Number, type: String, appearance: {}, labelLineData: any, realData: any): {};
+export declare function getParametricEquation(startRatio: Number, endRatio: Number, isSelected: Boolean, isHovered: Boolean, k: any, h: Number): {};
+export declare function set3DPieMouseHover(myChart: object, type: String, option: {}, valueData: any): void;

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/canvas.js

@@ -62,9 +62,10 @@ var Canvas = /** @class */ (function (_super) {
         }
         this.canvas.style.width = this.width + 'px';
         this.canvas.style.height = this.height + 'px';
-        this.canvas.width = (this.width * Canvas.dpiRatio) | 0;
-        this.canvas.height = (this.height * Canvas.dpiRatio) | 0;
-        this.canvas.getContext('2d').scale(Canvas.dpiRatio, Canvas.dpiRatio);
+        const dpr = window.devicePixelRatio || 1;
+        this.canvas.width = (this.width * dpr) | 0;
+        this.canvas.height = (this.height * dpr) | 0;
+        this.canvas.getContext('2d').scale(dpr, dpr);
         Store.set(this.generateStoreKey('LT:size'), { width: this.canvas.width, height: this.canvas.height });
     };
     Canvas.prototype.render = function () {

package/core/src/common.js

@@ -14,12 +14,10 @@ import {
     setInitConfData,
     getParams,
     tabHideShowOperation,
-    tabStaticOperation,
-    echartsStaticType
+    tabStaticOperation
 } from './utils';
 import {useStore, clearStore, commonStore} from './store'
 import * as mqtt from './mqtt.min';
-import {setElementSwitchTabState} from './element';
 var MoveInType;
 (function (MoveInType) {
     MoveInType[MoveInType["None"] = 0] = "None";
@@ -188,6 +186,7 @@ var Common = /** @class */ (function () {
         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];
@@ -221,6 +220,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;
@@ -250,8 +256,8 @@ 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') {
+        // topology编辑器下跳出程序
+        if(this.store.options.type !== 'topology') {
             const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
             const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
             this.store.data.pageZoom = zoom;
@@ -259,7 +265,7 @@ var Common = /** @class */ (function () {
             this.store.parentElem.style.transformOrigin = '0 0';
             this.store.parentElem.parentElement.style.overflow = 'hidden';
             Store.set('PAGE:zoom', zoom);
-        };
+        }
         this.store.data.pens = [];
         this.openCount = 0
         const type = this.store.options.type;
@@ -487,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;
@@ -504,7 +510,7 @@ var Common = /** @class */ (function () {
             }
             penNode.activeImgeIndex = isActive;
             tabIndex++;
-            if(staticType === 'SH') tabHideShowOperation(switchNode, tabAreaData); // 对显示隐藏的功能进行交互处理
+            if(staticType === 'SH') tabHideShowOperation(switchNode, tabAreaData, isActive); // 对显示隐藏的功能进行交互处理
         }
         // 对绑定的图表进行数据处理
         tabStaticOperation(staticType, node, tabAreaData, visitParams);
@@ -700,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') {

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,14 @@ 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 ? nodes : this.activeLayer.pens;
+        }
         for (var i = 0; i < deleteNodes.length; i++) {
             var pen = deleteNodes[i];
             if (!force && pen.locked) {
@@ -1738,16 +1765,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 +1785,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 +1822,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;