perf: implement chart component render

ww
1 parent 485ac3c3
Showing 5 changed files with 71 additions and 44 deletions
src/main/webapp/images/thingskit/empty.png
src/main/webapp/images/thingskit/empty.svg
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/images/thingskit/empty.png 0 → 100644
View file @3a8530b
+++ b/src/main/webapp/images/thingskit/empty.png 0 → 100644
View file @3a8530b
--- a/src/main/webapp/images/thingskit/empty.svg 0 → 100644
View file @3a8530b
+++ b/src/main/webapp/images/thingskit/empty.svg 0 → 100644
View file @3a8530b
+<svg viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient-1-1" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#EEEFF3" offset="100%"></stop></linearGradient><linearGradient id="linearGradient-2-1" x1="0%" y1="9.5%" x2="100%" y2="90.5%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#E9EBEF" offset="100%"></stop></linearGradient><rect id="path-3-1" x="0" y="0" width="17" height="36"></rect></defs><g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="B-type" transform="translate(-1268.000000, -535.000000)"><g id="Group-2" transform="translate(1268.000000, 535.000000)"><path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC"></path><polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45"></polygon><g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"><polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7"></polygon><polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon><rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-1)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36"></rect><polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"></polygon></g><rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-1)" x="13" y="45" width="40" height="36"></rect><g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)"><mask id="mask-4-1" fill="white"><use xlink:href="#path-3-1"></use></mask><use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-1"></use><polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-1)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16"></polygon></g><polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58"></polygon></g></g></g></svg>
--- a/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @3a8530b
+++ b/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @3a8530b
@@ -253,7 +253,9 @@
 	 */
 	Sidebar.prototype.enumPermissionPanel = {
 		DATA_SOURCE: 'dataSource',
-		DISPLAY_TYPE: 'displayType',
+		// DISPLAY_TYPE: 'displayType',
+		LINE_CHART_EXPAND: 'lineChartExpandDataSource',
+		BAR_CHART_EXPAND: 'barChartExpandDataSource',
 		INTERACTION: 'interaction',
 		DYNAMIC_EFFECT: 'dynamicEffect',
 		VAR_IMAGE: 'variableImage'
@@ -610,7 +612,7 @@
 		//更多图形，显示出来的的标题跟id，同时包括图片
 		// TODO thingsKit 设置数据绑定展示面板
-		const { DISPLAY_TYPE, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION } = this.enumPermissionPanel
+		const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION } = this.enumPermissionPanel
 		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART } = this.enumComponentType
 		this.setComponentPermission(LINE, [DYNAMIC_EFFECT])
 		this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
@@ -618,8 +620,8 @@
 		this.setComponentPermission(TITLE, [INTERACTION, DYNAMIC_EFFECT])
 		this.setComponentPermission(VAR_IMAGE, [DATA_SOURCE, INTERACTION, VAR_IMAGE])
 		this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
