Skip to content

V
vue_django_test
Commit 799882e8 by 周田
Options

mod：协议界面

parent 35b748b4
Showing with 288 additions and 483 deletions
frontend/src/App.vue
...@@ -15,11 +15,12 @@ ...@@ -15,11 +15,12 @@
</el-menu> </el-menu>
</el-header> </el-header>
<el-main> <el-main>
<router-view v-slot="{ Component }"> <router-view />
<!-- <router-view v-slot="{ Component }">
<keep-alive> <keep-alive>
<component :is="Component" /> <component :is="Component" />
</keep-alive> </keep-alive>
</router-view> </router-view> -->
</el-main> </el-main>
</el-container> </el-container>
</div> </div>
......
frontend/src/components/kit-collapse.vue deleted 100644 → 0
<template>
<div class="demo-collapse">
<el-collapse>
<el-collapse-item v-for="item in protocols" >
<template #title>{{item}}</template>
<div style="margin: auto; width: 90%">
<collapse-table
v-if="protocolcmd"
class="mt-4"
:info="parentMsg"
:name="item"
:protocolcmd="protocolcmd"
>
</collapse-table>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup lang="ts">
import {ref, onMounted } from 'vue'
import CollapseTable from "./collapse-table.vue";
import { DeviceProtocol, ProtocolCmd } from "@/dao/device";
const protocols = ref()
const parentMsg = ref()
const protocolcmd = ref()
async function getDeviceProtocol(){
let data = await DeviceProtocol()
protocols.value = data.fields
parentMsg.value = data
}
async function getProtocolCmd(){
let cmds = await ProtocolCmd()
protocolcmd.value = cmds
}
onMounted(async () => {
await getDeviceProtocol()
await getProtocolCmd()
})
</script>
<style>
.el-collapse-item__header {
padding-left: 40px; /* 调整合适的左边距值 */
}
</style>
frontend/src/components/collapse-table.vue → frontend/src/components/protocol/CollapseTable.vue
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<div class="left"> <div class="left">
<div class="mr-4">协议版本</div> <div class="mr-4">协议版本</div>
<el-select> <el-select>
<!-- TODO: 选择协议版本 -->
<el-option :value="option"></el-option> <el-option :value="option"></el-option>
</el-select> </el-select>
</div> </div>
...@@ -13,12 +14,17 @@ ...@@ -13,12 +14,17 @@
</div> </div>
</div> </div>
<div class="mb-4 mt-4">协议规范</div> <div class="my-4">协议规范</div>
<el-collapse class="mt-4"> <el-collapse class="mt-4">
<el-collapse-item v-for="cmd in props.info[props.name]" :title="cmd.cmd_name + ' ' + cmd.cmd_explain + ' ' + cmd.cmd_type"> <el-collapse-item
<protpcol-table v-if="props.protocolcmd !== null" :info="cmd.cmd_name" :message="props.protocolcmd" v-for="cmd in props.info[props.name]"
:type="cmd.cmd_type"></protpcol-table> :title="cmd.cmd_name + ' ' + cmd.cmd_explain + ' ' + cmd.cmd_type">
<protocol-table
v-if="props.protocolCmd !== undefined"
:cmd-name="cmd.cmd_name"
:cmd-type="cmd.cmd_type"
:message="props.protocolCmd[cmd.cmd_name]" />
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
...@@ -64,25 +70,20 @@ ...@@ -64,25 +70,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import ProtpcolTable from "./protpcol-table.vue";
import ProtocolTable from "./ProtocolTable.vue";
import type { DeviceProtocolResponse, ProtocolCmdResponse } from './types';
const addCmd = ref<boolean>(false) const addCmd = ref<boolean>(false)
const option = ref<string>('option') const option = ref<string>('option')
const formLabelWidth = '140px' const formLabelWidth = '140px'
type propsType = { type propsType = {
info: DeviceProtocolResponse,
name: string, name: string,
info: Object, protocolCmd: ProtocolCmdResponse
protocolcmd: Object
} }
const props = defineProps<propsType>() const props = defineProps<propsType>()
// 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(
'是否确认增加？', '是否确认增加？',
......
frontend/src/components/protocol/KitCollapse.vue 0 → 100644
<template>
<div class="demo-collapse">
<el-collapse>
<el-collapse-item v-for="item in protocol_names">
<template #title>{{ item }}</template>
<div style="margin: auto; width: 90%">
<collapse-table
v-if="protocolCmd !== undefined"
class="mt-4"
:info="deviceProtocol!"
:name="item"
:protocol-cmd="protocolCmd!" />
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CollapseTable from "./CollapseTable.vue";
import { DeviceProtocol, ProtocolCmd } from "@/dao/device";
import type { DeviceProtocolResponse, ProtocolCmdResponse } from './types';
const protocol_names = ref<string[]>([]);
const deviceProtocol = ref<DeviceProtocolResponse>()
const protocolCmd = ref<ProtocolCmdResponse>()
function getDeviceProtocol() {
DeviceProtocol()
.then((res) => {
deviceProtocol.value = res
protocol_names.value = res.fields
})
.catch((err) => {
console.log(err)
})
}
function getProtocolCmd() {
ProtocolCmd()
.then((res) => {
protocolCmd.value = res
})
.catch((err) => {
console.log(err);
})
}
onMounted(async () => {
getDeviceProtocol()
getProtocolCmd()
})
</script>
<style>
.el-collapse-item__header {
padding-left: 40px;
/* 调整合适的左边距值 */
}
</style>
frontend/src/components/protocol/types.ts 0 → 100644
interface ProtocolInfo {
id: number;
protocol_name: string;
cmd_name: string;
cmd_type: string;
encode: string;
timing_cmd_cycle_period: number;
cmd_explain: string;
}
interface DeviceProtocolResponse {
[key: string]: ProtocolInfo[];
fields: any[];
}
enum FieldTypes {
DATATYPE_DEFAULT = 0,
DATATYPE_STR = 1,
DATATYPE_UINT_STR = 2,
DATATYPE_INT_STR = 3,
DATATYPE_FLOAT_STR = 4,
DATATYPE_DOUBLE_STR = 5,
DATATYPE_HEX = 6,
DATATYPE_STR_HEX = 7,
DATATYPE_UINT_HEX = 8,
DATATYPE_INT_HEX = 9,
DATATYPE_FLOAT_HEX = 10,
DATATYPE_DOUBLE_HEX = 11,
DATATYPE_DOUBLE = 12,
DATATYPE_PAYLOAD = 13,
DATATYPE_INT8 = 14,
DATATYPE_TIMESTR = 15,
DATATYPE_MAX = 16
}
interface CmdInfo {
id?: number;
cmd_name: string;
cmd_type: string;
fieldindex: number;
fieldname: string;
fieldsize: number;
value: string;
minvalue: string;
maxvalue: string;
datatype: FieldTypes;
operation_in: number;
operation_in_num: number;
operation_out: number;
operation_out_num: number;
operabo_in: number;
operabo_out: number;
lua_script_in: string;
lua_script_out: string;
}
interface ProtocolCmdResponse {
[key: string]: CmdInfo[];
fields: any[];
}
export type {
DeviceProtocolResponse,
ProtocolCmdResponse,
CmdInfo,
}
\ No newline at end of file
frontend/src/dao/device.ts
import axios from "axios" import axios from "axios"
export async function DeviceProtocol(){
return axios.get('http://192.168.0.214:8000/op/dev_cmd_name_poll').then( const baseURL = 'http://192.168.0.214:8000/op'
function (response){
export function DeviceProtocol() {
return axios.get('/api/dev_cmd_name_poll').then(
function (response) {
return response.data return response.data
} }
) )
} }
export async function ProtocolCmd(){ export function ProtocolCmd() {
return axios.get('http://192.168.0.214:8000/op/all_dev_cmd_define').then( return axios.get('/api/all_dev_cmd_define').then(
function (response){ function (response) {
return response.data return response.data
} }
) )
} }
export async function EditProtocolCmd(id,params){ export function EditProtocolCmd(id: number, params: any) {
const response = await axios.put('http://192.168.0.214:8000/op/all_dev_cmd_define/' + id + '/', params) return axios.put('/api/all_dev_cmd_define/' + id + '/', params).then(
function (response) {
return response.data return response.data
}
)
} }
export async function DeleteProtocolCmd(id){ export function DeleteProtocolCmd(id: number) {
return axios.delete('http://192.168.0.214:8000/op/all_dev_cmd_define/' + id).then( return axios.delete('/api/all_dev_cmd_define/' + id).then(
function (response){ function (response) {
return response.data return response.data
} }
) )
} }
export async function AddProtocolCMd(params){ export function AddProtocolCMd(params: any) {
return axios.post('http://192.168.0.214:8000/op/all_dev_cmd_define/' , params).then( return axios.post('/api/all_dev_cmd_define/', params).then(
function (response){ function (response) {
return response.data return response.data
} }
) )
......
frontend/src/dao/user.js deleted 100644 → 0
import {request} from '/lib/request'
/// 添加用户
// * username : string :
// * pwd : string :
// * role : integer :
// name : string :
// phone : string :
// sms : string :
// gender : integer :
// image : string :
// address : string :
// extendJson : string :
export async function UserAdminAdd(params){
const {data} = await request('/rest/user/admin/add', params)
return data.data
}
/// 删除冻结用户
// * id : integer :
// * off : integer : 0-删除，1-冻结，2-解冻
export async function UserAdminDel(params){
const {data} = await request('/rest/user/admin/del', params)
return data.data
}
/// 用户信息
// * uid : integer :
export async function UserAdminInfo(params){
const {data} = await request('/rest/user/admin/info', params)
return data.data
}
/// 用户列表
// departmentId : integer :
export async function UserAdminList(params){
const {data} = await request('/rest/user/admin/list', params)
return data.data
}
/// 用户列表 by role
// * roleId : integer :
export async function UserAdminListByRole(params){
const {data} = await request('/rest/user/admin/listByRole', params)
return data.data
}
/// 修改用户
// * id : integer :
// username : string :
// name : string :
// phone : string :
// gender : integer :
// image : string :
// address : string :
// pwd : string :
// role : integer :
// extendJson : string :
export async function UserAdminUpdate(params){
const {data} = await request('/rest/user/admin/update', params)
return data.data
}
/// 短信验证码获取
// * phone : string : 手机号
export async function UserGetVerifyCode(params){
const {data} = await request('/rest/user/getVerifyCode', params)
return data.data
}
/// 用户信息
export async function UserInfo(){
const {data} = await request('/rest/user/info')
return data.data
}
/// 登录
// username : string : 用户名
// phone : string : 手机号
// * pwd : string :
// schema : string :
export async function UserLogin(params){
const {data} = await request('/rest/user/login', params)
return data.data
}
/// 登录-用户名
// * username : string : 用户名
// * pwd : string :
// schema : string :
export async function UserLoginByUsername(params){
const {data} = await request('/rest/user/loginByUsername', params)
return data.data
}
/// 登出
export async function UserLogout(){
const {data} = await request('/rest/user/logout')
return data.data
}
/// 密码修改
// * oldPwd : string :
// * newPwd : string :
export async function UserUpdatePwd(params){
const {data} = await request('/rest/user/updatePwd', params)
return data.data
}
/// 更新用户信息
// username : string :
// name : string :
// phone : string :
// sms : string :
// gender : integer :
// image : string :
// address : string :
// oldPwd : string :
// newPwd : string :
// extendJson : string :
export async function UserUpdateUserInfo(params){
const {data} = await request('/rest/user/updateUserInfo', params)
return data.data
}
frontend/src/router/index.ts
...@@ -6,7 +6,7 @@ const router = createRouter({ ...@@ -6,7 +6,7 @@ const router = createRouter({
{ {
path: '/', path: '/',
name: 'index', name: 'index',
component: () => import('@/views/index/home-page.vue'), component: () => import('@/views/index/HomePage.vue'),
}, },
{ {
path: '/protocol', path: '/protocol',
......
frontend/src/views/FileDown.vue
...@@ -24,7 +24,5 @@ const downloadFile = () => { ...@@ -24,7 +24,5 @@ const downloadFile = () => {
<template> <template>
<ElButton type="primary" @click="downloadFile">导出文件</ElButton> <ElButton type="primary" @click="downloadFile">导出文件</ElButton>
</template> </template>
\ No newline at end of file
frontend/src/views/index/home-page.vue → frontend/src/views/index/HomePage.vue
...@@ -22,12 +22,12 @@ ...@@ -22,12 +22,12 @@
<el-button-group> <el-button-group>
<el-button <el-button
class="square-button" class="square-button"
:type="type1 ? 'primary' : 'Default'" :type="type1 ? 'primary' : 'default'"
@click="showComponent('real')" @click="showComponent('real')"
>设备</el-button> >设备</el-button>
<el-button <el-button
class="square-button" class="square-button"
:type="type2 ? 'primary' : 'Default'" :type="type2 ? 'primary' : 'default'"
@click="showComponent('virtual')" @click="showComponent('virtual')"
>模拟设备</el-button> >模拟设备</el-button>
</el-button-group> </el-button-group>
......
frontend/src/views/protocol/protocol.vue
<template> <template>
<div class="button-container"> <div class="button-container">
<el-button class="left-button" @click="addProtocol = true">新增协议</el-button> <el-button class="left-button" @click="isShow = true">新增协议</el-button>
<div class="right-buttons"> <div class="right-buttons">
<el-button>导出数据库</el-button> <el-button>导出数据库</el-button>
</div> </div>
</div> </div>
<!-- 下拉列表 -->
<kit-collapse class="mt-4"></kit-collapse> <kit-collapse class="mt-4"></kit-collapse>
<el-dialog title="新增协议" v-model="addProtocol"> <el-dialog title="新增协议" v-model="isShow">
<el-form > <el-form>
<el-form-item label="协议名称" :label-width="formLabelWidth"> <el-form-item label="协议名称" :label-width="formLabelWidth">
<el-input autocomplete="off" /> <el-input autocomplete="off" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="addProtocol = false">取消</el-button> <el-button @click="isShow = false">取消</el-button>
<el-button type="primary" @click="addProtocol = false"> <el-button type="primary" @click="addProtocol">
确定 确定
</el-button> </el-button>
</span> </span>
...@@ -26,28 +27,37 @@ ...@@ -26,28 +27,37 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref} from 'vue'; import { ref } from 'vue';
import KitCollapse from "../../components/kit-collapse.vue"; import KitCollapse from "@/components/protocol/KitCollapse";
const addProtocol = ref(false) const isShow = ref<boolean>(false)
const formLabelWidth = '140px' const formLabelWidth = '140px'
// TODO：添加协议
const addProtocol = () => {
isShow.value = false
console.log('addProtocol')
}
</script> </script>
<style scoped> <style scoped>
.button-container { .button-container {
display: flex; display: flex;
justify-content: space-between; /* 使内部元素平均分布 */ justify-content: space-between;
align-items: center; /* 垂直居中 */ /* 使内部元素平均分布 */
align-items: center;
/* 垂直居中 */
} }
.left-button { .left-button {
margin-right: auto; /* 将按钮1靠左 */ margin-right: auto;
/* 将按钮1靠左 */
} }
.right-buttons { .right-buttons {
display: flex; display: flex;
align-items: center; /* 垂直居中 */ align-items: center;
} /* 垂直居中 */
</style> }</style>
frontend/src/views/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/views/login.vue deleted 100644 → 0
<template>
<div class="h-screen w-screen flex justify-center items-center">
<div class="h-screen w-screen bg-cover" style=" background-image: url('src/assets/img/bg.png')">
<div class="text-white text-2xl text-center pt-20 pb-20">{{ configKit.title }}</div>
<div class="flex flex-col justify-center items-center gap-8">
<div class="text-2xl text-cyan-900 font-bold">登录</div>
<el-form
ref="form"
:model="modal"
label-position="left"
label-width="80px" size="large">
<el-form-item :rules="{required: true, message: '请填写', trigger: 'blur'}" label="用户名：" prop="username"
size="large">
<el-input v-model="modal.username" autocomplete="off" autofocus placeholder="用户名"
style="width: 220px" @keyup.enter.native="login()"/>
</el-form-item>
<el-form-item :rules="{required: true, message: '请填写', trigger: 'blur'}" label="密 码：" prop="pwd"
size="large">
<el-input v-model="modal.pwd" autocomplete="off" placeholder="密 码" style="width: 220px"
type="password" @keyup.enter.native="login()"/>
</el-form-item>
<el-form-item label="" prop="login" size="large">
<div class="flex flex-col items-center w-full">
<div class="flex justify-center w-full">
<el-button :loading="loading" class="w-full" size="large" type="primary" @click="login()">登录
</el-button>
</div>
<kit-err-channel id="login" style="width: 100%"/>
</div>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useRouter} from "vue-router";
import {configKit, storeUserInfo, submitErrChanel, updateStoreUserInfo} from "../../lib/store";
import {RouteName} from "../../lib/router";
import {useLoading} from "../../lib/service";
import {UserLogin} from "../dao/user";
const router = useRouter()
const loading = ref(false)
const modal = ref({role: 2})
const form = ref()
async function login() {
const valid = await form.value.validate();
if(!valid) return
await useLoading(loading, async function(){
submitErrChanel('login');
let data = await UserLogin(modal.value)
updateStoreUserInfo(data);
const redirect = {
name: RouteName.index,
};
await router.push(redirect);
})()
}
onMounted(function () {
})
</script>
vue_django/urls.py
...@@ -39,7 +39,7 @@ urlpatterns = [ ...@@ -39,7 +39,7 @@ urlpatterns = [
path("test/download/", download), path("test/download/", download),
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("api/", include("device_data_op.urls")),
path("api/", include("download_db.urls")), path("api/", include("download_db.urls")),
path("api/", include("protocol_version_manage.urls")), path("api/", include("protocol_version_manage.urls")),
path("api/", include("device_communication.urls")), path("api/", include("device_communication.urls")),
......
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