feat: implement websocket data source sync

ww
1 parent ad950e67
Showing 3 changed files with 536 additions and 237 deletions
src/main/webapp/js/diagramly/Pages.js
src/main/webapp/js/grapheditor/Format.js
src/main/webapp/styles/formatChange.css
--- a/src/main/webapp/js/diagramly/Pages.js
View file @6a5d9b7
+++ b/src/main/webapp/js/diagramly/Pages.js
View file @6a5d9b7
@@ -458,7 +458,9 @@ EditorUi.prototype.initPages = function()
 			// Updates scrollbar positions and backgrounds after validation	
 			var p = this.currentPage;
-			
+			console.log(this)
+			previewAction(this, this.currentPage)
+
 			if (p != null && p != lastPage)
 			{
 				if (p.viewState == null || p.viewState.scrollLeft == null)
--- a/src/main/webapp/js/grapheditor/Format.js
View file @6a5d9b7
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @6a5d9b7
@@ -306,7 +306,6 @@ Format.prototype.init = function () {
     var ui = this.editorUi;
     var editor = ui.editor;
     var graph = editor.graph;
-
     this.update = mxUtils.bind(this, function (sender, evt) {
         this.refresh();
     });
@@ -681,7 +680,7 @@ BaseFormatPanel.prototype.installInputHandler = function (
             if (graph.isEditing()) {
                 graph.stopEditing(true);
             }
-
+            // TODO update data ？？
             graph.getModel().beginUpdate();
             try {
                 var cells = ui.getSelectionState().cells;
@@ -4030,7 +4029,7 @@ TextFormatPanel.prototype.addFont = function (container) {
                     while (
                         node != null &&
                         node.nodeType != mxConstants.NODETYPE_ELEMENT
-                    ) {
+                        ) {
                         node = node.parentNode;
                     }
@@ -5020,7 +5019,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     let echoRefreshFn = null
-
     // 获取url的请求参数函数
     function getRequest() {
         var url = location.search; //获取url中"?"符后的字串
@@ -5077,8 +5075,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     }
-
-
     /**
      * @description 生成数据交互面板
      * @returns {Array}
@@ -5087,11 +5083,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const eventList = []
         const eventNodeCls = 'interaction__container'
         for (const item of interactionList) {
-            const checkbox = UseLayUi.createCheckBox({ dataSource: item, layFilter: item.type, valueField: 'type', labelField: 'label' })
+            const checkbox = UseLayUi.createCheckBox({
+                dataSource: item,
+                layFilter: item.type,
+                valueField: 'type',
+                labelField: 'label'
+            })
             const template = `
-                <div class="${eventNodeCls}">
-                ${checkbox}
-                <i id="${item.type}"></i>
+                <div class="${ eventNodeCls }">
+                ${ checkbox }
+                <i id="${ item.type }"></i>
                 </div>`
             eventList.push(template)
         }
@@ -5106,11 +5107,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const eventList = []
         const eventNodeCls = 'interaction__container'
         for (const item of list) {
-            const checkbox = UseLayUi.createCheckBox({ dataSource: item, layFilter: item.checkboxName, valueField: 'type', labelField: 'label' })
+            const checkbox = UseLayUi.createCheckBox({
+                dataSource: item,
+                layFilter: item.checkboxName,
+                valueField: 'type',
+                labelField: 'label'
+            })
             const template = `
-                <div class="${eventNodeCls}">
-                ${checkbox}
-                <i id="${item.type}"></i>
+                <div class="${ eventNodeCls }">
+                ${ checkbox }
+                <i id="${ item.type }"></i>
                 </div>`
             eventList.push(template)
         }
@@ -5147,7 +5153,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         async function generatorOrgTres() {
             orgPanel = defaultPanel.cloneNode(false)
-            const orgContainer = `<div id="${enumActionEl.ORG_EL}"></div>`
+            const orgContainer = `<div id="${ enumActionEl.ORG_EL }"></div>`
             $(orgPanel).append(orgContainer)
             const [err, res] = await to(ConfigurationNodeApi.getOrgTree())
@@ -5155,7 +5161,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             treeList = res
             UseLayUi.createTreeSelect({
-                elem: `#${enumActionEl.ORG_EL}`,
+                elem: `#${ enumActionEl.ORG_EL }`,
                 layFilter: enumDataSourceConst.ORG_ID,
                 className: 'data-source__org--override',
                 label: '组织',
@@ -5184,10 +5190,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     const { value } = data
                     const selected = deviceList.find(item => item.id === value)
                     if (selected.deviceType === enumDataSourceConst.GATEWAY) {
-                        $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
+                        $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'block' })
                         getSlaveDeviceByMasterDeviceId(currentCheckedOrgNode, selected.id)
                     } else {
-                        $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'none' })
+                        $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'none' })
                         getAttrByDeviceId(selected.id)
                     }
                 }
@@ -5227,14 +5233,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         }
-
         /**
          * @description 根据组织ID获取设备
          */
         async function getDevicesByOrgId(organizationId) {
             if (organizationId) {
                 const items = deviceList = await ConfigurationNodeApi.getMasterDevice(organizationId);
-                $(`#${enumActionEl.DEVICE_EL}`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))
+                $(`#${ enumActionEl.DEVICE_EL }`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))
                 form.render('select', CONTAINER_FILTER)
             }
         }
@@ -5245,7 +5250,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         async function getSlaveDeviceByMasterDeviceId(orgId, deviceId) {
             if (deviceId && currentCheckedOrgNode) {
                 const items = await ConfigurationNodeApi.getSlaveDevice(orgId, deviceId);
-                $(`#${enumActionEl.SLAVE_DEVICE_EL}`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))
+                $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))
                 form.render('select', CONTAINER_FILTER)
             }
         }
@@ -5256,7 +5261,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         async function getAttrByDeviceId(tbDeviceId) {
             if (tbDeviceId) {
                 const [err, res] = await to(ConfigurationNodeApi.getDeviceAttr(tbDeviceId))
-                $(`#${enumActionEl.ATTR_EL}`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: res }))
+                $(`#${ enumActionEl.ATTR_EL }`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: res }))
                 form.render('select', CONTAINER_FILTER)
             }
         }
@@ -5276,7 +5281,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             await getNodeBindInfo()
-
             function echoDataSource() {
                 const { dataSources = [] } = currentNodeData
                 const [dataSource = {}] = dataSources
@@ -5284,21 +5288,19 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 const queue = []
                 if (orgId) {
                     currentCheckedOrgNode = orgId
-                    queue.push(() => getDevicesByOrgId(orgId))
+                    queue.push(getDevicesByOrgId(orgId))
                 }
                 if (slaveDeviceId) {
-                    queue.push(() => {
-                        getSlaveDeviceByMasterDeviceId(orgId, deviceId)
-                        $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
-                    })
-                    queue.push(() => getAttrByDeviceId(slaveDeviceId))
+                    queue.push(getSlaveDeviceByMasterDeviceId(orgId, deviceId))
+                    $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'block' })
+                    queue.push(getAttrByDeviceId(slaveDeviceId))
                 } else {
-                    queue.push(() => getAttrByDeviceId(deviceId))
+                    queue.push(getAttrByDeviceId(deviceId))
                 }
