@zhangqingcq/vgce 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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-editor/left-panel.vue

@@ -1,5 +1,6 @@
 <!--左侧工具栏-->
 <script lang="ts" setup>
+	import { isEmpty } from 'lodash-es'
 	import { ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus'
 	import type { IConfig, IConfigItem } from '@/config/types'
 	import { pinia } from '@/hooks'
@@ -23,7 +24,16 @@
 		'echarts'
 	])
 	const createBegin = (svg_item: IConfigItem) => {
-		globalStore.setCreateInfo(svg_item)
+		globalStore.setCreateInfo(sortProps(svg_item))
+	}
+
+	const sortProps = (svg_item: IConfigItem): IConfigItem => {
+		if (svg_item?.props && !isEmpty(svg_item.props)) {
+			Object.keys(svg_item.props).forEach((k, i) => {
+				svg_item.props[k].sort = String(i)
+			})
+		}
+		return svg_item
 	}
 	const dragEndEvent = (e: DragEvent) => {
 		//拖动时记录拖动的svg信息

package/src/components/svg-editor/right-panel/dynamic-el-form-item.vue

@@ -21,6 +21,38 @@
 		code: false
 	})
 
+	const _objInfo = computed(() => {
+		const keys: Record<string, any> = {}
+		let l = 0
+		let t = []
+		for (let k of Object.keys(props.objInfo)) {
+			const s = props.objInfo[k]?.sort
+			if (s) {
+				const _s = Number(s)
+				if (_s > l) {
+					l = _s
+				}
+			}
+			if (s) {
+				keys[s] = k
+			} else {
+				return Object.keys(props.objInfo).map((k) => ({
+					...props.objInfo[k],
+					_key: k
+				}))
+			}
+		}
+
+		for (let i = 0; i < l + 1; i++) {
+			const _i = String(i)
+			t.push({
+				...props.objInfo[keys[_i]],
+				_key: keys[_i]
+			})
+		}
+		return t
+	})
+
 	function propsChangeHandle(e: any) {
 		let t: any = window.setTimeout(function () {
 			emit('change', e)
@@ -31,19 +63,19 @@
 </script>
 
 <template>
-	<div v-for="(attr_item, key) in props.objInfo" :key="key">
+	<div v-for="attr_item in _objInfo" :key="attr_item._key">
 		<!--表单项上显示的灰色值-->
 		<el-form-item v-if="props.code" class="props-row" size="small">
 			<template #label>
 				<el-tooltip
-					:content="String(key)"
-					v-if="getStringWidth(String(key)) > 78"
+					:content="String(attr_item._key)"
+					v-if="getStringWidth(String(attr_item._key)) > 78"
 					placement="left"
 					popper-class="props-popper"
 				>
-					<div class="one-row-txt" style="width: 78px">{{ key }}</div>
+					<div class="one-row-txt" style="width: 78px">{{ attr_item._key }}</div>
 				</el-tooltip>
-				<span v-else>{{ key }}</span>
+				<span v-else>{{ attr_item._key }}</span>
 			</template>
 			<el-tooltip
 				:content="JSON.stringify(attr_item.val)"
@@ -56,10 +88,10 @@
 			<span v-else>{{ attr_item.val }}</span>
 		</el-form-item>
 		<!--props-->
-		<el-form-item :label="attr_item.title" size="small" v-if="props.hide.indexOf(String(key)) < 0">
+		<el-form-item :label="attr_item.title" size="small" v-if="props.hide.indexOf(String(attr_item._key)) < 0">
 			<el-select
 				v-if="attr_item.type === EConfigItemPropsType.Select"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				placeholder="Select"
 				size="small"
 				:disabled="Boolean(attr_item?.disabled)"
@@ -69,19 +101,19 @@
 			</el-select>
 			<el-input-number
 				v-else-if="attr_item.type === EConfigItemPropsType.InputNumber"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Input"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Textarea"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				autosize
 				type="textarea"
 				:disabled="Boolean(attr_item?.disabled)"
@@ -89,19 +121,19 @@
 			/>
 			<el-color-picker
 				v-else-if="attr_item.type === EConfigItemPropsType.Color"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<el-switch
 				v-else-if="attr_item.type === EConfigItemPropsType.Switch"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<code-edit-modal
 				v-else-if="attr_item.type === EConfigItemPropsType.JsonEdit"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@close="propsChangeHandle"
 			/>
@@ -119,8 +151,4 @@
 	.props-popper {
 		max-width: 350px;
 	}
-	sdf {
-		color: rgb(245, 247, 250);
-		background-color: rgb(92, 184, 122);
-	}
 </style>

package/src/components/svg-viewer.vue

@@ -240,7 +240,7 @@
 				1.用你的项目里前后端约定的svg组件唯一标识符替换掉编辑器生成的id（必须保证唯一），然后调用setNodeAttrByID改变组件属性。
 				2.如果不想改动id（避免因不能保证手动改过的id唯一性导致编辑器功能异常），可以在config里给想要改变的组件的配置文件的props里增加一个字段，
 				如deviceCode(svg-text的配置文件里有被注释的例子)，然后在编辑组态时，给对应组件填上对应的deviceCode（这样deviceCode就和组件id实现
-				了映射关系），并保存，后台给前台推MQTT消息时带上指定的deviceCode，前台预览时，在收到MQTT消息后，凭借消息里的deviceCode找在done_json
+				了映射关系），并保存，后台给前台推MQTT消息时带上指定的deviceCode，前台预览时，在收到MQTT消息后，凭借消息里的deviceCode在done_json
 				找到组件的id（可以用vue的computed计算一份deviceCode和id的映射关系存到一个对象里，这样在需要id时可直接在计算出的对象凭借deviceCode
 				直接取到），即可用setNodeAttrByID改变组件属性*/
 				emit('onMessage', {

package/src/config/types.ts

@@ -36,6 +36,7 @@ export interface IConfigItemProps {
 		val: any
 		options?: any
 		disabled?: boolean
+		sort?: string
 	}
 }
 

package/src/utils/mqtt-net.ts

@@ -4,9 +4,14 @@ 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分钟后重试*/
 	})
 
@@ -20,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', () => {