dcim-topology2d 1.1.2 → 1.1.3

package/chart-diagram/src/echarts/index.js

@@ -62,6 +62,12 @@ export function echarts(ctx, node) {
                         return '';
                     }
                 }
+                if(option.series.length < 2) {
+                    option.tooltip.formatter = function(params) {
+                        const item = params[0];
+                        return item.name + ' : ' + item.value;
+                    }
+                }
                 // if(option.series.length >= 2) {
 
                 //     for(let i=0; i<option.series.length-1 ; i++){

package/core/src/common.js

@@ -4,12 +4,13 @@ import {AnimateLayer} from './animateLayer';
 import {RenderLayer} from './renderLayer';
 import {Offscreen} from './offscreen';
 import {Line, Node, Point, EventAction} from './models';
-import {setConfItemNode} from './healps';
+import {setConfItemNode, setStatisticalData} from './healps';
 import {s8, formatPadding, getRect} from './utils';
 import { useStore, clearStore } from './store'
 import {POLL} from './poll';
 import axios from 'axios';
 import * as mqtt from './mqtt.min';
+import {echartsDefaultDataMap, echartsLineBarDefaultLegendData} from "../../static";
 
 var MoveInType;
 (function (MoveInType) {
@@ -176,7 +177,7 @@ var Common = /** @class */ (function () {
         window.topology = this;
     }
 
-    Common.prototype.conversionData = function (obj) {
+    Common.prototype.conversionData = function (obj, type) {
         this.clear();
         let data = JSON.parse(JSON.stringify(obj));
         if (!data) {
@@ -189,13 +190,17 @@ var Common = /** @class */ (function () {
         // for old data.
         if (data.nodes) {
             for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
-                var item = new Node(_a[_i]);
+                const item = new Node(_a[_i]);
                 this.store.data.pens.push(item);
                 this.store.pens[item.id] = item;
                 this.setSwitchTabData(item, _i);
+                // 初始化图表数据
+                if (item.name === 'echarts' && item.data && type !== 'mqtt') {
+                    item.data.echarts.option = setStatisticalData(item, 'def');
+                }
             }
             for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
-                var item = new Line(_c[_b]);
+                const item = new Line(_c[_b]);
                 this.store.data.pens.push(item);
                 this.store.pens[item.id] = item;
             }
@@ -203,12 +208,16 @@ var Common = /** @class */ (function () {
         // end.
         if (data.pens) {
             for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
-                var item = _e[_d];
+                const item = _e[_d];
                 if (!item.from) {
-                    var node = new Node(item);
+                    const node = new Node(item);
                     this.store.data.pens.push(node);
                     this.store.pens[item.id] = node;
                     this.setSwitchTabData(node, _d);
+                    // 初始化图表数据
+                    if (node.name === 'echarts' && node.data && type !== 'mqtt') {
+                        node.data.echarts.option = setStatisticalData(node, 'def');
+                    }
                 } else {
                     const linNode = new Line(item);
                     this.store.data.pens.push(linNode);

package/core/src/core.js

@@ -905,6 +905,7 @@ var Topology = (function (_super) {
 
             } else {
                 var node = new Node(json);
+                if(node.name === 'echarts') node.dash = 4;
                 node.setTID(_this.id);
                 node.clearChildrenIds();
                 _this.addNode(node, true);
@@ -921,7 +922,7 @@ var Topology = (function (_super) {
         });
         this.divLayer.canvas.focus();
     };
-    Topology.prototype.addNode = function (node, focus) {
+    Topology.prototype.addNode = function (node, focus, visit) {
         if (focus === void 0) {
             focus = false;
         }
@@ -946,7 +947,10 @@ var Topology = (function (_super) {
         this.store.data.pens.push(node);
         this.setSwitchTabData(node, this.store.data.pens.length-1);
         if (focus) {
-            this.activeLayer.setPens([node]);
+            if(!visit) {
+                this.activeLayer.setPens([node]);
+                this.dispatch('addNode', node);
+            }
             this.render();
             this.animate(true);
             this.cache();

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

@@ -5,4 +5,4 @@ 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, staticForType: string, chartData: any): Node;
+export declare function setStatisticalData(pen: Pen, dataType: any, staticForType: string, chartData: any): Node;

package/core/src/healps/changeData.js

@@ -1,4 +1,5 @@
 //let DETAILDATA = null;
+import { echartsDefaultDataMap } from '../../../static/index';
 export function setConfItemNode(pen, syn_synata) {
     if (!pen.data) return
     if(pen.data instanceof Array) {
@@ -78,7 +79,6 @@ export function setConfItemNode(pen, syn_synata) {
                 color = '#D38C00';
                 break;
         }
-
         // 显示的属性
         if (name === 'text') {
             pen.font.color = color
@@ -88,77 +88,92 @@ export function setConfItemNode(pen, syn_synata) {
         }else {
             pen.fillStyle = color
         }
-
         if (name === 'electricFan') setFanData(pen, _syn)
     }else {
         if (pen.elementRendered) pen.elementRendered = false;
-        if(pen.data.params && pen.data.echarts) {
+        if(pen.data.echarts) {
             const { echartDataValue } = syn_synata;
-            //const seriesData = pen.data.echarts.option.series.length > 1 ? echartDataValue : echartData
             const seriesData = echartDataValue;
-            const chartData = seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
-            const staticForType = pen.data.params.staticForType ? pen.data.params.staticForType : '';//统计类型：日，周，月，年
-            if(staticForType && (!chartData || !chartData[`${staticForType}_Data`]) || !chartData) {
-                // 无效配置
-            }else {
-                pen.data.echarts = setStatisticalData(pen, staticForType, chartData);
-            }
+            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
 }
-export function setStatisticalData(pen, staticForType, chartData) {
-    const node = Object.assign({}, pen);
-    const displayMode = parseInt(node.data.echarts.option.displayMode);
-    const chartOptions = staticForType ? chartData[`${staticForType}_Data`] : chartData;
+
+/**
+ * 设置图表数据
+ * @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 displayMode = parseInt(echartsOption.displayMode);
+    const defaultData = echartsDefaultDataMap[`displayMode_${displayMode}`];
+    const staticTypeData = chartData && chartData[`${staticForType}_Data`];
+    const chartRealData = staticForType ? staticTypeData || defaultData : chartData || defaultData;
+    dataType = staticForType && staticTypeData ? '' : 'def';
     if (displayMode === 1 || displayMode === 2){ // 折线图，柱状图
         //const xData = [], seriesData = [];
-        const seriesNodes = node.data.echarts.option.series;
+        const defaultSeriesNode = JSON.parse(JSON.stringify(defaultData.seriesData[0]));
+        const seriesNodes = echartsOption.series;
         // 双轴曲线
-        if(seriesNodes.length > 1 || node.data.params.curveNum > 1){
+        if(seriesNodes.length > 1 || node.data.params && node.data.params.curveNum > 1){
             const legendData = [];
-            if(!chartOptions) return;
-            node.data.echarts.option.xAxis[0].data = chartOptions.XData;
-            let legend = node.data.echarts.option.legend;
-            if(chartOptions.seriesData.length) {
-                //循环给每条统计数据赋值
-                seriesNodes.map((item, index) => {
-                    const { name, data } = chartOptions.seriesData[index];
-                    item.name = name;
+            echartsOption.xAxis[0].data = chartRealData.XData;
+            //循环给每条统计数据赋值
+            seriesNodes.map((item, index) => {
+                if(dataType === 'def') {
+                    if(!index) {
+                        item.data = defaultSeriesNode.data;
+                    }else {
+                        for(let i = 0, sdl = defaultSeriesNode.data.length; i < sdl; i++){
+                            displayMode === 1 ? defaultSeriesNode.data[i] -= 400 : defaultSeriesNode.data[i] += 100;
+                        }
+                        item.data = defaultSeriesNode.data;
+                    }
+                }else {
+                    const { name, data } = chartRealData.seriesData[index];
+                    if(name) {
+                        item.name = name;
+                        legendData.push(name);
+                    }
                     item.data = data;
-                    legendData.push(name);
-                });
-                legend.data = legendData;
-            }else {
-                node.data.echarts.option.legend = [];
-                node.data.echarts.option.series = []
-            }
+                }
+            });
+            if(echartsOption.legend && !dataType) echartsOption.legend.data = legendData;
         }else {
-            if(chartOptions) {
-                node.data.echarts.option.xAxis[0].data = chartOptions.XData;
-                node.data.echarts.option.series[0].data = chartOptions.seriesData;
+            echartsOption.xAxis[0].data = chartRealData.XData;
+            const { name, data } = chartRealData.seriesData[0];
+            if(name) seriesNodes[0].name = name;
+            seriesNodes[0].data = data;
+        }
+        if(echartsOption.legend && echartsOption.legend.data.length) {
+            echartsOption.legend.data = [];
+            for(let i=0, legLeng=echartsOption.legend.data.length; i<legLeng; i++){
+                echartsOption.legend.data.push(`标注${i+1}`);
             }
         }
     }
-    if(displayMode === 4) { // 电量图
-        node.data.echarts.option.yAxis[0].data = chartOptions.XData;
-        node.data.echarts.option.yAxis[1].data = chartOptions.seriesData;
-        node.data.echarts.option.series[0].data = chartOptions.seriesData;
-        if(!chartOptions.seriesData.length) {
-            node.data.echarts.option.series[1].data = [];
-        }else {
-            let barData = [];
-            for (let sd = 0; sd < chartOptions.seriesData.length; sd++) {
-                barData.push(100);
-            }
-            node.data.echarts.option.series[1].data = barData;
+    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){ // 饼图
-        const colors = node.data.echarts.option.color;
-        const pieData = staticForType ? chartData : chartData.data;
+    if (displayMode === 5 || displayMode === 3){ // 饼图/环形图
+        const colors = echartsOption.color;
+        const pieData = staticForType ? chartData || defaultData : chartData && chartData.data || defaultData.seriesData;
         const seriesData = [];
-        if(!pieData) return;
         pieData.map((chd, index) => {
             seriesData.push({
                 itemStyle: { color: colors[index] },
@@ -166,15 +181,15 @@ export function setStatisticalData(pen, staticForType, chartData) {
                 value: chd.value
             })
         })
-        node.data.echarts.option.series[0].data = seriesData;
+        echartsOption.series[0].data = seriesData;
     }
-    if(displayMode === 6 && chartData){ // 仪表盘
+    if(displayMode === 6){ // 仪表盘
         // 仪表盘分两种，分别有不同的取值方式，下面两行先注释掉
         // node.appearance.title.text = chartData.name;
         // node.data.echarts.option.title.text = chartData.name;
-        node.data.echarts.option.series[0].data[0].value = chartData.value;
+        echartsOption.series[0].data[0].value = chartData && chartData.value || defaultData.value;
     }
-    return node.data.echarts;
+    return echartsOption;
 }
 export function setNodeEvents(item, pen) {
 

package/core/src/models/node.js

@@ -80,7 +80,7 @@ var Node = /** @class */ (function (_super) {
         _this.leakageFillStyle = json.leakageFillStyle || '#ff0000';
         _this.bindStaticId = json.bindStaticId || '';
         _this.buttonCheckSlide = json.buttonCheckSlide || '';
-        _this.activeImgeIndex = json.activeImgeIndex || false;
+        _this.visitStrokeStyle = json.visitStrokeStyle || '';
         _this.thBottomStrokeStyle = json.thBottomStrokeStyle || '#fff';
         _this.thBottomLineWidth = json.thBottomLineWidth || 1;
         // 兼容老数据

package/core/src/models/pen.js

@@ -19,6 +19,7 @@ var Pen = /** @class */ (function () {
         this.globalAlpha = 1;
         this.dash = 0;
         this.strokeStyle = '';
+        this.visitStrokeStyle = '';
         this.fillStyle = '';
         this.defaultFillStyle = '';
         this.defaultFontColor = '#fff';
@@ -71,6 +72,8 @@ var Pen = /** @class */ (function () {
             if (json.lineWidth || json.lineWidth === 0) {
                 this.lineWidth = json.lineWidth;
             }
+            this.activeImgeIndex = json.activeImgeIndex || false;
+            this.visitStrokeStyle = json.visitStrokeStyle || '';
             this.strokeStyle = json.strokeStyle || '';
             this.fillStyle = json.fillStyle || '';
             this.defaultFillStyle = json.defaultFillStyle || '';
@@ -147,7 +150,13 @@ var Pen = /** @class */ (function () {
         if (this.lineWidth > 1) {
             ctx.lineWidth = this.lineWidth;
         }
-        ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
+        if(this.dash === 4) {
+            ctx.strokeStyle = 'transparent';
+        }else {
+            const staticStrokeStyle = this.strokeStyle || '#222';
+            ctx.strokeStyle = !this.activeImgeIndex ? this.visitStrokeStyle || staticStrokeStyle : this.defaultStrokeStyle || staticStrokeStyle;
+        }
+        //ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
         this.fillStyle && (ctx.fillStyle = this.fillStyle);
         if (this.lineCap) {
             ctx.lineCap = this.lineCap;

package/core/src/preview.js

@@ -49,9 +49,9 @@ var Preview = (function (_super) {
                     _this.moveIn.type = _this.moveInType.None;
                     _this.scheduledAnimationFrame = false;
                     _this.hideTip();
-                    _this.divLayer.canvas.style.cursor = 'default';
+                    _this.setAttributeForCanvasPoint('default');
                     if (hoverNode) {
-                        if(eventNode) _this.divLayer.canvas.style.cursor = 'pointer';
+                        if(eventNode) _this.setAttributeForCanvasPoint('pointer');
                         if(hoverNode.visible) _this.showTip(hoverNode, pos);
                         _this.moveIn.type = moveType;
                     }
@@ -68,14 +68,14 @@ var Preview = (function (_super) {
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
             _this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
             if (e.altKey) {
-                _this.divLayer.canvas.style.cursor = 'pointer';
+                _this.setAttributeForCanvasPoint('pointer');
             }
             if (_this.inputObj) {
                 _this.setNodeText();
             }
             const {eventType, value} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
             if (_this.moveIn.type == _this.moveInType.Nodes) {
-                _this.divLayer.canvas.style.cursor = 'pointer';
+                _this.setAttributeForCanvasPoint('pointer');
                 switch (eventType) {
                     case downDataType.Window:
                         omouseEventPrototDoWindowFn(_this.moveIn.eventNode, _this.moveIn.hoverNode);
@@ -103,7 +103,11 @@ var Preview = (function (_super) {
             _this.mouseDown = null;
             _this.lastTranlated.x = 0;
             _this.lastTranlated.y = 0;
-            _this.divLayer.canvas.style.cursor = _this.moveIn.eventNode ? 'pointer' : 'default';
+            if(_this.moveIn.eventNode) {
+                _this.setAttributeForCanvasPoint('pointer');
+            }else {
+                _this.setAttributeForCanvasPoint('default');
+            }
         };
         _this.divLayer.canvas.onmousemove = this.onMouseMove;
         _this.divLayer.canvas.onmousedown = this.onmousedown;
@@ -158,14 +162,19 @@ var Preview = (function (_super) {
             return false;
         };
         return _this;
+    }
+    Preview.prototype.setAttributeForCanvasPoint = function (type){
+
+        this.divLayer.canvas.setAttribute('class', `canvas-point ${type}`);
+
     };
     Preview.prototype.fitViewPreview = function (restore){
         this.fitView(null, restore);
         this.render();
     };
     // open - redraw by the data
-    Preview.prototype.open = function (topoJSon) {
-        this.conversionData(topoJSon);
+    Preview.prototype.open = function (topoJSon, type) {
+        this.conversionData(topoJSon, type);
         this.fitView();
         this.render(true);
         this.animate(true);

package/core/src/renderLayer.js

@@ -148,7 +148,7 @@ var RenderLayer = /** @class */ (function (_super) {
     };
 
     RenderLayer.prototype.bkImgRectResize = function (size) {
-        const bkImageRect = commonStore[this.TID].bkImageRect;
+        const bkImageRect = commonStore[this.TID].data.bkImageRect;
         if(!size) return;
         if(bkImageRect) {
             let x = bkImageRect.x ? Number(bkImageRect.x) : 0;

package/core/src/utils/canvas.js

@@ -1,4 +1,4 @@
-import { Point } from '../models/point';
+import { Point } from '../models';
 export function flatNodes(nodes) {
     var result = {
         nodes: [],

package/core/src/utils/onmousevent.js

@@ -1,5 +1,6 @@
 import { ptInPolyXY } from './math';
 import { moveDataType, downDataType } from './construction'
+import { Node } from '../models'
 // 执行window函数
 export function omouseEventPrototDoWindowFn (eventNode, node) {
 
@@ -18,8 +19,16 @@ export function mousMoveFun(type, pos, data) {
 
     for (var _i = 0, _a = data; _i < _a.length; _i++) {
         var item = _a[_i];
-        const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
-        if(isPoint) {
+        //const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
+        let isInPointNode = null;
+        if(item.name === 'arbitraryGraph') {
+            // 任意多边形通过点获取区域
+            isInPointNode = ptInPolyXY(pos, item.rotatedAnchors);
+        }else {
+            if(!(item instanceof Node)) item = new Node(item);
+            isInPointNode = item.hit(pos);
+        }
+        if(isInPointNode) {
             params.hoverNode = item;
             params.order = _i;
         }
@@ -43,7 +52,7 @@ export function mousDownFun(type, eventNode) {
     if(action === 3) {
         params.eventType = downDataType.Window; // 打开会话窗口
     }else if(action === 7){
-        params.eventType = downDataType.Showhide; // 链接跳转
+        params.eventType = downDataType.Showhide; // 显示/隐藏
         params.value = eventNode.value;
     }else if(action === 8){
         params.eventType = downDataType.Tabswitch; // Tab切换

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "",
   "main": "-",
   "scripts": {

package/static/echartsDefaultData.js

@@ -0,0 +1,95 @@
+/**
+ * echarts图表默认数据组
+ * @type {{displayMode_1: string}}
+ */
+export const echartsDefaultDataMap = {
+    displayMode_1: {
+        legend: null,
+        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        seriesData: [{
+            type: 'line',
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
+        }]
+    }, // 折线图
+    displayMode_2: {
+        legend: null,
+        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        seriesData: [{
+            name: '',
+            data: [20, 60, 110, 220, 80, 100, 180]
+        }]
+    },// 柱状图
+    displayMode_3: {
+        legend: null,
+        seriesData: [{
+            value: 10,
+            name: '机房1'
+        }, {
+            value: 30,
+            name: '机房2'
+        }, {
+            value: 50,
+            name: '机房3'
+        }, {
+            value: 20,
+            name: '机房4'
+        }, {
+            value: 60,
+            name: '机房5'
+        }, {
+            value: 15,
+            name: '机房6'
+        }, {
+            value: 18,
+            name: '机房7'
+        }, {
+            value: 26,
+            name: '机房8'
+        }]
+    },// 环形图
+    displayMode_4: {
+        legend: null,
+        total: 100,
+        XData: ['CA机房', '五层IT', '四层IT', '冷水机组'],
+        seriesData: [{
+            data: [5, 20, 50, 80]
+        }]
+    },// TOP排行榜
+    displayMode_5: {
+        legend: null,
+        seriesData: [{
+            name: '一般',
+            value: 0
+        }, {
+            name: '较大',
+            value: 0
+        }, {
+            name: '重大',
+            value: 0
+        }, {
+            name: '严重',
+            value: 0
+        }, {
+            name: '高级',
+            value: 0
+        }]
+    },// 饼图
+    displayMode_6: {
+        value: 8
+    },// 仪表盘
+}
+// 柱状图和折线图默认标注
+export const echartsLineBarDefaultLegendData = {
+    data: ['标注1'],
+    icon: 'rich',
+    show: true,
+    itemWidth: 14,
+    itemHeight: 14,
+    textStyle: {
+        color: '#C6D1DB',
+        fontSize: '14px',
+    },
+    top: '12%',
+    left: '10%',
+    itemGap: 8
+};

package/static/index.js

@@ -0,0 +1 @@
+export * from './echartsDefaultData';

package/style/index.css

@@ -0,0 +1,10 @@
+.canvas-point.pointer{
+    cursor: pointer;
+}
+.canvas-point,
+.canvas-point.default{
+    cursor: default;
+}
+.canvas-point.pointer > div{
+    z-index: -2;
+}