Merge branch 'ww' into 'main'

fix: fix some problem See merge request huang/thingskit-drawio!27

Merge branch 'ww' into 'main'
fix: fix some problem See merge request huang/thingskit-drawio!27
xp.Huang
2 parents 83502dce d2915ed7
Showing 2 changed files with 148 additions and 81 deletions
src/main/webapp/js/diagramly/sidebar/Sidebar.js
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @5b576b6
+++ b/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @5b576b6
@@ -618,10 +618,10 @@
 		this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
 		this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
 		this.setComponentPermission(TITLE, [INTERACTION, DYNAMIC_EFFECT])
-		this.setComponentPermission(VAR_IMAGE, [DATA_SOURCE, INTERACTION, VAR_IMAGE])
+		this.setComponentPermission(VAR_IMAGE, [INTERACTION, VAR_IMAGE])
 		this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
-		this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND, DYNAMIC_EFFECT])
-		this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND, DYNAMIC_EFFECT])
+		this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND])
+		this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
 		var thingskitEntries = [
 			{ title: "风机", id: 'fan', image: IMAGE_PATH + '/thingskit/风机.png' },
--- a/src/main/webapp/js/grapheditor/Format.js
View file @5b576b6
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @5b576b6
@@ -5579,7 +5579,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const { dataSources = [] } = currentNodeData
             const { additional = {} } = dataSources[0] || {}
             const { [enumBindKey.EFFECT_SCOPE]: effectScope = 1000 } = additional
-            console.log(additional)
             linkageIntervalSelect(effectScope)
             form.val(CONTAINER_FILTER, additional)
         }
@@ -5666,7 +5665,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     [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] }),
-                    [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] ? [enumDataSourceConst.SLAVE_DEVICE_ID] : '',
+                    [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] ? field[enumDataSourceConst.SLAVE_DEVICE_ID] : '',
                     [enumDataSourceConst.ATTR]: field[enumDataSourceConst.ATTR],
                     [enumDataSourceConst.ADDITIONAL]: field[additionalKey.DATA_TYPE] ? {
                         [additionalKey.AGG]: field[additionalKey.AGG],
@@ -6343,7 +6342,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         /**
          * @description 下拉选项挂载
          */
-        function createSelectOptionMountEvent(params) {
+        function createSelectOptionMountEvent() {
             $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).on('click', '.layui-form-select', event => {
                 const width = event.currentTarget.offsetWidth || 200
                 const height = event.currentTarget.offsetHeight || 38
@@ -6383,7 +6382,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function echoOrgTree(id) {
             orgId = id
             const node = UseLayUi.findTreeObjectByField(treeList, id)
-
             UseLayUi.nextTick(() => $(`#${enumActionEl.ORG_EL} input[name="${enumConst.ORG_ID}"]`).val(orgId).parent().find('span').html(node?.name))
         }
@@ -6527,8 +6525,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     })
                     createOrgTreeSelect()
                     const info = getLayerBindInfo('event', type)
-                    const { content: { data = [] } = {}, orgId } = info
-                    echoOrgTree(orgId)
+                    const { content: { data = [] } = {}, orgId: recordOrgId } = info
+                    orgId = recordOrgId
                     await getAllGatewayDeviceAndConnectionDevice()
                     if (!info || !data.length) {
                         addRecord()
@@ -6537,7 +6535,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     }
                     generatorEventListen()
                     form.render()
-                    echoOrgTree(orgId)
+                    echoOrgTree(recordOrgId)
                 },
             })
         }
@@ -6634,6 +6632,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 configurationId,
                 contentId: currentPageId.id,
                 id: graphId,
+                orgId: 'b4dd6e2b-6e0f-413c-bf5a-70133bd571e8',
                 content: {
                     type: formVal[enumConst.ACTION],
                     value: formVal[enumGetValue[formVal[enumConst.ACTION]]],
@@ -6886,6 +6885,24 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 })
         }
+
+        /**
+         * @description 下拉选项挂载
+         */
+        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',
+                    top: offset.top + height + 'px',
+                    left: offset.left + 'px'
+                })
+            })
+        }
+
         /**
          * @description 创建事件监听
          */
@@ -6893,6 +6910,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             createInputListener()
             createAddRowListenEvent()
             createDeleteRowListenEvent()
