dcim-topology2d 1.1.6 → 2.0.2

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,13 @@
 //let DETAILDATA = null;
-import { echartsDefaultDataMap } from '../../../static';
-import { commonStore } from '../store'
+import {commonStore} from '../store';
+import {echartsRealDataPool} from '../../../store';
+import { getEchartsRealData } from '../utils/conversion';
 export function setConfItemNode(pen, syn_synata) {
-    if (!pen.data) return
-    commonStore[pen.TID].data.dataResize = 1;
+    if (!pen.data) return;
+    if(commonStore[pen.TID]) commonStore[pen.TID].data.dataResize = 1;
     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 +15,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 +28,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 +50,7 @@ export function setConfItemNode(pen, syn_synata) {
                 }
             }
         })
+        if(!_syn) return;
         // const type = parseInt(_syn.type) // 是否是开关量
         // 显示的值
         if (isResetVal) pen.text = `${_syn.value}${_syn.unit}`;
@@ -96,124 +97,17 @@ export function setConfItemNode(pen, 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);
+            const realData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
+            if (Array.isArray(realData)) {
+                getEchartsRealData(pen, realData);
+            }else {
+                echartsRealDataPool[pen.id] = realData;
+            }
         }
     }
     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;
-        }
-    }
-    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;
-    }
-    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,73 @@
+import {rectangle} from './rectangle';
+import {
+    createSelectElement,
+    createSelectDropdown} from '../../element';
+import {
+    setEventListener,
+    s8} from '../../utils';
+import {echartsDataPool, selectDataPool, selectRealDataPool} from '../../../../store';
+import {selectDefaultData} from '../../../../static';
+
+export function formSelect(ctx, node) {
+    // 绘制一个底图，类似于占位符。
+    rectangle(ctx, node);
+    if (!selectDataPool[node.id]) {
+        node.elementId = s8();
+        node.dash = 4;
+        selectDataPool[node.id] = {
+            slideState: node.selectDropdown,
+            node: {
+                id: node.id,
+                color: node.font.color,
+                fontSize: node.font.fontSize,
+                selected: null
+            },
+            dom: {}
+        };
+        const bindBlockId = node.formData && node.formData.bindBlockId;
+        let selectRealData = bindBlockId && selectRealDataPool[bindBlockId];
+        if(bindBlockId && selectRealData) {
+            // select与echarts互相关联
+            selectDataPool[node.id].data = selectRealData;
+            const echartsData = echartsDataPool[bindBlockId];
+            if(echartsData){
+                echartsData.bindId = node.id;
+            }else {
+                echartsDataPool[bindBlockId] = {
+                    bindId: node.id
+                }
+            }
+        }else {
+            selectDataPool[node.id].data = JSON.parse(JSON.stringify(selectDefaultData));
+        }
+        const select = createSelectElement(node);
+        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);
+            });
+        }
+        // 添加当前节点到div层
+        node.addToDiv();
+    }else {
+        const selectNode = 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 {iframeDataPool} from '../../../../store';
+import {s8} from "../../utils";
+import {createIframeElement} from "../../element";
 
 export function iframePrimeval(ctx, node) {
     //console.log('iframePrimeval############', node)
     // 绘制一个底图，类似于占位符。
     rectangle(ctx, node);
-    if (!node.elementLoaded) {
+    if (!iframeDataPool[node.id]) {
+        node.elementId = s8();
+        iframeDataPool[node.id] = {
+            node: {
+                id: node.id,
+                src: node.iframe
+            }
+        };
+        const iframe = createIframeElement(node);
+        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 = 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';

package/core/src/models/node.d.ts

@@ -58,6 +58,10 @@ export declare class Node extends Pen {
         linear: boolean;
         state: Node;
     }[];
+    formData: {
+        bindBlockId: string;
+        theme: number;
+    };
     animateAlone: boolean;
     gif: boolean;
     video: string;

package/core/src/models/node.js

@@ -20,7 +20,7 @@ import { defaultAnchors } from '../middles/default.anchor';
 import { defaultIconRect, defaultTextRect } from '../middles/default.rect';
 import { text, tableText, defaultText, iconfont } from '../middles/nodes/text';
 import { Store } from 'le5le-store';
-import { abs, s8, animateType, createChildrenDivByElementId } from '../utils';
+import { abs, s8, animateType } from '../utils';
 export const images = {};
 export const defaultImages = {};
 var Node = /** @class */ (function (_super) {
@@ -37,8 +37,10 @@ var Node = /** @class */ (function (_super) {
         _this.animateFrames = [];
         _this.type = PenType.Node;
         _this.TID = json.TID;
+        _this.selectDropdown = json.selectDropdown || false;
         _this.is3D = json.is3D;
         _this.z = json.z;
+        _this.order = json.order;
         _this.zRotate = json.zRotate || 0;
         _this.borderRadius = +json.borderRadius || 0;
         _this.icon = json.icon;
@@ -81,7 +83,7 @@ var Node = /** @class */ (function (_super) {
         _this.leakageEnd = json.leakageEnd || 0;
         _this.leakageFillStyle = json.leakageFillStyle || '#ff0000';
         _this.bindStaticId = json.bindStaticId || '';
-        _this.buttonCheckSlide = json.buttonCheckSlide || '';
+        //_this.buttonCheckSlide = json.buttonCheckSlide || '';
         _this.visitStrokeStyle = json.visitStrokeStyle || '';
         _this.thBottomStrokeStyle = json.thBottomStrokeStyle || '#fff';
         _this.thBottomLineWidth = json.thBottomLineWidth || 1;
@@ -235,17 +237,11 @@ var Node = /** @class */ (function (_super) {
             data: tableData
         })
     };
-    Node.prototype.addToDiv = function (type) {
+    Node.prototype.addToDiv = function () {
         if (this.iframe ||
                 this.elementId ||
                 this.hasGif()) {
             Store.set(this.generateStoreKey('LT:addDiv'), this);
-            // if(type || this.iframe) {
-            //     // 复合Echarts初始化
-            //     createChildrenDivByElementId(this);
-            // }else {
-            //     Store.set(this.generateStoreKey('LT:addDiv'), this);
-            // }
         }
     };
     Node.prototype.hasGif = function () {
@@ -275,6 +271,7 @@ var Node = /** @class */ (function (_super) {
         this.children = [];
         for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
             var item = children_1[_i];
+            item.visible = this.visible;
             var child = void 0;
             switch (item.type) {
                 case PenType.Line:
@@ -620,8 +617,8 @@ var Node = /** @class */ (function (_super) {
                     this.dash = item.state.dash;
                     this.strokeStyle = item.state.strokeStyle;
                     this.fillStyle = item.state.fillStyle;
-                    this.text = item.state.text;
-                    this.font = item.state.font;
+                    //this.text = item.state.text;
+                    //this.font = item.state.font;
                     this.lineWidth = item.state.lineWidth;
                     this.rotate = item.state.rotate;
                     this.globalAlpha = item.state.globalAlpha;
@@ -647,8 +644,8 @@ var Node = /** @class */ (function (_super) {
                 this.dash = item.state.dash;
                 this.strokeStyle = item.state.strokeStyle;
                 this.fillStyle = item.state.fillStyle;
-                this.text = item.state.text;
-                this.font = item.state.font;
+                //this.text = item.state.text;
+                //this.font = item.state.font;
                 var rate = (timeline - item.start) / item.duration;
                 if (item.linear) {
                     // 线条左右流动动画
@@ -745,21 +742,20 @@ var Node = /** @class */ (function (_super) {
         this['oldRect'] = this.rect.clone();
         if(this.rect.circles) {
             for(let c=0, circles= this.rect.circles; c<circles.length; c++) {
-                circles[c].x = (center.x - (center.x - circles[c].x)) * w;
-                circles[c].y = (center.y - (center.y - circles[c].y)) * h + 15;
+                circles[c].x = center.x - (center.x - circles[c].x) * w;
+                circles[c].y = center.y - (center.y - circles[c].y) * h;
             }
-        }else {
-            this.rect.x = center.x - (center.x - this.rect.x) * w;
-            if(this.rotate % 180) {
-                this.rect.x = this.rect.x + (this.rect.width * w - this.rect.width * h) / 2;
-            }
-            this.rect.y = center.y - (center.y - this.rect.y) * h;
         }
-        this.z *= scale;
+        this.rect.x = center.x - (center.x - this.rect.x) * w;
+        if(this.rotate % 180) {
+            this.rect.x = this.rect.x + (this.rect.width * w - this.rect.width * h) / 2;
+        }
+        this.rect.y = center.y - (center.y - this.rect.y) * h;
         this.rect.width *= this.rotate % 180 ? h : w;
         this.rect.height *= h;
         this.rect.ex = this.rect.x + this.rect.width;
         this.rect.ey = this.rect.y + this.rect.height;
+        this.z *= scale;
         if(!(center.type && center.type === 'bottLogo')) {
             if (this.imageWidth) {
                 this.imageWidth *= w;
@@ -864,6 +860,12 @@ var Node = /** @class */ (function (_super) {
         }
     };
     Node.prototype.translate = function (x, y) {
+        if(this.rect.circles) {
+            for(let c=0, circles= this.rect.circles; c<circles.length; c++) {
+                circles[c].x += x;
+                circles[c].y += y;
+            }
+        }
         this.rect.x += x;
         this.rect.y += y;
         this.rect.ex = this.rect.x + this.rect.width;

package/core/src/models/pen.js

@@ -24,7 +24,7 @@ var Pen = /** @class */ (function () {
         this.font = {
             color: '',
             fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
-            fontSize: 12,
+            fontSize: json.name === 'select' ? 14 : 12,
             lineHeight: 1.5,
             fontStyle: 'normal',
             fontWeight: 'normal',
@@ -261,7 +261,6 @@ var Pen = /** @class */ (function () {
                 }catch (error) { }
             }
             console.log('doSocketMqtt-------------', jsonNode)
-            Store.set('mqtt:responseData', jsonNode)
             //const { areaData, assetData, data } = jsonNode
             if (!this.data && this.data.length <= 0 && typeof this.data !== 'object') return
             // const subscribeObj = {

package/core/src/models/rect.js

@@ -8,10 +8,10 @@ var Rect = /** @class */ (function () {
         this.height = height;
         this.center = new Point(0, 0);
         if (width < 0) {
-            width = 0;
+            this.width = 0;
         }
         if (height < 0) {
-            height = 0;
+            this.height = 0;
         }
         this.init();
     }

package/core/src/options.d.ts

@@ -11,6 +11,7 @@ export declare enum KeydownType {
     Canvas = 1
 }
 export interface Options {
+    type?: string;
     cacheLen?: number;
     extDpiRatio?: number;
     width?: string | number;