简柏林 / thingskit-scada · Commits

Commit 460a7bc42fa586c37a0173a1be98b640ff9c6dc1

Authored by ww
1 parent 369824e2

perf: change params setting flow

Inline Side-by-side
Showing 3 changed files with 228 additions and 65 deletions
  1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659059076466" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2250" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
  2 +</style></defs><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64zM512 832.352c-26.496 0-48-21.504-48-48s21.504-48 48-48 48 21.504 48 48S538.496 832.352 512 832.352zM600.576 505.184C572.736 532.992 544 561.728 544 587.552l0 54.112c0 17.664-14.336 32-32 32s-32-14.336-32-32l0-54.112c0-52.352 40-92.352 75.328-127.648C581.216 434.016 608 407.264 608 385.92c0-53.344-43.072-96.736-96-96.736-53.824 0-96 41.536-96 94.56 0 17.664-14.336 32-32 32s-32-14.336-32-32c0-87.424 71.776-158.56 160-158.56s160 72.096 160 160.736C672 433.792 635.68 470.08 600.576 505.184z" p-id="2251" fill="#dbdbdb"></path></svg>
\ No newline at end of file
... ...
... ... @@ -6425,7 +6425,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6425 6425 }
6426 6426
6427 6427 const sendInstructionWay = {
6428   - ONE_WAR: 'oneway',
  6428 + ONE_WAY: 'oneway',
6429 6429 TWO_WAY: 'twoway',
6430 6430 }
6431 6431
... ... @@ -6506,8 +6506,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6506 6506 <td>
6507 6507 <form action="" style="display: flex">
6508 6508 <div class="override__radio-default">
6509   - <input id="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAR}" type="radio" name="${enumConst.WAY}" lay-ignore value="${sendInstructionWay.ONE_WAR}" title="单向" checked="">
6510   - <label for="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAR}" class="override__radio-label">单向</label>
  6509 + <input id="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAY}" type="radio" name="${enumConst.WAY}" lay-ignore value="${sendInstructionWay.ONE_WAY}" title="单向" checked="">
  6510 + <label for="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAY}" class="override__radio-label">单向</label>
6511 6511 </div>
6512 6512 <div class="override__radio-default">
6513 6513 <input id="${getRowFilter(addRowNumber)}${sendInstructionWay.TWO_WAY}" type="radio" name="${enumConst.WAY}" lay-ignore value="${sendInstructionWay.TWO_WAY}" title="双向">
... ... @@ -6797,6 +6797,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6797 6797 ACTION: 'actionType',
6798 6798 PAGE_VALUE: 'pageValue',
6799 6799 LINK_VALUE: 'linkValue',
  6800 +
  6801 + /**
  6802 + * @description 下发指令
  6803 + */
  6804 + COMMAND: 'command',
  6805 +
  6806 + /**
  6807 + * @description 属性占位符
  6808 + */
  6809 + ATTR_PLACEHOLDER: 'attrPlaceholder',
  6810 +
  6811 + WAY: 'way'
6800 6812 }
6801 6813
6802 6814 /**
... ... @@ -6809,6 +6821,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6809 6821 [enumActionType.LINK]: enumConst.LINK_VALUE,
6810 6822 }
6811 6823
  6824 + const enumWayType = {
  6825 + ONE_WAY: 'oneway',
  6826 + TWO_WAY: 'twoway'
  6827 + }
  6828 +
6812 6829 const enumActionEl = {
6813 6830 /**
6814 6831 * @description 表单 lay-filter
... ... @@ -6834,6 +6851,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6834 6851 * @description layer submit filter
6835 6852 */
6836 6853 LAYER_SUBMIT_FILTER: 'dynamicLinkLayerFilter',
  6854 +
  6855 + /**
  6856 + * @description JSON 编辑器容器
  6857 + */
  6858 + EDITOR_CONTAINER: 'editorContainerEL',
  6859 +
  6860 + /**
  6861 + * @description JSON 编辑器
  6862 + */
  6863 + EDITOR: 'EDITOR',
  6864 +
  6865 + WAY_SELECT: 'dynamicWaySelectEl'
