Merge branch 'ww' into 'main'

perf: chart component add legend && title See merge request huang/thingskit-drawio!48

Merge branch 'ww' into 'main'
perf: chart component add legend && title See merge request huang/thingskit-drawio!48
xp.Huang
2 parents 81c5a53e b35f6248
Showing 1 changed file with 150 additions and 34 deletions
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/grapheditor/Format.js
View file @81352d5
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @81352d5
@@ -5924,9 +5924,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             [componentType.VARIABLE]: getSubmitValue,
             [componentType.LINE]: getSubmitValue,
             [componentType.REAL_TIME]: getSubmitValue,
-            [componentType.LINE_CHART]: getSubmitValue,
-            [componentType.BAR_CHART]: getSubmitValue,
-            [componentType.DASHBOARD_CHART]: getSubmitValue,
+            [componentType.LINE_CHART]: getChartSubmitValue,
+            [componentType.BAR_CHART]: getChartSubmitValue,
+            [componentType.DASHBOARD_CHART]: getChartSubmitValue,
             [componentType.DEFAULT]: getSubmitValue,
             [componentType.VIDEO]: getVideoSubmitValue,
             [componentType.SWITCH]: getSwitchSubmitValue,
@@ -5941,7 +5941,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function getSubmitValue(field) {
             const ENABLED_FLAG = 'on'
             const additionalKey = HandleDataSource.enumConst
-
             const value = {
                 configurationId,
                 contentId: currentPageId.id,
@@ -5962,6 +5961,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     } : null
                 },
             }
+
             const allType = [...interactionList, ...dynamicEffectList]
             for (const item of allType) {
                 if (field[item.type] === ENABLED_FLAG) {
@@ -5982,6 +5982,37 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             return value
         }
+        function getChartSubmitValue() {
+            const additionalKey = HandleDataSource.enumConst
+
+            const value = {
+                configurationId,
+                contentId: currentPageId.id,
+                nodeId: graphId,
+                [enumCategory.ACT]: [],
+                [enumCategory.EVENT]: [],
+                [enumCategory.DATA_SOURCE]: {
+                    [enumDataSourceConst.ORG_ID]: field[enumDataSourceConst.ORG_ID],
+                    [enumDataSourceConst.DEVICE_ID]: field[enumDataSourceConst.DEVICE_ID],
+                    [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] ? field[enumDataSourceConst.SLAVE_DEVICE_ID] : '',
+                    [enumDataSourceConst.ATTR]: field[enumDataSourceConst.ATTR],
+                    [enumDataSourceConst.ADDITIONAL]: {
+                        [additionalKey.ORG_NAME]: field[additionalKey.ORG_NAME],
+                        [additionalKey.DEVICE_NAME]: field[additionalKey.DEVICE_NAME],
+                        [additionalKey.SLAVE_DEVICE_NAME]: field[additionalKey.SLAVE_DEVICE_NAME],
+                        [additionalKey.ATTR_NAME]: field[additionalKey.ATTR_NAME],
+                        [additionalKey.AGG]: field[additionalKey.AGG],
+                        [additionalKey.DATA_TYPE]: field[additionalKey.DATA_TYPE],
+                        [additionalKey.INTERVAL]: field[additionalKey.INTERVAL],
+                        [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE],
+                        ...(field[additionalKey.UNIT] ? { [additionalKey.UNIT]: field[additionalKey.UNIT] } : {})
+                    }
+                },
+            }
+
+            return value
+        }
+
         function getVideoSubmitValue() {
             const value = {
                 configurationId,
@@ -7738,13 +7769,24 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             SLAVE_DEVICE_ID: 'slaveDeviceId',
             ATTR: 'attr',
             GATEWAY: 'GATEWAY',
+            ORG_NAME: 'orgName',
+            DEVICE_NAME: 'deviceName',
+            SLAVE_DEVICE_NAME: 'slaveDeviceName',
+            ATTR_NAME: 'attrName'
         }
+
         /**
          * @description
          * @type {{id: string, deviceType: string, name: string}[]}
          */
         let deviceList = []
+        /**
+        * @description
+        * @type {{id: string, deviceType: string, name: string}[]}
+        */
+        let slaveDeviceList = []
+
         const component = document.createElement('div')
         $(component)
@@ -7761,6 +7803,25 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             generatorDeviceSelect()
             generatorSlaveDevice()
             generatorAttrSelect()
+            generateDeviceNameInput()
+        }
+
+        async function generateDeviceNameInput() {
+            const template = `
+                <div class="layui-form-item" style="margin-bottom: 0">
+                    <input style="display: none" type="text" name="${enumDataSourceConst.ORG_NAME}" class="layui-input">
+                </div>
+                <div class="layui-form-item" style="margin-bottom: 0">
+                    <input style="display: none" type="text" name="${enumDataSourceConst.DEVICE_NAME}" class="layui-input">
+                </div>
+                <div class="layui-form-item" style="margin-bottom: 0">
+                    <input style="display: none" type="text" name="${enumDataSourceConst.SLAVE_DEVICE_NAME}" class="layui-input">
+                </div>
+                <div class="layui-form-item" style="margin-bottom: 0">
+                    <input style="display: none" type="text" name="${enumDataSourceConst.ATTR_NAME}" class="layui-input">
+                </div>
+            `
+            $(component).append(template)
         }
@@ -7780,7 +7841,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         async function getSlaveDeviceByMasterDeviceId(orgId, deviceId) {
             if (deviceId && currentCheckedOrgNode) {
-                const items = await ConfigurationNodeApi.getSlaveDevice(orgId, deviceId);
+                const items = slaveDeviceList = await ConfigurationNodeApi.getSlaveDevice(orgId, deviceId);
                 $(`#${componentId} `).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: items }))
                 form.render('select', componentFilter)
             }
