wip: chart basic implement

ww
1 parent 97ae6841
Showing 4 changed files with 596 additions and 66 deletions
src/main/webapp/js/diagramly/LocalFile.js
src/main/webapp/js/diagramly/sidebar/Sidebar.js
src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/diagramly/LocalFile.js
View file @485ac3c
+++ b/src/main/webapp/js/diagramly/LocalFile.js
View file @485ac3c
@@ -195,12 +195,13 @@ LocalFile.prototype.saveFile = function (title, revision, success, error, useCur
 					this.removeDraft();
 					Editor.defaultContent = savedData;
 					var configurationContentList = [];
-					console.log('EditorUi', this.ui.editor.graph.getDefaultParent().children)
 					const basicAttr = Sidebar.prototype.enumCellBasicAttribute
 					const allCell = (this.ui.editor.graph.getDefaultParent().children || []).filter(item => item.getAttribute(basicAttr.COMPONENT_TYPE))
+					const contentId = this.ui.currentPage.node.id
 					var configurationContent = {
 						name: "第 1 页",
 						id: Editor.configurationContentId,
+						contentId,
 						content: savedData,
 						type: 1,
 						nodeIds: allCell.map(item => item.id)
--- a/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @485ac3c
+++ b/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @485ac3c
@@ -166,7 +166,12 @@
 		/**
 		 * @description 组件类型
 		 */
-		COMPONENT_TYPE: 'componentType'
+		COMPONENT_TYPE: 'componentType',
+
+		/**
+		 * @description 图表实例ID
+		 */
+		CHART_INSTANCE_ID: 'chartInstanceId'
 	}
 	/**
--- a/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
View file @485ac3c
+++ b/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
View file @485ac3c
@@ -24,7 +24,7 @@
 		/**
 		 * @description cell id key
 		 */
-		CHART_CELL_ID: 'chartInstanceId',
+		CHART_INSTANCE_ID: 'chartInstanceId',
 		/**
 		 * @description 图表容器 class name
@@ -143,7 +143,7 @@
 		const basicAttr = this.enumCellBasicAttribute
 		this.setCellAttributes(cell, {
 			[basicAttr.COMPONENT_TYPE]: chartType,
-			[enumConst.CHART_CELL_ID]: id,
+			[basicAttr.CHART_INSTANCE_ID]: id,
 			[enumConst.CHART_CELL_WIDTH]: width,
 			[enumConst.CHART_CELL_HEIGHT]: height,
 		})
@@ -208,7 +208,8 @@
 	 * @returns {*}
 	 */
 	Sidebar.prototype.getCellId = function (cell) {
-		return this.graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
+		const basicAttr = this.enumCellBasicAttribute
+		return this.graph.getAttributeForCell(cell, basicAttr.CHART_INSTANCE_ID)
 	}
 	/**
@@ -238,7 +239,7 @@
 					const id = self.generatorChartsId()
 					const geo = Object.assign(graph.model.getGeometry(cell), { width: 400, height: 400 })
 					cell.setGeometry(geo)
-					self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
+					self.graph.setAttributeForCell(cell, basicAttr.CHART_INSTANCE_ID, id);
 					self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, enumConst.CHART_CELL_DEFAULT_WIDTH);
 					self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, enumConst.CHART_CELL_DEFAULT_HEIGHT);
 					self.graph.setAttributeForCell(cell, 'label', self.createChartsNode(id))
@@ -331,7 +332,7 @@
 		const allCell = graph.getDefaultParent().children || []
 		const domIdMapping = new Map()
 		for (const cell of allCell) {
-			const chartInstanceId = graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
+			const chartInstanceId = graph.getAttributeForCell(cell, basicAttr.CHART_INSTANCE_ID)
 			if (Sidebar.prototype.isChartCell(cell) && chartInstanceId) {
 				const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)
 				const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)
--- a/src/main/webapp/js/grapheditor/Format.js
View file @485ac3c
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @485ac3c
@@ -4935,7 +4935,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     /**
      * @description 当前节点绑定数据
-     * @type {null | {act: [], event: []}}
+     * @type {null | {act: [], event: [], dataSources: []}}
      */
     let currentNodeData = null
@@ -5040,6 +5040,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         SLAVE_DEVICE_ID: 'slaveDeviceId',
         ATTR: 'attr',
         GATEWAY: 'GATEWAY',
+        ADDITIONAL: 'additional'
     }
     /**
@@ -5101,7 +5102,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function permissionRender() {
             const cell = vertices[0]
             const permission = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
-            console.log(graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE))
             const needDisplayPanel = sidebarInstance.getComponentPermission(permission)
             for (const key of needDisplayPanel) {
                 renderMapping[key]()
@@ -5207,6 +5207,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         mount()
     }
+    function createLineChartPanel() {
+
+    }
+
+    function createBarChartPanel() {
+
+    }
+
     function createChartBindPanel() {
         const fragment = document.createDocumentFragment()
         const chartBindContainer = document.createElement('div')
@@ -5220,28 +5228,29 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             INTERVAL_EL: 'bindChartIntervalSelect'
         }
-
+        const enumBindKey = HandleDataSource.enumConst
+        const enumDataType = HandleDataSource.enumDataBindType
         const enumConst = {
-            DATA_TYPE: 'dataType',
+            DATA_TYPE: enumBindKey.DATA_TYPE,
-            REAL: 'REAL',
+            REAL: enumDataType.REAL,
-            HISTORY: 'HISTORY',
+            HISTORY: enumDataType.HISTORY,
             /**
              * @description 范围
              */