6837 6866 }
6838 6867
6839 6868 /**
... ... @@ -6851,15 +6880,33 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6851 6880 const val = {
6852 6881 [enumConst.ACTION]: content.type,
6853 6882 [enumGetValue[content.type]]: content.value,
  6883 + [enumConst.WAY]: content[enumConst.WAY]
6854 6884 }
6855   - if (content.type === enumActionType.PAGE) {
6856   - $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
  6885 + controlFormDisplay(content.type)
  6886 + form.val(enumActionEl.FORM_FILTER, val)
  6887 + }
  6888 +
  6889 + /**
  6890 + * @description 控制form
  6891 + * @param {enumActionType} value
  6892 + */
  6893 + function controlFormDisplay(value) {
  6894 + if (value === enumActionType.PAGE) {
6857 6895 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
6858   - } else if (content.type === enumActionType.PARAMS_SETTING) {
  6896 + $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
  6897 + $(`#${enumActionEl.EDITOR_CONTAINER}`).css({ display: 'none' })
  6898 + $(`#${enumActionEl.WAY_SELECT}`).css({ display: 'none' })
  6899 + } else if (value === enumActionType.LINK) {
6859 6900 $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
  6901 + $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'block' })
  6902 + $(`#${enumActionEl.EDITOR_CONTAINER}`).css({ display: 'none' })
  6903 + $(`#${enumActionEl.WAY_SELECT}`).css({ display: 'none' })
  6904 + } else if (value === enumActionType.PARAMS_SETTING) {
6860 6905 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
  6906 + $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
  6907 + $(`#${enumActionEl.EDITOR_CONTAINER}`).css({ display: 'flex' })
  6908 + $(`#${enumActionEl.WAY_SELECT}`).css({ display: 'block' })
6861 6909 }
6862   - form.val(enumActionEl.FORM_FILTER, val)
6863 6910 }
6864 6911
6865 6912 /**
... ... @@ -6867,6 +6914,15 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6867 6914 */
6868 6915 async function submit(callback) {
6869 6916 const formVal = form.val(enumActionEl.FORM_FILTER)
  6917 + const isParamsSetting = formVal[enumConst.ACTION] === enumActionType.PARAMS_SETTING
  6918 + if (isParamsSetting) {
  6919 + if (!isJson(formVal[enumConst.COMMAND])) {
  6920 + console.log()
  6921 + UseLayUi.topErrorMsg('命令配置存在错误')
  6922 + return
  6923 + }
  6924 + }
  6925 +
6870 6926 const data = {
6871 6927 type: event.data.type,
6872 6928 configurationId,
... ... @@ -6877,6 +6933,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6877 6933 content: {
6878 6934 type: formVal[enumConst.ACTION],
6879 6935 value: formVal[enumGetValue[formVal[enumConst.ACTION]]],
  6936 + ...(isParamsSetting ? {
  6937 + [enumConst.COMMAND]: formVal[enumConst.COMMAND],
  6938 + [enumConst.WAY]: formVal[enumConst.WAY]
  6939 + } : {}),
6880 6940 },
6881 6941 }
6882 6942 await to(autoSaveGraphInfo())
... ... @@ -6912,16 +6972,53 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6912 6972 function generatorEventListen() {
6913 6973 form.on(`select(${enumActionEl.ACTION_SELECT_FILTER})`, (data) => {
6914 6974 const { value } = data
6915   - if (value === enumActionType.PAGE) {
6916   - $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
6917   - $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
6918   - } else if (value === enumActionType.LINK) {
6919   - $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
6920   - $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'block' })
6921   - } else if (value === enumActionType.PARAMS_SETTING) {
6922   - $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
6923   - $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
  6975 + controlFormDisplay(value)
  6976 + })
  6977 + }
  6978 +
  6979 + function isJson(string) {
  6980 + if (typeof string === 'string') {
  6981 + try {
  6982 + const obj = JSON.parse(string)
  6983 + if (typeof obj === 'object' && obj !== null) {
  6984 + return true
  6985 + }
  6986 + } catch (e) {
  6987 + return false
6924 6988 }
  6989 + }
  6990 + return false
  6991 + }
  6992 +
  6993 + function jsonParse(value) {
  6994 + try {
  6995 + return JSON.parse(value)
  6996 + } catch (error) {
  6997 + return {}
  6998 + }
  6999 + }
  7000 +
  7001 +
  7002 + /**
  7003 + * @description 创建JSON编辑器
  7004 + * @param el
  7005 + * @param datum
  7006 + */
  7007 + function createEditor(record) {
  7008 + let defaultValue = { [enumConst.ATTR_PLACEHOLDER]: 0 }
  7009 + const editor = ace.edit(enumActionEl.EDITOR, {
  7010 + maxLines: 18, // 最大行数，超过会自动出现滚动条
  7011 + minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
  7012 + fontSize: 14, // 编辑器内字体大小
  7013 + tabSize: 2, // 制表符设置为 4 个空格大小
  7014 + });
  7015 + if (record.content && record.content[enumConst.COMMAND]) defaultValue = jsonParse(record.content[enumConst.COMMAND])
  7016 + const stringValue = JSON.stringify(defaultValue, null, 2)
  7017 + editor.insert(stringValue)
  7018 + $(`#${enumActionEl.EDITOR_CONTAINER}`).parent().find(`textarea[name="${enumConst.COMMAND}"]`).val(stringValue)
  7019 + editor.session.setMode("ace/mode/json");
  7020 + editor.getSession().on('change', (event, editor) => {
  7021 + $(`#${enumActionEl.EDITOR_CONTAINER}`).parent().find(`textarea[name="${enumConst.COMMAND}"]`).val(editor.getValue())
6925 7022 })
6926 7023 }
6927 7024
... ... @@ -6932,7 +7029,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6932 7029
6933 7030 const content = `
6934 7031 <form class="layui-form" lay-filter="${enumActionEl.FORM_FILTER}">
6935   - <div style="width:400px">
  7032 + <div style="width: 450px">
6936 7033 <div class="layui-form-item">
6937 7034 <label class="layui-form-label">事件</label>
6938 7035 <div class="layui-input-block">
... ... @@ -6961,6 +7058,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6961 7058 </select>
6962 7059 </div>
6963 7060 </div>
  7061 + <div class="layui-form-item" id="${enumActionEl.WAY_SELECT}" style="display:none">
  7062 + <label class="layui-form-label">单向/双向</label>
  7063 + <div class="layui-input-block">
  7064 + <input type="radio" name="${enumConst.WAY}" value="${enumWayType.ONE_WAY}" title="单向" checked="">
  7065 + <input type="radio" name="${enumConst.WAY}" value="${enumWayType.TWO_WAY}" title="双向">
  7066 + </div>
  7067 + </div>
  7068 + <div id="${enumActionEl.EDITOR_CONTAINER}" style="display: none;">
  7069 + <div style="width: 80px; text-align: right; padding: 9px 15px;flex: 0 0 80px;">命令</div>
  7070 + <div id="${enumActionEl.EDITOR}" style="width: 100%; height: 100%;border: 2px solid #eee;"></div>
  7071 + <textarea name="${enumConst.COMMAND}" style="display: none;" />
  7072 + </div>
6964 7073 </div>
6965 7074 </form>
6966 7075 `
... ... @@ -6989,6 +7098,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6989 7098 generatorEventListen()
6990 7099 const info = getLayerBindInfo('event', type)
6991 7100 Object.assign(recordData, { enabled: info.enabled })
  7101 + createEditor(info)
