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
7ad24a01
Commit
7ad24a01
authored
Aug 30, 2023
by
周田
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:添加设备性能参数,将弹出框抽离出来
parent
f1fddc40
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
290 additions
and
11 deletions
+290
-11
DeviceInfoCard.vue
...nd/src/components/device_communication/DeviceInfoCard.vue
+2
-2
EditDialog.vue
frontend/src/components/device_communication/EditDialog.vue
+273
-0
types.ts
frontend/src/components/device_communication/types.ts
+1
-1
DeviceCommunication.vue
frontend/src/views/DeviceCommunication.vue
+14
-8
xdc.sqlite
xdc.sqlite
+0
-0
No files found.
frontend/src/components/device_communication/DeviceInfoCard.vue
View file @
7ad24a01
...
@@ -11,14 +11,14 @@
...
@@ -11,14 +11,14 @@
<span
ml-9
>
{{ port }}
</span>
<span
ml-9
>
{{ port }}
</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"
>
<el-tag
v-for=
"tag in checked_performance_fields"
:key=
"tag"
class=
"mx-1
mt-1
"
>
{{ tag }}
{{ tag }}
</el-tag>
</el-tag>
</el-descriptions-item>
</el-descriptions-item>
</el-descriptions>
</el-descriptions>
<el-divider
/>
<el-divider
/>
<!-- Form -->
Form
<el-dialog
v-model=
"dialogFormVisible"
title=
"编辑通信参数"
>
<el-dialog
v-model=
"dialogFormVisible"
title=
"编辑通信参数"
>
<el-form
:model=
"form"
>
<el-form
:model=
"form"
>
<el-form-item
label=
"设备名称"
:label-width=
"formLabelWidth"
>
<el-form-item
label=
"设备名称"
:label-width=
"formLabelWidth"
>
...
...
frontend/src/components/device_communication/EditDialog.vue
0 → 100644
View file @
7ad24a01
<
template
>
<el-dialog
v-model=
"dialogFormVisible"
title=
"编辑通信参数"
@
close=
"handleClose"
>
<el-form
:model=
"form"
ref=
"formRef"
:rules=
"rules"
>
<el-form-item
label=
"设备名称"
:label-width=
"formLabelWidth"
prop=
"device_name"
>
<el-input
v-model=
"form.device_name"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"设备中文名"
:label-width=
"formLabelWidth"
prop=
"device_name_chn"
>
<el-input
v-model=
"form.device_name_chn"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"设备序号"
:label-width=
"formLabelWidth"
prop=
"device_name_chn"
>
<el-input
v-model=
"form.device_id"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"所属站点"
:label-width=
"formLabelWidth"
prop=
"station_id"
>
<el-input
v-model=
"form.station_id"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"协议名称"
:label-width=
"formLabelWidth"
prop=
"protocol_name"
>
<el-select
v-model=
"form.protocol_name"
@
change=
"handleProtocolChange"
>
<el-option
v-for=
"protocol_name in protocolNames"
:label=
"protocol_name"
:value=
"protocol_name"
/>
</el-select>
</el-form-item>
<el-form-item
label=
"通信模式"
:label-width=
"formLabelWidth"
prop=
"communicate_mode"
>
<el-select
v-model=
"form.communicate_mode"
@
change=
"handleModeChange"
>
<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>
<div
v-if=
"isTcp"
>
<el-form-item
label=
"IP"
:label-width=
"formLabelWidth"
prop=
"tcp_ip"
>
<el-input
v-model=
"form.tcp_ip"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"端口"
:label-width=
"formLabelWidth"
prop=
"tcp_port"
>
<el-input
v-model=
"form.tcp_port"
autocomplete=
"false"
/>
</el-form-item>
</div>
<div
v-else
>
<el-form-item
label=
"源IP"
:label-width=
"formLabelWidth"
prop=
"udp_ip_src"
>
<el-input
v-model=
"form.udp_ip_src"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"源端口"
:label-width=
"formLabelWidth"
prop=
"udp_port_src"
>
<el-input
v-model=
"form.udp_port_src"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"目标IP"
:label-width=
"formLabelWidth"
prop=
"udp_ip_dst"
>
<el-input
v-model=
"form.udp_ip_dst"
autocomplete=
"false"
/>
</el-form-item>
<el-form-item
label=
"目标端口"
:label-width=
"formLabelWidth"
prop=
"udp_port_dst"
>
<el-input
v-model=
"form.udp_port_dst"
autocomplete=
"false"
/>
</el-form-item>
</div>
<el-form-item
label=
"监控属性"
:label-width=
"formLabelWidth"
prop=
"performance_fields"
>
<el-checkbox
v-model=
"checkAll"
:indeterminate=
"isIndeterminate"
@
change=
"handleCheckAllChange"
>
Check all
</el-checkbox>
<el-checkbox-group
v-model=
"checked_performance_fields"
@
change=
"handleCheckedFieldsChange"
>
<el-checkbox
v-for=
"field in performance_fields"
:key=
"field"
:label=
"field"
>
{{
field
}}
</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=
"submit_form"
>
Confirm
</el-button>
</span>
</
template
>
</el-dialog>
</template>
<
script
setup
lang=
"ts"
>
import
{
onMounted
,
reactive
,
ref
,
watch
}
from
'vue'
;
import
type
{
CheckboxValueType
,
ElForm
}
from
'element-plus'
;
import
{
ElMessage
,
FormRules
}
from
'element-plus'
import
axios
from
'axios'
;
import
{
DeviceInfo
}
from
"./types"
;
const
formRef
=
ref
<
typeof
ElForm
>
()
const
dialogFormVisible
=
ref
(
false
)
const
formLabelWidth
=
"120px"
type
porpsType
=
{
isShow
:
boolean
,
deviceInfo
?:
DeviceInfo
,
type
:
string
}
const
props
=
defineProps
<
porpsType
>
()
const
emit
=
defineEmits
([
'close'
])
const
handleClose
=
()
=>
{
emit
(
'close'
)
formRef
.
value
!
.
resetFields
()
}
const
form
=
ref
<
DeviceInfo
>
({
station_id
:
""
,
device_id
:
0
,
device_name
:
""
,
device_name_chn
:
""
,
protocol_name
:
""
,
communicate_mode
:
""
,
tcp_ip
:
""
,
tcp_port
:
0
,
udp_ip_src
:
""
,
udp_port_src
:
0
,
udp_ip_dst
:
""
,
udp_port_dst
:
0
})
watch
(
props
,
()
=>
{
dialogFormVisible
.
value
=
props
.
isShow
})
const
validateIP
=
(
_
:
any
,
value
:
any
,
callback
:
any
)
=>
{
if
(
value
===
''
)
{
callback
(
new
Error
(
'Please input the password again'
))
}
const
ipRegex
=
/^
(\d{1,3}\.){3}\d{1,3}
$/
;
if
(
!
ipRegex
.
test
(
value
))
{
callback
(
new
Error
(
'请输入有效的IP地址'
));
}
else
{
callback
();
}
}
const
validatePort
=
(
_
:
any
,
value
:
any
,
callback
:
any
)
=>
{
if
(
value
===
''
)
{
callback
(
new
Error
(
'Please input the password again'
))
}
const
portRegex
=
/^
[
1-9
]\d{1,4}
$/
;
if
(
!
portRegex
.
test
(
value
))
{
callback
(
new
Error
(
'请输入有效的端口'
));
}
else
{
callback
();
}
}
const
rules
=
reactive
<
FormRules
<
typeof
form
>>
({
station_id
:
[{
required
:
true
,
message
:
'Please input station id'
,
trigger
:
'blur'
}],
device_id
:
[{
required
:
true
,
message
:
'Please input device id'
,
trigger
:
'blur'
}],
device_name
:
[{
required
:
true
,
message
:
'Please input device name'
,
trigger
:
'blur'
}],
device_name_chn
:
[{
required
:
true
,
message
:
'Please input device name chn'
,
trigger
:
'blur'
}],
protocol_name
:
[{
required
:
true
,
message
:
'Please input protocol name'
,
trigger
:
'blur'
}],
communicate_mode
:
[{
required
:
true
,
message
:
'Please input communicate mode'
,
trigger
:
'blur'
}],
tcp_ip
:
[
{
required
:
true
,
message
:
'Please input tcp ip'
,
trigger
:
'blur'
},
{
validator
:
validateIP
,
trigger
:
'blur'
}],
tcp_port
:
[
{
required
:
true
,
message
:
'Please input tcp port'
,
trigger
:
'blur'
},
{
validator
:
validatePort
,
trigger
:
'blur'
}
],
udp_ip_src
:
[
{
required
:
true
,
message
:
'Please input upd src ip'
,
trigger
:
'blur'
},
{
validator
:
validateIP
,
trigger
:
'blur'
}],
udp_port_src
:
[
{
required
:
true
,
message
:
'Please input udp src port'
,
trigger
:
'blur'
},
{
validator
:
validatePort
,
trigger
:
'blur'
}
],
udp_ip_dst
:
[
{
required
:
true
,
message
:
'Please input udp dst ip'
,
trigger
:
'blur'
},
{
validator
:
validateIP
,
trigger
:
'blur'
}],
udp_port_dst
:
[
{
required
:
true
,
message
:
'Please input udp dst port'
,
trigger
:
'blur'
},
{
validator
:
validatePort
,
trigger
:
'blur'
}
],
})
const
protocolNames
=
ref
<
string
[]
>
([])
onMounted
(()
=>
{
axios
.
get
(
'api/device_communication/'
)
.
then
((
res
)
=>
{
for
(
let
protocolName
of
res
.
data
)
{
protocolNames
.
value
.
push
(
protocolName
.
value
)
}
})
.
catch
((
err
)
=>
{
console
.
log
(
err
);
})
})
const
handleProtocolChange
=
(
protocol_name
:
string
)
=>
{
axios
.
get
(
'/api/device_communication/protocol_performance/'
+
protocol_name
+
'/'
)
.
then
((
res
)
=>
{
performance_fields
.
value
=
res
.
data
})
.
catch
((
err
)
=>
{
console
.
log
(
err
);
})
}
const
checkAll
=
ref
(
false
)
const
isIndeterminate
=
ref
(
true
)
const
performance_fields
=
ref
<
string
[]
>
([])
const
checked_performance_fields
=
ref
<
string
[]
>
([])
// 全选
const
handleCheckAllChange
=
(
val
:
CheckboxValueType
)
=>
{
checked_performance_fields
.
value
=
val
?
performance_fields
.
value
:
[]
isIndeterminate
.
value
=
false
}
// 选中某个
const
handleCheckedFieldsChange
=
(
value
:
CheckboxValueType
[])
=>
{
const
checkedCount
=
value
.
length
checkAll
.
value
=
checkedCount
===
performance_fields
.
value
.
length
isIndeterminate
.
value
=
checkedCount
>
0
&&
checkedCount
<
performance_fields
.
value
.
length
}
// 选择通信模式后
const
isTcp
=
ref
(
true
)
const
handleModeChange
=
(
value
:
string
)
=>
{
console
.
log
(
value
)
isTcp
.
value
=
value
.
toUpperCase
().
includes
(
'TCP'
.
toUpperCase
())
}
// 提交表单
const
submit_form
=
()
=>
{
// 表单字段全部正确才能提交
formRef
.
value
!
.
validate
((
valid
:
boolean
)
=>
{
if
(
valid
)
{
submit
()
}
else
{
ElMessage
({
message
:
'请检查表单'
,
type
:
'error'
})
}
})
}
const
submit
=
()
=>
{
// 获取表单数据
let
data
=
{
station_id
:
form
.
value
.
station_id
,
device_id
:
form
.
value
.
device_id
,
device_name
:
form
.
value
.
device_name
,
device_name_chn
:
form
.
value
.
device_name_chn
,
protocol_name
:
form
.
value
.
protocol_name
,
communicate_mode
:
form
.
value
.
communicate_mode
,
tcp_ip
:
form
.
value
.
tcp_ip
,
tcp_port
:
form
.
value
.
tcp_port
,
udp_ip_src
:
form
.
value
.
udp_ip_src
,
udp_port_src
:
form
.
value
.
udp_port_src
,
udp_ip_dst
:
form
.
value
.
udp_ip_dst
,
udp_port_dst
:
form
.
value
.
udp_port_dst
,
performance_fields
:
JSON
.
stringify
(
checked_performance_fields
.
value
)
}
console
.
log
(
data
)
if
(
props
.
type
===
"add"
)
{
// 添加通信参数方法
axios
.
post
(
'/api/device_communication/communicate/'
,
data
)
.
then
((
res
)
=>
{
console
.
log
(
res
);
ElMessage
({
message
:
'创建成功'
,
type
:
'success'
})
})
.
catch
((
err
)
=>
{
console
.
log
(
err
);
})
}
emit
(
'close'
)
}
</
script
>
frontend/src/components/device_communication/types.ts
View file @
7ad24a01
export
interface
DeviceInfo
{
export
interface
DeviceInfo
{
id
:
number
,
id
?
:
number
,
station_id
:
string
,
station_id
:
string
,
device_id
:
number
,
device_id
:
number
,
device_name
:
string
,
device_name
:
string
,
...
...
frontend/src/views/DeviceCommunication.vue
View file @
7ad24a01
<
template
>
<
template
>
<el-tabs
<el-tabs
v-model=
"activeName"
type=
"card"
class=
"demo-tabs"
@
tab-click=
"handleClick"
>
v-model=
"activeName"
type=
"card"
class=
"demo-tabs"
@
tab-click=
"handleClick"
>
<el-tab-pane
label=
"device"
name=
"device"
>
<el-tab-pane
label=
"device"
name=
"device"
>
<div
class=
"text-right mb-5"
>
<el-button
type=
"primary"
@
click=
"addDevice"
>
Add device
</el-button>
</div>
<div
class=
"demo-collapse"
>
<div
class=
"demo-collapse"
>
<el-collapse>
<el-collapse>
<el-collapse-item
class=
"pt-10"
v-for=
"([station_level, device_info_list]) in Object.entries(device_infos)"
>
<el-collapse-item
class=
"pt-10"
v-for=
"([station_level, device_info_list]) in Object.entries(device_infos)"
>
<template
#
title
>
<template
#
title
>
<span
class=
"text-2xl font-bold"
>
{{
station_level
}}
</span>
<span
class=
"text-2xl font-bold"
>
{{
station_level
}}
</span>
</
template
>
</
template
>
<device-info-card
@
deleteDeviceInfo=
"deleteDeviceInfo"
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-item>
</el-collapse>
</el-collapse>
</div>
</div>
...
@@ -22,6 +21,8 @@
...
@@ -22,6 +21,8 @@
<!-- TODO -->
<!-- TODO -->
</el-tab-pane>
</el-tab-pane>
</el-tabs>
</el-tabs>
<edit-dialog
:is-show=
"isShow"
@
close=
"isShow = false"
type=
"add"
/>
</template>
</template>
<
script
lang=
"ts"
setup
>
<
script
lang=
"ts"
setup
>
...
@@ -31,6 +32,7 @@ import type { TabsPaneContext } from 'element-plus'
...
@@ -31,6 +32,7 @@ import type { TabsPaneContext } from 'element-plus'
import
DeviceInfoCard
from
'@/components/device_communication/DeviceInfoCard'
import
DeviceInfoCard
from
'@/components/device_communication/DeviceInfoCard'
import
type
{
DeviceInfo
}
from
'@/components/device_communication/types'
import
type
{
DeviceInfo
}
from
'@/components/device_communication/types'
import
EditDialog
from
'@/components/device_communication/EditDialog'
;
// tab 相关
// tab 相关
const
activeName
=
ref
(
'device'
)
const
activeName
=
ref
(
'device'
)
...
@@ -81,6 +83,10 @@ const deleteDeviceInfo = (params: param) => {
...
@@ -81,6 +83,10 @@ const deleteDeviceInfo = (params: param) => {
}
}
}
}
const
isShow
=
ref
(
false
)
const
addDevice
=
()
=>
{
console
.
log
(
'addDevice'
)
isShow
.
value
=
true
}
</
script
>
</
script
>
xdc.sqlite
View file @
7ad24a01
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