+            createSelectOptionMountEvent()
         }
         /**
@@ -6939,7 +6957,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 contentId: currentPageId.id,
                 ...formVal,
                 id: graphId,
-                orgId: 'b4dd6e2b-6e0f-413c-bf5a-70133bd571e8',
                 condition: tableData,
                 type: event.data.type,
             }
@@ -7005,6 +7022,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         echoDataSource,
                     } = generatorDataSourceComponent({ overrideClass: 'dynamic-effect__data-source-comp--override' })
                     $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
+                    form.render()
                     const info = getLayerBindInfo('act', type)
                     const { condition = [] } = info
                     if (info && condition.length) {
@@ -7136,6 +7154,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     data: treeList,
                     onlyIconControl: true,
                     click(node) {
+                        currentCheckedOrgNode = node.data.id
                         form.val(componentFilter, {
                             [enumDataSourceConst.DEVICE_ID]: null,
                             [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
@@ -11620,6 +11639,7 @@ class UseLayUi {
                 // focus
                 $(`.${SELECT_CLS}`).off('click')
                     .on("click", ".layui-select-title", function (e) {
+                        $(document).find('.layui-form-select').removeClass('layui-form-selected')
                         $(this).parents(`.${SELECT_CLS}`).toggleClass("layui-form-selected");
                         layui.stope(e);
                     })
@@ -12467,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) || []
     }
     /**
@@ -12533,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)
         }
@@ -12575,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
@@ -12588,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) {
@@ -12601,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
                     }
@@ -12661,21 +12672,24 @@ 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 {
@@ -12692,7 +12706,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
@@ -12701,6 +12715,9 @@ class HandleDataSource {
             if (!instance) clearInterval(interval)
             instance && instance.setOption({
+                title: {
+                    subtext: ''
+                },
                 xAxis: {
                     data: xAxisData
                 },
@@ -12711,17 +12728,21 @@ class HandleDataSource {
                 ],
                 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
+                        show: true,
+                        type: 'slider',
                     }
+                    // {
+                    //     startValue: seriesValue.length - 1 > showNumberOf
+                    //         ? oldStartValue === seriesValue.length - 1
+                    //             ? 0
+                    //             : oldStartValue + 1
+                    //         : 0,
+                    //     endValue: seriesValue.length - 1 > showNumberOf
+                    //         ? oldEndValue === seriesValue.length - 1
+                    //             ? showNumberOf
+                    //             : oldEndValue + 1
+                    //         : showNumberOf
+                    // }
                 ]
             })
         }
@@ -12730,7 +12751,7 @@ class HandleDataSource {
     /**
      * @description 更新历史数据
      */
