Skip to content

V
vue_django_test
Commit b1d03622 by qianmo
Options

add:设备通信

parent 968d5086
Showing with 119 additions and 190 deletions
frontend/package.json
......@@ -30,7 +30,9 @@
"vant": "^3.5.4",
"vue": "^3.2.37",
"vue-echarts": "^6.2.3",
"vue-router": "^4.1.3"
"vue-router": "^4.1.3",
"pinia": "^2.1.6",
"vue-clipboard3": "^2.0.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.2",
......
frontend/src/components/device_communication/EditDialog.vue
......@@ -78,26 +78,49 @@ import type { CheckboxValueType, ElForm } from 'element-plus';
import { ElMessage, FormRules } from 'element-plus'
import axios from 'axios';
import { DeviceInfo } from "./types";
import { useProtocolNamesStore } from '@/stores/protocolNames';
// import { DeviceInfo } from "./types";
import { useProtocolNamesStore } from '../../stores/protocolNames.js';
// protocol name 存储
const store = useProtocolNamesStore()
// form 表单对象
const formRef = ref<typeof ElForm>()
const formRef = ref()
// 弹出框是否可见，默认不可见
// 弹出框表单 label 的宽度
const dialogFormVisible = ref(false)
const formLabelWidth = "120px"
// 父组件往这里传的类型
type porpsType = {
isShow: boolean,
deviceInfo?: DeviceInfo,
type: string,
tabType: string
// type porpsType = {
// isShow: boolean,
// deviceInfo?: DeviceInfo,
// type: string,
// tabType: string
// }
interface DeviceInfo{
id: Number | null,
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,
checked_performance_fields: String[] | null,
}
const props = defineProps<porpsType>()
const props = defineProps<{
isShow: Boolean,
deviceInfo: DeviceInfo,
type: String,
tabType: String
}>()
// 返回父组件的方法
const emit = defineEmits(['close', 'changeDeviceInfo'])
// 关闭弹出框的执行的操作
......@@ -105,11 +128,11 @@ const handleClose = () => {
// 向父组件发射关闭弹出框的事件
emit('close')
// 表单所有的校验和数据重置
formRef.value!.resetFields()
formRef.value.resetFields()
}
// 默认表单数据
const form = ref<DeviceInfo>({
const form = ref({
station_id: "",
device_id: 0,
device_name: "",
......@@ -130,23 +153,25 @@ watch(() => props.isShow, () => {
// 判断传下来的类型是不是 edit，如果是，需要将展示的数据放到表单上
if (props.isShow && props.type === "edit") {
form.value = {
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,
}
Object.assign(form.value, props.deviceInfo)
form.value.id = props.deviceInfo.id
// form.value = {
// 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,
// }
handleModeChange(form.value.communicate_mode)
checked_performance_fields.value = props.deviceInfo!.checked_performance_fields!
checked_performance_fields.value = props.deviceInfo.checked_performance_fields
handleProtocolChange(form.value.protocol_name, checked_performance_fields.value)
}
})
......@@ -178,7 +203,7 @@ const validatePort = (_: any, value: any, callback: any) => {
}
// 表单校验规则
const rules = reactive<FormRules<typeof form>>({
const rules = reactive({
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' }],
......@@ -251,7 +276,7 @@ const handleModeChange = (value: string) => {
// 提交表单
const submit_form = () => {
// 表单字段全部正确才能提交
formRef.value!.validate((valid: boolean) => {
formRef.value.validate((valid: boolean) => {
if (valid) {
submit()
} else {
......@@ -265,7 +290,7 @@ const submit_form = () => {
const submit = () => {
// 获取表单数据
let data: DeviceInfo = {
let data = {
station_id: form.value.station_id,
device_id: form.value.device_id,
device_name: form.value.device_name,
......
frontend/src/components/device_communication/types.js 0 → 100644
// export interface 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
// checked_performance_fields?: string[]
// }
frontend/src/components/device_communication/types.ts deleted 100644 → 0
export interface 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
checked_performance_fields?: string[]
}
frontend/src/router/index.js
......@@ -38,15 +38,15 @@ export const routes = [
menuIcon: "fee",
},
},
// {
// path: "/device",
// name: "device",
// component: () => import("../views/device/device.vue"),
// meta: {
// menuTitle: "模拟设备",
// menuIcon: "fee",
// }
// },
{
path: "/device",
name: "device",
component: () => import("../views/device/DeviceCommunication.vue"),
meta: {
menuTitle: "设备通信",
menuIcon: "fee",
}
},
],
},
......
frontend/src/stores/protocolNames.ts → frontend/src/stores/protocolNames.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
type ProtocolName = {
label: string
value: string
}
// type ProtocolName = {
// label: string
// value: string
// }
export const useProtocolNamesStore = defineStore('protocolNames', () => {
const protocolNames = ref<ProtocolName[]>([])
const protocolNames = ref([])
return {
protocolNames
......
frontend/src/views/FileDown.vue deleted 100644 → 0
<script setup lang="ts">
import { ElButton } from 'element-plus';
import axiox from 'axios';
const downloadFile = () => {
let url = '/api/downloadFile/'
axiox({
url,
method: 'GET',
responseType: 'blob'
}).then(res => {
// 下载文件
console.log(res)
const blob = new Blob([res.data], { type: 'application/x-sqlite3' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'xdc.sqlite';
link.click();
})
console.log('downloadFile');
}
</script>
<template>
<ElButton type="primary" @click="downloadFile">导出文件</ElButton>
</template>
\ No newline at end of file
frontend/src/views/Tabs.vue deleted 100644 → 0
<template>
<el-select class="mb-5" v-model="value" placeholder="Select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<br>
<el-tag v-for="tag in tags" :key="tag" class="mx-1" closable @close="handleClose(tag)">
{{ tag }}
</el-tag>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { onMounted, ref, watch } from 'vue'
const tags = ref<string[]>(['111', '222'])
const handleClose = (tag: string) => {
tags.value.splice(tags.value.indexOf(tag), 1)
console.log(tags.value);
}
const value = ref('')
type OptionItem = {
value: string,
label: string
}
const options = ref<OptionItem[]>([])
onMounted(() => {
axios.get(
'api/device_communication/'
).then((res) => {
options.value = res.data
}).catch((err) => {
console.log(err);
})
})
watch(value, () => {
axios.post(
'api/device_communication/protocol_performance/',
{
'protocol_name': value.value,
}).then((res) => {
console.log(res)
tags.value = res.data
}).catch((err) => {
console.log(err);
})
})
</script>
frontend/src/views/Upload.vue deleted 100644 → 0
<template>
<el-upload
class="upload-demo"
action="api/protocol_version_manage/file_upload/"
:show-file-list="false"
:data="data"
>
<el-button type="primary">Click to upload</el-button>
</el-upload>
<br>
<el-button type="primary" @click="downloadFile">下载原始文件</el-button>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";
const data = ref({
"protocol_name": "HY_VirtualDevice_PROTOCOL",
"version": "222",
});
const downloadFile = () => {
let url = "api/protocol_version_manage/file_download/HY_VirtualDevice_PROTOCOL/222/";
axios({
url,
method: "GET",
responseType: "blob",
}).then((res) => {
// 下载文件
console.log(res);
const blob = new Blob([res.data], { type: "multipart/form-data" });
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = decodeURIComponent(res.headers["filename"]);
link.click();
});
console.log("downloadFile");
};
</script>
frontend/src/views/deviceCommunication/DeviceCommunication.vue 0 → 100644
<template>
<el-tabs v-model="activeName" type="card" class="demo-tabs">
<el-tab-pane label="device" name="device">
<communication-tab tab-type="communicate" />
</el-tab-pane>
<el-tab-pane label="simulate_device" name="simulate_device">
<communication-tab tab-type="simulate_communicate" />
</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { onMounted, ref } from 'vue'
import { useProtocolNamesStore } from '@/stores/protocolNames'
import CommunicationTab from "@/components/device_communication/CommunicationTab";
// tab 相关
const activeName = ref<string>('simulate_device')
onMounted(() => {
axios.get('/api/device_communication/')
.then((res) => {
const store = useProtocolNamesStore()
store.protocolNames.push(...res.data)
})
})
</script>
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