feat: basic switch component preview issues instruction event

ww
1 parent 1e7a7fa9
Showing 2 changed files with 184 additions and 7 deletions
src/main/webapp/images/thingskit/not-standard-value.svg
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/images/thingskit/not-standard-value.svg 0 → 100644
View file @01e2632
+++ b/src/main/webapp/images/thingskit/not-standard-value.svg 0 → 100644
View file @01e2632
+<svg width="120" height="35" xmlns="http://www.w3.org/2000/svg">
+ <g id="Layer_1">
+  <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_1" y="30" x="0" stroke-width="0" stroke="#000" fill="#000000">非标准数值</text>
+ </g>
+</svg>
--- a/src/main/webapp/js/grapheditor/Format.js
View file @01e2632
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @01e2632
@@ -6869,12 +6869,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         /**
          * @description 动作类型
          */
-        const enumActionType = {
-            PAGE: 'PAGE',
-            LINK: 'LINK',
-            PROPS: 'PROPS',
-            PARAMS_SETTING: 'PARAMS_SETTING'
-        }
+        const enumActionType = DispatchCenter.enumPageType
         const enumGetValue = {
             [enumActionType.PAGE]: enumConst.PAGE_VALUE,
@@ -6955,6 +6950,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const [err, res] = await to(ConfigurationNodeApi.updateNodeEvent(data))
             if (err) return
             isControlComponent && overrideCurrentData('event', 'type', res)
+            isControlComponent && echoActionType()
             UseLayUi.successMsg()
             callback()
         }
