dcim-topology2d 1.0.1

package/core/src/common.js

@@ -0,0 +1,1254 @@
+import {Store} from 'le5le-store';
+import {DivLayer} from './divLayer';
+import {AnimateLayer} from './animateLayer';
+import {RenderLayer} from './renderLayer';
+import {Offscreen} from './offscreen';
+import {Socket} from './socket';
+import {Line, Node, Pen, Point, TopologyData, EventAction} from './models';
+import {setConfItemNode} from './healps';
+import {s8, formatPadding, getRect, previewType} from './utils';
+import {DefalutOptions} from './options';
+import {POLL} from './poll';
+import axios from 'axios';
+import * as mqtt from './mqtt.min';
+
+var MoveInType;
+(function (MoveInType) {
+    MoveInType[MoveInType["None"] = 0] = "None";
+    MoveInType[MoveInType["Line"] = 1] = "Line";
+    MoveInType[MoveInType["LineMove"] = 2] = "LineMove";
+    MoveInType[MoveInType["LineFrom"] = 3] = "LineFrom";
+    MoveInType[MoveInType["LineTo"] = 4] = "LineTo";
+    MoveInType[MoveInType["LineControlPoint"] = 5] = "LineControlPoint";
+    MoveInType[MoveInType["Nodes"] = 6] = "Nodes";
+    MoveInType[MoveInType["ResizeCP"] = 7] = "ResizeCP";
+    MoveInType[MoveInType["HoverAnchors"] = 8] = "HoverAnchors";
+    MoveInType[MoveInType["Rotate"] = 9] = "Rotate";
+})(MoveInType || (MoveInType = {}));
+var Common = /** @class */ (function () {
+    function Common(parent, options) {
+        var _this = this;
+        _this.moveInType = MoveInType;
+        this.mouseDown = null;
+        if (typeof parent === 'string') {
+            this.parentElem = document.getElementById(parent);
+        } else {
+            this.parentElem = parent;
+        }
+        if (!options) {
+            options = {};
+        }
+        this.parentElem.style.position = 'relative';
+        this.parentElem.style.overflow = 'auto';
+        var font = Object.assign({}, DefalutOptions.font, options.font);
+        options.font = font;
+        this.options = Object.assign({}, DefalutOptions, options);
+        this.data = new TopologyData();
+        this.id = s8();
+        Store.set(this.generateStoreKey('topology-data'), this.data);
+        var id = this.id;
+        this.animateLayer = new AnimateLayer(this.options, id);
+        this.offscreen = new Offscreen(this.parentElem, this.options, id);
+        this.canvas = new RenderLayer(this.parentElem, this.options, id);
+        this.divLayer = new DivLayer(this.parentElem, this.options, id);
+        this.divLayer.canvas.tabIndex = 0;
+        this.divLayer.canvas.ondblclick = this.ondblclick;
+        this.divLayer.canvas.onblur = function () {
+            _this.mouseDown = null;
+        };
+        this.subcribe = Store.subscribe(this.generateStoreKey('LT:render'), function () {
+            _this.render();
+        });
+        this.subcribeRender = Store.subscribe('LT:render', function () {
+            _this.render();
+        });
+        this.subcribeImage = Store.subscribe(this.generateStoreKey('LT:imageLoaded'), function () {
+            if (_this.imageTimer) {
+                clearTimeout(_this.imageTimer);
+            }
+            _this.imageTimer = setTimeout(function () {
+                //_this.canvas.clearBkImg();
+                _this.render();
+            }, 100);
+        });
+        this.subcribeAnimateEnd = Store.subscribe(this.generateStoreKey('animateEnd'), function (e) {
+            if (!e) {
+                return;
+            }
+            switch (e.type) {
+                case 'node':
+                    _this.offscreen.render();
+                    break;
+            }
+            _this.divLayer.playNext(e.data.nextAnimate);
+            _this.dispatch('animateEnd', e);
+        });
+        this.subcribeTableData = Store.subscribe('SYNC:tableData', function (data) {
+            _this.subcribeSyncTableData(data);
+        });
+        this.ondblclick = function (e) {
+            var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
+            if (_this.moveIn.hoverNode) {
+                _this.dispatch('dblclick', _this.moveIn.hoverNode);
+                if (_this.moveIn.hoverNode
+                        .getTextRect()
+                        .hit(new Point(e.x - canvasPos.x, e.y - canvasPos.y))) {
+                    _this.showInput(_this.moveIn.hoverNode);
+                }
+                _this.moveIn.hoverNode.dblclick();
+            } else if (_this.moveIn.hoverLine) {
+                _this.dispatch('dblclick', _this.moveIn.hoverLine);
+                if (!_this.moveIn.hoverLine.text ||
+                        _this.moveIn.hoverLine
+                                .getTextRect()
+                                .hit(new Point(e.x - canvasPos.x, e.y - canvasPos.y))) {
+                    _this.showInput(_this.moveIn.hoverLine);
+                }
+                _this.moveIn.hoverLine.dblclick();
+            }
+        };
+        this.openCount = 0;
+        this.timmerByTopology = null;
+        this.ratioCord = null;
+        this.lastTranlated = {x: 0, y: 0};
+        this.moveIn = {
+            type: 'None',
+            order: 0,
+            activeAnchorIndex: 0,
+            hoverAnchorIndex: 0,
+            hoverNode: null,
+            hoverLine: null,
+            activeNode: null,
+            lineControlPoint: null,
+            eventNode: null
+        };
+        this.initType = ''; // 初始化类型
+        this.pathRewrite = '';
+        this.initData = null; // 初始化数据
+        this.tagParams = {}; // 数据属性的集合，对应不同的事件类型
+        this.assetPoperties = {}; // 固定的资产详情的集合
+        this.isExistAssetKey = false; // 是否存在固定的资产详情
+        this.pollTime = { // 轮询的方式的定时器
+            Poll: null,
+            Poll1: null,
+            Poll2: null,
+        };
+        this.tip = '';
+        this.rendering = false;
+        this.isFullScreen = false;
+        this.socket = null;
+        this.inputObj = null;
+        this.input = document.createElement('textarea');
+        this.input.style.position = 'absolute';
+        this.input.style.zIndex = '-1';
+        this.input.style.left = '-1000px';
+        this.input.style.width = '0';
+        this.input.style.height = '0';
+        this.input.style.outline = 'none';
+        this.input.style.border = '1px solid #cdcdcd';
+        this.input.style.resize = 'none';
+        this.parentElem.appendChild(this.input);
+        this.paginationPageListBox = document.createElement('ul');
+        this.pagenationPageInput = document.createElement('input');
+        this.tablePaginationPageStyle();
+        this.parentElem.appendChild(this.paginationPageListBox);
+        // 列表数据选取
+        this.paginationPageListNode = function (ev) {
+            const node = _this.moveIn.activeNode;
+            node.paginationData.pageSize = ev.target.getAttribute('data-size');
+            node.paginationData.pageListLocal.hide = false;
+            node.paginationData.pageNumber = 1;
+            _this.paginationPageListBox.style.display = 'none';
+            _this.dispatch('node', node);
+            _this.render();
+        };
+        this.pagenationPageInputNode = function (ev) {
+            if (!ev.target.value) return
+            const node = _this.moveIn.activeNode;
+            node.paginationData.pageNumber = ev.target.value;
+            _this.pagenationPageInput.style.display = 'none';
+            _this.dispatch('node', node);
+            _this.render();
+        };
+        this.createMarkdownTip();
+        window.topology = this;
+    }
+
+    Common.prototype.conversionData = function (obj) {
+        this.parentElem.scrollLeft = 0;
+        this.parentElem.scrollTop = 0;
+        this.canvas.clearBkImg();
+        this.divLayer.clear();
+        let data = JSON.parse(JSON.stringify(obj));
+        if (!data) {
+            data = {pens: []};
+        }
+        Object.assign(this.data, data);
+        this.setBKImageRect();
+        this.ratioCord = {
+            ratio: 1,
+            scaleX: 1,
+            scaleY: 1
+        };
+        this.openCount = 0
+        this.data.pens = [];
+        // for old data.
+        if (data.nodes) {
+            for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
+                var item = new Node(_a[_i]);
+                this.data.pens.push(item);
+                this.setSwitchTabData(item, _i);
+            }
+            for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
+                var item = _c[_b];
+                this.data.pens.push(new Line(item));
+            }
+        }
+        // end.
+        if (data.pens) {
+            for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
+                var item = _e[_d];
+                if (!item.from) {
+                    var node = new Node(item);
+                    this.data.pens.push(node);
+                    this.setSwitchTabData(node, _d);
+                } else {
+                    this.data.pens.push(new Line(item));
+                }
+            }
+        }
+    };
+    Common.prototype.setBKImageRect = function () {
+        if (this.data.bkImageRect) {
+            this.data.bkImageRect.x = this.data.bkImageRect.x ? Number(this.data.bkImageRect.x) : 0;
+            this.data.bkImageRect.y = this.data.bkImageRect.y ? Number(this.data.bkImageRect.y) : 0;
+            this.data.bkImageRect.width = this.data.bkImageRect.width ? Number(this.data.bkImageRect.width) : this.canvas.width;
+            this.data.bkImageRect.height = this.data.bkImageRect.height ? Number(this.data.bkImageRect.height) : this.canvas.height;
+            this.data.bkImageRect.center = {
+                x: this.data.bkImageRect.x + this.data.bkImageRect.width / 2,
+                y: this.data.bkImageRect.y + this.data.bkImageRect.height / 2
+            }
+        }
+    };
+    Common.prototype.setSwitchTabData = function (node, index, type) {
+        if (type) {
+            let topologyChangeData = Store.get('TCD:topologyChangeData');
+            if (topologyChangeData) {
+                const switchTabData = node.tags.find((t) => {
+                    return t.includes('switchTabType');
+                });
+                const switchTabTypeData = topologyChangeData[`${switchTabData}Data`];
+                if (switchTabTypeData) {
+                    delete switchTabTypeData[node.id];
+                    for (let switchNode of Object.values(switchTabTypeData)) {
+                        if (switchNode.tagOrder > index) switchNode.tagOrder--;
+                    }
+                }
+            }
+            return;
+        }
+        if (node.tags && node.tags.length > 0) {
+            const tagTypeData = node.tags.find((t) => {
+                return t === 'statisticType' || t.includes('switchTabType');
+            });
+            if (tagTypeData) {
+                node.tagOrder = index;
+                let topologyChangeData = Store.get('TCD:topologyChangeData');
+                if (!topologyChangeData) topologyChangeData = {};
+                if (!topologyChangeData[`${tagTypeData}Data`]) topologyChangeData[`${tagTypeData}Data`] = {};
+                topologyChangeData[`${tagTypeData}Data`][node.id] = node;
+                Store.set('TCD:topologyChangeData', topologyChangeData);
+            }
+        }
+    };
+    Common.prototype.canvasResize = function (size) {
+        this.canvas.resize(size);
+        //this.canvas.bkImgRectResize(size);
+        this.offscreen.resize(size);
+        this.divLayer.resize(size);
+    };
+    // Render or redraw
+    Common.prototype.render = function (noFocus) {
+        if (this.rendering) {
+            return this;
+        }
+        this.rendering = true;
+        this.offscreen.render();
+        this.canvas.render();
+        this.rendering = false;
+    };
+    Common.prototype.generateStoreKey = function (key) {
+        return this.id + "-" + key;
+    };
+    Common.prototype.tablePaginationPageStyle = function () {
+        this.paginationPageListBox.style.position = 'absolute';
+        this.paginationPageListBox.style.width = 120 + 'px';
+        this.paginationPageListBox.style.display = 'none';
+        this.paginationPageListBox.style.padding = 0;
+        this.paginationPageListBox.style.boxShadow = '0 0 3px rgba(86,96,117,.3)';
+        this.paginationPageListBox.style.zIndex = 1;
+        this.paginationPageListBox.setAttribute('id', 'paginationPageList');
+        this.pagenationPageInput.style.position = 'absolute';
+        this.pagenationPageInput.style.width = 50 + 'px';
+        this.pagenationPageInput.style.padding = '0 5px';
+        this.pagenationPageInput.style.textAlign = 'center';
+        this.pagenationPageInput.style.color = '#fff';
+        this.pagenationPageInput.style.border = 'none';
+        this.pagenationPageInput.style.background = '#091229';
+        this.pagenationPageInput.style.display = 'none';
+        this.pagenationPageInput.style.zIndex = 1;
+        this.pagenationPageInput.setAttribute('id', 'pagenationPageInput');
+    };
+    // 监听表格数据变化
+    Common.prototype.subcribeSyncTableData = function (data) {
+        const {tableNodes, paginationNodes} = Store.get('FORM:tableData').data;
+        if (data && Object.keys(tableNodes).length > 0) {
+            const updateNodes = [];
+            for (let key of Object.keys(data)) {
+                const tnode = tableNodes[key];
+                const pageId = tnode.formData.bindPaginationId;
+                paginationNodes[pageId].paginationData.total = data[key].total;
+                paginationNodes[pageId].rect.width = tnode.rect.width;
+                updateNodes.push(tnode);
+                if (pageId) updateNodes.push(paginationNodes[pageId]);
+                // this.updateProps(updateNodes);
+                this.render();
+            }
+        }
+    };
+    // 上下翻页
+    Common.prototype.paginationPrevNextPage = function (node, val) {
+        const pageSize = Math.ceil(node.paginationData.total / node.paginationData.pageSize); // 分页总页码
+        let isChangePage = false;
+        if (val === 'prev' && node.paginationData.pageNumber > 1) {
+            node.paginationData.pageNumber--;
+            isChangePage = true;
+        }
+        if (val === 'next' && node.paginationData.pageNumber < pageSize) {
+            node.paginationData.pageNumber++;
+            node.paginationData.pageOrder++;
+            isChangePage = true;
+        }
+        if (!(val === 'prev' || val === 'next') && !(val === 'sl' || val === 'sr')) {
+            node.paginationData.pageNumber = val;
+            isChangePage = true;
+        }
+        if (isChangePage) {
+            //this.activeLayer.setPens([node]); // 更新节点数据
+            this.dispatch('node', node);
+        }
+    };
+    Common.prototype.pageListAndPageInputHide = function () {
+        if (this.paginationPageListBox) this.paginationPageListBox.style.display = 'none';
+        if (this.pagenationPageInput) this.pagenationPageInput.style.display = 'none';
+    };
+    Common.prototype.targetPageInputHandle = function (node, e) {
+        this.createPageInputEle(node);
+        console.log('targetPageInputHandle~~~~~~~~~~~~~~~~')
+        const targetPagex = node.paginationData.targetPageLocal.x;
+        const targetPagey = node.paginationData.targetPageLocal.y;
+        const isPageInputArea = e.offsetX >= targetPagex && e.offsetX <= targetPagex + 50;
+        this.pagenationPageInput.style.display = isPageInputArea ? 'block' : 'none';
+        this.pagenationPageInput.focus();
+        this.pagenationPageInput.addEventListener('blur', this.pagenationPageInputNode);
+    };
+    // 生成页码输入框
+    Common.prototype.createPageInputEle = function (node) {
+        this.pagenationPageInput.value = '';
+        this.pagenationPageInput.style.left = node.paginationData.targetPageLocal.x + 'px';
+        this.pagenationPageInput.style.top = node.paginationData.targetPageLocal.y + 'px';
+        this.pagenationPageInput.style.height = node.rect.height + 'px';
+        this.parentElem.appendChild(this.pagenationPageInput);
+    };
+    // 展开分页列表
+    Common.prototype.spreadPageListHandle = function (node, e) {
+        this.createPageListPanel(node); // 分页列表数据存在，创建列表
+        const px = node.paginationData.pageListLocal.px;
+        const py = node.paginationData.pageListLocal.py;
+        const isPageListArea = e.offsetX >= px && e.offsetX <= px + 120 && e.offsetY >= py - node.rect.height && e.offsetY <= py;
+        // 若点击的区域是分页列表区域
+        if (isPageListArea) {
+            const display = node.paginationData.pageListLocal.hide ? 'none' : 'block';
+            this.paginationPageListBox.style.display = display;
+            node.paginationData.pageListLocal.hide = !node.paginationData.pageListLocal.hide;
+        } else {
+            this.paginationPageListBox.style.display = 'none';
+            node.paginationData.pageListLocal.hide = false;
+        }
+    };
+    // 生成分页列表
+    Common.prototype.createPageListPanel = function (node) {
+        this.paginationPageListBox.innerHTML = '';
+        this.paginationPageListBox.style.left = node.paginationData.pageListLocal.x + 'px';
+        this.paginationPageListBox.style.top = node.paginationData.pageListLocal.y + 'px';
+        this.paginationPageListBox.style.height = node.rect.height * node.paginationData.pageList.length + 20 + 'px';
+        let createLi = '';
+        for (let i = 0; i < node.paginationData.pageList.length; i++) {
+            const text = node.paginationData.pageList[i];
+            createLi += `<li data-size="${text}" style="padding: 5px 10px;background-color: #284689;border-bottom: 1px solid #296fee;list-style: none;text-align: center;font-size: ${node.font.fontSize}px;color: ${node.font.color};cursor: pointer;">${text}条/页</li>`
+        }
+        this.paginationPageListBox.innerHTML = createLi;
+        this.paginationPageListBox.addEventListener('click', this.paginationPageListNode);
+    };
+    // 获取表格分页数据
+    Common.prototype.getSyncTableDataFromServer = async function (data, node) {
+        const path = this.pathRewrite ? this.pathRewrite + '/user/cockpit/mqtt-echart' : '/user/cockpit/mqtt-echart';
+        const ret = await axios.post(path, data);
+        //console.log('ret.data==========', ret, ret.data)
+        const tableData = {};
+        tableData[node.id] = {loading: true};
+        Store.set('SYNC:tableData', tableData);
+        if (ret.data && ret.data.data) {
+            console.log(ret.data.data)
+            tableData[node.id] = {
+                loading: false,
+                tableBody: ret.data.data.rows,
+                total: ret.data.data.total
+            }
+            Store.set('SYNC:tableData', tableData);
+            this.render();
+        }
+        if (ret.error) {
+            console.log('获取数据失败==================')
+        } else {
+            console.log('获取数据成功==================')
+        }
+
+    };
+    Common.prototype.switchStaticsCheckType = function (node, staticTypeNode) {
+        // 点击切换统计图统计类别
+        const switchTabData = node.tags.find((t) => {
+            return t.includes('switchTabType');
+        }); // 获取按钮组类型
+        if(!switchTabData) return;
+        const topologyChangeData = Store.get('TCD:topologyChangeData'); // 获取所有按钮组和按类型统计图组数据
+        const changeNode = topologyChangeData[`${switchTabData}Data`]; // 分别获取按钮组数据
+        // 如果存在按钮组节点数据
+        if (changeNode[node.id]) {
+            for (let switchNode of Object.values(changeNode)) {
+                if (this.data.pens[switchNode.tagOrder]) {
+                    this.data.pens[switchNode.tagOrder].activeImgeIndex = switchNode.id !== node.id;
+                }
+            }
+        }
+        if (node.bindStaticId) {
+            const statisticTypeData = topologyChangeData.statisticTypeData;
+            if(!statisticTypeData) return;
+            const findCurentEchart = statisticTypeData[node.bindStaticId]; // 获取当前点中的节点绑定的统计图表数据
+            if (findCurentEchart && findCurentEchart.data.params) {
+                findCurentEchart.data.params['staticForType'] = staticTypeNode.dcimStaticForType; // 统计类型赋值
+                const mqttSyncData = Store.get('mqtt:responseData');
+                if (mqttSyncData) setConfItemNode(findCurentEchart, mqttSyncData);
+            }
+        }
+        this.render();
+    };
+    Common.prototype.s8 = function () {
+        return s8()
+    };
+    Common.prototype.openSocket = function (url) {
+        this.closeSocket();
+        if (url || this.data.websocket) {
+            this.socket = new Socket(url || this.data.websocket, this.data);
+        }
+    };
+    Common.prototype.closeSocket = function () {
+        if (this.socket) {
+            this.socket.close();
+        }
+    };
+    Common.prototype.openMqtt = function (url, options) {
+        this.closeMqtt();
+        if (url || this.data.mqttUrl) {
+            url = url || this.data.mqttUrl;
+            const mqttTopics = this.initData && this.initData.mqttTopics ? this.initData.mqttTopics : this.data.mqttTopics;
+            options = options || this.data.mqttOptions
+            let topics = mqttTopics
+            this.isEnd = false;
+            // let num = 0; // 记录推送的次数，用于判单丢失情况
+            this.mqttClient = mqtt.connect(url, options);
+            var _this = this;
+            this.mqttClient.on('message', function (topic, message) {
+                //console.log('openMqtt11===================', topic, message)
+                if (!_this.data.pens.length || !topic || topic != _this.data.mqttTopics) {
+                    return;
+                }
+                if (!this.isEnd) {
+                    _this.doMqttDrow(message.toString())
+                }
+            });
+            if (topics) {
+                this.mqttClient.subscribe(topics.split(','));
+            }
+        }
+    };
+    Common.prototype.openPoll = function (message, val) {
+        if (message) {
+            this.poll = new POLL(this.data, message, val);
+        }
+    };
+    Common.prototype.clearInterValAll = function () {
+        clearTimeout(this.timmerByTopology);
+        this.timmerByTopology = null;
+    };
+    Common.prototype.closeMqtt = function () {
+        if (this.mqttClient) {
+            this.isEnd = true
+            this.mqttClient.end();
+        }
+    };
+    Common.prototype.closePoll = function () {
+        for (let key in this.pollTime) {
+            clearInterval(this.pollTime[key])
+        }
+    };
+    Common.prototype.setNodeText = function () {
+        this.inputObj.text = this.input.value;
+        this.input.style.zIndex = '-1';
+        this.input.style.left = '-1000px';
+        this.input.style.width = '0';
+        this.offscreen.render();
+        this.dispatch('setText', this.inputObj);
+        this.inputObj = null;
+    };
+    Common.prototype.showInput = function (item) {
+        if (this.data.locked ||
+                item.locked ||
+                item.hideInput ||
+                this.options.hideInput) {
+            return;
+        }
+        this.inputObj = item;
+        var textRect = item.getTextRect();
+        this.input.value = item.text || '';
+        this.input.style.left = textRect.x + 'px';
+        this.input.style.top = textRect.y + 'px';
+        this.input.style.width = textRect.width + 'px';
+        this.input.style.height = textRect.height + 'px';
+        this.input.style.zIndex = '1000';
+        if (item.rotate / 360) {
+            this.input.style.transform = "rotate(" + item.rotate + "deg)";
+        } else {
+            this.input.style.transform = null;
+        }
+        this.input.focus();
+    };
+    Common.prototype.getRect = function (pens) {
+        if (!this.data) return;
+        if (!pens) {
+            pens = this.data.pens;
+        }
+        return getRect(pens);
+    };
+    Common.prototype.animate = function (autoplay) {
+        if (autoplay === void 0) {
+            autoplay = false;
+        }
+        this.animateLayer.readyPlay(null, autoplay);
+        this.animateLayer.animate();
+    };
+    Common.prototype.translate = function (x, y, process) {
+        if (!process) {
+            this.lastTranlated.x = 0;
+            this.lastTranlated.y = 0;
+        }
+        var offsetX = x - this.lastTranlated.x;
+        var offsetY = y - this.lastTranlated.y;
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+            var item = _a[_i];
+            item.translate(offsetX, offsetY);
+        }
+        this.animateLayer.pens.forEach(function (pen) {
+            if (pen instanceof Line) {
+                pen.translate(offsetX, offsetY);
+            }
+        });
+        this.lastTranlated.x = x;
+        this.lastTranlated.y = y;
+    };
+    Common.prototype.centerView = function (padding) {
+        if (!this.hasView())
+            return;
+        var rect = this.getRect();
+        var viewCenter = this.getViewCenter(padding);
+        var center = rect.center;
+        this.translate(viewCenter.x - center.x, viewCenter.y - center.y);
+        var parentElem = this.canvas.parentElem;
+        var x = (parentElem.scrollWidth - parentElem.offsetWidth) / 2;
+        var y = (parentElem.scrollHeight - parentElem.offsetHeight) / 2;
+        parentElem.scrollTo(x, y);
+        return true;
+    };
+    Common.prototype.hasView = function () {
+        var rect = this.getRect();
+        return !(rect.width === 99999 || rect.height === 99999);
+    };
+    Common.prototype.getViewCenter = function (viewPadding) {
+        var padding = formatPadding(viewPadding || this.options.viewPadding);
+        var _a = this.canvas, width = _a.width, height = _a.height;
+        return {
+            x: (width - padding[1] - padding[3]) / 2 + padding[3],
+            y: (height - padding[0] - padding[2]) / 2 + padding[0],
+        };
+    };
+    Common.prototype.createMarkdownTip = function () {
+        this.tipMarkdown = document.createElement('div');
+        this.tipMarkdown.style.position = 'fixed';
+        this.tipMarkdown.style.zIndex = '-1';
+        this.tipMarkdown.style.left = '-9999px';
+        this.tipMarkdown.style.width = 'auto';
+        this.tipMarkdown.style.outline = 'none';
+        this.tipMarkdown.style.border = '1px solid #646464';
+        this.tipMarkdown.style.backgroundColor = '#646464';
+        this.tipMarkdown.style.color = '#fff';
+        this.tipMarkdown.style.padding = '6px 10px';
+        // this.tipMarkdown.style.overflowY = 'auto';
+        this.tipMarkdown.style.minHeight = '30px';
+        this.tipMarkdown.style.maxHeight = '260px';
+        this.tipMarkdown.style.borderRadius = '6px';
+        this.tipMarkdown.style.whiteSpace = 'nowrap';
+        this.tipMarkdown.id = 'tipMarkdownBytopo'
+        document.body.appendChild(this.tipMarkdown);
+    };
+    Common.prototype.showTip = function (data, pos) {
+        if (!data ||
+                (!data.markdown && !data.tipId && !data.title) || !data.title ||
+                data.id === this.tip) {
+            return;
+        }
+        data.markdown = data.title
+        if (data.tipId) {
+            this.tipElem = document.getElementById(data.tipId);
+        }
+        var elem = this.tipElem;
+        if (data.markdown) {
+            elem = this.tipMarkdown;
+            var marked = window.marked;
+            if (marked) {
+                this.tipMarkdown.innerHTML = marked(data.markdown);
+            } else {
+                this.tipMarkdown.innerHTML = data.markdown;
+            }
+            var a = this.tipMarkdown.getElementsByTagName('A');
+            for (var i = 0; i < a.length; ++i) {
+                a[i].setAttribute('target', '_blank');
+            }
+        }
+        // 计算悬浮框文字的长度
+        var count = 0;
+        var str = data.markdown;
+        let strLength = str.length;
+        let dataRect = data.rect;
+        for (var i = 0; i < strLength; i++) {
+            if (str.charCodeAt(i) <= 255) {
+                count++;
+            } else {
+                count += 2;
+            }
+        }
+        var tipMarkdownMarginLeft = count * 3 + 11
+
+        var parentRect = this.parentElem.getBoundingClientRect();
+        var elemRect = elem.getBoundingClientRect();
+        var x = parentRect.left + dataRect.x;
+        var y = pos.y + parentRect.top;
+        if (data instanceof Node) {
+            x = x + dataRect.width / 2 - tipMarkdownMarginLeft
+            y = parentRect.top + dataRect.ey - dataRect.height - 46
+        }
+        x -= this.parentElem.scrollLeft;
+        y -= this.parentElem.scrollTop;
+        if (x < 0) {
+            x = 0;
+        }
+        if (x + elemRect.width > document.body.clientWidth) {
+            x = document.body.clientWidth - elemRect.width;
+        }
+        if (y + elemRect.height > document.body.clientHeight) {
+            y = document.body.clientHeight - elemRect.height;
+        }
+        elem.style.position = 'fixed';
+        elem.style.left = x + 'px';
+        elem.style.top = y + 'px';
+        elem.style.zIndex = '3000';
+        this.tip = data.id;
+        this.dispatch('tip', elem);
+    };
+    Common.prototype.hideTip = function () {
+        if (!this.tip) {
+            return;
+        }
+        this.tipMarkdown.style.left = '-9999px';
+        this.tipMarkdown.style.zIndex = '-1';
+        if (this.tipElem) {
+            this.tipElem.style.left = '-9999px';
+            this.tipElem.style.zIndex = '-1';
+            this.tipElem = null;
+        }
+        this.divLayer.canvas.title = '';
+        this.tip = '';
+    };
+    Common.prototype.dispatch = function (event, data) {
+        if (this.options.on) {
+            this.options.on(event, data);
+        }
+        if (event === 'node' && data.name == 'tablePagination' && this.options.type !== 'topology') {
+            const tableNodes = Store.get('FORM:tableData').data.tableNodes[data.paginationData.bindFromTableId];
+            const pageSize = data.paginationData.pageSize;
+            const offset = (parseInt(data.paginationData.pageNumber) - 1) * pageSize;
+            const params = {
+                id: tableNodes.id, // 表格ID
+                limit: data.paginationData.pageSize,
+                offset: offset
+            };
+            this.getSyncTableDataFromServer(params, tableNodes);
+        }
+    };
+    Common.prototype.onContent = async function (resetDCIM, data, type) {
+        //this.shareComponentData = data.shareComponent // 共享组件数据
+        if (resetDCIM) {
+            if (resetDCIM.pathRewrite != '') {
+                this.pathRewrite = resetDCIM.pathRewrite // 路径重写
+            }
+            if (resetDCIM.mqttUrl) {
+                data.mqttUrl = resetDCIM.mqttUrl
+                data.mqttOptions.username = resetDCIM.mqttUsername
+                data.mqttOptions.password = resetDCIM.mqttPassword
+            }
+        }
+        this.initType = type
+        this.initData = data
+        const canvasData = data ? data : this.data
+        //this.topologyDetailData = initData
+        const url = canvasData.mqttUrl
+        // if(url && url.indexOf('://') > -1){
+        this.onContentForEventType('Mqtt')
+        // }
+        if (canvasData.pollUrl) {
+            this.onContentForEventType('Poll')
+        }
+        if (canvasData.pollUrl1) {
+            this.onContentForEventType('Poll1')
+        }
+        if (canvasData.pollUrl2) {
+            this.onContentForEventType('Poll2')
+        }
+    };
+    Common.prototype.onContentForEventType = async function (eventType) {
+        // 获取属性中数据的集合
+        if (!this.initType) await this.initTagParams(eventType);
+        let tagParams = this.tagParams[eventType]
+        if (eventType === 'Mqtt') {
+            // 连接测试，MQTT
+            this.onMqttContent(tagParams)
+        } else if (eventType.indexOf('Poll') > -1) {
+            // 连接测试，轮询地址
+            this.onPollContent(tagParams, eventType)
+        }
+    };
+    Common.prototype.clearTagParams = function (eventType) {
+        this.tagParams[eventType] = {};
+        this.tagParams[eventType].tagIds = [];
+        this.tagParams[eventType].kpiAddrs = [];
+        this.tagParams[eventType].tagEcharts = [];
+        this.tagParams[eventType].assetIds = [];
+        this.tagParams[eventType].areaIds = [];
+        // this.tagParams[eventType].cockpitLayoutData = [];//统计图表组件类型ID
+        this.tagParams[eventType].echartData = [];//统计图表组件类型ID
+    };
+    Common.prototype.initTagParams = async function (eventType) {
+        this.clearTagParams(eventType)
+        const pensData = this.data.pens
+        let tagParams = this.getTagParams(pensData, eventType);
+        // 详情页面，即URL配置了资产id的页面
+        let assetId = this.getUrlParams('assetId')
+        // console.log('详情页面，即URL配置了资产id的页面',assetId,eventType, tagParams)
+        if (assetId && eventType === 'Mqtt') {
+            //if(assetId){
+            // 获取属性中绑定指标数据的集合
+            await this.getTagParamsForKpiAddrs(assetId, tagParams)
+            // 存在固定的资产详情，更新页面数据
+            // if(this.assetPoperties && this.isExistAssetKey === true){
+            if (this.assetPoperties) {
+                // 更新画布上固定的资产详情对应的值
+                //const canvasPens = this.pathRewrite ? canvasData.pens : this.canvas.data.pens
+                this.renderForAssetPoperties(this.canvas.data.pens);
+            }
+        }
+    };
+    Common.prototype.getTagParams = function (pens, eventType) {
+        const _this = this;
+        pens.forEach((pen) => {
+            if (pen.children != undefined && pen.children.length > 0) {
+                _this.getTagParams(pen.children, eventType)
+            } else {
+                _this.getTagParamsChildren(pen, eventType)
+            }
+        })
+        return this.tagParams[eventType]
+    };
+    Common.prototype.getTagParamsChildren = function (pen, eventType) {
+        let tagIds = []
+        let kpiAddrs = []
+        let assetIds = []
+        let areaIds = []
+        let tagEcharts = []
+        // let cockpitLayoutData = []
+        let echartData = []
+        let isEventType = false;
+        for (var _b = 0, _c = pen.events; _b < _c.length; _b++) {
+            var event_1 = _c[_b];
+            if ((event_1.type === 3 && eventType === 'Mqtt') || (event_1.type === 4 && eventType === 'Poll')
+                    || (event_1.type === 5 && eventType === 'Poll1') || (event_1.type === 6 && eventType === 'Poll2')) {
+                isEventType = true;
+            }
+        }
+        if (isEventType === true) {
+            if (pen.data != undefined && this.checkType(pen.data) === 'Array' && pen.data.length > 0) {
+                pen.data.forEach((item) => {
+                    if (item.key === 'tagId') {
+                        tagIds.push(item.value)
+                    }
+                    if (item.key === 'kpiAddr') {
+                        kpiAddrs.push(item.value)
+                    }
+                    if (item.key === 'assetKey') {
+                        this.isExistAssetKey = true
+                    }
+                    if (item.key === 'assetId') {
+                        assetIds.push(item.value)
+                    }
+                    if (item.key === 'areaId') {
+                        areaIds.push(item.value)
+                    }
+                })
+            }
+                    // else if(pen.data != undefined && this.checkType(pen.data) === 'Object' && pen.tags != undefined && this.checkType(pen.tags) === 'Array' && pen.tags.length>0){
+                    //     pen.tags.forEach((item)=>{
+                    //         if( item.indexOf('echart') > -1){
+                    //             tagEcharts.push(item)
+                    //         }
+                    //     })
+            // }
+            else if (pen.data != undefined && this.checkType(pen.data) === 'Object' && this.checkType(pen.data.params) === 'Object') {
+
+                // pen.data.echarts && pen.data.echarts.option.series.length > 1 ? echartData.push(pen.data.params.id) : cockpitLayoutData.push(pen.data.params.id)
+                echartData.push(pen.data.params.id)
+
+            }
+            this.tagParams[eventType].tagIds = [...new Set(this.tagParams[eventType].tagIds.concat(tagIds))]
+            this.tagParams[eventType].kpiAddrs = [...new Set(this.tagParams[eventType].kpiAddrs.concat(kpiAddrs))]
+            this.tagParams[eventType].assetIds = [...new Set(this.tagParams[eventType].assetIds.concat(assetIds))]
+            this.tagParams[eventType].areaIds = [...new Set(this.tagParams[eventType].areaIds.concat(areaIds))]
+            this.tagParams[eventType].tagEcharts = [...new Set(this.tagParams[eventType].tagEcharts.concat(tagEcharts))]
+            // this.tagParams[eventType].cockpitLayoutData = [...new Set(this.tagParams[eventType].cockpitLayoutData.concat(cockpitLayoutData))]
+            this.tagParams[eventType].echartData = [...new Set(this.tagParams[eventType].echartData.concat(echartData))]
+        }
+    };
+    Common.prototype.getMqttData = async function (tagParams, panelData) {
+        let ret = {};
+        let data = {};
+        let path = '';
+        let assetData = null;
+        let pathRewrite = this.pathRewrite;
+        let canvasData = JSON.parse(JSON.stringify(this.canvas.data));
+        let mqttTopics = this.data.mqttTopics;
+        let tagParamsData = tagParams;
+        let detailJson = null;
+        Store.set('TIMEOUT:currentPage', `locationPath${this.s8()}`);
+        if (panelData) {
+            this.data.mqttTopics = mqttTopics
+            pathRewrite = panelData.pathRewrite;
+            canvasData = JSON.parse(JSON.stringify(panelData.data));
+            mqttTopics = panelData.mqttTopics;
+            if (panelData.assetId) {
+                const detailData = await this.getTagParamsForKpiAddrs(panelData.assetId, tagParams, pathRewrite);
+                if (detailData.data) {
+                    tagParamsData.tagIds = detailData.tagIds;
+                    assetData = detailData.data.asset;
+                    detailJson = detailData.data;
+                    tagParamsData.echartAssemblyData = detailJson.echartAssemblyData;
+                }
+            }
+        }
+        tagParamsData.locationPath = Store.get('TIMEOUT:currentPage');
+        if (!tagParams) {
+            data = this.theData
+            path = this.thePath
+        } else {
+            data = {
+                tagIds: tagParamsData.tagIds.join(","),
+                assetIds: tagParamsData.assetIds.join(","),
+                areaIds: tagParamsData.areaIds.join(","),
+                routingkey: mqttTopics,
+                echart: tagParamsData.tagEcharts.join(","),
+                echartData: tagParamsData.echartData
+            }
+            if (tagParamsData.echartAssemblyData) {
+                data.echartAssemblyData = tagParamsData.echartAssemblyData;
+            }
+            //const pathRewrite = panelData ? panelData.pathRewrite : this.pathRewrite
+            path = pathRewrite ? pathRewrite + '/user/cockpit/mqtt-data' : '/user/cockpit/mqtt-data'
+            this.thePath = path
+            this.theData = data
+        }
+        let drawedData = null
+        ret = await axios.post(path, data);
+        if (ret.data && ret.data.data) {
+            if (assetData) ret.data.data.asset = assetData
+            drawedData = this.mqttDataDrawing(canvasData, ret.data.data, detailJson)
+        }
+        this.clearInterValAll();
+        this.timmerByTopology = setTimeout(() => {
+            const locationPath = Store.get('TIMEOUT:currentPage');
+            if (locationPath === tagParamsData.locationPath) {
+                this.getMqttData(tagParamsData);
+            }
+        }, 180000); // 每3分钟定时请求，超过3分钟未收到MQTT将停止推送数据 180000
+        if (ret.error) {
+            return null;
+        } else {
+            return {
+                mqttData: drawedData,
+                detailData: detailJson
+            }
+        }
+    };
+    Common.prototype.mqttDataDrawing = function (data, retData, detailJson) {
+        const syncData = retData
+        const detailData = detailJson ? detailJson.data : [];
+        // console.log('收到消息', syncData)
+        Store.set('mqtt:responseData', syncData);
+        data.pens.map((item) => {
+            if (item.children != undefined) {
+                item.children.map((_item) => {
+                    item.defaultFillStyle = item.fillStyle;
+                    item.defaultFontColor = item.font.color;
+                    if (item.name === 'line') item.defaultLineColor = item.strokeStyle;
+                    if (!_item.data) return
+                    //const node = detailData.length > 0 ? detailData : syncData
+                    const functionData = _item.events.filter((ev) => {
+                        return ev.action === EventAction.Function
+                    })
+                    const dataValue = functionData[0]
+                    if (functionData.length > 0 && dataValue.value && retData) {
+                        _item.data.map((d) => {
+                            const {kpiData, tagData} = retData;
+                            const key = d.key;
+                            const value = d.value;
+                            const _syncItem = key === 'tagId' ? tagData[value] : kpiData[value];
+                            if ((key === 'tagId' || key === 'kpiAddr') && _syncItem) {
+                                const isControl = parseInt(_syncItem.isControlDis); // 是否可控，0可控，1不可控
+                                if (!isControl) {
+                                    d.tagVal = value
+                                    d.controlParams = _syncItem
+                                    // delete _syncItem[value]
+                                    // Object.assign(d, _syncItem)
+                                }
+                            }
+                        })
+                        //console.log('定制函数=====')
+                        console.log('定制函数------')
+                        const func = new Function('pen', 'params', dataValue.value)
+                        func(_item, JSON.stringify(retData))
+                    } else {
+                        // console.log('默认函数')
+                        setConfItemNode(_item, syncData);
+                    }
+                    this.machAnimateReset(item);
+                })
+            } else {
+                item.defaultFillStyle = item.fillStyle;
+                item.defaultFontColor = item.font.color;
+                if (item.name === 'line') item.defaultLineColor = item.strokeStyle;
+                if (!item.data) return
+                //const node = detailData.length > 0 ? detailData : syncData
+                const functionData = item.events.filter((ev) => {
+                    return ev.action === EventAction.Function
+                })
+                const dataValue = functionData[0]
+                if (functionData.length > 0 && dataValue.value && retData) {
+                    item.data.map((d) => {
+                        const {kpiData, tagData} = retData;
+                        const key = d.key;
+                        const value = d.value;
+                        const _syncItem = key === 'tagId' ? tagData[value] : kpiData[value];
+                        if ((key === 'tagId' || key === 'kpiAddr') && _syncItem) {
+                            const isControl = parseInt(_syncItem.isControlDis); // 是否可控，0可控，1不可控
+                            if (!isControl) {
+                                d.tagVal = value;
+                                d.controlParams = _syncItem;
+                                // delete _syncItem[value]
+                                // Object.assign(d, _syncItem)
+                            }
+                        }
+                    });
+                    const func = new Function('pen', 'params', dataValue.value);
+                    func(item, JSON.stringify(retData));
+                    //const machData = func(item, JSON.stringify(retData));
+                    console.log('定制函数------------');
+                } else {
+                    // console.log('默认函数')
+                    setConfItemNode(item, syncData);
+                }
+                this.machAnimateReset(item);
+            }
+        })
+        // console.log('执行完毕')
+        this.render();
+        this.animate(true);
+        return data
+    };
+    Common.prototype.machAnimateReset = function (pen) {
+        if (!pen.animateFrames || pen.animateFrames.length <= 0) return;
+        for (var _a = 0, _af = pen.animateFrames; _a < _af.length; _a++) {
+            var ani = _af[_a];
+            ani.state.strokeStyle = pen.strokeStyle;
+            ani.state.fillStyle = pen.fillStyle;
+        }
+    };
+    Common.prototype.getTagParamsForKpiAddrs = async function (assetId, tagParams, apiStr) {
+        let params = {
+            assetId: assetId,
+            tagIds: tagParams.tagIds.join(","),
+            kpiAddrs: tagParams.kpiAddrs.join(","),
+            echartAssemblyIds: tagParams.echartData,
+        }
+        let pathRewrite = apiStr ? apiStr : this.pathRewrite
+        const path = pathRewrite ? pathRewrite + '/place/place_monitor/getPlaceAssetDetail' : '/place/place_monitor/getPlaceAssetDetail'
+        let ret = await axios.post(path, params);
+        // 遍历得到属性中绑定指标数据的集合
+        const tagIds = this.getTagIdsForKpiAddrs(ret.data);
+        // 详情页面，固定的资产详情的数据集合
+        this.assetPoperties = ret.asset
+
+        return {
+            data: ret.data,
+            echartAssemblyData: ret.echartAssemblyData,
+            tagIds: tagIds
+        }
+    };
+    Common.prototype.getTagIdsForKpiAddrs = function (data) {
+        let tagIds = [];
+        const delData = this.pathRewrite ? data : data.data;
+        if (delData && delData.length > 0) {
+            delData.forEach((item) => {
+                tagIds.push(item.tagId);
+            })
+            this.tagParams.detailAssetData = data;
+            this.tagParams.Mqtt.tagIds = tagIds;
+        }
+        return tagIds
+    };
+    Common.prototype.renderForAssetPoperties = function (pens) {
+        const _this = this;
+        pens.forEach((pen) => {
+            if (pen.children != undefined) {
+                _this.renderForAssetPoperties(pen.children)
+            } else {
+                _this.renderForAssetPopertiesChildren(pen)
+            }
+        })
+    };
+    Common.prototype.renderForAssetPopertiesChildren = function (pen) {
+        if (pen.data != undefined && pen.data != '' && typeof pen.data === 'object' && Array.isArray(pen.data) && pen.data.length > 0) {
+            pen.data.forEach((item) => {
+                Object.keys(this.assetPoperties).forEach(key => {
+                    if (item.key === 'assetKey') {
+                        if (item.value === key) {
+                            if (key === 'imgUrl' || key === 'principleImg') {
+                                pen.text = ''
+                                pen.image = this.pathRewrite ? this.pathRewrite + this.assetPoperties[key] : this.assetPoperties[key]
+                            } else {
+                                pen.text = this.assetPoperties[key]
+                            }
+                        }
+                    }
+                })
+            })
+        }
+    };
+    Common.prototype.onMqttContent = async function (tagParams) {
+        if (!this.initType) this.data.mqttTopics = 'mqtt-' + s8();
+        // 告知MQTT属性中数据的集合
+        const ret = !this.initType ? await this.getMqttData(tagParams) : this.initType;
+        if (ret) {
+            let mqttUrlStr = this.data.mqttUrl, mqttOption = this.data.mqttOptions
+            if (this.initData) {
+                const {mqttUrl, mqttOptions} = this.initData
+                mqttUrlStr = mqttUrl
+                mqttOption = mqttOptions
+            }
+            mqttOption.clientId = s8()
+            this.openMqtt(mqttUrlStr, mqttOption);
+        } else {
+            console.log('请求出错')
+        }
+    };
+    Common.prototype.onPollContent = function (tagParams, eventType) {
+        const index = eventType[4] ? eventType[4] : ''
+        // const url = 'pollUrl'+index;
+        // const second = 'pollSecond'+index;
+        const pollUrl = this.data['pollUrl' + index]
+        const pollSecond = this.data['pollSecond' + index]
+        this.onpollStop(eventType);
+        if (pollUrl && pollSecond) {
+            this.renderForPoll(tagParams, pollUrl, eventType);
+            if (pollSecond != 0) { // 轮询
+                let millisecond = parseInt(pollSecond * 1000)
+                this.pollTime[eventType] = setInterval(() => {
+                    this.renderForPoll(tagParams, pollUrl, eventType);
+                }, millisecond);
+            }
+        }
+    };
+    Common.prototype.onpollStop = function (eventType) {
+        if (this.pollTime[eventType]) {
+            clearInterval(this.pollTime[eventType])
+        }
+    };
+    Common.prototype.renderForPoll = async function (tagParams, pollUrl, eventType) {
+        let data = {
+            tagIds: tagParams.tagIds.join(","),
+            // assetIds: tagParams.assetIds.join(","),
+            // echart: tagParams.tagEcharts.join(",")
+        }
+        const _this = this
+        axios.post(pollUrl, data)
+                .then((res) => {
+                    _this.openPoll(res, eventType);
+                })
+                .catch((error) => {
+                    console.log('轮询地址，连接失败', error)
+                    _this.onpollStop(eventType);
+                });
+    };
+    Common.prototype.getUrlParams = function (name) {
+        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
+        var r = window.location.search.substr(1).match(reg)
+        if (r != null) return unescape(r[2])
+        return null
+    };
+    Common.prototype.checkType = function (data) {
+        return Object.prototype.toString.call(data).slice(8, -1)
+    };
+    Common.prototype.mqttLostMessage = function () {
+        // console.log('发送请求mqtt-data')
+        this.getMqttData(this.tagParams.Mqtt);
+    };
+    Common.prototype.doMqttDrow = function (ret) {
+        let canvasData = this.canvas.data;
+        ret = JSON.parse(ret);
+        // console.log('处理消息')
+        // console.log('this.canvas.data',this.canvas.data)
+        this.mqttDataDrawing(canvasData, ret)
+    };
+    Common.prototype.hidePenByTag = function (pens, val) {
+        const _this = this;
+        pens.forEach((pen) => {
+            if (pen.children != undefined) {
+                _this.hidePenByTag(pen.children, val);
+            }
+            _this.hidePenVal(pen, val);
+        });
+    };
+    Common.prototype.hidePenVal = function (pen, val) {
+        const tags = pen.tags
+        const obj = val ? JSON.parse(val) : {}
+        const visibleRange = obj.visibleRange
+        const visibleFnRange = obj.visibleFnRange
+        const visibleValue = obj.visibleValue
+        const hiddenRange = obj.hiddenRange
+        const tabsValue = obj.tabsValue
+        if (tags.length > 0) {
+            if (visibleRange == '1') {
+                if (this.openCount % 2 == 0) {
+                    visibleFnRange == '1' ? pen.visible = false : pen.visible = true
+                } else {
+                    visibleFnRange == '1' ? pen.visible = true : pen.visible = false
+                }
+            } else if (visibleRange == '2') {
+                if (visibleValue) {
+                    if (tags.includes(visibleValue))
+                        pen.visible = !pen.visible;
+                }
+                if (hiddenRange) {
+                    let arr = hiddenRange.split(',')
+                    let a = false
+                    arr = arr.filter(el => el !== visibleValue)
+                    for (let i = 0; i < tags.length; i++) {
+                        if (arr.indexOf(tags[i]) !== -1) {
+                            a = true
+                        }
+                    }
+                    if (a) {
+                        pen.visible = false;
+                    }
+                }
+            } else if (visibleRange == '3') {
+                if (visibleValue) {
+                    if (tags.includes(tabsValue)) {
+                        if (tags.includes(visibleValue)) {
+                            pen.visible = true;
+                        } else {
+                            pen.visible = false;
+                        }
+                    }
+                }
+            }
+        }
+        this.render();
+    };
+    Common.prototype.destroyStatic = function () {
+        this.clearInterValAll();
+        this.closeSocket();
+        this.closeMqtt();
+        this.closePoll();
+        this.subcribe.unsubscribe();
+        this.subcribeRender.unsubscribe();
+        this.subcribeImage.unsubscribe();
+        this.subcribeAnimateEnd.unsubscribe();
+        this.subcribeTableData.unsubscribe();
+        this.animateLayer.destroy();
+        this.animateLayer = null;
+        this.divLayer.destroy();
+        this.divLayer = null;
+        this.canvas.destroy();
+        this.canvas = null;
+        this.offscreen.destroy();
+        this.offscreen = null;
+        this.data = null;
+        Store.set('form:tableData', null);
+        Store.set('TIMEOUT:currentPage', `empty${this.s8()}`);
+        Store.set('FORM:tableData', {
+            data: {
+                tableNodes: {},
+                paginationNodes: {},
+                pageRelevTableNodes: {}
+            }
+        });
+        document.body.removeChild(this.tipMarkdown);
+        if (this.paginationPageListBox) this.paginationPageListBox.removeEventListener('click', this.paginationPageListNode);
+        if (this.pagenationPageInput) this.pagenationPageInput.removeEventListener('click', this.pagenationPageInputNode);
+        //优化
+        Object.keys(this).forEach((item) => {
+
+
+            if (typeof (item) === Object) {
+
+                Object.keys(item).foreach((i) => {
+
+                    item[i] = null;
+                })
+            }
+
+            this[item] = null;
+
+        })
+        //end
+        window.topology = null;
+    };
+    // Render or redraw
+    return Common;
+}());
+export {Common};