dcim-topology2d 1.1.2 → 1.1.4

package/chart-diagram/src/utils/drawGraphic.js

@@ -0,0 +1,97 @@
+// 绘制柱子切面
+export function drawGraphicShape(appearance) {
+  const offsetX = appearance.offsetX;
+  const offsetY = appearance.offsetY;
+  // 绘制左侧面
+  const CubeLeft = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      // 会canvas的应该都能看得懂，shape是从custom传入的
+      const xAxisPoint = shape.xAxisPoint;
+      // console.log(shape);
+      const c0 = [shape.x, shape.y];
+      const c1 = [shape.x - offsetX, shape.y - offsetY];
+      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+      const c3 = [xAxisPoint[0], xAxisPoint[1]];
+      ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
+    },
+  });
+  // 绘制右侧面
+  const CubeRight = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const xAxisPoint = shape.xAxisPoint;
+      const c1 = [shape.x, shape.y];
+      const c2 = [xAxisPoint[0], xAxisPoint[1]];
+      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+      const c4 = [shape.x + offsetX, shape.y - offsetY];
+      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+    },
+  });
+  // 绘制顶面
+  const CubeTop = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const c1 = [shape.x, shape.y];
+      const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+      const c3 = [shape.x, shape.y - offsetX];
+      const c4 = [shape.x - offsetX, shape.y - offsetY];
+      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+    },
+  });
+  return {
+    CubeLeft,
+    CubeRight,
+    CubeTop
+  }
+}
+// 线性渐变
+export function graphicLinearGradient(nr, nb, nl, nt, colors) {
+  return new echarts.graphic.LinearGradient(nr, nb, nl, nt, colors);
+}
+export function setSeriesRenderGroup(appearance, api) {
+  const seriesRenderData = [];
+  const groupTypeData = ['CubeLeft', 'CubeRight', 'CubeTop'];
+  const location = api.coord([api.value(0), api.value(1)]);
+  for (let i = 0; i < groupTypeData.length; i++) {
+    const groupItem = groupTypeData[i];
+    const groupNode = {
+      type: groupItem,
+      shape: {
+        api,
+        xValue: api.value(0),
+        yValue: api.value(1),
+        x: location[0],
+        y: location[1],
+        xAxisPoint: api.coord([api.value(0), 0]),
+      }
+    };
+    if(i === groupTypeData.length - 1){
+      // 顶部切面颜色填充
+      groupNode.style = {
+        fill: appearance.seriesCubeTopColor
+      }
+    }else {
+      // 左右切面颜色填充
+      let fillColor = graphicLinearGradient(0, 0, 0, 1, appearance[`series${groupItem}Gradient`]);
+      const cubeColorLinear = appearance[`series${groupItem}Linear`];
+      if(!cubeColorLinear) {
+        fillColor = appearance[`series${groupItem}Color`];
+      }
+      groupNode.style = {
+        fill: fillColor
+      }
+    }
+    seriesRenderData.push(groupNode);
+  }
+  return seriesRenderData;
+}

package/chart-diagram/src/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './conversion';
+export * from './drawGraphic';
+export * from './changeOptions';

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

