简柏林 / thingskit-scada · Commits

Commit d9a1f1041f92451daa76fe5fba98e7489f12d3b5

Authored by xp.Huang
2 parents 7cc88130 6a5d9b78

Merge branch 'ww' into 'main' 

feat: implement websocket data source sync

See merge request huang/thingskit-drawio!10
Inline Side-by-side
Showing 3 changed files with 536 additions and 237 deletions
... ... @@ -458,7 +458,9 @@ EditorUi.prototype.initPages = function()
458 458
459 459 // Updates scrollbar positions and backgrounds after validation
460 460 var p = this.currentPage;
461   -
  461 + console.log(this)
  462 + previewAction(this, this.currentPage)
  463 +
462 464 if (p != null && p != lastPage)
463 465 {
464 466 if (p.viewState == null || p.viewState.scrollLeft == null)
... ...
... ... @@ -306,7 +306,6 @@ Format.prototype.init = function () {
306 306 var ui = this.editorUi;
307 307 var editor = ui.editor;
308 308 var graph = editor.graph;
309   -
310 309 this.update = mxUtils.bind(this, function (sender, evt) {
311 310 this.refresh();
312 311 });
... ... @@ -681,7 +680,7 @@ BaseFormatPanel.prototype.installInputHandler = function (
681 680 if (graph.isEditing()) {
682 681 graph.stopEditing(true);
683 682 }
684   -
  683 + // TODO update data ？？
685 684 graph.getModel().beginUpdate();
686 685 try {
687 686 var cells = ui.getSelectionState().cells;
... ... @@ -4030,7 +4029,7 @@ TextFormatPanel.prototype.addFont = function (container) {
4030 4029 while (
4031 4030 node != null &&
4032 4031 node.nodeType != mxConstants.NODETYPE_ELEMENT
4033   - ) {
  4032 + ) {
4034 4033 node = node.parentNode;
4035 4034 }
4036 4035
... ... @@ -5020,7 +5019,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5020 5019 let echoRefreshFn = null
5021 5020
5022 5021
5023   -
5024 5022 // 获取url的请求参数函数
5025 5023 function getRequest() {
5026 5024 var url = location.search; //获取url中"?"符后的字串
... ... @@ -5077,8 +5075,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5077 5075 }
5078 5076
5079 5077
5080   -
5081   -
5082 5078 /**
5083 5079 * @description 生成数据交互面板
5084 5080 * @returns {Array}
... ... @@ -5087,11 +5083,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5087 5083 const eventList = []
5088 5084 const eventNodeCls = 'interaction__container'
5089 5085 for (const item of interactionList) {
5090   - const checkbox = UseLayUi.createCheckBox({ dataSource: item, layFilter: item.type, valueField: 'type', labelField: 'label' })
  5086 + const checkbox = UseLayUi.createCheckBox({
  5087 + dataSource: item,
  5088 + layFilter: item.type,
  5089 + valueField: 'type',
  5090 + labelField: 'label'
  5091 + })
5091 5092 const template = `
5092   - <div class="${eventNodeCls}">
5093   - ${checkbox}
5094   - <i id="${item.type}"></i>
  5093 + <div class="${ eventNodeCls }">
  5094 + ${ checkbox }
  5095 + <i id="${ item.type }"></i>
5095 5096 </div>`
5096 5097 eventList.push(template)
5097 5098 }
... ... @@ -5106,11 +5107,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5106 5107 const eventList = []
5107 5108 const eventNodeCls = 'interaction__container'
5108 5109 for (const item of list) {
5109   - const checkbox = UseLayUi.createCheckBox({ dataSource: item, layFilter: item.checkboxName, valueField: 'type', labelField: 'label' })
  5110 + const checkbox = UseLayUi.createCheckBox({
  5111 + dataSource: item,
  5112 + layFilter: item.checkboxName,
  5113 + valueField: 'type',
  5114 + labelField: 'label'
  5115 + })
5110 5116 const template = `
5111   - <div class="${eventNodeCls}">
5112   - ${checkbox}
5113   - <i id="${item.type}"></i>
  5117 + <div class="${ eventNodeCls }">
  5118 + ${ checkbox }
  5119 + <i id="${ item.type }"></i>
5114 5120 </div>`
5115 5121 eventList.push(template)
5116 5122 }
... ... @@ -5147,7 +5153,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5147 5153 */
5148 5154 async function generatorOrgTres() {
5149 5155 orgPanel = defaultPanel.cloneNode(false)
5150   - const orgContainer = `<div id="${enumActionEl.ORG_EL}"></div>`
  5156 + const orgContainer = `<div id="${ enumActionEl.ORG_EL }"></div>`
5151 5157 $(orgPanel).append(orgContainer)
5152 5158
5153 5159 const [err, res] = await to(ConfigurationNodeApi.getOrgTree())
... ... @@ -5155,7 +5161,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5155 5161 treeList = res
5156 5162
5157 5163 UseLayUi.createTreeSelect({
5158   - elem: `#${enumActionEl.ORG_EL}`,
  5164 + elem: `#${ enumActionEl.ORG_EL }`,
5159 5165 layFilter: enumDataSourceConst.ORG_ID,
5160 5166 className: 'data-source__org--override',
5161 5167 label: '组织',
... ... @@ -5184,10 +5190,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5184 5190 const { value } = data
5185 5191 const selected = deviceList.find(item => item.id === value)
5186 5192 if (selected.deviceType === enumDataSourceConst.GATEWAY) {
5187   - $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
  5193 + $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'block' })
5188 5194 getSlaveDeviceByMasterDeviceId(currentCheckedOrgNode, selected.id)
5189 5195 } else {
5190   - $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'none' })
  5196 + $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'none' })
5191 5197 getAttrByDeviceId(selected.id)
5192 5198 }
5193 5199 }
... ... @@ -5227,14 +5233,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5227 5233 }
5228 5234
5229 5235
5230   -
5231 5236 /**
5232 5237 * @description 根据组织ID获取设备
5233 5238 */
5234 5239 async function getDevicesByOrgId(organizationId) {
5235 5240 if (organizationId) {
5236 5241 const items = deviceList = await ConfigurationNodeApi.getMasterDevice(organizationId);
5237   - $(`#${enumActionEl.DEVICE_EL}`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))
  5242 + $(`#${ enumActionEl.DEVICE_EL }`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))
5238 5243 form.render('select', CONTAINER_FILTER)
5239 5244 }
5240 5245 }
... ... @@ -5245,7 +5250,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5245 5250 async function getSlaveDeviceByMasterDeviceId(orgId, deviceId) {
5246 5251 if (deviceId && currentCheckedOrgNode) {
5247 5252 const items = await ConfigurationNodeApi.getSlaveDevice(orgId, deviceId);
5248   - $(`#${enumActionEl.SLAVE_DEVICE_EL}`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))
  5253 + $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))
5249 5254 form.render('select', CONTAINER_FILTER)
5250 5255 }
5251 5256 }
... ... @@ -5256,7 +5261,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5256 5261 async function getAttrByDeviceId(tbDeviceId) {
5257 5262 if (tbDeviceId) {
5258 5263 const [err, res] = await to(ConfigurationNodeApi.getDeviceAttr(tbDeviceId))
5259   - $(`#${enumActionEl.ATTR_EL}`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: res }))
  5264 + $(`#${ enumActionEl.ATTR_EL }`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: res }))
5260 5265 form.render('select', CONTAINER_FILTER)
5261 5266 }
5262 5267 }
... ... @@ -5276,7 +5281,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5276 5281 await getNodeBindInfo()
5277 5282
5278 5283
5279   -
5280 5284 function echoDataSource() {
5281 5285 const { dataSources = [] } = currentNodeData
5282 5286 const [dataSource = {}] = dataSources
... ... @@ -5284,21 +5288,19 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5284 5288 const queue = []
5285 5289 if (orgId) {
5286 5290 currentCheckedOrgNode = orgId
5287   - queue.push(() => getDevicesByOrgId(orgId))
  5291 + queue.push(getDevicesByOrgId(orgId))
5288 5292 }
5289 5293 if (slaveDeviceId) {
5290   - queue.push(() => {
5291   - getSlaveDeviceByMasterDeviceId(orgId, deviceId)
5292   - $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
5293   - })
5294   - queue.push(() => getAttrByDeviceId(slaveDeviceId))
  5294 + queue.push(getSlaveDeviceByMasterDeviceId(orgId, deviceId))
  5295 + $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'block' })
  5296 + queue.push(getAttrByDeviceId(slaveDeviceId))
5295 5297 } else {
5296   - queue.push(() => getAttrByDeviceId(deviceId))
  5298 + queue.push(getAttrByDeviceId(deviceId))
5297 5299 }
5298   - Promise.all(queue.map(item => item()))
  5300 + Promise.all(queue)