@@ -7823,9 +7884,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     click(node) {
                         currentCheckedOrgNode = node.data.id
                         form.val(componentFilter, {
+                            [enumDataSourceConst.ORG_NAME]: node.data.title,
                             [enumDataSourceConst.DEVICE_ID]: null,
                             [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
                             [enumDataSourceConst.ATTR]: null,
+                            [enumDataSourceConst.DEVICE_NAME]: null,
+                            [enumDataSourceConst.SLAVE_DEVICE_NAME]: null,
+                            [enumDataSourceConst.ATTR_NAME]: null,
                         })
                         getDevicesByOrgId(node.data.id)
                     },
@@ -7847,8 +7912,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     const { value } = data
                     const selected = deviceList.find(item => item.id === value)
                     form.val(componentFilter, {
+                        [enumDataSourceConst.DEVICE_NAME]: selected.name,
                         [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
                         [enumDataSourceConst.ATTR]: null,
+                        [enumDataSourceConst.SLAVE_DEVICE_NAME]: null,
+                        [enumDataSourceConst.ATTR_NAME]: null,
                     })
                     if (!selected) return
                     if (selected.deviceType === enumDataSourceConst.GATEWAY) {
@@ -7878,8 +7946,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 className: 'data-source__component-select',
                 onClick(data) {
                     const { value } = data
+                    const selected = slaveDeviceList.find(item => item.id === value)
                     form.val(componentFilter, {
+                        [enumDataSourceConst.SLAVE_DEVICE_NAME]: selected.name,
                         [enumDataSourceConst.ATTR]: null,
+                        [enumDataSourceConst.ATTR_NAME]: null,
                     })
                     getAttrByDeviceId(value)
                 },
@@ -7897,6 +7968,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 layFilter: `${componentFilter}--${enumDataSourceConst.ATTR}`,
                 className: 'data-source__component-select',
                 ...validateRule,
+                onClick(data) {
+                    const { value } = data
+                    form.val(componentFilter, {
+                        [enumDataSourceConst.ATTR_NAME]: value,
+                    })
+                }
             })
             $(component).append(attrsSelect)
         }
@@ -13130,7 +13207,7 @@ class DispatchCenter {
         this.graph = editor.graph
         this.currentPage = currentPage
         // this.contentAllCell = this.graph.getDefaultParent().children || []
-        this.contentAllCell =  Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
+        this.contentAllCell = Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
     }
     /**
@@ -13286,7 +13363,27 @@ class HandleDataSource {
         /**
          * @description 绑定数据类型
          */
