feat: complete right data source console

ww
1 parent df4c41a0
Showing 2 changed files with 494 additions and 179 deletions
src/main/webapp/js/api/index.js
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/api/index.js
View file @ad950e6
+++ b/src/main/webapp/js/api/index.js
View file @ad950e6
@@ -87,4 +87,7 @@ class ConfigurationNodeApi {
     static updateNodeInfo(data) {
         return defHttp.post('/yt/configuration/node', data)
     }
+
+
+  
 }
--- a/src/main/webapp/js/grapheditor/Format.js
View file @ad950e6
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @ad950e6
@@ -4878,12 +4878,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     const editor = ui.editor;
     const graph = editor.graph;
     const ss = ui.getSelectionState();
+    const vertices = ss.vertices || []
-    console.log(ss.vertices)
+    console.log(vertices)
     /**
      * @description 不是单一节点则不进入数据绑定
      */
-    if (!isSingleNode(ss.vertices)) return
+    if (!isSingleNode(vertices)) return
     // 组态id
     const configurationId = getRequest().configurationId;
@@ -4891,7 +4892,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     const currentPageId = ui.currentPage.node;
     // 图形的id
-    const graphId = ss.vertices[0].id;
+    const graphId = vertices[0].id;
     // 解构全局属性layui要用到的模块
     const { layer, form, jquery: $ } = layui;
@@ -4914,7 +4915,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
      * @description 选中节点信息来源
      * @param {string} nodeInfo.id - 节点ID
      */
-    const nodeInfo = getNodeInfo(ss.vertices)
+    const nodeInfo = getNodeInfo(vertices)
     /**
@@ -5008,15 +5009,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         },
     ];
-    const enumDataSourceConst = (() => {
-        return {
-            ORG_ID: 'orgId',
-            DEVICE_ID: 'deviceId',
-            SLAVE_DEVICE_ID: 'slaveDeviceId',
-            ATTR: 'attr',
-            GATEWAY: 'GATEWAY'
-        }
-    })()
+    const enumDataSourceConst = {
+        ORG_ID: 'orgId',
+        DEVICE_ID: 'deviceId',
+        SLAVE_DEVICE_ID: 'slaveDeviceId',
+        ATTR: 'attr',
+        GATEWAY: 'GATEWAY'
+    }
+
+    let echoRefreshFn = null
+
     // 获取url的请求参数函数
@@ -5067,12 +5069,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     /**
      * @description 获取节点绑定信息
      */
-    function getNodeBindInfo() {
+    async function getNodeBindInfo() {
         const { id } = nodeInfo
-        return ConfigurationNodeApi.getConfigurationInfo('NODE', id)
+        const [err, res] = await to(ConfigurationNodeApi.getConfigurationInfo('NODE', id))
+        currentNodeData = res
+        if (echoRefreshFn && typeof echoRefreshFn === 'function') echoRefreshFn()
     }
+
+
     /**
      * @description 生成数据交互面板
      * @returns {Array}
@@ -5157,8 +5163,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 treeProps: {
                     data: treeList,
                     onlyIconControl: true,
-                    onReady(setValue) {
-                    },
                     click(node) {
                         currentCheckedOrgNode = node.data.id
                         getDevicesByOrgId(node.data.id)
@@ -5262,37 +5266,44 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 数据回显
          */
         async function echoData() {
-            const [err, res] = await to(getNodeBindInfo())
-            if (err || !Object.keys(res).length) return
-            currentNodeData = res
-            echoDataSource()
-            echoActionType()
+            echoRefreshFn = () => {
+                echoDataSource()
+                echoActionType()
+                form.render(null, CONTAINER_FILTER)
+            }
+
+            await getNodeBindInfo()
+
+
             function echoDataSource() {
                 const { dataSources = [] } = currentNodeData
-                const [ dataSource = {} ] = dataSources
-                const { orgId, deviceId, slaveDeviceId, attr: [bindAttr] = [] } = dataSource
+                const [dataSource = {}] = dataSources
+                const { orgId, deviceId, slaveDeviceId, attr } = dataSource
                 const queue = []
                 if (orgId) {
                     currentCheckedOrgNode = orgId
                     queue.push(() => getDevicesByOrgId(orgId))
                 }
                 if (slaveDeviceId) {
-                    queue.push(() => getSlaveDeviceByMasterDeviceId(orgId, deviceId))
+                    queue.push(() => {
+                        getSlaveDeviceByMasterDeviceId(orgId, deviceId)
+                        $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
+                    })
                     queue.push(() => getAttrByDeviceId(slaveDeviceId))
                 } else {
                     queue.push(() => getAttrByDeviceId(deviceId))
                 }
                 Promise.all(queue.map(item => item()))
                     .finally(() => {
-                        const orgNode = UseLayUi.findTreeObjectByField(treeList, orgId)
-                        $(`#${enumActionEl.ORG_EL} input`).parent().find('span').html(orgNode.name)
+                        const orgNode = UseLayUi.findTreeObjectByField(treeList, currentCheckedOrgNode)
+                        $(`#${enumActionEl.ORG_EL} input[name="${enumDataSourceConst.ORG_ID}"]`).parent().find('span').html(orgNode?.name)
                         form.val(CONTAINER_FILTER, {
                             orgId,
                             deviceId,
                             slaveDeviceId,
-                            attr: bindAttr
+                            attr
                         })
                     })
             }
@@ -5301,11 +5312,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 const all = [...(currentNodeData.act ?? []), ...(currentNodeData.event ?? [])]
                 const actionType = {}
                 for (const item of all) {
-                    if (!item.enabled) {
-                        actionType[item.type] = 'on'
-                    }
+                    actionType[item.type] = item.enabled
                 }
-                console.log(actionType)
                 form.val(CONTAINER_FILTER, actionType)
             }
         }
