Skip to content

V
vue_django_test
Commit 1afd0664 by qianmo
Options

update: 修改字段

parent e853217f
Showing with 481 additions and 136 deletions
chat/consumers.py
...@@ -73,9 +73,9 @@ class ChatConsumer(AsyncWebsocketConsumer): ...@@ -73,9 +73,9 @@ class ChatConsumer(AsyncWebsocketConsumer):
# Receive message from room group # Receive message from room group
async def chat_message(self, event): async def chat_message(self, event):
message = event["message"] message = event["message"]
# Send message to WebSocket # Send message to WebSocket
# await self.send(text_data=json.dumps({"message": message})) print(message)
await self.send(bytes_data=message) await self.send(text_data=json.dumps({"message": message}))
# await self.send(bytes_data=message)
frontend/src/components/collapse-table.vue
...@@ -13,14 +13,11 @@ ...@@ -13,14 +13,11 @@
</div> </div>
</div> </div>
<div class="mb-4 mt-4">协议指令</div> <div class="mb-4 mt-4">协议规范</div>
<el-collapse class="mt-4"> <el-collapse class="mt-4">
<el-collapse-item title="HY_ACU7M5_PositionSet&nbsp;&nbsp;&nbsp;XY置位指令&nbsp;&nbsp;&nbsp;Tx" name="1"> <el-collapse-item v-for="cmd in parentMsg" :title="cmd.cmd_name+' '+cmd.cmd_explain+' '+cmd.cmd_type">
<protpcol-table></protpcol-table> <protpcol-table v-if="protocolCmd" :info="cmd.cmd_name" :message="protocolCmd"></protpcol-table>
</el-collapse-item>
<el-collapse-item title="HY_ACU7M5_MoveStop&nbsp;&nbsp;&nbsp;停止运动指令&nbsp;&nbsp;&nbsp;Tx" name="2">
<protpcol-table></protpcol-table>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
...@@ -64,13 +61,24 @@ ...@@ -64,13 +61,24 @@
</template> </template>
<script setup> <script setup>
import {ref} from 'vue' import {ref, toRefs} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import ProtpcolTable from "./protpcol-table.vue"; import ProtpcolTable from "./protpcol-table.vue";
const addCmd = ref(false) const addCmd = ref(false)
const option = ref('option') const option = ref('option')
const formLabelWidth = '140px' const formLabelWidth = '140px'
const props = defineProps({
name: String,
info: Object,
protocolcmd: Object
})
const item = ref()
item.value = toRefs(props).name.value
const parentMsg = ref()
parentMsg.value = toRefs(props).info.value[item.value]
const protocolCmd = ref()
protocolCmd.value = toRefs(props).protocolcmd.value
const open = () => { const open = () => {
ElMessageBox.confirm( ElMessageBox.confirm(
...@@ -100,9 +108,6 @@ const open = () => { ...@@ -100,9 +108,6 @@ const open = () => {
<style> <style>
.container { .container {
/*width: 100%;*/
/*border: 1px solid;*/
display: flex; display: flex;
justify-content: space-between; /* 使内部元素平均分布 */ justify-content: space-between; /* 使内部元素平均分布 */
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
......
frontend/src/components/device-table.vue 0 → 100644
<template>
<div style="width: 95%;margin: auto">
<div class="flex mt-4 items-center">
<div>设备名称</div>
<div class="ml-4">tcp server</div>
<div class="ml-4">ip</div>
<div class="ml-4">port</div>
<el-switch v-model="value" :disabled="isSwitchDisabled" class="ml-4"></el-switch>
<el-button class="ml-4" @click="dialogFormVisible = true">设置</el-button>
</div>
<el-table
style="width: 100%"
:data="tableData"
:show-header="false" border
class="mt-2"
>
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:prop="item"
:fixed="isTitleColumn ? 'left' : ''"
>
</el-table-column>
</el-table>
</div>
<el-dialog v-model="dialogFormVisible">
<el-form :model="form">
<el-form-item label="模式" :label-width="formLabelWidth">
<el-select v-model="form.mode">
<el-option label="tcp server" value="tcp server" />
<el-option label="tcp client" value="tcp client" />
<el-option label="tcp/ip" value="tcp/ip" />
<el-option label="udp" value="udp" />
</el-select>
</el-form-item>
<el-form-item label="ip" :label-width="formLabelWidth">
<el-input v-model="form.ip" autocomplete="off" />
</el-form-item>
<el-form-item label="端口" :label-width="formLabelWidth">
<el-input v-model="form.port" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">
确定
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import {ref, toRefs, watch} from 'vue'
const value = ref(true)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const tableHeader = ref([])
const tableData = ref([])
tableData.value = [
{title:'变量', value0: '模式', value1: 'ip', value2: '端口'},
{title: '值', value0: 'tcp server', value1: 'localhost', value2: '8000'}
]
for (const key in tableData.value[0]){
tableHeader.value.push(key)
}
const form = ref(
{mode:'', ip: '', port: ''}
)
const props = defineProps({
tag:String
})
const isSwitchDisabled = ref(true)
console.log("3", toRefs(props).tag.value)
watch( () => toRefs(props).tag.value, (newValue) => {
if (newValue === 'real'){
value.value = true
isSwitchDisabled.value = true
}else if(newValue === 'virtual'){
isSwitchDisabled.value = false
}
})
const isTitleColumn = (column) => column.property === 'title'
</script>
<style scoped>
</style>
\ No newline at end of file
frontend/src/components/kit-collapse.vue
<template> <template>
<div class="demo-collapse"> <div class="demo-collapse">
<el-collapse> <el-collapse>
<el-collapse-item title="HY_ACU7M5_Antenna_PROTOCOL" name="1"> <el-collapse-item v-for="item in protocols" >
<template #title>{{item}}</template>
<div style="margin: auto; width: 90%"> <div style="margin: auto; width: 90%">
<collapse-table class="mt-4"></collapse-table> <collapse-table
</div> v-if="protocolcmd"
</el-collapse-item> class="mt-4"
<el-collapse-item title=" HY_HWF0355-0357FC_PROTOCOL" name="2"> :info="parentMsg"
<div style="margin: auto; width: 90%"> :name="item"
<collapse-table class="mt-4"></collapse-table> :protocolcmd="protocolcmd"
</div> >
</el-collapse-item> </collapse-table>
<el-collapse-item title="HY_DualChannelLBandOpticalTransceiver_PROTOCOL" name="3">
<div style="margin: auto; width: 90%">
<collapse-table class="mt-4"></collapse-table>
</div> </div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
...@@ -23,15 +21,25 @@ ...@@ -23,15 +21,25 @@
<script setup> <script setup>
import {ref, onMounted } from 'vue' import {ref, onMounted } from 'vue'
import CollapseTable from "./collapse-table.vue"; import CollapseTable from "./collapse-table.vue";
import {DeviceProtocol} from "../dao/device"; import {DeviceProtocol,ProtocolCmd} from "../dao/device";
const protocols = ref()
const parentMsg = ref()
const protocolcmd = ref()
async function getDeviceProtocol(){ async function getDeviceProtocol(){
let data = await DeviceProtocol() let data = await DeviceProtocol()
console.log(data) protocols.value = data.fields
parentMsg.value = data
} }
onMounted(() => { async function getProtocolCmd(){
getDeviceProtocol() let cmds = await ProtocolCmd()
protocolcmd.value = cmds
}
onMounted(async () => {
await getDeviceProtocol()
await getProtocolCmd()
}) })
</script> </script>
......
frontend/src/components/kit-device.vue
<template> <template>
<div class="mt-10" v-for="item in deviceData"> <DeviceTable v-if="tag" :tag="tag"></DeviceTable>
<span>{{item.name}}</span> <div style="display: flex; justify-content: center;">
<div id="flex-container" class="mt-4"> <el-button
<div class="flex-item">端口号：</div> class="mt-2" style="width: 95%;border: 1px dashed"
<div class="flex-item"> @click="open"
<el-input v-model="item.portNumber" ></el-input> >+</el-button>
</div>
<div class="flex-item">开关：</div>
<div class="flex-item">
<el-switch v-model="item.switchValue"></el-switch>
</div>
</div>
</div> </div>
<el-dialog v-model="deviceVisible">
<el-form :model="device">
<el-form-item label="模式" :label-width="formLabelWidth">
<el-select v-model="device.mode">
<el-option label="tcp server" value="tcp server" />
<el-option label="tcp client" value="tcp client" />
<el-option label="tcp/ip" value="tcp/ip" />
<el-option label="udp" value="udp" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="deviceVisible = false">取消</el-button>
<el-button type="primary" @click="deviceVisible = false">
确定
</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="virtualDeviceVisible">
<el-form :model="virtualDevice">
<el-form-item label="协议" :label-width="formLabelWidth">
<el-select v-model="virtualDevice.protocol">
<el-option label="option 1" value="option 1" />
</el-select>
</el-form-item>
<el-form-item label="协议版本" :label-width="formLabelWidth">
<el-select v-model="virtualDevice.version">
<el-option label="option 1" value="option 1" />
</el-select>
</el-form-item>
<el-form-item label="模式" :label-width="formLabelWidth">
<el-select v-model="virtualDevice.mode">
<el-option label="tcp server" value="tcp server" />
<el-option label="tcp client" value="tcp client" />
<el-option label="tcp/ip" value="tcp/ip" />
<el-option label="udp" value="udp" />
</el-select>
</el-form-item>
<el-form-item label="本机ip" :label-width="formLabelWidth">
<el-input v-model="virtualDevice.ip" autocomplete="off" />
</el-form-item>
<el-form-item label="端口" :label-width="formLabelWidth">
<el-input v-model="virtualDevice.port" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="virtualDeviceVisible = false">取消</el-button>
<el-button type="primary" @click="virtualDeviceVisible = false">
确定
</el-button>
</span>
</template>
</el-dialog>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import {onMounted, ref, toRefs, watch} from 'vue'
import DeviceTable from "./device-table.vue";
const deviceData = ref([ const deviceVisible = ref(false)
{ name: '7M5ACU', portNumber: '1111', switchValue: true}, const virtualDeviceVisible = ref(false)
{ name: '变频器', portNumber: '0000', switchValue: false} const formLabelWidth = '140px'
]) const device = ref({mode: ''})
</script> const virtualDevice = ref(
{protocol: '', version: '', mode: '', ip: '', port: ''}
)
const props = defineProps({
tag: String
})
const tag = ref(toRefs(props).tag.value)
<style> const open = () => {
#flex-container { if (toRefs(props).tag.value === 'real'){
display: flex; deviceVisible.value = true
align-items: center; }else {
virtualDeviceVisible.value = true
}
} }
.flex-item { watch( () => toRefs(props).tag.value, (newValue) => {
margin-right: 20px; tag.value = newValue
} })
</script>
<style scoped>
</style> </style>
\ No newline at end of file
frontend/src/components/protpcol-table.vue
<template> <template>
<el-table :data="tableData" style="width: 100%"> <el-table
<el-table-column fixed prop="FieldName" label="字段名" style="width: 25%" /> :data="tableData"
<el-table-column prop="FieldLength" label="字段长度" style="width: 25%" /> style="width: 100%"
<el-table-column prop="Value" label="默认值" style="width: 25%" /> >
<el-table-column fixed prop="fieldname" label="字段名" style="width: 25%" />
<el-table-column prop="fieldsize" label="字段长度" style="width: 25%" />
<el-table-column prop="value" label="默认值" style="width: 25%" />
<el-table-column fixed="right" style="width: 25%"> <el-table-column fixed="right" style="width: 25%">
<template #default="{row}"> <template #default="{row}">
<div style="display: flex; justify-content: space-between;"> <div style="display: flex; justify-content: space-between;">
...@@ -25,31 +28,31 @@ ...@@ -25,31 +28,31 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="命令名"> <el-form-item label="命令名">
<el-input v-model="fields.cmdName"></el-input> <el-input v-model="fields.cmd_name" :disabled="!flag"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="指令类型"> <el-form-item label="指令类型">
<el-input v-model="fields.cmdType"></el-input> <el-input v-model="fields.cmd_type" :disabled="!flag"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="序号"> <el-form-item label="序号">
<el-input v-model="fields.index"></el-input> <el-input v-model="fields.fieldindex" :disabled="!flag"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="名称"> <el-form-item label="名称">
<el-input v-model="fields.name"></el-input> <el-input v-model="fields.fieldname"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="长度"> <el-form-item label="长度">
<el-input v-model="fields.length"></el-input> <el-input v-model="fields.fieldsize"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
...@@ -61,19 +64,19 @@ ...@@ -61,19 +64,19 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="指令最大值"> <el-form-item label="指令最大值">
<el-input v-model="fields.cmdMax"></el-input> <el-input v-model="fields.maxvalue"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="指令最小值"> <el-form-item label="指令最小值">
<el-input v-model="fields.cmdMin"></el-input> <el-input v-model="fields.minvalue"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="字段类型"> <el-form-item label="字段类型">
<el-select v-model="fields.fieldType"> <el-select v-model="fields.datatype">
<el-option v-for="item in fieldTypes" :label="item.label" :value="item.value" :key="item.value"></el-option> <el-option v-for="item in fieldTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -81,56 +84,64 @@ ...@@ -81,56 +84,64 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="输入数据操作"> <el-form-item label="Lua对输入数据的操作">
<el-input></el-input> <el-input v-model="fields.lua_script_in"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="输入数据操作参数"> <el-form-item label="Lua对输出数据的操作">
<el-input></el-input> <el-input v-model="fields.lua_script_out"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12" :offset="12">
<el-form-item >
<el-button class="mr-0" @click="more = !more">更多操作</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="more">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="输出数据操作"> <el-form-item label="输入数据操作">
<el-input></el-input> <el-input v-model="fields.operation_in"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="输出数据操作参数"> <el-form-item label="输入数据操作参数">
<el-input></el-input> <el-input v-model="fields.operation_in_num"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row v-if="more">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="输入数据字节操作"> <el-form-item label="输出数据操作">
<el-input></el-input> <el-input v-model="fields.operation_out"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="输出数据字节操作"> <el-form-item label="输出数据操作参数">
<el-input></el-input> <el-input v-model="fields.operation_out_num"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row v-if="more">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Lua对输入数据的操作"> <el-form-item label="输入数据字节操作">
<el-input></el-input> <el-input v-model="fields.operabo_in"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="Lua对输出数据的操作"> <el-form-item label="输出数据字节操作">
<el-input></el-input> <el-input v-model="fields.operabo_out"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false; more = false">取消</el-button>
<el-button type="primary" @click="open"> <el-button type="primary" @click="open">
确定 确定
</el-button> </el-button>
...@@ -140,41 +151,45 @@ ...@@ -140,41 +151,45 @@
</template> </template>
<script setup> <script setup>
import {ref} from 'vue' import {ref,toRefs} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import {DeleteProtocolCmd, EditProtocolCmd} from "../dao/device";
const flag = ref(false) const flag = ref(false)
const dialogVisible = ref(false) const dialogVisible = ref(false)
const tableData = [ const more = ref(false)
{
FieldName: 'Cmds', const props = defineProps({
FieldLength: 3, //子组件接收父组件传递过来的值
Value: '$XY', info: String,
}, message: Object
{ })
FieldName: 'Comma', const cmdName = ref(toRefs(props).info.value)
FieldLength: 1, const cmdFields = ref(toRefs(props).message.value[cmdName.value])
Value: ',', const tableData = ref([])
},
] for (const item of cmdFields.value){
tableData.value.push(item)
}
const fields = ref({ const fields = ref({
cmdName: '', cmd_name: '',
cmdType: '', cmd_type: '',
index: '', fieldindex: '',
name: '', fieldname: '',
length: '', fieldsize: '',
value: '', value: '',
cmdMax: '', minvalue: '',
cmdMin: '', maxvalue: '',
fieldType: '', datatype: '',
inputDataAction: '', operation_in: '',
inputDataActionParam: '', operation_in_num: '',
outputDataAction: '', operation_out: '',
outputDataActionParam: '', operation_out_num: '',
inputDataByteAction: '', operabo_in: '',
outputDataByteAction: '', operabo_out: '',
LuaInput: '', lua_script_in: '',
LuaOutput: '' lua_script_out: ''
}) })
const fieldTypes = [ const fieldTypes = [
{ value: 0, label: 'DATATYPE_DEFAULT'}, { value: 0, label: 'DATATYPE_DEFAULT'},
...@@ -195,6 +210,7 @@ const fieldTypes = [ ...@@ -195,6 +210,7 @@ const fieldTypes = [
{ value: 15, label: 'DATATYPE_TIMESTR '}, { value: 15, label: 'DATATYPE_TIMESTR '},
{ value: 16, label: 'DATATYPE_MAX'}, { value: 16, label: 'DATATYPE_MAX'},
] ]
let operation = '' let operation = ''
const addField = () => { const addField = () => {
...@@ -208,14 +224,21 @@ const addField = () => { ...@@ -208,14 +224,21 @@ const addField = () => {
function editField(data){ function editField(data){
dialogVisible.value = true dialogVisible.value = true
flag.value = false flag.value = false
fields.value['cmdName'] = data.FieldName for (const key in data){
fields.value['length'] = data.FieldLength fields.value[key] = data[key]
fields.value['value'] = data.Value }
} }
function open(data){ async function Edit(id, params){
console.log(data) await EditProtocolCmd(id, params)
}
async function Delete(id){
await DeleteProtocolCmd(id)
}
function open(data){
if (data === 'delete'){ if (data === 'delete'){
operation = '删除' operation = '删除'
} else if(flag.value){ } else if(flag.value){
...@@ -238,6 +261,19 @@ function open(data){ ...@@ -238,6 +261,19 @@ function open(data){
message: operation + '成功', message: operation + '成功',
}) })
dialogVisible.value = false dialogVisible.value = false
more.value = false
if (operation === '修改'){
let params = fields.value
for (const key in params){
if (params[key] === null){
params[key] = 'none'
}
}
Edit(params['id'], params)
window.location.reload()
}else if (operation === '删除'){
// todo: 删除操作
}
}) })
.catch(() => { .catch(() => {
ElMessage({ ElMessage({
...@@ -246,6 +282,7 @@ function open(data){ ...@@ -246,6 +282,7 @@ function open(data){
}) })
}) })
} }
</script> </script>
<style> <style>
......
frontend/src/dao/device.js
import axios from "axios" import axios from "axios"
export function DeviceProtocol(){ export function DeviceProtocol(){
axios.get('http://192.168.0.216:8000/op/dev_cmd_name_poll').then( return axios.get('http://192.168.0.214:8000/op/dev_cmd_name_poll').then(
function (response){
return response.data
}
)
}
export function ProtocolCmd(){
return axios.get('http://192.168.0.214:8000/op/all_dev_cmd_define').then(
function (response){
return response.data
}
)
}
export function EditProtocolCmd(id,params){
return axios.put('http://192.168.0.214:8000/op/all_dev_cmd_define/' + id + '/', params).then(
function (response){
return response.data
}
)
}
export function DeleteProtocolCmd(id){
return axios.delete('http://192.168.0.214:8000/op/all_dev_cmd_define', id).then(
function (response){ function (response){
return response.data return response.data
} }
......
frontend/src/views/index/home-page.vue
...@@ -12,13 +12,27 @@ ...@@ -12,13 +12,27 @@
</div> </div>
<div class="flex mt-4"> <div class="flex mt-4">
<el-input></el-input> <el-input></el-input>
<el-button class="ml-4">设置指令</el-button> <el-button class="ml-4" @click="setting">设置指令</el-button>
<el-button>发送指令</el-button> <el-button>发送指令</el-button>
</div> </div>
</div> </div>
<div style="width: 58%; height: 100%; border: 1px solid" class="ml-4"> <div style="width: 58%; height: 100%; border: 1px solid;overflow: auto;" class="ml-4" >
<div style="border-bottom: 1px solid">
<el-button-group>
<el-button
class="square-button"
:type="type1 ? 'primary' : 'Default'"
@click="showComponent('real')"
>设备</el-button>
<el-button
class="square-button"
:type="type2 ? 'primary' : 'Default'"
@click="showComponent('virtual')"
>模拟设备</el-button>
</el-button-group>
</div>
<KitDevice v-if="tag" :tag = "tag"></KitDevice>
</div> </div>
</div> </div>
...@@ -32,14 +46,49 @@ ...@@ -32,14 +46,49 @@
<el-button class="ml-4" size="large">导出</el-button> <el-button class="ml-4" size="large">导出</el-button>
</div> </div>
<el-dialog v-model="cmdVisible">
<el-form>
<el-form-item label="设备" :label-width="formLabelWidth">
<el-select v-model="cmds.device" @change="checkToShowInput">
<el-option label="option 1" value="option 1" />
</el-select>
</el-form-item>
<el-form-item label="指令名" :label-width="formLabelWidth">
<el-select v-model="cmds.cmd_name" @change="checkToShowInput">
<el-option label="option 1" value="option 1" />
</el-select>
</el-form-item>
<el-form-item label="某个字段" :label-width="formLabelWidth" v-if="show">
<el-input autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cmdVisible = false">取消</el-button>
<el-button type="primary" @click="cmdVisible = false">
确定
</el-button>
</span>
</template>
</el-dialog>
</template> </template>
<script setup> <script setup>
import {ref, watchEffect} from 'vue' import {onMounted, onUnmounted, onUpdated, ref, watchEffect} from 'vue'
import KitDevice from "../../components/kit-device.vue";
const messages = ref([1,2,3,4,5,6,7,8]) const messages = ref([1,2,3,4,5,6,7,8])
const messageContainer = ref(null); const messageContainer = ref(null);
const tag = ref('real')
const socket = ref(null)
const type1 = ref(true)
const type2 = ref(false)
const cmdVisible = ref(false)
const formLabelWidth = '140px'
const cmds = ref(
{device: '', cmd_name: ''}
)
const show = ref(false)
function scrollToBottom() { function scrollToBottom() {
if (messageContainer.value) { if (messageContainer.value) {
...@@ -47,12 +96,52 @@ function scrollToBottom() { ...@@ -47,12 +96,52 @@ function scrollToBottom() {
} }
} }
watchEffect(() => { onUpdated(() => {
// 在 messages 更新后滚动到底部 // 在 messages 更新后滚动到底部
scrollToBottom(); scrollToBottom();
}); });
onMounted(() => {
socket.value = new WebSocket('ws://'
+ 'localhost:8000'
+ '/ws/chat/mqtt/')
socket.value.onmessage = (e) => {
messages.value.push(e.data)
}
scrollToBottom();
})
const showComponent = (str) => {
if (str === 'real'){
type1.value = true
type2.value = false
}else if (str === 'virtual'){
type1.value = false
type2.value = true
}
tag.value = str
}
const checkToShowInput = () => {
show.value = cmds.value.device && cmds.value.cmd_name
}
const setting = () => {
cmdVisible.value = true
// cmds.value.device = ''
// cmds.value.cmd_name = ''
for (const key in cmds.value){
cmds.value[key] = ''
}
show.value = false
}
</script> </script>
<style> <style>
.square-button {
border-radius: 0;
}
</style> </style>
\ No newline at end of file
frontend/src/views/protocol/protocol.vue
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<div class="button-container"> <div class="button-container">
<el-button class="left-button" @click="addProtocol = true">新增协议</el-button> <el-button class="left-button" @click="addProtocol = true">新增协议</el-button>
<div class="right-buttons"> <div class="right-buttons">
<el-button>导入</el-button> <el-button>导出数据库</el-button>
<el-button>导出所有协议</el-button>
</div> </div>
</div> </div>
......
mqtt/mqtt.py
...@@ -8,10 +8,10 @@ from .signals import mqtt_message_received ...@@ -8,10 +8,10 @@ from .signals import mqtt_message_received
from channels.layers import get_channel_layer, channel_layers from channels.layers import get_channel_layer, channel_layers
from asgiref.sync import async_to_sync from asgiref.sync import async_to_sync
def send_websocket_message(message): def send_websocket_message(message, group_name="chat_mqtt"):
channel_layer = get_channel_layer() channel_layer = get_channel_layer()
async_to_sync(channel_layer.group_send)( async_to_sync(channel_layer.group_send)(
"chat_mqtt", group_name,
{"type": "chat.message", "message": message} {"type": "chat.message", "message": message}
) )
...@@ -30,9 +30,11 @@ def on_message(mqtt_client, userdata, msg): ...@@ -30,9 +30,11 @@ def on_message(mqtt_client, userdata, msg):
# mqtt_message_received.send(sender=None, message=msg.payload) # mqtt_message_received.send(sender=None, message=msg.payload)
# print(f'Received message on topic: {msg.topic} with payload: {msg.payload}') # print(f'Received message on topic: {msg.topic} with payload: {msg.payload}')
# data = parse_proto(msg.payload) # data = parse_proto(msg.payload)
data = msg.payload data = msg.payload.decode('utf-8')
if data[0] == '0':
send_websocket_message(data) send_websocket_message(data)
else:
send_websocket_message(data, "chat_123")
client = mqtt.Client() client = mqtt.Client()
client.on_connect = on_connect client.on_connect = on_connect
......
vue_django/settings.py
...@@ -31,8 +31,8 @@ ALLOWED_HOSTS = ['*'] ...@@ -31,8 +31,8 @@ ALLOWED_HOSTS = ['*']
# Application definition # Application definition
INSTALLED_APPS = [ INSTALLED_APPS = [
# 'daphne', 'daphne',
# 'chat', 'chat',
'device_data_op', 'device_data_op',
'protocol_version_manage', 'protocol_version_manage',
...@@ -43,6 +43,7 @@ INSTALLED_APPS = [ ...@@ -43,6 +43,7 @@ INSTALLED_APPS = [
'django.contrib.messages', 'django.contrib.messages',
'django.contrib.staticfiles', 'django.contrib.staticfiles',
'corsheaders',
'rest_framework', 'rest_framework',
'drf_yasg', 'drf_yasg',
] ]
...@@ -50,6 +51,7 @@ INSTALLED_APPS = [ ...@@ -50,6 +51,7 @@ INSTALLED_APPS = [
MIDDLEWARE = [ MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware', 'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware', 'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware', # 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware',
...@@ -159,3 +161,18 @@ CHANNEL_LAYERS = { ...@@ -159,3 +161,18 @@ CHANNEL_LAYERS = {
# }, # },
# }, # },
} }
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = [
'x-requested-with',
'content-type',
'accept',
'origin',
'authorization',
'x-csrftoken',
'token'
]
CORS_ALLOWED_ORIGINS = [
"http://localhost:5173", # 您的前端应用地址
]
vue_django/urls.py
...@@ -33,8 +33,8 @@ urlpatterns = [ ...@@ -33,8 +33,8 @@ urlpatterns = [
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
path("", index), path("", index),
# path("test/", test), # path("test/", test),
# path("mqtt/", include("mqtt.urls")), path("mqtt/", include("mqtt.urls")),
# path("chat/", include("chat.urls")), path("chat/", include("chat.urls")),
path("op/", include("device_data_op.urls")), path("op/", include("device_data_op.urls")),
re_path(r'^swagger/$', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'), re_path(r'^swagger/$', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),
......
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