feat: dashboard chart component add unit field

ww
1 parent 755a9222
Showing 3 changed files with 40 additions and 95 deletions
src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
src/main/webapp/js/grapheditor/Format.js
src/main/webapp/styles/formatChange.css
--- a/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
View file @30efe55
+++ b/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
View file @30efe55
@@ -476,44 +476,6 @@
 						}
 					]
 				},
-				{
-					type: 'gauge',
-					center: ['50%', '60%'],
-					startAngle: 200,
-					endAngle: -20,
-					min: 0,
-					max: 60,
-					itemStyle: {
-						color: '#FD7347'
-					},
-					progress: {
-						show: true,
-						width: 8
-					},
-					pointer: {
-						show: false
-					},
-					axisLine: {
-						show: false
-					},
-					axisTick: {
-						show: false
-					},
-					splitLine: {
-						show: false
-					},
-					axisLabel: {
-						show: false
-					},
-					detail: {
-						show: false
-					},
-					data: [
-						{
-							value: 20
-						}
-					]
-				}
 			]
 		}
 	}
--- a/src/main/webapp/js/grapheditor/Format.js
View file @30efe55
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @30efe55
@@ -5446,8 +5446,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const enumActionEL = {
             SCOPE_FILTER: 'bindChartScopeFilter',
-            INTERVAL_EL: 'bindChartIntervalSelect'
+            INTERVAL_EL: 'bindChartIntervalSelect',
+
+            UNIT_EL: 'bindChartUnit'
         }
+        const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
+
         const enumBindKey = HandleDataSource.enumConst
         const enumDataType = HandleDataSource.enumDataBindType
         const enumConst = {
@@ -5470,7 +5474,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             /**
              * @description 间隔
              */
-            INTERVAL: enumBindKey.INTERVAL
+            INTERVAL: enumBindKey.INTERVAL,
+
+            /**
+             * @description 单位
+             */
+            UNIT: enumBindKey.UNIT
         }
         const enumTimeUnit = {
@@ -5714,7 +5723,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         ]
         function generateDataType() {
-            const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
             const realOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时" ${checked ? 'checked' : ''}>`
             const historyOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" ${checked ? 'checked' : ''}>`
@@ -5782,6 +5790,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 			</div>`
         }
+        function createUnitInput() {
+            return `
+			<div class="layui-form-item">
+				<label class="layui-form-label">单位</label>
+				<div class="layui-input-block" style="flex: 1;">
+                    <input id="${enumActionEL.UNIT_EL}" class="layui-input" value="°C" name="${enumConst.UNIT}" lay-filter="${enumConst.UNIT}" />
+				</div>
+			</div>`
+        }
+
         function generatorEventlisten() {
             form.on(`select(${enumActionEL.SCOPE_FILTER})`, event => {
                 const value = event.value || 0
@@ -5821,6 +5839,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         $(chartBindContainer).append(createQueryScopeSelect())
         $(chartBindContainer).append(createAggregationSelect())
         $(chartBindContainer).append(createIntervalSelect())
+        chartType === DASHBOARD_CHART && $(chartBindContainer).append(createUnitInput())
         fragment.append(chartBindContainer)
         $(container).append(fragment)
         generatorEventlisten()
@@ -5933,7 +5952,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         [additionalKey.AGG]: field[additionalKey.AGG],
                         [additionalKey.DATA_TYPE]: field[additionalKey.DATA_TYPE],
                         [additionalKey.INTERVAL]: field[additionalKey.INTERVAL],
-                        [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE]
+                        [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE],
+                        ...(field[additionalKey.UNIT] ? { [additionalKey.UNIT]: field[additionalKey.UNIT] } : {})
                     } : null
                 },
             }
@@ -13226,6 +13246,11 @@ class HandleDataSource {
         INTERVAL: 'interval',
         /**
+         * @description 单位
+         */
+        UNIT: 'unit',
+
+        /**
          * @description 开始时间
          */
         STARTTs: 'startTs',
@@ -13493,12 +13518,13 @@ class HandleDataSource {
         const realDataList = data[attr] || []
         const action = agg === 'NONE' ? 'unshift' : 'push'
+        console.log(instance.getOption())
         // chart insstance 是否已经接受过一次消息推送
         const isActive = instance.isActive
         if (!isActive) {
             instance.isActive = true
-            const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action })
+            const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action, nodeId: node.id })
             instance.setOption(chartOption)
         } else {
@@ -13525,7 +13551,6 @@ class HandleDataSource {
         const historyDataList = data[attr] || []
         const showNumberOf = 4
         const action = agg === 'NONE' ? 'unshift' : 'push'
-        const chartType = chartInstanceType.includes('bar') ? 'bar' : chartInstanceType.includes('line') ? 'line' : chartInstanceType.includes('dashboard') ? '' : ''
         const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action })
@@ -13708,8 +13733,11 @@ class HandleDataSource {
         }
     }
-    getDashboardChartOption(params = { dataList: [] }) {
-        const { dataList = [] } = params
+    getDashboardChartOption(params = { dataList: [], nodeId }) {
+        const { dataList = [], nodeId } = params
+        const dataSource = this.DispatchInstance.contentData.dataSources.find(item => item.nodeId === nodeId) || {}
+        const { additional: { unit = '°C' } = {} } = dataSource
+
         const [timespan, value] = dataList[0] || []
         return {
             series: [
@@ -13719,8 +13747,8 @@ class HandleDataSource {
                     startAngle: 200,
                     endAngle: -20,
                     min: 0,
-                    max: 60,
-                    splitNumber: 12,
+                    max: 100,
+                    splitNumber: 10,
                     itemStyle: {
                         color: '#FFAB91'
                     },
@@ -13771,7 +13799,7 @@ class HandleDataSource {
                         offsetCenter: [0, '-15%'],
                         fontSize: 25,
                         fontWeight: 'bolder',
-                        formatter: '{value} °C',
+                        formatter: `{value} ${unit}`,
                         color: 'auto'
                     },
                     data: [
@@ -13779,44 +13807,6 @@ class HandleDataSource {
                             value
                         }
                     ]
-                },
-                {
-                    type: 'gauge',
-                    center: ['50%', '60%'],
-                    startAngle: 200,
-                    endAngle: -20,
-                    min: 0,
-                    max: 60,
-                    itemStyle: {
-                        color: '#FD7347'
-                    },
-                    progress: {
-                        show: true,
-                        width: 8
-                    },
-                    pointer: {
-                        show: false
-                    },
-                    axisLine: {
-                        show: false
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        show: false
-                    },
-                    detail: {
-                        show: false
-                    },
-                    data: [
-                        {
-                            value
-                        }
-                    ]
                 }
             ]
         }
@@ -13837,13 +13827,6 @@ class HandleDataSource {
                         }
                     ]
                 },
-                {
-                    data: [
-                        {
-                            value
-                        }
-                    ]
-                }
             ]
         }
     }
--- a/src/main/webapp/styles/formatChange.css
View file @30efe55
+++ b/src/main/webapp/styles/formatChange.css
View file @30efe55
@@ -482,7 +482,7 @@
 }
 .chart-panel__style .layui-form-label {
-  width: 60px;
+  flex: 0 0 60px;
   box-sizing: border-box;
   padding: 9px 10px 9px 0;
 }