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
cc0da931
Commit
cc0da931
authored
Aug 29, 2023
by
周田
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:删除通信参数
parent
f08c14e0
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
136 additions
and
85 deletions
+136
-85
urls.py
device_communication/urls.py
+1
-1
views.py
device_communication/views.py
+2
-6
DeviceInfoCard.vue
...nd/src/components/device_communication/DeviceInfoCard.vue
+116
-74
types.ts
frontend/src/components/device_communication/types.ts
+3
-2
DeviceCommunication.vue
frontend/src/views/DeviceCommunication.vue
+14
-2
xdc.sqlite
xdc.sqlite
+0
-0
No files found.
device_communication/urls.py
View file @
cc0da931
...
...
@@ -10,7 +10,7 @@ router.register('device_communication/simulate_communicate',
urlpatterns
=
[
re_path
(
r'^device_communication/$'
,
views
.
get_protocol_names
),
re_path
(
r'^device_communication/protocol_performance/$'
,
views
.
get_protocol_field_names
),
re_path
(
r'^device_communication/protocol_performance/
(?P<protocol_name>.+)/
$'
,
views
.
get_protocol_field_names
),
re_path
(
r'^device_communication/set_communication_to_devinfo_table/$'
,
views
.
set_communication_to_devinfo_table
),
]
...
...
device_communication/views.py
View file @
cc0da931
...
...
@@ -23,15 +23,11 @@ def get_protocol_names(request):
return
Response
(
data
=
res_data
,
status
=
status
.
HTTP_200_OK
)
@api_view
([
'
POS
T'
])
def
get_protocol_field_names
(
request
):
@api_view
([
'
GE
T'
])
def
get_protocol_field_names
(
request
,
protocol_name
):
"""
获取指定协议下的指令集
"""
protocol_name
=
request
.
data
.
get
(
'protocol_name'
)
if
protocol_name
is
None
or
protocol_name
==
''
:
return
Response
(
status
=
status
.
HTTP_400_BAD_REQUEST
)
# 获取该协议下的指令集合
cmds
=
AllProtocolDefinAndVersion
.
objects
.
filter
(
protocol_name
=
protocol_name
,
cmd_type
=
'RX'
)
.
all
()
cmd_set
=
set
([
cmd
.
cmd_name
for
cmd
in
cmds
])
...
...
frontend/src/components/device_communication/DeviceInfoCard.vue
View file @
cc0da931
<
template
>
<el-descriptions
:title=
"props.deviceInfo.device_name"
:column=
1
>
<el-descriptions
:title=
"props.deviceInfo.device_name"
:column=
1
>
<template
#
extra
>
<el-button
type=
"danger"
size=
"small"
@
click=
"del"
>
delete
</el-button>
<el-button
type=
"primary"
size=
"small"
@
click=
"
edit
"
>
Edit
</el-button>
<el-button
type=
"primary"
size=
"small"
@
click=
"
dialogFormVisible = true
"
>
Edit
</el-button>
</
template
>
<el-descriptions-item
label=
"协议名"
>
{{ props.deviceInfo.protocol_name }}
</el-descriptions-item>
<el-descriptions-item
label=
"通信参数"
:column=
3
>
<el-descriptions-item
label=
"协议名"
>
{{ props.deviceInfo.protocol_name }}
</el-descriptions-item>
<el-descriptions-item
label=
"通信参数"
:column=
3
>
<span>
{{ props.deviceInfo.communicate_mode }}
</span>
<span
ml-9
>
{{ ip }}
</span>
<span
ml-9
>
{{ port }}
</span>
</el-descriptions-item>
<el-descriptions-item
label=
"性能参数"
>
<el-tag
v-for=
"tag in performance_fields"
:key=
"tag"
class=
"mx-1"
>
<el-descriptions-item
label=
"性能参数"
>
<el-tag
v-for=
"tag in
checked_
performance_fields"
:key=
"tag"
class=
"mx-1"
>
{{ tag }}
</el-tag>
</el-descriptions-item>
</el-descriptions>
</el-descriptions>
<el-divider
/>
<!-- Form -->
<el-dialog
v-model=
"dialogFormVisible"
title=
"编辑通信参数"
>
<el-form
:model=
"form"
>
<el-form-item
label=
"设备名称"
:label-width=
"formLabelWidth"
>
<el-input
v-model=
"form.device_name"
autocomplete=
"false"
/>
</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-dialog
v-model=
"dialogFormVisible"
title=
"编辑通信参数"
>
<el-form
:model=
"form"
>
<el-form-item
label=
"设备名称"
:label-width=
"formLabelWidth"
>
<el-input
v-model=
"form.device_name"
autocomplete=
"false"
/>
</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-tag
v-for=
"tag in performance_fields"
:key=
"tag"
class=
"mx-1 mt-1"
closable
@
close=
"handleClose(tag)"
>
{{ tag }}
</el-tag>
</el-form-item>
</el-form>
<
template
#
footer
>
<span
class=
"dialog-footer"
>
<el-button
@
click=
"dialogFormVisible = false"
>
Cancel
</el-button>
<el-button
type=
"primary"
@
click=
"dialogFormVisible = false"
>
Confirm
</el-button>
</span>
</
template
>
</el-dialog>
</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>
...
...
@@ -71,6 +76,7 @@ import { onMounted, ref } from 'vue';
import
axios
from
'axios'
;
import
type
{
DeviceInfo
}
from
'@/components/device_communication/types'
;
import
type
{
CheckboxValueType
}
from
'element-plus'
;
type
propType
=
{
deviceInfo
:
DeviceInfo
...
...
@@ -78,38 +84,32 @@ type propType = {
const
props
=
defineProps
<
propType
>
();
const
ip
=
ref
<
string
>
()
const
port
=
ref
<
number
>
()
const
performance_fields
=
ref
<
string
[]
>
([])
const
checked_
performance_fields
=
ref
<
string
[]
>
([])
onMounted
(()
=>
{
let
is_tcp
=
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
performance_fields
.
value
=
JSON
.
parse
(
props
.
deviceInfo
.
performance_fields
)
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
!
)
})
const
emit
=
defineEmits
([
'deleteDeviceInfo'
])
const
del
=
()
=>
{
// axios.delete('/api/device_communication/' + props.deviceInfo.id)
// .then((res) => {
// console.log(res);
// })
// .catch((err) => {
// console.log(err);
// })
}
const
edit
=
()
=>
{
dialogFormVisible
.
value
=
true
let
station_id
=
props
.
deviceInfo
.
station_id
let
id
=
props
.
deviceInfo
.
id
axios
.
delete
(
'/api/device_communication/communicate/'
+
id
+
'/'
)
.
then
((
res
)
=>
{
emit
(
'deleteDeviceInfo'
,
{
station_id
,
id
})
console
.
log
(
res
);
})
.
catch
((
err
)
=>
{
console
.
log
(
err
);
})
}
// performance_fields tag
const
handleClose
=
(
tag
:
string
)
=>
{
performance_fields
.
value
.
splice
(
performance_fields
.
value
.
indexOf
(
tag
),
1
)
console
.
log
(
performance_fields
.
value
);
}
const
dialogFormVisible
=
ref
(
false
)
const
formLabelWidth
=
'1
5
0px'
const
formLabelWidth
=
'1
3
0px'
const
form
=
ref
<
DeviceInfo
>
({
id
:
props
.
deviceInfo
.
id
,
...
...
@@ -124,10 +124,47 @@ const form = ref<DeviceInfo>({
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
,
performance_fields
:
props
.
deviceInfo
.
performance_fields
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
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
>
<
style
>
...
...
@@ -135,16 +172,20 @@ const form = ref<DeviceInfo>({
color
:
var
(
--el-text-color-regular
)
!important
;
font-weight
:
bold
;
}
.el-button--text
{
margin-right
:
15px
;
margin-right
:
15px
;
}
.el-select
{
width
:
300px
;
width
:
300px
;
}
.el-input
{
width
:
300px
;
width
:
300px
;
}
.dialog-footer
button
:first-child
{
margin-right
:
10px
;
margin-right
:
10px
;
}
</
style
>
\ No newline at end of file
frontend/src/components/device_communication/types.ts
View file @
cc0da931
export
type
DeviceInfo
=
{
export
interface
DeviceInfo
{
id
:
number
,
station_id
:
string
,
device_id
:
number
,
...
...
@@ -12,5 +12,6 @@ export type DeviceInfo = {
udp_port_src
:
number
,
udp_ip_dst
:
string
,
udp_port_dst
:
number
,
performance_fields
:
string
performance_fields
?:
string
checked_performance_fields
?:
string
[]
}
frontend/src/views/DeviceCommunication.vue
View file @
cc0da931
...
...
@@ -12,7 +12,7 @@
<template
#
title
>
<span
class=
"text-2xl font-bold"
>
{{
station_level
}}
</span>
</
template
>
<device-info-card
v-for=
"device_info in device_info_list"
:device-info=
"device_info"
/>
<device-info-card
@
deleteDeviceInfo=
"deleteDeviceInfo"
v-for=
"device_info in device_info_list"
:device-info=
"device_info"
/>
</el-collapse-item>
</el-collapse>
</div>
...
...
@@ -45,7 +45,7 @@ const simulate_device_infos = ref<DeviceInfo[]>([])
onMounted
(()
=>
{
axios
.
get
(
'/api/device_communication/communicate/'
)
.
then
(
res
=>
{
console
.
log
(
res
.
data
);
//
console.log(res.data);
// 将数据按照不同的 station_id 分组
for
(
let
i
=
0
;
i
<
res
.
data
.
length
;
i
++
)
{
if
(
device_infos
.
value
[
res
.
data
[
i
].
station_id
]
!==
undefined
)
{
...
...
@@ -69,6 +69,18 @@ onMounted(() => {
})
type
param
=
{
station_id
:
string
id
:
number
}
const
deleteDeviceInfo
=
(
params
:
param
)
=>
{
for
(
let
i
=
0
;
i
<
device_infos
.
value
[
params
.
station_id
].
length
;
i
++
)
{
if
((
device_infos
.
value
[
params
.
station_id
])[
i
].
id
===
params
.
id
)
{
device_infos
.
value
[
params
.
station_id
].
splice
(
i
,
1
)
}
}
}
</
script
>
xdc.sqlite
View file @
cc0da931
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