feat: implement params setting button component

ww
1 parent 01e2632e
Showing 4 changed files with 90 additions and 15 deletions
src/main/webapp/js/diagramly/sidebar/Sidebar.js
src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Control-Components.js
src/main/webapp/js/grapheditor/Format.js
src/main/webapp/styles/formatChange.css
--- a/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @3024c4c
+++ b/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @3024c4c
@@ -240,6 +240,11 @@
 		SWITCH: 'switch',
 		/**
+		 * @description 参数设置按钮
+		 */
+		PARAMS_SETTING_BUTTON: 'paramsSettingButton',
+
+		/**
 		 * @description 默认类型
 		 */
 		DEFAULT: 'default',
@@ -315,7 +320,10 @@
 		 */
 		SWITCH_STATE_SETTING: 'stateSetting',
-
+		/**
+		 * @description 只有单机事件
+		 */
+		ONLY_SINGLE_EVENT: 'onlySingleEvent'
 	}
 	/**
@@ -672,8 +680,8 @@
 		//更多图形，显示出来的的标题跟id，同时包括图片
 		// TODO thingsKit 设置数据绑定展示面板
-		const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWITCH_STATE_SETTING } = this.enumPermissionPanel
-		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH } = this.enumComponentType
+		const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWITCH_STATE_SETTING, ONLY_SINGLE_EVENT } = this.enumPermissionPanel
+		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH, PARAMS_SETTING_BUTTON } = this.enumComponentType
 		this.setComponentPermission(LINE, [DYNAMIC_EFFECT])
 		this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
 		this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
@@ -684,6 +692,7 @@
 		this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
 		this.setComponentPermission(VIDEO, [VIDEO_PANEL])
 		this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING])
+		this.setComponentPermission(PARAMS_SETTING_BUTTON, [DATA_SOURCE, ONLY_SINGLE_EVENT])
 		var thingskitEntries = [
 			{ title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' },
--- a/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Control-Components.js
View file @3024c4c
+++ b/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Control-Components.js
View file @3024c4c
@@ -4,7 +4,7 @@
 	// Control Component 控制元件
 	Sidebar.prototype.addControlComponentsPalette = function () {
 		const { COMPONENT_TYPE } = this.enumCellBasicAttribute
-		const { SWITCH } = this.enumComponentType
+		const { SWITCH, PARAMS_SETTING_BUTTON } = this.enumComponentType
 		const gn = 'mxgraph.control';
 		const dt = 'control';
 		const label = '控制元件'
@@ -15,18 +15,29 @@
 		const defaultStyle = ';imageAspect=0;'
 		this.setCurrentSearchEntryLibrary(dt);
-		// 自定义属性
-		const cellAttribute = {
-			[COMPONENT_TYPE]: SWITCH
-		}
+
 		const fns = [
 			this.addEntry(this.getTagsForStencil(gn, 'Switch', dt).join(' '), mxUtils.bind(this, function () {
 				const cell = new mxCell('', new mxGeometry(0, 0, 48, 48), `image;image=images/thingskit/switch-on.svg;${defaultStyle}`);
+				// 自定义属性
+				const cellAttribute = {
+					[COMPONENT_TYPE]: SWITCH
+				}
 				cell.setVertex(true)
 				this.setCellAttributes(cell, cellAttribute)
 				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '开关');
 			})),
+			this.addEntry(this.getTagsForStencil(gn, 'Params Setting', dt).join(' '), mxUtils.bind(this, function () {
+				const cell = new mxCell('<button class="param-setting-button">参数设置</button>', new mxGeometry(0, 0, 100, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
+				// 自定义属性
+				const cellAttribute = {
+					[COMPONENT_TYPE]: PARAMS_SETTING_BUTTON
+				}
+				cell.setVertex(true)
+				this.setCellAttributes(cell, cellAttribute)
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '参数设置');
+			})),
 		]
--- a/src/main/webapp/js/grapheditor/Format.js
View file @3024c4c
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @3024c4c
@@ -5133,6 +5133,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             [permissionKey.VAR_IMAGE]: createVarImagePanel,
             [permissionKey.VIDEO]: createVideoBindPanel,
             [permissionKey.SWITCH_STATE_SETTING]: createSwitchStateSettingPanel,
+            [permissionKey.ONLY_SINGLE_EVENT]: createParamsSettingButtonPanel
         }
@@ -5388,10 +5389,17 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             type: enumDynamicEffectType.SWITCH,
             category: enumCategory.ACT,
         })
+        createDynamicEffectPanel()
+        createParamsSettingButtonPanel()
+    }
+
+    /**
+     * @description 参数设置按钮面板创建
+     */
+    function createParamsSettingButtonPanel() {
         const singleClick = interactionList.find(item => item.type === enumInteractionType.SINGLE)
         interactionList.length = 0
         interactionList.push(singleClick)
-        createDynamicEffectPanel()
         createInteractionPanel()
     }
