vue-wiring-diagram 1.1.20 → 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 +26 -11
- package/dist/vue-wiring-diagram.umd.js +26 -26
- 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/package.json
CHANGED
|
@@ -3,110 +3,124 @@
|
|
|
3
3
|
* @Date: 2025/4/9 14:13
|
|
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
|
-
|
|
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">颜色</div>
|
|
13
|
+
</el-col>
|
|
14
|
+
<el-col :span="12">
|
|
15
|
+
<el-color-picker v-model="stroke" :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">粗细</div>
|
|
21
|
+
</el-col>
|
|
22
|
+
<el-col :span="12">
|
|
23
|
+
<el-input-number v-model="strokeWidth" size="small" controls-position="right"
|
|
24
|
+
@change="changeLine" :min="1" :max="10"
|
|
25
|
+
:step="1"/>
|
|
26
|
+
</el-col>
|
|
27
|
+
</el-row>
|
|
28
|
+
</div>
|
|
29
|
+
</el-collapse-item>
|
|
30
|
+
<el-collapse-item title="箭头设置" name="1">
|
|
31
|
+
<div class="row-column">
|
|
32
|
+
<el-row :gutter="20">
|
|
33
|
+
<el-col :span="12">
|
|
34
|
+
<div class="row-label">箭头数量</div>
|
|
35
|
+
</el-col>
|
|
36
|
+
<el-col :span="12">
|
|
37
|
+
<el-input-number v-model="arrowNumber" size="small" controls-position="right"
|
|
38
|
+
@change="changeLine" :min="1" :max="20"
|
|
39
|
+
:step="1"/>
|
|
40
|
+
</el-col>
|
|
41
|
+
</el-row>
|
|
42
|
+
<el-row :gutter="20">
|
|
43
|
+
<el-col :span="12">
|
|
44
|
+
<div class="row-label">箭头颜色</div>
|
|
45
|
+
</el-col>
|
|
46
|
+
<el-col :span="12">
|
|
47
|
+
<el-color-picker v-model="fill" :show-alpha="true" size="small" @change="changeLine"/>
|
|
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="direction" size="small" @change="changeLine">
|
|
56
|
+
<el-option v-for="item in arrowDirection" :key="item.value" :label="item.label"
|
|
57
|
+
:value="item.value"/>
|
|
58
|
+
</el-select>
|
|
59
|
+
</el-col>
|
|
60
|
+
</el-row>
|
|
61
|
+
<el-row :gutter="20">
|
|
62
|
+
<el-col :span="12">
|
|
63
|
+
<div class="row-label">默认箭头动作</div>
|
|
64
|
+
</el-col>
|
|
65
|
+
<el-col :span="12">
|
|
66
|
+
<el-switch v-model="animation" :active-value="FLASHING" active-text="闪烁"
|
|
67
|
+
:inactive-value="STOP" inactive-text="静止" size="small"
|
|
68
|
+
@change="changeLine"/>
|
|
69
|
+
</el-col>
|
|
70
|
+
</el-row>
|
|
71
|
+
<el-row :gutter="20">
|
|
72
|
+
<el-col :span="12">
|
|
73
|
+
<div class="row-label">默认箭头显示</div>
|
|
74
|
+
</el-col>
|
|
75
|
+
<el-col :span="12">
|
|
76
|
+
<el-switch v-model="display" active-value="block" active-text="显示" inactive-value="none"
|
|
77
|
+
inactive-text="隐藏" size="small"
|
|
78
|
+
@change="changeLine"/>
|
|
79
|
+
</el-col>
|
|
80
|
+
</el-row>
|
|
81
|
+
</div>
|
|
82
|
+
</el-collapse-item>
|
|
83
|
+
<el-collapse-item title="动态设置" name="2">
|
|
84
|
+
<div class="row-column">
|
|
85
|
+
<el-row :gutter="20">
|
|
86
|
+
<el-col :span="12">
|
|
87
|
+
<div class="row-label">参数设置</div>
|
|
88
|
+
</el-col>
|
|
89
|
+
<el-col :span="12">
|
|
90
|
+
<el-select v-model="deviceCode" placeholder="请选择设备" @change="checkDevice" size="small"
|
|
91
|
+
filterable clearable>
|
|
92
|
+
<el-option v-for="item in deviceList" :key="item.deviceCode" :label="item.deviceName"
|
|
93
|
+
:value="item.deviceCode"/>
|
|
94
|
+
</el-select>
|
|
95
|
+
<el-select v-model="fieldCode" placeholder="请选择字段" @change="checkField" size="small"
|
|
96
|
+
filterable clearable style="margin-top: 10px">
|
|
97
|
+
<el-option v-for="item in fieldList" :key="item.dataField" :label="item.name"
|
|
98
|
+
:value="item.dataField"/>
|
|
99
|
+
</el-select>
|
|
100
|
+
</el-col>
|
|
101
|
+
</el-row>
|
|
102
|
+
<el-row :gutter="20">
|
|
103
|
+
<el-col :span="12">
|
|
104
|
+
<div class="row-label">条件配置</div>
|
|
105
|
+
</el-col>
|
|
106
|
+
<el-col :span="12">
|
|
107
|
+
<el-switch v-model="isCondition" :active-value="true" :inactive-value="false" size="small"
|
|
108
|
+
@change="changeCondition"/>
|
|
109
|
+
<el-button type="primary" size="small" @click="showCondition" style="margin-left: 10px">
|
|
110
|
+
配置
|
|
111
|
+
</el-button>
|
|
112
|
+
</el-col>
|
|
113
|
+
</el-row>
|
|
114
|
+
</div>
|
|
115
|
+
</el-collapse-item>
|
|
116
|
+
</el-collapse>
|
|
117
|
+
<el-dialog v-model="dialogCondition.show" width="900px" title="条件配置" :show-close="false"
|
|
118
|
+
:close-on-click-modal="false"
|
|
119
|
+
:close-on-press-escape="false">
|
|
120
|
+
<condition v-if="dialogCondition.show" :payload="dialogCondition.payload" type="arrow"
|
|
121
|
+
@close="closeCondition"></condition>
|
|
122
|
+
</el-dialog>
|
|
123
|
+
</div>
|
|
110
124
|
</template>
|
|
111
125
|
|
|
112
126
|
<script setup>
|
|
@@ -118,9 +132,13 @@ import {getDeviceList, getFieldList} from "packages/components/common.js";
|
|
|
118
132
|
import Condition from "packages/components/edge-control/condition.vue";
|
|
119
133
|
|
|
120
134
|
const props = defineProps({
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
135
|
+
payload: {
|
|
136
|
+
type: Object,
|
|
137
|
+
itemId: {
|
|
138
|
+
type: String,
|
|
139
|
+
default: ''
|
|
140
|
+
}
|
|
141
|
+
}
|
|
124
142
|
})
|
|
125
143
|
|
|
126
144
|
const activeName = ref('0')
|
|
@@ -142,30 +160,30 @@ const display = ref(props.payload.attrs.arrow.display)
|
|
|
142
160
|
* 修改线段样式
|
|
143
161
|
*/
|
|
144
162
|
const changeLine = () => {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
163
|
+
props.payload.attr('line/stroke', stroke.value)
|
|
164
|
+
props.payload.attr('line/strokeWidth', strokeWidth.value)
|
|
165
|
+
props.payload.attr('arrow/fill', fill.value)
|
|
166
|
+
props.payload.attr('arrow/stroke', fill.value)
|
|
167
|
+
// 箭头数量
|
|
168
|
+
if (arrowNumber.value !== oldArrowNumber) {
|
|
169
|
+
props.payload.markup = props.payload.markup.slice(0, 1)
|
|
170
|
+
for (let i = 0; i < arrowNumber.value; i++) {
|
|
171
|
+
props.payload.markup.push({
|
|
172
|
+
tagName: 'path',
|
|
173
|
+
groupSelector: 'arrow',
|
|
174
|
+
selector: 'arrow' + (i + 1),
|
|
175
|
+
})
|
|
176
|
+
props.payload.attr('arrow' + (i + 1), {
|
|
177
|
+
atConnectionRatio: (1 / (arrowNumber.value + 1)) * (i + 1),
|
|
178
|
+
})
|
|
179
|
+
}
|
|
161
180
|
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
lineOptions.attrs = props.payload.attrs
|
|
181
|
+
props.payload.attr('arrow/d', direction.value === ARROWFORWARD ? arrowForward : arrowBackward)
|
|
182
|
+
props.payload.attr('arrow/style/animation', animation.value === FLASHING ? 'flashing 2s infinite linear' : '')
|
|
183
|
+
props.payload.attr('arrow/display', display.value)
|
|
184
|
+
console.log(props.payload.markup)
|
|
185
|
+
lineOptions.markup = props.payload.markup
|
|
186
|
+
lineOptions.attrs = props.payload.attrs
|
|
169
187
|
}
|
|
170
188
|
|
|
171
189
|
const deviceList = ref([]) // 设备列表
|
|
@@ -176,10 +194,10 @@ const fieldCode = ref(props.payload.data?.fields?.[0]?.field ?? '') // 字段编
|
|
|
176
194
|
* 获取设备列表
|
|
177
195
|
*/
|
|
178
196
|
const getDevices = async () => {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
197
|
+
deviceList.value = await getDeviceList(props.itemId)
|
|
198
|
+
if (deviceCode.value) {
|
|
199
|
+
checkDevice()
|
|
200
|
+
}
|
|
183
201
|
}
|
|
184
202
|
|
|
185
203
|
let currentDevice = reactive({}) // 当前设备信息
|
|
@@ -188,21 +206,21 @@ let currentDevice = reactive({}) // 当前设备信息
|
|
|
188
206
|
* 监听设备编码变化
|
|
189
207
|
*/
|
|
190
208
|
const checkDevice = () => {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
209
|
+
currentDevice = deviceList.value.find(item => item.deviceCode === deviceCode.value)
|
|
210
|
+
if (currentDevice) {
|
|
211
|
+
getFields()
|
|
212
|
+
props.payload.data.fields = [{
|
|
213
|
+
index: 0,
|
|
214
|
+
deviceName: currentDevice.deviceName,
|
|
215
|
+
deviceCode: currentDevice.deviceCode,
|
|
216
|
+
field: fieldCode.value ?? '',
|
|
217
|
+
}]
|
|
218
|
+
fieldCode.value = props.payload.data.fields[0].field
|
|
219
|
+
} else {
|
|
220
|
+
fieldCode.value = ''
|
|
221
|
+
props.payload.data.fields = []
|
|
222
|
+
}
|
|
223
|
+
console.log('箭头线-配置', props.payload)
|
|
206
224
|
}
|
|
207
225
|
|
|
208
226
|
const fieldList = ref([])
|
|
@@ -211,20 +229,20 @@ const fieldList = ref([])
|
|
|
211
229
|
* 获取字段列表
|
|
212
230
|
*/
|
|
213
231
|
const getFields = async () => {
|
|
214
|
-
|
|
232
|
+
fieldList.value = await getFieldList(currentDevice.deviceCode)
|
|
215
233
|
}
|
|
216
234
|
|
|
217
235
|
/**
|
|
218
236
|
* 监听字段编码变化
|
|
219
237
|
*/
|
|
220
238
|
const checkField = () => {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
239
|
+
props.payload.data.fields = [{
|
|
240
|
+
index: 0,
|
|
241
|
+
deviceName: currentDevice.deviceName,
|
|
242
|
+
deviceCode: currentDevice.deviceCode,
|
|
243
|
+
field: fieldCode.value ?? '',
|
|
244
|
+
}]
|
|
245
|
+
console.log('箭头线-配置', props.payload)
|
|
228
246
|
}
|
|
229
247
|
|
|
230
248
|
// 条件线是否开启
|
|
@@ -234,21 +252,21 @@ const isCondition = ref(props.payload.data.isCondition ?? false)
|
|
|
234
252
|
* 条件线改变
|
|
235
253
|
*/
|
|
236
254
|
const changeCondition = () => {
|
|
237
|
-
|
|
255
|
+
props.payload.data.isCondition = isCondition.value
|
|
238
256
|
}
|
|
239
257
|
|
|
240
258
|
// 条件线配置
|
|
241
259
|
const dialogCondition = reactive({
|
|
242
|
-
|
|
243
|
-
|
|
260
|
+
show: false,
|
|
261
|
+
payload: null
|
|
244
262
|
})
|
|
245
263
|
|
|
246
264
|
/**
|
|
247
265
|
* 条件线配置显示
|
|
248
266
|
*/
|
|
249
267
|
const showCondition = () => {
|
|
250
|
-
|
|
251
|
-
|
|
268
|
+
dialogCondition.show = true
|
|
269
|
+
dialogCondition.payload = props.payload.data.condition ?? []
|
|
252
270
|
}
|
|
253
271
|
|
|
254
272
|
/**
|
|
@@ -256,16 +274,16 @@ const showCondition = () => {
|
|
|
256
274
|
* @param condition
|
|
257
275
|
*/
|
|
258
276
|
const closeCondition = (condition) => {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
277
|
+
dialogCondition.show = false
|
|
278
|
+
dialogCondition.payload = null
|
|
279
|
+
if (condition) {
|
|
280
|
+
props.payload.data.condition = condition
|
|
281
|
+
}
|
|
282
|
+
console.log('条件线', props.payload.data)
|
|
265
283
|
}
|
|
266
284
|
|
|
267
285
|
onMounted(() => {
|
|
268
|
-
|
|
286
|
+
getDevices()
|
|
269
287
|
})
|
|
270
288
|
</script>
|
|
271
289
|
|
|
@@ -3,22 +3,22 @@
|
|
|
3
3
|
* @Date: 2025/4/9 09:22
|
|
4
4
|
*/
|
|
5
5
|
<template>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
6
|
+
<div class="container">
|
|
7
|
+
<div class="row-column" style="padding:5px 1px 10px">
|
|
8
|
+
<el-row :gutter="20">
|
|
9
|
+
<el-col :span="12">
|
|
10
|
+
<div class="row-label">线段类型</div>
|
|
11
|
+
</el-col>
|
|
12
|
+
<el-col :span="12">
|
|
13
|
+
<el-select v-model="type" placeholder="请选择线段类型" clearable size="small" @change="changeType">
|
|
14
|
+
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
|
|
15
|
+
</el-option>
|
|
16
|
+
</el-select>
|
|
17
|
+
</el-col>
|
|
18
|
+
</el-row>
|
|
19
|
+
</div>
|
|
20
|
+
<component :is="component" :payload="payload" :itemId="itemId"></component>
|
|
19
21
|
</div>
|
|
20
|
-
<component :is="component" :payload="payload"></component>
|
|
21
|
-
</div>
|
|
22
22
|
</template>
|
|
23
23
|
|
|
24
24
|
<script setup>
|
|
@@ -30,7 +30,11 @@ import PipeLine from "packages/components/edge-control/pipe-line.vue";
|
|
|
30
30
|
import ArrowLine from "packages/components/edge-control/arrow-line.vue";
|
|
31
31
|
|
|
32
32
|
const props = defineProps({
|
|
33
|
-
|
|
33
|
+
payload: Object,
|
|
34
|
+
itemId: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: ''
|
|
37
|
+
}
|
|
34
38
|
})
|
|
35
39
|
|
|
36
40
|
// 线段类型
|
|
@@ -40,23 +44,23 @@ const type = ref(props.payload.data.type)
|
|
|
40
44
|
* 更改线段类型
|
|
41
45
|
*/
|
|
42
46
|
const changeType = () => {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
47
|
+
props.payload.data.type = type.value
|
|
48
|
+
if (type.value === LINE) {
|
|
49
|
+
lineOptions.attrs = defaultLine.attrs
|
|
50
|
+
lineOptions.markup = defaultLine.markup
|
|
51
|
+
}
|
|
52
|
+
if (type.value === PIPE) {
|
|
53
|
+
lineOptions.attrs = pipeOptions.attrs
|
|
54
|
+
lineOptions.markup = pipeOptions.markup
|
|
55
|
+
}
|
|
56
|
+
if (type.value === ARROW) {
|
|
57
|
+
lineOptions.attrs = arrowOptions.attrs
|
|
58
|
+
lineOptions.markup = arrowOptions.markup
|
|
59
|
+
}
|
|
60
|
+
props.payload.attrs = null
|
|
61
|
+
props.payload.attr(lineOptions.attrs)
|
|
62
|
+
props.payload.markup = lineOptions.markup
|
|
63
|
+
setComponent()
|
|
60
64
|
}
|
|
61
65
|
|
|
62
66
|
// 组件
|
|
@@ -66,20 +70,20 @@ const component = shallowRef(null)
|
|
|
66
70
|
* 设置组件
|
|
67
71
|
*/
|
|
68
72
|
const setComponent = () => {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
73
|
+
component.value = null
|
|
74
|
+
if (type.value === LINE) {
|
|
75
|
+
component.value = DefaultLine
|
|
76
|
+
}
|
|
77
|
+
if (type.value === PIPE) {
|
|
78
|
+
component.value = PipeLine
|
|
79
|
+
}
|
|
80
|
+
if (type.value === ARROW) {
|
|
81
|
+
component.value = ArrowLine
|
|
82
|
+
}
|
|
79
83
|
}
|
|
80
84
|
|
|
81
85
|
onMounted(() => {
|
|
82
|
-
|
|
86
|
+
setComponent()
|
|
83
87
|
})
|
|
84
88
|
|
|
85
89
|
</script>
|