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
5f27157e
Commit
5f27157e
authored
Sep 01, 2023
by
周田
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:模拟设备通信参数页面
parent
63b8b6f9
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
144 additions
and
132 deletions
+144
-132
CommunicationTab.vue
.../src/components/device_communication/CommunicationTab.vue
+130
-0
DeviceInfoCard.vue
...nd/src/components/device_communication/DeviceInfoCard.vue
+5
-5
EditDialog.vue
frontend/src/components/device_communication/EditDialog.vue
+5
-4
DeviceCommunication.vue
frontend/src/views/DeviceCommunication.vue
+4
-123
xdc.sqlite
xdc.sqlite
+0
-0
No files found.
frontend/src/components/device_communication/CommunicationTab.vue
0 → 100644
View file @
5f27157e
<
template
>
<div
class=
"text-right mb-5"
>
<el-button
type=
"primary"
@
click=
"copy"
>
copy to ini
</el-button>
<el-button
type=
"primary"
@
click=
"addDevice"
>
Add device
</el-button>
</div>
<div
class=
"demo-collapse"
>
<el-collapse>
<el-collapse-item
class=
"pt-10"
v-for=
"(device_info_list, station_id) in device_infos"
>
<template
#
title
>
<span
class=
"text-3xl font-bold"
>
{{
station_id
}}
</span>
</
template
>
<device-info-card
@
deleteDeviceInfo=
"deleteDeviceInfo"
v-for=
"device_info in device_info_list"
:device-info=
"device_info"
:tab-type=
"props.tabType"
/>
</el-collapse-item>
</el-collapse>
</div>
<edit-dialog
:is-show=
"isShow"
:tab-type=
"props.tabType"
@
close=
"isShow = false"
@
change-device-info=
"changeDeviceInfo"
type=
"add"
/>
</template>
<
script
setup
lang=
"ts"
>
import
axios
from
'axios'
;
import
{
onMounted
,
ref
}
from
'vue'
import
{
ElMessage
}
from
'element-plus'
import
useClipboard
from
'vue-clipboard3'
import
DeviceInfoCard
from
'@/components/device_communication/DeviceInfoCard'
import
type
{
DeviceInfo
}
from
'@/components/device_communication/types'
import
EditDialog
from
'@/components/device_communication/EditDialog'
;
type
propType
=
{
tabType
:
string
}
const
props
=
defineProps
<
propType
>
()
// device info card 相关
const
device_infos
=
ref
<
Record
<
string
,
DeviceInfo
[]
>>
({})
// 获取当前选择的页面
onMounted
(()
=>
{
axios
.
get
(
'/api/device_communication/'
+
props
.
tabType
+
'/'
)
.
then
(
res
=>
{
// 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
)
{
device_infos
.
value
[
res
.
data
[
i
].
station_id
].
push
(
res
.
data
[
i
])
}
else
{
device_infos
.
value
[
res
.
data
[
i
].
station_id
]
=
[
res
.
data
[
i
]]
}
}
})
.
catch
(
err
=>
{
console
.
log
(
err
);
})
})
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
)
{
// 如果 station_id 对应的设备列表为空,则删除 station_id
if
(
device_infos
.
value
[
params
.
station_id
].
length
===
1
)
{
delete
device_infos
.
value
[
params
.
station_id
]
return
}
// 删除
device_infos
.
value
[
params
.
station_id
].
splice
(
i
,
1
)
}
}
}
const
isShow
=
ref
(
false
)
const
addDevice
=
()
=>
{
isShow
.
value
=
true
}
const
changeDeviceInfo
=
(
params
:
DeviceInfo
)
=>
{
console
.
log
(
'changeDeviceInfo'
)
console
.
log
(
params
);
if
(
device_infos
.
value
[
params
.
station_id
]
===
undefined
)
{
device_infos
.
value
[
params
.
station_id
]
=
[
params
]
}
else
{
device_infos
.
value
[
params
.
station_id
].
push
(
params
)
}
}
// clipboard 赋值到设备信息到 ini 文件中
const
{
toClipboard
}
=
useClipboard
()
const
copy
=
async
()
=>
{
let
configText
=
composeConfigText
()
try
{
await
toClipboard
(
configText
)
ElMessage
({
message
:
'复制成功'
,
type
:
'success'
,
})
}
catch
(
error
)
{
console
.
log
(
error
);
}
}
// 生成和 ini 文件中类似的配置格式
function
composeConfigText
():
string
{
let
configText
=
''
for
(
const
[
station_level
,
device_info_list
]
of
Object
.
entries
(
device_infos
.
value
))
{
configText
+=
`[Device_info_
${
station_level
}
]\n`
configText
+=
`dev_num=
${
device_info_list
.
length
}
\n`
for
(
let
i
=
1
;
i
<=
device_info_list
.
length
;
i
++
)
{
configText
+=
`dev
${
i
}
_id=
${
device_info_list
[
i
-
1
].
device_id
}
\n`
configText
+=
`dev
${
i
}
_name=
${
device_info_list
[
i
-
1
].
device_name
}
\n`
configText
+=
`dev
${
i
}
_name_chn=
${
device_info_list
[
i
-
1
].
device_name_chn
}
\n`
configText
+=
`dev
${
i
}
_datacatlog=
${
device_info_list
[
i
-
1
].
protocol_name
}
\n`
}
}
return
configText
}
</
script
>
frontend/src/components/device_communication/DeviceInfoCard.vue
View file @
5f27157e
...
...
@@ -29,6 +29,7 @@
<edit-dialog
:is-show=
"dialogFormVisible"
:device-info=
"deviceInfo"
:tab-type=
"props.tabType"
@
close=
"dialogFormVisible = false"
@
change-device-info=
"changeDeviceInfo"
type=
"edit"
/>
...
...
@@ -36,7 +37,7 @@
<
script
setup
lang=
"ts"
>
import
{
onMounted
,
ref
,
watch
}
from
'vue'
;
import
{
onMounted
,
ref
,
watch
}
from
'vue'
;
import
axios
from
'axios'
;
import
{
ElMessage
,
ElMessageBox
}
from
'element-plus'
;
...
...
@@ -44,7 +45,8 @@ import type { DeviceInfo } from '@/components/device_communication/types';
import
EditDialog
from
'./EditDialog.vue'
;
type
propType
=
{
deviceInfo
:
DeviceInfo
deviceInfo
:
DeviceInfo
,
tabType
:
string
}
const
props
=
defineProps
<
propType
>
();
const
deviceInfo
=
ref
<
DeviceInfo
>
(
props
.
deviceInfo
)
...
...
@@ -70,7 +72,7 @@ const del = () => {
.
then
(()
=>
{
let
station_id
=
deviceInfo
.
value
.
station_id
let
id
=
deviceInfo
.
value
.
id
axios
.
delete
(
'/api/device_communication/
communicate
/'
+
id
+
'/'
)
axios
.
delete
(
'/api/device_communication/
'
+
props
.
tabType
+
'
/'
+
id
+
'/'
)
.
then
(()
=>
{
emit
(
'deleteDeviceInfo'
,
{
station_id
,
id
})
ElMessage
({
...
...
@@ -91,8 +93,6 @@ const changeDeviceInfo = (device_info: DeviceInfo) => {
deviceInfo
.
value
=
device_info
checked_performance_fields
.
value
=
JSON
.
parse
(
device_info
.
performance_fields
!
)
}
</
script
>
<
style
>
...
...
frontend/src/components/device_communication/EditDialog.vue
View file @
5f27157e
...
...
@@ -48,7 +48,7 @@
<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-form-item
label=
"监控属性"
:label-width=
"formLabelWidth"
>
<el-checkbox
v-model=
"checkAll"
:indeterminate=
"isIndeterminate"
@
change=
"handleCheckAllChange"
>
Check all
</el-checkbox>
...
...
@@ -95,6 +95,7 @@ type porpsType = {
isShow
:
boolean
,
deviceInfo
?:
DeviceInfo
,
type
:
string
,
tabType
:
string
}
const
props
=
defineProps
<
porpsType
>
()
// 返回父组件的方法
...
...
@@ -145,8 +146,8 @@ watch(() => props.isShow, () => {
udp_port_dst
:
props
.
deviceInfo
!
.
udp_port_dst
,
}
handleModeChange
(
form
.
value
.
communicate_mode
)
handleProtocolChange
(
form
.
value
.
protocol_name
,
checked_performance_fields
.
value
)
checked_performance_fields
.
value
=
props
.
deviceInfo
!
.
checked_performance_fields
!
handleProtocolChange
(
form
.
value
.
protocol_name
,
checked_performance_fields
.
value
)
}
})
...
...
@@ -282,7 +283,7 @@ const submit = () => {
if
(
props
.
type
===
"add"
)
{
// 添加通信参数方法
axios
.
post
(
'/api/device_communication/
communicate
/'
,
data
)
axios
.
post
(
'/api/device_communication/
'
+
props
.
tabType
+
'
/'
,
data
)
.
then
((
res
)
=>
{
console
.
log
(
res
.
data
)
data
=
res
.
data
...
...
@@ -301,7 +302,7 @@ const submit = () => {
// 修改通信参数方法
data
.
id
=
form
.
value
.
id
axios
.
put
(
'/api/device_communication/
communicate
/'
+
data
.
id
+
'/'
,
data
)
axios
.
put
(
'/api/device_communication/
'
+
props
.
tabType
+
'
/'
+
data
.
id
+
'/'
,
data
)
.
then
((
res
)
=>
{
console
.
log
(
res
);
ElMessage
({
...
...
frontend/src/views/DeviceCommunication.vue
View file @
5f27157e
<
template
>
<el-tabs
v-model=
"activeName"
type=
"card"
class=
"demo-tabs"
@
tab-click=
"handleClick"
>
<el-tab-pane
label=
"device"
name=
"device"
>
<div
class=
"text-right mb-5"
>
<el-button
type=
"primary"
@
click=
"copy"
>
copy to ini
</el-button>
<el-button
type=
"primary"
@
click=
"addDevice"
>
Add device
</el-button>
</div>
<div
class=
"demo-collapse"
>
<el-collapse>
<el-collapse-item
class=
"pt-10"
v-for=
"(device_info_list, station_id) in device_infos"
>
<template
#
title
>
<span
class=
"text-2xl font-bold"
>
{{
station_id
}}
</span>
</
template
>
<device-info-card
@
deleteDeviceInfo=
"deleteDeviceInfo"
v-for=
"device_info in device_info_list"
:device-info=
"device_info"
/>
</el-collapse-item>
</el-collapse>
</div>
<communication-tab
tab-type=
"communicate"
/>
</el-tab-pane>
<el-tab-pane
label=
"simulate_device"
name=
"simulate_device"
>
Simulate device
<!-- TODO -->
<communication-tab
tab-type=
"simulate_communicate"
/>
</el-tab-pane>
</el-tabs>
<edit-dialog
:is-show=
"isShow"
@
close=
"isShow = false"
@
change-device-info=
"changeDeviceInfo"
type=
"add"
/>
</
template
>
<
script
lang=
"ts"
setup
>
import
axios
from
'axios'
;
import
{
onMounted
,
ref
}
from
'vue'
import
type
{
TabsPaneContext
}
from
'element-plus'
import
{
ElMessage
}
from
'element-plus'
import
useClipboard
from
'vue-clipboard3'
import
DeviceInfoCard
from
'@/components/device_communication/DeviceInfoCard'
import
type
{
DeviceInfo
}
from
'@/components/device_communication/types'
import
EditDialog
from
'@/components/device_communication/EditDialog'
;
import
{
useProtocolNamesStore
}
from
'@/stores/protocolNames'
import
CommunicationTab
from
"@/components/device_communication/CommunicationTab"
;
// tab 相关
const
activeName
=
ref
(
'
device'
)
const
activeName
=
ref
<
string
>
(
'simulate_
device'
)
const
handleClick
=
(
tab
:
TabsPaneContext
,
event
:
Event
)
=>
{
console
.
log
(
tab
,
event
)
}
// device info card 相关
const
device_infos
=
ref
<
Record
<
string
,
DeviceInfo
[]
>>
({})
const
simulate_device_infos
=
ref
<
DeviceInfo
[]
>
([])
onMounted
(()
=>
{
axios
.
get
(
'/api/device_communication/communicate/'
)
.
then
(
res
=>
{
// 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
)
{
device_infos
.
value
[
res
.
data
[
i
].
station_id
].
push
(
res
.
data
[
i
])
}
else
{
device_infos
.
value
[
res
.
data
[
i
].
station_id
]
=
[
res
.
data
[
i
]]
}
}
})
.
catch
(
err
=>
{
console
.
log
(
err
);
})
axios
.
get
(
'/api/device_communication/simulate_communicate/'
)
.
then
(
res
=>
{
simulate_device_infos
.
value
=
res
.
data
})
.
catch
(
err
=>
{
console
.
log
(
err
);
})
axios
.
get
(
'/api/device_communication/'
)
.
then
((
res
)
=>
{
const
store
=
useProtocolNamesStore
()
...
...
@@ -84,70 +31,4 @@ 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
)
{
// 如果 station_id 对应的设备列表为空,则删除 station_id
if
(
device_infos
.
value
[
params
.
station_id
].
length
===
1
)
{
delete
device_infos
.
value
[
params
.
station_id
]
return
}
// 删除
device_infos
.
value
[
params
.
station_id
].
splice
(
i
,
1
)
}
}
}
const
isShow
=
ref
(
false
)
const
addDevice
=
()
=>
{
isShow
.
value
=
true
}
const
changeDeviceInfo
=
(
params
:
DeviceInfo
)
=>
{
console
.
log
(
'changeDeviceInfo'
)
console
.
log
(
params
);
if
(
device_infos
.
value
[
params
.
station_id
]
===
undefined
)
{
device_infos
.
value
[
params
.
station_id
]
=
[
params
]
}
else
{
device_infos
.
value
[
params
.
station_id
].
push
(
params
)
}
}
// clipboard 赋值到设备信息到 ini 文件中
const
{
toClipboard
}
=
useClipboard
()
const
copy
=
async
()
=>
{
let
configText
=
composeConfigText
()
try
{
await
toClipboard
(
configText
)
ElMessage
({
message
:
'复制成功'
,
type
:
'success'
,
})
}
catch
(
error
)
{
console
.
log
(
error
);
}
}
// 生成和 ini 文件中类似的配置格式
function
composeConfigText
():
string
{
let
configText
=
''
for
(
const
[
station_level
,
device_info_list
]
of
Object
.
entries
(
device_infos
.
value
))
{
configText
+=
`[Device_info_
${
station_level
}
]\n`
configText
+=
`dev_num=
${
device_info_list
.
length
}
\n`
for
(
let
i
=
1
;
i
<=
device_info_list
.
length
;
i
++
)
{
configText
+=
`dev
${
i
}
_id=
${
device_info_list
[
i
-
1
].
device_id
}
\n`
configText
+=
`dev
${
i
}
_name=
${
device_info_list
[
i
-
1
].
device_name
}
\n`
configText
+=
`dev
${
i
}
_name_chn=
${
device_info_list
[
i
-
1
].
device_name_chn
}
\n`
configText
+=
`dev
${
i
}
_datacatlog=
${
device_info_list
[
i
-
1
].
protocol_name
}
\n`
}
}
return
configText
}
</
script
>
xdc.sqlite
View file @
5f27157e
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