perf: change params setting flow

ww
1 parent 369824e2
Showing 3 changed files with 228 additions and 65 deletions
src/main/webapp/images/thingskit/question.svg
src/main/webapp/js/grapheditor/Format.js
src/main/webapp/js/grapheditor/test.html
--- a/src/main/webapp/images/thingskit/question.svg 0 → 100644
View file @460a7bc
+++ b/src/main/webapp/images/thingskit/question.svg 0 → 100644
View file @460a7bc
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659059076466" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2250" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64zM512 832.352c-26.496 0-48-21.504-48-48s21.504-48 48-48 48 21.504 48 48S538.496 832.352 512 832.352zM600.576 505.184C572.736 532.992 544 561.728 544 587.552l0 54.112c0 17.664-14.336 32-32 32s-32-14.336-32-32l0-54.112c0-52.352 40-92.352 75.328-127.648C581.216 434.016 608 407.264 608 385.92c0-53.344-43.072-96.736-96-96.736-53.824 0-96 41.536-96 94.56 0 17.664-14.336 32-32 32s-32-14.336-32-32c0-87.424 71.776-158.56 160-158.56s160 72.096 160 160.736C672 433.792 635.68 470.08 600.576 505.184z" p-id="2251" fill="#dbdbdb"></path></svg>
--- a/src/main/webapp/js/grapheditor/Format.js
View file @460a7bc
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @460a7bc
@@ -6425,7 +6425,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         }
         const sendInstructionWay = {
-            ONE_WAR: 'oneway',
+            ONE_WAY: 'oneway',
             TWO_WAY: 'twoway',
         }
@@ -6506,8 +6506,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 <td>
                     <form action="" style="display: flex">
                         <div class="override__radio-default">
-                            <input id="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAR}" type="radio" name="${enumConst.WAY}" lay-ignore value="${sendInstructionWay.ONE_WAR}" title="单向" checked="">
-                            <label for="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAR}" class="override__radio-label">单向</label>
+                            <input id="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAY}" type="radio" name="${enumConst.WAY}" lay-ignore value="${sendInstructionWay.ONE_WAY}" title="单向" checked="">
+                            <label for="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAY}" class="override__radio-label">单向</label>
                         </div>
                         <div class="override__radio-default">
                             <input id="${getRowFilter(addRowNumber)}${sendInstructionWay.TWO_WAY}"  type="radio" name="${enumConst.WAY}" lay-ignore value="${sendInstructionWay.TWO_WAY}" title="双向">
@@ -6797,6 +6797,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             ACTION: 'actionType',
             PAGE_VALUE: 'pageValue',
             LINK_VALUE: 'linkValue',
+
+            /**
+             * @description 下发指令
+             */
+            COMMAND: 'command',
+
+            /**
+             * @description 属性占位符
+             */
+            ATTR_PLACEHOLDER: 'attrPlaceholder',
+
+            WAY: 'way'
         }
         /**
@@ -6809,6 +6821,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             [enumActionType.LINK]: enumConst.LINK_VALUE,
         }
+        const enumWayType = {
+            ONE_WAY: 'oneway',
+            TWO_WAY: 'twoway'
+        }
+
         const enumActionEl = {
             /**
              * @description 表单 lay-filter
@@ -6834,6 +6851,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
              * @description layer submit filter
              */
             LAYER_SUBMIT_FILTER: 'dynamicLinkLayerFilter',