-		this.setComponentPermission(BAR_CHART, [DATA_SOURCE, DISPLAY_TYPE, DYNAMIC_EFFECT])
-		this.setComponentPermission(LINE_CHART, [DATA_SOURCE, DISPLAY_TYPE, DYNAMIC_EFFECT])
+		this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND, DYNAMIC_EFFECT])
+		this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND, DYNAMIC_EFFECT])
 		var thingskitEntries = [
 			{ title: "风机", id: 'fan', image: IMAGE_PATH + '/thingskit/风机.png' },
--- a/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
View file @3a8530b
+++ b/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
View file @3a8530b
@@ -194,6 +194,7 @@
 		const chartOptionMapping = this.chartOptionMapping
 		const chartsInstanceMapping = this.chartsInstanceMapping
 		const chartDom = document.getElementById(id);
+		if (!chartDom) return
 		chartDom.style.width = `${width}px`
 		chartDom.style.height = `${height}px`
 		const myChart = echarts.init(chartDom);
--- a/src/main/webapp/js/grapheditor/Format.js
View file @3a8530b
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @3a8530b
@@ -5092,7 +5092,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const renderMapping = {
             [permissionKey.DATA_SOURCE]: createDataSourcePanel,
-            [permissionKey.DISPLAY_TYPE]: createChartBindPanel,
+            // [permissionKey.DISPLAY_TYPE]: createChartBindPanel,
+            [permissionKey.LINE_CHART_EXPAND]: createLineChartPanel,
+            [permissionKey.BAR_CHART_EXPAND]: createBarChartPanel,
             [permissionKey.INTERACTION]: createInteractionPanel,
             [permissionKey.DYNAMIC_EFFECT]: createDynamicEffectPanel,
             [permissionKey.VAR_IMAGE]: createVarImagePanel,
@@ -5208,14 +5210,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     }
     function createLineChartPanel() {
-
+        createChartBindPanel(true)
     }
     function createBarChartPanel() {
-
+        createChartBindPanel(false)
     }
-    function createChartBindPanel() {
+    /**
+     * @description 是否是折线图
+     * @param {boolean} isLineChart 
+     */
+    function createChartBindPanel(isLineChart) {
         const fragment = document.createDocumentFragment()
         const chartBindContainer = document.createElement('div')
         chartBindContainer.setAttribute('class', 'chart-panel__style')
@@ -5485,22 +5491,21 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         })
         const aggergationOptions = [
+            { id: 'AVG', name: '平均值' },
             { id: 'MIN', name: '最小值' },
             { id: 'MAX', name: '最大值' },
-            { id: 'AVG', name: '平均值' },
             { id: 'SUM', name: '求和' },
             { id: 'COUNT', name: '计数' },
             { id: 'NONE', name: '空' },
         ]
-
-
         function createSwitchBindTypeRadio() {
+            const realOption = `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时">`
             return `
 			<div class="layui-form-item">
 				<label class="layui-form-label">数据类型</label>
 				<div class="layui-input-block">
-					<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时">
+                    ${isLineChart ? realOption : ''}
 					<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" checked>
 				</div>
 			</div>`
@@ -5573,7 +5578,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function echoData() {
             const { dataSources = [] } = currentNodeData
             const { additional = {} } = dataSources[0] || {}
-            const { [enumBindKey.EFFECT_SCOPE]: effectScope } = additional
+            const { [enumBindKey.EFFECT_SCOPE]: effectScope = 1000 } = additional
+            console.log(additional)
             linkageIntervalSelect(effectScope)
             form.val(CONTAINER_FILTER, additional)
         }
@@ -11816,7 +11822,6 @@ class EventCenter {
     emit(eventName, ...args) {
         if (this.eventStack.has(eventName))
             this.eventStack.get(eventName).forEach(fn => fn(...args))
-
     }
     /**
@@ -12325,10 +12330,12 @@ class DispatchCenter {
      * @description 分发事件
      */
     publishEvent(eventName, data, message, event, ws) {
-        data = data ? data : {}
-        Object.keys(data).forEach(() => {
-            this.eventBus.emit(eventName, message, event, ws)
-        })
+        // data = data ? data : {}
+        this.eventBus.emit(eventName, message, event, ws)
+        // console.log(arguments)
+        // Object.keys(data).forEach(() => {
+        //     this.eventBus.emit(eventName, message, event, ws)
+        // })
     }
     /**
@@ -12530,7 +12537,7 @@ class HandleDataSource {
             }
             else if (dataType === REAL) {
                 template[STARTTs] = Date.now() - scope
-                template['scope'] = 'LATEST_TELEMETRY'
+                template['timeWindow'] = interval
                 realList.push(template)
                 this.subscribeEvent(cmdId, this.updateRealTimeDataSource.bind(this))
             }
@@ -12549,6 +12556,10 @@ class HandleDataSource {
         this.DispatchInstance.eventBus.on(eventName, callback)
     }
+    /**
+     * @description 更新变量值
+     * @param {} message 
+     */
     updateCommonDataSource(message) {
         const { subscriptionId } = message
         const node = this.getNodeByCmdId(subscriptionId)
@@ -12560,27 +12571,12 @@ class HandleDataSource {
         }, 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) {
+        console.log(message)
         const { data = {}, subscriptionId } = message
         const node = this.getNodeByCmdId(subscriptionId)
         if (!node) return
@@ -12590,8 +12586,12 @@ class HandleDataSource {
         const chartInstanceType = node.getAttribute(enumConst.COMPONENT_TYPE)
         const instance = chartInstanceMap.get(chartInstanceId)
         const { attr = [[]] } = this.getBindData(subscriptionId)
-        const historyDataList = data[attr]
+        const realDataList = data[attr] || []
+        const chartWidth = node.getAttribute('width')
+        const chartHeight = node.getAttribute('height')
+        console.log(chartHeight)
+        console.log(chartWidth)
         // chart insstance 是否已经接受过一次消息推送
         const isActive = instance.isActive
         if (!isActive) {
@@ -12599,6 +12599,29 @@ class HandleDataSource {
             const xAxisData = []
             const seriesValue = []
             const chartOption = {
+                title: {
+                    // text: '{a|}',
+                    subtext: '暂无数据',
+                    x: 'center',
+                    y: 'center',
+                    itemGap: -20,
+                    // textStyle: {
+                    //     rich: {
+                    //         a: {
+                    //             color: '#000',
+                    //             fontSize: '16',
+                    //             height: 160,
+                    //             width: 180,
+                    //             backgroundColor: {
+                    //                 image: '/thingskit-drawio/images/thingskit/empty.svg'
+                    //             }
+                    //         }
+                    //     }
+                    // },
+                    subtextStyle: {
+                        fontSize: 16
+                    }
+                },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer: {
@@ -12638,7 +12661,7 @@ class HandleDataSource {
                 dataZoom: [
                     {
                         xAxisIndex: 0,
-                        // show: false,
+                        show: realDataList.length ?  true : false,
                         type: 'slider',
                         startValue: 0,
                         endValue: 4
@@ -12646,12 +12669,12 @@ class HandleDataSource {
                 ]
             }
-            for (let i = historyDataList.length - 1; i >= 0; i--) {
-                const [timespan, value] = historyDataList[i]
+            for (let i = realDataList.length - 1; i >= 0; i--) {
+                const [timespan, value] = realDataList[i]
                 xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())
                 seriesValue.push(Number(value))
             }
-
+            console.log(chartOption)
             instance.setOption(chartOption)
         } else {
@@ -12661,8 +12684,8 @@ class HandleDataSource {
             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]
+            for (let i = realDataList.length - 1; i >= 0; i--) {
+                const [timespan, value] = realDataList[i]
                 xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())
                 seriesValue.push(Number(value))
             }
@@ -12716,7 +12739,7 @@ class HandleDataSource {
         const chartInstanceType = node.getAttribute(enumConst.COMPONENT_TYPE)
         const instance = chartInstanceMap.get(chartInstanceId)
         const { attr = [[]] } = this.getBindData(subscriptionId)
-        const historyDataList = data[attr]
+        const historyDataList = data[attr] || []
         const xAxisData = []
         const seriesValue = []
@@ -13174,7 +13197,7 @@ class HandleDynamicEffect {
             this.subscribeEvent(cmdId, this.dispatch(type))
         })
-        this.sendMsg({ tsSubCmds })
+        if (tsSubCmds.length) this.sendMsg({ tsSubCmds })
     }
     /**