dcim-topology2d 1.1.5 → 2.0.2

package/core/src/core.js

@@ -18,8 +18,20 @@ import {ActiveLayer} from './activeLayer';
 import {KeyType, KeydownType} from './options';
 import {PenType, Node, Point, Line, Lock, AnchorMode, Rect} from './models';
 import {drawNodeFns, drawLineFns} from './middles/index';
-import { s8, pointInRect, formatPadding, setTagIdData, setKpiAddrData, setAssetIdData, setAreaIdData, setThreeCategoryIdData} from './utils';
-import axios from 'axios'
+import {
+    s8,
+    pointInRect,
+    formatPadding,
+    setTagIdData,
+    setKpiAddrData,
+    setAssetIdData,
+    setAreaIdData,
+    setVarValueData,
+    setThreeCategoryIdData,
+    initSwitchTabData
+} from './utils';
+import {setSelectElementPosition} from './element';
+import {elementType} from '../../static';
 
 var resizeCursors = ['nw-resize', 'ne-resize', 'se-resize', 'sw-resize'];
 var dockOffset = 10;
@@ -47,7 +59,6 @@ var Topology = (function (_super) {
             close: false, //闭合
         };
         _this.onMouseMove = function (e) {
-            _this.store.data.dataResize = 0;
             if (Store.get('addingArbitraryGraph')) {
                 return
             }
@@ -179,12 +190,13 @@ var Topology = (function (_super) {
                 if ((moveLeft || moveTop)) {
                     _this.scroll(moveLeft ? -100 : 0, moveTop ? -100 : 0);
                 }
-                // console.log('_this.moveIn.type----', _this.moveIn.type)
+                //console.log('_this.moveIn.type----', _this.moveIn.type)
                 switch (_this.moveIn.type) {
                     case _this.moveInType.None:
                         _this.hoverLayer.dragRect = new Rect(_this.mouseDown.x, _this.mouseDown.y, pos.x - _this.mouseDown.x, pos.y - _this.mouseDown.y);
                         break;
                     case _this.moveInType.Nodes:
+                        _this.store.data.dataResize = 0;
                         if (_this.activeLayer.locked()) {
                             break;
                         }
@@ -195,8 +207,15 @@ var Topology = (function (_super) {
                             _this.activeLayer.move(offset.x ? offset.x : x, offset.y ? offset.y : y);
                             _this.needCache = true;
                         }
+                        const dropdownSelect = _this.activeLayer.pens.filter((ds) => {return ds.name === elementType.select && ds.selectDropdown});
+                        if(dropdownSelect.length) {
+                            dropdownSelect.map((dropdown) => {
+                                setSelectElementPosition(dropdown);
+                            })
+                        }
                         break;
                     case _this.moveInType.ResizeCP:
+                        _this.store.data.dataResize = 1;
                         var p1 = new Point(_this.mouseDown.x, _this.mouseDown.y);
                         var p2 = new Point(pos.x, pos.y);
                         var offsetX = p2.x - p1.x;
@@ -244,8 +263,11 @@ var Topology = (function (_super) {
                                 }
                             }
                         } else {
+                            const activeLayerPens = _this.activeLayer.pens;
+                            const isOnlySelect = activeLayerPens.length < 2 && activeLayerPens[0].name === elementType.select && activeLayerPens[0].selectDropdown;
+                            if(isOnlySelect) setSelectElementPosition(activeLayerPens[0]);
                             _this.activeLayer.resize(_this.moveIn.activeAnchorIndex, _this.mouseDown, pos);
-                            _this.dispatch('resizePens', _this.activeLayer.pens);
+                            _this.dispatch('resizePens', activeLayerPens);
                             _this.needCache = true;
                         }
                         break;
@@ -443,9 +465,8 @@ var Topology = (function (_super) {
                             const activeNode = _this.moveIn.activeNode;
                             if (!_this.checkNodeOfClickType(activeNode)) {
                                 _this.activeLayer.setPens([activeNode]);
-                                if (activeNode && activeNode.name == 'arbitraryGraph') {
-                                    _this.dispatch('node', activeNode);
-                                } else if (activeNode && activeNode.name == 'tablePagination') {
+                                if(activeNode.name === elementType.select && activeNode.selectDropdown) setSelectElementPosition(activeNode, 'down');
+                                if(activeNode.name == 'tablePagination') {
                                     if (_this.store.options.type === 'topology') return _this.dispatch('node', activeNode);
                                     const pnlKeys = Object.keys(activeNode.paginationData.pageNumberLocals);
                                     const pageNumArea = pnlKeys.find((pna) => {
@@ -459,16 +480,8 @@ var Topology = (function (_super) {
                                         if (activeNode.paginationData.pageListState) _this.spreadPageListHandle(activeNode, e);
                                         if (activeNode.paginationData.targetPageLocal.hide) _this.targetPageInputHandle(activeNode, e);
                                     }
-                                } else {
+                                }else {
                                     _this.dispatch('node', activeNode);
-                                    if(!window.location.pathname.includes('workspace')) {
-                                        const staticTypeNode = activeNode.events.find((ev) => {
-                                            return parseInt(ev.action) === 8
-                                        }); // 若绑定的是echarts统计图事件
-                                        if (staticTypeNode) {
-                                            _this.switchStaticsCheckType(activeNode, staticTypeNode);
-                                        }
-                                    }
                                 }
                             }
                         }
@@ -562,7 +575,7 @@ var Topology = (function (_super) {
             _this.needCache = false;
         };
         _this.onkeydown = function (key) {
-            if (_this.store.data.locked ||
+            if (_this.store && _this.store.data.locked ||
                     key.target.tagName === 'INPUT' ||
                     key.target.tagName === 'TEXTAREA') {
                 return;
@@ -987,7 +1000,7 @@ var Topology = (function (_super) {
             node.scale(this.store.data.scale);
         }
         this.store.data.pens.push(node);
-        this.setSwitchTabData(node, this.store.data.pens.length-1);
+        initSwitchTabData(node);
         if (focus) {
             this.render();
             this.animate(true);
@@ -1563,7 +1576,7 @@ var Topology = (function (_super) {
                     this.delEmptyLines(pen.id);
                 }
                 pens.push.apply(pens, this.store.data.pens.splice(found, 1));
-                this.setSwitchTabData(pen, found, 'delete');
+                // this.setSwitchTabData(pen, found, 'delete');
                 --i;
             }
             this.animateLayer.pens.delete(pen.id);
@@ -1695,7 +1708,7 @@ var Topology = (function (_super) {
             }
             this.store.data.pens.push(pen);
             this.activeLayer.add(pen);
-            this.setSwitchTabData(pen, this.store.data.pens.length-1);
+            initSwitchTabData(pen);
         }
         this.render();
         this.animate(true);
@@ -1719,8 +1732,8 @@ 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)
+            pen.data = [];
+            this.bindInfo(item, pen, dataType, index);
             this.clipboard.pens.push(pen.clone());
         }
         if (exite == true) {
@@ -1728,22 +1741,23 @@ var Topology = (function (_super) {
         }
     };
     Topology.prototype.bindInfo = async function (item, pen, type, index) {
+        const itemNode = item && item.default || item;
         if ([0, '0'].includes(type)) {
-            const setTagId = setTagIdData(item);
+            const setTagId = setTagIdData(itemNode);
             pen.data.push(...setTagId);
             // 绑定悬浮文字
-            pen.title = item.touchpname
+            pen.title = itemNode.touchpname
             //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
-            const setThreeCategory = setThreeCategoryIdData(pen, item);
+            const setThreeCategory = setThreeCategoryIdData(pen, itemNode);
             pen.data.push(...setThreeCategory);
         } else if ([1, '1'].includes(type)) {
-            const setKpiAddr = setKpiAddrData(item);
+            const setKpiAddr = setKpiAddrData(itemNode);
             pen.data.push(...setKpiAddr);
         } else if ([2, '2'].includes(type)) {
-            const setAssetId = setAssetIdData(item);
+            const setAssetId = setAssetIdData(itemNode);
             pen.data.push(...setAssetId);
             // 绑定悬浮文字
-            pen.title = item.bak
+            pen.title = itemNode.bak
             if (pen.subName && pen.subName == 'temp') {
                 // 温湿度元件
                 // 通讯状态
@@ -1751,23 +1765,19 @@ var Topology = (function (_super) {
                 if (index > 0) {
                     pen.children[0].text = index + 1 + '#'
                 }
-                this.bindInfo(item, pen.children[0], type);
-                // 温度/湿度
-                const _type = 0
-                const ret = await axios.post('/asset/touch_css3000_api/findlist', {assetIds: item.id})
-                ret.data.data.forEach((elem) => {
-                    // if(elem.kpiName=='通讯状态'){
-                    // }else
-                    if (elem.kpiName == '温度') {
-                        pen.children[1].data = []
-                        this.bindInfo(elem, pen.children[1], _type);
-                    } else if (elem.kpiName == '湿度') {
-                        pen.children[2].data = []
-                        this.bindInfo(elem, pen.children[2], _type);
-                    }
-                })
-                pen.children.forEach((item) => {
-                    item.events = [{
+                this.bindInfo(itemNode, pen.children[0], type);
+                // 温度
+                if(item.temperature) {
+                    pen.children[1].data = [];
+                    this.bindInfo(item.temperature, pen.children[1], 0);
+                }
+                // 湿度
+                if(item.dampness) {
+                    pen.children[2].data = []
+                    this.bindInfo(item.dampness, pen.children[2], 0);
+                }
+                pen.children.forEach((itemNode) => {
+                    itemNode.events = [{
                         "type": 3,
                         "action": 2,
                         "value": "",
@@ -1776,16 +1786,19 @@ var Topology = (function (_super) {
                 })
             }
         } else if ([3, '3'].includes(type)) {
-            const setAreaId = setAreaIdData(item);
+            const setAreaId = setAreaIdData(itemNode);
             pen.data.push(...setAreaId);
+        }else if ([4, '4'].includes(type)) {
+            const setVarId = setVarValueData(itemNode);
+            pen.data.push(...setVarId);
         }
         // if([0, 2, '0', '2'].includes(type)) {
         //     //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
-        //     const setThreeCategory = setThreeCategoryIdData(pen, item);
+        //     const setThreeCategory = setThreeCategoryIdData(pen, itemNode);
         //
         //     pen.data.push(...setThreeCategory);
         // }
-        return pen
+        return pen;
     };
     Topology.prototype.newId = function (node, idMaps) {
         var old = node.id;
@@ -1805,10 +1818,12 @@ var Topology = (function (_super) {
         if (!pens) {
             pens = this.activeLayer.pens;
         }
+        let isAnimate = false;
         for (var _i = 0, pens_1 = pens; _i < pens_1.length; _i++) {
             var pen = pens_1[_i];
             if (pen instanceof Node) {
                 let isRotateBug = false
+                isAnimate = pen.animateFrames && pen.animateFrames.length
                 if (pen.rotate === 0) {
                     pen.rotate = 360
                     isRotateBug = true
@@ -1827,6 +1842,7 @@ var Topology = (function (_super) {
         this.activeLayer.calcControlPoints();
         this.activeLayer.saveNodeRects();
         this.render();
+        if(isAnimate) this.animate(true);
         // tslint:disable-next-line: no-unused-expression
         cache && this.cache();
     };

package/core/src/divLayer.d.ts

@@ -2,9 +2,6 @@ import { Node } from './models';
 import { Layer } from './layer';
 export declare class DivLayer extends Layer {
     canvas: HTMLDivElement;
-    iframes: {
-        [key: string]: HTMLIFrameElement;
-    };
     elements: {
         [key: string]: HTMLElement;
     };

package/core/src/divLayer.js

@@ -22,30 +22,21 @@ var __extends = (this && this.__extends) || (function () {
 import {Store} from 'le5le-store';
 import {Node, PenType, images, defaultImages} from './models';
 import {Layer} from './layer';
-import { setStyleForElementIdDiv, createIframeElement, DomElements, DomIframes } from './utils';
+import { setStyleForElementIdDiv } from './element';
 import { commonStore } from './store';
 var DivLayer = /** @class */ (function (_super) {
     __extends(DivLayer, _super);
     function DivLayer(TID) {
         var _this = _super.call(this, TID) || this;
         _this.canvas = document.createElement('div');
-        _this.iframes = {};
         _this.elements = {};
         _this.gifs = {};
         _this.addDiv = function (node) {
-            if (node.iframe) {
-              Object.assign(_this.iframes, DomIframes);
-              if (_this.iframes[node.id] && _this.iframes[node.id].src !== node.iframe) {
-                  _this.iframes[node.id].src = node.iframe;
-              }
-              _this.setElemPosition(node, _this.iframes[node.id] || _this.addIframe(node));
-            }
             if (node.elementId) {
-                Object.assign(_this.elements, DomElements);
                 if (!_this.elements[node.id]) {
                     _this.elements[node.id] = document.getElementById(node.id);
                     if (_this.elements[node.id]) {
-                        _this.canvas.appendChild(_this.elements[node.id]);
+                        _this.addElement(node);
                     }
                 }
                 _this.setElemPosition(node, _this.elements[node.id]);
@@ -84,11 +75,12 @@ var DivLayer = /** @class */ (function (_super) {
         _this.subcribe = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv);
         return _this;
     }
-    DivLayer.prototype.addIframe = function (node) {
-        const iframe = createIframeElement(node);
-        this.iframes[node.id] = iframe;
-        commonStore[node.TID].parentElem.appendChild(iframe);
-        return iframe;
+    DivLayer.prototype.addElement = function (node){
+        if(['iframe', 'echarts'].includes(node.name)) {
+            this.canvas.parentNode.appendChild(this.elements[node.id]);
+        }else {
+            this.canvas.appendChild(this.elements[node.id]);
+        }
     };
     DivLayer.prototype.addGif = function (node) {
         this.gifs[node.id] = node.img;
@@ -96,21 +88,18 @@ var DivLayer = /** @class */ (function (_super) {
         return node.img;
     };
     DivLayer.prototype.setElemPosition = function (node, elem) {
-      setStyleForElementIdDiv(node, elem, commonStore[this.TID].data);
+        setStyleForElementIdDiv(node, elem, commonStore[this.TID].data);
     };
     DivLayer.prototype.removeDiv = function (item) {
         if (this.curNode && item.id === this.curNode.id) {
             this.curNode = null;
         }
-        if (item.iframe) {
-          const iframesNode = this.iframes[item.id] || DomIframes[item.id];
-          commonStore[item.TID].parentElem.removeChild(iframesNode);
-          this.iframes[item.id] ? this.iframes[item.id] = null : DomIframes[item.id] = null;
-        }
         if (item.elementId) {
-            const elementNode = this.elements[item.id] || DomElements[item.id];
-            this.canvas.removeChild(elementNode);
-            this.elements[item.id] ? this.elements[item.id] = null : DomElements[item.id] = null;
+            const elementNode = this.elements[item.id];
+            if(elementNode) {
+                this.canvas.parentElement.removeChild(elementNode);
+                this.elements[item.id] = null;
+            }
         }
         if (item.gif) {
             this.canvas.removeChild(this.gifs[item.id]);
@@ -128,15 +117,8 @@ var DivLayer = /** @class */ (function (_super) {
     };
     DivLayer.prototype.clear = function () {
         this.canvas.innerHTML = '';
-        this.iframes = {};
         this.elements = {};
         this.gifs = {};
-        for (let key in DomIframes) {
-          delete DomIframes[key];
-        }
-        for (let key in DomElements) {
-          delete DomElements[key];
-        }
         // tslint:disable-next-line:forin
         for (let key in images) {
             delete images[key];

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

@@ -0,0 +1,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;

package/core/src/element/common.js

@@ -0,0 +1,52 @@
+import {Lock} from '../models';
+export function setStyleForElementIdDiv(node, elem, data) {
+    if (!elem) return;
+    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 + 'px';
+    elem.style.height = node.rect.height + 'px';
+    if (node.rotate || node.offsetRotate) {
+        elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
+    }
+    if (data && data.locked > Lock.None || node.locked > Lock.None) {
+        elem.style.userSelect = 'initial';
+        elem.style.pointerEvents = 'initial';
+    } else {
+        elem.style.userSelect = 'none';
+        elem.style.pointerEvents = 'none';
+    }
+}
+
+// 创建div
+export function createDiv(node) {
+    var div = document.createElement('div');
+    div.setAttribute('class', 'topoEchart');
+    div.style.position = 'absolute';
+    div.style.outline = 'none';
+    div.style.left = '-9999px';
+    div.style.bottom = '-9999px';
+    div.style.width = node.rect.width + 'px';
+    div.style.height = node.rect.height + 'px';
+    div.id = node.id;
+    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);
+// }
+
+//# sourceMappingURL=dom.js.map

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

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

package/core/src/element/iframe.js

@@ -0,0 +1,12 @@
+// 创建iframe
+export function createIframeElement(node) {
+  const iframe = document.createElement('iframe');
+  // iframe.scrolling = 'no';
+  iframe.frameBorder = '0';
+  iframe.src = node.iframe;
+  iframe.width = node.rect.width;
+  iframe.height = node.rect.height;
+  iframe.setAttribute('id', node.id);
+  iframe.setAttribute('class', 'topology2dConfIfram');
+  return iframe;
+}

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

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './iframe';
+export * from './select';
+export * from './tab';

package/core/src/element/index.js

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './iframe';
+export * from './select';
+export * from './tab';

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

@@ -0,0 +1,11 @@
+import { Node } from '../models';
+
+export declare function createSelectElement(node: Node): HTMLDivElement;
+export declare function createSelectDropdown(node: Node): HTMLDivElement;
+export declare function createSelectOptions(data: [], node: Node): string;
+export declare function getSelectedData(e: Event, data: any): void;
+export declare function setSelectInteractiveState(selected: any, node: Node): void;
+export declare function resetSelectInteractiveState(node: Node): void;
+export declare function setSelectDropdownInteractiveState(node: Node, staticType: any, type: any): void;
+export declare function setSelectElementPosition(node: Node, type: string): void;
+export declare function setSelectElementTheme(node: Node): void;

package/core/src/element/select.js

@@ -0,0 +1,199 @@
+import {
+    elementInteractivePoor,
+    selectDataPool,
+    echartsRealDataPool,
+    echartsOptionsPool
+} from "../../../store";
+import { setMapDataOptions } from '../../../chart-diagram';
+import {previewType, selectStaticType} from '../utils';
+let nodeId = '';
+let downId = '';
+// 创建下拉头
+export function createSelectElement(node) {
+    const selectEle = document.createElement('div');
+    const inputValue = selectDataPool[node.id].data[0] && selectDataPool[node.id].data[0].name;
+    let attrName = 'topology-select-icon-arrow';
+    if(node.selectDropdown) attrName += ' reverse';
+    const children = `<i class="${attrName}" 
+                         style="border-width: ${node.font.fontSize/2}px;border-bottom-width: 0;">
+                      </i><input type="text" placeholder="请选择" readonly 
+                      value="${inputValue}" 
+                      class="topology-select-input" 
+                      style="font-size: ${node.font.fontSize}px;color: ${node.font.color ? node.font.color : '#fff'}"/>`;
+    const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
+    selectEle.setAttribute('id', node.id);
+    selectEle.setAttribute('class', `topology-select${themeType}`);
+    selectEle.innerHTML = children;
+    return selectEle;
+}
+// 创建下拉options容器
+export function createSelectDropdown(node) {
+    const selectDropdownEle = document.createElement('div');
+    let liElements = '';
+    if(node.selectDropdown) {
+        liElements = createSelectOptions(selectDataPool[node.id].data, node);
+        selectDropdownEle.style.display = 'block';
+        setSelectDropdownPosition(node, selectDropdownEle);
+    }
+    const children = `<i class="popper__arrow"></i><ul class="topology-select-dropdown-list">${liElements}</ul>`;
+    const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
+    selectDropdownEle.style.width = `${node.rect.width}px`;
+    selectDropdownEle.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
+    selectDropdownEle.innerHTML = children;
+    return selectDropdownEle;
+}
+// 创建下拉options列表
+export function createSelectOptions(data, node) {
+    const selectNode = selectDataPool[node.id];
+    const selectDropdownUl = selectNode.dom.selectDropdownUl;
+    if(selectDropdownUl) selectDropdownUl.innerHTML = '';
+    let leElement = '';
+    const order = selectNode.node.selected ? selectNode.node.selected.order : 0;
+    for (let i = 0, length = data.length; i < length; i++) {
+        let selected = i === order ? ' selected' : '';
+        leElement += `<li 
+                        class="topology-select-dropdown-item${selected}" 
+                        type="option" data-order="${i}" 
+                        style="height: ${node.rect.height}px;line-height: ${node.rect.height}px;font-size: ${node.font.fontSize}px;">
+                        <span>${data[i].name}</span>
+                      </li>`;
+    }
+    if(selectDropdownUl) {
+        selectDropdownUl.innerHTML = leElement;
+    }else {
+        return leElement;
+    }
+}
+// 配置下拉头的交互状态：展开时三角图标向上，否则向下
+export function setSelectInteractiveState(selected, node) {
+    const selectNode = selectDataPool[node.id];
+    selectNode.dom.selectIconArrow.style.display = selected ? 'none' : 'block';
+    //selectNode.dom['selectRemove'].style.display = selected ? 'block' : 'none';
+}
+// 重置下拉状态
+export function resetSelectInteractiveState(node) {
+    if(!Object.keys(selectDataPool).length) return;
+    for (let data of Object.values(selectDataPool)) {
+        if(node && node.id !== data.node.id) {
+            if(data.dom.selectIconArrow) data.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
+            data.slideState = false;
+        };
+    }
+    document.querySelector('.topology-select-dropdown').style.display = 'none';
+    elementInteractivePoor.node = null;
+}
+// 配置下拉options容器的交互状态，展开和收起
+export function setSelectDropdownInteractiveState(node, staticType, type) {
+    const selectNode = selectDataPool[node.id];
+    if(!selectNode.staticType) selectNode.staticType = staticType;
+    if(!selectNode) return;
+    if(downId !== node.id && type === previewType.Dcim) {
+        // 点击的不是同一个下拉则重置交互样式，清空数据
+        resetSelectInteractiveState(node);
+        elementInteractivePoor.options = null;
+    }
+    downId = node.id;
+    elementInteractivePoor.node = node;
+    selectElementStore(node.id);
+    setSelectElementPosition(node);
+    const { selectIconArrow, selectDropdown } = selectNode.dom;
+    selectNode.slideState = !selectNode.slideState || node.selectDropdown; // 下拉展开状态
+    let attrName = 'topology-select-icon-arrow';
+    if(selectNode.slideState) {
+        selectDropdown.style.display = 'block';
+        attrName += ' reverse';
+    }else {
+        selectDropdown.style.display = 'none';
+        attrName.replace(' reverse', '');
+    }
+    // 图标旋转
+    selectIconArrow.setAttribute('class', attrName);
+    // 添加列表数据
+    if(!elementInteractivePoor.options) createSelectOptions(selectNode.data, node);
+}
+// 配置下拉偏移位置
+export function setSelectElementPosition(node, type) {
+    // 不同元件切换
+    selectElementStore(node.id);
+    const selectNode = selectDataPool[node.id];
+    if(type === 'down') {
+        if(nodeId === node.id) return;
+        elementInteractivePoor.options = null;
+        createSelectOptions(selectNode.data, node);
+    }
+    nodeId = node.id;
+    setSelectDropdownPosition(node, selectNode.dom.selectDropdown);
+}
+function setSelectDropdownPosition(node, selectDropdown) {
+    const selectEle = selectDataPool[node.id].dom.selectEle;
+    let left = selectEle.getBoundingClientRect().left; // 获取下拉元素距离窗体左侧位置
+    let top = selectEle.getBoundingClientRect().top + node.rect.height;
+    if(window.location.pathname.includes('workspace')) {
+        // topol编辑器
+        left = node.rect.x;
+        top = node.rect.y + node.rect.height;
+    }
+    selectDropdown.style.left = `${left}px`;
+    selectDropdown.style.top = `${top}px`;
+    selectDropdown.style.width = `${node.rect.width}px`;
+    const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
+    selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
+}
+// 获取下拉选中的数据
+export function getSelectedData(e, data) {
+    const selectNode = selectDataPool[data.id];
+    if(!elementInteractivePoor.options) elementInteractivePoor.options = selectNode.dom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
+    const parentNode = e.target.parentNode;
+    const type = parentNode.getAttribute('type');
+    if(type === 'option') {
+        // 选中节点操作
+        const order = parentNode.getAttribute('data-order');
+        selectNode.optionOrder = order;
+        for(let i = 0, leng = elementInteractivePoor.options.length; i < leng; i++) {
+            let name = 'topology-select-dropdown-item';
+            if(i == order) {
+                name += ' selected';
+            }else {
+                name.replace(' selected', '');
+            }
+            elementInteractivePoor.options[i].setAttribute('class', name);
+        }
+        const node = selectNode.data[order];
+        selectNode.dom.selectEle.querySelector('.topology-select-input').value = node.name;
+        selectNode.slideState = false;
+        selectNode.dom.selectDropdown.style.display = 'none';
+        // 图标旋转
+        selectNode.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
+        if(selectNode.staticType === selectStaticType.static) {
+            // 数据统计
+            const optionNode = data.formData.bindBlockId && echartsOptionsPool[data.formData.bindBlockId];
+            if(!optionNode) return;
+            // 切换数据
+            echartsRealDataPool[optionNode.data.id] = echartsRealDataPool[node.id];
+            setMapDataOptions(optionNode.option, optionNode.data);
+            selectNode.node.selected = {
+                order: parseInt(order),
+                id: node.id
+            };
+        }else {
+            // 数据展示
+        }
+    }
+}
+// 配置下拉展示的主题风格
+export function setSelectElementTheme(node) {
+    const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
+    const { selectEle, selectDropdown } = selectDataPool[node.id].dom;
+    selectEle.setAttribute('class', `topology-select${themeType}`);
+    selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
+}
+// 存储下拉Dom节点
+function selectElementStore(id) {
+    const selectNode = selectDataPool[id];
+    if(!selectNode.dom.selectIconArrow) selectNode.dom.selectIconArrow = selectNode.dom.selectEle.querySelector('.topology-select-icon-arrow');
+    if(!selectNode.dom.selectDropdown) {
+        selectNode.dom.selectDropdown = document.querySelector('.topology-select-dropdown');
+        selectNode.dom.selectDropdownUl = document.querySelector('.topology-select-dropdown-list');
+        selectNode.dom.selectDropdownLi = document.querySelectorAll('.topology-select-dropdown-item');
+    }
+}