+
+            /**
+             * @description JSON 编辑器容器
+             */
+            EDITOR_CONTAINER: 'editorContainerEL',
+
+            /**
+             * @description JSON 编辑器
+             */
+            EDITOR: 'EDITOR',
+
+            WAY_SELECT: 'dynamicWaySelectEl'
         }
         /**
@@ -6851,15 +6880,33 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const val = {
                 [enumConst.ACTION]: content.type,
                 [enumGetValue[content.type]]: content.value,
+                [enumConst.WAY]: content[enumConst.WAY]
             }
-            if (content.type === enumActionType.PAGE) {
-                $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
+            controlFormDisplay(content.type)
+            form.val(enumActionEl.FORM_FILTER, val)
+        }
+
+        /**
+         * @description 控制form
+         * @param {enumActionType} value 
+         */
+        function controlFormDisplay(value) {
+            if (value === enumActionType.PAGE) {
                 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
-            } else if (content.type === enumActionType.PARAMS_SETTING) {
+                $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
+                $(`#${enumActionEl.EDITOR_CONTAINER}`).css({ display: 'none' })
+                $(`#${enumActionEl.WAY_SELECT}`).css({ display: 'none' })
+            } else if (value === enumActionType.LINK) {
                 $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
+                $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'block' })
+                $(`#${enumActionEl.EDITOR_CONTAINER}`).css({ display: 'none' })
+                $(`#${enumActionEl.WAY_SELECT}`).css({ display: 'none' })
+            } else if (value === enumActionType.PARAMS_SETTING) {
                 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
+                $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
+                $(`#${enumActionEl.EDITOR_CONTAINER}`).css({ display: 'flex' })
+                $(`#${enumActionEl.WAY_SELECT}`).css({ display: 'block' })
             }
-            form.val(enumActionEl.FORM_FILTER, val)
         }
         /**
@@ -6867,6 +6914,15 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         async function submit(callback) {
             const formVal = form.val(enumActionEl.FORM_FILTER)
+            const isParamsSetting = formVal[enumConst.ACTION] === enumActionType.PARAMS_SETTING
+            if (isParamsSetting) {
+                if (!isJson(formVal[enumConst.COMMAND])) {
+                    console.log()
+                    UseLayUi.topErrorMsg('命令配置存在错误')
+                    return
+                }
+            }
+
             const data = {
                 type: event.data.type,
                 configurationId,
@@ -6877,6 +6933,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 content: {
                     type: formVal[enumConst.ACTION],
                     value: formVal[enumGetValue[formVal[enumConst.ACTION]]],
+                    ...(isParamsSetting ? {
+                        [enumConst.COMMAND]: formVal[enumConst.COMMAND],
+                        [enumConst.WAY]: formVal[enumConst.WAY]
+                    } : {}),
                 },
             }
             await to(autoSaveGraphInfo())
@@ -6912,16 +6972,53 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function generatorEventListen() {
             form.on(`select(${enumActionEl.ACTION_SELECT_FILTER})`, (data) => {
                 const { value } = data
-                if (value === enumActionType.PAGE) {
-                    $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
-                    $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
-                } else if (value === enumActionType.LINK) {
-                    $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
-                    $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'block' })
-                } else if (value === enumActionType.PARAMS_SETTING) {
-                    $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
-                    $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
+                controlFormDisplay(value)
+            })
+        }
+
+        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
+        }
+
+        function jsonParse(value) {
+            try {
+                return JSON.parse(value)
+            } catch (error) {
+                return {}
+            }
+        }
+
+
+        /**
+         * @description 创建JSON编辑器
+         * @param el
+         * @param datum
+         */
+        function createEditor(record) {
+            let defaultValue = { [enumConst.ATTR_PLACEHOLDER]: 0 }
+            const editor = ace.edit(enumActionEl.EDITOR, {
+                maxLines: 18, // 最大行数，超过会自动出现滚动条
+                minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+                fontSize: 14, // 编辑器内字体大小
+                tabSize: 2, // 制表符设置为 4 个空格大小
+            });
+            if (record.content && record.content[enumConst.COMMAND]) defaultValue = jsonParse(record.content[enumConst.COMMAND])
+            const stringValue = JSON.stringify(defaultValue, null, 2)
+            editor.insert(stringValue)
+            $(`#${enumActionEl.EDITOR_CONTAINER}`).parent().find(`textarea[name="${enumConst.COMMAND}"]`).val(stringValue)
+            editor.session.setMode("ace/mode/json");
+            editor.getSession().on('change', (event, editor) => {
+                $(`#${enumActionEl.EDITOR_CONTAINER}`).parent().find(`textarea[name="${enumConst.COMMAND}"]`).val(editor.getValue())
             })
         }
