vue-wiring-diagram 1.1.19 → 1.1.21
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/dist/style.css +1 -1
- package/dist/vue-wiring-diagram.es.js +4711 -4664
- package/dist/vue-wiring-diagram.umd.js +35 -35
- package/package.json +1 -1
- package/packages/components/edge-control/arrow-line.vue +187 -169
- package/packages/components/edge-control/index.vue +48 -44
- package/packages/components/edge-control/pipe-line.vue +252 -225
- package/packages/components/text-control/index.vue +103 -33
- package/packages/components/tools.js +1 -1
|
@@ -3,173 +3,196 @@
|
|
|
3
3
|
* @Date: 2024/10/24 09:42
|
|
4
4
|
*/
|
|
5
5
|
<template>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
</
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
6
|
+
<div class="container">
|
|
7
|
+
<el-collapse v-model="activeName" accordion>
|
|
8
|
+
<el-collapse-item title="线段设置" name="0">
|
|
9
|
+
<div class="row-column">
|
|
10
|
+
<el-row :gutter="20">
|
|
11
|
+
<el-col :span="12">
|
|
12
|
+
<div class="row-label">颜色1</div>
|
|
13
|
+
</el-col>
|
|
14
|
+
<el-col :span="12">
|
|
15
|
+
<el-color-picker v-model="stroke1" :show-alpha="true" size="small" @change="changeLine"/>
|
|
16
|
+
</el-col>
|
|
17
|
+
</el-row>
|
|
18
|
+
<el-row :gutter="20">
|
|
19
|
+
<el-col :span="12">
|
|
20
|
+
<div class="row-label">颜色2</div>
|
|
21
|
+
</el-col>
|
|
22
|
+
<el-col :span="12">
|
|
23
|
+
<el-color-picker v-model="stroke2" :show-alpha="true" size="small" @change="changeLine"/>
|
|
24
|
+
</el-col>
|
|
25
|
+
</el-row>
|
|
26
|
+
<el-row :gutter="20">
|
|
27
|
+
<el-col :span="12">
|
|
28
|
+
<div class="row-label">粗细</div>
|
|
29
|
+
</el-col>
|
|
30
|
+
<el-col :span="12">
|
|
31
|
+
<el-input-number v-model="strokeWidth" size="small" controls-position="right"
|
|
32
|
+
@change="changeLine" :min="1" :max="10"
|
|
33
|
+
:step="1"/>
|
|
34
|
+
</el-col>
|
|
35
|
+
</el-row>
|
|
36
|
+
</div>
|
|
37
|
+
</el-collapse-item>
|
|
38
|
+
<el-collapse-item title="管道设置" name="1">
|
|
39
|
+
<div class="row-column">
|
|
40
|
+
<el-row :gutter="20">
|
|
41
|
+
<el-col :span="12">
|
|
42
|
+
<div class="row-label">管道间隔</div>
|
|
43
|
+
</el-col>
|
|
44
|
+
<el-col :span="12">
|
|
45
|
+
<el-input-number v-model="strokeDasharray" size="small" controls-position="right"
|
|
46
|
+
@change="changeLine" :min="5" :max="100"
|
|
47
|
+
:step="1"/>
|
|
48
|
+
</el-col>
|
|
49
|
+
</el-row>
|
|
50
|
+
<el-row :gutter="20">
|
|
51
|
+
<el-col :span="12">
|
|
52
|
+
<div class="row-label">默认流动方向</div>
|
|
53
|
+
</el-col>
|
|
54
|
+
<el-col :span="12">
|
|
55
|
+
<el-select v-model="strokeDashoffset" placeholder="请选择管道方向" size="small"
|
|
56
|
+
@change="changeLine">
|
|
57
|
+
<el-option v-for="item in directionList" :key="item.value" :label="item.label"
|
|
58
|
+
:value="item.value">
|
|
59
|
+
</el-option>
|
|
60
|
+
</el-select>
|
|
61
|
+
</el-col>
|
|
62
|
+
</el-row>
|
|
63
|
+
<el-row :gutter="20">
|
|
64
|
+
<el-col :span="12">
|
|
65
|
+
<div class="row-label">参数设置</div>
|
|
66
|
+
</el-col>
|
|
67
|
+
<el-col :span="12">
|
|
68
|
+
<el-select v-model="deviceCode" placeholder="请选择设备" @change="checkDevice" size="small"
|
|
69
|
+
filterable clearable>
|
|
70
|
+
<el-option v-for="item in deviceList" :key="item.deviceCode" :label="item.deviceName"
|
|
71
|
+
:value="item.deviceCode"/>
|
|
72
|
+
</el-select>
|
|
73
|
+
<el-select v-model="fieldCode" placeholder="请选择字段" @change="checkField" size="small"
|
|
74
|
+
filterable clearable style="margin-top: 10px">
|
|
75
|
+
<el-option v-for="item in fieldList" :key="item.dataField" :label="item.name"
|
|
76
|
+
:value="item.dataField"/>
|
|
77
|
+
</el-select>
|
|
78
|
+
</el-col>
|
|
79
|
+
</el-row>
|
|
80
|
+
<el-row :gutter="20">
|
|
81
|
+
<el-col :span="12">
|
|
82
|
+
<div class="row-label">条件配置</div>
|
|
83
|
+
</el-col>
|
|
84
|
+
<el-col :span="12">
|
|
85
|
+
<el-switch v-model="isCondition" :active-value="true" :inactive-value="false" size="small"
|
|
86
|
+
@change="changeCondition"/>
|
|
87
|
+
<el-button type="primary" size="small" @click="showCondition" style="margin-left: 10px">
|
|
88
|
+
配置
|
|
89
|
+
</el-button>
|
|
90
|
+
</el-col>
|
|
91
|
+
</el-row>
|
|
92
|
+
</div>
|
|
93
|
+
</el-collapse-item>
|
|
94
|
+
<el-collapse-item title="箭头1设置" name="2">
|
|
95
|
+
<div class="row-column">
|
|
96
|
+
<el-row :gutter="20">
|
|
97
|
+
<el-col :span="12">
|
|
98
|
+
<div class="row-label">类型</div>
|
|
99
|
+
</el-col>
|
|
100
|
+
<el-col :span="12">
|
|
101
|
+
<el-select v-model="sourceMarker.name" placeholder="请选择箭头类型" clearable size="small"
|
|
102
|
+
@change="changeLine">
|
|
103
|
+
<el-option v-for="item in arrowList" :key="item.value" :label="item.label"
|
|
104
|
+
:value="item.value">
|
|
105
|
+
</el-option>
|
|
106
|
+
</el-select>
|
|
107
|
+
</el-col>
|
|
108
|
+
</el-row>
|
|
109
|
+
<el-row :gutter="20">
|
|
110
|
+
<el-col :span="12">
|
|
111
|
+
<div class="row-label">宽</div>
|
|
112
|
+
</el-col>
|
|
113
|
+
<el-col :span="12">
|
|
114
|
+
<el-input-number v-model="sourceMarker.args.width" size="small" controls-position="right"
|
|
115
|
+
@change="changeLine" :min="0" :max="10"
|
|
116
|
+
:step="1"/>
|
|
117
|
+
</el-col>
|
|
118
|
+
</el-row>
|
|
119
|
+
<el-row :gutter="20">
|
|
120
|
+
<el-col :span="12">
|
|
121
|
+
<div class="row-label">高</div>
|
|
122
|
+
</el-col>
|
|
123
|
+
<el-col :span="12">
|
|
124
|
+
<el-input-number v-model="sourceMarker.args.height" size="small" controls-position="right"
|
|
125
|
+
@change="changeLine" :min="0" :max="10"
|
|
126
|
+
:step="1"/>
|
|
127
|
+
</el-col>
|
|
128
|
+
</el-row>
|
|
129
|
+
<el-row :gutter="20">
|
|
130
|
+
<el-col :span="12">
|
|
131
|
+
<div class="row-label">偏移</div>
|
|
132
|
+
</el-col>
|
|
133
|
+
<el-col :span="12">
|
|
134
|
+
<el-input-number v-model="sourceMarker.args.offset" size="small" controls-position="right"
|
|
135
|
+
@change="changeLine" :min="0" :max="10"
|
|
136
|
+
:step="1"/>
|
|
137
|
+
</el-col>
|
|
138
|
+
</el-row>
|
|
139
|
+
</div>
|
|
140
|
+
</el-collapse-item>
|
|
141
|
+
<el-collapse-item title="箭头2设置" name="3">
|
|
142
|
+
<div class="row-column">
|
|
143
|
+
<el-row :gutter="20">
|
|
144
|
+
<el-col :span="12">
|
|
145
|
+
<div class="row-label">类型</div>
|
|
146
|
+
</el-col>
|
|
147
|
+
<el-col :span="12">
|
|
148
|
+
<el-select v-model="targetMarker.name" placeholder="请选择箭头类型" clearable size="small"
|
|
149
|
+
@change="changeLine">
|
|
150
|
+
<el-option v-for="item in arrowList" :key="item.value" :label="item.label"
|
|
151
|
+
:value="item.value">
|
|
152
|
+
</el-option>
|
|
153
|
+
</el-select>
|
|
154
|
+
</el-col>
|
|
155
|
+
</el-row>
|
|
156
|
+
<el-row :gutter="20">
|
|
157
|
+
<el-col :span="12">
|
|
158
|
+
<div class="row-label">宽</div>
|
|
159
|
+
</el-col>
|
|
160
|
+
<el-col :span="12">
|
|
161
|
+
<el-input-number v-model="targetMarker.args.width" size="small" controls-position="right"
|
|
162
|
+
@change="changeLine" :min="0" :max="10"
|
|
163
|
+
:step="1"/>
|
|
164
|
+
</el-col>
|
|
165
|
+
</el-row>
|
|
166
|
+
<el-row :gutter="20">
|
|
167
|
+
<el-col :span="12">
|
|
168
|
+
<div class="row-label">高</div>
|
|
169
|
+
</el-col>
|
|
170
|
+
<el-col :span="12">
|
|
171
|
+
<el-input-number v-model="targetMarker.args.height" size="small" controls-position="right"
|
|
172
|
+
@change="changeLine" :min="0" :max="10"
|
|
173
|
+
:step="1"/>
|
|
174
|
+
</el-col>
|
|
175
|
+
</el-row>
|
|
176
|
+
<el-row :gutter="20">
|
|
177
|
+
<el-col :span="12">
|
|
178
|
+
<div class="row-label">偏移</div>
|
|
179
|
+
</el-col>
|
|
180
|
+
<el-col :span="12">
|
|
181
|
+
<el-input-number v-model="targetMarker.args.offset" size="small" controls-position="right"
|
|
182
|
+
@change="changeLine" :min="0" :max="10"
|
|
183
|
+
:step="1"/>
|
|
184
|
+
</el-col>
|
|
185
|
+
</el-row>
|
|
186
|
+
</div>
|
|
187
|
+
</el-collapse-item>
|
|
188
|
+
</el-collapse>
|
|
189
|
+
<el-dialog v-model="dialogCondition.show" width="500px" title="条件配置" :show-close="false"
|
|
190
|
+
:close-on-click-modal="false"
|
|
191
|
+
:close-on-press-escape="false">
|
|
192
|
+
<condition v-if="dialogCondition.show" :payload="dialogCondition.payload" type="pipe"
|
|
193
|
+
@close="closeCondition"></condition>
|
|
194
|
+
</el-dialog>
|
|
195
|
+
</div>
|
|
173
196
|
</template>
|
|
174
197
|
|
|
175
198
|
<script setup>
|
|
@@ -181,7 +204,11 @@ import Condition from "packages/components/edge-control/condition.vue";
|
|
|
181
204
|
import {getDeviceList, getFieldList} from "packages/components/common.js";
|
|
182
205
|
|
|
183
206
|
const props = defineProps({
|
|
184
|
-
|
|
207
|
+
payload: Object,
|
|
208
|
+
itemId: {
|
|
209
|
+
type: String,
|
|
210
|
+
default: ''
|
|
211
|
+
}
|
|
185
212
|
})
|
|
186
213
|
|
|
187
214
|
const activeName = ref('0')
|
|
@@ -192,32 +219,32 @@ const strokeWidth = ref(props.payload.attrs.line.strokeWidth)
|
|
|
192
219
|
const strokeDasharray = ref(props.payload.attrs.pipe.strokeDasharray)
|
|
193
220
|
const strokeDashoffset = ref(props.payload.attrs.pipe?.style?.animation.split(' ')[0] ?? STOP)
|
|
194
221
|
const sourceMarker = reactive({
|
|
195
|
-
|
|
196
|
-
|
|
222
|
+
name: props.payload.attrs.pipe.sourceMarker?.name ?? null,
|
|
223
|
+
args: props.payload.attrs.pipe.sourceMarker?.args ?? {}
|
|
197
224
|
})
|
|
198
225
|
const targetMarker = reactive({
|
|
199
|
-
|
|
200
|
-
|
|
226
|
+
name: props.payload.attrs.pipe.targetMarker?.name ?? null,
|
|
227
|
+
args: props.payload.attrs.pipe.targetMarker?.args ?? {}
|
|
201
228
|
})
|
|
202
229
|
|
|
203
230
|
/**
|
|
204
231
|
* 线段属性改变
|
|
205
232
|
*/
|
|
206
233
|
const changeLine = () => {
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
234
|
+
props.payload.attr('line/stroke', stroke1.value)
|
|
235
|
+
props.payload.attr('pipe/stroke', stroke2.value)
|
|
236
|
+
props.payload.attr('line/strokeWidth', strokeWidth.value)
|
|
237
|
+
props.payload.attr('pipe/strokeWidth', strokeWidth.value)
|
|
238
|
+
props.payload.attr('pipe/strokeDasharray', strokeDasharray.value)
|
|
239
|
+
props.payload.attr('pipe/sourceMarker/name', sourceMarker.name)
|
|
240
|
+
props.payload.attr('pipe/sourceMarker/args', sourceMarker.args)
|
|
241
|
+
props.payload.attr('pipe/targetMarker/name', targetMarker.name)
|
|
242
|
+
props.payload.attr('pipe/targetMarker/args', targetMarker.args)
|
|
243
|
+
props.payload.attr('pipe/style/animation', setPipeDirection(strokeDashoffset.value))
|
|
244
|
+
lineOptions.markup = props.payload.markup
|
|
245
|
+
lineOptions.attrs = props.payload.attrs
|
|
246
|
+
console.log('线-基础配置', lineOptions)
|
|
247
|
+
console.log('线-当前配置', props.payload)
|
|
221
248
|
}
|
|
222
249
|
|
|
223
250
|
// 条件线是否开启
|
|
@@ -227,21 +254,21 @@ const isCondition = ref(props.payload.data.isCondition ?? false)
|
|
|
227
254
|
* 条件线改变
|
|
228
255
|
*/
|
|
229
256
|
const changeCondition = () => {
|
|
230
|
-
|
|
257
|
+
props.payload.data.isCondition = isCondition.value
|
|
231
258
|
}
|
|
232
259
|
|
|
233
260
|
// 条件线配置
|
|
234
261
|
const dialogCondition = reactive({
|
|
235
|
-
|
|
236
|
-
|
|
262
|
+
show: false,
|
|
263
|
+
payload: null
|
|
237
264
|
})
|
|
238
265
|
|
|
239
266
|
/**
|
|
240
267
|
* 条件线配置显示
|
|
241
268
|
*/
|
|
242
269
|
const showCondition = () => {
|
|
243
|
-
|
|
244
|
-
|
|
270
|
+
dialogCondition.show = true
|
|
271
|
+
dialogCondition.payload = props.payload.data.condition ?? []
|
|
245
272
|
}
|
|
246
273
|
|
|
247
274
|
/**
|
|
@@ -249,12 +276,12 @@ const showCondition = () => {
|
|
|
249
276
|
* @param condition
|
|
250
277
|
*/
|
|
251
278
|
const closeCondition = (condition) => {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
279
|
+
dialogCondition.show = false
|
|
280
|
+
dialogCondition.payload = null
|
|
281
|
+
if (condition) {
|
|
282
|
+
props.payload.data.condition = condition
|
|
283
|
+
}
|
|
284
|
+
console.log('条件线', props.payload.data)
|
|
258
285
|
}
|
|
259
286
|
|
|
260
287
|
const deviceList = ref([]) // 设备列表
|
|
@@ -265,10 +292,10 @@ const fieldCode = ref(props.payload.data?.fields?.[0]?.field ?? '') // 字段编
|
|
|
265
292
|
* 获取设备列表
|
|
266
293
|
*/
|
|
267
294
|
const getDevices = async () => {
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
295
|
+
deviceList.value = await getDeviceList(props.itemId)
|
|
296
|
+
if (deviceCode.value) {
|
|
297
|
+
checkDevice()
|
|
298
|
+
}
|
|
272
299
|
}
|
|
273
300
|
|
|
274
301
|
let currentDevice = reactive({}) // 当前设备信息
|
|
@@ -277,21 +304,21 @@ let currentDevice = reactive({}) // 当前设备信息
|
|
|
277
304
|
* 监听设备编码变化
|
|
278
305
|
*/
|
|
279
306
|
const checkDevice = () => {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
307
|
+
currentDevice = deviceList.value.find(item => item.deviceCode === deviceCode.value)
|
|
308
|
+
if (currentDevice) {
|
|
309
|
+
getFields()
|
|
310
|
+
props.payload.data.fields = [{
|
|
311
|
+
index: 0,
|
|
312
|
+
deviceName: currentDevice.deviceName,
|
|
313
|
+
deviceCode: currentDevice.deviceCode,
|
|
314
|
+
field: fieldCode.value ?? '',
|
|
315
|
+
}]
|
|
316
|
+
fieldCode.value = props.payload.data.fields[0].field
|
|
317
|
+
} else {
|
|
318
|
+
fieldCode.value = ''
|
|
319
|
+
props.payload.data.fields = []
|
|
320
|
+
}
|
|
321
|
+
console.log('管道配置', props.payload)
|
|
295
322
|
}
|
|
296
323
|
|
|
297
324
|
const fieldList = ref([])
|
|
@@ -300,24 +327,24 @@ const fieldList = ref([])
|
|
|
300
327
|
* 获取字段列表
|
|
301
328
|
*/
|
|
302
329
|
const getFields = async () => {
|
|
303
|
-
|
|
330
|
+
fieldList.value = await getFieldList(currentDevice.deviceCode)
|
|
304
331
|
}
|
|
305
332
|
|
|
306
333
|
/**
|
|
307
334
|
* 监听字段编码变化
|
|
308
335
|
*/
|
|
309
336
|
const checkField = () => {
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
337
|
+
props.payload.data.fields = [{
|
|
338
|
+
index: 0,
|
|
339
|
+
deviceName: currentDevice.deviceName,
|
|
340
|
+
deviceCode: currentDevice.deviceCode,
|
|
341
|
+
field: fieldCode.value ?? '',
|
|
342
|
+
}]
|
|
343
|
+
console.log('管道配置', props.payload)
|
|
317
344
|
}
|
|
318
345
|
|
|
319
346
|
onMounted(() => {
|
|
320
|
-
|
|
347
|
+
getDevices()
|
|
321
348
|
})
|
|
322
349
|
</script>
|
|
323
350
|
|