-            SCOPE: 'scope',
+            EFFECT_SCOPE: enumBindKey.EFFECT_SCOPE,
             /**
              * @description 聚合
              */
-            AGGREGATION: 'aggregation',
+            AGG: enumBindKey.AGG,
             /**
              * @description 间隔
              */
-            INTERVAL: 'interval'
+            INTERVAL: enumBindKey.INTERVAL
         }
         const enumTimeUnit = {
@@ -5251,6 +5260,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             DAY: 'DAY',
         }
+        const unitMapping = {
+            [enumTimeUnit.SECOND]: '秒',
+            [enumTimeUnit.MINUTE]: '分',
+            [enumTimeUnit.HOUR]: '小时',
+            [enumTimeUnit.DAY]: '天',
+        }
+
+        const unitConversion = {
+            [enumTimeUnit.SECOND]: 1 * 1000,
+            [enumTimeUnit.MINUTE]: 1 * 60 * 1000,
+            [enumTimeUnit.HOUR]: 1 * 60 * 60 * 1000,
+            [enumTimeUnit.DAY]: 1 * 60 * 60 * 24 * 1000,
+        }
+
         const defaultIntervalOptions = [
             {
                 id: 1,
@@ -5448,32 +5471,29 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     { id: 1, unit: enumTimeUnit.DAY },
                 ]
             },
-        ]
-
-
+        ].map(item => {
+            return {
+                id: item.id * unitConversion[item.unit],
+                name: item.id + unitMapping[item.unit],
+                linkage: item.linkage.map(item => {
+                    return {
+                        id: item.id * unitConversion[item.unit],
+                        name: item.id + unitMapping[item.unit],
+                    }
+                })
+            }
+        })
         const aggergationOptions = [
-            { id: '1', name: '最小值' },
-            { id: '2', name: '最大值' },
-            { id: '3', name: '平均值' },
-            { id: '4', name: '求和' },
-            { id: '5', name: '计数' },
-            { id: '6', name: '空' },
+            { id: 'MIN', name: '最小值' },
+            { id: 'MAX', name: '最大值' },
+            { id: 'AVG', name: '平均值' },
+            { id: 'SUM', name: '求和' },
+            { id: 'COUNT', name: '计数' },
+            { id: 'NONE', name: '空' },
         ]