@@ -0,0 +1,3 @@
+export * from './conversion';
+export * from './drawGraphic';
+export * from './changeOptions';

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 { destroyEcharts } from "../../static";
 
 var MoveInType;
 (function (MoveInType) {
@@ -51,10 +52,10 @@ var Common = /** @class */ (function () {
         this.store.options.interval = 50;
         //Store.set(this.generateStoreKey('topology-data'), this.data);
         var id = this.id;
-        this.animateLayer = new AnimateLayer(id); 
-        this.offscreen = new Offscreen(id); 
+        this.animateLayer = new AnimateLayer(id);
+        this.offscreen = new Offscreen(id);
         this.canvas = new RenderLayer(id);
-        this.divLayer = new DivLayer(id); 
+        this.divLayer = new DivLayer(id);
         this.divLayer.canvas.tabIndex = 0;
         this.divLayer.canvas.ondblclick = this.ondblclick;
         this.divLayer.canvas.onblur = function () {
@@ -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) {
@@ -184,18 +185,23 @@ var Common = /** @class */ (function () {
         }
         Object.assign(this.store.data, data);
         this.store.data.pens = [];
-        this.setBKImageRect();
         this.openCount = 0
         // for old data.
         if (data.nodes) {
             for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
-                var item = new Node(_a[_i]);
+                _a[_i].TID = this.id;
+                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]);
+                _c[_b].TID = this.id;
+                const item = new Line(_c[_b]);
                 this.store.data.pens.push(item);
                 this.store.pens[item.id] = item;
             }
@@ -203,12 +209,17 @@ 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];
+                item.TID = this.id;
                 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);
@@ -224,18 +235,6 @@ var Common = /** @class */ (function () {
         this.store.parentElem.scrollLeft = 0;
         this.store.parentElem.scrollTop = 0;
     };
-    Common.prototype.setBKImageRect = function () {
-        if (this.store.data.bkImageRect) {
-            this.store.data.bkImageRect.x = this.store.data.bkImageRect.x ? Number(this.store.data.bkImageRect.x) : 0;
-            this.store.data.bkImageRect.y = this.store.data.bkImageRect.y ? Number(this.store.data.bkImageRect.y) : 0;
-            this.store.data.bkImageRect.width = this.store.data.bkImageRect.width ? Number(this.store.data.bkImageRect.width) : this.canvas.width;
-            this.store.data.bkImageRect.height = this.store.data.bkImageRect.height ? Number(this.store.data.bkImageRect.height) : this.canvas.height;
-            this.store.data.bkImageRect.center = {
-                x: this.store.data.bkImageRect.x + this.store.data.bkImageRect.width / 2,
-                y: this.store.data.bkImageRect.y + this.store.data.bkImageRect.height / 2
-            }
-        }
-    };
     Common.prototype.setSwitchTabData = function (node, index, type) {
         if (type) {
             let topologyChangeData = Store.get('TCD:topologyChangeData');
@@ -269,12 +268,12 @@ var Common = /** @class */ (function () {
     };
     Common.prototype.canvasResize = function (size) {
         try {
-          this.canvas.resize(size);
-          //this.canvas.bkImgRectResize(size);
-          this.offscreen.resize(size);
-          this.divLayer.resize(size);
+            this.canvas.resize(size);
+            //this.canvas.bkImgRectResize(size);
+            this.offscreen.resize(size);
+            this.divLayer.resize(size);
         }catch (err) {
-          //console.log('resize-----', err)
+            //console.log('resize-----', err)
         }
     };
     // Render or redraw
@@ -878,7 +877,7 @@ var Common = /** @class */ (function () {
         let path = '';
         let assetData = null;
         let pathRewrite = this.pathRewrite;
-        let canvasData = JSON.parse(JSON.stringify(this.store.data));
+        let canvasData = this.store.data;
         let mqttTopics = this.store.data.mqttTopics;
         let tagParamsData = tagParams;
         let detailJson = null;
@@ -954,6 +953,7 @@ var Common = /** @class */ (function () {
         // console.log('收到消息', syncData)
         Store.set('mqtt:responseData', syncData);
         data.pens.map((item) => {
+            item.TID = this.id;
             if (item.children && item.children.length) {
                 item.children.map((_item) => {
                     item.defaultFillStyle = item.fillStyle;
@@ -982,9 +982,12 @@ var Common = /** @class */ (function () {
                             }
                         })
                         //console.log('定制函数=====')
-                        console.log('定制函数------')
-                        const func = new Function('pen', 'params', dataValue.value)
-                        func(_item, JSON.stringify(retData))
+                        try {
+                            const func = new Function('pen', 'params', dataValue.value)
+                            func(_item, JSON.stringify(retData))
+                        }catch (e) {
+                            console.log(`自定义函数 ${item.id} 出错>>>`, e);
+                        }
                     } else {
                         // console.log('默认函数')
                         setConfItemNode(_item, syncData);
@@ -1017,10 +1020,12 @@ var Common = /** @class */ (function () {
                             }
                         }
                     });
-                    const func = new Function('pen', 'params', dataValue.value);
-                    func(item, JSON.stringify(retData));
-                    //const machData = func(item, JSON.stringify(retData));
-                    console.log('定制函数------------');
+                    try {
+                        const func = new Function('pen', 'params', dataValue.value);
+                        func(item, JSON.stringify(retData));
+                    }catch (e) {
+                        console.log(`自定义函数 ${item.id} 出错>>>`, e);
+                    }
                 } else {
                     // console.log('默认函数')
                     setConfItemNode(item, syncData);
@@ -1255,6 +1260,7 @@ var Common = /** @class */ (function () {
         this.offscreen.destroy();
         this.offscreen = null;
         this.store.parentElem = null;
+        destroyEcharts();
         Store.set('form:tableData', null);
         Store.set('TIMEOUT:currentPage', `empty${this.s8()}`);
         Store.set('FORM:tableData', {

package/core/src/core.js

@@ -47,6 +47,7 @@ var Topology = (function (_super) {
             close: false, //闭合
         };
         _this.onMouseMove = function (e) {
+            _this.store.data.dataResize = 0;
             if (Store.get('addingArbitraryGraph')) {
                 return
             }
@@ -339,6 +340,7 @@ var Topology = (function (_super) {
             });
         };
         _this.onmousedown = function (e) {
+            _this.store.data.dataResize = 0;
             if (e.button !== 0)
                 return;
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
@@ -691,20 +693,7 @@ var Topology = (function (_super) {
                     isDragging: false, //是否在抓取
                     close: false, //闭合
                 };
-                if (obj.name == 'temp') {
-                    // 温湿度元件
-                    let activeTempNodes = []
-                    _this.dropNodes([obj.children[0]], event.offsetX - 23.5, event.offsetY)
-                    activeTempNodes.push(_this.activeLayer.pens[0])
-                    _this.dropNodes([obj.children[1]], event.offsetX + 11.5, event.offsetY - 8.5)
-                    activeTempNodes.push(_this.activeLayer.pens[0])
-                    _this.dropNodes([obj.children[2]], event.offsetX + 11.5, event.offsetY + 8.5)
-                    activeTempNodes.push(_this.activeLayer.pens[0])
-                    _this.activeLayer.pens = activeTempNodes
-                    _this.combine(activeTempNodes, null, 'temp');
-                } else {
-                    _this.dropNodes(Array.isArray(obj) ? obj : [obj], event.offsetX, event.offsetY);
-                }
+                _this.dropNodes(Array.isArray(obj) ? obj : [obj], event.offsetX, event.offsetY);
             } catch (_a) {
             }
         };
@@ -863,48 +852,16 @@ var Topology = (function (_super) {
             }
 
             if (json.name == 'define') {
-
                 // console.log('创建自定义组件 ', json);
-
                 console.log('store 中的 自定义 ', Store.get('defineNode'));
-                if (_this.store.data.locked) return
-                // let defineNode = Store.get('defineNode');
-                // let nodesList = Store.get('defineNode').pens;
-                let defineNode = JSON.parse(localStorage.getItem("defineNode_"))
-                let nodesList = defineNode.pens;
-
-                let renderNodesList = [];
-
-                for (let i = 0, len = nodesList.length; i < len; i++) {
-
-                    nodesList[i].rect.x = offsetX - nodesList[i].rect.width / 2;
-
-                    nodesList[i].rect.y = offsetY - nodesList[i].rect.height / 2;
-
-                    let node = new Node(nodesList[i]);
-
-                    node.setTID(s8());
-                    node.id = s8();
-                    node.fileId = defineNode.fileId;
-
-                    // console.log('push之前的node', node);
-
-                    _this.store.data.pens.push(node);
-
-                    renderNodesList.push(node);
-                }
-                _this.activeLayer.setPens([renderNodesList[0]]);
-
-                _this.render(false);
-
-                _this.animate(true);
-
-                _this.cache();
-
-                _this.dispatch('addNode', renderNodesList[0]);
-
-            } else {
+                _this.dropDefineNode(json, offsetX, offsetY);
+            } else if(json.name === 'temp') {
+                // 温湿度元件
+                _this.dropTempNode(json);
+            }else {
                 var node = new Node(json);
+                if(node.name === 'echarts') node.dash = 4;
+                if(node.name === 'iframe') node.iframe = 'http://www.yingzeshiji.com.cn/'; // 默认展示盈泽世纪官网
                 node.setTID(_this.id);
                 node.clearChildrenIds();
                 _this.addNode(node, true);
@@ -921,7 +878,76 @@ var Topology = (function (_super) {
         });
         this.divLayer.canvas.focus();
     };
-    Topology.prototype.addNode = function (node, focus) {
+    Topology.prototype.setNodeData = function(node) {
+        const item = new Node(node);
+        item.setTID(this.id);
+        item.clearChildrenIds();
+        return item;
+    };
+    // 添加温湿度元件
+    Topology.prototype.dropTempNode = function(json) {
+        const nodeChildren = json.children;
+        delete json['children'];
+        const node = this.setNodeData(json);
+        const combinTempData = [];
+        let nodeX = node.rect.x;
+        let nodeY = node.rect.y;
+        for (let i = 0; i < nodeChildren.length; i++) {
+            const childNode = this.setNodeData(nodeChildren[i]);
+            childNode.rect.x = i === 0 ? nodeX : nodeX + childNode.rect.width / 2;
+            childNode.rect.y = i === 2 ? nodeY + childNode.rect.height + 1 : nodeY;
+            childNode.rect.center = {
+                x: childNode.rect.x + childNode.rect.width / 2,
+                y: childNode.rect.y + childNode.rect.height / 2
+            }
+            childNode.rect.ex = childNode.rect.x + childNode.rect.width;
+            childNode.rect.ey = childNode.rect.y + childNode.rect.height;
+            combinTempData.push(childNode);
+        }
+        this.combine(combinTempData, null, 'temp');
+        this.render();
+        this.cache();
+    };
+    // 添加自定义元件
+    Topology.prototype.dropDefineNode = function(josn, offsetX, offsetY) {
+        var _this = this;
+        if (_this.store.data.locked) return
+        // let defineNode = Store.get('defineNode');
+        // let nodesList = Store.get('defineNode').pens;
+        let defineNode = JSON.parse(localStorage.getItem("defineNode_"))
+        let nodesList = defineNode.pens;
+
+        let renderNodesList = [];
+
+        for (let i = 0, len = nodesList.length; i < len; i++) {
+
+            nodesList[i].rect.x = offsetX - nodesList[i].rect.width / 2;
+
+            nodesList[i].rect.y = offsetY - nodesList[i].rect.height / 2;
+
+            let node = new Node(nodesList[i]);
+
+            node.setTID(s8());
+            node.id = s8();
+            node.fileId = defineNode.fileId;
+
+            // console.log('push之前的node', node);
+
+            _this.store.data.pens.push(node);
+
+            renderNodesList.push(node);
+        }
+        _this.activeLayer.setPens([renderNodesList[0]]);
+
+        _this.render(false);
+
+        _this.animate(true);
+
+        _this.cache();
+
+        _this.dispatch('addNode', renderNodesList[0]);
+    };
+    Topology.prototype.addNode = function (node, focus, visit) {
         if (focus === void 0) {
             focus = false;
         }
@@ -946,11 +972,13 @@ 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]);
             this.render();
             this.animate(true);
             this.cache();
-            this.dispatch('addNode', node);
+            if(!visit) {
+                this.activeLayer.setPens([node]);
+                this.dispatch('addNode', node);
+            }
         }
         return node;
     };
@@ -1002,7 +1030,7 @@ var Topology = (function (_super) {
             if (height < rect.height) {
                 height = rect.height;
             }
-            this.resize({width: width + 20, height: height + 20});
+            this.resize({width: width, height: height});
             return rect;
         }catch (e){
             //console.log('init-error-----------',e)
@@ -1068,6 +1096,7 @@ var Topology = (function (_super) {
                 }
             }
         }
+        this.store.data.dataResize = 1;
         this.divLayer.canvas.style.cursor = 'default';
         var len = this.store.data.pens.length;
         for (var i = len - 1; i > -1; --i) {
@@ -1837,7 +1866,7 @@ var Topology = (function (_super) {
             this.store.data.pens.splice(i + 1, 1);
         }
     };
-    Topology.prototype.combine = function (pens, stand, temp) {
+    Topology.prototype.combine = function (pens, stand, temp, rect) {
         if (stand === void 0) {
             stand = false;
         }

package/core/src/divLayer.d.ts

@@ -2,28 +2,6 @@ import { Node } from './models';
 import { Layer } from './layer';
 export declare class DivLayer extends Layer {
     canvas: HTMLDivElement;
-    player: HTMLDivElement;
-    curNode: Node;
-    playBtn: HTMLElement;
-    currentTime: HTMLElement;
-    progressCurrent: HTMLElement;
-    progress: HTMLElement;
-    loop: HTMLElement;
-    media: HTMLMediaElement;
-    videos: {
-        [key: string]: {
-            player: HTMLElement;
-            current: HTMLElement;
-            media: HTMLMediaElement;
-        };
-    };
-    audios: {
-        [key: string]: {
-            player: HTMLElement;
-            current: HTMLElement;
-            media: HTMLMediaElement;
-        };
-    };
     iframes: {
         [key: string]: HTMLIFrameElement;
     };
@@ -37,10 +15,6 @@ export declare class DivLayer extends Layer {
     private subcribeNode;
     constructor(TID: String);
     addDiv: (node: Node) => void;
-    createPlayer(): void;
-    getMediaCurrent(): void;
-    addMedia(node: Node, type: string): HTMLDivElement;
-    playNext(next: string): void;
     addIframe(node: Node): HTMLIFrameElement;
     addGif(node: Node): HTMLImageElement;
     setElemPosition(node: Node, elem: HTMLElement): void;