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
338a39bf
Commit
338a39bf
authored
Aug 29, 2023
by
周田
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:设备通信页面(框架)
parent
8c324a58
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
247 additions
and
4 deletions
+247
-4
App.vue
frontend/src/App.vue
+4
-2
DeviceInfoCard.vue
...nd/src/components/device_communication/DeviceInfoCard.vue
+151
-0
types.ts
frontend/src/components/device_communication/types.ts
+16
-0
style.css
frontend/src/style.css
+1
-1
DeviceCommunication.vue
frontend/src/views/DeviceCommunication.vue
+74
-0
tsconfig.json
frontend/tsconfig.json
+1
-1
xdc.sqlite
xdc.sqlite
+0
-0
No files found.
frontend/src/App.vue
View file @
338a39bf
<
script
setup
lang=
"ts"
>
import
Chat
from
'@/views/Chat'
//
import Chat from '@/views/Chat'
// import FileDown from './views/FileDown.vue';
// import Upload from './views/Upload.vue';
// import Tabs from './views/Tabs.vue';
import
DeviceCommunication
from
'@/views/DeviceCommunication'
;
</
script
>
<
template
>
<
chat
/
>
<
!--
<chat
/>
--
>
<!--
<FileDown
/>
-->
<!--
<Upload
/>
-->
<!--
<Tabs
/>
-->
<device-communication
/>
</
template
>
frontend/src/components/device_communication/DeviceInfoCard.vue
0 → 100644
View file @
338a39bf
<
template
>
<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>
</
template
>
<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"
>
{{ tag }}
</el-tag>
</el-descriptions-item>
</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-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>
</template>
<
script
setup
lang=
"ts"
>
import
{
onMounted
,
ref
}
from
'vue'
;
import
axios
from
'axios'
;
import
type
{
DeviceInfo
}
from
'@/components/device_communication/types'
;
type
propType
=
{
deviceInfo
:
DeviceInfo
}
const
props
=
defineProps
<
propType
>
();
const
ip
=
ref
<
string
>
()
const
port
=
ref
<
number
>
()
const
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
)
})
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
}
// 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
=
'150px'
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
,
performance_fields
:
props
.
deviceInfo
.
performance_fields
})
</
script
>
<
style
>
.el-descriptions__label
:not
(
.is-bordered-label
)
{
color
:
var
(
--el-text-color-regular
)
!important
;
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
>
\ No newline at end of file
frontend/src/components/device_communication/types.ts
0 → 100644
View file @
338a39bf
export
type
DeviceInfo
=
{
id
:
number
,
station_id
:
string
,
device_id
:
number
,
device_name
:
string
,
device_name_chn
:
string
,
protocol_name
:
string
,
communicate_mode
:
string
,
tcp_ip
:
string
,
tcp_port
:
number
,
udp_ip_src
:
string
,
udp_port_src
:
number
,
udp_ip_dst
:
string
,
udp_port_dst
:
number
,
performance_fields
:
string
}
frontend/src/style.css
View file @
338a39bf
...
...
@@ -26,7 +26,7 @@ a:hover {
body
{
margin
:
0
;
display
:
flex
;
place-items
:
center
;
/* place-items: center; */
min-width
:
320px
;
min-height
:
100vh
;
}
...
...
frontend/src/views/DeviceCommunication.vue
0 → 100644
View file @
338a39bf
<
template
>
<el-tabs
v-model=
"activeName"
type=
"card"
class=
"demo-tabs"
@
tab-click=
"handleClick"
>
<el-tab-pane
label=
"device"
name=
"device"
>
<div
class=
"demo-collapse"
>
<el-collapse>
<el-collapse-item
class=
"pt-10"
v-for=
"([station_level, device_info_list]) in Object.entries(device_infos)"
>
<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"
/>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane>
<el-tab-pane
label=
"simulate_device"
name=
"simulate_device"
>
Simulate device
<!-- TODO -->
</el-tab-pane>
</el-tabs>
</template>
<
script
lang=
"ts"
setup
>
import
axios
from
'axios'
;
import
{
onMounted
,
ref
}
from
'vue'
import
type
{
TabsPaneContext
}
from
'element-plus'
import
DeviceInfoCard
from
'@/components/device_communication/DeviceInfoCard'
import
type
{
DeviceInfo
}
from
'@/components/device_communication/types'
// tab 相关
const
activeName
=
ref
(
'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
);
})
})
</
script
>
frontend/tsconfig.json
View file @
338a39bf
...
...
@@ -27,7 +27,7 @@
"baseUrl"
:
"./"
,
//路径映射,相对于baseUrl
"paths"
:
{
"@/*"
:
[
"./src/*.vue"
]
"@/*"
:
[
"./src/*.vue"
,
"./src/*.ts"
]
},
},
"include"
:
[
"src/**/*.ts"
,
"src/**/*.d.ts"
,
"src/**/*.tsx"
,
"src/**/*.vue"
],
...
...
xdc.sqlite
View file @
338a39bf
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