-        const unitMapping = {
-            [enumTimeUnit.SECOND]: '秒',
-            [enumTimeUnit.MINUTE]: '分',
-            [enumTimeUnit.HOUR]: '小时',
-            [enumTimeUnit.DAY]: '天',
-        }
-        const unitConversion = {
-            [enumTimeUnit.SECOND]: 1,
-            [enumTimeUnit.MINUTE]: 1 * 60,
-            [enumTimeUnit.HOUR]: 1 * 60 * 60,
-            [enumTimeUnit.DAY]: 1 * 60 * 60 * 24,
-        }
         function createSwitchBindTypeRadio() {
             return `
@@ -5483,21 +5503,19 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 					<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时">
 					<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" checked>
 				</div>
-			</div>
-			`
+			</div>`
         }
         function createQueryScopeSelect() {
-            const options = defaultIntervalOptions.map((item, index) => ({ id: index, name: item.id + unitMapping[item.unit] }))
             const template = UseLayUi.generateOptionTemplate({
-                dataSource: options,
+                dataSource: defaultIntervalOptions,
                 addPlaceholderOption: false
             })
             return `
 			<div class="layui-form-item">
 				<label class="layui-form-label">时间周期</label>
 				<div class="layui-input-block">
-					<select name="${enumConst.SCOPE}" lay-filter="${enumActionEL.SCOPE_FILTER}">
+					<select name="${enumConst.EFFECT_SCOPE}" lay-filter="${enumActionEL.SCOPE_FILTER}">
 						${template}
 					</select>
 				</div>
@@ -5513,7 +5531,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 			<div class="layui-form-item">
 				<label class="layui-form-label">聚合方式</label>
 				<div class="layui-input-block">
-					<select name="${enumConst.AGGREGATION}">
+					<select name="${enumConst.AGG}">
 						${template}
 					</select>
 				</div>
@@ -5526,7 +5544,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 				<label class="layui-form-label">间隔时间</label>
 				<div class="layui-input-block">
 					<select id="${enumActionEL.INTERVAL_EL}" name="${enumConst.INTERVAL}" lay-filter="${enumConst.INTERVAL}">
-						<option value="1">1秒</option>
+						<option value="1000">1秒</option>
 					</select>
 				</div>
 			</div>`
@@ -5535,14 +5553,35 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function generatorEventlisten() {
             form.on(`select(${enumActionEL.SCOPE_FILTER})`, event => {
                 const value = event.value || 0
-                const options = defaultIntervalOptions[value].linkage.map(item => ({ id: item.id * unitConversion[item.unit], name: item.id + unitMapping[item.unit] }))
-                const template = UseLayUi.generateOptionTemplate({
-                    dataSource: options,
-                    addPlaceholderOption: false
-                })
-                $(`#${enumActionEL.INTERVAL_EL}`).html(template)
-                form.render('select')
+                linkageIntervalSelect(value)
+            })
+        }
+
+        function linkageIntervalSelect(value) {
+            const options = defaultIntervalOptions.find(item => Number(item.id) === Number(value))?.linkage
+            const template = UseLayUi.generateOptionTemplate({
+                dataSource: options,
+                addPlaceholderOption: false
             })
+            $(`#${enumActionEL.INTERVAL_EL}`).html(template)
+            form.render('select')
+        }
+
+        /**
+         * @description 回显
+         */
+        function echoData() {
+            const { dataSources = [] } = currentNodeData
+            const { additional = {} } = dataSources[0] || {}
+            const { [enumBindKey.EFFECT_SCOPE]: effectScope } = additional
+            linkageIntervalSelect(effectScope)
+            form.val(CONTAINER_FILTER, additional)
+        }
+
+        const refresh = echoRefreshFn
+        echoRefreshFn = function () {
+            refresh.apply(this, arguments)
+            echoData()
         }
         fragment.append(title)
