Skip to content

V
vue_django_test
Commit cc0da931 by 周田
Options

feat：删除通信参数

parent f08c14e0
Showing with 92 additions and 42 deletions
device_communication/urls.py
......@@ -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
......@@ -23,15 +23,11 @@ def get_protocol_names(request):
return Response(data=res_data, status=status.HTTP_200_OK)
@api_view(['POST'])
def get_protocol_field_names(request):
@api_view(['GET'])
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
......@@ -2,7 +2,7 @@
<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>
......@@ -11,7 +11,7 @@
<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-tag v-for="tag in checked_performance_fields" :key="tag" class="mx-1">
{{ tag }}
</el-tag>
</el-descriptions-item>
......@@ -20,7 +20,7 @@
<!-- Form -->
<el-dialog v-model="dialogFormVisible" title="编辑通信参数">
<el-form :model="form" >
<el-form :model="form">
<el-form-item label="设备名称" :label-width="formLabelWidth">
<el-input v-model="form.device_name" autocomplete="false" />
</el-form-item>
......@@ -48,16 +48,21 @@
<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-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="dialogFormVisible = false">
<el-button type="primary" @click="update_communication">
Confirm
</el-button>
</span>
......@@ -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 = '150px'
const formLabelWidth = '130px'
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,15 +172,19 @@ const form = ref<DeviceInfo>({
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;
}
......
frontend/src/components/device_communication/types.ts
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
......@@ -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
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment