简柏林 / thingskit-scada · Commits

Commit 1e7a7fa9634d8d058a5ef702edf2e76e8fb30c4f

Authored by ww
1 parent be102f67

feat: basic complete switch component data bind

Inline Side-by-side
Showing 4 changed files with 217 additions and 61 deletions
@@ -57,8 +57,6 @@ @@ -57,8 +57,6 @@
57 loadStyleList = loadStyleList.map((item) => ({ ...item, path: OSS_Prefix + getFileNameFromPath(item.path) })) 57 loadStyleList = loadStyleList.map((item) => ({ ...item, path: OSS_Prefix + getFileNameFromPath(item.path) }))
58 } 58 }
59 59
60 - console.log(loadScriptList)  
61 -  
62 for (const { path } of loadStyleList) { 60 for (const { path } of loadStyleList) {
63 loadStyleLink(path) 61 loadStyleLink(path)
64 } 62 }
@@ -130,14 +130,12 @@ const createStorage = ( @@ -130,14 +130,12 @@ const createStorage = (
130 * @memberof Cache 130 * @memberof Cache
131 */ 131 */
132 get(key, def = null) { 132 get(key, def = null) {
133 - console.log(this.getKey(key))  
134 const val = this.storage.getItem(this.getKey(key)); 133 const val = this.storage.getItem(this.getKey(key));
135 if (!val) return def; 134 if (!val) return def;
136 135
137 try { 136 try {
138 const decVal = this.hasEncrypt ? this.encryption.decryptByAES(val) : val; 137 const decVal = this.hasEncrypt ? this.encryption.decryptByAES(val) : val;
139 const data = JSON.parse(decVal); 138 const data = JSON.parse(decVal);
140 - console.log(data)  
141 const { value, expire } = data; 139 const { value, expire } = data;
142 // if (isNullOrUnDef(expire) || expire >= new Date().getTime()) { 140 // if (isNullOrUnDef(expire) || expire >= new Date().getTime()) {
143 // return value; 141 // return value;
@@ -313,7 +313,9 @@ @@ -313,7 +313,9 @@
313 /** 313 /**
314 * @descrpiton 开关 状态设置 314 * @descrpiton 开关 状态设置
315 */ 315 */
316 - SWITCH_STATE_SETTING: 'stateSetting' 316 + SWITCH_STATE_SETTING: 'stateSetting',
  317 +
  318 +
317 } 319 }
318 320
319 /** 321 /**
@@ -679,9 +681,9 @@ @@ -679,9 +681,9 @@
679 this.setComponentPermission(VAR_IMAGE, [INTERACTION, VAR_IMAGE]) 681 this.setComponentPermission(VAR_IMAGE, [INTERACTION, VAR_IMAGE])
680 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT]) 682 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
681 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND]) 683 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND])
682 - this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND]) 684 + this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
683 this.setComponentPermission(VIDEO, [VIDEO_PANEL]) 685 this.setComponentPermission(VIDEO, [VIDEO_PANEL])
684 - this.setComponentPermission(SWITCH, [SWITCH_STATE_SETTING]) 686 + this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING])
685 687
686 var thingskitEntries = [ 688 var thingskitEntries = [
687 { title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' }, 689 { title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' },
@@ -4964,6 +4964,17 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -4964,6 +4964,17 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4964 let currentNodeData = null 4964 let currentNodeData = null
4965 4965
4966 /** 4966 /**
  4967 + * @description 覆盖当前节点数据
  4968 + * @param {'act' | 'dataSources' | 'event'} key
  4969 + * @param {string}
  4970 + */
  4971 + function overrideCurrentData(key, uuid = 'id', value = {}) {
  4972 + if (!currentNodeData[key]) currentNodeData[key] = []
  4973 + const index = currentNodeData[key].findIndex(item => item[uuid] === value[uuid])
  4974 + ~index ? currentNodeData[key][index] = value : currentNodeData[key].push(value)
  4975 + }
  4976 +
  4977 + /**
4967 * @description 保存页面信息 4978 * @description 保存页面信息
4968 */ 4979 */
4969 async function autoSaveGraphInfo() { 4980 async function autoSaveGraphInfo() {
@@ -5066,6 +5077,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5066,6 +5077,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5066 5077
5067 /** 5078 /**
5068 * @description 用于在其他位置获取数据源绑定的数据，在生成数据源面板中进行了改写 5079 * @description 用于在其他位置获取数据源绑定的数据，在生成数据源面板中进行了改写
  5080 + * @return {{orgId: string, attr: string, deviceId: string, slaveDeviceId: string}}
5069 */ 5081 */
5070 function getDataSourceBindValue() { 5082 function getDataSourceBindValue() {
5071 5083
@@ -5165,19 +5177,13 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5165,19 +5177,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5165 const event = currentNodeData.event ?? [] 5177 const event = currentNodeData.event ?? []
5166 const actionType = {} 5178 const actionType = {}
5167 for (const item of act) { 5179 for (const item of act) {
5168 - if (!item.condition || !item.condition?.length) {  
5169 - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', true)  
5170 - } else {  
5171 - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', false)  
5172 - } 5180 + const flag = !item.condition || !item.condition?.length
  5181 + $(`.interaction__container input[name="${item.type}"]`).attr('disabled', flag)
5173 actionType[item.type] = item.enabled 5182 actionType[item.type] = item.enabled
5174 } 5183 }
5175 for (const item of event) { 5184 for (const item of event) {
5176 - if (!item.content) {  
5177 - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', true)  
5178 - } else {  
5179 - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', false)  
5180 - } 5185 + const flag = !item.content
  5186 + $(`.interaction__container input[name="${item.type}"]`).attr('disabled', flag)
5181 actionType[item.type] = item.enabled 5187 actionType[item.type] = item.enabled
5182 } 5188 }
5183 form.val(CONTAINER_FILTER, actionType) 5189 form.val(CONTAINER_FILTER, actionType)
@@ -5219,7 +5225,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5219,7 +5225,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5219 5225
5220 5226
5221 async function mount() { 5227 async function mount() {
5222 - const { component, echoDataSource, getValue } = generatorDataSourceComponent({ validate: false }) 5228 + const { component, echoDataSource, getValue } = generateDataSourceComponent({ validate: false })
5223 $(fragment).append(title).append(component) 5229 $(fragment).append(title).append(component)
5224 $(container).append(fragment) 5230 $(container).append(fragment)
5225 5231
@@ -5382,7 +5388,11 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5382,7 +5388,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5382 type: enumDynamicEffectType.SWITCH, 5388 type: enumDynamicEffectType.SWITCH,
5383 category: enumCategory.ACT, 5389 category: enumCategory.ACT,
5384 }) 5390 })
  5391 + const singleClick = interactionList.find(item => item.type === enumInteractionType.SINGLE)
  5392 + interactionList.length = 0
  5393 + interactionList.push(singleClick)
5385 createDynamicEffectPanel() 5394 createDynamicEffectPanel()
  5395 + createInteractionPanel()
5386 } 5396 }
5387 5397
5388 /** 5398 /**
@@ -5833,30 +5843,30 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5833,30 +5843,30 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5833 5843
5834 function getValueOnSubmit(field) { 5844 function getValueOnSubmit(field) {
5835 const basicAttr = sidebarInstance.enumCellBasicAttribute 5845 const basicAttr = sidebarInstance.enumCellBasicAttribute
5836 - const permissionKey = sidebarInstance.enumComponentType  
5837 - 5846 + const componentType = sidebarInstance.enumComponentType
5838 5847
5839 const renderMapping = { 5848 const renderMapping = {
5840 - [permissionKey.VAR_IMAGE]: getSubmitValue,  
5841 - [permissionKey.CHARTS]: getSubmitValue,  
5842 - [permissionKey.TITLE]: getSubmitValue,  
5843 - [permissionKey.VARIABLE]: getSubmitValue,  
5844 - [permissionKey.LINE]: getSubmitValue,  
5845 - [permissionKey.REAL_TIME]: getSubmitValue,  
5846 - [permissionKey.LINE_CHART]: getSubmitValue,  
5847 - [permissionKey.BAR_CHART]: getSubmitValue,  
5848 - [permissionKey.DEFAULT]: getSubmitValue,  
5849 - [permissionKey.VIDEO]: getVideoSubmitValue, 5849 + [componentType.VAR_IMAGE]: getSubmitValue,
  5850 + [componentType.CHARTS]: getSubmitValue,
  5851 + [componentType.TITLE]: getSubmitValue,
  5852 + [componentType.VARIABLE]: getSubmitValue,
  5853 + [componentType.LINE]: getSubmitValue,
  5854 + [componentType.REAL_TIME]: getSubmitValue,
  5855 + [componentType.LINE_CHART]: getSubmitValue,
  5856 + [componentType.BAR_CHART]: getSubmitValue,
  5857 + [componentType.DEFAULT]: getSubmitValue,
  5858 + [componentType.VIDEO]: getVideoSubmitValue,
  5859 + [componentType.SWITCH]: getSwitchSubmitValue
5850 } 5860 }
5851 5861
5852 const cell = vertices[0] 5862 const cell = vertices[0]
5853 - const permission = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE) 5863 + const type = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
  5864 + return renderMapping[type]?.(field) || {}
5854 5865
5855 - return renderMapping[permission]?.() || {}  
5856 -  
5857 - function getSubmitValue() { 5866 + function getSubmitValue(field) {
5858 const ENABLED_FLAG = 'on' 5867 const ENABLED_FLAG = 'on'
5859 const additionalKey = HandleDataSource.enumConst 5868 const additionalKey = HandleDataSource.enumConst
  5869 +
5860 const value = { 5870 const value = {
5861 configurationId, 5871 configurationId,
5862 contentId: currentPageId.id, 5872 contentId: currentPageId.id,
@@ -5910,6 +5920,43 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5910,6 +5920,43 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5910 } 5920 }
5911 return value 5921 return value
5912 } 5922 }
  5923 +
  5924 + /**
  5925 + * @description 处理开关组件的保存值
  5926 + * @returns
  5927 + */
  5928 + function getSwitchSubmitValue(field) {
  5929 + const dataSources = getDataSourceBindValue()
  5930 + const enableStatus = getEnableStatus(field)
  5931 + return { configurationId, contentId: currentPageId.id, nodeId: graphId, dataSources, ...enableStatus }
  5932 + }
  5933 +
  5934 +
  5935 + /**
  5936 + * @description 获取开启状态
  5937 + */
  5938 + function getEnableStatus(field = {}) {
  5939 + const ENABLED_FLAG = 'on'
  5940 + const value = {}
  5941 + const hasExistEl = $(`.layui-form[lay-filter="${CONTAINER_FILTER}"]`).find('input[type="checkbox"]')
  5942 +
  5943 + // 筛选页面中存在的数据动效事件交互复选框
  5944 + const allState = []
  5945 + $(hasExistEl).each((i) => {
  5946 + const state = $(hasExistEl[i]).attr('name')
  5947 + allState.push(state)
  5948 + })
  5949 + const allType = [...interactionList, ...dynamicEffectList].filter(item => allState.includes(item.type))
  5950 +
  5951 + for (const item of allType) {
  5952 + !value[item.category] && (value[item.category] = [])
  5953 + value[item.category].push({
  5954 + type: item.type,
  5955 + enabled: field[item.type] === ENABLED_FLAG,
  5956 + })
  5957 + }
  5958 + return value
  5959 + }
5913 } 5960 }
5914 5961
5915 /** 5962 /**
@@ -6024,7 +6071,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6024,7 +6071,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6024 function createSelectDefaultImageEvent() { 6071 function createSelectDefaultImageEvent() {
6025 $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, event => { 6072 $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, event => {
6026 if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return 6073 if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
6027 - generatorUploadLayerComponent((imageState) => { 6074 + generateUploadLayerComponent((imageState) => {
6028 $(`#${enumActionEl.DEFAULT_IMAGE_EL}`) 6075 $(`#${enumActionEl.DEFAULT_IMAGE_EL}`)
6029 .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH]) 6076 .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
6030 6077
@@ -6097,7 +6144,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6097,7 +6144,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6097 if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return 6144 if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
6098 const rowFilter = $(event.target).parents('tr').attr('lay-filter') 6145 const rowFilter = $(event.target).parents('tr').attr('lay-filter')
6099 // createUploadImgLayer(rowFilter) 6146 // createUploadImgLayer(rowFilter)
6100 - generatorUploadLayerComponent((imageState) => { 6147 + generateUploadLayerComponent((imageState) => {
6101 6148
6102 $(`#${enumActionEl.TABLE_BODY_EL}`) 6149 $(`#${enumActionEl.TABLE_BODY_EL}`)
6103 .find(`tr[lay-filter="${rowFilter}"]`) 6150 .find(`tr[lay-filter="${rowFilter}"]`)
@@ -6307,7 +6354,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6307,7 +6354,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6307 'lay-submit': '', 6354 'lay-submit': '',
6308 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER, 6355 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
6309 }) 6356 })
6310 - const { component, echoDataSource, getValue } = generatorDataSourceComponent() 6357 + const { component, echoDataSource, getValue } = generateDataSourceComponent()
6311 getDataSourceValue = getValue 6358 getDataSourceValue = getValue
6312 $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component) 6359 $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
6313 form.render() 6360 form.render()
@@ -6797,6 +6844,10 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6797,6 +6844,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6797 * @description 处理单击 or 双击事件 6844 * @description 处理单击 or 双击事件
6798 */ 6845 */
6799 function handleClickOrDbClick(event) { 6846 function handleClickOrDbClick(event) {
  6847 + const basicAttr = sidebarInstance.enumCellBasicAttribute
  6848 + const componentType = sidebarInstance.enumComponentType
  6849 + const currentNodeType = nodeInfo.getAttribute(basicAttr.COMPONENT_TYPE)
  6850 + const isControlComponent = [componentType.SWITCH].includes(currentNodeType)
6800 6851
6801 const enumEventType = { 6852 const enumEventType = {
6802 DOWN: "按下", 6853 DOWN: "按下",
@@ -6822,6 +6873,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6822,6 +6873,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6822 PAGE: 'PAGE', 6873 PAGE: 'PAGE',
6823 LINK: 'LINK', 6874 LINK: 'LINK',
6824 PROPS: 'PROPS', 6875 PROPS: 'PROPS',
  6876 + PARAMS_SETTING: 'PARAMS_SETTING'
6825 } 6877 }
6826 6878
6827 const enumGetValue = { 6879 const enumGetValue = {
@@ -6875,6 +6927,9 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6875,6 +6927,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6875 if (content.type === enumActionType.PAGE) { 6927 if (content.type === enumActionType.PAGE) {
6876 $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' }) 6928 $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
6877 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' }) 6929 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
  6930 + } else if (content.type === enumActionType.PARAMS_SETTING) {
  6931 + $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
  6932 + $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
6878 } 6933 }
6879 form.val(enumActionEl.FORM_FILTER, val) 6934 form.val(enumActionEl.FORM_FILTER, val)
6880 } 6935 }
@@ -6897,8 +6952,9 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6897,8 +6952,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6897 }, 6952 },
6898 } 6953 }
6899 await to(autoSaveGraphInfo()) 6954 await to(autoSaveGraphInfo())
6900 - const [err] = await to(ConfigurationNodeApi.updateNodeEvent(data)) 6955 + const [err, res] = await to(ConfigurationNodeApi.updateNodeEvent(data))
6901 if (err) return 6956 if (err) return
  6957 + isControlComponent && overrideCurrentData('event', 'type', res)