5299 5301 .finally(() => {
5300 5302 const orgNode = UseLayUi.findTreeObjectByField(treeList, currentCheckedOrgNode)
5301   - $(`#${enumActionEl.ORG_EL} input[name="${enumDataSourceConst.ORG_ID}"]`).parent().find('span').html(orgNode?.name)
  5303 + $(`#${ enumActionEl.ORG_EL } input[name="${ enumDataSourceConst.ORG_ID }"]`).parent().find('span').html(orgNode?.name)
5302 5304 form.val(CONTAINER_FILTER, {
5303 5305 orgId,
5304 5306 deviceId,
... ... @@ -5330,6 +5332,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5330 5332 $(container).append(fragment)
5331 5333
5332 5334 }
  5335 +
5333 5336 mount()
5334 5337
5335 5338 }
... ... @@ -5457,7 +5460,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5457 5460 }
5458 5461
5459 5462
5460   -
5461 5463 /**
5462 5464 * @description 所有设备选项
5463 5465 * @type {*[]}
... ... @@ -5466,7 +5468,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5466 5468
5467 5469 let addRowNumber = 0
5468 5470
5469   - const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
  5471 + const getRowFilter = (rowNumber) => `${ enumActionEl.ROW_FILTER }${ rowNumber }`
5470 5472
5471 5473 /**
5472 5474 * @description 枚举常量
... ... @@ -5502,25 +5504,25 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5502 5504
5503 5505 function addRecord() {
5504 5506 const content = `
5505   - <tr class="layui-form" lay-filter="${enumActionEl.ROW_FILTER}${addRowNumber}">
  5507 + <tr class="layui-form" lay-filter="${ enumActionEl.ROW_FILTER }${ addRowNumber }">
5506 5508 <td>
5507   - <select name="${enumConst.DEVICE}" lay-filter="${enumConst.DEVICE}" lay-verType="tips" lay-verify="required"></select>
  5509 + <select name="${ enumConst.DEVICE }" lay-filter="${ enumConst.DEVICE }" lay-verType="tips" lay-verify="required"></select>
5508 5510 </td>
5509 5511 <td>
5510   - <select name="${enumConst.SLAVE_DEVICE}" lay-filter="${enumConst.SLAVE_DEVICE}" lay-verType="tips"></select>
  5512 + <select name="${ enumConst.SLAVE_DEVICE }" lay-filter="${ enumConst.SLAVE_DEVICE }" lay-verType="tips"></select>
5511 5513 </td>
5512 5514 <td>
5513   - <select name="${enumConst.ATTR}" lay-verType="tips" lay-verify="required"></select>
  5515 + <select name="${ enumConst.ATTR }" lay-verType="tips" lay-verify="required"></select>
5514 5516 </td>
5515 5517 <td>
5516   - <textarea name="${enumConst.VALUE}" placeholder="请输入命令" lay-verType="tips" class="layui-textarea" ></textarea>
  5518 + <textarea name="${ enumConst.VALUE }" placeholder="请输入命令" lay-verType="tips" class="layui-textarea" ></textarea>
5517 5519 </td>
5518 5520 <td>
5519   - <button type="button" class="layui-btn layui-btn-primary layui-border-red ${enumActionEl.DEL_ROW_EL}">删除</button>
  5521 + <button type="button" class="layui-btn layui-btn-primary layui-border-red ${ enumActionEl.DEL_ROW_EL }">删除</button>
5520 5522 </td>
5521 5523 </tr>
5522 5524 `
5523   - $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).append(content)
  5525 + $(`#${ enumActionEl.DEVICE_DATA_BODY_EL }`).append(content)
5524 5526 setDeviceOptions(addRowNumber)
5525 5527 form.render('select', getRowFilter(addRowNumber))
5526 5528 addRowNumber++
... ... @@ -5534,7 +5536,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5534 5536 const [err, res] = await to(ConfigurationNodeApi.getDeviceAttr(data.value))
5535 5537 if (!res) return
5536 5538 const generateOption = UseLayUi.generateOptionTemplate({ dataSource: res })
5537   - $(data.elem).parents('tr').find(`select[name="${enumConst.ATTR}"]`).html(generateOption)
  5539 + $(data.elem).parents('tr').find(`select[name="${ enumConst.ATTR }"]`).html(generateOption)
5538 5540 form.render('select')
5539 5541 }
5540 5542
... ... @@ -5542,20 +5544,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5542 5544 * @description 选择设备监听事件
5543 5545 */
5544 5546 function createSelectDeviceListenEvent() {
5545   - form.on(`select(${enumConst.DEVICE})`, async (data) => {
  5547 + form.on(`select(${ enumConst.DEVICE })`, async (data) => {
5546 5548 const isGATEWAY = allDeviceOptions.find(item => item.id === data.value)?.deviceType === "GATEWAY"
5547 5549 // 网关设备请求子设备
5548 5550 if (isGATEWAY && data.value) {
5549 5551 const [err, res] = await to(ConfigurationNodeApi.getSlaveDevice(currentCheckedOrgNode, data.value))
5550 5552 if (!res) return
5551 5553 const generateOption = UseLayUi.generateOptionTemplate({ dataSource: res })
5552   - $(data.elem).parents('tr').find(`select[name="${enumConst.SLAVE_DEVICE}"]`).html(generateOption)
  5554 + $(data.elem).parents('tr').find(`select[name="${ enumConst.SLAVE_DEVICE }"]`).html(generateOption)
5553 5555 } else {
5554 5556 updateVariableOptions(data)
5555 5557 }
5556 5558 form.render('select')
5557 5559 })
5558   - form.on(`select(${enumConst.SLAVE_DEVICE})`, (data) => {
  5560 + form.on(`select(${ enumConst.SLAVE_DEVICE })`, (data) => {
5559 5561 updateVariableOptions(data)
5560 5562 })
5561 5563 }
... ... @@ -5564,7 +5566,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5564 5566 * @description 删除行
5565 5567 */
5566 5568 function createDeleteRowListenEvent() {
5567   - $(`.${enumActionEl.DEL_ROW_EL}`).click((event) => {
  5569 + $(`.${ enumActionEl.DEL_ROW_EL }`).click((event) => {
5568 5570 $(event.target).parents('tr').remove()
5569 5571 })
5570 5572 }
... ... @@ -5573,10 +5575,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5573 5575 * @description 新增行
5574 5576 */
5575 5577 function createAddRowListenEvent() {
5576   - $(`#${enumActionEl.ADD_ROW_EL}`).click(() => {
  5578 + $(`#${ enumActionEl.ADD_ROW_EL }`).click(() => {
5577 5579 addRecord()
5578 5580 const generateOption = UseLayUi.generateOptionTemplate({ dataSource: allDeviceOptions })
5579   - $(`#${enumActionEl.DEVICE_DATA_BODY_EL} tr`).last().find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
  5581 + $(`#${ enumActionEl.DEVICE_DATA_BODY_EL } tr`).last().find(`select[name="${ enumConst.DEVICE }"]`).html(generateOption)
5580 5582 createDeleteRowListenEvent()
5581 5583 form.render('select')
5582 5584 })
... ... @@ -5587,7 +5589,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5587 5589 */
5588 5590 function setDeviceOptions(row) {
5589 5591 const generateOption = UseLayUi.generateOptionTemplate({ dataSource: allDeviceOptions })
5590   - $(`#${enumActionEl.DEVICE_DATA_BODY_EL} tr[lay-filter="${getRowFilter(row)}"]`).find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
  5592 + $(`#${ enumActionEl.DEVICE_DATA_BODY_EL } tr[lay-filter="${ getRowFilter(row) }"]`).find(`select[name="${ enumConst.DEVICE }"]`).html(generateOption)
5591 5593 }
5592 5594
5593 5595 /**
... ... @@ -5607,7 +5609,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5607 5609 */
5608 5610 function mountSelectOptions(row, key, data) {
5609 5611 const generateOption = UseLayUi.generateOptionTemplate({ dataSource: data })
5610   - $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).find(`tr[lay-filter="${getRowFilter(row)}"] select[name="${key}"]`).html(generateOption)
  5612 + $(`#${ enumActionEl.DEVICE_DATA_BODY_EL }`).find(`tr[lay-filter="${ getRowFilter(row) }"] select[name="${ key }"]`).html(generateOption)
5611 5613 }
5612 5614
5613 5615 /**
... ... @@ -5688,7 +5690,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5688 5690 <div class="layui-form-item">
5689 5691 <label class="layui-form-label">事件</label>
5690 5692 <div class="layui-input-block">
5691   - <input type="text" name="event" class="layui-input" value="${enumenumEventType[type]}" disabled>
  5693 + <input type="text" name="event" class="layui-input" value="${ enumenumEventType[type] }" disabled>
5692 5694 </div>
5693 5695 </div>
5694 5696 <div class="layui-form-item">
... ... @@ -5725,10 +5727,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5725 5727 <th style="text-align:center">操作</th>
5726 5728 </tr>
5727 5729 </thead>
5728   - <tbody id="${enumActionEl.DEVICE_DATA_BODY_EL}"></tbody>
  5730 + <tbody id="${ enumActionEl.DEVICE_DATA_BODY_EL }"></tbody>
5729 5731 </table>
5730 5732 <div style="display:flex;justify-content:center;">
5731   - <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${enumActionEl.ADD_ROW_EL}">添加一条</button>
  5733 + <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${ enumActionEl.ADD_ROW_EL }">添加一条</button>
5732 5734 </div>
5733 5735 </div>
5734 5736 </form>`
... ... @@ -5742,7 +5744,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5742 5744 btn: ["保存", "取消"],
5743 5745 shade: ["0.7", "#fafafa"],
5744 5746 yes(index) {
5745   - form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
  5747 + form.on(`submit(${ enumActionEl.LAYER_SUBMIT_FILTER })`, data => {
5746 5748 submit(() => {
5747 5749 layer.close(index)
5748 5750 getNodeBindInfo()
... ... @@ -5753,7 +5755,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5753 5755 return false
5754 5756 },
5755 5757 async success(layero, index) {
5756   - $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({ 'lay-submit': '', 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER })
  5758 + $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
  5759 + 'lay-submit': '',
  5760 + 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER
  5761 + })
5757 5762 await getMaterDevice()
5758 5763 const info = getLayerBindInfo('event', type)
5759 5764 if (!info) {
... ... @@ -5843,8 +5848,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5843 5848 [enumGetValue[content.type]]: content.value
5844 5849 }
5845 5850 if (content.type === enumActionType.PAGE) {
5846   - $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
5847   - $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
  5851 + $(`#${ enumActionEl.PAGE_EL_ID }`).css({ display: 'block' })
  5852 + $(`#${ enumActionEl.LINK_EL_ID }`).css({ display: 'none' })
5848 5853 }
5849 5854 form.val(enumActionEl.FORM_FILTER, val)
5850 5855 }
... ... @@ -5891,14 +5896,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5891 5896 }
5892 5897
5893 5898 function generatorEventListen() {
5894   - form.on(`select(${enumActionEl.ACTION_SELECT_FILTER})`, (data) => {
  5899 + form.on(`select(${ enumActionEl.ACTION_SELECT_FILTER })`, (data) => {
5895 5900 const { value } = data
5896 5901 if (value === enumActionType.PAGE) {
5897   - $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
5898   - $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
  5902 + $(`#${ enumActionEl.LINK_EL_ID }`).css({ display: 'none' })
  5903 + $(`#${ enumActionEl.PAGE_EL_ID }`).css({ display: 'block' })
5899 5904 } else if (value === enumActionType.LINK) {
5900   - $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
5901   - $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'block' })
  5905 + $(`#${ enumActionEl.PAGE_EL_ID }`).css({ display: 'none' })
  5906 + $(`#${ enumActionEl.LINK_EL_ID }`).css({ display: 'block' })
5902 5907 }
5903 5908 })
5904 5909 }
... ... @@ -5909,33 +5914,33 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5909 5914 function createLayerForm(type) {
5910 5915
5911 5916 const content = `
5912   - <form class="layui-form" lay-filter="${enumActionEl.FORM_FILTER}">
  5917 + <form class="layui-form" lay-filter="${ enumActionEl.FORM_FILTER }">
5913 5918 <div style="width:400px">
5914 5919 <div class="layui-form-item">
5915 5920 <label class="layui-form-label">事件</label>
5916 5921 <div class="layui-input-block">
5917   - <input type="text" name="${enumConst.EVENT}" disabled class="layui-input" value="${enumEventType[type]}">
  5922 + <input type="text" name="${ enumConst.EVENT }" disabled class="layui-input" value="${ enumEventType[type] }">
5918 5923 </div>
5919 5924 </div>
5920 5925 <div class="layui-form-item">
5921 5926 <label class="layui-form-label">动作</label>
5922 5927 <div class="layui-input-block">
5923   - <select name="${enumConst.ACTION}" lay-verType="tips" lay-verify="required" lay-filter="${enumActionEl.ACTION_SELECT_FILTER}">
5924   - ${generatorActionOptions()}
  5928 + <select name="${ enumConst.ACTION }" lay-verType="tips" lay-verify="required" lay-filter="${ enumActionEl.ACTION_SELECT_FILTER }">
  5929 + ${ generatorActionOptions() }
5925 5930 </select>
5926 5931 </div>
5927 5932 </div>
5928   - <div class="layui-form-item" id="${enumActionEl.LINK_EL_ID}">
  5933 + <div class="layui-form-item" id="${ enumActionEl.LINK_EL_ID }">
5929 5934 <label class="layui-form-label">链接</label>
5930 5935 <div class="layui-input-block">
5931   - <input type="text" lay-verType="tips" name="${enumConst.LINK_VALUE}" class="layui-input">
  5936 + <input type="text" lay-verType="tips" name="${ enumConst.LINK_VALUE }" class="layui-input">
5932 5937 </div>
5933 5938 </div>
5934   - <div class="layui-form-item" id="${enumActionEl.PAGE_EL_ID}" style="display:none">
  5939 + <div class="layui-form-item" id="${ enumActionEl.PAGE_EL_ID }" style="display:none">
5935 5940 <label class="layui-form-label">页面</label>
5936 5941 <div class="layui-input-block">
5937   - <select name="${enumConst.PAGE_VALUE}" lay-verType="tips" id="pageSelect">
5938   - ${generatorPageOptions()}
  5942 + <select name="${ enumConst.PAGE_VALUE }" lay-verType="tips" id="pageSelect">
  5943 + ${ generatorPageOptions() }
5939 5944 </select>
5940 5945 </div>
5941 5946 </div>
... ... @@ -5951,7 +5956,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5951 5956 area: ["800px", "500px"],
5952 5957 btn: ["保存", "取消"],
5953 5958 yes(index) {
5954   - form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
  5959 + form.on(`submit(${ enumActionEl.LAYER_SUBMIT_FILTER })`, data => {
5955 5960 submit(() => {
5956 5961 layer.close(index)
5957 5962 getNodeBindInfo()
... ... @@ -5962,7 +5967,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5962 5967 layer.close(index);
5963 5968 },
5964 5969 success(layero) {
5965   - $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({ 'lay-submit': '', 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER })
  5970 + $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
  5971 + 'lay-submit': '',
  5972 + 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER
  5973 + })
5966 5974 generatorEventListen()
5967 5975 const info = getLayerBindInfo('event', type)
5968 5976 form.render(null, enumActionEl.FORM_FILTER)
... ... @@ -6004,10 +6012,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6004 6012 LAYER_SUBMIT_FILTER: 'dynamicEffectLayerFilter'
6005 6013 }
6006 6014
6007   - const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
  6015 + const getRowFilter = (rowNumber) => `${ enumActionEl.ROW_FILTER }${ rowNumber }`
6008 6016
6009 6017 /**
6010   - * @description
  6018 + * @description
6011 6019 */
6012 6020 const enumConst = {
6013 6021 MIN: 'min',
... ... @@ -6042,7 +6050,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6042 6050 */
6043 6051 function generatorOrgTreeSelect() {
6044 6052 UseLayUi.createTreeSelect({
6045   - elem: `#${enumActionEl.ORG_EL}`,
  6053 + elem: `#${ enumActionEl.ORG_EL }`,
6046 6054 layFilter: enumConst.ORG_ID,
6047 6055 label: '组织',
6048 6056 singleUsage: false,
... ... @@ -6066,7 +6074,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6066 6074 if (res) {
6067 6075 deviceList = res
6068 6076 const template = UseLayUi.generateOptionTemplate({ dataSource: res })
6069   - $(`#${enumActionEl.DEVICE_EL} select`).html(template)
  6077 + $(`#${ enumActionEl.DEVICE_EL } select`).html(template)
6070 6078 form.render('select', enumActionEl.FORM_FILTER)
6071 6079 }
6072 6080 }
... ... @@ -6078,7 +6086,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6078 6086 const [err, res] = await to(ConfigurationNodeApi.getSlaveDevice(orgId, id))
6079 6087 if (res) {
6080 6088 const template = UseLayUi.generateOptionTemplate({ dataSource: res })
6081   - $(`#${enumActionEl.SLAVE_DEVICE_EL} select`).html(template)
  6089 + $(`#${ enumActionEl.SLAVE_DEVICE_EL } select`).html(template)
6082 6090 form.render('select', enumActionEl.FORM_FILTER)
6083 6091 }
6084 6092 }
... ... @@ -6090,7 +6098,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6090 6098 const [err, res] = await to(ConfigurationNodeApi.getDeviceAttr(id))
6091 6099 if (res) {
6092 6100 const template = UseLayUi.generateOptionTemplate({ dataSource: res })
6093   - $(`#${enumActionEl.ATTR_EL} select`).html(template)
  6101 + $(`#${ enumActionEl.ATTR_EL } select`).html(template)
6094 6102 // form.render('select')
6095 6103 form.render('select', enumActionEl.FORM_FILTER)
6096 6104 }
... ... @@ -6105,7 +6113,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6105 6113 return `
6106 6114 <div class="layui-form-item" style="margin-bottom: 0px">
6107 6115 <div class="layui-input-block" style="margin-left: 0px;">
6108   - <select name="${enumConst.TYPE}" lay-verify="required">${template}</select>
  6116 + <select name="${ enumConst.TYPE }" lay-verify="required">${ template }</select>
6109 6117 </div>
6110 6118 </div>
6111 6119 `
... ... @@ -6116,21 +6124,21 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6116 6124 */
6117 6125 function addRecord() {
6118 6126 const content = `
6119   - <tr class="layui-form" lay-filter="${getRowFilter(addRowNumber)}">
6120   - ${IS_DISPLAY && `<td>${generatorDisplayOptions()}</td>`}
  6127 + <tr class="layui-form" lay-filter="${ getRowFilter(addRowNumber) }">
  6128 + ${ IS_DISPLAY && `<td>${ generatorDisplayOptions() }</td>` }
6121 6129 <td>
6122   - <input lay-verType="tips" lay-verify="required" type="text" name="${enumConst.MIN}" class="layui-input">
  6130 + <input lay-verType="tips" lay-verify="required" type="text" name="${ enumConst.MIN }" class="layui-input">
6123 6131 </td>
6124 6132 <td>
6125   - <input lay-verType="tips" lay-verify="required" type="text" name="${enumConst.MAX}" class="layui-input">
  6133 + <input lay-verType="tips" lay-verify="required" type="text" name="${ enumConst.MAX }" class="layui-input">
6126 6134 </td>
6127 6135 <td style="text-align: center;">
6128   - <button type="button" class="layui-btn layui-btn-primary layui-border-red ${enumActionEl.DEL_BTN_EL}">删除</button>
  6136 + <button type="button" class="layui-btn layui-btn-primary layui-border-red ${ enumActionEl.DEL_BTN_EL }">删除</button>
6129 6137 </td>
6130 6138 </tr>
6131 6139 `
6132 6140 addRowNumber++
6133   - $(`#${enumActionEl.TABLE_BODY_EL}`).append(content)
  6141 + $(`#${ enumActionEl.TABLE_BODY_EL }`).append(content)
6134 6142 if (IS_DISPLAY) {
6135 6143 // form.render(null, getRowFilter(addRowNumber))
6136 6144 form.render()
... ... @@ -6141,7 +6149,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6141 6149 * @description 创建添加记录事件
6142 6150 */
6143 6151 function createAddRowListenEvent() {
6144   - $(`#${enumActionEl.ADD_BTN_EL}`).click(() => {
  6152 + $(`#${ enumActionEl.ADD_BTN_EL }`).click(() => {
6145 6153 addRecord()
6146 6154 createDeleteRowListenEvent()
6147 6155 })
... ... @@ -6151,7 +6159,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6151 6159 * @description 创建删除行事件
6152 6160 */
6153 6161 function createDeleteRowListenEvent() {
6154   - $(`.${enumActionEl.DEL_BTN_EL}`).click((event) => {
  6162 + $(`.${ enumActionEl.DEL_BTN_EL }`).click((event) => {
6155 6163 $(event.target).parents('tr').remove()
6156 6164 })
6157 6165 }
... ... @@ -6160,19 +6168,19 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6160 6168 * @description 创建下拉联动事件
6161 6169 */
6162 6170 function createSelectLinkageListenEvent() {
6163   - form.on(`select(${enumActionEl.DEVICE_EL})`, (data) => {
  6171 + form.on(`select(${ enumActionEl.DEVICE_EL })`, (data) => {
6164 6172 const { value } = data
6165 6173 const selected = deviceList.find(item => item.id === value)
6166 6174 if (selected.deviceType === enumConst.GATEWAY) {
6167   - $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
  6175 + $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'block' })
6168 6176 getSlaveDeviceByMasterDevice(currentOrgId, selected.id)
6169 6177 } else {
6170   - $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'none' })
  6178 + $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'none' })
6171 6179 getAttrsByDevice(selected.id)
6172 6180 }
6173 6181 })
6174 6182
6175   - form.on(`select(${enumActionEl.SLAVE_DEVICE_EL})`, (data) => {
  6183 + form.on(`select(${ enumActionEl.SLAVE_DEVICE_EL })`, (data) => {
6176 6184 getAttrsByDevice(data.value)
6177 6185 })
6178 6186 }
... ... @@ -6195,16 +6203,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6195 6203 echoOrgTree(orgId)
6196 6204 const queue = []
6197 6205 if (orgId) {
6198   - queue.push(() => getDeviceByOrg(orgId))
  6206 + queue.push(getDeviceByOrg(orgId))
6199 6207 }
6200 6208 if (slaveDeviceId) {
6201   - $(`#${enumActionEl.SLAVE_DEVICE_EL}`).css({ display: 'block' })
6202   - queue.push(() => getSlaveDeviceByMasterDevice(orgId, deviceId))
6203   - queue.push(() => getAttrsByDevice(slaveDeviceId))
  6209 + $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'block' })
  6210 + queue.push(getSlaveDeviceByMasterDevice(orgId, deviceId))
  6211 + queue.push(getAttrsByDevice(slaveDeviceId))
6204 6212 } else {
6205   - queue.push(() => getAttrsByDevice(deviceId))
  6213 + queue.push(getAttrsByDevice(deviceId))
6206 6214 }
6207   - Promise.all(queue.map(item => item())).finally(() => {
  6215 + Promise.all(queue).finally(() => {
6208 6216 form.val(enumActionEl.FORM_FILTER, { slaveDeviceId, deviceId, attr, orgId })
6209 6217 })
6210 6218 }
... ... @@ -6224,7 +6232,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6224 6232 */
6225 6233 function echoOrgTree(id) {
6226 6234 const node = UseLayUi.findTreeObjectByField(treeList, id)
6227   - $(`#${enumActionEl.ORG_EL}`).find(`input[name="${enumConst.ORG_ID}"]`).parent().find('span').html(node.name)
  6235 + $(`#${ enumActionEl.ORG_EL }`).find(`input[name="${ enumConst.ORG_ID }"]`).parent().find('span').html(node.name)
6228 6236 }
6229 6237
6230 6238 async function submit(callback) {
... ... @@ -6247,7 +6255,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6247 6255
6248 6256 function createLayerForm(type) {
6249 6257 const content = `
6250   - <form class="layui-form" lay-filter="${enumActionEl.FORM_FILTER}">
  6258 + <form class="layui-form" lay-filter="${ enumActionEl.FORM_FILTER }">
6251 6259 <div style="width:400px">
6252 6260 <div class="layui-form-item">
6253 6261 <label class="layui-form-label">类型</label>
... ... @@ -6257,28 +6265,28 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6257 6265 </div>
6258 6266 </div>
6259 6267
6260   - <div id="${enumActionEl.ORG_EL}">组织</div>
  6268 + <div id="${ enumActionEl.ORG_EL }">组织</div>
6261 6269
6262   - <div class="layui-form-item" id="${enumActionEl.DEVICE_EL}">
  6270 + <div class="layui-form-item" id="${ enumActionEl.DEVICE_EL }">
6263 6271 <label class="layui-form-label">设备</label>
6264 6272 <div class="layui-input-block">
6265   - <select name="${enumConst.DEVICE_ID}" lay-verType="tips" lay-verify="required" lay-filter="${enumActionEl.DEVICE_EL}">
  6273 + <select name="${ enumConst.DEVICE_ID }" lay-verType="tips" lay-verify="required" lay-filter="${ enumActionEl.DEVICE_EL }">
6266 6274 </select>
6267 6275 </div>
6268 6276 </div>
6269 6277
6270   - <div class="layui-form-item" id="${enumActionEl.SLAVE_DEVICE_EL}" style="display: none">
  6278 + <div class="layui-form-item" id="${ enumActionEl.SLAVE_DEVICE_EL }" style="display: none">
6271 6279 <label class="layui-form-label">子设备</label>
6272 6280 <div class="layui-input-block">
6273   - <select name="${enumConst.SLAVE_DEVICE_ID}" lay-verType="tips" lay-filter="${enumActionEl.SLAVE_DEVICE_EL}">
  6281 + <select name="${ enumConst.SLAVE_DEVICE_ID }" lay-verType="tips" lay-filter="${ enumActionEl.SLAVE_DEVICE_EL }">
6274 6282 </select>
6275 6283 </div>
6276 6284 </div>
6277 6285
6278   - <div class="layui-form-item" id="${enumActionEl.ATTR_EL}">
  6286 + <div class="layui-form-item" id="${ enumActionEl.ATTR_EL }">
6279 6287 <label class="layui-form-label">属性</label>
6280 6288 <div class="layui-input-block">
6281   - <select name="${enumConst.ATTR}" lay-verType="tips" lay-verify="required" lay-filter="${enumActionEl.ATTR_EL}"></select>
  6289 + <select name="${ enumConst.ATTR }" lay-verType="tips" lay-verify="required" lay-filter="${ enumActionEl.ATTR_EL }"></select>
6282 6290 </div>
6283 6291 </div>
6284 6292 </div>
... ... @@ -6286,23 +6294,23 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6286 6294 <div>
6287 6295 <table class="layui-table" >
6288 6296 <colgroup>
6289   - ${IS_DISPLAY ? '<col width="240">' : ''}
  6297 + ${ IS_DISPLAY ? '<col width="240">' : '' }
6290 6298 <col width="240">
6291 6299 <col width="240">
6292 6300 <col>
6293 6301 </colgroup>
6294 6302 <thead>
6295 6303 <tr>
6296   - ${IS_DISPLAY ? '<th style="text-align:center">类型</th>' : ''}
  6304 + ${ IS_DISPLAY ? '<th style="text-align:center">类型</th>' : '' }
6297 6305 <th style="text-align:center">最小值(<=)</th>
6298 6306 <th style="text-align:center">最大值(>=)</th>
6299 6307 <th style="text-align:center">操作</th>
6300 6308 </tr>
6301 6309 </thead>
6302   - <tbody id="${enumActionEl.TABLE_BODY_EL}"></tbody>
  6310 + <tbody id="${ enumActionEl.TABLE_BODY_EL }"></tbody>
6303 6311 </table>
6304 6312 <div style="display:flex;justify-content:center;">
6305   - <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${enumActionEl.ADD_BTN_EL}">添加一条</button>
  6313 + <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${ enumActionEl.ADD_BTN_EL }">添加一条</button>
6306 6314 </div>
6307 6315 </div>
6308 6316 `
... ... @@ -6314,7 +6322,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6314 6322 btn: ['保存', '取消'],
6315 6323 area: IS_DISPLAY ? '1000px' : '800PX',
6316 6324 success(layero) {
6317   - $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({ 'lay-submit': '', 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER })
  6325 + $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
  6326 + 'lay-submit': '',
  6327 + 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER
  6328 + })
6318 6329 generatorOrgTreeSelect()
6319 6330 const info = getLayerBindInfo('act', type)
6320 6331 if (info) {
... ... @@ -6326,7 +6337,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6326 6337 form.render()
6327 6338 },
6328 6339 yes(index) {
6329   - form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
  6340 + form.on(`submit(${ enumActionEl.LAYER_SUBMIT_FILTER })`, data => {
6330 6341 submit(() => {
6331 6342 layer.close(index)
6332 6343 getNodeBindInfo()
... ... @@ -6347,14 +6358,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6347 6358 setTimeout(() => {
6348 6359
6349 6360 // TODO 数据交互事件
6350   - $(`#${enumInteractionType.DOWN}`).click({ type: enumInteractionType.DOWN, }, handleDownOrUpEvent);
6351   - $(`#${enumInteractionType.UP}`).click({ type: enumInteractionType.UP }, handleDownOrUpEvent);
6352   - $(`#${enumInteractionType.SINGLE}`).click({ type: enumInteractionType.SINGLE }, handleClickOrDbClick);
6353   - $(`#${enumInteractionType.DOUBLE}`).click({ type: enumInteractionType.DOUBLE }, handleClickOrDbClick);
  6361 + $(`#${ enumInteractionType.DOWN }`).click({ type: enumInteractionType.DOWN, }, handleDownOrUpEvent);
  6362 + $(`#${ enumInteractionType.UP }`).click({ type: enumInteractionType.UP }, handleDownOrUpEvent);
  6363 + $(`#${ enumInteractionType.SINGLE }`).click({ type: enumInteractionType.SINGLE }, handleClickOrDbClick);
  6364 + $(`#${ enumInteractionType.DOUBLE }`).click({ type: enumInteractionType.DOUBLE }, handleClickOrDbClick);
6354 6365 // 数据动效事件
6355   - $(`#${enumDynamicEffectType.FLASH}`).click({ type: enumDynamicEffectType.FLASH }, handleDataDynamicEffect);
6356   - $(`#${enumDynamicEffectType.DISPLAY}`).click({ type: enumDynamicEffectType.DISPLAY }, handleDataDynamicEffect);
6357   - $(`#${enumDynamicEffectType.ROTATE}`).click({ type: enumDynamicEffectType.ROTATE }, handleDataDynamicEffect);
  6366 + $(`#${ enumDynamicEffectType.FLASH }`).click({ type: enumDynamicEffectType.FLASH }, handleDataDynamicEffect);
  6367 + $(`#${ enumDynamicEffectType.DISPLAY }`).click({ type: enumDynamicEffectType.DISPLAY }, handleDataDynamicEffect);
  6368 + $(`#${ enumDynamicEffectType.ROTATE }`).click({ type: enumDynamicEffectType.ROTATE }, handleDataDynamicEffect);
6358 6369 });
6359 6370 };
6360 6371
... ... @@ -6691,9 +6702,9 @@ StyleFormatPanel.prototype.addFill = function (container) {
6691 6702 var tmpColor = mxUtils.getValue(ss.style, fillKey, null);
6692 6703 gradientPanel.style.display =
6693 6704 tmpColor != null &&
6694   - tmpColor != mxConstants.NONE &&
6695   - ss.fill &&
6696   - ss.style.shape != "image"
  6705 + tmpColor != mxConstants.NONE &&
  6706 + ss.fill &&
  6707 + ss.style.shape != "image"
6697 6708 ? ""
6698 6709 : "none";
6699 6710
... ... @@ -6755,7 +6766,7 @@ StyleFormatPanel.prototype.addFill = function (container) {
6755 6766 fillStyleSelect.style.display = ss.style.sketch == "1" ? "" : "none";
6756 6767 gradientPanel.style.display =
6757 6768 !ss.containsImage &&
6758   - (ss.style.sketch != "1" || fillStyle == "solid" || fillStyle == "auto")
  6769 + (ss.style.sketch != "1" || fillStyle == "solid" || fillStyle == "auto")
6759 6770 ? ""
6760 6771 : "none";
6761 6772 }
... ... @@ -8536,14 +8547,14 @@ StyleFormatPanel.prototype.addStroke = function (container) {
8536 8547 edgeStyleDiv.className =
8537 8548 "geSprite " +
8538 8549 (mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) ==
8539   - "vertical"
  8550 + "vertical"
8540 8551 ? "geSprite-verticalelbow"
8541 8552 : "geSprite-horizontalelbow");
8542 8553 } else if (es == "isometricEdgeStyle") {
8543 8554 edgeStyleDiv.className =
8544 8555 "geSprite " +
8545 8556 (mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) ==
8546   - "vertical"
  8557 + "vertical"
8547 8558 ? "geSprite-verticalisometric"
8548 8559 : "geSprite-horizontalisometric");
8549 8560 } else {
... ... @@ -10124,7 +10135,7 @@ class UseLayUi {
10124 10135 return result === '[object Function]' || result === '[object AsyncFunction]'
10125 10136 }
10126 10137
10127   - static dynamicAttr = (attr, value) => value ? `${attr}="${value}"` : ''
  10138 + static dynamicAttr = (attr, value) => value ? `${ attr }="${ value }"` : ''
10128 10139
10129 10140 /**
10130 10141 * @description format data source to tree structure
... ... @@ -10193,9 +10204,9 @@ class UseLayUi {
10193 10204 let { renderFn } = options
10194 10205 renderFn = renderFn || ((record) => {
10195 10206 if (typeof record === 'object') {
10196   - return `<option value="${record[valueField]}" ${record.disabled ? 'disabled=""' : ''}>${record[labelField]}</option>`
  10207 + return `<option value="${ record[valueField] }" ${ record.disabled ? 'disabled=""' : '' }>${ record[labelField] }</option>`
10197 10208 } else {
10198   - return `<option value="${record}">${record}</option>`
  10209 + return `<option value="${ record }">${ record }</option>`
10199 10210 }
10200 10211 })
10201 10212 const optionsList = dataSource.map(renderFn)
... ... @@ -10209,8 +10220,8 @@ class UseLayUi {
10209 10220 */
10210 10221 static createSingleUseFormItem(content, props = '') {
10211 10222 return `
10212   - <div class="layui-form" ${props}>
10213   - ${content}
  10223 + <div class="layui-form" ${ props }>
  10224 + ${ content }
10214 10225 </div>
10215 10226 `
10216 10227 }
... ... @@ -10272,7 +10283,7 @@ class UseLayUi {
10272 10283 return dataSource.map(record => renderFn(record))
10273 10284 }
10274 10285 return formatDataSource(dataSource).map(record => {
10275   - return `<option value="${record[valueField]}" ${record.disable ? 'disabled=""' : ''}>${record[labelField]}</option>`
  10286 + return `<option value="${ record[valueField] }" ${ record.disable ? 'disabled=""' : '' }>${ record[labelField] }</option>`
10276 10287 })
10277 10288 }
10278 10289
... ... @@ -10283,7 +10294,7 @@ class UseLayUi {
10283 10294 }
10284 10295
10285 10296 if (layFilter) {
10286   - form.on(`select(${layFilter})`, (data) => {
  10297 + form.on(`select(${ layFilter })`, (data) => {
10287 10298 if (onClick && this.isFunction(onClick)) {
10288 10299 onClick(data)
10289 10300 }
... ... @@ -10291,11 +10302,11 @@ class UseLayUi {
10291 10302 }
10292 10303
10293 10304 let template = `
10294   - <div class="layui-form-item ${className}">
10295   - <label class="layui-form-label">${label}</label>
  10305 + <div class="layui-form-item ${ className }">
  10306 + <label class="layui-form-label">${ label }</label>
10296 10307 <div class="layui-input-block">
10297   - <select name="${layFilter}" ${this.dynamicAttr('lay-filter', layFilter)} ${this.dynamicAttr('lay-verify', layVerify)}>
10298   - ${generateOptionTemplate(dataSource)}
  10308 + <select name="${ layFilter }" ${ this.dynamicAttr('lay-filter', layFilter) } ${ this.dynamicAttr('lay-verify', layVerify) }>
  10309 + ${ generateOptionTemplate(dataSource) }
10299 10310 </select>
10300 10311 </div>
10301 10312 </div>`
... ... @@ -10357,18 +10368,18 @@ class UseLayUi {
10357 10368 let { data = [], click, onReady } = treeProps
10358 10369
10359 10370 let template = `
10360   - <div class="layui-form-item ${CLASS_NAME} ${className}">
10361   - <label class="layui-form-label">${label}</label>
  10371 + <div class="layui-form-item ${ CLASS_NAME } ${ className }">
  10372 + <label class="layui-form-label">${ label }</label>
10362 10373 <div class="layui-input-block">
10363   - <div class="layui-unselect layui-form-select ${SELECT_CLS}">
  10374 + <div class="layui-unselect layui-form-select ${ SELECT_CLS }">
10364 10375 <div class="layui-select-title">
10365 10376 <span class="layui-input layui-unselect">请选择</span>
10366   - <input type="hidden" name="${layFilter}">
  10377 + <input type="hidden" name="${ layFilter }">
10367 10378 <i class="layui-edge"></i>
10368 10379 </div>
10369 10380 <dl class="layui-anim layui-anim-upbit">
10370 10381 <dd>
10371   - <ul id="${layFilter}"></ul>
  10382 + <ul id="${ layFilter }"></ul>
10372 10383 </dd>
10373 10384 </dl>
10374 10385 </div>
... ... @@ -10386,7 +10397,7 @@ class UseLayUi {
10386 10397 $(elem)
10387 10398 .find('.layui-form-select').removeClass('layui-form-selected').end()
10388 10399 .find(".layui-select-title span").html(title).end()
10389   - .find(`input:hidden[name='${layFilter}']`).val(id);
  10400 + .find(`input:hidden[name='${ layFilter }']`).val(id);
10390 10401 }
10391 10402
10392 10403 // init mount
... ... @@ -10399,7 +10410,7 @@ class UseLayUi {
10399 10410 tree.render({
10400 10411 ...treeProps,
10401 10412 ...(autoFormatDataSource ? { data: UseLayUi.formatTreeDataSource(data, customSetTree, valueField, labelField, childrenField) } : {}),
10402   - elem: $(elem).find(`#${layFilter}`),
  10413 + elem: $(elem).find(`#${ layFilter }`),
10403 10414 click(node) {
10404 10415 setValue(node.data)
10405 10416 if (UseLayUi.isFunction(click)) click(node)
... ... @@ -10407,10 +10418,10 @@ class UseLayUi {
10407 10418 })
10408 10419
10409 10420 // focus
10410   - $(`.${SELECT_CLS}`)
  10421 + $(`.${ SELECT_CLS }`)
10411 10422 .on("click", ".layui-select-title", function (e) {
10412 10423 $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
10413   - $(this).parents(`.${SELECT_CLS}`).toggleClass("layui-form-selected");
  10424 + $(this).parents(`.${ SELECT_CLS }`).toggleClass("layui-form-selected");
10414 10425 layui.stope(e);
10415 10426 })
10416 10427 .on('click', '.layui-anim', (e) => {
... ... @@ -10428,7 +10439,7 @@ class UseLayUi {
10428 10439 if (!parentNode) return
10429 10440 const showClose = UseLayUi.isInNode(parentNode, target, true)
10430 10441 if (showClose) return
10431   - $(`.${SELECT_CLS}`).removeClass("layui-form-selected")
  10442 + $(`.${ SELECT_CLS }`).removeClass("layui-form-selected")
10432 10443 });
10433 10444
10434 10445 if (UseLayUi.isFunction(onReady)) {
... ... @@ -10465,21 +10476,21 @@ class UseLayUi {
10465 10476 function createOptions(dataSource) {
10466 10477 return dataSource.map((record) => {
10467 10478 return `<input
10468   - type="checkbox" lay-skin="${laySkin}"
10469   - ${UseLayUi.dynamicAttr('name', record[valueField])}
10470   - ${UseLayUi.dynamicAttr('title', record[labelField])}
10471   - ${UseLayUi.dynamicAttr('lay-filter', layFilter)}
10472   - ${UseLayUi.dynamicAttr('lay-verify', layVerify)}
10473   - ${UseLayUi.dynamicAttr('checked', record[checkedField])}
  10479 + type="checkbox" lay-skin="${ laySkin }"
  10480 + ${ UseLayUi.dynamicAttr('name', record[valueField]) }
  10481 + ${ UseLayUi.dynamicAttr('title', record[labelField]) }
  10482 + ${ UseLayUi.dynamicAttr('lay-filter', layFilter) }
  10483 + ${ UseLayUi.dynamicAttr('lay-verify', layVerify) }
  10484 + ${ UseLayUi.dynamicAttr('checked', record[checkedField]) }
10474 10485 >`
10475 10486 })
10476 10487 }
10477 10488
10478 10489 let template = `
10479   - <div class="layui-form-item ${CLASS_NAME}" >
10480   - <label class="layui-form-label">${label}</label>
  10490 + <div class="layui-form-item ${ CLASS_NAME }" >
  10491 + <label class="layui-form-label">${ label }</label>
10481 10492 <div class="layui-input-block">
10482   - ${createOptions(dataSource).join('')}
  10493 + ${ createOptions(dataSource).join('') }
10483 10494 </div>
10484 10495 </div>
10485 10496 `
... ... @@ -10489,7 +10500,7 @@ class UseLayUi {
10489 10500 if (!elem) return template
10490 10501 $(elem).empty()
10491 10502 $(elem).append(template)
10492   - form.on(`checkbox(${layFilter})`, (data) => {
  10503 + form.on(`checkbox(${ layFilter })`, (data) => {
10493 10504 onChange && (onChange(data))
10494 10505 })
10495 10506 form.render()
... ... @@ -10572,6 +10583,64 @@ function to(promise, errorExt) {
10572 10583 }
10573 10584
10574 10585
  10586 +class EventCenter {
  10587 +
  10588 + /**
  10589 + * @description 调度中心
  10590 + * @type {Map<string, Function[]>}
  10591 + */
  10592 + eventStack
  10593 +
  10594 + /**
  10595 + * @description 实例化EventCenter
  10596 + */
  10597 + constructor() {
  10598 + this.eventStack = new Map()
  10599 + }
  10600 +
  10601 + /**
  10602 + * @description 监听事件
  10603 + * @param {string | number} eventName - 事件名
  10604 + * @param {Function} callback - 事件处理方法
  10605 + */
  10606 + on(eventName, callback) {
  10607 + if (this.eventStack.has(eventName)) {
  10608 + this.eventStack.get(eventName).push(callback)
  10609 + return
  10610 + }
  10611 + this.eventStack.set(eventName, [callback])
  10612 + }
  10613 +
  10614 + /**
  10615 + * @description 触发事件
  10616 + * @param {string | number} eventName - 事件名
  10617 + * @param {any} args - 参数
  10618 + */
  10619 + emit(eventName, ...args) {
  10620 + if (this.eventStack.has(eventName))
  10621 + this.eventStack.get(eventName).forEach(fn => fn(...args))
  10622 +
  10623 + }
  10624 +
  10625 + /**
  10626 + * @description 移除事件
  10627 + * @param {string} eventName - 时间名
  10628 + */
  10629 + off(eventName) {
  10630 + if (this.eventStack.has(eventName))
  10631 + this.eventStack.delete(eventName)
  10632 + }
  10633 +
  10634 + /**
  10635 + * @description 清除事件
  10636 + */
  10637 + clean(eventName) {
  10638 + this.eventStack.clear()
  10639 + }
  10640 +
  10641 +
  10642 +}
  10643 +
10575 10644 class Ws {
10576 10645 /**
10577 10646 * @description url 连接地址
... ... @@ -10584,6 +10653,36 @@ class Ws {
10584 10653 protocols
10585 10654
10586 10655 /**
  10656 + * @description socket open时 拓展
  10657 + * @type {Function}
  10658 + * @param {Ws} instance - 实例
  10659 + */
  10660 + onopenCallback
  10661 +
  10662 + /**
  10663 + * @description socket error时 拓展
  10664 + * @type {Function}
  10665 + * @param {Ws} instance - 实例
  10666 + */
  10667 + onerrorCallback
  10668 +
  10669 + /**
  10670 + * @description socket close时 拓展
  10671 + * @type {Function}
  10672 + * @param {Ws} instance - 实例
  10673 + */
  10674 + oncloseCallback
  10675 +
  10676 + /**
  10677 + * @description socket message时 拓展
  10678 + * @type {Function}
  10679 + * @param {object} data - event.data message数据
  10680 + * @param {MessageEvent} event - event 事件对象
  10681 + * @param {Ws} instance - Ws 实例
  10682 + */
  10683 + onmessageCallback
  10684 +
  10685 + /**
10587 10686 * @description socket 实例
10588 10687 * @type {WebSocket}
10589 10688 */
... ... @@ -10613,13 +10712,28 @@ class Ws {
10613 10712 errorStack = []
10614 10713
10615 10714 /**
  10715 + * @description 实例
  10716 + */
  10717 + static instance
  10718 +
  10719 + /**
10616 10720 * @description 创建websocket实例
10617   - * @params {string} url - 连接路径
10618   - * @params {string} protocols - 协议
  10721 + * @param {string} option.url - 连接路径
  10722 + * @param {string} [option.protocols] option.protocols - 协议
  10723 + * @param {Function} [option.onopenCallback] option.onopenCallback - socket open时 拓展
  10724 + * @param {Function} [option.onerrorCallback] option.onerrorCallback - socket error时 拓展
  10725 + * @param {Function} [option.oncloseCallback] option.oncloseCallback - socket close时 拓展
  10726 + * @param {Function} [option.onmessageCallback] option.onmessageCallback - socket message时 拓展
10619 10727 */
10620   - constructor(url, protocols) {
  10728 + constructor(option) {
  10729 + const { url, protocols, onopenCallback, onerrorCallback, oncloseCallback, onmessageCallback } = option
  10730 + if (!url) throw new Error('param url in Ws constructor is required')
10621 10731 this.url = url
10622 10732 this.protocols = protocols
  10733 + this.onopenCallback = onopenCallback
  10734 + this.onerrorCallback = onerrorCallback
  10735 + this.oncloseCallback = oncloseCallback
  10736 + this.onmessageCallback = onmessageCallback
10623 10737 this.createWs()
10624 10738 }
10625 10739
... ... @@ -10639,12 +10753,12 @@ class Ws {
10639 10753 */
10640 10754 onopen() {
10641 10755 this.ws.onopen = () => {
10642   - console.log(this.ws, 'onopen')
10643 10756 this.errorStack.forEach(message => {
10644 10757 this.send(message)
10645 10758 })
10646 10759 this.errorStack = []
10647 10760 this.isReconnectionLoading = false
  10761 + if (typeof this.onopenCallback === 'function') this.onopenCallback(this)
10648 10762 }
10649 10763 }
10650 10764
... ... @@ -10653,9 +10767,9 @@ class Ws {
10653 10767 */
10654 10768 onerror() {
10655 10769 this.ws.onerror = (err) => {
10656   - console.log(err, 'onerror')
10657 10770 this.reconnection()
10658 10771 this.isReconnectionLoading = false
  10772 + if (typeof this.onerrorCallback === 'function') this.onerrorCallback(this)
10659 10773 }
10660 10774 }
10661 10775
... ... @@ -10664,24 +10778,27 @@ class Ws {
10664 10778 */
10665 10779 onclose() {
10666 10780 this.ws.onclose = () => {
10667   - console.log('onclose')
10668 10781 if (this.isCustomClose) return
10669 10782
10670 10783 this.reconnection()
10671 10784 this.isReconnectionLoading = false
  10785 +
  10786 + if (typeof this.oncloseCallback === 'function') this.oncloseCallback(this)
10672 10787 }
10673 10788 }
10674 10789
10675 10790 /**
10676 10791 * @description 接受消息
10677 10792 */
10678   - async onmessage() {
  10793 + onmessage() {
10679 10794 this.ws.onmessage = (event) => {
10680 10795 try {
10681 10796 const data = JSON.parse(event.data)
10682   - this.eventCenter.emit(data.type, data.data)
  10797 + if (typeof this.onmessageCallback === 'function') this.onmessageCallback(data, event, this)
  10798 +
10683 10799 } catch (error) {
10684   - console.log(error, 'error')
  10800 + // throw new Error(error)
  10801 + console.error(error)
10685 10802 }
10686 10803 }
10687 10804 }
... ... @@ -10696,7 +10813,7 @@ class Ws {
10696 10813 clearTimeout(this.timeId)
10697 10814 this.timeId = setTimeout(() => {
10698 10815 this.createWs()
10699   - }, 10000)
  10816 + }, 60000)
10700 10817 }
10701 10818
10702 10819 /**
... ... @@ -10734,93 +10851,290 @@ class Ws {
10734 10851 this.close()
10735 10852 this.ws = null
10736 10853 this.errorStack = null
10737   - this.eventCenter = null
  10854 + }
  10855 +
  10856 + /**
  10857 + * @description 单例模式
  10858 + * @param {string} option.url - 连接路径
  10859 + * @param {string} [option.protocols] option.protocols - 协议
  10860 + * @param {Function} [option.onopenCallback] option.onopenCallback - socket open时 拓展
  10861 + * @param {Function} [option.onerrorCallback] option.onerrorCallback - socket error时 拓展
  10862 + * @param {Function} [option.oncloseCallback] option.oncloseCallback - socket close时 拓展
  10863 + * @param {Function} [option.onmessageCallback] option.onmessageCallback - socket message时 拓展
  10864 + * @return {Ws} instance
  10865 + */
  10866 + static getInstance(option) {
  10867 + if (!this.instance) {
  10868 + this.instance = new Ws(option)
  10869 + }
  10870 + return this.instance
10738 10871 }
10739 10872 }
10740 10873
  10874 +/**
  10875 + * @description 切换页面时触发 /src/main/webapp/js/diagramly/Pages.js row: 461
  10876 + * @param editorUi
  10877 + * @param currentPage
  10878 + */
  10879 +function previewAction(editorUi, currentPage) {
  10880 + if (!editorUi.editor.graph.isLightboxView()) return
  10881 + DispatchCenter.getInstance(editorUi, currentPage)
10741 10882
10742   -class EventCenter {
  10883 + /**
  10884 + * @description 编辑模式下editor对象的editable为true
  10885 + * @param editorUi
  10886 + * @return {boolean}
  10887 + */
  10888 + function isPreviewMode(editorUi = {}) {
  10889 + const { editor: { editable } = {} } = editorUi
  10890 + return !!editable
  10891 + }
  10892 +}
  10893 +
  10894 +
  10895 +/**
  10896 + * @description 调度中心
  10897 + */
  10898 +class DispatchCenter {
10743 10899
10744 10900 /**
10745   - * @description 调度中心
10746   - * @type {Map<string, Function[]}
  10901 + * @description 节点映射
  10902 + * @type {Map<string, object>}
10747 10903 */
10748   - eventStack
  10904 + nodeMapping
10749 10905
10750 10906 /**
10751   - * @description
  10907 + * @description 当前页信息
10752 10908 */
10753   - constructor() {
10754   - this.eventStack = new Map()
10755   - }
  10909 + currentPage
10756 10910
10757 10911 /**
10758   - * @description 监听事件
  10912 + * @description 当前页中的所有cell
10759 10913 */
10760   - on(eventName, callback) {
10761   - if (this.eventStack.has(eventName)) {
10762   - this.eventStack.get(eventName).push(callback)
10763   - return
10764   - }
10765   - this.eventStack.set(eventName, [callback])
10766   - }
  10914 + contentAllCell
10767 10915
10768 10916 /**
10769   - * @description 触发事件
  10917 + * @description 图源信息
10770 10918 */
10771   - emit(eventName, ...args) {
10772   - if (this.eventStack.has(eventName))
10773   - this.eventStack.get(eventName).forEach(fn => fn(...args))
  10919 + graph
10774 10920
10775   - }
  10921 + /**
  10922 + * @description socket instance
  10923 + * @type {Ws}
  10924 + */
  10925 + socket
10776 10926
10777 10927 /**
10778   - * @description 移除事件
  10928 + * @description 事件总线
  10929 + * @type {EventCenter}
10779 10930 */
10780   - off(eventName) {
10781   - if (this.eventStack.has(eventName))
10782   - this.eventStack.delete(eventName)
  10931 + eventBus
  10932 +
  10933 + /**
  10934 + * @description 当前实例
  10935 + */
  10936 + static instance
  10937 +
  10938 + /**
  10939 + * @description 原页面ID 原页面content id
  10940 + */
  10941 + static rawContentId
  10942 +
  10943 + constructor(editorUi, currentPage) {
  10944 + this.nodeMapping = new Map()
  10945 + this.init(editorUi, currentPage)
10783 10946 }
10784 10947
10785 10948 /**
10786   - * @description 清除事件
  10949 + * @description 初始化实例
  10950 + * @param editorUi
  10951 + * @param currentPage
10787 10952 */
10788   - clean(eventName) {
10789   - this.eventStack.clear()
  10953 + init(editorUi, currentPage) {
  10954 + this.createEventBus()
  10955 + this.saveContentInfo(editorUi, currentPage)
  10956 + // this.createGraphEventListener()
  10957 + this.connectSocket()
  10958 + this.getContentDataNode()
10790 10959 }
10791 10960
  10961 + /**
  10962 + * @description 建立socket连接
  10963 + */
  10964 + connectSocket() {
  10965 + const GLOBAL_TOKEN = JSON.parse(localStorage.getItem("UNDEFINED__DEVELOPMENT__2.7.1__COMMON__LOCAL__KEY__")).value.JWT_TOKEN.value
10792 10966
10793   -}
  10967 + // const { host, href } = location
  10968 + // const reg = /^https/
  10969 + // const wsUrl = `${reg.test(href) ? 'wss' : 'ws'}://${host}/api/ws/plugins/telemetry?token=${GLOBAL_TOKEN}`
10794 10970
  10971 + const wsUrl = `ws://47.99.141.212:8080/api/ws/plugins/telemetry?token=${ GLOBAL_TOKEN }`
  10972 + // const wsUrl = `ws://192.168.10.115:8080/api/ws/plugins/telemetry?token=${GLOBAL_TOKEN}`
10795 10973
10796   -// TODO preview action
10797   -function previewAction() {
  10974 + this.socket = Ws.getInstance({ url: wsUrl, onmessageCallback: this.socketOnmessage })
  10975 + }
10798 10976
10799   - setTimeout(() => {
10800   - console.dir(GLOBAL_EDITOR_UI)
10801   - }, 5000);
  10977 + /**
  10978 + * @description 处理webSocket消息
  10979 + * @param message
  10980 + * @param event
  10981 + * @param ws
  10982 + */
  10983 + socketOnmessage(message, event, ws) {
  10984 + const { subscriptionId, data } = message
  10985 + DispatchCenter.instance.publishEvent(subscriptionId, data)
  10986 + }
  10987 +
  10988 + /**
  10989 + * @description 创建事件中心
  10990 + */
  10991 + createEventBus() {
  10992 + this.eventBus = new EventCenter()
  10993 + }
10802 10994
10803   - function getContentInfo() {
  10995 + /**
  10996 + * @description 创建图层事件监听器
  10997 + */
  10998 + createGraphEventListener() {
  10999 + console.log(mxEvent)
  11000 + // this.graph.addListener(mxEvent.MOUSE_DOWN, (sender, event) => {
  11001 + // console.log('down')
  11002 + // console.log(event)
  11003 + // console.log(sender)
  11004 + // })
  11005 + // this.graph.addListener(mxEvent.MOUSE_UP, (sender, event) => {
  11006 + // console.log('up')
  11007 + // console.log(event)
  11008 + // console.log(sender)
  11009 + // })
  11010 + console.log(this.contentAllCell)
  11011 + const node = this.contentAllCell.find(item => item.id === "xu8fz6ypefe3Lfq39emV-10")
  11012 + console.log(node)
  11013 + // node.addListener(mxEvent.CLICK, (sender, event) => {
  11014 + // console.log('click')
  11015 + // console.log(event)
  11016 + // console.log(sender)
  11017 + // })
  11018 + // this.graph.addListener(mxEvent.DOUBLE_CLICK, (sender, event) => {
  11019 + // console.log('double click')
  11020 + // console.log(event)
  11021 + // console.log(sender)
  11022 + // })
  11023 + }
10804 11024
  11025 + /**
  11026 + * @description 保存部分页面信息到实例上
  11027 + * @param editorUi
  11028 + * @param currentPage
  11029 + */
  11030 + saveContentInfo(editorUi, currentPage) {
  11031 + const editor = editorUi.editor
  11032 + this.graph = editor.graph
  11033 + this.currentPage = currentPage
  11034 + this.contentAllCell = this.graph.getDefaultParent().children
10805 11035 }
10806 11036
10807   - const sendMsgTemplate = {
10808   - tsSubCmds: [
10809   - {
  11037 + /**
  11038 + * @description 获取页面绑定的节点信息
  11039 + */
  11040 + async getContentDataNode() {
  11041 + const { node: { id } = {} } = this.currentPage
  11042 + if (!id) return
  11043 + const [err, res] = await to(ConfigurationNodeApi.getConfigurationInfo('CONTENT', id))
  11044 + const { dataSources } = res
  11045 + const sendMsg = {
  11046 + tsSubCmds: this.generatorDataSourceMapping(dataSources)
  11047 + }
  11048 + this.sendMessageToGetRealTimeData(sendMsg)
  11049 + }
  11050 +
  11051 + /**
  11052 + * @description 发送消息去获取实时数据
  11053 + */
  11054 + sendMessageToGetRealTimeData(message) {
  11055 + if (typeof message !== 'string') message = JSON.stringify(message)
  11056 + this.socket.send(message)
  11057 + }
  11058 +
  11059 + /**
  11060 + * @description 生成节点映射表
  11061 + * @param dataSources
  11062 + * @return {{cmdId: number, entityType: string, keys: *, scope: string, entityId: *}[]}
  11063 + */
  11064 + generatorDataSourceMapping(dataSources = []) {
  11065 + return dataSources.map((datum, eventName) => {
  11066 + const { deviceId, attr } = datum
  11067 + const sendMsgTemplate = {
10810 11068 entityType: "DEVICE",
10811   - entityId: "a5ef5840-d68a-11ec-9c71-a9680487d1e0",
  11069 + entityId: deviceId,
10812 11070 scope: "LATEST_TELEMETRY",
10813   - cmdId: 1
  11071 + cmdId: eventName,
  11072 + keys: attr
10814 11073 }
10815   - ]
  11074 +
  11075 + this.subscribeDataSources(datum, eventName, attr)
  11076 + this.nodeMapping.set(deviceId, sendMsgTemplate)
  11077 + return sendMsgTemplate
  11078 + })
10816 11079 }
10817 11080
10818   - const GLOBAL_TOKEN = JSON.parse(localStorage.getItem("UNDEFINED__DEVELOPMENT__2.7.1__COMMON__LOCAL__KEY__")).value.JWT_TOKEN.value
  11081 + /**
  11082 + * @description 分发事件
  11083 + */
  11084 + publishEvent(eventName, data) {
  11085 + Object.keys(data).forEach(() => {
  11086 + this.eventBus.emit(eventName, data)
  11087 + })
  11088 + }
10819 11089
10820   - const wsUrl = `ws://192.168.10.115:8080/api/ws/plugins/telemetry?token=${GLOBAL_TOKEN}`
  11090 + /**
  11091 + * @description 订阅数据源
  11092 + * @param datum
  11093 + * @param eventName
  11094 + * @param key
  11095 + */
  11096 + subscribeDataSources(datum, eventName, key) {
  11097 + const node = this.contentAllCell.find(item => item.id === datum.nodeId)
  11098 + this.eventBus.on(eventName, (message) => {
  11099 + this.updatePage(node, () => {
  11100 + const [[timespan, value]] = message[key]
  11101 + node.setValue(value)
  11102 + })
  11103 + })
  11104 + }
10821 11105
10822   - const websocket = new Ws(wsUrl)
  11106 + /**
  11107 + * @description 更新页面
  11108 + * @param node
  11109 + * @param callback
  11110 + */
  11111 + updatePage(node, callback) {
  11112 + this.graph.getModel().beginUpdate()
  11113 + try {
  11114 + callback()
  11115 + this.graph.insertVertex(node, null);
  11116 + } finally {
  11117 + this.graph.getModel().endUpdate()
  11118 + }
  11119 + }
  11120 +
  11121 +
  11122 + /**
  11123 + * @description 返回 DispatchCenter 实例 当contentID变化时重新创建实例
  11124 + * @param editorUi
  11125 + * @param currentPage
  11126 + * @return {*}
  11127 + */
  11128 + static getInstance(editorUi, currentPage = {}) {
  11129 + const { node: { id } = {} } = currentPage
  11130 + if (!id) return
  11131 + if (!DispatchCenter.instance || DispatchCenter.rawContentId !== id) {
  11132 + DispatchCenter.instance = new DispatchCenter(editorUi, currentPage)
  11133 + DispatchCenter.rawContentId = id
  11134 + }
  11135 +
  11136 + return DispatchCenter.instance
  11137 + }
10823 11138
10824 11139 }
10825 11140
10826   -previewAction()
... ...
... ... @@ -10,7 +10,7 @@
10 10
11 11 .override__title--default {
12 12 width: 100% !important;
13   - padding: 6px 0px 6px 6px !important;
  13 + padding: 6px 0 6px 6px !important;
14 14 border-top: 1px solid #dadce0 !important
15 15 }
16 16
... ... @@ -50,6 +50,7 @@
50 50 .data-panel__select .layui-form-label {
51 51 padding: 9px 10px 9px 0;
52 52 width: 50px !important;
  53 + box-sizing: border-box;
53 54 }
54 55
55 56 .data-panel__select .layui-input-block {
... ... @@ -72,6 +73,7 @@
72 73 .data-source__org--override .layui-form-label {
73 74 width: 50px !important;
74 75 padding: 9px 10px 9px 0;
  76 + box-sizing: border-box;
75 77
76 78 }
77 79
... ... @@ -87,9 +89,6 @@
87 89
88 90 /* ================ Tree Select ================== */
89 91
90   -/*.things-kit-tree-select {*/
91   -/* width: 100%;*/
92   -/*}*/
93 92
94 93 .things-kit-tree-select__tree .layui-select-title span {
95 94 line-height: 38px;
... ... @@ -103,25 +102,9 @@
103 102 background-color: #fff;
104 103 }
105 104
106   -
107   -/*.things-kit-tree-select .layui-form-label {*/
108   -/* flex: auto;*/
109   -/* max-width: 80px;*/
110   -/* padding: 9px 0;*/
111   -/* width: auto;*/
112   -/* border: none;*/
113   -/*}*/
114   -
115   -/*.things-kit-tree-select {*/
116   -/* display: flex;*/
117   -/* margin-bottom: 0;*/
118   -/*}*/
119   -
120   -/*.things-kit-tree-select .layui-input-block {*/
121   -/* margin-left: 0;*/
122   -/* padding: 0 10px;*/
123   -/* flex: auto;*/
124   -/*}*/
  105 +.things-kit-tree-select__tree .layui-input {
  106 + border-width: 2px;
  107 +}
125 108
126 109 /* ============== checkbox ===================== */
127 110
... ...