@@ -5321,8 +5329,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             $(container).append(fragment)
-            UseLayUi.nextTick(() => form.render(null, CONTAINER_FILTER))
-
         }
         mount()
@@ -5370,37 +5376,38 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const panel = createPanel()
         $(panel).addClass('data-source__submit-panel').append(`<button type="button" lay-submit lay-filter="formDataSource" class="layui-btn">保存</button>`)
         $(container).append(panel)
-        form.on('submit(formDataSource)', function (data) {
+        form.on('submit(formDataSource)', async function (data) {
             const ENABLED_FLAG = 'on'
             const { field } = data
-            const value = { [enumCategory.ACT]: [], [enumCategory.EVENT]: [], [enumCategory.DATA_SOURCE]: [] }
+            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],
+                    ...(field[enumDataSourceConst.SLAVE_DEVICE_ID] && { [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] }),
+                    [enumDataSourceConst.ATTR]: field[enumDataSourceConst.ATTR],
+                }
+            }
             const allType = [...interactionList, ...dynamicEffectList]
             for (const item of allType) {
                 if (field[item.type] === ENABLED_FLAG) {
                     const enableItem = currentNodeData[item.category].find(each => each.type === item.type)
                     if (!enableItem) continue
                     value[item.category].push({
-                        configurationId,
-                        contentId: currentPageId.id,
-                        id: graphId,
                         type: item.type,
                         enabled: true
                     })
                 }
             }
-            value[enumCategory.DATA_SOURCE].push({
-                [enumDataSourceConst.ORG_ID]: field[enumDataSourceConst.ORG_ID],
-                [enumDataSourceConst.DEVICE_ID]: field[enumDataSourceConst.DEVICE_ID],
-                [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID],
-                [enumDataSourceConst.ATTR]: [field[enumDataSourceConst.ATTR]],
-            })
-            ConfigurationNodeApi.updateNodeInfo(value)
-                .then(res => {
-                    console.log(res)
-                }).catch(err => {
-                    console.log(err)
-                })
+            const [err, res] = await to(ConfigurationNodeApi.updateNodeInfo(value))
+            if (err) return
+            UseLayUi.successMsg()
+            await getNodeBindInfo()
             return false;
         });
     }
@@ -5415,18 +5422,41 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             return
         }
         // 事件类型