6902 UseLayUi.successMsg() 6958 UseLayUi.successMsg()
6903 callback() 6959 callback()
6904 } 6960 }
@@ -6910,6 +6966,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6910,6 +6966,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6910 const options = [ 6966 const options = [
6911 { name: '打开链接', id: enumActionType.LINK }, 6967 { name: '打开链接', id: enumActionType.LINK },
6912 { name: '打开页面', id: enumActionType.PAGE }, 6968 { name: '打开页面', id: enumActionType.PAGE },
  6969 + ...(isControlComponent ? [{ name: '参数设置', id: enumActionType.PARAMS_SETTING }] : []),
6913 { name: '给变量赋值', id: enumActionType.PROPS, disabled: true }, 6970 { name: '给变量赋值', id: enumActionType.PROPS, disabled: true },
6914 ] 6971 ]
6915 return UseLayUi.generateOptionTemplate({ dataSource: options, addPlaceholderOption: false }) 6972 return UseLayUi.generateOptionTemplate({ dataSource: options, addPlaceholderOption: false })
@@ -6932,6 +6989,9 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6932,6 +6989,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6932 } else if (value === enumActionType.LINK) { 6989 } else if (value === enumActionType.LINK) {
6933 $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' }) 6990 $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
6934 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'block' }) 6991 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'block' })
  6992 + } else if (value === enumActionType.PARAMS_SETTING) {
  6993 + $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
  6994 + $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
6935 } 6995 }
6936 }) 6996 })
6937 } 6997 }
@@ -6985,7 +7045,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6985,7 +7045,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6985 form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => { 7045 form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
6986 submit(() => { 7046 submit(() => {
6987 layer.close(index) 7047 layer.close(index)
6988 - getNodeBindInfo() 7048 + !isControlComponent && getNodeBindInfo()
6989 }) 7049 })
6990 }) 7050 })
6991 }, 7051 },
@@ -7286,7 +7346,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7286,7 +7346,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7286 const { 7346 const {
7287 component, 7347 component,
7288 echoDataSource, 7348 echoDataSource,
7289 - } = generatorDataSourceComponent({ overrideClass: 'dynamic-effect__data-source-comp--override' }) 7349 + } = generateDataSourceComponent({ overrideClass: 'dynamic-effect__data-source-comp--override' })
7290 $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component) 7350 $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
7291 form.render() 7351 form.render()
7292 7352
@@ -7328,7 +7388,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7328,7 +7388,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7328 function handleStateSetting(event) { 7388 function handleStateSetting(event) {
7329 7389
7330 const enumActionEl = { 7390 const enumActionEl = {
7331 - DATA_SOURCE_COMP_EL: 'stateDataSource',  
7332 TABLE_BODY_EL: 'stateTableBodyEl', 7391 TABLE_BODY_EL: 'stateTableBodyEl',
7333 LAYER_SUBMIT_FILTER: 'stateSettingSubmitFilter', 7392 LAYER_SUBMIT_FILTER: 'stateSettingSubmitFilter',
7334 ENABLE_FILTER: 'enableFilter', 7393 ENABLE_FILTER: 'enableFilter',
@@ -7373,12 +7432,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7373,12 +7432,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7373 VALUE: 'value' 7432 VALUE: 'value'
7374 } 7433 }
7375 7434
7376 - const {  
7377 - component,  
7378 - echoDataSource,  
7379 - getValue,  
7380 - } = generatorDataSourceComponent()  
7381 -  
7382 const recordData = { 7435 const recordData = {
7383 enabled: false 7436 enabled: false
7384 } 7437 }
@@ -7403,7 +7456,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7403,7 +7456,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7403 if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return 7456 if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
7404 const rowFilter = $(event.target).parents('tr').attr('lay-filter') 7457 const rowFilter = $(event.target).parents('tr').attr('lay-filter')
7405 // createUploadImgLayer(rowFilter) 7458 // createUploadImgLayer(rowFilter)
7406 - generatorUploadLayerComponent((imageState) => { 7459 + generateUploadLayerComponent((imageState) => {
7407 7460
7408 $(`#${enumActionEl.TABLE_BODY_EL}`) 7461 $(`#${enumActionEl.TABLE_BODY_EL}`)
7409 .find(`tr[lay-filter="${rowFilter}"]`) 7462 .find(`tr[lay-filter="${rowFilter}"]`)
@@ -7426,7 +7479,8 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7426,7 +7479,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7426 </td> 7479 </td>
7427 <td> 7480 <td>
7428 <div class="layui-form-item"> 7481 <div class="layui-form-item">
7429 - <input class="layui-input" autocomplete="off" type="number" name="${enumConst.VALUE}" lay-filter="${enumConst.VALUE}" lay-verType="tips" lay-verify="required" /> 7482 + <input class="layui-input" autocomplete="off" type="number" name="${enumConst.VALUE}" lay-verType="tips" lay-verify="required" />
  7483 + <input class="layui-input" autocomplete="off" style="display: none;" name="${enumConst.TYPE}" lay-verType="tips" lay-verify="required" />
7430 </div> 7484 </div>
7431 </td> 7485 </td>
7432 <td> 7486 <td>
@@ -7449,7 +7503,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7449,7 +7503,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7449 */ 7503 */
7450 function echoData(info = {}) { 7504 function echoData(info = {}) {
7451 const { condition = [] } = info 7505 const { condition = [] } = info
7452 - echoDataSource(info)  
7453 7506
7454 condition.forEach(item => { 7507 condition.forEach(item => {
7455 if (item[enumConst.TYPE] === enumConst.ENABLE_TYPE) { 7508 if (item[enumConst.TYPE] === enumConst.ENABLE_TYPE) {
@@ -7473,12 +7526,20 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7473,12 +7526,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7473 function setRowFormValue(formFilter, value = {}) { 7526 function setRowFormValue(formFilter, value = {}) {
7474 form.val(formFilter, value) 7527 form.val(formFilter, value)
7475 $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${formFilter}"] .${enumActionEl.SET_IMG_EL} img`).attr('src', value[enumConst.IMAGE_GALLERY_IMAGE_PATH]) 7528 $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${formFilter}"] .${enumActionEl.SET_IMG_EL} img`).attr('src', value[enumConst.IMAGE_GALLERY_IMAGE_PATH])
  7529 + form.render()
7476 } 7530 }
7477 7531
7478 async function submit(callback) { 7532 async function submit(callback) {
7479 const enableValue = form.val(enumActionEl.ENABLE_FILTER) 7533 const enableValue = form.val(enumActionEl.ENABLE_FILTER)
7480 const closeValue = form.val(enumActionEl.CLOSE_FILTER) 7534 const closeValue = form.val(enumActionEl.CLOSE_FILTER)
7481 - const formVal = getValue() 7535 +
  7536 + const formVal = getDataSourceBindValue()
  7537 +
  7538 + if (![formVal.deviceId && formVal.orgId].every(Boolean)) {
  7539 + UseLayUi.topErrorMsg('请先选择数据源')
  7540 + return
  7541 + }
  7542 +
7482 const formModel = { 7543 const formModel = {
7483 configurationId, 7544 configurationId,
7484 contentId: currentPageId.id, 7545 contentId: currentPageId.id,
@@ -7491,13 +7552,13 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7491,13 +7552,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7491 await to(autoSaveGraphInfo()) 7552 await to(autoSaveGraphInfo())
7492 const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel)) 7553 const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
7493 if (err) return 7554 if (err) return
  7555 + overrideCurrentData('act', 'type', res)
7494 UseLayUi.successMsg() 7556 UseLayUi.successMsg()
7495 callback() 7557 callback()
7496 } 7558 }
7497 7559
7498 function createLayerForm(type) { 7560 function createLayerForm(type) {
7499 const content = ` 7561 const content = `
7500 - <div id="${enumActionEl.DATA_SOURCE_COMP_EL}" style="width: 300px;"></div>  
7501 <table class="layui-table"> 7562 <table class="layui-table">
7502 <colgroup> 7563 <colgroup>
7503 <col width="150"> 7564 <col width="150">
@@ -7530,10 +7591,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7530,10 +7591,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7530 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER, 7591 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
7531 }) 7592 })
7532 7593
7533 - // render data source  
7534 - $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)  
7535 - form.render()  
7536 -  
7537 const info = getLayerBindInfo('act', type) 7594 const info = getLayerBindInfo('act', type)
7538 const { condition = [], enabled } = info 7595 const { condition = [], enabled } = info
7539 Object.assign(recordData, { enabled }) 7596 Object.assign(recordData, { enabled })
@@ -7543,15 +7600,13 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7543,15 +7600,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7543 initialData() 7600 initialData()
7544 } 7601 }
7545 7602
7546 -  
7547 generatorEventListenner() 7603 generatorEventListenner()
7548 - initialData()  
7549 }, 7604 },
7550 yes(index) { 7605 yes(index) {
7551 form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => { 7606 form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
7552 submit(() => { 7607 submit(() => {
7553 layer.close(index) 7608 layer.close(index)
7554 - getNodeBindInfo() 7609 + // getNodeBindInfo()
7555 }) 7610 })
7556 }) 7611 })
7557 }, 7612 },
@@ -7570,7 +7625,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7570,7 +7625,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7570 * @param {string} [options.overrideClass = ''] options.overrideClass 7625 * @param {string} [options.overrideClass = ''] options.overrideClass
7571 * @param {boolean} [options.validate = true ] options.validate 7626 * @param {boolean} [options.validate = true ] options.validate
7572 */ 7627 */
7573 - function generatorDataSourceComponent(options = {}) { 7628 + function generateDataSourceComponent(options = {}) {
7574 const { overrideClass = '', validate = true } = options 7629 const { overrideClass = '', validate = true } = options
7575 const componentFilter = `data-source__component-filter-${Date.now()}` 7630 const componentFilter = `data-source__component-filter-${Date.now()}`
7576 const componentId = `data-source__component-${Date.now()}` 7631 const componentId = `data-source__component-${Date.now()}`
@@ -7778,6 +7833,10 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7778,6 +7833,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7778 }) 7833 })
7779 } 7834 }
7780 7835
  7836 + /**
  7837 + *
  7838 + * @returns {{orgId: string, attr: string, deviceId: string, slaveDeviceId: string}}
  7839 + */
7781 function getValue() { 7840 function getValue() {
7782 return form.val(componentFilter) 7841 return form.val(componentFilter)
7783 } 7842 }
@@ -7788,7 +7847,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7788,7 +7847,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7788 /** 7847 /**
7789 * @description 生成上传弹出层组件 7848 * @description 生成上传弹出层组件
7790 */ 7849 */
7791 - function generatorUploadLayerComponent(callback) { 7850 + function generateUploadLayerComponent(callback) {
7792 7851
7793 const enumActionEl = { 7852 const enumActionEl = {
7794 /** 7853 /**
@@ -8076,6 +8135,95 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -8076,6 +8135,95 @@ DataFormatPanel.prototype.addDataFont = function (container) {
8076 return { record: imageState } 8135 return { record: imageState }
8077 } 8136 }
8078 8137
  8138 +
  8139 + /**
  8140 + * @description TODO 图片上传容器
  8141 + * @param {} option
  8142 + * @param {} option.el
  8143 + */
  8144 + function generateUploadImgContainer({ el }) {
  8145 +
  8146 +
  8147 + const enumConst = {
  8148 + /**
  8149 + * @description 图片来源
  8150 + */
  8151 + IMAGE_ORIGIN: 'imageOrigin',
  8152 +
  8153 + /**
  8154 + * @description 图库图形类别
  8155 + */
  8156 + IMAGE_GALLERY_CATEGORY: 'category',
  8157 +
  8158 + /**
  8159 + * @description 图表图形路径
  8160 + */
  8161 + IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
  8162 + }
  8163 +
  8164 + const enumActionEl = {
  8165 +
  8166 + CONTAINER_FILTER: 'imgContainerFilter',
  8167 +
  8168 + /**
  8169 + * @description
  8170 + */
  8171 + SET_IMG_EL: 'variableImageTableSetImgEl',
  8172 +
  8173 + /**
  8174 + * @description 预览
  8175 + */
  8176 + PREVIEW_IMG_CONTAINER: 'img__container',
  8177 +
  8178 + /**
  8179 + * @description 删除
  8180 + */
  8181 + DEL_PREVIEW_IMG: 'img__delete',
  8182 + }
  8183 +
  8184 + const getFormFilter = `${enumActionEl.CONTAINER_FILTER}-${Date.now()}`
  8185 +
  8186 + function createTemplate() {
  8187 + return `
  8188 + <div class="layui-form ${enumActionEl.SET_IMG_EL}" lay-filter="${getFormFilter}">
  8189 + <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
  8190 + <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
  8191 + <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
  8192 + <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
  8193 + <img src="" alt="">
  8194 + <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
  8195 + <div class="add__button">+</div>
  8196 + </div>
  8197 + </div>
  8198 + `
  8199 + }
  8200 +
  8201 + /**
  8202 + * @description 设置回显
  8203 + * @param {} value
  8204 + */
  8205 + function setValue(value = {}) {
  8206 + form.val(getFormFilter, value)
  8207 + }
  8208 +
  8209 + /**
  8210 + * @description 获取值
  8211 + * @returns
  8212 + */
  8213 + function getValue() {
  8214 + return form.val(getFormFilter) || {}
  8215 + }
  8216 +
  8217 + function mount() {
  8218 + if (!el) throw Error('mount element is required')
  8219 + $(el).append(createTemplate())
  8220 + }
  8221 +
  8222 + function generateEventLinstenner() {
  8223 + $(el)
  8224 + }
  8225 + }
  8226 +
8079 // 异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定 8227 // 异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
8080 setTimeout(() => { 8228 setTimeout(() => {
8081 8229
@@ -12316,6 +12464,16 @@ class UseLayUi { @@ -12316,6 +12464,16 @@ class UseLayUi {
12316 static errorMsg(msg = '操作失败', options) { 12464 static errorMsg(msg = '操作失败', options) {
12317 UseLayUi.msg(msg, { ...options, icon: 5 }) 12465 UseLayUi.msg(msg, { ...options, icon: 5 })
12318 } 12466 }
  12467 +
  12468 + static topSuccessMsg(msg = '操作成功', options) {
  12469 + const { layer } = layui
  12470 + layer.msg(`<div style="padding: 20px; display: flex; align-items: center;"><i class="layui-layer-ico layui-layer-ico6" style="width: 30px;height: 30px;"></i><span style="margin-left: 5px">${msg}</span></div>`, { ...options, type: 1, icon: 6, time: 2000, })
  12471 + }
  12472 +
  12473 + static topErrorMsg(msg = '操作失败', options) {
  12474 + const { layer } = layui
  12475 + layer.msg(`<div style="padding: 20px; display: flex; align-items: center;"><i class="layui-layer-ico layui-layer-ico5" style="width: 30px;height: 30px;"></i><span style="margin-left: 5px">${msg}</span></div>`, { ...options, type: 1, icon: 5, time: 2000, })
  12476 + }
12319 } 12477 }
12320 12478
12321 12479