@zhangqingcq/vgce 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"
@@ -60,7 +60,7 @@
     "echarts": "^5.4.1",
     "element-plus": "^2.3.8",
     "lodash-es": "^4.17.21",
-    "mqtt": "^4.3.7",
+    "mqtt": "^5.1.3",
     "pinia": "^2.1.3",
     "vue": "^3.3.4",
     "vue-echarts": "^6.5.1",

package/src/components/svg-viewer.vue

@@ -233,7 +233,16 @@
 			sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
 				console.log(topics)
 				console.log(message.toString())
-				//暂时先暴露给外部，让用户自己处理消息，后期功能会补上
+				//暴露给外部，让用户自己处理消息，message可以用JSON.parse解析成对象（后端推给前端的MQTT消息内容需要是JSON格式）
+				//用户拿到消息后可以配合setNodeAttrByID方法更新界面
+				//setNodeAttrByID的参数id可以在传给本组件的props.data（用户传进来的，自然知道值是多少）里done_json找到
+				/*如何找到指定组件的两种方案：
+				1.用你的项目里前后端约定的svg组件唯一标识符替换掉编辑器生成的id（必须保证唯一），然后调用setNodeAttrByID改变组件属性。
+				2.如果不想改动id（避免因不能保证手动改过的id唯一性导致编辑器功能异常），可以在config里给想要改变的组件的配置文件的props里增加一个字段，
+				如deviceCode(svg-text的配置文件里有被注释的例子)，然后在编辑组态时，给对应组件填上对应的deviceCode（这样deviceCode就和组件id实现
+				了映射关系），并保存，后台给前台推MQTT消息时带上指定的deviceCode，前台预览时，在收到MQTT消息后，凭借消息里的deviceCode在done_json
+				找到组件的id（可以用vue的computed计算一份deviceCode和id的映射关系存到一个对象里，这样在需要id时可直接在计算出的对象凭借deviceCode
+				直接取到），即可用setNodeAttrByID改变组件属性*/
 				emit('onMessage', {
 					topics,
 					message
@@ -242,6 +251,13 @@
 		}
 	}
 
+	/**
+	 * 根据组件id设置相应属性
+	 * @param id done_json里元素的id
+	 * @param attr 属性，如svg-text的文字内容是：props.text.val
+	 * @param val 需要设置的值
+	 * @example setNodeAttrByID('Q5cZBSDXTP','props.text.val','新的文字内容')
+	 */
 	const setNodeAttrByID = (id: string, attr: string, val: any) => {
 		return setArrItemByID(id, attr, val, preview_data.done_json)
 	}

package/src/config/svg/custom/svg-text.ts

@@ -13,6 +13,11 @@ export const svg_text: IConfigItem = {
 		actual_rect: true
 	},
 	props: {
+		/*deviceCode:{
+			title:'设备编码',
+			type:EConfigItemPropsType.Input,
+			val:''
+		},*/
 		text: {
 			title: '文字内容',
 			type: EConfigItemPropsType.Textarea,

package/src/utils/mqtt-net.ts

@@ -4,9 +4,15 @@ import type { MqttClient, PacketCallback } from 'mqtt'
 let client: MqttClient
 
 export const sub = (url: string, user: string, pwd: string, topics: string, callback: Function) => {
-	client = connect(url, {
-		username: user,
-		password: pwd
+	const _url = url.trim()
+	if (!/^wss?:\/\/.*$/.test(_url)) {
+		console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
+		return
+	}
+	client = connect(_url, {
+		username: user.trim(),
+		password: pwd.trim(),
+		reconnectPeriod: 600000 /*如果连不上，10分钟后重试*/
 	})
 
 	client.on('connect', () => {
@@ -19,9 +25,14 @@ export const sub = (url: string, user: string, pwd: string, topics: string, call
 }
 
 export const pub = (url: string, user: string, pwd: string, topics: string, data: any, callback: PacketCallback) => {
-	client = connect(url, {
-		username: user,
-		password: pwd
+	const _url = url.trim()
+	if (!/^wss?:\/\/.*$/.test(_url)) {
+		console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
+		return
+	}
+	client = connect(_url, {
+		username: user.trim(),
+		password: pwd.trim()
 	})
 
 	client.on('connect', () => {