@@ -5856,7 +5864,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             [componentType.BAR_CHART]: getSubmitValue,
             [componentType.DEFAULT]: getSubmitValue,
             [componentType.VIDEO]: getVideoSubmitValue,
-            [componentType.SWITCH]: getSwitchSubmitValue
+            [componentType.SWITCH]: getSwitchSubmitValue,
+            [componentType.PARAMS_SETTING_BUTTON]: getSwitchSubmitValue
         }
         const cell = vertices[0]
@@ -6847,7 +6856,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const basicAttr = sidebarInstance.enumCellBasicAttribute
         const componentType = sidebarInstance.enumComponentType
         const currentNodeType = nodeInfo.getAttribute(basicAttr.COMPONENT_TYPE)
-        const isControlComponent = [componentType.SWITCH].includes(currentNodeType)
+        const isControlComponent = [componentType.SWITCH, componentType.PARAMS_SETTING_BUTTON].includes(currentNodeType)
         const enumEventType = {
             DOWN: "按下",
@@ -13289,6 +13298,12 @@ class HandleDataSource {
                 this.handleSwitchComponent(message)
                 return
             }
+
+            if (type === this.componentType.PARAMS_SETTING_BUTTON) {
+                this.handleParamSettingButton(message)
+                return
+            }
+
             if (!data) return
             const [[timespan, value]] = data[attr]
             node.setValue(value)
@@ -13323,6 +13338,14 @@ class HandleDataSource {
         }
     }
+    handleParamSettingButton(message) {
+        const { subscriptionId, data = {} } = message
+        const node = this.getNodeByCmdId(subscriptionId)
+        const { attr } = this.getBindData(subscriptionId)
+        const [[timespan, receiveValue] = []] = data[attr] || []
+        node.setAttribute('label', `<button class="param-setting-button">${receiveValue}</button>`)
+    }
+
     /**
      * @description 更新实时数据
      * @param {} message 
@@ -13964,7 +13987,7 @@ class HandleDataInteraction {
             return false
         }
         const submitThrottle = this.throttle(submit)
-        async function submit() {
+        async function submit(callback) {
             const value = $(`#${enumActionEl.CONTAINER}`).parent().find(`textarea[name="${enumConst.VALUE}"]`).val() || ''
             if (!isJson(value)) {
                 UseLayUi.topErrorMsg('下发值不正确')
@@ -13989,6 +14012,7 @@ class HandleDataInteraction {
                 const [err, res] = await to(ConfigurationNodeApi.sendInstruction(way, deviceId, instructionData))
                 if (!err) {
                     UseLayUi.topSuccessMsg('操作成功')
+                    callback()
                 }
             } else {
                 UseLayUi.topErrorMsg('设备不在线!')
@@ -14003,7 +14027,9 @@ class HandleDataInteraction {
                 area: '600px',
                 btn: ["应用", "取消"],
                 yes(index) {
-                    submitThrottle()
+                    submitThrottle(() => {
+                        layer.close(index)
+                    })
                 },
                 but2(index, layero) {
--- a/src/main/webapp/styles/formatChange.css
View file @3024c4c
+++ b/src/main/webapp/styles/formatChange.css
View file @3024c4c
@@ -447,7 +447,6 @@
 }
 #defaultImageEl {
-  
 }
 /* ===== 数据动效 =========  */
@@ -494,7 +493,7 @@
 .video-panel-org__override .layui-form-item {
   display: flex;
 }
-.video-panel-org__override .layui-form-item  label{
+.video-panel-org__override .layui-form-item label {
   width: 60px;
   box-sizing: border-box;
 }
@@ -502,3 +501,33 @@
   flex: auto;
   margin-left: 0;
 }
+
+/* 参数设置按钮 */
+.param-setting-button {
+  color: #fff;
+  border-color: #1890ff;
+  background: #1890ff;
+  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
+  box-shadow: 0 2px #0000000b;
+
+  line-height: 1.5715;
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  white-space: nowrap;
+  text-align: center;
+  background-image: none;
+  border: 1px solid transparent;
+  box-shadow: 0 2px #00000004;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  touch-action: manipulation;
+  height: 32px;
+  padding: 4px 15px;
+  font-size: 14px;
+  border-radius: 2px;
+}