@@ -6932,7 +7029,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const content = `
             <form class="layui-form" lay-filter="${enumActionEl.FORM_FILTER}">
-                <div style="width:400px">
+                <div style="width: 450px">
                     <div class="layui-form-item">
                         <label class="layui-form-label">事件</label>
                         <div class="layui-input-block">
@@ -6961,6 +7058,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                             </select>
                         </div>
                     </div>
+                    <div class="layui-form-item" id="${enumActionEl.WAY_SELECT}" style="display:none">
+                        <label class="layui-form-label">单向/双向</label>
+                        <div class="layui-input-block">
+                            <input type="radio" name="${enumConst.WAY}" value="${enumWayType.ONE_WAY}" title="单向" checked="">
+                            <input type="radio" name="${enumConst.WAY}" value="${enumWayType.TWO_WAY}" title="双向">
+                        </div>
+                    </div>
+                    <div id="${enumActionEl.EDITOR_CONTAINER}" style="display: none;">
+                        <div style="width: 80px; text-align: right; padding: 9px 15px;flex: 0 0 80px;">命令</div>
+                        <div id="${enumActionEl.EDITOR}" style="width: 100%; height: 100%;border: 2px solid #eee;"></div>
+                        <textarea name="${enumConst.COMMAND}" style="display: none;" />
+                    </div>
                 </div>
             </form>
             `
@@ -6989,6 +7098,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     generatorEventListen()
                     const info = getLayerBindInfo('event', type)
                     Object.assign(recordData, { enabled: info.enabled })
+                    createEditor(info)
                     form.render(null, enumActionEl.FORM_FILTER)
                     if (info) echoFormData(info)
                 },
@@ -8163,6 +8273,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         return { getValue, setValue }
     }
