dcim-topology2d 1.1.6 → 2.0.5

package/core/src/element/select.js

@@ -0,0 +1,234 @@
+import {Store} from 'le5le-store';
+import {commonStore} from "../store";
+import { setMapDataOptions } from '../../../chart-diagram';
+import {previewType, selectStaticType} from '../utils';
+import {setElementSwitchTabState} from './tab';
+let nodeId = '';
+let downId = '';
+// 创建下拉头
+export function createSelectElement(node) {
+    const selectEle = document.createElement('div');
+    const order = node.formData.selected && node.formData.selected.order || 0;
+    const inputValue = commonStore[node.TID].selectDataPool[node.id].data[order] && commonStore[node.TID].selectDataPool[node.id].data[order].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(commonStore[node.TID].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 = commonStore[node.TID].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 = commonStore[node.TID].selectDataPool[node.id];
+    selectNode.dom.selectIconArrow.style.display = selected ? 'none' : 'block';
+    //selectNode.dom['selectRemove'].style.display = selected ? 'block' : 'none';
+}
+// 重置下拉状态
+export function resetSelectInteractiveState(node) {
+    const currentStore = commonStore[node.TID];
+    if(!Object.keys(currentStore.selectDataPool).length) return;
+    for (let data of Object.values(currentStore.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';
+    currentStore.elementInteractivePoor.node = null;
+}
+
+/**
+ * 配置下拉options容器的交互状态，展开和收起
+ * @param node 下拉元件节点数据
+ * @param staticType 下拉功能类型：1: 数据统计；2：数据展示；3：显示隐藏
+ * @param type 功能作用区域类型：Dcim，Topology，Logo
+ */
+export function setSelectDropdownInteractiveState(node, staticType, type) {
+    const currentStore = commonStore[node.TID];
+    const selectNode = currentStore.selectDataPool[node.id];
+    if(!selectNode.staticType) selectNode.staticType = staticType;
+    if(!selectNode) return;
+    if(downId !== node.id && type === previewType.Dcim) {
+        // 点击的不是同一个下拉则重置交互样式，清空数据
+        resetSelectInteractiveState(node);
+        currentStore.elementInteractivePoor.options = null;
+    }
+    downId = node.id;
+    currentStore.elementInteractivePoor.node = node;
+    selectElementStore(node.id, node.TID);
+    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(!currentStore.elementInteractivePoor.options) createSelectOptions(selectNode.data, node);
+}
+// 配置下拉偏移位置
+export function setSelectElementPosition(node, type) {
+    // 不同元件切换
+    selectElementStore(node.id, node.TID);
+    const selectNode = commonStore[node.TID].selectDataPool[node.id];
+    if(type === 'down') {
+        if(nodeId === node.id) return;
+        commonStore[node.TID].elementInteractivePoor.options = null;
+        createSelectOptions(selectNode.data, node);
+    }
+    nodeId = node.id;
+    setSelectDropdownPosition(node, selectNode.dom.selectDropdown);
+}
+function setSelectDropdownPosition(node, selectDropdown) {
+    const selectEle = commonStore[node.TID].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`);
+}
+
+/**
+ * 获取下拉选中的数据
+ * @param e 节点选中事件
+ * @param data 下拉元件节点数据
+ * @param editData 编辑显下拉的数据
+ */
+export function getSelectedData(e, data, editData) {
+    const currentStore = commonStore[data.TID];
+    const selectNode = currentStore.selectDataPool[data.id];
+    if(!currentStore.elementInteractivePoor.options && data.selectDropdown) currentStore.elementInteractivePoor.options = selectNode.dom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
+    let order = 0;
+    let staticType = selectNode.staticType;
+    if(!editData) {
+        const parentNode = e.target.parentNode;
+        const type = parentNode.getAttribute('type');
+        if(type !== 'option') return;
+        selectNode.slideState = false;
+        selectNode.dom.selectDropdown.style.display = 'none';
+        // 图标旋转
+        selectNode.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
+        // 选中节点操作
+        order = parentNode.getAttribute('data-order');
+    }else {
+        order = editData.order;
+        staticType = editData.staticType;
+    }
+    if(data.selectDropdown) {
+        for(let i = 0, leng = currentStore.elementInteractivePoor.options.length; i < leng; i++) {
+            let name = 'topology-select-dropdown-item';
+            if(i == order) {
+                name += ' selected';
+            }else {
+                name.replace(' selected', '');
+            }
+            currentStore.elementInteractivePoor.options[i].setAttribute('class', name);
+        }
+    }
+    selectNode.optionOrder = order;
+    const node = selectNode.data[order];
+    selectNode.dom.selectEle.querySelector('.topology-select-input').value = node.name;
+    selectNode.node.selected = {
+        order: parseInt(order),
+        id: node.id
+    };
+    if(staticType === selectStaticType.static) {
+        // 数据统计
+        const optionNode = data.formData.bindBlockId && currentStore.echartsOptionsPool[data.formData.bindBlockId];
+        if(!optionNode) return;
+        // 切换数据
+        currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[node.id];
+        setMapDataOptions(optionNode.option, optionNode.data);
+    }
+    if(staticType === selectStaticType.dataShow) {
+        // 数据展示
+    }
+    if(staticType === selectStaticType.visible) {
+        // 显示隐藏
+        const optionsVisibleData = currentStore.selectTabDataPool[data.id];
+        if(!optionsVisibleData || !optionsVisibleData.size) return;
+        for(const [key, value] of optionsVisibleData){
+            const eque = node.id === value.tag;
+            currentStore.data.pens[value.order].visible = eque;
+            currentStore.data.pens[value.order].visibleSwitch = eque;
+            value.visible = eque;
+            setElementSwitchTabState(value);
+        }
+        Store.set(`${data.TID}-LT:render`, true);
+    }
+}
+// 配置下拉展示的主题风格
+export function setSelectElementTheme(node) {
+    const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
+    const { selectEle, selectDropdown } = commonStore[node.TID].selectDataPool[node.id].dom;
+    selectEle.setAttribute('class', `topology-select${themeType}`);
+    selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
+}
+// 存储下拉Dom节点
+function selectElementStore(id, TID) {
+    const selectNode = commonStore[TID].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');
+    }
+}

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

@@ -0,0 +1 @@
+export declare function setElementSwitchTabState(node: any): void;

package/core/src/element/tab.js

@@ -0,0 +1,19 @@
+import {jsonLength} from '../utils';
+import {commonStore} from "../store";
+// 设置tab切换显示隐藏时的 Dom元件状态
+export function setElementSwitchTabState(node) {
+    if(node.name !== 'echarts' && (!node.children || !node.children.length)) return;
+    if(typeof commonStore[node.TID].elementInteractivePoor.elementDataLength !== 'number') {
+        commonStore[node.TID].elementInteractivePoor.elementDataLength = jsonLength(commonStore[node.TID].echartsDataPool) || jsonLength(commonStore[node.TID].selectDataPool);
+    }
+    if(!commonStore[node.TID].elementInteractivePoor.elementDataLength) return;
+    const ele = commonStore[node.TID].echartsDataPool[node.id] && commonStore[node.TID].echartsDataPool[node.id].div ||
+            commonStore[node.TID].selectDataPool[node.id] && commonStore[node.TID].selectDataPool[node.id].dom.selectEle;
+    if(ele) ele.style.display = !node.visible ? 'none': 'block';
+    if(node.children && node.children.length) {
+        node.children.map((ch) => {
+            ch.visible = node.visible;
+            setElementSwitchTabState(ch);
+        })
+    }
+}

package/core/src/healps/changeData.d.ts

@@ -4,5 +4,4 @@ export declare function setConfItemNode(item: any[], syncData: Node): Node;
 export declare function setNodeEvents(item: any[], pen: Pen): void;
 export declare function setControlData(pen: Pen, syncData: Node): void;
 export declare function getControlNode(item: any, data: any): Node;
-export declare function getDetailData(data: Node): void;
-export declare function setStatisticalData(pen: Pen, dataType: any, staticForType: string, chartData: any): Node;
+export declare function getDetailData(data: Node): void;

package/core/src/healps/changeData.js

@@ -1,13 +1,23 @@
 //let DETAILDATA = null;
-import { echartsDefaultDataMap } from '../../../static';
-import { commonStore } from '../store'
+import {commonStore} from '../store';
+import { getEchartsRealData } from '../utils/conversion';
 export function setConfItemNode(pen, syn_synata) {
-    if (!pen.data) return
-    commonStore[pen.TID].data.dataResize = 1;
+    const entranceGuard = pen.events.find((ev) => {
+        return ev.value === 'entranceGuard';
+    });
+    if(entranceGuard) {
+        // 绑定门禁的元件实时数据
+        const nullUndefinedRegex = /^(?:null|undefined|\s*)$/;
+        const doorData = syn_synata.doorData && syn_synata.doorData[entranceGuard.params];
+        const doorState = doorData && !nullUndefinedRegex.test(doorData.state) && parseInt(doorData.state);
+        pen.text = doorState === 1 ? '开门' : '关门'; // 1-开门，其他值为关门
+    }
+    if (!pen.data) return;
+    if(commonStore[pen.TID]) commonStore[pen.TID].data.dataResize = 1;
+    let isAlarm = false; // 判断元件绑定的数据中是否有告警发生，用于九所项目服务器自身监控功能
     if(pen.data instanceof Array) {
-        let _syn = ''
-        let isResetVal = false
-        let isResetFontColor = false
+        let _syn = null;
+        let isResetVal = false;
         const {areaData, assetData, kpiData, tagData, asset} = syn_synata
         pen.data.map((d) => {
             const key = d.key;
@@ -15,7 +25,7 @@ export function setConfItemNode(pen, syn_synata) {
             const assetItem = assetData[value];
             const areaItem = areaData[value];
             const kpiItem = kpiData[value];
-            if(key === 'tagId') value = d.tagId ? d.tagId : d.value
+            if(key === 'tagId') value = d.tagId ? d.tagId : d.value;
             const tagItem = tagData[value];
             //console.log('key===========', d)
             if (key === 'assetKey' && d.value === 'assetName' && asset) {
@@ -28,7 +38,7 @@ export function setConfItemNode(pen, syn_synata) {
             }else if (key === 'tagId' && tagItem) {
                 _syn = tagItem;
                 if(_syn.kpiName !== '通讯状态' || pen.name !== 'circle'){
-                    isResetVal = true
+                    isResetVal = true;
                 }
                 const isControl = parseInt(tagItem.isControlDis); // 是否可控，0可控，1不可控
                 //d.isControlDis = isControlDis
@@ -50,6 +60,7 @@ export function setConfItemNode(pen, syn_synata) {
                 }
             }
         })
+        if(!_syn) return;
         // const type = parseInt(_syn.type) // 是否是开关量
         // 显示的值
         if (isResetVal) pen.text = `${_syn.value}${_syn.unit}`;
@@ -61,9 +72,11 @@ export function setConfItemNode(pen, syn_synata) {
         switch (state) {
             case 0: // 正常告警
                 color = '#FF0000';
+                isAlarm = true;
                 break;
             case 1: // 离线告警, 通讯开关告警
                 color = '#6d6d6d';
+                isAlarm = true;
                 break;
             case 2: // 未告警
             case 3: // 无告警
@@ -93,127 +106,22 @@ export function setConfItemNode(pen, syn_synata) {
         if (name === 'electricFan') setFanData(pen, _syn)
     }else {
         if (pen.elementRendered) pen.elementRendered = false;
-        if(pen.data.echarts) {
-            const { echartDataValue } = syn_synata;
+        if (pen.data.echarts) {
+            const {echartDataValue} = syn_synata;
             const seriesData = echartDataValue;
-            const chartData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
-            const staticForType = pen.data.params && pen.data.params.staticForType || '';//统计类型：日，周，月，年
-            pen.data.echarts.option = setStatisticalData(pen, null, staticForType, chartData);
-        }
-    }
-    return pen
-}
-
-/**
- * 设置图表数据
- * @param pen 拓扑节点
- * @param dataType 数据类型：‘def’-默认，不传默认为-实时
- * @param staticForType 统计类型：日，周，月，年
- * @param chartData // 图表实时数据
- * @returns {*}
- */
-export function setStatisticalData(pen, dataType, staticForType, chartData) {
-    const node = JSON.parse(JSON.stringify(pen));
-    const echartsOption = node.data.echarts.option;
-    const optionDisplayMode = echartsOption.displayMode;
-    let displayMode = 0;
-    if(typeof optionDisplayMode === 'string') {
-
-        const displayType = optionDisplayMode.split('_')[0];
-
-        displayMode = parseInt(displayType);
-
-    }else {
-        displayMode = parseInt(optionDisplayMode);
-    }
-    const defaultData = echartsDefaultDataMap[`displayMode_${optionDisplayMode}`];
-    const staticTypeData = chartData && chartData[`${staticForType}_Data`];
-    const chartRealData = staticForType ? staticTypeData || defaultData : chartData || defaultData;
-    if (displayMode === 1 || displayMode === 2){ // 折线图，柱状图
-        //const xData = [], seriesData = [];
-        dataType = staticForType && staticTypeData || chartData && chartData.seriesData.length ? '' : 'def';
-        const seriesNodes = echartsOption.series;
-        const isBaseLineBar = ['line', 'bar'].includes(node.appearance.type);
-        // 双轴曲线
-        if(seriesNodes.length > 1 || node.data.params && node.data.params.curveNum > 1){
-            const legendData = [];
-            let legendChange = false;
-            echartsOption.xAxis[0].data = chartRealData.XData;
-            let order = 0;
-            //循环给每条统计数据赋值
-            seriesNodes.map((item, index) => {
-                let seriesItem = null;
-                // 执行类型为恢复默认
-                if(dataType === 'def') {
-                    let defaultSeriesItem = defaultData.seriesData[order];
-                    if(!defaultSeriesItem) defaultSeriesItem = defaultData.seriesData[0]; // 默认数据只有一个时，只取第一个
-                    seriesItem = JSON.parse(JSON.stringify(defaultSeriesItem));
-                    if(['line', 'bar'].includes(item.type)) order++; // 此判断为过滤series中的图表柱子或折线节点样式
-                    if(!isBaseLineBar) return item.data = seriesItem.data; // 曲线或柱状图模板一般会走这个逻辑
-                    if(!index) {
-                        seriesItem.name = '标注1';
-                        item.data = seriesItem.data;
-                    }else {
-                        // 自动生成series数据计算
-                        for(let i = 0, sdl = seriesItem.data.length; i < sdl; i++){
-                            displayMode === 1 ? seriesItem.data[i] -= 400 : seriesItem.data[i] += 100;
-                        }
-                        seriesItem.name = `标注${index + 1}`;
-                        item.data = seriesItem.data;
-                    }
-                }else {
-                    // 执行类型为实时数据
-                    seriesItem = chartRealData.seriesData[index];
-                    if(!seriesItem) return item.data = [];
-                    item.data = seriesItem.data;
-                }
-                // 获取角标数据
-                if(seriesItem.name) {
-                    item.name = seriesItem.name;
-                    legendData.push(seriesItem.name);
-                    legendChange = true;
-                }
-            });
-            if(echartsOption.legend && legendChange) echartsOption.legend.data = legendData; // 为角标数据赋值
-        }else {
-            // 单曲线或柱状的执行逻辑
-            echartsOption.xAxis[0].data = chartRealData.XData;
-            const { name, data } = chartRealData.seriesData[0];
-            if(name) seriesNodes[0].name = name;
-            seriesNodes[0].data = data;
-        }
-    }
-    if(displayMode === 4) { // top排行榜
-        echartsOption.yAxis[0].data = chartRealData.XData;
-        const { data } = chartRealData.seriesData[0];
-        echartsOption.yAxis[1].data = data;
-        for (let i = 0; i < echartsOption.series.length; i++) {
-            const node = echartsOption.series[i];
-            node.symbolBoundingData = chartRealData.total;
-            node.data = data;
+            const realData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
+            if (Array.isArray(realData)) {
+                getEchartsRealData(pen, realData);
+            } else {
+                commonStore[pen.TID].echartsRealDataPool[pen.id] = realData;
+            }
         }
     }
-    if (displayMode === 5 || displayMode === 3){ // 饼图/环形图
-        const colors = echartsOption.color;
-        const pieData = staticForType ? chartData || defaultData : chartData && chartData.data || defaultData.seriesData;
-        const seriesData = [];
-        pieData.map((chd, index) => {
-            seriesData.push({
-                itemStyle: { color: colors[index] },
-                name: chd.name,
-                value: chd.value
-            })
-        })
-        echartsOption.series[0].data = seriesData;
+    return {
+        monitorAlarm: isAlarm
     }
-    if(displayMode === 6){ // 仪表盘
-        // 仪表盘分两种，分别有不同的取值方式，下面两行先注释掉
-        // node.appearance.title.text = chartData.name;
-        // node.data.echarts.option.title.text = chartData.name;
-        echartsOption.series[0].data[0].value = chartData && chartData.value || defaultData.value;
-    }
-    return echartsOption;
 }
+
 export function setNodeEvents(item, pen) {
 
 }

package/core/src/middles/default.js

@@ -5,7 +5,7 @@ import {
   twowayArrow, twowayArrowIconRect, twowayArrowTextRect,
   rectangle, rectangleIconRect, rectangleTextRect,
   diamond, diamondIconRect, diamondTextRect,
-  text, file, formtable, tablePagination, iframePrimeval,
+  text, file, formtable, tablePagination, iframePrimeval,formSelect,
   line as nodeLine, lineAnchors, lineIconRect, lineTextRect,
   circle, circleIconRect, circleTextRect, circleAnchors,
   triangle, triangleIconRect, triangleTextRect, triangleAnchors,
@@ -62,6 +62,8 @@ export var drawArrowFns = {};
 function init() {
     console.log('Init middles.');
     // ********Default nodes.*******
+    // select
+    drawNodeFns.select = formSelect;
     // iframe
     drawNodeFns.iframe = iframePrimeval;
     // tablePagination

package/core/src/middles/nodes/arbitrarygraph.js

@@ -1,17 +1,19 @@
 export function arbitraryGraph(ctx, node) {
 
-  ctx.beginPath();
+    ctx.beginPath();
 
-  ctx.lineWidth = 1;
+    ctx.lineWidth = 1;
 
-  for(let i=0,len=node.rect.circles.length; i<len; i++) {
+    ctx.moveTo(node.rect.circles[0].x, node.rect.circles[0].y);
 
-    ctx.lineTo(node.rect.circles[i].x, node.rect.circles[i].y)
-  }
+    for(let i=1,len=node.rect.circles.length; i<len; i++) {
 
-  ctx.closePath();
+        ctx.lineTo(node.rect.circles[i].x, node.rect.circles[i].y);
+    }
 
-  (node.fillStyle || node.bkType) && ctx.fill();
-  
-  ctx.stroke();
+    ctx.closePath();
+
+    (node.fillStyle || node.bkType) && ctx.fill();
+
+    ctx.stroke();
 }

package/core/src/middles/nodes/formselect.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '../../models';
+export declare function formSelect(ctx: CanvasRenderingContext2D, node: Node): void;

package/core/src/middles/nodes/formselect.js

@@ -0,0 +1,87 @@
+import {rectangle} from './rectangle';
+import {
+    createSelectElement,
+    createSelectDropdown} from '../../element';
+import {
+    setEventListener,
+    s8} from '../../utils';
+import {selectDefaultData} from '../../../../static';
+import {commonStore} from "../../store";
+
+export function formSelect(ctx, node) {
+    // 绘制一个底图，类似于占位符。
+    rectangle(ctx, node);
+    if (!commonStore[node.TID].selectDataPool[node.id]) {
+        const currentStore = commonStore[node.TID];
+        node.elementId = s8();
+        node.dash = 4;
+        currentStore.selectDataPool[node.id] = {
+            slideState: node.selectDropdown,
+            node: {
+                id: node.id,
+                color: node.font.color,
+                fontSize: node.font.fontSize,
+                selected: node.formData.selected || null
+            },
+            dom: {}
+        };
+        const bindBlockId = node.formData && node.formData.bindBlockId;
+        let selectRealData = bindBlockId && currentStore.selectRealDataPool[bindBlockId];
+        if(bindBlockId && selectRealData) {
+            // select与echarts互相关联
+            currentStore.selectDataPool[node.id].data = selectRealData;
+            const echartsData = currentStore.echartsDataPool[bindBlockId];
+            if(echartsData){
+                echartsData.bindId = node.id;
+            }else {
+                currentStore.echartsDataPool[bindBlockId] = {
+                    bindId: node.id
+                }
+            }
+        }else {
+            if(node.formData.ids) {
+                const optionIds = node.formData.ids.split(',');
+                const optionNames = node.formData.names.split(',');
+                const optionsData = [];
+                for (let i = 0; i < optionIds.length; i++) {
+                    optionsData.push({
+                        id: optionIds[i],
+                        name: optionNames[i]
+                    });
+                }
+                currentStore.selectDataPool[node.id].data = optionsData;
+            }else {
+                currentStore.selectDataPool[node.id].data = JSON.parse(JSON.stringify(selectDefaultData));
+            }
+        }
+        const select = createSelectElement(node);
+        currentStore.selectDataPool[node.id].dom.selectEle = select;
+        document.body.appendChild(select);
+        let selectDropdownEle = document.querySelector('.topology-select-dropdown');
+        if(!selectDropdownEle) {
+            selectDropdownEle = createSelectDropdown(node);
+            const parentEle = window.location.pathname.includes('workspace') ? document.getElementById('topology-canvas') : document.body;
+            parentEle.appendChild(selectDropdownEle);
+            // 鼠标按下
+            selectDropdownEle.addEventListener('mousedown', (e) => {
+                setEventListener(e, node.TID);
+            });
+        }
+        // 添加当前节点到div层
+        node.addToDiv();
+    }else {
+        const selectNode = commonStore[node.TID].selectDataPool[node.id];
+        if(selectNode.node.color === node.font.color && selectNode.node.fontSize === node.font.fontSize) return;
+        const selectDom = selectNode.dom;
+        if(!selectDom.selectInput) selectDom.selectInput = selectDom.selectEle.querySelector('.topology-select-input');
+        selectDom.selectInput.style.color = node.font.color;
+        selectDom.selectInput.style.fontSize = `${node.font.fontSize}px`;
+        if(node.selectDropdown) {
+            const liEle = selectDom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
+            liEle.forEach(function(element) {
+                element.style.color = node.font.color;
+                element.style.fontSize = `${node.font.fontSize}px`;
+            });
+        }
+    }
+}

package/core/src/middles/nodes/iframe.js

@@ -1,12 +1,29 @@
-import {rectangle} from 'dcim-topology2d/core'
+import {rectangle} from './rectangle';
+import {s8} from "../../utils";
+import {createIframeElement} from "../../element";
+import {commonStore} from "../../store";
 
 export function iframePrimeval(ctx, node) {
     //console.log('iframePrimeval############', node)
     // 绘制一个底图，类似于占位符。
     rectangle(ctx, node);
-    if (!node.elementLoaded) {
+    if (!commonStore[node.TID].iframeDataPool[node.id]) {
+        node.elementId = s8();
+        commonStore[node.TID].iframeDataPool[node.id] = {
+            node: {
+                id: node.id,
+                src: node.iframe
+            }
+        };
+        const iframe = createIframeElement(node);
+        commonStore[node.TID].iframeDataPool[node.id].iframe = iframe;
+        const parentEle = window.location.pathname.includes('workspace') ? document.getElementById('topology-canvas') : document.body;
+        parentEle.appendChild(iframe);
         // 添加当前节点到div层
-        node.addToDiv('init')
-        node.elementRendered = false
+        node.addToDiv();
+    }else {
+        const iframeNode = commonStore[node.TID].iframeDataPool[node.id];
+        if(iframeNode.node.src === node.iframe) return;
+        iframeNode.iframe.src = node.iframe;
     }
 }

package/core/src/middles/nodes/index.d.ts

@@ -17,6 +17,7 @@ export * from './diamond';
 export * from './diamond.rect';
 export * from './file';
 export * from './formtable';
+export * from './formselect';
 export * from './hexagon';
 export * from './hexagon.anchor';
 export * from './hexagon.rect';

package/core/src/middles/nodes/index.js

@@ -17,6 +17,7 @@ export * from './diamond';
 export * from './diamond.rect';
 export * from './file';
 export * from './formtable';
+export * from './formselect';
 export * from './hexagon';
 export * from './hexagon.anchor';
 export * from './hexagon.rect';