@zhangqingcq/vgce 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zhangqingcq/vgce",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -125,7 +125,7 @@ export const connection_line_system: ISystemStraightLine = {
125
125
  color: {
126
126
  title: '颜色',
127
127
  type: EConfigItemPropsType.Color,
128
- val: '#0a7ae2'
128
+ val: '#602a00'
129
129
  },
130
130
  reverse: {
131
131
  title: '反转动画',
@@ -47,7 +47,7 @@
47
47
  fill="none"
48
48
  fill-opacity="0"
49
49
  stroke="#DE4517"
50
- :stroke-width="props.itemInfo.props['stroke-width'].val + 1"
50
+ :stroke-width="Math.ceil(props.itemInfo.props['stroke-width'].val * 1.2) + 1"
51
51
  stroke-linecap="round"
52
52
  stroke-linejoin="round"
53
53
  v-show="props.itemInfo.selected || props.itemInfo.id === globalStore.handle_svg_info?.info.id"
@@ -143,7 +143,7 @@
143
143
  :r="props.itemInfo.props.point_r.val + 1"
144
144
  fill="none"
145
145
  fill-opacity="0"
146
- stroke-width="1"
146
+ :stroke-width="Math.ceil(props.itemInfo.props.point_r.val * 0.2) + 1"
147
147
  stroke="#DE4517"
148
148
  v-show="props.itemInfo.selected || props.itemInfo.id === globalStore.handle_svg_info?.info.id"
149
149
  />
@@ -233,7 +233,16 @@
233
233
  sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
234
234
  console.log(topics)
235
235
  console.log(message.toString())
236
- //暂时先暴露给外部,让用户自己处理消息,后期功能会补上
236
+ //暴露给外部,让用户自己处理消息,message可以用JSON.parse解析成对象(后端推给前端的MQTT消息内容需要是JSON格式)
237
+ //用户拿到消息后可以配合setNodeAttrByID方法更新界面
238
+ //setNodeAttrByID的参数id可以在传给本组件的props.data(用户传进来的,自然知道值是多少)里done_json找到
239
+ /*如何找到指定组件的两种方案:
240
+ 1.用你的项目里前后端约定的svg组件唯一标识符替换掉编辑器生成的id(必须保证唯一),然后调用setNodeAttrByID改变组件属性。
241
+ 2.如果不想改动id(避免因不能保证手动改过的id唯一性导致编辑器功能异常),可以在config里给想要改变的组件的配置文件的props里增加一个字段,
242
+ 如deviceCode(svg-text的配置文件里有被注释的例子),然后在编辑组态时,给对应组件填上对应的deviceCode(这样deviceCode就和组件id实现
243
+ 了映射关系),并保存,后台给前台推MQTT消息时带上指定的deviceCode,前台预览时,在收到MQTT消息后,凭借消息里的deviceCode找在done_json
244
+ 找到组件的id(可以用vue的computed计算一份deviceCode和id的映射关系存到一个对象里,这样在需要id时可直接在计算出的对象凭借deviceCode
245
+ 直接取到),即可用setNodeAttrByID改变组件属性*/
237
246
  emit('onMessage', {
238
247
  topics,
239
248
  message
@@ -242,6 +251,13 @@
242
251
  }
243
252
  }
244
253
 
254
+ /**
255
+ * 根据组件id设置相应属性
256
+ * @param id done_json里元素的id
257
+ * @param attr 属性,如svg-text的文字内容是:props.text.val
258
+ * @param val 需要设置的值
259
+ * @example setNodeAttrByID('Q5cZBSDXTP','props.text.val','新的文字内容')
260
+ */
245
261
  const setNodeAttrByID = (id: string, attr: string, val: any) => {
246
262
  return setArrItemByID(id, attr, val, preview_data.done_json)
247
263
  }
@@ -13,6 +13,11 @@ export const svg_text: IConfigItem = {
13
13
  actual_rect: true
14
14
  },
15
15
  props: {
16
+ /*deviceCode:{
17
+ title:'设备编码',
18
+ type:EConfigItemPropsType.Input,
19
+ val:''
20
+ },*/
16
21
  text: {
17
22
  title: '文字内容',
18
23
  type: EConfigItemPropsType.Textarea,
@@ -6,7 +6,8 @@ let client: MqttClient
6
6
  export const sub = (url: string, user: string, pwd: string, topics: string, callback: Function) => {
7
7
  client = connect(url, {
8
8
  username: user,
9
- password: pwd
9
+ password: pwd,
10
+ reconnectPeriod: 600000 /*如果连不上,10分钟后重试*/
10
11
  })
11
12
 
12
13
  client.on('connect', () => {