dcim-topology2d 2.0.7 → 3.0.2

package/core/src/divLayer.d.ts

@@ -1,7 +1,37 @@
-import { Node } from './models';
+import { Options } from './options';
+import { Node } from './models/node';
+import { TopologyData } from './models/data';
 import { Layer } from './layer';
 export declare class DivLayer extends Layer {
+    parentElem: HTMLElement;
+    options: Options;
+    protected data: TopologyData;
     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;
+    };
     elements: {
         [key: string]: HTMLElement;
     };
@@ -10,8 +40,12 @@ export declare class DivLayer extends Layer {
     };
     private subcribe;
     private subcribeNode;
-    constructor(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, 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;

package/core/src/divLayer.js

@@ -20,23 +20,53 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import {Store} from 'le5le-store';
-import {Node, PenType, images, defaultImages} from './models';
+import {Node, images} from './models/node';
+import {Lock} from './models/status';
+import {PenType} from './models/pen';
 import {Layer} from './layer';
-import { setStyleForElementIdDiv } from './element';
-import { commonStore } from './store';
+import { setStyleForElementIdDiv, DomElements } from './utils'
 var DivLayer = /** @class */ (function (_super) {
     __extends(DivLayer, _super);
-    function DivLayer(TID) {
+
+    function DivLayer(parentElem, options, TID) {
+        if (options === void 0) {
+            options = {};
+        }
         var _this = _super.call(this, TID) || this;
+        _this.parentElem = parentElem;
+        _this.options = options;
         _this.canvas = document.createElement('div');
+        // _this.player = document.createElement('div');
+        // _this.videos = {};
+        // _this.audios = {};
+        _this.iframes = {};
         _this.elements = {};
         _this.gifs = {};
         _this.addDiv = function (node) {
+            // if (node.audio) {
+            //     if (_this.audios[node.id] && _this.audios[node.id].media.src !== node.audio) {
+            //         _this.audios[node.id].media.src = node.audio;
+            //     }
+            //     _this.setElemPosition(node, (_this.audios[node.id] && _this.audios[node.id].player) || _this.addMedia(node, 'audio'));
+            // }
+            // if (node.video) {
+            //     if (_this.videos[node.id] && _this.videos[node.id].media.src !== node.video) {
+            //         _this.videos[node.id].media.src = node.video;
+            //     }
+            //     _this.setElemPosition(node, (_this.videos[node.id] && _this.videos[node.id].player) || _this.addMedia(node, 'video'));
+            // }
+            if (node.iframe) {
+                if (_this.iframes[node.id] && _this.iframes[node.id].src !== node.iframe) {
+                    _this.iframes[node.id].src = node.iframe;
+                }
+                _this.setElemPosition(node, _this.iframes[node.id] || _this.addIframe(node));
+            }
             if (node.elementId) {
+                Object.assign(_this.elements, DomElements);
                 if (!_this.elements[node.id]) {
                     _this.elements[node.id] = document.getElementById(node.id);
                     if (_this.elements[node.id]) {
-                        _this.addElement(node);
+                        _this.canvas.appendChild(_this.elements[node.id]);
                     }
                 }
                 _this.setElemPosition(node, _this.elements[node.id]);
@@ -65,22 +95,249 @@ var DivLayer = /** @class */ (function (_super) {
                 }
             }
         };
+        _this.data = Store.get(_this.generateStoreKey('topology-data'));
+        // if (!_this.options.playIcon) {
+        //     _this.options.playIcon = 'iconfont icon-play';
+        // }
+        // if (!_this.options.pauseIcon) {
+        //     _this.options.pauseIcon = 'iconfont icon-pause';
+        // }
+        // if (!_this.options.fullScreenIcon) {
+        //     _this.options.fullScreenIcon = 'iconfont icon-full-screen';
+        // }
+        // if (!_this.options.loopIcon) {
+        //     _this.options.loopIcon = 'iconfont icon-loop';
+        // }
         _this.canvas.style.position = 'absolute';
         _this.canvas.style.left = '0';
         _this.canvas.style.top = '0';
         _this.canvas.style.outline = 'none';
         _this.canvas.style.background = 'transparent';
         _this.canvas.setAttribute('class', 'canvas-point');
-        commonStore[TID].parentElem.appendChild(_this.canvas);
+        parentElem.appendChild(_this.canvas);
+        // parentElem.appendChild(_this.player);
+        //_this.createPlayer();
         _this.subcribe = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv);
+        // _this.subcribeNode = Store.subscribe(_this.generateStoreKey('LT:activeNode'), function (node) {
+        //     if (!node || (!node.video && !node.audio)) {
+        //         _this.player.style.top = '-99999px';
+        //         return;
+        //     }
+        //     if (node.audio && _this.audios[node.id]) {
+        //         _this.media = _this.audios[node.id].media;
+        //     }
+        //     else if (node.video && _this.videos[node.id]) {
+        //         _this.media = _this.videos[node.id].media;
+        //     }
+        //     else {
+        //         return;
+        //     }
+        //     _this.curNode = node;
+        //     _this.player.style.top = _this.parentElem.offsetTop + _this.parentElem.clientHeight + 'px';
+        //     _this.player.style.left = _this.parentElem.getBoundingClientRect().left + 'px';
+        //     _this.player.style.width = _this.parentElem.clientWidth + 'px';
+        //     _this.getMediaCurrent();
+        //     if (_this.media.paused) {
+        //         _this.playBtn.className = _this.options.playIcon;
+        //     }
+        //     else {
+        //         _this.playBtn.className = _this.options.pauseIcon;
+        //     }
+        // });
+        // document.addEventListener('fullscreenchange', function (e) {
+        //     if (!_this.media) {
+        //         return;
+        //     }
+        //     if (document.fullscreen) {
+        //         _this.media.controls = true;
+        //         _this.media.style.userSelect = 'initial';
+        //         _this.media.style.pointerEvents = 'initial';
+        //     }
+        //     else {
+        //         _this.media.style.userSelect = 'none';
+        //         _this.media.style.pointerEvents = 'none';
+        //         _this.media.controls = false;
+        //     }
+        // });
         return _this;
     }
-    DivLayer.prototype.addElement = function (node){
-        if(['iframe', 'echarts', 'formOverflow'].includes(node.name)) {
-            this.canvas.parentNode.appendChild(this.elements[node.id]);
-        }else {
-            this.canvas.appendChild(this.elements[node.id]);
+
+    DivLayer.prototype.createPlayer = function () {
+        var _this = this;
+        this.player.style.position = 'fixed';
+        this.player.style.outline = 'none';
+        this.player.style.top = '-99999px';
+        this.player.style.height = '40px';
+        this.player.style.padding = '10px 15px';
+        this.player.style.background = 'rgba(200,200,200,.1)';
+        this.player.style.display = 'flex';
+        this.player.style.alignItems = 'center';
+        this.player.style.userSelect = 'initial';
+        this.player.style.pointerEvents = 'initial';
+        this.player.style.zIndex = '1';
+        this.playBtn = document.createElement('i');
+        this.currentTime = document.createElement('span');
+        this.progress = document.createElement('div');
+        this.progressCurrent = document.createElement('div');
+        this.loop = document.createElement('i');
+        var fullScreen = document.createElement('i');
+        this.playBtn.className = this.options.playIcon;
+        this.playBtn.style.fontSize = '18px';
+        this.playBtn.style.lineHeight = '20px';
+        this.playBtn.style.cursor = 'pointer';
+        this.currentTime.style.padding = '0 10px';
+        this.currentTime.innerText = '0 / 0';
+        this.progress.style.position = 'relative';
+        this.progress.style.flexGrow = '1';
+        this.progress.style.top = '0';
+        this.progress.style.height = '4px';
+        this.progress.style.background = '#ccc';
+        this.progress.style.borderRadius = '2px';
+        this.progress.style.overflow = 'hidden';
+        this.progress.style.cursor = 'pointer';
+        this.progressCurrent.style.position = 'absolute';
+        this.progressCurrent.style.left = '0';
+        this.progressCurrent.style.top = '0';
+        this.progressCurrent.style.bottom = '0';
+        this.progressCurrent.style.width = '0';
+        this.progressCurrent.style.background = '#52c41a';
+        this.loop.style.margin = '0 10px';
+        this.loop.style.padding = '2px 5px';
+        this.loop.style.borderRadius = '2px';
+        this.loop.className = this.options.loopIcon;
+        this.loop.style.fontSize = '18px';
+        this.loop.style.lineHeight = '20px';
+        this.loop.style.cursor = 'pointer';
+        fullScreen.className = this.options.fullScreenIcon;
+        fullScreen.style.fontSize = '17px';
+        fullScreen.style.lineHeight = '20px';
+        fullScreen.style.cursor = 'pointer';
+        this.player.appendChild(this.playBtn);
+        this.player.appendChild(this.currentTime);
+        this.player.appendChild(this.progress);
+        this.progress.appendChild(this.progressCurrent);
+        this.player.appendChild(this.loop);
+        this.player.appendChild(fullScreen);
+        this.playBtn.onclick = function () {
+            if (_this.media.paused) {
+                _this.media.play();
+                _this.playBtn.className = _this.options.pauseIcon;
+            } else {
+                _this.media.pause();
+                _this.playBtn.className = _this.options.playIcon;
+            }
+        };
+        this.progress.onclick = function (e) {
+            _this.media.currentTime = (e.offsetX / _this.progress.clientWidth) * _this.media.duration;
+        };
+        this.loop.onclick = function () {
+            _this.media.loop = !_this.media.loop;
+            _this.curNode.playLoop = _this.media.loop;
+            if (_this.media.loop) {
+                _this.loop.style.background = '#ddd';
+            } else {
+                _this.loop.style.background = 'none';
+            }
+        };
+        fullScreen.onclick = function () {
+            _this.media.requestFullscreen();
+        };
+    };
+    DivLayer.prototype.getMediaCurrent = function () {
+        if (!this.media) {
+            return;
         }
+        this.currentTime.innerText =
+                this.formatSeconds(this.media.currentTime) + ' / ' + this.formatSeconds(this.media.duration);
+        this.progressCurrent.style.width =
+                (this.media.currentTime / this.media.duration) * this.progress.clientWidth + 'px';
+    };
+    DivLayer.prototype.addMedia = function (node, type) {
+        var _this = this;
+        var player = document.createElement('div');
+        var current = document.createElement('div');
+        var media = document.createElement(type);
+        current.style.position = 'absolute';
+        current.style.outline = 'none';
+        current.style.left = '0';
+        current.style.bottom = '0';
+        current.style.height = '2px';
+        current.style.background = '#52c41a';
+        media.style.position = 'absolute';
+        media.style.outline = 'none';
+        media.style.left = '0';
+        media.style.right = '0';
+        media.style.top = '0';
+        media.style.bottom = '0';
+        if (type === 'video') {
+            media.style.width = node.rect.width + 'px';
+            media.style.height = node.rect.height + 'px';
+        }
+        player.style.background = 'transparent';
+        if (node.play === 1) {
+            media.autoplay = true;
+        }
+        media.loop = node.playLoop;
+        media.ontimeupdate = function () {
+            current.style.width = (media.currentTime / media.duration) * node.rect.width + 'px';
+            _this.getMediaCurrent();
+            if (_this.media === media) {
+                if (node.playLoop) {
+                    media.loop = true;
+                    _this.loop.style.background = '#ddd';
+                } else {
+                    media.loop = false;
+                    _this.loop.style.background = 'none';
+                }
+            }
+        };
+        media.onended = function () {
+            Store.set(_this.generateStoreKey('mediaEnd'), node);
+            if (_this.media === media) {
+                _this.playBtn.className = _this.options.playIcon;
+            }
+            _this.playNext(node.nextPlay);
+        };
+        media.onloadedmetadata = function () {
+            _this.getMediaCurrent();
+        };
+        media.src = node[type];
+        player.appendChild(media);
+        player.appendChild(current);
+        this[type + 's'][node.id] = {
+            player: player,
+            current: current,
+            media: media
+        };
+        this.canvas.appendChild(player);
+        return player;
+    };
+    DivLayer.prototype.playNext = function (next) {
+        if (!next) {
+            return;
+        }
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+            var item = _a[_i];
+            if (!(item instanceof Node)) {
+                continue;
+            }
+            if (item.tags.indexOf(next) > -1) {
+                if (item.audio && this.audios[item.id] && this.audios[item.id].media && this.audios[item.id].media.paused) {
+                    this.audios[item.id].media.play();
+                } else if (item.video && this.videos[item.id].media && this.videos[item.id].media.paused) {
+                    this.videos[item.id].media.play();
+                }
+            }
+        }
+    };
+    DivLayer.prototype.addIframe = function (node) {
+        var iframe = document.createElement('iframe');
+        iframe.scrolling = 'no';
+        iframe.frameBorder = '0';
+        iframe.src = node.iframe;
+        this.iframes[node.id] = iframe;
+        this.canvas.appendChild(iframe);
+        return iframe;
     };
     DivLayer.prototype.addGif = function (node) {
         this.gifs[node.id] = node.img;
@@ -88,18 +345,30 @@ var DivLayer = /** @class */ (function (_super) {
         return node.img;
     };
     DivLayer.prototype.setElemPosition = function (node, elem) {
-        setStyleForElementIdDiv(node, elem, commonStore[this.TID].data);
+      setStyleForElementIdDiv(node, elem, this.data);
     };
     DivLayer.prototype.removeDiv = function (item) {
         if (this.curNode && item.id === this.curNode.id) {
             this.curNode = null;
+            // this.media = null;
+            // this.player.style.top = '-99999px';
+        }
+        // if (item.audio) {
+        //     this.canvas.removeChild(this.audios[item.id].player);
+        //     this.audios[item.id] = null;
+        // }
+        // if (item.video) {
+        //     this.canvas.removeChild(this.videos[item.id].player);
+        //     this.videos[item.id] = null;
+        // }
+        if (item.iframe) {
+            this.canvas.removeChild(this.iframes[item.id]);
+            this.iframes[item.id] = null;
         }
         if (item.elementId) {
-            const elementNode = this.elements[item.id];
-            if(elementNode) {
-                elementNode.parentNode.removeChild(elementNode);
-                this.elements[item.id] = null;
-            }
+            const elementNode = this.elements[item.id] || DomElements[item.id];
+            this.canvas.removeChild(elementNode);
+            this.elements[item.id] = null;
         }
         if (item.gif) {
             this.canvas.removeChild(this.gifs[item.id]);
@@ -117,15 +386,19 @@ var DivLayer = /** @class */ (function (_super) {
     };
     DivLayer.prototype.clear = function () {
         this.canvas.innerHTML = '';
+        //this.audios = {};
+        //this.videos = {};
+        this.iframes = {};
         this.elements = {};
         this.gifs = {};
+        for (var key in DomElements) {
+          delete DomElements[key];
+        }
         // tslint:disable-next-line:forin
-        for (let key in images) {
+        for (var key in images) {
             delete images[key];
         }
-        for (let key in defaultImages) {
-            delete defaultImages[key];
-        }
+        //this.player.style.top = '-99999px';
     };
     DivLayer.prototype.formatSeconds = function (seconds) {
         var h = Math.floor(seconds / 3600);
@@ -143,30 +416,25 @@ var DivLayer = /** @class */ (function (_super) {
         return txt;
     };
     DivLayer.prototype.resize = function (size) {
-        let store = commonStore[this.TID];
-        if(!store || !store.options) return;
         if (size) {
             this.canvas.style.width = size.width + 'px';
             this.canvas.style.height = size.height + 'px';
         } else {
-            if (store.options.width && store.options.width !== 'auto') {
-                this.canvas.style.width = store.options.width + 'px';
+            if (this.options.width && this.options.width !== 'auto') {
+                this.canvas.style.width = this.options.width + 'px';
             } else {
-                this.canvas.style.width = store.parentElem.clientWidth + 'px';
+                this.canvas.style.width = this.parentElem.clientWidth + 'px';
             }
-            if (store.options.height && store.options.height !== 'auto') {
-                this.canvas.style.height = store.options.height + 'px';
+            if (this.options.height && this.options.height !== 'auto') {
+                this.canvas.style.height = this.options.height + 'px';
             } else {
-                this.canvas.style.height = store.parentElem.clientHeight - 8 + 'px';
+                this.canvas.style.height = this.parentElem.clientHeight - 8 + 'px';
             }
         }
-        store = null;
     };
     DivLayer.prototype.render = function () {
-        if(commonStore[this.TID] || !commonStore[this.TID].data) return;
-        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
-            if(!(item instanceof Node)) item = new Node(item);
             if (!item.getTID()) {
                 item.setTID(this.TID);
             }
@@ -177,6 +445,8 @@ var DivLayer = /** @class */ (function (_super) {
     DivLayer.prototype.destroy = function () {
         this.clear();
         this.subcribe.unsubscribe();
+        //this.subcribeNode.unsubscribe();
+
         //优化
         this.canvas.onmousemove = null;
         this.canvas.onmousedown = null
@@ -187,6 +457,8 @@ var DivLayer = /** @class */ (function (_super) {
         this.canvas.ondragover = null;
         this.canvas.ondrop = null;
         this.canvas.onwheel = null;
+
+        this.data = null;
         //end
     };
 

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

@@ -4,4 +4,5 @@ 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 getDetailData(data: Node): void;
+export declare function setStatisticalData(pen: Pen, data: any): Node;

package/core/src/healps/changeData.js

@@ -1,23 +1,10 @@
 //let DETAILDATA = null;
-import {commonStore} from '../store';
-import { getEchartsRealData } from '../utils/conversion';
 export function setConfItemNode(pen, syn_synata) {
-    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) return
     if(pen.data instanceof Array) {
-        let _syn = null;
-        let isResetVal = false;
+        let _syn = ''
+        let isResetVal = false
+        let isResetFontColor = false
         const {areaData, assetData, kpiData, tagData, asset} = syn_synata
         pen.data.map((d) => {
             const key = d.key;
@@ -25,7 +12,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) {
@@ -38,7 +25,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
@@ -60,7 +47,6 @@ export function setConfItemNode(pen, syn_synata) {
                 }
             }
         })
-        if(!_syn) return;
         // const type = parseInt(_syn.type) // 是否是开关量
         // 显示的值
         if (isResetVal) pen.text = `${_syn.value}${_syn.unit}`;
@@ -72,11 +58,9 @@ 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: // 无告警
@@ -94,6 +78,7 @@ export function setConfItemNode(pen, syn_synata) {
                 color = '#D38C00';
                 break;
         }
+
         // 显示的属性
         if (name === 'text') {
             pen.font.color = color
@@ -103,25 +88,74 @@ 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.echarts) {
-            const {echartDataValue} = syn_synata;
+        if(pen.data.params && pen.data.echarts) {
+            const { echartDataValue } = syn_synata;
+            //const seriesData = pen.data.echarts.option.series.length > 1 ? echartDataValue : echartData
             const seriesData = echartDataValue;
-            const realData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
-            if (Array.isArray(realData) && pen.data.params && pen.data.params.displayMode !== 7) {
-                getEchartsRealData(pen, realData);
-            } else {
-                commonStore[pen.TID].echartsRealDataPool[pen.id] = realData;
+            if(seriesData) pen.data.echarts = setStatisticalData(pen, seriesData)
+        }
+    }
+    return pen
+}
+export function setStatisticalData(pen, echartData) {
+    const node = Object.assign({}, pen);
+    const displayMode = parseInt(node.data.echarts.option.displayMode);
+    const chartData = echartData[node.data.params.id];
+    if ((displayMode === 1 || displayMode === 2) && chartData){ // 折线图，柱状图
+        //const xData = [], seriesData = [];
+        const staticForType = node.data.params.staticForType ? node.data.params.staticForType : '';//统计类型：日，周，月，年
+        const seriesNodes = node.data.echarts.option.series;
+        // 双轴曲线
+        if(seriesNodes.length > 1 || node.data.params.curveNum > 1){
+            const chartOptions = staticForType ? chartData[`${staticForType}_Data`] : chartData;
+            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;
+                    item.data = data;
+                    legendData.push(name);
+                });
+                legend.data = legendData;
+            }else {
+                node.data.echarts.option.legend = [];
+                node.data.echarts.option.series = []
+            }
+        }else {
+            const chartOptions = staticForType ? chartData[`${staticForType}_Data`] : chartData;
+            if(chartOptions) {
+                node.data.echarts.option.xAxis[0].data = chartOptions.XData;
+                node.data.echarts.option.series[0].data = chartOptions.seriesData;
             }
         }
     }
-    return {
-        monitorAlarm: isAlarm
+    if (displayMode === 5 && chartData){ // 饼图
+        const colors = node.data.echarts.option.color;
+        const seriesData = [];
+        chartData.map((chd, index) => {
+            seriesData.push({
+                itemStyle: { color: colors[index] },
+                name: chd.name,
+                value: chd.value
+            })
+        })
+        node.data.echarts.option.series[0].data = seriesData;
+    }
+    if(displayMode === 6 && chartData){ // 仪表盘
+        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;
     }
+    return node.data.echarts;
 }
-
 export function setNodeEvents(item, pen) {
 
 }

package/core/src/hoverLayer.d.ts

@@ -1,6 +1,13 @@
-import { Rect, Point, Line, Node } from './models';
+import { TopologyData } from './models/data';
+import { Rect } from './models/rect';
+import { Point } from './models/point';
+import { Line } from './models/line';
+import { Node } from './models/node';
+import { Options } from './options';
 import { Layer } from './layer';
 export declare class HoverLayer extends Layer {
+    options: Options;
+    protected data: TopologyData;
     line: Line;
     initLine: Line;
     node: Node;
@@ -12,7 +19,7 @@ export declare class HoverLayer extends Layer {
     dockLineY: number;
     root: Node;
     dragRect: Rect;
-    constructor(TID: String);
+    constructor(options: Options, TID: String);
     lineTo(to: Point, toArrow?: string): void;
     lineFrom(from: Point): void;
     lineMove(pt: Point, initPos: {