-        const eventType = {
+        const enumenumEventType = {
             DOWN: "按下",
             UP: "抬起",
             SINGLE: "单击",
             DOUBLE: "双击",
         };
-        /**
-         * @description 表格表体
-         * @type {string}
-         */
-        const deviceDataTbody = 'deviceDataTbody'
+        const enumActionEl = {
+            /**
+             * @description 表体节点
+             */
+            DEVICE_DATA_BODY_EL: 'deviceDataTbody',
+
+            /**
+             * @description 删除行节点
+             */
+            DEL_ROW_EL: 'deleteRow',
+
+            /**
+             * @description 增加行节点
+             */
+            ADD_ROW_EL: 'addRow',
+
+            /**
+             * @descripton
+             */
+            ROW_FILTER: 'interactionRowFilter',
+
+            /**
+             * @description 弹出层保存 filter
+             */
+            LAYER_SUBMIT_FILTER: 'interactionLayerSubmit'
+        }
+
+
         /**
          * @description 所有设备选项
@@ -5436,25 +5466,25 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         let addRowNumber = 0
-        const rowFormList = []
+        const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
         /**
          * @description 枚举常量
-         * @enum DEVICE -
+         * @enum DEVICE
          */
         const enumConst = {
             /**
              * @description 设备
              */
-            DEVICE: 'device',
+            DEVICE: 'deviceId',
             /**
              * @description 子设备
              */
-            CHILD_DEVICE: 'childDevice',
+            SLAVE_DEVICE: 'slaveDeviceId',
             /**
              * @description 变量
              */
-            VARIABLE: 'variable',
+            ATTR: 'attr',
             /**
              * @description 下发值
              */
@@ -5464,39 +5494,36 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         /**
          * @description 创建回显数据 查询出所有网关设备和直连设备
          */
-        function getAllDevice() {
+        async function getMaterDevice() {
             if (!currentCheckedOrgNode) return
-            ConfigurationNodeApi.getMasterDevice(currentCheckedOrgNode)
-                .then(res => {
-                    allDeviceOptions = res
-                    setDeviceOptions()
-                })
+            const [err, res] = await to(ConfigurationNodeApi.getMasterDevice(currentCheckedOrgNode))
+            allDeviceOptions = res
         }
         function addRecord() {
-            addRowNumber++
-            rowFormList.push(addRowNumber)
             const content = `
-              <tr class="layui-form" lay-filter="deviceDataRow${addRowNumber}">
+              <tr class="layui-form" lay-filter="${enumActionEl.ROW_FILTER}${addRowNumber}">
                 <td>
-                  <select name="${enumConst.DEVICE}" lay-filter="device" lay-verify="required"></select>
+                  <select name="${enumConst.DEVICE}" lay-filter="${enumConst.DEVICE}" lay-verType="tips" lay-verify="required"></select>
                 </td>
                 <td>
-                  <select name="${enumConst.CHILD_DEVICE}" lay-filter="childDevice" lay-verify="required" ></select>
+                  <select name="${enumConst.SLAVE_DEVICE}" lay-filter="${enumConst.SLAVE_DEVICE}" lay-verType="tips"></select>
                 </td>
                 <td>
-                  <select name="${enumConst.VARIABLE}" lay-verify="required"></select>
+                  <select name="${enumConst.ATTR}" lay-verType="tips" lay-verify="required"></select>
                 </td>
                 <td>
-                  <textarea name="${enumConst.VALUE}" placeholder="请输入命令" class="layui-textarea" ></textarea>
+                  <textarea name="${enumConst.VALUE}" placeholder="请输入命令" lay-verType="tips" class="layui-textarea" ></textarea>
                 </td>
                 <td>
-                  <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteRow">删除</button>
+                  <button type="button" class="layui-btn layui-btn-primary layui-border-red ${enumActionEl.DEL_ROW_EL}">删除</button>
                 </td>
               </tr>
             `
-            $('#deviceDataTbody').append(content)
-            form.render(null, `deviceDataRow${addRowNumber}`)
+            $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).append(content)
+            setDeviceOptions(addRowNumber)
+            form.render('select', getRowFilter(addRowNumber))
+            addRowNumber++
         }
         /**
@@ -5507,8 +5534,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const [err, res] = await to(ConfigurationNodeApi.getDeviceAttr(data.value))
             if (!res) return
             const generateOption = UseLayUi.generateOptionTemplate({ dataSource: res })
-            $(data.elem).parents('tr').find(`select[name="${enumConst.VARIABLE}"]`).html(generateOption)
-            UseLayUi.nextTick(() => form.render())
+            $(data.elem).parents('tr').find(`select[name="${enumConst.ATTR}"]`).html(generateOption)
+            form.render('select')
         }
         /**
@@ -5521,14 +5548,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 if (isGATEWAY && data.value) {
                     const [err, res] = await to(ConfigurationNodeApi.getSlaveDevice(currentCheckedOrgNode, data.value))
                     if (!res) return
-                    const generateOption = UseLayUi.generateOptionTemplate({ dataSource: res.items })
-                    $(data.elem).parents('tr').find(`select[name="${enumConst.CHILD_DEVICE}"]`).html(generateOption)
+                    const generateOption = UseLayUi.generateOptionTemplate({ dataSource: res })
+                    $(data.elem).parents('tr').find(`select[name="${enumConst.SLAVE_DEVICE}"]`).html(generateOption)
                 } else {
                     updateVariableOptions(data)
                 }
-                UseLayUi.nextTick(() => form.render())
+                form.render('select')
             })
-            form.on(`select(${enumConst.CHILD_DEVICE})`, (data) => {
+            form.on(`select(${enumConst.SLAVE_DEVICE})`, (data) => {
                 updateVariableOptions(data)
             })
         }
@@ -5537,7 +5564,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 删除行
          */
         function createDeleteRowListenEvent() {
-            $('.deleteRow').click((event) => {
+            $(`.${enumActionEl.DEL_ROW_EL}`).click((event) => {
                 $(event.target).parents('tr').remove()
             })
         }
@@ -5546,21 +5573,21 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 新增行
          */
         function createAddRowListenEvent() {
-            $('#addRow').click(() => {
+            $(`#${enumActionEl.ADD_ROW_EL}`).click(() => {
                 addRecord()
                 const generateOption = UseLayUi.generateOptionTemplate({ dataSource: allDeviceOptions })
-                $(`#${deviceDataTbody} tr`).last().find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
+                $(`#${enumActionEl.DEVICE_DATA_BODY_EL} tr`).last().find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
                 createDeleteRowListenEvent()
-                form.render()
+                form.render('select')
             })
         }
         /**
          * @description 设置设备选项
          */
-        function setDeviceOptions() {
+        function setDeviceOptions(row) {
             const generateOption = UseLayUi.generateOptionTemplate({ dataSource: allDeviceOptions })
-            $(`#${deviceDataTbody}`).find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
+            $(`#${enumActionEl.DEVICE_DATA_BODY_EL} tr[lay-filter="${getRowFilter(row)}"]`).find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
         }
         /**
@@ -5580,52 +5607,23 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function mountSelectOptions(row, key, data) {
             const generateOption = UseLayUi.generateOptionTemplate({ dataSource: data })
-            $(`#${deviceDataTbody}`).find(`tr[lay-filter="deviceDataRow${row}"] select[name="${key}"]`).html(generateOption)
+            $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).find(`tr[lay-filter="${getRowFilter(row)}"] select[name="${key}"]`).html(generateOption)
         }
         /**
-         * @description 设置select val
-         * @param row
-         * @param key
-         * @param val
+         * @description 根据主设备ID获取从设备
          */
-        function setSelectVal(row, key, val) {
-            $(`#${deviceDataTbody}`).find(`tr[lay-filter="deviceDataRow${row}"] select[name="${key}"]`).val(val)
+        async function getSlaveDeviceByMasterDevice(deviceId, row) {
+            const res = await ConfigurationNodeApi.getSlaveDevice(currentCheckedOrgNode, deviceId)
+            mountSelectOptions(row, enumConst.SLAVE_DEVICE, res)
         }
         /**
-         * @description 处理每条回显数据
-         * @param datum
-         * @returns {Promise<void>}
+         * @description 根据设备ID获取设备属性
          */
-        async function handleEachDataEcho(datum) {
-
-            addRecord()
-            setDeviceOptions()
-            const currentRow = addRowNumber
-
-            const childDeviceId = datum[enumConst.CHILD_DEVICE]
-            const deviceId = datum[enumConst.DEVICE]
-            const variable = datum[enumConst.VARIABLE]
-            let findId = deviceId
-
-            /**
-             * @description 存在子设备请求子设备列表
-             */
-            if (childDeviceId && deviceId) {
-                findId = childDeviceId
-                ConfigurationNodeApi.getSlaveDevice(currentCheckedOrgNode, deviceId)
-                    .then(res => {
-                        mountSelectOptions(currentRow, enumConst.CHILD_DEVICE, res.items)
-                        setSelectVal(currentRow, enumConst.CHILD_DEVICE, childDeviceId)
-                        form.val(`deviceDataRow${currentRow}`, datum)
-                    })
-            }
-            deviceId && ConfigurationNodeApi.getDeviceAttr(findId).then(res => {
-                mountSelectOptions(currentRow, enumConst.VARIABLE, res)
-                setSelectVal(currentRow, enumConst.CHILD_DEVICE, variable)
-                form.val(`deviceDataRow${currentRow}`, datum)
-            })
+        async function getDeviceAttrByDeviceId(deviceId, row) {
+            const res = await ConfigurationNodeApi.getDeviceAttr(deviceId)
+            mountSelectOptions(row, enumConst.ATTR, res)
         }
         /**
@@ -5633,16 +5631,37 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function echoFormData(info) {
             const { content: { data = [] } = {} } = info
-            for (const datum of data) {
-                handleEachDataEcho(datum)
+            data.forEach((datum, index) => echoEachData(datum, index))
+        }
+
+        /**
+         * @description 回显每条数据
+         */
+        function echoEachData(datum = {}, row) {
+            addRecord()
+            const deviceId = datum[enumConst.DEVICE]
+            const slaveDeviceId = datum[enumConst.SLAVE_DEVICE]
+            const queue = []
+
+            if (slaveDeviceId) {
+                queue.push(() => getSlaveDeviceByMasterDevice(deviceId, row))
+                queue.push(() => getDeviceAttrByDeviceId(slaveDeviceId, row))
+            } else {
+                queue.push(() => getDeviceAttrByDeviceId(deviceId, row))
             }
+
+            Promise
+                .all(queue.map(item => item()))
+                .finally(() => {
+                    form.val(getRowFilter(row), datum)
+                })
         }
         /**
          * @description 保存
          */
-        function submit() {
-            const data = rowFormList.map(rowNumber => form.val(`deviceDataRow${rowNumber}`)).filter(item => Object.keys(item).length)
+        async function submit(callback) {
+            const data = Array.from({ length: addRowNumber }).map((_, row) => form.val(getRowFilter(row))).filter(item => Object.keys(item).length)
             const formModal = {
                 configurationId,
                 contentId: currentPageId.id,
@@ -5652,7 +5671,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 },
                 type: event.data.type
             };
-            ConfigurationNodeApi.updateNodeEvent(formModal)
+            const [err, res] = await to(ConfigurationNodeApi.updateNodeEvent(formModal))
+            if (err) return
+            UseLayUi.successMsg()
+            callback()
         }
         /**
@@ -5666,7 +5688,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         <div class="layui-form-item">
                             <label class="layui-form-label">事件</label>
                             <div class="layui-input-block">
-                                <input type="text" name="event" class="layui-input" value="${eventType[type]}" disabled>
+                                <input type="text" name="event" class="layui-input" value="${enumenumEventType[type]}" disabled>
                             </div>
                         </div>
                         <div class="layui-form-item">
@@ -5685,12 +5707,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                             </div>
                         </div>
                     </div>
-                    <div style="height:255px;" id="tableContent">
+                    <div id="tableContent">
                         <table class="layui-table" >
                             <colgroup>
-                                <col>
-                                <col>
-                                <col>
+                                <col width="240">
+                                <col width="240">
+                                <col width="240">
                                 <col width="240">
                                 <col width="60">
                             </colgroup>
@@ -5703,10 +5725,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                                 <th style="text-align:center">操作</th>
                             </tr>
                             </thead>
-                            <tbody id="${deviceDataTbody}"></tbody>
+                            <tbody id="${enumActionEl.DEVICE_DATA_BODY_EL}"></tbody>
                         </table>
                         <div style="display:flex;justify-content:center;">
-                            <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="addRow">添加一条</button>
+                            <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${enumActionEl.ADD_ROW_EL}">添加一条</button>
                         </div>
                     </div>
                 </form>`
@@ -5716,21 +5738,23 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 content,
                 skin: 'event-layer__override',
                 // area: ["800px", "600px"],
-                area: '800px',
+                area: '1100px',
                 btn: ["保存", "取消"],
                 shade: ["0.7", "#fafafa"],
-                async yes(index, layero) {
-                    await submit()
-                    layer.close(index)
-                    const [err, res] = await to(getNodeBindInfo())
-                    if (err || !Object.keys(res).length) return
-                    currentNodeData = res
+                yes(index) {
+                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
+                        submit(() => {
+                            layer.close(index)
+                            getNodeBindInfo()
+                        })
+                    })
                 },
                 but2(index, layero) {
-
+                    return false
                 },
-                success(layero, index) {
-                    getAllDevice()
+                async success(layero, index) {
+                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({ 'lay-submit': '', 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER })
+                    await getMaterDevice()
                     const info = getLayerBindInfo('event', type)
                     if (!info) {
                         addRecord()
@@ -5751,7 +5775,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
      */
     function handleClickOrDbClick(event) {
-        const eventType = {
+        const enumEventType = {
             DOWN: "按下",
             UP: "抬起",
             SINGLE: "单击",
@@ -5802,6 +5826,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
              * @description 页面 ID
              */
             PAGE_EL_ID: 'dynamicInputPage',
+
+            /**
+             * @description layer submit filter
+             */
+            LAYER_SUBMIT_FILTER: 'dynamicLinkLayerFilter'
         }
         /**
@@ -5837,6 +5866,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             }
             const [err] = await to(ConfigurationNodeApi.updateNodeEvent(data))
             if (err) return
+            UseLayUi.successMsg()
             callback()
         }
@@ -5884,13 +5914,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     <div class="layui-form-item">
                         <label class="layui-form-label">事件</label>
                         <div class="layui-input-block">
-                            <input type="text" name="${enumConst.EVENT}" disabled class="layui-input" value="${eventType[type]}">
+                            <input type="text" name="${enumConst.EVENT}" disabled class="layui-input" value="${enumEventType[type]}">
                         </div>
                     </div>
                     <div class="layui-form-item">
                         <label class="layui-form-label">动作</label>
                         <div class="layui-input-block">
-                            <select name="${enumConst.ACTION}" lay-verify="required" lay-filter="${enumActionEl.ACTION_SELECT_FILTER}">
+                            <select name="${enumConst.ACTION}" lay-verType="tips" lay-verify="required" lay-filter="${enumActionEl.ACTION_SELECT_FILTER}">
                                 ${generatorActionOptions()}
                             </select>
                         </div>
@@ -5898,13 +5928,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     <div class="layui-form-item" id="${enumActionEl.LINK_EL_ID}">
                         <label class="layui-form-label">链接</label>
                         <div class="layui-input-block">
-                            <input type="text" name="${enumConst.LINK_VALUE}" class="layui-input">
+                            <input type="text" lay-verType="tips" name="${enumConst.LINK_VALUE}" class="layui-input">
                         </div>
                     </div>
                     <div class="layui-form-item" id="${enumActionEl.PAGE_EL_ID}" style="display:none">
                         <label class="layui-form-label">页面</label>
                         <div class="layui-input-block">
-                            <select name="${enumConst.PAGE_VALUE}" lay-verify="required" id="pageSelect">
+                            <select name="${enumConst.PAGE_VALUE}" lay-verType="tips" id="pageSelect">
                                 ${generatorPageOptions()}
                             </select>
                         </div>
@@ -5920,13 +5950,19 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 content,
                 area: ["800px", "500px"],
                 btn: ["保存", "取消"],
-                async yes(index) {
-                    submit(() => layer.close(index))
+                yes(index) {
+                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
+                        submit(() => {
+                            layer.close(index)
+                            getNodeBindInfo()
+                        })
+                    })
                 },
                 btn2(index) {
                     layer.close(index);
                 },
-                success() {
+                success(layero) {
+                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({ 'lay-submit': '', 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER })
                     generatorEventListen()
                     const info = getLayerBindInfo('event', type)
                     form.render(null, enumActionEl.FORM_FILTER)
@@ -5946,7 +5982,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const IS_DISPLAY = event.data.type === 'DISPLAY'
-        const eventType = {
+        const enumEventType = {
             FLASH: '闪烁',
             DISPLAY: '显示/隐藏',
             ROTATE: '旋转',
@@ -5964,7 +6000,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             ATTR_EL: 'dataDynamicEffectAtt',
             DEL_BTN_EL: 'dataDynamicEffectDelBtn',
             ADD_BTN_EL: 'dataDynamicEffectAddBtn',
-            DISPLAY_SWITCH_EL: 'visibleOrHidden'
+            DISPLAY_SWITCH_EL: 'visibleOrHidden',
+            LAYER_SUBMIT_FILTER: 'dynamicEffectLayerFilter'
         }
         const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
@@ -6012,8 +6049,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 treeProps: {
                     data: treeList,
                     onlyIconControl: true,
-                    onReady(setValue) {
-                    },
                     click(node) {
                         currentOrgId = node.data.id
                         getDeviceByOrg(node.data.id)
@@ -6084,10 +6119,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             <tr class="layui-form" lay-filter="${getRowFilter(addRowNumber)}">
               ${IS_DISPLAY && `<td>${generatorDisplayOptions()}</td>`}
               <td>
-                <input type="text" name="${enumConst.MIN}" class="layui-input">
+                <input lay-verType="tips" lay-verify="required" type="text" name="${enumConst.MIN}" class="layui-input">
               </td>
               <td>
-                <input type="text" name="${enumConst.MAX}" class="layui-input">
+                <input lay-verType="tips" lay-verify="required" type="text" name="${enumConst.MAX}" class="layui-input">
               </td>
               <td style="text-align: center;">
                 <button type="button" class="layui-btn layui-btn-primary layui-border-red ${enumActionEl.DEL_BTN_EL}">删除</button>
@@ -6158,15 +6193,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const { slaveDeviceId, deviceId, attr, orgId, condition = [] } = info
             echoEachData(condition)
             echoOrgTree(orgId)
-            const queue = [getDeviceByOrg(orgId)]
+            const queue = []
+            if (orgId) {
+                queue.push(() => getDeviceByOrg(orgId))
+            }
             if (slaveDeviceId) {
                 $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
-                queue.push(getSlaveDeviceByMasterDevice(orgId, deviceId))
-                queue.push(getAttrsByDevice(slaveDeviceId))
+                queue.push(() => getSlaveDeviceByMasterDevice(orgId, deviceId))
+                queue.push(() => getAttrsByDevice(slaveDeviceId))
             } else {
-                queue.push(getAttrsByDevice(deviceId))
+                queue.push(() => getAttrsByDevice(deviceId))
             }
-            Promise.all(queue).finally(() => {
+            Promise.all(queue.map(item => item())).finally(() => {
                 form.val(enumActionEl.FORM_FILTER, { slaveDeviceId, deviceId, attr, orgId })
             })
         }
@@ -6186,7 +6224,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function echoOrgTree(id) {
             const node = UseLayUi.findTreeObjectByField(treeList, id)
-            console.log($(`#${enumActionEl.ORG_EL}`).find(`input[name="${enumConst.ORG_ID}"]`).parent().find('span'))
             $(`#${enumActionEl.ORG_EL}`).find(`input[name="${enumConst.ORG_ID}"]`).parent().find('span').html(node.name)
         }
@@ -6202,7 +6239,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 type: event.data.type
             }
             const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
-            if (!err) callback()
+            if (err) return
+            UseLayUi.successMsg()
+            callback()
         }
@@ -6223,7 +6262,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         <div class="layui-form-item" id="${enumActionEl.DEVICE_EL}">
                             <label class="layui-form-label">设备</label>
                             <div class="layui-input-block">
-                                <select name="${enumConst.DEVICE_ID}" lay-verify="required" lay-filter="${enumActionEl.DEVICE_EL}">
+                                <select name="${enumConst.DEVICE_ID}" lay-verType="tips" lay-verify="required" lay-filter="${enumActionEl.DEVICE_EL}">
                                 </select>
                             </div>
                         </div>
@@ -6231,7 +6270,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         <div class="layui-form-item" id="${enumActionEl.SLAVE_DEVICE_EL}" style="display: none">
                             <label class="layui-form-label">子设备</label>
                             <div class="layui-input-block">
-                                <select name="${enumConst.SLAVE_DEVICE_ID}" lay-verify="required" lay-filter="${enumActionEl.SLAVE_DEVICE_EL}">
+                                <select name="${enumConst.SLAVE_DEVICE_ID}" lay-verType="tips" lay-filter="${enumActionEl.SLAVE_DEVICE_EL}">
                                 </select>
                             </div>
                         </div>
@@ -6239,7 +6278,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         <div class="layui-form-item" id="${enumActionEl.ATTR_EL}">
                             <label class="layui-form-label">属性</label>
                             <div class="layui-input-block">
-                                <select name="${enumConst.ATTR}" lay-verify="required" lay-filter="${enumActionEl.ATTR_EL}"></select>
+                                <select name="${enumConst.ATTR}" lay-verType="tips" lay-verify="required" lay-filter="${enumActionEl.ATTR_EL}"></select>
                             </div>
                         </div>
                     </div>
@@ -6269,12 +6308,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 `
             layer.open({
-                title: eventType[type],
+                title: enumEventType[type],
                 content,
                 skin: 'event-layer__override',
                 btn: ['保存', '取消'],
-                area: [IS_DISPLAY ? '1000px' : '800PX', '500px'],
-                success() {
+                area: IS_DISPLAY ? '1000px' : '800PX',
+                success(layero) {
+                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({ 'lay-submit': '', 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER })
                     generatorOrgTreeSelect()
                     const info = getLayerBindInfo('act', type)
                     if (info) {
@@ -6286,7 +6326,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     form.render()
                 },
                 yes(index) {
-                    submit(() => layer.close(index))
+                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
+                        submit(() => {
+                            layer.close(index)
+                            getNodeBindInfo()
+                        })
+                    })
                 },
                 btn2() {
@@ -10332,6 +10377,11 @@ class UseLayUi {
         template = singleUsage ? UseLayUi.createSingleUseFormItem(template) : template
+        /**
+         * @description 设置下拉树值
+         * @param {string} id - layui tree 树形结构 title字段
+         * @param {string} title - layui tree 树形结构 id字段
+         */
         function setValue({ id, title }) {
             $(elem)
                 .find('.layui-form-select').removeClass('layui-form-selected').end()
@@ -10349,7 +10399,7 @@ class UseLayUi {
                 tree.render({
                     ...treeProps,
                     ...(autoFormatDataSource ? { data: UseLayUi.formatTreeDataSource(data, customSetTree, valueField, labelField, childrenField) } : {}),
-                    elem: `#${layFilter}`,
+                    elem: $(elem).find(`#${layFilter}`),
                     click(node) {
                         setValue(node.data)
                         if (UseLayUi.isFunction(click)) click(node)
@@ -10492,6 +10542,14 @@ class UseLayUi {
         })
     }
+    static msg(msg, options) {
+        const { layer } = layui
+        layer.msg(msg, options)
+    }
+
+    static successMsg(msg = '操作成功', options) {
+        UseLayUi.msg(msg, { ...options, icon: 6 })
+    }
 }
@@ -10512,3 +10570,257 @@ function to(promise, errorExt) {
             return [err, undefined]
         })
 }
+
+
+class Ws {
+    /**
+     * @description url 连接地址
+     */
+    url
+
+    /**
+     * @description 协议
+     */
+    protocols
+
+    /**
+     * @description socket 实例
+     * @type {WebSocket}
+     */
+    ws
+
+    /**
+     * @description 重连标志
+     * @type {boolean}
+     */
+    isReconnectionLoading = false
+
+    /**
+     * @description 重连定时器
+     */
+    timeId = null
+
+    /**
+     * @description 手动关闭标志位
+     * @type {boolean}
+     */
+    isCustomClose = false
+
+    /**
+     * @description 消息队列 重新连接后会将之前断开期间发送的消息重新推送
+     * @type {Array}
+     */
+    errorStack = []
+
+    /**
+     * @description 创建websocket实例
+     * @params {string} url - 连接路径
+     * @params {string} protocols - 协议
+     */
+    constructor(url, protocols) {
+        this.url = url
+        this.protocols = protocols
+        this.createWs()
+    }
+
+    /**
+     * @description
+     */
+    createWs() {
+        this.ws = new WebSocket(this.url, this.protocols)
+        this.onopen()
+        this.onerror()
+        this.onclose()
+        this.onmessage()
+    }
+
+    /**
+     * @description 建立连接时
+     */
+    onopen() {
+        this.ws.onopen = () => {
+            console.log(this.ws, 'onopen')
+            this.errorStack.forEach(message => {
+                this.send(message)
+            })
+            this.errorStack = []
+            this.isReconnectionLoading = false
+        }
+    }
+
+    /**
+     * @description 连接发生错误
+     */
+    onerror() {
+        this.ws.onerror = (err) => {
+            console.log(err, 'onerror')
+            this.reconnection()
+            this.isReconnectionLoading = false
+        }
+    }
+
+    /**
+     * @description 连接断开时
+     */
+    onclose() {
+        this.ws.onclose = () => {
+            console.log('onclose')
+            if (this.isCustomClose) return
+
+            this.reconnection()
+            this.isReconnectionLoading = false
+        }
+    }
+
+    /**
+     * @description 接受消息
+     */
+    async onmessage() {
+        this.ws.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data)
+                this.eventCenter.emit(data.type, data.data)
+            } catch (error) {
+                console.log(error, 'error')
+            }
+        }
+    }
+
+    /**
+     * @description 断开重连
+     */
+    reconnection() {
+        if (this.isReconnectionLoading) return
+
+        this.isReconnectionLoading = true
+        clearTimeout(this.timeId)
+        this.timeId = setTimeout(() => {
+            this.createWs()
+        }, 10000)
+    }
+
+    /**
+     * @description 发送消息
+     */
+    send(message) {
+        if (this.ws.readyState !== 1) {
+            this.errorStack.push(message)
+            return
+        }
+
+        this.ws.send(message)
+    }
+
+    /**
+     * @description 手动关闭
+     */
+    close() {
+        this.isCustomClose = true
+        this.ws.close()
+    }
+
+    /**
+     * @description 手动开启
+     */
+    start() {
+        this.isCustomClose = false
+        this.reconnection()
+    }
+
+    /**
+     * @description 销毁
+     */
+    destroy() {
+        this.close()
+        this.ws = null
+        this.errorStack = null
+        this.eventCenter = null
+    }
+}
+
+
+class EventCenter {
+
+    /**
+     * @description 调度中心
+     * @type {Map<string, Function[]}
+     */
+    eventStack
+
+    /**
+     * @description 
+     */
+    constructor() {
+        this.eventStack = new Map()
+    }
+
+    /**
+     * @description 监听事件
+     */
+    on(eventName, callback) {
+        if (this.eventStack.has(eventName)) {
+            this.eventStack.get(eventName).push(callback)
+            return
+        }
+        this.eventStack.set(eventName, [callback])
+    }
+
+    /**
+     * @description 触发事件
+     */
+    emit(eventName, ...args) {
+        if (this.eventStack.has(eventName))
+            this.eventStack.get(eventName).forEach(fn => fn(...args))
+
+    }
+
+    /**
+     * @description 移除事件
+     */
+    off(eventName) {
+        if (this.eventStack.has(eventName))
+            this.eventStack.delete(eventName)
+    }
+
+    /**
+     * @description 清除事件
+     */
+    clean(eventName) {
+        this.eventStack.clear()
+    }
+
+
+}
+
+
+// TODO preview action
+function previewAction() {
+
+    setTimeout(() => {
+        console.dir(GLOBAL_EDITOR_UI)
+    }, 5000);
+
+    function getContentInfo() {
+
+    }
+
+    const sendMsgTemplate = {
+        tsSubCmds: [
+            {
+                entityType: "DEVICE",
+                entityId: "a5ef5840-d68a-11ec-9c71-a9680487d1e0",
+                scope: "LATEST_TELEMETRY",
+                cmdId: 1
+            }
+        ]
+    }
+
+    const GLOBAL_TOKEN = JSON.parse(localStorage.getItem("UNDEFINED__DEVELOPMENT__2.7.1__COMMON__LOCAL__KEY__")).value.JWT_TOKEN.value
+
+    const wsUrl = `ws://192.168.10.115:8080/api/ws/plugins/telemetry?token=${GLOBAL_TOKEN}`
+
+    const websocket = new Ws(wsUrl)
+
+}
+
+previewAction()