+    function createHelpMessage() {
+        return `<span class="thingskit-help-message"><img src="${Proxy_Prefix}/images/thingskit/question.svg" /></span>`
+    }
+
     //  异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
     setTimeout(() => {
@@ -13672,6 +13786,13 @@ class HandleDataInteraction {
     }
     /**
+     * @description 获取页面数据
+     */
+    get contentData() {
+        return DispatchCenter.instance.contentData
+    }
+
+    /**
      * @description 事件映射
      */
     generatorEventMapping() {
@@ -13772,7 +13893,7 @@ class HandleDataInteraction {
             } else if (type === DispatchCenter.enumPageType.LINK && value) {
                 window.open(value)
             } else if (type === DispatchCenter.enumPageType.PARAMS_SETTING) {
-                this.paramsSetting(id)
+                this.paramsSetting(id, content)
             }
         }
     }
@@ -13865,13 +13986,15 @@ class HandleDataInteraction {
     /**
      * @description 参数设置
      */
-    paramsSetting(nodeId) {
+    paramsSetting(nodeId, content) {
         const { layer, jquery: $, form } = layui
+        const contentData = this.contentData
         const enumConst = {
             VALUE: 'value',
             ISSUED_WAY: 'way',
-            ONE_WAR: 'oneway',
-            TWO_WAY: 'twoway'
+            ONE_WAY: 'oneway',
+            TWO_WAY: 'twoway',
+            ATTR_PLACEHOLDER: 'attrPlaceholder'
         }
         const enumActionEl = {
@@ -13881,40 +14004,17 @@ class HandleDataInteraction {
         }
-        /**
-         * @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>
+                        <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="双向">
+                            <input type="text" name="${enumConst.VALUE}" lay-verify="required" autocomplete="off" placeholder="请输入下发值" class="layui-input">
                         </div>
                     </div>
                 </div>
-                <div id="${enumActionEl.CONTAINER}">
-                    <div id="${enumActionEl.EDITOR}"></div>
-                    <textarea name="${enumConst.VALUE}" style="display: none;" />
-                </div>
             </div>`
         }
@@ -13931,25 +14031,45 @@ class HandleDataInteraction {
             }
             return false
         }
-        const submitThrottle = this.throttle(submit)
-        async function submit(callback) {
-            const value = $(`#${enumActionEl.CONTAINER}`).parent().find(`textarea[name="${enumConst.VALUE}"]`).val() || ''
-            if (!isJson(value)) {
-                UseLayUi.topErrorMsg('下发值不正确')
-                return
+
+        function jsonParse(value) {
+            try {
+                return JSON.parse(value)
+            } catch (error) {
+                return {}
+            }
+        }
+
+        function replaceAttrPlaceholder(oldValue = {}, replaceAttr = '', replaceValue = '', newValue = {},) {
+            if (typeof oldValue !== 'object') return newValue
+
+            for (const key of Object.keys(oldValue)) {
+                if (key === enumConst.ATTR_PLACEHOLDER) {
+                    newValue[replaceAttr] = replaceValue
+                    continue
+                }
+                if (typeof oldValue[key] === 'object') {
+                    newValue[key] = replaceAttrPlaceholder(oldValue[key], replaceAttr, replaceValue)
+                }
+                newValue[key] = oldValue[key]
             }
-            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
+            return newValue
+        }
+
+        const submitThrottle = this.throttle(submit)
+        async function submit(callback) {
+            const { value } = form.val(enumActionEl.ISSUED_WAY_FILTER)
+            let { deviceId, attr } = contentData.dataSources.find(item => item.nodeId === nodeId) || {}
+            let { command, way } = content
+            const validate = [value, deviceId, way, command, attr]
+            if (!validate.every(Boolean)) return
+            if (typeof command === 'string') command = jsonParse(command)
+            const data = replaceAttrPlaceholder(command, attr, value)
             const instructionData = {
                 method: "methodThingskit",
                 params: data,
             }
-            // if (slaveDeviceId) {
-            //     deviceId = slaveDeviceId
-            // }
             const [err, res = []] = await to(ConfigurationNodeApi.deviceIsOnLine(deviceId))
             const { value: onlineFlag } = res[0] || {}
@@ -13969,7 +14089,7 @@ class HandleDataInteraction {
             layer.open({
                 title: '参数设置',
                 content: createContent(),
-                area: '600px',
+                area: '400px',
                 btn: ["应用", "取消"],
                 yes(index) {
                     submitThrottle(() => {
@@ -13980,12 +14100,7 @@ class HandleDataInteraction {
                 },
                 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,
-                    // })
                 },
             })
         }
--- a/src/main/webapp/js/grapheditor/test.html 0 → 100644
View file @460a7bc
+++ b/src/main/webapp/js/grapheditor/test.html 0 → 100644
View file @460a7bc
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <script>
+
+    function replaceAttrPlaceholder(oldValue = {}, replaceAttr = '', replaceValue = '', newValue = {},) {
+      if (typeof oldValue !== 'object') return newValue
+
+      for (const key of Object.keys(oldValue)) {
+        if (key === 'attrPlaceholder') {
+          newValue[replaceAttr] = replaceValue
+          continue
+        }
+        if (typeof oldValue[key] === 'object') {
+          newValue[key] = replaceAttrPlaceholder(oldValue[key], replaceAttr, replaceValue)
+        }
+      }
+
+      return newValue
+    }
+
+    const value = {
+      attrPlaceholder: {
+        a: 123
+      },
+      name: {
+        attrPlaceholder: 123,
+        b: {
+          attrPlaceholder: 123
+        }
+      }
+    }
+
+    console.log(replaceAttrPlaceholder(value, 'co', 2))
+  </script>
+</body>
+
+</html>