Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
V
vue_django_test
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
周田
vue_django_test
Commits
1bd63a2e
Commit
1bd63a2e
authored
Aug 30, 2023
by
周田
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
refactor:重构 修改通信参数 功能
parent
7ad24a01
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
61 additions
and
144 deletions
+61
-144
DeviceInfoCard.vue
...nd/src/components/device_communication/DeviceInfoCard.vue
+19
-139
EditDialog.vue
frontend/src/components/device_communication/EditDialog.vue
+42
-5
xdc.sqlite
xdc.sqlite
+0
-0
No files found.
frontend/src/components/device_communication/DeviceInfoCard.vue
View file @
1bd63a2e
...
@@ -7,8 +7,16 @@
...
@@ -7,8 +7,16 @@
<el-descriptions-item
label=
"协议名"
>
{{ props.deviceInfo.protocol_name }}
</el-descriptions-item>
<el-descriptions-item
label=
"协议名"
>
{{ props.deviceInfo.protocol_name }}
</el-descriptions-item>
<el-descriptions-item
label=
"通信参数"
:column=
3
>
<el-descriptions-item
label=
"通信参数"
:column=
3
>
<span>
{{ props.deviceInfo.communicate_mode }}
</span>
<span>
{{ props.deviceInfo.communicate_mode }}
</span>
<span
ml-9
>
{{ ip }}
</span>
<span
v-if=
"isTcp"
>
<span
ml-9
>
{{ port }}
</span>
<span
ml-9
>
{{ props.deviceInfo.tcp_ip }}
</span>
<span
ml-9
>
{{ props.deviceInfo.tcp_port }}
</span>
</span>
<span
v-else
>
<span
ml-9
>
{{ props.deviceInfo.udp_ip_src}}
</span>
<span
ml-9
>
{{ props.deviceInfo.udp_port_src }}
</span>
<span
ml-9
>
{{ props.deviceInfo.udp_ip_dst }}
</span>
<span
ml-9
>
{{ props.deviceInfo.udp_port_dst }}
</span>
</span>
</el-descriptions-item>
</el-descriptions-item>
<el-descriptions-item
label=
"性能参数"
>
<el-descriptions-item
label=
"性能参数"
>
<el-tag
v-for=
"tag in checked_performance_fields"
:key=
"tag"
class=
"mx-1 mt-1"
>
<el-tag
v-for=
"tag in checked_performance_fields"
:key=
"tag"
class=
"mx-1 mt-1"
>
...
@@ -18,56 +26,11 @@
...
@@ -18,56 +26,11 @@
</el-descriptions>
</el-descriptions>
<el-divider
/>
<el-divider
/>
Form
<edit-dialog
<el-dialog
v-model=
"dialogFormVisible"
title=
"编辑通信参数"
>
:is-show=
"dialogFormVisible"
<el-form
:model=
"form"
>
:device-info=
"props.deviceInfo"
<el-form-item
label=
"设备名称"
:label-width=
"formLabelWidth"
>
@
close=
"dialogFormVisible = false"
<el-input
v-model=
"form.device_name"
autocomplete=
"false"
/>
type=
"edit"
/>
</el-form-item>
<el-form-item
label=
"设备中文名"
:label-width=
"formLabelWidth"
>
<el-input
v-model=
"form.device_name_chn"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"所属站点"
:label-width=
"formLabelWidth"
>
<el-input
v-model=
"form.station_id"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"协议名称"
:label-width=
"formLabelWidth"
>
<el-input
v-model=
"form.protocol_name"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"通信模式"
:label-width=
"formLabelWidth"
>
<el-select
v-model=
"form.communicate_mode"
@
change=
"console.log(form.communicate_mode)"
>
<el-option
label=
"TCP_SERVER"
value=
"TCP_SERVER"
/>
<el-option
label=
"TCP_CLIENT"
value=
"TCP_CLIENT"
/>
<el-option
label=
"UDP"
value=
"UDP"
/>
<el-option
label=
"UDP_MC"
value=
"UDP_MC"
/>
</el-select>
</el-form-item>
<el-form-item
label=
"IP"
:label-width=
"formLabelWidth"
>
<el-input
v-model=
"form.tcp_ip"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"端口"
:label-width=
"formLabelWidth"
>
<el-input
v-model=
"form.tcp_port"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"监控属性"
:label-width=
"formLabelWidth"
>
<el-checkbox
v-model=
"checkAll"
:indeterminate=
"isIndeterminate"
@
change=
"handleCheckAllChange"
>
Check all
</el-checkbox>
<el-checkbox-group
v-model=
"checked_performance_fields"
@
change=
"handleCheckedCitiesChange"
>
<el-checkbox
v-for=
"city in performance_fields"
:key=
"city"
:label=
"city"
>
{{ city }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<
template
#
footer
>
<span
class=
"dialog-footer"
>
<el-button
@
click=
"dialogFormVisible = false"
>
Cancel
</el-button>
<el-button
type=
"primary"
@
click=
"update_communication"
>
Confirm
</el-button>
</span>
</
template
>
</el-dialog>
</template>
</template>
...
@@ -76,22 +39,19 @@ import { onMounted, ref } from 'vue';
...
@@ -76,22 +39,19 @@ import { onMounted, ref } from 'vue';
import
axios
from
'axios'
;
import
axios
from
'axios'
;
import
type
{
DeviceInfo
}
from
'@/components/device_communication/types'
;
import
type
{
DeviceInfo
}
from
'@/components/device_communication/types'
;
import
type
{
CheckboxValueType
}
from
'element-plus
'
;
import
EditDialog
from
'./EditDialog.vue
'
;
type
propType
=
{
type
propType
=
{
deviceInfo
:
DeviceInfo
deviceInfo
:
DeviceInfo
}
}
const
props
=
defineProps
<
propType
>
();
const
props
=
defineProps
<
propType
>
();
const
ip
=
ref
<
string
>
()
const
port
=
ref
<
number
>
()
const
checked_performance_fields
=
ref
<
string
[]
>
([])
const
checked_performance_fields
=
ref
<
string
[]
>
([])
let
is_tcp
=
false
const
isTcp
=
ref
<
boolean
>
(
true
)
onMounted
(()
=>
{
onMounted
(()
=>
{
is_tcp
=
props
.
deviceInfo
.
communicate_mode
.
toUpperCase
().
includes
(
'TCP'
.
toUpperCase
())
isTcp
.
value
=
props
.
deviceInfo
.
communicate_mode
.
toUpperCase
().
includes
(
'TCP'
.
toUpperCase
())
ip
.
value
=
is_tcp
?
props
.
deviceInfo
.
tcp_ip
:
props
.
deviceInfo
.
udp_ip_src
port
.
value
=
is_tcp
?
props
.
deviceInfo
.
tcp_port
:
props
.
deviceInfo
.
udp_port_src
checked_performance_fields
.
value
=
JSON
.
parse
(
props
.
deviceInfo
.
performance_fields
!
)
checked_performance_fields
.
value
=
JSON
.
parse
(
props
.
deviceInfo
.
performance_fields
!
)
props
.
deviceInfo
.
checked_performance_fields
=
checked_performance_fields
.
value
})
})
const
emit
=
defineEmits
([
'deleteDeviceInfo'
])
const
emit
=
defineEmits
([
'deleteDeviceInfo'
])
...
@@ -110,69 +70,6 @@ const del = () => {
...
@@ -110,69 +70,6 @@ const del = () => {
// performance_fields tag
// performance_fields tag
const
dialogFormVisible
=
ref
(
false
)
const
dialogFormVisible
=
ref
(
false
)
const
formLabelWidth
=
'130px'
const
form
=
ref
<
DeviceInfo
>
({
id
:
props
.
deviceInfo
.
id
,
station_id
:
props
.
deviceInfo
.
station_id
,
device_id
:
props
.
deviceInfo
.
device_id
,
device_name
:
props
.
deviceInfo
.
device_name
,
device_name_chn
:
props
.
deviceInfo
.
device_name_chn
,
protocol_name
:
props
.
deviceInfo
.
protocol_name
,
communicate_mode
:
props
.
deviceInfo
.
communicate_mode
,
tcp_ip
:
props
.
deviceInfo
.
tcp_ip
,
tcp_port
:
props
.
deviceInfo
.
tcp_port
,
udp_ip_src
:
props
.
deviceInfo
.
udp_ip_src
,
udp_port_src
:
props
.
deviceInfo
.
udp_port_src
,
udp_ip_dst
:
props
.
deviceInfo
.
udp_ip_dst
,
udp_port_dst
:
props
.
deviceInfo
.
udp_port_dst
})
const
checkAll
=
ref
(
false
)
const
isIndeterminate
=
ref
(
true
)
const
performance_fields
=
ref
<
string
[]
>
([])
onMounted
(()
=>
{
axios
.
get
(
'api/device_communication/protocol_performance/'
+
props
.
deviceInfo
.
protocol_name
+
'/'
,
).
then
((
res
)
=>
{
performance_fields
.
value
=
res
.
data
}).
catch
((
err
)
=>
{
console
.
log
(
err
);
})
})
const
handleCheckAllChange
=
(
val
:
CheckboxValueType
)
=>
{
checked_performance_fields
.
value
=
val
?
performance_fields
.
value
:
[]
isIndeterminate
.
value
=
false
}
const
handleCheckedCitiesChange
=
(
value
:
CheckboxValueType
[])
=>
{
const
checkedCount
=
value
.
length
checkAll
.
value
=
checkedCount
===
performance_fields
.
value
.
length
isIndeterminate
.
value
=
checkedCount
>
0
&&
checkedCount
<
performance_fields
.
value
.
length
}
const
update_communication
=
()
=>
{
dialogFormVisible
.
value
=
false
props
.
deviceInfo
.
device_name
=
form
.
value
.
device_name
props
.
deviceInfo
.
device_name_chn
=
form
.
value
.
device_name_chn
props
.
deviceInfo
.
station_id
=
form
.
value
.
station_id
props
.
deviceInfo
.
protocol_name
=
form
.
value
.
protocol_name
props
.
deviceInfo
.
communicate_mode
=
form
.
value
.
communicate_mode
ip
.
value
=
form
.
value
.
tcp_ip
port
.
value
=
form
.
value
.
tcp_port
form
.
value
.
performance_fields
=
JSON
.
stringify
(
checked_performance_fields
.
value
)
axios
.
put
(
'api/device_communication/communicate/'
+
form
.
value
.
id
+
'/'
,
form
.
value
).
then
((
res
)
=>
{
console
.
log
(
res
);
}).
catch
((
err
)
=>
{
console
.
log
(
err
);
})
}
</
script
>
</
script
>
...
@@ -181,20 +78,4 @@ const update_communication = () => {
...
@@ -181,20 +78,4 @@ const update_communication = () => {
color
:
var
(
--el-text-color-regular
)
!important
;
color
:
var
(
--el-text-color-regular
)
!important
;
font-weight
:
bold
;
font-weight
:
bold
;
}
}
.el-button--text
{
margin-right
:
15px
;
}
.el-select
{
width
:
300px
;
}
.el-input
{
width
:
300px
;
}
.dialog-footer
button
:first-child
{
margin-right
:
10px
;
}
</
style
>
</
style
>
\ No newline at end of file
frontend/src/components/device_communication/EditDialog.vue
View file @
1bd63a2e
...
@@ -87,7 +87,7 @@ const formLabelWidth = "120px"
...
@@ -87,7 +87,7 @@ const formLabelWidth = "120px"
type
porpsType
=
{
type
porpsType
=
{
isShow
:
boolean
,
isShow
:
boolean
,
deviceInfo
?:
DeviceInfo
,
deviceInfo
?:
DeviceInfo
,
type
:
string
type
:
string
,
}
}
const
props
=
defineProps
<
porpsType
>
()
const
props
=
defineProps
<
porpsType
>
()
const
emit
=
defineEmits
([
'close'
])
const
emit
=
defineEmits
([
'close'
])
...
@@ -111,13 +111,33 @@ const form = ref<DeviceInfo>({
...
@@ -111,13 +111,33 @@ const form = ref<DeviceInfo>({
udp_port_dst
:
0
udp_port_dst
:
0
})
})
watch
(
props
,
()
=>
{
watch
(
()
=>
props
.
isShow
,
()
=>
{
dialogFormVisible
.
value
=
props
.
isShow
dialogFormVisible
.
value
=
props
.
isShow
if
(
props
.
isShow
)
{
form
.
value
=
{
id
:
props
.
deviceInfo
!
.
id
,
station_id
:
props
.
deviceInfo
!
.
station_id
,
device_id
:
props
.
deviceInfo
!
.
device_id
,
device_name
:
props
.
deviceInfo
!
.
device_name
,
device_name_chn
:
props
.
deviceInfo
!
.
device_name_chn
,
protocol_name
:
props
.
deviceInfo
!
.
protocol_name
,
communicate_mode
:
props
.
deviceInfo
!
.
communicate_mode
,
tcp_ip
:
props
.
deviceInfo
!
.
tcp_ip
,
tcp_port
:
props
.
deviceInfo
!
.
tcp_port
,
udp_ip_src
:
props
.
deviceInfo
!
.
udp_ip_src
,
udp_port_src
:
props
.
deviceInfo
!
.
udp_port_src
,
udp_ip_dst
:
props
.
deviceInfo
!
.
udp_ip_dst
,
udp_port_dst
:
props
.
deviceInfo
!
.
udp_port_dst
,
}
handleModeChange
(
form
.
value
.
communicate_mode
)
handleProtocolChange
(
form
.
value
.
protocol_name
)
checked_performance_fields
.
value
=
props
.
deviceInfo
!
.
checked_performance_fields
!
}
})
})
const
validateIP
=
(
_
:
any
,
value
:
any
,
callback
:
any
)
=>
{
const
validateIP
=
(
_
:
any
,
value
:
any
,
callback
:
any
)
=>
{
if
(
value
===
''
)
{
if
(
value
===
''
)
{
callback
(
new
Error
(
'Please input the
password
again'
))
callback
(
new
Error
(
'Please input the
IP
again'
))
}
}
const
ipRegex
=
/^
(\d{1,3}\.){3}\d{1,3}
$/
;
const
ipRegex
=
/^
(\d{1,3}\.){3}\d{1,3}
$/
;
if
(
!
ipRegex
.
test
(
value
))
{
if
(
!
ipRegex
.
test
(
value
))
{
...
@@ -129,7 +149,7 @@ const validateIP = (_: any, value: any, callback: any) => {
...
@@ -129,7 +149,7 @@ const validateIP = (_: any, value: any, callback: any) => {
const
validatePort
=
(
_
:
any
,
value
:
any
,
callback
:
any
)
=>
{
const
validatePort
=
(
_
:
any
,
value
:
any
,
callback
:
any
)
=>
{
if
(
value
===
''
)
{
if
(
value
===
''
)
{
callback
(
new
Error
(
'Please input the p
assword
again'
))
callback
(
new
Error
(
'Please input the p
ort
again'
))
}
}
const
portRegex
=
/^
[
1-9
]\d{1,4}
$/
;
const
portRegex
=
/^
[
1-9
]\d{1,4}
$/
;
if
(
!
portRegex
.
test
(
value
))
{
if
(
!
portRegex
.
test
(
value
))
{
...
@@ -235,7 +255,7 @@ const submit_form = () => {
...
@@ -235,7 +255,7 @@ const submit_form = () => {
const
submit
=
()
=>
{
const
submit
=
()
=>
{
// 获取表单数据
// 获取表单数据
let
data
=
{
let
data
:
DeviceInfo
=
{
station_id
:
form
.
value
.
station_id
,
station_id
:
form
.
value
.
station_id
,
device_id
:
form
.
value
.
device_id
,
device_id
:
form
.
value
.
device_id
,
device_name
:
form
.
value
.
device_name
,
device_name
:
form
.
value
.
device_name
,
...
@@ -266,6 +286,23 @@ const submit = () => {
...
@@ -266,6 +286,23 @@ const submit = () => {
console
.
log
(
err
);
console
.
log
(
err
);
})
})
}
}
else
if
(
props
.
type
===
"edit"
)
{
// 修改通信参数方法
data
.
id
=
form
.
value
.
id
axios
.
put
(
'/api/device_communication/communicate/'
+
data
.
id
+
'/'
,
data
)
.
then
((
res
)
=>
{
console
.
log
(
res
);
ElMessage
({
message
:
'修改成功'
,
type
:
'success'
})
})
.
catch
((
err
)
=>
{
console
.
log
(
err
);
})
}
emit
(
'close'
)
emit
(
'close'
)
}
}
...
...
xdc.sqlite
View file @
1bd63a2e
No preview for this file type
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment