fix: chart component xAxis sort

ww
1 parent 1e444fb1
Showing 1 changed file with 64 additions and 48 deletions
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/grapheditor/Format.js
View file @819b08d
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @819b08d
@@ -6890,14 +6890,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         /**
          * @description 下拉选项挂载
          */
-         function createSelectOptionMountEvent() {
+        function createSelectOptionMountEvent() {
             $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', '.layui-form-select', event => {
                 const width = event.currentTarget.offsetWidth || 200
                 const height = event.currentTarget.offsetHeight || 38
                 const offset = $(event.currentTarget).offset()
                 $(event.currentTarget).find('dl').css({
                     position: 'fixed',
-                    'min-width': width + 'px', 
+                    'min-width': width + 'px',
                     top: offset.top + height + 'px',
                     left: offset.left + 'px'
                 })
@@ -12487,7 +12487,7 @@ class HandleDataSource {
      * @description 普通数据源绑定列表
      */
     get commonDataSourceBindList() {
-        return this.DispatchInstance.contentData?.dataSources?.filter(item => !item.additional) || []
+        return this.DispatchInstance.contentData?.dataSources?.filter(item => !item.additional && item.attr) || []
     }
     /**
@@ -12553,13 +12553,17 @@ class HandleDataSource {
                 template[STARTTs] = Date.now() - scope
                 template[ENDTs] = Date.now()
                 historyList.push(template)
-                this.subscribeEvent(cmdId, this.updateHistoryDataSource.bind(this))
+                this.subscribeEvent(cmdId, (message) => {
+                    this.updateHistoryDataSource(message, agg)
+                })
             }
             else if (dataType === REAL) {
                 template[STARTTs] = Date.now() - scope
-                template['timeWindow'] = interval
+                // template['timeWindow'] = interval
                 realList.push(template)
-                this.subscribeEvent(cmdId, this.updateRealTimeDataSource.bind(this))
+                this.subscribeEvent(cmdId, (message) => {
+                    this.updateRealTimeDataSource(message, agg)
+                })
             }
             this.dataSourceNodeMapping.set(nodeId, item)
         }
@@ -12595,9 +12599,9 @@ class HandleDataSource {
     /**
      * @description 更新实时数据
      * @param {} message 
+     * @param {} agg  聚合方式
      */
-    updateRealTimeDataSource(message) {
-        console.log(message)
+    updateRealTimeDataSource(message, agg) {
         const { data = {}, subscriptionId } = message
         const node = this.getNodeByCmdId(subscriptionId)
         if (!node) return
@@ -12608,11 +12612,12 @@ class HandleDataSource {
         const instance = chartInstanceMap.get(chartInstanceId)
         const { attr = [[]] } = this.getBindData(subscriptionId)
         const realDataList = data[attr] || []
+        const showNumberOf = 4
+        const action = agg === 'NONE' ? 'unshift' : 'push'
+
+        // const chartWidth = node.getAttribute('width')
+        // const chartHeight = node.getAttribute('height')
-        const chartWidth = node.getAttribute('width')
-        const chartHeight = node.getAttribute('height')
-        console.log(chartHeight)
-        console.log(chartWidth)
         // chart insstance 是否已经接受过一次消息推送
         const isActive = instance.isActive
         if (!isActive) {
@@ -12621,24 +12626,10 @@ class HandleDataSource {
             const seriesValue = []
             const chartOption = {
                 title: {
-                    // text: '{a|}',
-                    subtext: '暂无数据',
+                    subtext: realDataList.length ? '' :'暂无数据',
                     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
                     }
@@ -12682,20 +12673,25 @@ class HandleDataSource {
                 dataZoom: [
                     {
                         xAxisIndex: 0,
-                        show: realDataList.length ? true : false,
+                        show: true,
                         type: 'slider',
                         startValue: 0,
-                        endValue: 4
+                        endValue: showNumberOf
                     }
                 ]
             }
-            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)
+            // 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))
+            // }
+            realDataList.forEach(item => {
+                const [timespan, value] = item
+                xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())
+                seriesValue[action](Number(value))
+            })
+
             instance.setOption(chartOption)
         } else {
@@ -12712,7 +12708,7 @@ class HandleDataSource {
             }
             if (Number(oldOptions.dataZoom[0].endValue) === seriesValue.length - 1) {
-                oldOptions.dataZoom[0].endValue = 4
+                oldOptions.dataZoom[0].endValue = showNumberOf
                 oldOptions.dataZoom[0].startValue = 0
             } else {
                 oldOptions.dataZoom[0].endValue = oldOptions.dataZoom[0].endValue + 1
@@ -12721,6 +12717,9 @@ class HandleDataSource {
             if (!instance) clearInterval(interval)
             instance && instance.setOption({
+                title: {
+                    subtext: ''
+                },
                 xAxis: {
                     data: xAxisData
                 },
@@ -12731,16 +12730,16 @@ class HandleDataSource {
                 ],
                 dataZoom: [
                     {
-                        startValue: seriesValue.length > 5
+                        startValue: seriesValue.length - 1 > showNumberOf
                             ? oldStartValue === seriesValue.length - 1
                                 ? 0
                                 : oldStartValue + 1
                             : 0,
-                        endValue: seriesValue.length > 5
+                        endValue: seriesValue.length - 1 > showNumberOf
                             ? oldEndValue === seriesValue.length - 1
-                                ? 4
+                                ? showNumberOf
                                 : oldEndValue + 1
-                            : 4
+                            : showNumberOf
                     }
                 ]
             })
@@ -12750,7 +12749,7 @@ class HandleDataSource {
     /**
      * @description 更新历史数据
      */
-    updateHistoryDataSource(message) {
+    updateHistoryDataSource(message, agg) {
         const { data = {}, subscriptionId } = message
         const node = this.getNodeByCmdId(subscriptionId)
         if (!node) return
@@ -12761,10 +12760,22 @@ class HandleDataSource {
         const instance = chartInstanceMap.get(chartInstanceId)
         const { attr = [[]] } = this.getBindData(subscriptionId)
         const historyDataList = data[attr] || []
+        const showNumberOf = 4
+        const action = agg === 'NONE' ? 'unshift' : 'push'
+
         const xAxisData = []
         const seriesValue = []
         const chartOption = {
+            title: {
+                subtext: historyDataList.length ? '' :'暂无数据',
+                x: 'center',
+                y: 'center',
+                itemGap: -20,
+                subtextStyle: {
+                    fontSize: 16
+                }
+            },
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
@@ -12808,16 +12819,16 @@ class HandleDataSource {
                     show: false,
                     type: 'slider',
                     startValue: 0,
-                    endValue: 4
+                    endValue: showNumberOf
                 }
             ]
         }
-        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))
-        }
+        historyDataList.forEach(item => {
+            const [timespan, value] = item
+            xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())
+            seriesValue[action](Number(value))
+        })
         let interval
         // TODO 清除定时器
@@ -12825,7 +12836,7 @@ class HandleDataSource {
             if (seriesValue.length <= 5) return
             interval = setInterval(() => {
                 if (Number(chartOption.dataZoom[0].endValue) === seriesValue.length - 1) {
-                    chartOption.dataZoom[0].endValue = 4
+                    chartOption.dataZoom[0].endValue = showNumberOf
                     chartOption.dataZoom[0].startValue = 0
                 } else {
                     chartOption.dataZoom[0].endValue = chartOption.dataZoom[0].endValue + 1
@@ -13309,6 +13320,7 @@ class HandleDynamicEffect {
             this.delUpdateFn(key)
             return
         }
+        console.log(this.actNodeMapping)
         this.insertContinueUpdateFn(node, updateFn, key)
     }
@@ -13332,6 +13344,10 @@ class HandleDynamicEffect {
         }
         const updateFn = () => {
             node.setVisible(isShow)
+            node.setAttribute('display', isShow)
+            console.log('isShow', isShow)
+            console.log(node.style)
+            console.log(node)
         }
         this.insertOnceUpdateFn(node, updateFn)
     }