6992 7102 form.render(null, enumActionEl.FORM_FILTER)
6993 7103 if (info) echoFormData(info)
6994 7104 },
... ... @@ -8163,6 +8273,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
8163 8273 return { getValue, setValue }
8164 8274 }
8165 8275
  8276 + function createHelpMessage() {
  8277 + return `<span class="thingskit-help-message"><img src="${Proxy_Prefix}/images/thingskit/question.svg" /></span>`
  8278 + }
  8279 +
8166 8280 // 异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
8167 8281 setTimeout(() => {
8168 8282
... ... @@ -13672,6 +13786,13 @@ class HandleDataInteraction {
13672 13786 }
13673 13787
13674 13788 /**
  13789 + * @description 获取页面数据
  13790 + */
  13791 + get contentData() {
  13792 + return DispatchCenter.instance.contentData
  13793 + }
  13794 +
  13795 + /**
13675 13796 * @description 事件映射
13676 13797 */
13677 13798 generatorEventMapping() {
... ... @@ -13772,7 +13893,7 @@ class HandleDataInteraction {
13772 13893 } else if (type === DispatchCenter.enumPageType.LINK && value) {
13773 13894 window.open(value)
13774 13895 } else if (type === DispatchCenter.enumPageType.PARAMS_SETTING) {
13775   - this.paramsSetting(id)
  13896 + this.paramsSetting(id, content)
13776 13897 }
13777 13898 }
13778 13899 }
... ... @@ -13865,13 +13986,15 @@ class HandleDataInteraction {
13865 13986 /**
13866 13987 * @description 参数设置
13867 13988 */
13868   - paramsSetting(nodeId) {
  13989 + paramsSetting(nodeId, content) {
13869 13990 const { layer, jquery: $, form } = layui
  13991 + const contentData = this.contentData
13870 13992 const enumConst = {
13871 13993 VALUE: 'value',
13872 13994 ISSUED_WAY: 'way',
13873   - ONE_WAR: 'oneway',
13874   - TWO_WAY: 'twoway'
  13995 + ONE_WAY: 'oneway',
  13996 + TWO_WAY: 'twoway',
  13997 + ATTR_PLACEHOLDER: 'attrPlaceholder'
13875 13998 }
13876 13999
13877 14000 const enumActionEl = {
... ... @@ -13881,40 +14004,17 @@ class HandleDataInteraction {
13881 14004
13882 14005 }
13883 14006
13884   - /**
13885   - * @description 创建JSON编辑器
13886   - * @param el
13887   - * @param datum
13888   - */
13889   - function createEditor() {
13890   - const editor = ace.edit(enumActionEl.EDITOR, {
13891   - maxLines: 18, // 最大行数，超过会自动出现滚动条
13892   - minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
13893   - fontSize: 14, // 编辑器内字体大小
13894   - tabSize: 2, // 制表符设置为 4 个空格大小
13895   - });
13896   - editor.session.setMode("ace/mode/json");
13897   - editor.getSession().on('change', (event, editor) => {
13898   - $(`#${enumActionEl.CONTAINER}`).parent().find(`textarea[name="${enumConst.VALUE}"]`).val(editor.getValue())
13899   - })
13900   - }
13901   -
13902 14007 function createContent() {
13903 14008 return `
13904 14009 <div>
13905 14010 <div class="layui-form" lay-filter="${enumActionEl.ISSUED_WAY_FILTER}">
13906 14011 <div class="layui-form-item">
13907   - <label class="layui-form-label">单向/双向</label>
  14012 + <label class="layui-form-label">下发值</label>
13908 14013 <div class="layui-input-block">
13909   - <input type="radio" name="${enumConst.ISSUED_WAY}" value="${enumConst.ONE_WAR}" title="单向" checked="">
13910   - <input type="radio" name="${enumConst.ISSUED_WAY}" value="${enumConst.TWO_WAY}" title="双向">
  14014 + <input type="text" name="${enumConst.VALUE}" lay-verify="required" autocomplete="off" placeholder="请输入下发值" class="layui-input">
13911 14015 </div>
13912 14016 </div>
13913 14017 </div>
13914   - <div id="${enumActionEl.CONTAINER}">
13915   - <div id="${enumActionEl.EDITOR}"></div>
13916   - <textarea name="${enumConst.VALUE}" style="display: none;" />
13917   - </div>
13918 14018 </div>`
13919 14019 }
13920 14020
... ... @@ -13931,25 +14031,45 @@ class HandleDataInteraction {
13931 14031 }
13932 14032 return false
13933 14033 }
13934   - const submitThrottle = this.throttle(submit)
13935   - async function submit(callback) {
13936   - const value = $(`#${enumActionEl.CONTAINER}`).parent().find(`textarea[name="${enumConst.VALUE}"]`).val() || ''
13937   - if (!isJson(value)) {
13938   - UseLayUi.topErrorMsg('下发值不正确')
13939   - return
  14034 +
  14035 + function jsonParse(value) {
  14036 + try {
  14037 + return JSON.parse(value)
  14038 + } catch (error) {
  14039 + return {}
  14040 + }
  14041 + }
  14042 +
  14043 + function replaceAttrPlaceholder(oldValue = {}, replaceAttr = '', replaceValue = '', newValue = {},) {
  14044 + if (typeof oldValue !== 'object') return newValue
  14045 +
  14046 + for (const key of Object.keys(oldValue)) {
  14047 + if (key === enumConst.ATTR_PLACEHOLDER) {
  14048 + newValue[replaceAttr] = replaceValue
  14049 + continue
  14050 + }
  14051 + if (typeof oldValue[key] === 'object') {
  14052 + newValue[key] = replaceAttrPlaceholder(oldValue[key], replaceAttr, replaceValue)
  14053 + }
  14054 + newValue[key] = oldValue[key]
13940 14055 }
13941   - const { way } = form.val(enumActionEl.ISSUED_WAY_FILTER)
13942   - const data = JSON.parse(value)
13943   - let { deviceId, slaveDeviceId } = DispatchCenter.instance.contentData.dataSources.find(item => item.nodeId === nodeId) || {}
13944 14056
13945   - if (!value || !deviceId) return
  14057 + return newValue
  14058 + }
  14059 +
  14060 + const submitThrottle = this.throttle(submit)
  14061 + async function submit(callback) {
  14062 + const { value } = form.val(enumActionEl.ISSUED_WAY_FILTER)
  14063 + let { deviceId, attr } = contentData.dataSources.find(item => item.nodeId === nodeId) || {}
  14064 + let { command, way } = content
  14065 + const validate = [value, deviceId, way, command, attr]
  14066 + if (!validate.every(Boolean)) return
  14067 + if (typeof command === 'string') command = jsonParse(command)
  14068 + const data = replaceAttrPlaceholder(command, attr, value)
13946 14069 const instructionData = {
13947 14070 method: "methodThingskit",
13948 14071 params: data,
13949 14072 }
13950   - // if (slaveDeviceId) {
13951   - // deviceId = slaveDeviceId
13952   - // }
13953 14073
13954 14074 const [err, res = []] = await to(ConfigurationNodeApi.deviceIsOnLine(deviceId))
13955 14075 const { value: onlineFlag } = res[0] || {}
... ... @@ -13969,7 +14089,7 @@ class HandleDataInteraction {
13969 14089 layer.open({
13970 14090 title: '参数设置',
13971 14091 content: createContent(),
13972   - area: '600px',
  14092 + area: '400px',
13973 14093 btn: ["应用", "取消"],
13974 14094 yes(index) {
13975 14095 submitThrottle(() => {
... ... @@ -13980,12 +14100,7 @@ class HandleDataInteraction {
13980 14100
13981 14101 },
13982 14102 async success(layero, index) {
13983   - createEditor(enumActionEl.EDITOR)
13984 14103 form.render()
13985   - // $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
13986   - // 'lay-submit': '',
13987   - // 'lay-filter': enumActionEl.IMAGE_LAYER_FILTER,
13988   - // })
13989 14104 },
13990 14105 })
13991 14106 }
... ...
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <title>Document</title>
  9 +</head>
  10 +
  11 +<body>
  12 + <script>
  13 +
  14 + function replaceAttrPlaceholder(oldValue = {}, replaceAttr = '', replaceValue = '', newValue = {},) {
  15 + if (typeof oldValue !== 'object') return newValue
  16 +
  17 + for (const key of Object.keys(oldValue)) {
  18 + if (key === 'attrPlaceholder') {
  19 + newValue[replaceAttr] = replaceValue
  20 + continue
  21 + }
  22 + if (typeof oldValue[key] === 'object') {
  23 + newValue[key] = replaceAttrPlaceholder(oldValue[key], replaceAttr, replaceValue)
  24 + }
  25 + }
  26 +
  27 + return newValue
  28 + }
  29 +
  30 + const value = {
  31 + attrPlaceholder: {
  32 + a: 123
  33 + },
  34 + name: {
  35 + attrPlaceholder: 123,
  36 + b: {
  37 + attrPlaceholder: 123
  38 + }
  39 + }
  40 + }
  41 +
  42 + console.log(replaceAttrPlaceholder(value, 'co', 2))
  43 + </script>
  44 +</body>
  45 +
  46 +</html>
... ...