-        DATA_TYPE: 'dataType'
+        DATA_TYPE: 'dataType',
+
+        /**
+         * @description 组织名称
+         */
+        ORG_NAME: 'orgName',
+
+        /**
+         * @description 设备名称
+         */
+        DEVICE_NAME: 'deviceName',
+
+        /**
+         * @description 子设备名称
+         */
+        SLAVE_DEVICE_NAME: 'slaveDeviceName',
+
+        /**
+         * @description 属性名称
+         */
+        ATTR_NAME: 'attrName'
     }
@@ -13353,7 +13450,7 @@ class HandleDataSource {
     get contentAllCell() {
         // return this.graph.getDefaultParent().children || []
-        return  Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
+        return Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
     }
     /**
@@ -13549,7 +13646,7 @@ class HandleDataSource {
         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 { attr = [[]], additional } = this.getBindData(subscriptionId)
         const realDataList = data[attr] || []
         const action = agg === 'NONE' ? 'unshift' : 'push'
@@ -13558,12 +13655,12 @@ class HandleDataSource {
         const isActive = instance.isActive
         if (!isActive) {
             instance.isActive = true
-            const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action, nodeId: node.id })
+            const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action, nodeId: node.id , additional})
             instance.setOption(chartOption)
         } else {
             const oldOptions = instance.getOption()
-            const options = this.getRealTimeUpdateChartOption(chartInstanceType, { oldOptions, dataList: realDataList })
+            const options = this.getRealTimeUpdateChartOption(chartInstanceType, { oldOptions, dataList: realDataList , additional})
             if (!instance) clearInterval(interval)
             instance && instance.setOption(options)
         }
@@ -13581,12 +13678,12 @@ class HandleDataSource {
         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 { attr = [[]], additional } = this.getBindData(subscriptionId)
         const historyDataList = data[attr] || []
         const showNumberOf = 4
         const action = agg === 'NONE' ? 'unshift' : 'push'
-        const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action })
+        const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action, additional })
         let interval
         // TODO 清除定时器
@@ -13624,14 +13721,14 @@ class HandleDataSource {
     }
     getChartComponentOption(chartInstanceType, params) {
-        const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
+        const { LINE_CHART, BAR_CHART, DASHBOARD_CHART, additional } = Sidebar.prototype.enumComponentType
         switch (chartInstanceType) {
             case LINE_CHART:
-                return this.getBasicChartOption(Object.assign(params, { chartType: 'line' }))
+                return this.getBasicChartOption(Object.assign(params, { chartType: 'line' }, additional))
             case BAR_CHART:
-                return this.getBasicChartOption(Object.assign(params, { chartType: 'bar' }))
+                return this.getBasicChartOption(Object.assign(params, { chartType: 'bar' }), additional)
             case DASHBOARD_CHART:
-                return this.getDashboardChartOption(params)
+                return this.getDashboardChartOption(Object.assign(params, additional))
             default:
                 return {}
         }
@@ -13656,9 +13753,9 @@ class HandleDataSource {
      * @param {@} params 
      * @returns 
      */
-    getBasicChartOption(params = { dataList: [], attr: '', chartType: 'bar', action }) {
-        const { dataList = [], attr = '', chartType = 'bar', action } = params
-
+    getBasicChartOption(params = { dataList: [], attr: '', chartType: 'bar', action, additional }) {
+        const { dataList = [], attr = '', chartType = 'bar', action, additional = {} } = params
+        const { deviceName, slaveDeviceName, attrName } = additional
         const xAxisData = []
         const seriesValue = []
@@ -13667,13 +13764,13 @@ class HandleDataSource {
             xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())
             seriesValue[action](Number(value))
         })
-
         return {
             title: {
+                text: slaveDeviceName || deviceName,
                 subtext: dataList.length ? '' : '暂无数据',
-                x: 'center',
-                y: 'center',
-                itemGap: -20,
+                x: dataList.length ? '' : 'center',
+                y: dataList.length ? '' : 'center',
+                // itemGap: -20,
                 subtextStyle: {
                     fontSize: 16
                 }
@@ -13684,6 +13781,9 @@ class HandleDataSource {
                     type: 'shadow'
                 }
             },
+            legend: {
+                data: [attrName]
+            },
             grid: {
                 left: '3%',
                 right: '3%',
@@ -13711,6 +13811,7 @@ class HandleDataSource {
             },
             series: [
                 {
+                    name: attrName,
                     data: seriesValue,
                     type: chartType,
                 }
@@ -13724,8 +13825,9 @@ class HandleDataSource {
         }
     }
-    getRealTimeUpdateBasicChartOption(params = { oldOptions: {}, dataList: [] }) {
-        const { oldOptions, dataList } = params
+    getRealTimeUpdateBasicChartOption(params = { oldOptions: {}, dataList: [], additional: {} }) {
+        const { oldOptions, dataList, additional = {} } = params
+        const { slaveDeviceName, deviceName, attrName } = additional
         const xAxisData = oldOptions.xAxis[0].data || []
         const seriesValue = oldOptions.series[0].data || []
         const oldEndValue = Number(oldOptions.dataZoom[0].endValue) || 0
@@ -13748,13 +13850,20 @@ class HandleDataSource {
         return {
             title: {
-                subtext: ''
+                text: slaveDeviceName || deviceName,
+                subtext: '',
+                x: dataList.length ? '' : 'center',
+                y: dataList.length ? '' : 'center',
+            },
+            legend: {
+                data: [attrName]
             },
             xAxis: {
                 data: xAxisData
             },
             series: [
                 {
+                    name: attrName,
                     data: seriesValue
                 }
             ],
@@ -13767,13 +13876,17 @@ class HandleDataSource {
         }
     }
-    getDashboardChartOption(params = { dataList: [], nodeId }) {
-        const { dataList = [], nodeId } = params
+    getDashboardChartOption(params = { dataList: [], nodeId, additional: {} }) {
+        const { dataList = [], nodeId, additional = {} } = params
+        const { deviceName, slaveDeviceName, attrName } = additional
         const dataSource = this.DispatchInstance.contentData.dataSources.find(item => item.nodeId === nodeId) || {}
         const { additional: { unit = '°C' } = {} } = dataSource
         const [timespan, value] = dataList[0] || []
         return {
+            title: {
+                text: slaveDeviceName || deviceName
+            },
             series: [
                 {
                     type: 'gauge',
@@ -13825,7 +13938,8 @@ class HandleDataSource {
                         show: false
                     },
                     title: {
-                        show: false
+                        text: slaveDeviceName || deviceName,
+                        // show: false
                     },
                     detail: {
                         valueAnimation: true,
@@ -13851,13 +13965,15 @@ class HandleDataSource {
     /**
      * @description 获取仪表盘配置
      */
-    getRealTimeUpdateDashboardChartOption(params = { dataList: [] }) {
-        const { dataList = [], oldOptions } = params
+    getRealTimeUpdateDashboardChartOption(params = { dataList: [] , additional: {}}) {
+        const { dataList = [], oldOptions, additional } = params
+        const { attrName } = additional
         const [timespan, value] = dataList[0] || []
         console.log(value)
         return {
             series: [
                 {
+                    name: attrName,
                     data: [
                         {
                             value
@@ -13872,7 +13988,7 @@ class HandleDataSource {
      * @description 获取绑定的数据
      * @param subscriptionId
      * @param actionType
-     * @return {*}
+     * @return {{attr: string, additional: { agg: string, dataType: string, effectScope: string, interval: string, unit: string, orgName: string, deviceName: string, slaveDeviceName: string, attrName: string }}}
      */
     getBindData(subscriptionId) {
         const nodeId = this.getNodeIdByCmdId(subscriptionId)
@@ -14491,7 +14607,7 @@ class HandleDynamicEffect {
     get contentAllCell() {
         // return this.graph.getDefaultParent().children || [] 
-        return  Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
+        return Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
     }
     /**