@@ -12919,7 +12915,8 @@ class DispatchCenter {
     static enumPageType = {
         PAGE: 'PAGE',
         LINK: 'LINK',
-
+        PROPS: 'PROPS',
+        PARAMS_SETTING: 'PARAMS_SETTING'
     }
@@ -13190,6 +13187,14 @@ class HandleDataSource {
         return this.DispatchInstance.cmdIdMapping
     }
+    get basicAttr() {
+        return Sidebar.prototype.enumCellBasicAttribute
+    }
+
+    get componentType() {
+        return Sidebar.prototype.enumComponentType
+    }
+
     /**
      * @description 生成普通数据源绑定映射关系
      * @param dataSources
@@ -13279,6 +13284,11 @@ class HandleDataSource {
         const { attr } = this.getBindData(subscriptionId)
         node && this.updatePage(() => {
             const { data } = message
+            const type = this.getComponentType(node)
+            if (type === this.componentType.SWITCH) {
+                this.handleSwitchComponent(message)
+                return
+            }
             if (!data) return
             const [[timespan, value]] = data[attr]
             node.setValue(value)
@@ -13286,6 +13296,34 @@ class HandleDataSource {
     }
     /**
+     * @description 处理switch 组件
+     * @param {} message 
+     */
+    handleSwitchComponent(message) {
+        const { subscriptionId, data = {} } = message
+        const node = this.getNodeByCmdId(subscriptionId)
+        const { nodeId, attr } = this.getBindData(subscriptionId)
+        const [[timespan, receiveValue] = []] = data[attr] || []
+        const switchConfig = this.DispatchInstance.contentData.act.find(item => item.id === nodeId && item.type === 'SWITCH')
+        const { condition = [] } = switchConfig || {}
+        let reg = /image=images[^;]+/g
+        let flag = false
+        for (const item of condition) {
+            const { value, imagePath } = item || {}
+            if (Number(receiveValue) === Number(value)) {
+                flag = true
+                const style = node.getStyle()
+                node.setStyle(style.replace(reg, `image=${imagePath}`))
+                break
+            }
+        }
+        if (!flag) {
+            const style = node.getStyle()
+            node.setStyle(style.replace(reg, `image=images/thingskit/not-standard-value.svg`))
+        }
+    }
+
+    /**
      * @description 更新实时数据
      * @param {} message 
      * @param {} agg  聚合方式
@@ -13599,6 +13637,10 @@ class HandleDataSource {
         return this.DispatchInstance.contentAllCell.find(item => item.id === nodeId)
     }
+    getComponentType(node) {
+        return node.getAttribute(this.basicAttr.COMPONENT_TYPE)
+    }
+
     /**
      * @description 发送socket 消息
      * @param {any} msg 
@@ -13766,6 +13808,8 @@ class HandleDataInteraction {
                 this.jumpPage(value)
             } else if (type === DispatchCenter.enumPageType.LINK && value) {
                 window.open(value)
+            } else if (type === DispatchCenter.enumPageType.PARAMS_SETTING) {
+                this.paramsSetting(id)
             }
         }
     }
@@ -13849,6 +13893,134 @@ class HandleDataInteraction {
             throw error
         }
     }
+
+    /**
+     * @description 参数设置
+     */
+    paramsSetting(nodeId) {
+        const { layer, jquery: $, form } = layui
+        const enumConst = {
+            VALUE: 'value',
+            ISSUED_WAY: 'way',
+            ONE_WAR: 'oneway',
+            TWO_WAY: 'twoway'
+        }
+
+        const enumActionEl = {
+            CONTAINER: 'container',
+            EDITOR: 'editor',
+            ISSUED_WAY_FILTER: 'wayFilter'
+
+        }
+
+        /**
+         * @description 创建JSON编辑器
+         * @param el
+         * @param datum
+         */
+        function createEditor() {
+            const editor = ace.edit(enumActionEl.EDITOR, {
+                maxLines: 18, // 最大行数，超过会自动出现滚动条
+                minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+                fontSize: 14, // 编辑器内字体大小
+                tabSize: 2, // 制表符设置为 4 个空格大小
+            });
+            editor.session.setMode("ace/mode/json");
+            editor.getSession().on('change', (event, editor) => {
+                $(`#${enumActionEl.CONTAINER}`).parent().find(`textarea[name="${enumConst.VALUE}"]`).val(editor.getValue())
+            })
+        }
+
+        function createContent() {
+            return `
+            <div>
+                <div class="layui-form" lay-filter="${enumActionEl.ISSUED_WAY_FILTER}">
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">单向/双向</label>
+                        <div class="layui-input-block">
+                            <input type="radio" name="${enumConst.ISSUED_WAY}" value="${enumConst.ONE_WAR}" title="单向" checked="">
+                            <input type="radio" name="${enumConst.ISSUED_WAY}" value="${enumConst.TWO_WAY}" title="双向">
+                        </div>
+                    </div>
+                </div>
+                <div id="${enumActionEl.CONTAINER}">
+                    <div id="${enumActionEl.EDITOR}"></div>
+                    <textarea name="${enumConst.VALUE}" style="display: none;" />
+                </div>
+            </div>`
+        }
+
+        function isJson(string) {
+            if (typeof string === 'string') {
+                try {
+                    const obj = JSON.parse(string)
+                    if (typeof obj === 'object' && obj !== null) {
+                        return true
+                    }
+                } catch (e) {
+                    return false
+                }
+            }
+            return false
+        }
+        const submitThrottle = this.throttle(submit)
+        async function submit() {
+            const value = $(`#${enumActionEl.CONTAINER}`).parent().find(`textarea[name="${enumConst.VALUE}"]`).val() || ''
+            if (!isJson(value)) {
+                UseLayUi.topErrorMsg('下发值不正确')
+                return
+            }
+            const { way } = form.val(enumActionEl.ISSUED_WAY_FILTER)
+            const data = JSON.parse(value)
+            let { deviceId, slaveDeviceId } = DispatchCenter.instance.contentData.dataSources.find(item => item.nodeId === nodeId) || {}
+
+            if (!value || !deviceId) return
+            const instructionData = {
+                method: "methodThingskit",
+                params: data,
+            }
+            if (slaveDeviceId) {
+                deviceId = slaveDeviceId
+            }
+
+            const [err, res = []] = await to(ConfigurationNodeApi.deviceIsOnLine(deviceId))
+            const { value: onlineFlag } = res[0] || {}
+            if (onlineFlag) {
+                const [err, res] = await to(ConfigurationNodeApi.sendInstruction(way, deviceId, instructionData))
+                if (!err) {
+                    UseLayUi.topSuccessMsg('操作成功')
+                }
+            } else {
+                UseLayUi.topErrorMsg('设备不在线!')
+            }
+        }
+
+        function createLayer() {
+
+            layer.open({
+                title: '参数设置',
+                content: createContent(),
+                area: '600px',
+                btn: ["应用", "取消"],
+                yes(index) {
+                    submitThrottle()
+                },
+                but2(index, layero) {
+
+                },
+                async success(layero, index) {
+                    createEditor(enumActionEl.EDITOR)
+                    form.render()
+                    // $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
+                    //     'lay-submit': '',
+                    //     'lay-filter': enumActionEl.IMAGE_LAYER_FILTER,
+                    // })
+                },
+            })
+        }
+
+        createLayer()
+    }
 }
 /**