Skip to content

V
vue_django_test
Commit 053d9b7c by qianmo
Options

Merge remote-tracking branch 'origin/main'

parents 136548f2 18636750
Showing with 202 additions and 43 deletions
chat/consumers.py
# chat/consumers.py
import urllib.parse
import json
from asgiref.sync import async_to_sync
......@@ -74,8 +75,9 @@ class ChatConsumer(AsyncWebsocketConsumer):
# Receive message from room group
async def chat_message(self, event):
message = dict(event["message"])
# print(event['message'])
message = event["message"]
# print(message)
# Send message to WebSocket
await self.send(text_data=json.dumps({"message": [message]}))
# await self.send(bytes_data=message)
......
frontend/src/components/home/Chat.vue
<template>
<div class="w-48% float-left border-solid border-black border-1">
<el-scrollbar ref="scrollbarRef" style="height: 30rem;" class="mb-10" always>
<el-scrollbar ref="scrollbarRef" style="height: 34rem;" class="mb-10" always>
<div ref="innerRef">
<p v-for="item in items" :key="item" class="scrollbar-demo-item text-sm">
<div>{{ JSON.parse(item)?.ts }}</div>
......@@ -10,28 +10,47 @@
</el-scrollbar>
<div>
<el-input style="width: 80%;" v-model="input" placeholder="Please input" @keyup.enter="send" />
<el-button class="ml-4" @click="send">Send</el-button>
<el-button class="ml-4" @click="showCmdDialog">Send Cmd</el-button>
</div>
</div>
<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="device">
<el-scrollbar style="height: 30rem;" class="mb-10" always>
<device-performance-table
v-for="param in deviceTableParams"
mt-5
class="mt-5"
:dev-name="param.devName"
:protocol-name="param.protocolName"
:group-name="param.key"
:key="param.key"
:type="activeName==='device'?'1': '2'"
@delete-table="deleteDeviceInfo(param)" />
</el-scrollbar>
<el-button @click="dialogVisible = true">Add table</el-button>
</el-tab-pane>
<el-tab-pane label="虚拟设备" name="simulateDevice">
<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==='device'?'1': '2'"
@delete-table="deleteDeviceInfo(param)" />
</el-scrollbar>
<el-button @click="dialogVisible = true">Add table</el-button>
</el-tab-pane>
</el-tabs>
</div>
<el-dialog class="w-150" v-model="dialogVisible" title="Select device">
<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>
<template #footer>
<span class="dialog-footer">
......@@ -42,39 +61,53 @@
</span>
</template>
</el-dialog>
<el-dialog v-model="dialogCmdVisible" class="w-150" title="Send Cmd">
<el-form :model="formData" label-width="120px">
<el-form-item label="设备名称">
<el-select v-model="formData.deviceName" w-100 @change="showCmds">
<el-option
v-for="deviceName in deviceNamesOptions"
:label="deviceName.label"
:value="deviceName.value" />
</el-select>
</el-form-item>
<el-form-item label="命令">
<el-select v-model="formData.cmdName" w-100 @change="showFields">
<el-option
v-for="cmdName in cmdNamesOptions"
:label="cmdName.label"
:value="cmdName.value" />
</el-select>
</el-form-item>
<el-form-item v-for="field in formData.fields" :label="field.fieldname">
<el-input v-model="field.value" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogCmdVisible = false">Cancel</el-button>
<el-button type="primary" @click="sendCmd">
Confirm
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import { ElScrollbar, ElInput, ElButton, ElSelect, ElOption, ElMessage } from 'element-plus';
import { ref, onMounted, watch, onBeforeUnmount, reactive } from 'vue';
import { ElScrollbar, ElButton, ElSelect, ElOption, ElMessage } from 'element-plus';
import DevicePerformanceTable from '@/components/home/DevicePerformanceTabel'
import axios from 'axios';
const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
const input = ref('');
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 items = ref<string[]>([]);
const flag = ref<boolean>(false);
let chatSocket: WebSocket | null = null;
const send = () => {
if (chatSocket === null) {
console.error('chatSocket is null');
return;
}
chatSocket.send(JSON.stringify({
'message': input.value
}));
input.value = '';
}
watch(flag, () => {
setTimeout(() => {
scrollbarRef.value!.setScrollTop(innerRef.value!.offsetHeight);
......@@ -96,14 +129,10 @@ onMounted(() => {
// // 将字节流转换为字符串或其他格式进行处理
// const message = byteArray.toString();
// items.value.push(JSON.stringify(e.data));
items.value.push(e.data);
items.value.push(decodeURIComponent(e.data));
flag.value = !flag.value
};
chatSocket.onclose = (e) => {
console.error('Chat socket closed unexpectedly', e);
};
axios.get('/api/xpro_all_devinfo/')
.then((res) => {
deviceInfos.value = res.data
......@@ -126,7 +155,13 @@ type MonitorType = {
protocolName: string
devName: string
}
// tab
// 维护两个列表，通过判断当前在哪个标签页就对谁添加
// 删除同理
const activeName = ref<string>('device')
const deviceTableParams = ref<MonitorType[]>([]);
const simulateDeviceTableParams = ref<MonitorType[]>([]);
const addDeviceTable = () => {
if (deviceInfos.value.length === 0) {
ElMessage.warning('input invalid');
......@@ -136,6 +171,7 @@ const addDeviceTable = () => {
for (let deviceInfo of deviceInfos.value) {
if (deviceInfo.dev_name === selectedDeviceName.value) {
if ((deviceInfo.comunitate_mode as string).toUpperCase().includes('TCP')) {
if (activeName.value === 'device') {
deviceTableParams.value.push({
key: (deviceInfo.tcp_port).toString(),
protocolName: deviceInfo.protocol_name,
......@@ -143,12 +179,29 @@ const addDeviceTable = () => {
});
}
else {
simulateDeviceTableParams.value.push({
key: (deviceInfo.tcp_port).toString(),
protocolName: deviceInfo.protocol_name,
devName: deviceInfo.dev_name
})
}
}
else {
if (activeName.value === 'device') {
deviceTableParams.value.push({
key: (deviceInfo.udp_port_src).toString(),
protocolName: deviceInfo.protocol_name,
devName: deviceInfo.dev_name
});
}
else {
simulateDeviceTableParams.value.push({
key: (deviceInfo.udp_port_src).toString(),
protocolName: deviceInfo.protocol_name,
devName: deviceInfo.dev_name
})
}
}
}
}
......@@ -157,7 +210,110 @@ const addDeviceTable = () => {
}
const deleteDeviceInfo = (param: MonitorType) => {
if (activeName.value === 'device') {
deviceTableParams.value.splice(deviceTableParams.value.indexOf(param), 1);
}
else {
simulateDeviceTableParams.value.splice(simulateDeviceTableParams.value.indexOf(param), 1);
}
}
// send Cmd
type FieldDataType = {
fieldname: string
value: string
}
type FromDataType = {
deviceName: string
cmdName: string
fields: FieldDataType[]
}
const formData = reactive<FromDataType>({
deviceName: '',
cmdName: '',
fields: []
})
const dialogCmdVisible = ref<boolean>(false);
type OptionType = {
label: string
value: string
}
const deviceNamesOptions = ref<OptionType[]>([])
const deviceNameMap = new Map<string, any>()
const showCmdDialog = () => {
dialogCmdVisible.value = true
for (let deviceInfo of deviceInfos.value) {
deviceNamesOptions.value.push({
label: deviceInfo.dev_name,
value: deviceInfo.dev_name
})
}
// 如果 map 中没有内容的话，将信息存到一个 map 中方便查找
if (deviceNameMap.size === 0) {
for (let deviceInfo of deviceInfos.value) {
deviceNameMap.set(deviceInfo.dev_name, deviceInfo)
}
}
}
const cmdNamesOptions = ref<OptionType[]>([])
const showCmds = () => {
cmdNamesOptions.value.splice(0, cmdNamesOptions.value.length);
axios.get('/api/mqtt/protocol/' + deviceNameMap.get(formData.deviceName).protocol_name + '/')
.then((res) => {
for (let item of res.data) {
cmdNamesOptions.value.push({
label: item,
value: item
})
}
})
.catch((err) => {
console.log(err);
})
}
const filterFields = ["CMDS", "END", "Comma"]
const showFields = () => {
axios.get('/api/mqtt/cmd/' + formData.cmdName + '/')
.then((res) => {
formData.fields = res.data.filter((item: FieldDataType) =>
!filterFields.includes(item.fieldname)
)
})
.catch((err) => {
console.log(err);
})
}
const sendCmd = () => {
dialogCmdVisible.value = false
// 发送命令
const obj = deviceNameMap.get(formData.deviceName)
axios.post('/api/mqtt/publish/',
{
station_id: obj.sta_id,
device_id: obj.dev_id,
cmd_name: formData.cmdName,
fields: formData.fields
})
.catch((err) => {
console.log(err);
})
// 展示到聊天框
let cmdText = `设备 ${formData.deviceName} 发送命令 ${formData.cmdName}`
if (chatSocket === null) {
console.error('chatSocket is null');
return;
}
chatSocket.send(JSON.stringify({
'message': cmdText
}));
}
</script>
......
frontend/src/components/home/DevicePerformanceTabel.vue
......@@ -24,6 +24,7 @@ type propsType = {
devName: string
groupName: string
protocolName: string
type: string
}
const props = defineProps<propsType>()
......@@ -42,19 +43,13 @@ onMounted(() => {
// console.log(e.data);
let data = JSON.parse(e.data).message
for (const [key, value] of Object.entries(data[0] as Record<string, string>)) {
console.log(key, value);
if (tableTitles.value.indexOf(key) !== -1) {
tableData.value[0][key] = value
}
}
}
table_websocket.onclose = (e) => {
console.error('Table socket closed unexpectedly', e);
}
axios.get('/api/device_communication/performance/1/' + props.protocolName)
axios.get('/api/device_communication/performance/' + props.type + '/' + props.protocolName)
.then((res) => {
tableTitles.value = res.data
for (let key of res.data) {
......
mqtt/mqtt.py
......@@ -23,6 +23,8 @@ def on_message(mqtt_client, userdata, msg):
data, device_name = parse_proto(msg.payload)
# data = msg.payload.decode('utf-8')
print(f'Received message on topic: {msg.topic} with payload: {data}')
if len(data) == 0:
return
send_message(data, device_name)
......@@ -38,6 +40,8 @@ def send_message(data: dict, device_name: str):
name = dev_info.tcp_port
elif "UDP" in dev_info.comunitate_mode.upper():
name = dev_info.udp_port_src
else:
return
send_websocket_message(data, group_name=f'chat_{name}')
# cmds = data.get('CMDS')
......
mqtt/views.py
......@@ -32,7 +32,7 @@ def cmd_fields_list(request, cmd_name: str):
cmd_fields = TableAllDevCmdDefine.objects.filter(cmd_name=cmd_name).all()
serializer = TableAllDevCmdDefineSerializer(cmd_fields, many=True)
ret_data = [data['fieldname'] for data in serializer.data]
ret_data = [{'fieldname': data['fieldname'], 'value': data['value']} for data in serializer.data]
return Response(data=ret_data, status=status.HTTP_200_OK)
......@@ -43,7 +43,6 @@ def publish_message(request):
:param request:
{
"type": "device",
"station_id": "XX1",
"device_id": 1,
"cmd_name": "HY_ACU7M5_PositionSet",
......@@ -63,6 +62,9 @@ def publish_message(request):
if request.data['station_id'] == "XX1":
topic = "/1/1/1/3"
dst_suid = 0x1113_0000
elif request.data['station_id'] == "XX2":
topic = "/1/1/2/3"
dst_suid = 0x1103_0000
elif request.data['station_id'] == "XX0":
topic = "/1/1/0/3"
dst_suid = 0x1103_0000
......
vue_django/urls.py
......@@ -37,7 +37,7 @@ urlpatterns = [
path("", index),
path("test/upload/", upload),
path("test/download/", download),
path("mqtt/", include("mqtt.urls")),
path("api/mqtt/", include("mqtt.urls")),
path("chat/", include("chat.urls")),
path("api/", include("device_data_op.urls")),
path("api/", include("download_db.urls")),
......
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