Skip to content

V
vue_django_test
Commit 25868d75 by 周田
Options

feat：设备参数监控

parent 81fd243e
Showing with 52 additions and 18 deletions
frontend/src/components/home/Chat.vue
...@@ -16,22 +16,42 @@ ...@@ -16,22 +16,42 @@
</div> </div>
<div class="w-50% float-right border-solid border-black border-1"> <div class="w-50% float-right border-solid border-black border-1">
<el-tabs v-model="activeName" class="px-5">
<el-tab-pane label="设备" name="first">
<el-scrollbar style="height: 30rem;" class="mb-10" always> <el-scrollbar style="height: 30rem;" class="mb-10" always>
<device-performance-table <device-performance-table
v-for="param in deviceTableParams" v-for="param in deviceTableParams"
mt-5 class="mt-5"
:dev-name="param.devName" :dev-name="param.devName"
:protocol-name="param.protocolName" :protocol-name="param.protocolName"
:group-name="param.key" :group-name="param.key"
:key="param.key" :key="param.key"
:type="activeName==='first'?'1': '2'"
@delete-table="deleteDeviceInfo(param)" /> @delete-table="deleteDeviceInfo(param)" />
</el-scrollbar> </el-scrollbar>
<el-button @click="dialogVisible = true">Add table</el-button> <el-button @click="dialogVisible = true">Add table</el-button>
</el-tab-pane>
<el-tab-pane label="虚拟设备" name="second">
<el-scrollbar style="height: 30rem;" class="mb-10" always>
<device-performance-table
v-for="param in simulateDeviceTableParams"
class="mt-5"
:dev-name="param.devName"
:protocol-name="param.protocolName"
:group-name="param.key"
:key="param.key"
:type="activeName==='first'?'1': '2'"
@delete-table="deleteDeviceInfo(param)" />
</el-scrollbar>
<el-button @click="dialogVisible = true">Add table</el-button>
</el-tab-pane>
</el-tabs>
</div> </div>
<el-dialog class="w-150" v-model="dialogVisible" title="Select device"> <el-dialog class="w-150" v-model="dialogVisible" title="Select device">
<el-select class="w-100" v-model="selectedDeviceName"> <el-select class="w-100" v-model="selectedDeviceName">
<el-option v-for="deviceInfo in deviceInfos" :key="deviceInfo.dev_name" :label="deviceInfo.dev_name" :value="deviceInfo.dev_name" /> <el-option v-for="deviceInfo in deviceInfos" :key="deviceInfo.dev_name" :label="deviceInfo.dev_name"
:value="deviceInfo.dev_name" />
</el-select> </el-select>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
...@@ -54,13 +74,7 @@ import axios from 'axios'; ...@@ -54,13 +74,7 @@ import axios from 'axios';
const innerRef = ref<HTMLDivElement>(); const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>(); const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
const input = ref(''); const input = ref('');
const items = ref<string[]>([ const items = ref<string[]>([]);
JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
]);
const flag = ref<boolean>(false); const flag = ref<boolean>(false);
let chatSocket: WebSocket | null = null; let chatSocket: WebSocket | null = null;
...@@ -100,10 +114,6 @@ onMounted(() => { ...@@ -100,10 +114,6 @@ onMounted(() => {
flag.value = !flag.value flag.value = !flag.value
}; };
chatSocket.onclose = (e) => {
console.error('Chat socket closed unexpectedly', e);
};
axios.get('/api/xpro_all_devinfo/') axios.get('/api/xpro_all_devinfo/')
.then((res) => { .then((res) => {
deviceInfos.value = res.data deviceInfos.value = res.data
...@@ -127,6 +137,7 @@ type MonitorType = { ...@@ -127,6 +137,7 @@ type MonitorType = {
devName: string devName: string
} }
const deviceTableParams = ref<MonitorType[]>([]); const deviceTableParams = ref<MonitorType[]>([]);
const simulateDeviceTableParams = ref<MonitorType[]>([]);
const addDeviceTable = () => { const addDeviceTable = () => {
if (deviceInfos.value.length === 0) { if (deviceInfos.value.length === 0) {
ElMessage.warning('input invalid'); ElMessage.warning('input invalid');
...@@ -136,6 +147,7 @@ const addDeviceTable = () => { ...@@ -136,6 +147,7 @@ const addDeviceTable = () => {
for (let deviceInfo of deviceInfos.value) { for (let deviceInfo of deviceInfos.value) {
if (deviceInfo.dev_name === selectedDeviceName.value) { if (deviceInfo.dev_name === selectedDeviceName.value) {
if ((deviceInfo.comunitate_mode as string).toUpperCase().includes('TCP')) { if ((deviceInfo.comunitate_mode as string).toUpperCase().includes('TCP')) {
if (activeName.value === 'first') {
deviceTableParams.value.push({ deviceTableParams.value.push({
key: (deviceInfo.tcp_port).toString(), key: (deviceInfo.tcp_port).toString(),
protocolName: deviceInfo.protocol_name, protocolName: deviceInfo.protocol_name,
...@@ -143,12 +155,29 @@ const addDeviceTable = () => { ...@@ -143,12 +155,29 @@ const addDeviceTable = () => {
}); });
} }
else { else {
simulateDeviceTableParams.value.push({
key: (deviceInfo.tcp_port).toString(),
protocolName: deviceInfo.protocol_name,
devName: deviceInfo.dev_name
})
}
}
else {
if (activeName.value === 'first') {
deviceTableParams.value.push({ deviceTableParams.value.push({
key: (deviceInfo.udp_port_src).toString(), key: (deviceInfo.udp_port_src).toString(),
protocolName: deviceInfo.protocol_name, protocolName: deviceInfo.protocol_name,
devName: deviceInfo.dev_name devName: deviceInfo.dev_name
}); });
} }
else {
simulateDeviceTableParams.value.push({
key: (deviceInfo.udp_port_src).toString(),
protocolName: deviceInfo.protocol_name,
devName: deviceInfo.dev_name
})
}
}
} }
} }
...@@ -157,9 +186,17 @@ const addDeviceTable = () => { ...@@ -157,9 +186,17 @@ const addDeviceTable = () => {
} }
const deleteDeviceInfo = (param: MonitorType) => { const deleteDeviceInfo = (param: MonitorType) => {
if (activeName.value === 'first') {
deviceTableParams.value.splice(deviceTableParams.value.indexOf(param), 1); deviceTableParams.value.splice(deviceTableParams.value.indexOf(param), 1);
}
else {
simulateDeviceTableParams.value.splice(simulateDeviceTableParams.value.indexOf(param), 1);
}
} }
// tab
const activeName = ref<string>('first')
</script> </script>
<style scoped> <style scoped>
......
frontend/src/components/home/DevicePerformanceTabel.vue
...@@ -24,6 +24,7 @@ type propsType = { ...@@ -24,6 +24,7 @@ type propsType = {
devName: string devName: string
groupName: string groupName: string
protocolName: string protocolName: string
type: string
} }
const props = defineProps<propsType>() const props = defineProps<propsType>()
...@@ -50,11 +51,7 @@ onMounted(() => { ...@@ -50,11 +51,7 @@ onMounted(() => {
} }
} }
table_websocket.onclose = (e) => { axios.get('/api/device_communication/performance/' + props.type + '/' + props.protocolName)
console.error('Table socket closed unexpectedly', e);
}
axios.get('/api/device_communication/performance/1/' + props.protocolName)
.then((res) => { .then((res) => {
tableTitles.value = res.data tableTitles.value = res.data
for (let key of res.data) { for (let key of res.data) {
......
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