-                Promise.all(queue.map(item => item()))
+                Promise.all(queue)
                     .finally(() => {
                         const orgNode = UseLayUi.findTreeObjectByField(treeList, currentCheckedOrgNode)
-                        $(`#${enumActionEl.ORG_EL} input[name="${enumDataSourceConst.ORG_ID}"]`).parent().find('span').html(orgNode?.name)
+                        $(`#${ enumActionEl.ORG_EL } input[name="${ enumDataSourceConst.ORG_ID }"]`).parent().find('span').html(orgNode?.name)
                         form.val(CONTAINER_FILTER, {
                             orgId,
                             deviceId,
@@ -5330,6 +5332,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             $(container).append(fragment)
         }
+
         mount()
     }
@@ -5457,7 +5460,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         }
-
         /**
          * @description 所有设备选项
          * @type {*[]}
@@ -5466,7 +5468,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         let addRowNumber = 0
-        const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
+        const getRowFilter = (rowNumber) => `${ enumActionEl.ROW_FILTER }${ rowNumber }`
         /**
          * @description 枚举常量
@@ -5502,25 +5504,25 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function addRecord() {
             const content = `
-              <tr class="layui-form" lay-filter="${enumActionEl.ROW_FILTER}${addRowNumber}">
+              <tr class="layui-form" lay-filter="${ enumActionEl.ROW_FILTER }${ addRowNumber }">
                 <td>
-                  <select name="${enumConst.DEVICE}" lay-filter="${enumConst.DEVICE}" lay-verType="tips" lay-verify="required"></select>
+                  <select name="${ enumConst.DEVICE }" lay-filter="${ enumConst.DEVICE }" lay-verType="tips" lay-verify="required"></select>
                 </td>
                 <td>
-                  <select name="${enumConst.SLAVE_DEVICE}" lay-filter="${enumConst.SLAVE_DEVICE}" lay-verType="tips"></select>
+                  <select name="${ enumConst.SLAVE_DEVICE }" lay-filter="${ enumConst.SLAVE_DEVICE }" lay-verType="tips"></select>
                 </td>
                 <td>
-                  <select name="${enumConst.ATTR}" lay-verType="tips" lay-verify="required"></select>
+                  <select name="${ enumConst.ATTR }" lay-verType="tips" lay-verify="required"></select>
                 </td>
                 <td>
-                  <textarea name="${enumConst.VALUE}" placeholder="请输入命令" lay-verType="tips" 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 ${enumActionEl.DEL_ROW_EL}">删除</button>
+                  <button type="button" class="layui-btn layui-btn-primary layui-border-red ${ enumActionEl.DEL_ROW_EL }">删除</button>
                 </td>
               </tr>
             `
-            $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).append(content)
+            $(`#${ enumActionEl.DEVICE_DATA_BODY_EL }`).append(content)
             setDeviceOptions(addRowNumber)
             form.render('select', getRowFilter(addRowNumber))
             addRowNumber++
@@ -5534,7 +5536,7 @@ 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.ATTR}"]`).html(generateOption)
+            $(data.elem).parents('tr').find(`select[name="${ enumConst.ATTR }"]`).html(generateOption)
             form.render('select')
         }
@@ -5542,20 +5544,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 选择设备监听事件
          */
         function createSelectDeviceListenEvent() {
-            form.on(`select(${enumConst.DEVICE})`, async (data) => {
+            form.on(`select(${ enumConst.DEVICE })`, async (data) => {
                 const isGATEWAY = allDeviceOptions.find(item => item.id === data.value)?.deviceType === "GATEWAY"
                 // 网关设备请求子设备
                 if (isGATEWAY && data.value) {
                     const [err, res] = await to(ConfigurationNodeApi.getSlaveDevice(currentCheckedOrgNode, data.value))
                     if (!res) return
                     const generateOption = UseLayUi.generateOptionTemplate({ dataSource: res })
-                    $(data.elem).parents('tr').find(`select[name="${enumConst.SLAVE_DEVICE}"]`).html(generateOption)
+                    $(data.elem).parents('tr').find(`select[name="${ enumConst.SLAVE_DEVICE }"]`).html(generateOption)
                 } else {
                     updateVariableOptions(data)
                 }
                 form.render('select')
             })
-            form.on(`select(${enumConst.SLAVE_DEVICE})`, (data) => {
+            form.on(`select(${ enumConst.SLAVE_DEVICE })`, (data) => {
                 updateVariableOptions(data)
             })
         }
@@ -5564,7 +5566,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 删除行
          */
         function createDeleteRowListenEvent() {
-            $(`.${enumActionEl.DEL_ROW_EL}`).click((event) => {
+            $(`.${ enumActionEl.DEL_ROW_EL }`).click((event) => {
                 $(event.target).parents('tr').remove()
             })
         }
@@ -5573,10 +5575,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 新增行
          */
         function createAddRowListenEvent() {
-            $(`#${enumActionEl.ADD_ROW_EL}`).click(() => {
+            $(`#${ enumActionEl.ADD_ROW_EL }`).click(() => {
                 addRecord()
                 const generateOption = UseLayUi.generateOptionTemplate({ dataSource: allDeviceOptions })
-                $(`#${enumActionEl.DEVICE_DATA_BODY_EL} 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('select')
             })
@@ -5587,7 +5589,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function setDeviceOptions(row) {
             const generateOption = UseLayUi.generateOptionTemplate({ dataSource: allDeviceOptions })
-            $(`#${enumActionEl.DEVICE_DATA_BODY_EL} tr[lay-filter="${getRowFilter(row)}"]`).find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
+            $(`#${ enumActionEl.DEVICE_DATA_BODY_EL } tr[lay-filter="${ getRowFilter(row) }"]`).find(`select[name="${ enumConst.DEVICE }"]`).html(generateOption)
         }
         /**
@@ -5607,7 +5609,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function mountSelectOptions(row, key, data) {
             const generateOption = UseLayUi.generateOptionTemplate({ dataSource: data })
-            $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).find(`tr[lay-filter="${getRowFilter(row)}"] select[name="${key}"]`).html(generateOption)
+            $(`#${ enumActionEl.DEVICE_DATA_BODY_EL }`).find(`tr[lay-filter="${ getRowFilter(row) }"] select[name="${ key }"]`).html(generateOption)
         }
         /**
@@ -5688,7 +5690,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="${enumenumEventType[type]}" disabled>
+                                <input type="text" name="event" class="layui-input" value="${ enumenumEventType[type] }" disabled>
                             </div>
                         </div>
                         <div class="layui-form-item">
@@ -5725,10 +5727,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                                 <th style="text-align:center">操作</th>
                             </tr>
                             </thead>
-                            <tbody id="${enumActionEl.DEVICE_DATA_BODY_EL}"></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="${enumActionEl.ADD_ROW_EL}">添加一条</button>
+                            <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${ enumActionEl.ADD_ROW_EL }">添加一条</button>
                         </div>
                     </div>
                 </form>`
@@ -5742,7 +5744,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 btn: ["保存", "取消"],
                 shade: ["0.7", "#fafafa"],
                 yes(index) {
-                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
+                    form.on(`submit(${ enumActionEl.LAYER_SUBMIT_FILTER })`, data => {
                         submit(() => {
                             layer.close(index)
                             getNodeBindInfo()
@@ -5753,7 +5755,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     return false
                 },
                 async success(layero, index) {
-                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({ 'lay-submit': '', 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER })
+                    $(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) {
@@ -5843,8 +5848,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 [enumGetValue[content.type]]: content.value
             }
             if (content.type === enumActionType.PAGE) {
-                $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
-                $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
+                $(`#${ enumActionEl.PAGE_EL_ID }`).css({ display: 'block' })
+                $(`#${ enumActionEl.LINK_EL_ID }`).css({ display: 'none' })
             }
             form.val(enumActionEl.FORM_FILTER, val)
         }
@@ -5891,14 +5896,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         }
         function generatorEventListen() {
-            form.on(`select(${enumActionEl.ACTION_SELECT_FILTER})`, (data) => {
+            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' })
+                    $(`#${ 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' })
+                    $(`#${ enumActionEl.PAGE_EL_ID }`).css({ display: 'none' })
+                    $(`#${ enumActionEl.LINK_EL_ID }`).css({ display: 'block' })
                 }
             })
         }
@@ -5909,33 +5914,33 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function createLayerForm(type) {
             const content = `
-            <form class="layui-form" lay-filter="${enumActionEl.FORM_FILTER}">
+            <form class="layui-form" lay-filter="${ enumActionEl.FORM_FILTER }">
                 <div style="width:400px">
                     <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="${enumEventType[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-verType="tips" lay-verify="required" lay-filter="${enumActionEl.ACTION_SELECT_FILTER}">
-                                ${generatorActionOptions()}
+                            <select name="${ enumConst.ACTION }" lay-verType="tips" lay-verify="required" lay-filter="${ enumActionEl.ACTION_SELECT_FILTER }">
+                                ${ generatorActionOptions() }
                             </select>
                         </div>
                     </div>
-                    <div class="layui-form-item" id="${enumActionEl.LINK_EL_ID}">
+                    <div class="layui-form-item" id="${ enumActionEl.LINK_EL_ID }">
                         <label class="layui-form-label">链接</label>
                         <div class="layui-input-block">
-                            <input type="text" lay-verType="tips" 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">
+                    <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-verType="tips" id="pageSelect">
-                                ${generatorPageOptions()}
+                            <select name="${ enumConst.PAGE_VALUE }" lay-verType="tips" id="pageSelect">
+                                ${ generatorPageOptions() }
                             </select>
                         </div>
                     </div>
@@ -5951,7 +5956,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 area: ["800px", "500px"],
                 btn: ["保存", "取消"],
                 yes(index) {
-                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
+                    form.on(`submit(${ enumActionEl.LAYER_SUBMIT_FILTER })`, data => {
                         submit(() => {
                             layer.close(index)
                             getNodeBindInfo()
@@ -5962,7 +5967,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     layer.close(index);
                 },
                 success(layero) {
-                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({ 'lay-submit': '', 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER })
+                    $(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)
@@ -6004,10 +6012,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             LAYER_SUBMIT_FILTER: 'dynamicEffectLayerFilter'
         }
-        const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
+        const getRowFilter = (rowNumber) => `${ enumActionEl.ROW_FILTER }${ rowNumber }`
         /**
-         * @description 
+         * @description
          */
         const enumConst = {
             MIN: 'min',
@@ -6042,7 +6050,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function generatorOrgTreeSelect() {
             UseLayUi.createTreeSelect({
-                elem: `#${enumActionEl.ORG_EL}`,
+                elem: `#${ enumActionEl.ORG_EL }`,
                 layFilter: enumConst.ORG_ID,
                 label: '组织',
                 singleUsage: false,
@@ -6066,7 +6074,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             if (res) {
                 deviceList = res
                 const template = UseLayUi.generateOptionTemplate({ dataSource: res })
-                $(`#${enumActionEl.DEVICE_EL} select`).html(template)
+                $(`#${ enumActionEl.DEVICE_EL } select`).html(template)
                 form.render('select', enumActionEl.FORM_FILTER)
             }
         }
@@ -6078,7 +6086,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const [err, res] = await to(ConfigurationNodeApi.getSlaveDevice(orgId, id))
             if (res) {
                 const template = UseLayUi.generateOptionTemplate({ dataSource: res })
-                $(`#${enumActionEl.SLAVE_DEVICE_EL} select`).html(template)
+                $(`#${ enumActionEl.SLAVE_DEVICE_EL } select`).html(template)
                 form.render('select', enumActionEl.FORM_FILTER)
             }
         }
@@ -6090,7 +6098,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const [err, res] = await to(ConfigurationNodeApi.getDeviceAttr(id))
             if (res) {
                 const template = UseLayUi.generateOptionTemplate({ dataSource: res })
-                $(`#${enumActionEl.ATTR_EL} select`).html(template)
+                $(`#${ enumActionEl.ATTR_EL } select`).html(template)
                 // form.render('select') 
                 form.render('select', enumActionEl.FORM_FILTER)
             }
@@ -6105,7 +6113,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             return `
                 <div class="layui-form-item" style="margin-bottom: 0px">
                     <div class="layui-input-block" style="margin-left: 0px;">
-                        <select name="${enumConst.TYPE}" lay-verify="required">${template}</select>
+                        <select name="${ enumConst.TYPE }" lay-verify="required">${ template }</select>
                     </div>
                 </div>
                 `
@@ -6116,21 +6124,21 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function addRecord() {
             const content = `
-            <tr class="layui-form" lay-filter="${getRowFilter(addRowNumber)}">
-              ${IS_DISPLAY && `<td>${generatorDisplayOptions()}</td>`}
+            <tr class="layui-form" lay-filter="${ getRowFilter(addRowNumber) }">
+              ${ IS_DISPLAY && `<td>${ generatorDisplayOptions() }</td>` }
               <td>
-                <input lay-verType="tips" lay-verify="required" 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 lay-verType="tips" lay-verify="required" 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>
+                <button type="button" class="layui-btn layui-btn-primary layui-border-red ${ enumActionEl.DEL_BTN_EL }">删除</button>
               </td>
             </tr>
             `
             addRowNumber++
-            $(`#${enumActionEl.TABLE_BODY_EL}`).append(content)
+            $(`#${ enumActionEl.TABLE_BODY_EL }`).append(content)
             if (IS_DISPLAY) {
                 // form.render(null, getRowFilter(addRowNumber))
                 form.render()
@@ -6141,7 +6149,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 创建添加记录事件
          */
         function createAddRowListenEvent() {
-            $(`#${enumActionEl.ADD_BTN_EL}`).click(() => {
+            $(`#${ enumActionEl.ADD_BTN_EL }`).click(() => {
                 addRecord()
                 createDeleteRowListenEvent()
             })
@@ -6151,7 +6159,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 创建删除行事件
          */
         function createDeleteRowListenEvent() {
-            $(`.${enumActionEl.DEL_BTN_EL}`).click((event) => {
+            $(`.${ enumActionEl.DEL_BTN_EL }`).click((event) => {
                 $(event.target).parents('tr').remove()
             })
         }
@@ -6160,19 +6168,19 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 创建下拉联动事件
          */
         function createSelectLinkageListenEvent() {
-            form.on(`select(${enumActionEl.DEVICE_EL})`, (data) => {
+            form.on(`select(${ enumActionEl.DEVICE_EL })`, (data) => {
                 const { value } = data
                 const selected = deviceList.find(item => item.id === value)
                 if (selected.deviceType === enumConst.GATEWAY) {
-                    $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
+                    $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'block' })
                     getSlaveDeviceByMasterDevice(currentOrgId, selected.id)
                 } else {
-                    $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'none' })
+                    $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'none' })
                     getAttrsByDevice(selected.id)
                 }
             })
-            form.on(`select(${enumActionEl.SLAVE_DEVICE_EL})`, (data) => {
+            form.on(`select(${ enumActionEl.SLAVE_DEVICE_EL })`, (data) => {
                 getAttrsByDevice(data.value)
             })
         }
@@ -6195,16 +6203,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             echoOrgTree(orgId)
             const queue = []
             if (orgId) {
-                queue.push(() => getDeviceByOrg(orgId))
+                queue.push(getDeviceByOrg(orgId))
             }
             if (slaveDeviceId) {
-                $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
-                queue.push(() => getSlaveDeviceByMasterDevice(orgId, deviceId))
-                queue.push(() => getAttrsByDevice(slaveDeviceId))
+                $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'block' })
+                queue.push(getSlaveDeviceByMasterDevice(orgId, deviceId))
+                queue.push(getAttrsByDevice(slaveDeviceId))
             } else {
-                queue.push(() => getAttrsByDevice(deviceId))
+                queue.push(getAttrsByDevice(deviceId))
             }
-            Promise.all(queue.map(item => item())).finally(() => {
+            Promise.all(queue).finally(() => {
                 form.val(enumActionEl.FORM_FILTER, { slaveDeviceId, deviceId, attr, orgId })
             })
         }
@@ -6224,7 +6232,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function echoOrgTree(id) {
             const node = UseLayUi.findTreeObjectByField(treeList, id)
-            $(`#${enumActionEl.ORG_EL}`).find(`input[name="${enumConst.ORG_ID}"]`).parent().find('span').html(node.name)
+            $(`#${ enumActionEl.ORG_EL }`).find(`input[name="${ enumConst.ORG_ID }"]`).parent().find('span').html(node.name)
         }
         async function submit(callback) {
@@ -6247,7 +6255,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function createLayerForm(type) {
             const content = `
-                <form class="layui-form" lay-filter="${enumActionEl.FORM_FILTER}">
+                <form class="layui-form" lay-filter="${ enumActionEl.FORM_FILTER }">
                     <div style="width:400px">
                         <div class="layui-form-item">
                             <label class="layui-form-label">类型</label>
@@ -6257,28 +6265,28 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                             </div>
                         </div>
-                        <div id="${enumActionEl.ORG_EL}">组织</div>
+                        <div id="${ enumActionEl.ORG_EL }">组织</div>
-                        <div class="layui-form-item" id="${enumActionEl.DEVICE_EL}">
+                        <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-verType="tips" 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>
-                        <div class="layui-form-item" id="${enumActionEl.SLAVE_DEVICE_EL}" style="display: none">
+                        <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-verType="tips" lay-filter="${enumActionEl.SLAVE_DEVICE_EL}">
+                                <select name="${ enumConst.SLAVE_DEVICE_ID }" lay-verType="tips" lay-filter="${ enumActionEl.SLAVE_DEVICE_EL }">
                                 </select>
                             </div>
                         </div>
-                        <div class="layui-form-item" id="${enumActionEl.ATTR_EL}">
+                        <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-verType="tips" 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>
@@ -6286,23 +6294,23 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 <div>
                     <table class="layui-table" >
                         <colgroup>
-                            ${IS_DISPLAY ? '<col width="240">' : ''}
+                            ${ IS_DISPLAY ? '<col width="240">' : '' }
                             <col width="240">
                             <col width="240">
                             <col>
                         </colgroup>
                         <thead>
                         <tr>
-                            ${IS_DISPLAY ? '<th style="text-align:center">类型</th>' : ''}
+                            ${ IS_DISPLAY ? '<th style="text-align:center">类型</th>' : '' }
                             <th style="text-align:center">最小值(<=)</th>
                             <th style="text-align:center">最大值(>=)</th>
                             <th style="text-align:center">操作</th>
                         </tr>
                         </thead>
-                        <tbody id="${enumActionEl.TABLE_BODY_EL}"></tbody>
+                        <tbody id="${ enumActionEl.TABLE_BODY_EL }"></tbody>
                     </table>
                     <div style="display:flex;justify-content:center;">
-                        <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${enumActionEl.ADD_BTN_EL}">添加一条</button>
+                        <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${ enumActionEl.ADD_BTN_EL }">添加一条</button>
                     </div>
                 </div>
                 `
@@ -6314,7 +6322,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 btn: ['保存', '取消'],
                 area: IS_DISPLAY ? '1000px' : '800PX',
                 success(layero) {
-                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({ 'lay-submit': '', 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER })
+                    $(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) {
@@ -6326,7 +6337,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     form.render()
                 },
                 yes(index) {
-                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
+                    form.on(`submit(${ enumActionEl.LAYER_SUBMIT_FILTER })`, data => {
                         submit(() => {
                             layer.close(index)
                             getNodeBindInfo()
@@ -6347,14 +6358,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     setTimeout(() => {
         // TODO 数据交互事件
-        $(`#${enumInteractionType.DOWN}`).click({ type: enumInteractionType.DOWN, }, handleDownOrUpEvent);
-        $(`#${enumInteractionType.UP}`).click({ type: enumInteractionType.UP }, handleDownOrUpEvent);
-        $(`#${enumInteractionType.SINGLE}`).click({ type: enumInteractionType.SINGLE }, handleClickOrDbClick);
-        $(`#${enumInteractionType.DOUBLE}`).click({ type: enumInteractionType.DOUBLE }, handleClickOrDbClick);
+        $(`#${ enumInteractionType.DOWN }`).click({ type: enumInteractionType.DOWN, }, handleDownOrUpEvent);
+        $(`#${ enumInteractionType.UP }`).click({ type: enumInteractionType.UP }, handleDownOrUpEvent);
+        $(`#${ enumInteractionType.SINGLE }`).click({ type: enumInteractionType.SINGLE }, handleClickOrDbClick);
+        $(`#${ enumInteractionType.DOUBLE }`).click({ type: enumInteractionType.DOUBLE }, handleClickOrDbClick);
         // 数据动效事件
-        $(`#${enumDynamicEffectType.FLASH}`).click({ type: enumDynamicEffectType.FLASH }, handleDataDynamicEffect);
-        $(`#${enumDynamicEffectType.DISPLAY}`).click({ type: enumDynamicEffectType.DISPLAY }, handleDataDynamicEffect);
-        $(`#${enumDynamicEffectType.ROTATE}`).click({ type: enumDynamicEffectType.ROTATE }, handleDataDynamicEffect);
+        $(`#${ enumDynamicEffectType.FLASH }`).click({ type: enumDynamicEffectType.FLASH }, handleDataDynamicEffect);
+        $(`#${ enumDynamicEffectType.DISPLAY }`).click({ type: enumDynamicEffectType.DISPLAY }, handleDataDynamicEffect);
+        $(`#${ enumDynamicEffectType.ROTATE }`).click({ type: enumDynamicEffectType.ROTATE }, handleDataDynamicEffect);
     });
 };
@@ -6691,9 +6702,9 @@ StyleFormatPanel.prototype.addFill = function (container) {
     var tmpColor = mxUtils.getValue(ss.style, fillKey, null);
     gradientPanel.style.display =
         tmpColor != null &&
-            tmpColor != mxConstants.NONE &&
-            ss.fill &&
-            ss.style.shape != "image"
+        tmpColor != mxConstants.NONE &&
+        ss.fill &&
+        ss.style.shape != "image"
             ? ""
             : "none";
@@ -6755,7 +6766,7 @@ StyleFormatPanel.prototype.addFill = function (container) {
             fillStyleSelect.style.display = ss.style.sketch == "1" ? "" : "none";
             gradientPanel.style.display =
                 !ss.containsImage &&
-                    (ss.style.sketch != "1" || fillStyle == "solid" || fillStyle == "auto")
+                (ss.style.sketch != "1" || fillStyle == "solid" || fillStyle == "auto")
                     ? ""
                     : "none";
         }
@@ -8536,14 +8547,14 @@ StyleFormatPanel.prototype.addStroke = function (container) {
                 edgeStyleDiv.className =
                     "geSprite " +
                     (mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) ==
-                        "vertical"
+                    "vertical"
                         ? "geSprite-verticalelbow"
                         : "geSprite-horizontalelbow");
             } else if (es == "isometricEdgeStyle") {
                 edgeStyleDiv.className =
                     "geSprite " +
                     (mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) ==
-                        "vertical"
+                    "vertical"
                         ? "geSprite-verticalisometric"
                         : "geSprite-horizontalisometric");
             } else {
@@ -10124,7 +10135,7 @@ class UseLayUi {
         return result === '[object Function]' || result === '[object AsyncFunction]'
     }
-    static dynamicAttr = (attr, value) => value ? `${attr}="${value}"` : ''
+    static dynamicAttr = (attr, value) => value ? `${ attr }="${ value }"` : ''
     /**
      * @description format data source to tree structure
@@ -10193,9 +10204,9 @@ class UseLayUi {
         let { renderFn } = options
         renderFn = renderFn || ((record) => {
             if (typeof record === 'object') {
-                return `<option value="${record[valueField]}" ${record.disabled ? 'disabled=""' : ''}>${record[labelField]}</option>`
+                return `<option value="${ record[valueField] }" ${ record.disabled ? 'disabled=""' : '' }>${ record[labelField] }</option>`
             } else {
-                return `<option value="${record}">${record}</option>`
+                return `<option value="${ record }">${ record }</option>`
             }
         })
         const optionsList = dataSource.map(renderFn)
@@ -10209,8 +10220,8 @@ class UseLayUi {
      */
     static createSingleUseFormItem(content, props = '') {
         return `
-    <div class="layui-form" ${props}>
-      ${content}
+    <div class="layui-form" ${ props }>
+      ${ content }
     </div>
     `
     }
@@ -10272,7 +10283,7 @@ class UseLayUi {
                 return dataSource.map(record => renderFn(record))
             }
             return formatDataSource(dataSource).map(record => {
-                return `<option value="${record[valueField]}" ${record.disable ? 'disabled=""' : ''}>${record[labelField]}</option>`
+                return `<option value="${ record[valueField] }" ${ record.disable ? 'disabled=""' : '' }>${ record[labelField] }</option>`
             })
         }
@@ -10283,7 +10294,7 @@ class UseLayUi {
         }
         if (layFilter) {
-            form.on(`select(${layFilter})`, (data) => {
+            form.on(`select(${ layFilter })`, (data) => {
                 if (onClick && this.isFunction(onClick)) {
                     onClick(data)
                 }
@@ -10291,11 +10302,11 @@ class UseLayUi {
         }
         let template = `
-      <div class="layui-form-item ${className}">
-        <label class="layui-form-label">${label}</label>
+      <div class="layui-form-item ${ className }">
+        <label class="layui-form-label">${ label }</label>
         <div class="layui-input-block"> 
-          <select name="${layFilter}" ${this.dynamicAttr('lay-filter', layFilter)} ${this.dynamicAttr('lay-verify', layVerify)}>
-            ${generateOptionTemplate(dataSource)}
+          <select name="${ layFilter }" ${ this.dynamicAttr('lay-filter', layFilter) } ${ this.dynamicAttr('lay-verify', layVerify) }>
+            ${ generateOptionTemplate(dataSource) }
           </select>
         </div>
       </div>`
@@ -10357,18 +10368,18 @@ class UseLayUi {
         let { data = [], click, onReady } = treeProps
         let template = `
-            <div class="layui-form-item ${CLASS_NAME} ${className}">
-                <label class="layui-form-label">${label}</label>
+            <div class="layui-form-item ${ CLASS_NAME } ${ className }">
+                <label class="layui-form-label">${ label }</label>
                 <div class="layui-input-block">
-                <div class="layui-unselect layui-form-select ${SELECT_CLS}">
+                <div class="layui-unselect layui-form-select ${ SELECT_CLS }">
                     <div class="layui-select-title">
                     <span class="layui-input layui-unselect">请选择</span>
-                    <input type="hidden" name="${layFilter}">
+                    <input type="hidden" name="${ layFilter }">
                     <i class="layui-edge"></i> 
                     </div>
                     <dl class="layui-anim layui-anim-upbit">
                     <dd>
-                        <ul id="${layFilter}"></ul>
+                        <ul id="${ layFilter }"></ul>
                     </dd>
                     </dl>
                 </div>
@@ -10386,7 +10397,7 @@ class UseLayUi {
             $(elem)
                 .find('.layui-form-select').removeClass('layui-form-selected').end()
                 .find(".layui-select-title span").html(title).end()
-                .find(`input:hidden[name='${layFilter}']`).val(id);
+                .find(`input:hidden[name='${ layFilter }']`).val(id);
         }
         // init mount
@@ -10399,7 +10410,7 @@ class UseLayUi {
                 tree.render({
                     ...treeProps,
                     ...(autoFormatDataSource ? { data: UseLayUi.formatTreeDataSource(data, customSetTree, valueField, labelField, childrenField) } : {}),
-                    elem: $(elem).find(`#${layFilter}`),
+                    elem: $(elem).find(`#${ layFilter }`),
                     click(node) {
                         setValue(node.data)
                         if (UseLayUi.isFunction(click)) click(node)
@@ -10407,10 +10418,10 @@ class UseLayUi {
                 })
                 // focus
-                $(`.${SELECT_CLS}`)
+                $(`.${ SELECT_CLS }`)
                     .on("click", ".layui-select-title", function (e) {
                         $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
-                        $(this).parents(`.${SELECT_CLS}`).toggleClass("layui-form-selected");
+                        $(this).parents(`.${ SELECT_CLS }`).toggleClass("layui-form-selected");
                         layui.stope(e);
                     })
                     .on('click', '.layui-anim', (e) => {
@@ -10428,7 +10439,7 @@ class UseLayUi {
                         if (!parentNode) return
                         const showClose = UseLayUi.isInNode(parentNode, target, true)
                         if (showClose) return
-                        $(`.${SELECT_CLS}`).removeClass("layui-form-selected")
+                        $(`.${ SELECT_CLS }`).removeClass("layui-form-selected")
                     });
                 if (UseLayUi.isFunction(onReady)) {
@@ -10465,21 +10476,21 @@ class UseLayUi {
         function createOptions(dataSource) {
             return dataSource.map((record) => {
                 return `<input 
-                            type="checkbox" lay-skin="${laySkin}" 
-                            ${UseLayUi.dynamicAttr('name', record[valueField])} 
-                            ${UseLayUi.dynamicAttr('title', record[labelField])}
-                            ${UseLayUi.dynamicAttr('lay-filter', layFilter)} 
-                            ${UseLayUi.dynamicAttr('lay-verify', layVerify)} 
-                            ${UseLayUi.dynamicAttr('checked', record[checkedField])}
+                            type="checkbox" lay-skin="${ laySkin }" 
+                            ${ UseLayUi.dynamicAttr('name', record[valueField]) } 
+                            ${ UseLayUi.dynamicAttr('title', record[labelField]) }
+                            ${ UseLayUi.dynamicAttr('lay-filter', layFilter) } 
+                            ${ UseLayUi.dynamicAttr('lay-verify', layVerify) } 
+                            ${ UseLayUi.dynamicAttr('checked', record[checkedField]) }
                         >`
             })
         }
         let template = `
-     <div class="layui-form-item ${CLASS_NAME}" >
-        <label class="layui-form-label">${label}</label>
+     <div class="layui-form-item ${ CLASS_NAME }" >
+        <label class="layui-form-label">${ label }</label>
         <div class="layui-input-block">
-          ${createOptions(dataSource).join('')}
+          ${ createOptions(dataSource).join('') }
         </div>
       </div>
     `
@@ -10489,7 +10500,7 @@ class UseLayUi {
             if (!elem) return template
             $(elem).empty()
             $(elem).append(template)
-            form.on(`checkbox(${layFilter})`, (data) => {
+            form.on(`checkbox(${ layFilter })`, (data) => {
                 onChange && (onChange(data))
             })
             form.render()
@@ -10572,6 +10583,64 @@ function to(promise, errorExt) {
 }
+class EventCenter {
+
+    /**
+     * @description 调度中心
+     * @type {Map<string, Function[]>}
+     */
+    eventStack
+
+    /**
+     * @description 实例化EventCenter
+     */
+    constructor() {
+        this.eventStack = new Map()
+    }
+
+    /**
+     * @description 监听事件
+     * @param {string | number} eventName - 事件名
+     * @param {Function} callback - 事件处理方法
+     */
+    on(eventName, callback) {
+        if (this.eventStack.has(eventName)) {
+            this.eventStack.get(eventName).push(callback)
+            return
+        }
+        this.eventStack.set(eventName, [callback])
+    }
+
+    /**
+     * @description 触发事件
+     * @param {string | number} eventName  - 事件名
+     * @param {any} args - 参数
+     */
+    emit(eventName, ...args) {
+        if (this.eventStack.has(eventName))
+            this.eventStack.get(eventName).forEach(fn => fn(...args))
+
+    }
+
+    /**
+     * @description 移除事件
+     * @param {string} eventName - 时间名
+     */
+    off(eventName) {
+        if (this.eventStack.has(eventName))
+            this.eventStack.delete(eventName)
+    }
+
+    /**
+     * @description 清除事件
+     */
+    clean(eventName) {
+        this.eventStack.clear()
+    }
+
+
+}
+
 class Ws {
     /**
      * @description url 连接地址
@@ -10584,6 +10653,36 @@ class Ws {
     protocols
     /**
+     * @description socket open时 拓展
+     * @type {Function}
+     * @param {Ws} instance - 实例
+     */
+    onopenCallback
+
+    /**
+     * @description socket error时 拓展
+     * @type {Function}
+     * @param {Ws} instance - 实例
+     */
+    onerrorCallback
+
+    /**
+     * @description socket close时 拓展
+     * @type {Function}
+     * @param {Ws} instance - 实例
+     */
+    oncloseCallback
+
+    /**
+     * @description socket message时 拓展
+     * @type {Function}
+     * @param {object} data - event.data  message数据
+     * @param {MessageEvent} event - event  事件对象
+     * @param {Ws} instance - Ws 实例
+     */
+    onmessageCallback
+
+    /**
      * @description socket 实例
      * @type {WebSocket}
      */
@@ -10613,13 +10712,28 @@ class Ws {
     errorStack = []
     /**
+     * @description 实例
+     */
+    static instance
+
+    /**
      * @description 创建websocket实例
-     * @params {string} url - 连接路径
-     * @params {string} protocols - 协议
+     * @param {string} option.url - 连接路径
+     * @param {string} [option.protocols] option.protocols - 协议
+     * @param {Function} [option.onopenCallback] option.onopenCallback - socket open时 拓展
+     * @param {Function} [option.onerrorCallback] option.onerrorCallback - socket error时 拓展
+     * @param {Function} [option.oncloseCallback] option.oncloseCallback - socket close时 拓展
+     * @param {Function} [option.onmessageCallback] option.onmessageCallback - socket message时 拓展
      */
-    constructor(url, protocols) {
+    constructor(option) {
+        const { url, protocols, onopenCallback, onerrorCallback, oncloseCallback, onmessageCallback } = option
+        if (!url) throw new Error('param url in Ws constructor is required')
         this.url = url
         this.protocols = protocols
+        this.onopenCallback = onopenCallback
+        this.onerrorCallback = onerrorCallback
+        this.oncloseCallback = oncloseCallback
+        this.onmessageCallback = onmessageCallback
         this.createWs()
     }
@@ -10639,12 +10753,12 @@ class Ws {
      */
     onopen() {
         this.ws.onopen = () => {
-            console.log(this.ws, 'onopen')
             this.errorStack.forEach(message => {
                 this.send(message)
             })
             this.errorStack = []
             this.isReconnectionLoading = false
+            if (typeof this.onopenCallback === 'function') this.onopenCallback(this)
         }
     }
@@ -10653,9 +10767,9 @@ class Ws {
      */
     onerror() {
         this.ws.onerror = (err) => {
-            console.log(err, 'onerror')
             this.reconnection()
             this.isReconnectionLoading = false
+            if (typeof this.onerrorCallback === 'function') this.onerrorCallback(this)
         }
     }
@@ -10664,24 +10778,27 @@ class Ws {
      */
     onclose() {
         this.ws.onclose = () => {
-            console.log('onclose')
             if (this.isCustomClose) return
             this.reconnection()
             this.isReconnectionLoading = false
+
+            if (typeof this.oncloseCallback === 'function') this.oncloseCallback(this)
         }
     }
     /**
      * @description 接受消息
      */
-    async onmessage() {
+    onmessage() {
         this.ws.onmessage = (event) => {
             try {
                 const data = JSON.parse(event.data)
-                this.eventCenter.emit(data.type, data.data)
+                if (typeof this.onmessageCallback === 'function') this.onmessageCallback(data, event, this)
+
             } catch (error) {
-                console.log(error, 'error')
+                // throw new Error(error)
+                console.error(error)
             }
         }
     }
@@ -10696,7 +10813,7 @@ class Ws {
         clearTimeout(this.timeId)
         this.timeId = setTimeout(() => {
             this.createWs()
-        }, 10000)
+        }, 60000)
     }
     /**
@@ -10734,93 +10851,290 @@ class Ws {
         this.close()
         this.ws = null
         this.errorStack = null
-        this.eventCenter = null
+    }
+
+    /**
+     * @description 单例模式
+     * @param {string} option.url - 连接路径
+     * @param {string} [option.protocols] option.protocols - 协议
+     * @param {Function} [option.onopenCallback] option.onopenCallback - socket open时 拓展
+     * @param {Function} [option.onerrorCallback] option.onerrorCallback - socket error时 拓展
+     * @param {Function} [option.oncloseCallback] option.oncloseCallback - socket close时 拓展
+     * @param {Function} [option.onmessageCallback] option.onmessageCallback - socket message时 拓展
+     * @return {Ws} instance
+     */
+    static getInstance(option) {
+        if (!this.instance) {
+            this.instance = new Ws(option)
+        }
+        return this.instance
     }
 }
+/**
+ * @description 切换页面时触发 /src/main/webapp/js/diagramly/Pages.js  row: 461
+ * @param editorUi
+ * @param currentPage
+ */
+function previewAction(editorUi, currentPage) {
+    if (!editorUi.editor.graph.isLightboxView()) return
+    DispatchCenter.getInstance(editorUi, currentPage)
-class EventCenter {
+    /**
+     * @description 编辑模式下editor对象的editable为true
+     * @param editorUi
+     * @return {boolean}
+     */
+    function isPreviewMode(editorUi = {}) {
+        const { editor: { editable } = {} } = editorUi
+        return !!editable
+    }
+}
+
+
+/**
+ * @description 调度中心
+ */
+class DispatchCenter {
     /**
-     * @description 调度中心
-     * @type {Map<string, Function[]}
+     * @description 节点映射
+     * @type {Map<string, object>}
      */
-    eventStack
+    nodeMapping
     /**
-     * @description 
+     * @description 当前页信息
      */
-    constructor() {
-        this.eventStack = new Map()
-    }
+    currentPage
     /**
-     * @description 监听事件
+     * @description 当前页中的所有cell
      */
-    on(eventName, callback) {
-        if (this.eventStack.has(eventName)) {
-            this.eventStack.get(eventName).push(callback)
-            return
-        }
-        this.eventStack.set(eventName, [callback])
-    }
+    contentAllCell
     /**
-     * @description 触发事件
+     * @description 图源信息
      */
-    emit(eventName, ...args) {
-        if (this.eventStack.has(eventName))
-            this.eventStack.get(eventName).forEach(fn => fn(...args))
+    graph
-    }
+    /**
+     * @description socket instance
+     * @type {Ws}
+     */
+    socket
     /**
-     * @description 移除事件
+     * @description 事件总线
+     * @type {EventCenter}
      */
-    off(eventName) {
-        if (this.eventStack.has(eventName))
-            this.eventStack.delete(eventName)
+    eventBus
+
+    /**
+     * @description 当前实例
+     */
+    static instance
+
+    /**
+     * @description 原页面ID 原页面content id
+     */
+    static rawContentId
+
+    constructor(editorUi, currentPage) {
+        this.nodeMapping = new Map()
+        this.init(editorUi, currentPage)
     }
     /**
-     * @description 清除事件
+     * @description 初始化实例
+     * @param editorUi
+     * @param currentPage
      */
-    clean(eventName) {
-        this.eventStack.clear()
+    init(editorUi, currentPage) {
+        this.createEventBus()
+        this.saveContentInfo(editorUi, currentPage)
+        // this.createGraphEventListener()
+        this.connectSocket()
+        this.getContentDataNode()
     }
+    /**
+     * @description 建立socket连接
+     */
+    connectSocket() {
+        const GLOBAL_TOKEN = JSON.parse(localStorage.getItem("UNDEFINED__DEVELOPMENT__2.7.1__COMMON__LOCAL__KEY__")).value.JWT_TOKEN.value
-}
+        // const { host, href } = location
+        // const reg = /^https/
+        // const wsUrl = `${reg.test(href) ? 'wss' : 'ws'}://${host}/api/ws/plugins/telemetry?token=${GLOBAL_TOKEN}`
+        const wsUrl = `ws://47.99.141.212:8080/api/ws/plugins/telemetry?token=${ GLOBAL_TOKEN }`
+        // const wsUrl = `ws://192.168.10.115:8080/api/ws/plugins/telemetry?token=${GLOBAL_TOKEN}`
-// TODO preview action
-function previewAction() {
+        this.socket = Ws.getInstance({ url: wsUrl, onmessageCallback: this.socketOnmessage })
+    }
-    setTimeout(() => {
-        console.dir(GLOBAL_EDITOR_UI)
-    }, 5000);
+    /**
+     * @description 处理webSocket消息
+     * @param message
+     * @param event
+     * @param ws
+     */
+    socketOnmessage(message, event, ws) {
+        const { subscriptionId, data } = message
+        DispatchCenter.instance.publishEvent(subscriptionId, data)
+    }
+
+    /**
+     * @description 创建事件中心
+     */
+    createEventBus() {
+        this.eventBus = new EventCenter()
+    }
-    function getContentInfo() {
+    /**
+     * @description 创建图层事件监听器
+     */
+    createGraphEventListener() {
+        console.log(mxEvent)
+        // this.graph.addListener(mxEvent.MOUSE_DOWN, (sender, event) => {
+        //     console.log('down')
+        //     console.log(event)
+        //     console.log(sender)
+        // })
+        // this.graph.addListener(mxEvent.MOUSE_UP, (sender, event) => {
+        //     console.log('up')
+        //     console.log(event)
+        //     console.log(sender)
+        // })
+        console.log(this.contentAllCell)
+        const node = this.contentAllCell.find(item => item.id === "xu8fz6ypefe3Lfq39emV-10")
+        console.log(node)
+        // node.addListener(mxEvent.CLICK, (sender, event) => {
+        //     console.log('click')
+        //     console.log(event)
+        //     console.log(sender)
+        // })
+        // this.graph.addListener(mxEvent.DOUBLE_CLICK, (sender, event) => {
+        //     console.log('double click')
+        //     console.log(event)
+        //     console.log(sender)
+        // })
+    }
+    /**
+     * @description 保存部分页面信息到实例上
+     * @param editorUi
+     * @param currentPage
+     */
+    saveContentInfo(editorUi, currentPage) {
+        const editor = editorUi.editor
+        this.graph = editor.graph
+        this.currentPage = currentPage
+        this.contentAllCell = this.graph.getDefaultParent().children
     }
-    const sendMsgTemplate = {
-        tsSubCmds: [
-            {
+    /**
+     * @description 获取页面绑定的节点信息
+     */
+    async getContentDataNode() {
+        const { node: { id } = {} } = this.currentPage
+        if (!id) return
+        const [err, res] = await to(ConfigurationNodeApi.getConfigurationInfo('CONTENT', id))
+        const { dataSources } = res
+        const sendMsg = {
+            tsSubCmds: this.generatorDataSourceMapping(dataSources)
+        }
+        this.sendMessageToGetRealTimeData(sendMsg)
+    }
+
+    /**
+     * @description 发送消息去获取实时数据
+     */
+    sendMessageToGetRealTimeData(message) {
+        if (typeof message !== 'string') message = JSON.stringify(message)
+        this.socket.send(message)
+    }
+
+    /**
+     * @description 生成节点映射表
+     * @param dataSources
+     * @return {{cmdId: number, entityType: string, keys: *, scope: string, entityId: *}[]}
+     */
+    generatorDataSourceMapping(dataSources = []) {
+        return dataSources.map((datum, eventName) => {
+            const { deviceId, attr } = datum
+            const sendMsgTemplate = {
                 entityType: "DEVICE",
-                entityId: "a5ef5840-d68a-11ec-9c71-a9680487d1e0",
+                entityId: deviceId,
                 scope: "LATEST_TELEMETRY",
-                cmdId: 1
+                cmdId: eventName,
+                keys: attr
             }
-        ]
+
+            this.subscribeDataSources(datum, eventName, attr)
+            this.nodeMapping.set(deviceId, sendMsgTemplate)
+            return sendMsgTemplate
+        })
     }
-    const GLOBAL_TOKEN = JSON.parse(localStorage.getItem("UNDEFINED__DEVELOPMENT__2.7.1__COMMON__LOCAL__KEY__")).value.JWT_TOKEN.value
+    /**
+     * @description 分发事件
+     */
+    publishEvent(eventName, data) {
+        Object.keys(data).forEach(() => {
+            this.eventBus.emit(eventName, data)
+        })
+    }
-    const wsUrl = `ws://192.168.10.115:8080/api/ws/plugins/telemetry?token=${GLOBAL_TOKEN}`
+    /**
+     * @description 订阅数据源
+     * @param datum
+     * @param eventName
+     * @param key
+     */
+    subscribeDataSources(datum, eventName, key) {
+        const node = this.contentAllCell.find(item => item.id === datum.nodeId)
+        this.eventBus.on(eventName, (message) => {
+            this.updatePage(node, () => {
+                const [[timespan, value]] = message[key]
+                node.setValue(value)
+            })
+        })
+    }
-    const websocket = new Ws(wsUrl)
+    /**
+     * @description 更新页面
+     * @param node
+     * @param callback
+     */
+    updatePage(node, callback) {
+        this.graph.getModel().beginUpdate()
+        try {
+            callback()
+            this.graph.insertVertex(node, null);
+        } finally {
+            this.graph.getModel().endUpdate()
+        }
+    }
+
+
+    /**
+     * @description 返回 DispatchCenter 实例 当contentID变化时重新创建实例
+     * @param editorUi
+     * @param currentPage
+     * @return {*}
+     */
+    static getInstance(editorUi, currentPage = {}) {
+        const { node: { id } = {} } = currentPage
+        if (!id) return
+        if (!DispatchCenter.instance || DispatchCenter.rawContentId !== id) {
+            DispatchCenter.instance = new DispatchCenter(editorUi, currentPage)
+            DispatchCenter.rawContentId = id
+        }
+
+        return DispatchCenter.instance
+    }
 }
-previewAction()
--- a/src/main/webapp/styles/formatChange.css
View file @6a5d9b7
+++ b/src/main/webapp/styles/formatChange.css
View file @6a5d9b7
@@ -10,7 +10,7 @@
 .override__title--default {
     width: 100% !important;
-    padding: 6px 0px 6px 6px !important;
+    padding: 6px 0 6px 6px !important;
     border-top: 1px solid #dadce0 !important
 }
@@ -50,6 +50,7 @@
 .data-panel__select .layui-form-label {
     padding: 9px 10px 9px 0;
     width: 50px !important;
+    box-sizing: border-box;
 }
 .data-panel__select .layui-input-block {
@@ -72,6 +73,7 @@
 .data-source__org--override  .layui-form-label {
     width: 50px !important;
     padding: 9px 10px 9px 0;
+    box-sizing: border-box;
 }
@@ -87,9 +89,6 @@
 /* ================ Tree Select ================== */
-/*.things-kit-tree-select {*/
-/*    width: 100%;*/
-/*}*/
 .things-kit-tree-select__tree .layui-select-title span {
     line-height: 38px;
@@ -103,25 +102,9 @@
     background-color: #fff;
 }
-
-/*.things-kit-tree-select .layui-form-label {*/
-/*    flex: auto;*/
-/*    max-width: 80px;*/
-/*    padding: 9px 0;*/
-/*    width: auto;*/
-/*    border: none;*/
-/*}*/
-
-/*.things-kit-tree-select {*/
-/*    display: flex;*/
-/*    margin-bottom: 0;*/
-/*}*/
-
-/*.things-kit-tree-select .layui-input-block {*/
-/*    margin-left: 0;*/
-/*    padding: 0 10px;*/
-/*    flex: auto;*/
-/*}*/
+.things-kit-tree-select__tree .layui-input {
+    border-width: 2px;
+}
 /* ============== checkbox ===================== */