@@ -5607,6 +5646,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const panel = createPanel()
         $(panel).addClass('data-source__submit-panel').append(`<button type="button" lay-submit lay-filter="formDataSource" class="layui-btn">保存</button>`)
         $(container).append(panel)
+        const additionalKey = HandleDataSource.enumConst
         form.on('submit(formDataSource)', async function (data) {
             const ENABLED_FLAG = 'on'
             const { field } = data
@@ -5619,8 +5659,15 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 [enumCategory.DATA_SOURCE]: {
                     [enumDataSourceConst.ORG_ID]: field[enumDataSourceConst.ORG_ID],
                     [enumDataSourceConst.DEVICE_ID]: field[enumDataSourceConst.DEVICE_ID],
-                    ...(field[enumDataSourceConst.SLAVE_DEVICE_ID] && { [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] }),
+                    // ...(field[enumDataSourceConst.SLAVE_DEVICE_ID] && { [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] }),
+                    [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] ? [enumDataSourceConst.SLAVE_DEVICE_ID] : '',
                     [enumDataSourceConst.ATTR]: field[enumDataSourceConst.ATTR],
+                    [enumDataSourceConst.ADDITIONAL]: field[additionalKey.DATA_TYPE] ? {
+                        [additionalKey.AGG]: field[additionalKey.AGG],
+                        [additionalKey.DATA_TYPE]: field[additionalKey.DATA_TYPE],
+                        [additionalKey.INTERVAL]: field[additionalKey.INTERVAL],
+                        [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE]
+                    } : null
                 },
             }
             const allType = [...interactionList, ...dynamicEffectList]
@@ -7111,6 +7158,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
                         [enumDataSourceConst.ATTR]: null,
                     })