-    updateHistoryDataSource(message) {
+    updateHistoryDataSource(message, agg) {
         const { data = {}, subscriptionId } = message
         const node = this.getNodeByCmdId(subscriptionId)
         if (!node) return
@@ -12741,10 +12762,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: {
@@ -12784,20 +12817,20 @@ class HandleDataSource {
             ],
             dataZoom: [
                 {
-                    xAxisIndex: 0,
-                    show: false,
+                    // xAxisIndex: 0,
+                    show: true,
                     type: 'slider',
-                    startValue: 0,
-                    endValue: 4
+                    // startValue: 0,
+                    // 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 清除定时器
@@ -12805,7 +12838,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
@@ -12829,9 +12862,9 @@ class HandleDataSource {
         }
         instance.setOption(chartOption)
-        instance.on('mouseover', stop)
-        instance.on('mouseout', goMove)
-        autoMove()
+        // instance.on('mouseover', stop)
+        // instance.on('mouseout', goMove)
+        // autoMove()
     }
     /**
@@ -13110,7 +13143,7 @@ class HandleDynamicEffect {
     /**
      * @description 动效节点映射
-     * @type {Map<string, Map<string, any>>}
+     * @type {Map<string, {display: boolean, value: Map<string, any>}>}
      */
     actNodeMapping = new Map()
@@ -13192,9 +13225,9 @@ class HandleDynamicEffect {
         this.enableActList.forEach(each => {
             const { id, type, attr, deviceId, slaveDeviceId } = each
-            if (!this.actNodeMapping.has(id)) this.actNodeMapping.set(id, new Map())
+            if (!this.actNodeMapping.has(id)) this.actNodeMapping.set(id, { display: true, value: new Map() })
             const temp = this.actNodeMapping.get(id)
-            temp.set(type, each)
+            temp.value.set(type, each)
             const cmdId = this.DispatchInstance.getCmdId(id)
@@ -13272,6 +13305,11 @@ class HandleDynamicEffect {
     rotate(message) {
         const { subscriptionId, data } = message
         const node = this.getNodeByCmdId(subscriptionId)
+        const key = node.id + DispatchCenter.enumDynamicEffectType.ROTATE
+        if (!this.validatePriority(node.id)) {
+            this.delUpdateFn(key)
+            return
+        }
         const { flag } = this.validate(subscriptionId, DispatchCenter.enumDynamicEffectType.ROTATE, data)
         let deg = 0
         const updateFn = () => {
@@ -13280,11 +13318,10 @@ class HandleDynamicEffect {
             let style = node.getStyle()
             const reg = /rotation=(-?)\w+(;?)/g
             style = style.replace(reg, '')
-            style += `rotation=${deg}`
+            style += `rotation=${deg};`
             node.setStyle(style)
             this.graph.updateCellStyles(style, node)
         }
-        const key = node.id + DispatchCenter.enumDynamicEffectType.ROTATE
         if (!flag) {
             this.delUpdateFn(key)
             return
@@ -13303,14 +13340,31 @@ class HandleDynamicEffect {
         if (!flag) return
         const node = this.getNodeByCmdId(subscriptionId)
         let isShow = false
-        if (node.visible && condition.type === HandleDynamicEffect.enumDisplayType.SHOW) {
-            return
-        } else if (condition.type === HandleDynamicEffect.enumDisplayType.SHOW) {
+        if (condition.type === HandleDynamicEffect.enumDisplayType.SHOW) {
             isShow = true
         } else if (condition.type === HandleDynamicEffect.enumDisplayType.HIDDEN) {
             isShow = false
         }
         const updateFn = () => {
+            // let style = node.getStyle()
+            // const reg = /opacity=(-?)\w+(;?)/g
+            // style = style.replace(reg, '')
+            // style += `opacity=${isShow ? 100 : 0};`
+            // console.log(style)
+            // node.setStyle(style)
+
+            if (!isShow) {
+                Object.keys(HandleDynamicEffect.enumActType).forEach(key => {
+                    const delKey = node.id + key
+                    this.delUpdateFn(delKey)
+                })
+                const temp = this.actNodeMapping.get(node.id)
+                temp.display = false
+            } else {
+                const temp = this.actNodeMapping.get(node.id)
+                temp.display = true
+            }
+
             node.setVisible(isShow)
         }
         this.insertOnceUpdateFn(node, updateFn)
@@ -13324,13 +13378,17 @@ class HandleDynamicEffect {
     flash(message) {
         const { subscriptionId, data } = message
         const node = this.getNodeByCmdId(subscriptionId)
+        const key = node.id + DispatchCenter.enumDynamicEffectType.FLASH
+        if (!this.validatePriority(node.id)) {
+            this.delUpdateFn(key)
+            return
+        }
         const { flag, condition } = this.validate(subscriptionId, HandleDynamicEffect.enumActType.FLASH, data)
         let flashFlag = false
         const updateFn = () => {
             node.setVisible(flashFlag)
             flashFlag = !flashFlag
         }
-        const key = node.id + DispatchCenter.enumDynamicEffectType.FLASH
         if (!flag) {
             flashFlag = true
             this.insertOnceUpdateFn(node, updateFn)
@@ -13399,7 +13457,7 @@ class HandleDynamicEffect {
     getBindData(subscriptionId, actionType) {
         const nodeId = this.getNodeIdByCmdId(subscriptionId)
         const temp = this.actNodeMapping.get(nodeId)
-        return temp.get(actionType)
+        return temp.value.get(actionType)
     }
     /**
@@ -13421,6 +13479,15 @@ class HandleDynamicEffect {
         return this.DispatchInstance.contentAllCell.find(item => item.id === nodeId)
     }
+    /**
+     * @description 验证优先级
+     * @param {string} nodeId 
+     * @returns 
+     */
+    validatePriority(nodeId) {
+        return this.actNodeMapping.get(nodeId).display
+    }
+
 }
 class UpdateQueue {