+                    if (!selected) return
                     if (selected.deviceType === enumDataSourceConst.GATEWAY) {
                         $(`#${componentId}`).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`)
                             .attr('lay-verify', 'required').attr('lay-verType', 'tips')
@@ -7411,7 +7459,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function switchUploadImgTypeEventListener() {
             form.on(`radio(${enumActionEl.SWITCH_IMG_ORIGIN_FILTER})`, event => {
                 const { value } = event
-                console.log('event', event)
                 imageState = {}
                 if (value === enumImageOriginType.LOCAL) {
                     $(`#${enumActionEl.IMG_SELECT_CONTAINER_EL}`).html(createLocalFileContainer())
@@ -12093,10 +12140,17 @@ class DispatchCenter {
     /**
      * @description 页面数据
+     * @type {{dataSources: [], act: [], event: []}}
      */
     contentData
     /**
+     * @description 处理数据源实例
+     * @type {HandleDataSource}
+     */
+    dataSourceHandlerInstance
+
+    /**
      * @description 处理数据动效实例
      * @type {HandleDynamicEffect}
      */
@@ -12171,6 +12225,7 @@ class DispatchCenter {
         this.saveContentInfo(editorUi, currentPage)
         this.connectSocket()
         await this.getContentDataNode()
+        this.dataSourceHandlerInstance = new HandleDataSource(this)
         this.dataInteractionInstance = new HandleDataInteraction(this)
         this.dynamicEffectInstance = new HandleDynamicEffect(this)
         this.updateQueueInstance = new UpdateQueue(this)
@@ -12220,9 +12275,10 @@ class DispatchCenter {
         const { node: { id } = {} } = this.currentPage
         if (!id) return
         const [err, res] = await to(ConfigurationNodeApi.getConfigurationInfo('CONTENT', id))
-        const { dataSources, event, act } = this.contentData = res
-        const tsSubCmds = this.generatorDataSourceMapping(dataSources)
-        this.sendMessageToGetRealTimeData({ tsSubCmds })
+        this.contentData = res
+        // const { dataSources } = this.contentData = res
+        // const tsSubCmds = this.generatorDataSourceMapping(dataSources)
+        // this.sendMessageToGetRealTimeData({ tsSubCmds })
     }
     /**
@@ -12329,6 +12385,481 @@ class DispatchCenter {
 }
+class HandleDataSource {
+
+    static enumConst = {
+
+        /**
+         * @description 聚合方式
+         */
+        AGG: 'agg',
+
+        /**
+         * @description 间隔方式
+         */
+        INTERVAL: 'interval',
+
+        /**
+         * @description 开始时间
+         */
+        STARTTs: 'startTs',
+
+        /**
+         * @description 结束时间
+         */
+        ENDTs: 'endTs',
+
+        /**
+         * @description 范围
+         */
+        EFFECT_SCOPE: 'effectScope',
+
+        /**
+         * @description 绑定数据类型
+         */
+        DATA_TYPE: 'dataType'
+    }
+
+
+    static enumDataBindType = {
+
+        /**
+         * @description 历史
+         */
+        HISTORY: 'historyCmds',
+
+        /**
+         * @description 事实
+         */
+        REAL: 'tsSubCmds'
+    }
+
+    /**
+     * @description 数据源节点映射
+     * @type {Map<string, object>}
+     */
+    dataSourceNodeMapping = new Map()
+
+    /**
+     * @description 派发队列
+     * @type {DispatchCenter}
+     */
+    DispatchInstance
+
+    constructor(DispatchInstance) {
+        this.DispatchInstance = DispatchInstance
+        this.generatorCommonDataSourceMapping()
+        this.generatorChartDataSourceMapping()
+    }
+
+    get graph() {
+        return this.DispatchInstance.graph
+    }
+
+    /**
+     * @description 普通数据源绑定列表
+     */
+    get commonDataSourceBindList() {
+        return this.DispatchInstance.contentData.dataSources.filter(item => !item.additional)
+    }
+
+    /**
+     * @description 图表数据源绑定列表
+     */
+    get chartDataSourceBindList() {
+        return this.DispatchInstance.contentData.dataSources.filter(item => item.additional)
+    }
+
+    get cmdIdMapping() {
+        return this.DispatchInstance.cmdIdMapping
+    }
+
+    /**
+     * @description 生成普通数据源绑定映射关系
+     * @param dataSources
+     * @return {{cmdId: number, entityType: string, keys: *, scope: string, entityId: *}[]}
+     */
+    generatorCommonDataSourceMapping() {
+        const msg = this.commonDataSourceBindList.map((datum) => {
+            const { deviceId, attr, nodeId, slaveDeviceId } = datum
+            const cmdId = this.getCmdId(nodeId)
+            const sendMsgTemplate = {
+                entityType: "DEVICE",
+                entityId: slaveDeviceId ? slaveDeviceId : deviceId,
+                scope: "LATEST_TELEMETRY",
+                cmdId,
+                keys: attr,
+            }
+            this.dataSourceNodeMapping.set(nodeId, datum)
+            this.subscribeEvent(cmdId, this.updateCommonDataSource.bind(this))
+            return sendMsgTemplate
+        })
+        const { REAL } = HandleDataSource.enumDataBindType
+        if (msg.length) this.sendMsg({ [REAL]: msg })
+    }
+
+
+    /**
+     * @description 图表数据源绑定关系
+     * @param {any[]} dataSource 
+     */
+    generatorChartDataSourceMapping() {
+        const realList = []
+        const historyList = []
+        const { HISTORY, REAL } = HandleDataSource.enumDataBindType
+        const { STARTTs, ENDTs } = HandleDataSource.enumConst
+        for (const item of this.chartDataSourceBindList) {
+            const { additional = {}, deviceId, attr, nodeId, slaveDeviceId } = item
+            if (!attr) continue
+            const { agg, interval = 1000, dataType, effectScope = 0 } = additional
+            const cmdId = this.getCmdId(nodeId)
+            const template = {
+                entityType: "DEVICE",
+                entityId: slaveDeviceId ? slaveDeviceId : deviceId,
+                cmdId,
+                interval: Number(interval),
+                agg,
+                keys: attr,
+            }
+            let scope = isNaN(effectScope) ? 0 : Number(effectScope)
+            if (dataType === HISTORY) {
+                template[STARTTs] = Date.now() - scope
+                template[ENDTs] = Date.now()
+                historyList.push(template)
+                this.subscribeEvent(cmdId, this.updateHistoryDataSource.bind(this))
+            }
+            else if (dataType === REAL) {
+                template[STARTTs] = Date.now() - scope
+                template['scope'] = 'LATEST_TELEMETRY'
+                realList.push(template)
+                this.subscribeEvent(cmdId, this.updateRealTimeDataSource.bind(this))
+            }
+            this.dataSourceNodeMapping.set(nodeId, item)
+        }
+
+        if (historyList.length || realList.length) this.sendMsg({ [HISTORY]: historyList, [REAL]: realList })
+    }
+
+    /**
+     * @description 订阅事件 绑定回调
+     * @param eventName
+     * @param callback
+     */
+    subscribeEvent(eventName, callback) {
+        this.DispatchInstance.eventBus.on(eventName, callback)
+    }
+
+    updateCommonDataSource(message) {
+        const { subscriptionId } = message
+        const node = this.getNodeByCmdId(subscriptionId)
+        const { attr } = this.getBindData(subscriptionId)
+        node && this.updatePage(() => {
+            const { data } = message
+            const [[timespan, value]] = data[attr]
+            node.setValue(value)
+        }, node)
+    }
+
+    updateChartDataSource(message) {
+        const { data = {}, subscriptionId } = message
+        const node = this.getNodeByCmdId(subscriptionId)
+        if (!node) return
+        const enumConst = Sidebar.prototype.enumCellBasicAttribute
+        const chartInstanceMap = Sidebar.prototype.chartsInstanceMapping
+        const chartInstanceId = node.getAttribute(enumConst.CHART_INSTANCE_ID)
+        const instance = chartInstanceMap.get(chartInstanceId)
+        const { attr = [[]] } = this.getBindData(subscriptionId)
+        const [timespan, value] = data[attr][0]
+        console.log('timespan', timespan)
+        console.log('value', value)
+        console.log(instance)
+        console.log('chart', arguments)
+    }
+
+    /**
+     * @description 更新实时数据
+     * @param {} message 
+     */
+    updateRealTimeDataSource(message) {
+        const { data = {}, subscriptionId } = message
+        const node = this.getNodeByCmdId(subscriptionId)
+        if (!node) return
+        const enumConst = Sidebar.prototype.enumCellBasicAttribute
+        const chartInstanceMap = Sidebar.prototype.chartsInstanceMapping
+        const chartInstanceId = node.getAttribute(enumConst.CHART_INSTANCE_ID)
+        const chartInstanceType = node.getAttribute(enumConst.COMPONENT_TYPE)
+        const instance = chartInstanceMap.get(chartInstanceId)
+        const { attr = [[]] } = this.getBindData(subscriptionId)
+        const historyDataList = data[attr]
+
+        // chart insstance 是否已经接受过一次消息推送
+        const isActive = instance.isActive
+        if (!isActive) {
+            instance.isActive = true
+            const xAxisData = []
+            const seriesValue = []
+            const chartOption = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '3%',
+                    bottom: '3%',
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: 'category',
+                    data: xAxisData,
+                    boundaryGap: true,
+                    axisLabel: {
+                        rotate: 70
+                    },
+                    axisPointer: {
+                        label: {
+                            formatter() {
+                                return attr
+                            }
+                        }
+                    }
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        data: seriesValue,
+                        type: chartInstanceType.includes('bar') ? 'bar' : 'line'
+                    }
+                ],
+                dataZoom: [
+                    {
+                        xAxisIndex: 0,
+                        // show: false,
+                        type: 'slider',
+                        startValue: 0,
+                        endValue: 4
+                    }
+                ]
+            }
+
+            for (let i = historyDataList.length - 1; i >= 0; i--) {
+                const [timespan, value] = historyDataList[i]
+                xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())
+                seriesValue.push(Number(value))
+            }
+
+            instance.setOption(chartOption)
+
+        } else {
+            const oldOptions = instance.getOption()
+            const xAxisData = oldOptions.xAxis[0].data || []
+            const seriesValue = oldOptions.series[0].data || []
+            const oldEndValue = Number(oldOptions.dataZoom[0].endValue) || 0
+            const oldStartValue = Number(oldOptions.dataZoom[0].startValue) || 0
+
+            for (let i = historyDataList.length - 1; i >= 0; i--) {
+                const [timespan, value] = historyDataList[i]
+                xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())
+                seriesValue.push(Number(value))
+            }
+
+            if (Number(oldOptions.dataZoom[0].endValue) === seriesValue.length - 1) {
+                oldOptions.dataZoom[0].endValue = 4
+                oldOptions.dataZoom[0].startValue = 0
+            } else {
+                oldOptions.dataZoom[0].endValue = oldOptions.dataZoom[0].endValue + 1
+                oldOptions.dataZoom[0].startValue = oldOptions.dataZoom[0].startValue + 1
+            }
+
+            if (!instance) clearInterval(interval)
+            instance && instance.setOption({
+                xAxis: {
+                    data: xAxisData
+                },
+                series: [
+                    {
+                        data: seriesValue
+                    }
+                ],
+                dataZoom: [
+                    {
+                        startValue: seriesValue.length > 5
+                            ? oldStartValue === seriesValue.length - 1
+                                ? 0
+                                : oldStartValue + 1
+                            : 0,
+                        endValue: seriesValue.length > 5
+                            ? oldEndValue === seriesValue.length - 1
+                                ? 4
+                                : oldEndValue + 1
+                            : 4
+                    }
+                ]
+            })
+        }
+    }
+
+    /**
+     * @description 更新历史数据
+     */
+    updateHistoryDataSource(message) {
+        const { data = {}, subscriptionId } = message
+        const node = this.getNodeByCmdId(subscriptionId)
+        if (!node) return
+        const enumConst = Sidebar.prototype.enumCellBasicAttribute
+        const chartInstanceMap = Sidebar.prototype.chartsInstanceMapping
+        const chartInstanceId = node.getAttribute(enumConst.CHART_INSTANCE_ID)
+        const chartInstanceType = node.getAttribute(enumConst.COMPONENT_TYPE)
+        const instance = chartInstanceMap.get(chartInstanceId)
+        const { attr = [[]] } = this.getBindData(subscriptionId)
+        const historyDataList = data[attr]
+
+        const xAxisData = []
+        const seriesValue = []
+        const chartOption = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            grid: {
+                left: '3%',
+                right: '3%',
+                bottom: '3%',
+                containLabel: true,
+            },
+            xAxis: {
+                name: '时间',
+                type: 'category',
+                data: xAxisData,
+                boundaryGap: true,
+                axisLabel: {
+                    rotate: 70
+                },
+                axisPointer: {
+                    label: {
+                        formatter() {
+                            return attr
+                        }
+                    }
+                }
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [
+                {
+                    data: seriesValue,
+                    type: chartInstanceType.includes('bar') ? 'bar' : 'line',
+                }
+            ],
+            dataZoom: [
+                {
+                    xAxisIndex: 0,
+                    show: false,
+                    type: 'slider',
+                    startValue: 0,
+                    endValue: 4
+                }
+            ]
+        }
+
+        for (let i = historyDataList.length - 1; i >= 0; i--) {
+            const [timespan, value] = historyDataList[i]
+            xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())
+            seriesValue.push(Number(value))
+        }
+
+        let interval
+        // TODO 清除定时器
+        function autoMove() {
+            interval = setInterval(() => {
+                if (Number(chartOption.dataZoom[0].endValue) === seriesValue.length - 1) {
+                    chartOption.dataZoom[0].endValue = 4
+                    chartOption.dataZoom[0].startValue = 0
+                } else {
+                    chartOption.dataZoom[0].endValue = chartOption.dataZoom[0].endValue + 1
+                    chartOption.dataZoom[0].startValue = chartOption.dataZoom[0].startValue + 1
+                }
+
+                if (!instance) clearInterval(interval)
+                instance && instance.setOption(chartOption)
+            }, 2000);
+        }
+
+        function stop() {
+            clearInterval(interval)
+        }
+
+        function goMove() {
+            autoMove()
+        }
+
+        instance.setOption(chartOption)
+        instance.on('mouseover', stop)
+        instance.on('mouseout', goMove)
+        autoMove()
+    }
+
+    /**
+     * @description 获取绑定的数据
+     * @param subscriptionId
+     * @param actionType
+     * @return {*}
+     */
+    getBindData(subscriptionId) {
+        const nodeId = this.getNodeIdByCmdId(subscriptionId)
+        const temp = this.dataSourceNodeMapping.get(nodeId) || {}
+        return temp
+    }
+
+    /**
+     * @description 获取cmdId
+     * @param {string} nodeId 
+     * @returns 
+     */
+    getCmdId(nodeId) {
+        return this.DispatchInstance.getCmdId(nodeId)
+    }
+
+    /**
+     * @description 通过cmdID获取节点id
+     * @param subscriptionId
+     * @return {string}
+     */
+    getNodeIdByCmdId(subscriptionId) {
+        return this.DispatchInstance.cmdIdMapping.get(subscriptionId)
+    }
+
+    /**
+    * @description 通过cmdID 获取节点
+    * @param subscriptionId
+    * @return {*}
+    */
+    getNodeByCmdId(subscriptionId) {
+        const nodeId = this.getNodeIdByCmdId(subscriptionId)
+        return this.DispatchInstance.contentAllCell.find(item => item.id === nodeId)
+    }
+
+    /**
+     * @description 发送socket 消息
+     * @param {any} msg 
+     * @returns 
+     */
+    sendMsg(msg) {
+        return this.DispatchInstance.sendMessageToGetRealTimeData(msg)
+    }
+
+    updatePage(callback, cell) {
+        return this.DispatchInstance.updatePage(callback, cell)
+    }
+}
+
 class HandleDataInteraction {
     /**
      * @description 事件分发中心实例
@@ -12400,7 +12931,6 @@ class HandleDataInteraction {
             graphDblClick.apply(this.graph, args)
         }
-
         const graphClick = this.graph.click;
         this.graph.click = (...args) => {
             this.handleClickEvent(...args)
@@ -12534,7 +13064,7 @@ class HandleDataInteraction {
 }
 /**
- * @description 处理数据
+ * @description 处理数据动效
  */
 class HandleDynamicEffect {
@@ -12557,12 +13087,6 @@ class HandleDynamicEffect {
     actNodeMapping = new Map()
     /**
-     * @description cmdID 与 nodeID 关系映射
-     * @type {Map<number, string>}
-     */
-    cmdIdMapping = new Map()
-
-    /**
      * @description clear setInterval
      */
     cleanSetInterval
@@ -12777,7 +13301,6 @@ class HandleDynamicEffect {
             node.setVisible(flashFlag)
             flashFlag = !flashFlag
         }
-        console.log(this.actNodeMapping)
         const key = node.id + DispatchCenter.enumDynamicEffectType.FLASH
         if (!flag) {
             flashFlag = true
@@ -12847,7 +13370,7 @@ class HandleDynamicEffect {
     getBindData(subscriptionId, actionType) {
         const nodeId = this.getNodeIdByCmdId(subscriptionId)
         const temp = this.actNodeMapping.get(nodeId)
-        return temp.get(actionTypxe)
+        return temp.get(actionType)
     }
     /**