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 @@
</el-menu>
</el-header>
<el-main>
<router-view v-slot="{ Component }">
<router-view />
<!-- <router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</router-view> -->
</el-main>
</el-container>
</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 @@
<div class="left">
<div class="mr-4">协议版本</div>
<el-select>
<!-- TODO: 选择协议版本 -->
<el-option :value="option"></el-option>
</el-select>
</div>
......@@ -13,12 +14,17 @@
</div>
</div>
<div class="mb-4 mt-4">协议规范</div>
<div class="my-4">协议规范</div>
<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">
<protpcol-table v-if="props.protocolcmd !== null" :info="cmd.cmd_name" :message="props.protocolcmd"
:type="cmd.cmd_type"></protpcol-table>
<el-collapse-item
v-for="cmd in props.info[props.name]"
: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>
......@@ -64,25 +70,20 @@
<script setup lang="ts">
import { ref } from 'vue'
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 option = ref<string>('option')
const formLabelWidth = '140px'
type propsType = {
info: DeviceProtocolResponse,
name: string,
info: Object,
protocolcmd: Object
protocolCmd: ProtocolCmdResponse
}
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 = () => {
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/protpcol-table.vue → frontend/src/components/protocol/ProtocolTable.vue
<template>
<el-table
:data="tableData"
style="width: 100%"
>
<el-table :data="tableData" style="width: 100%">
<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%">
<template #default="{row}">
<template #default="{ row }">
<div style="display: flex;">
<el-button type="primary" @click="open('delete', row)">删除字段</el-button>
<el-button type="primary" @click="editField(row)">修改字段</el-button>
......@@ -16,21 +13,11 @@
</el-table-column>
</el-table>
<el-button
style="width: 100%; border: 1px dashed"
class="mt-4"
@click="addField"
>+</el-button>
<el-button style="width: 100%; border: 1px dashed" class="mt-4" @click="addField">+</el-button>
<el-dialog v-model="dialogVisible" @close="resetForm">
<template #title>{{flag ? '新增' : '编辑'}}字段</template>
<el-form
ref="ruleFormRef"
label-position="right"
label-width="150px"
:model="fields"
:rules="rules"
>
<el-dialog v-model="dialogVisible" @close="handlerClose">
<template #header>{{ flag ? '新增' : '编辑' }}字段</template>
<el-form ref="ruleFormRef" label-position="right" label-width="150px" :model="fields" :rules="rules">
<el-row>
<el-col :span="12">
<el-form-item label="命令名">
......@@ -102,7 +89,7 @@
</el-row>
<el-row>
<el-col :span="12" :offset="12">
<el-form-item >
<el-form-item>
<el-button class="mr-0" @click="more = !more">更多操作</el-button>
</el-form-item>
</el-col>
......@@ -147,8 +134,8 @@
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="open">
<el-button @click="handlerClose">取消</el-button>
<el-button type="primary" @click="dialogSubmit(flag, fields)">
确定
</el-button>
</span>
......@@ -157,71 +144,57 @@
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {AddProtocolCMd, DeleteProtocolCmd, EditProtocolCmd} from "@/dao/device";
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, FormRules, ElForm } from "element-plus";
import { AddProtocolCMd, DeleteProtocolCmd, EditProtocolCmd } from "@/dao/device";
import type { CmdInfo } from './types';
const flag = ref(false)
const dialogVisible = ref(false)
const more = ref(false)
type propsType = {
info: string,
type: string,
message: Record<string, any>
cmdName: string,
cmdType: string,
message: CmdInfo[]
}
const props = defineProps<propsType>()
const cmdName = props.info
const cmdFields = ref(props.message.value[cmdName])
const tableData = ref([])
const rules = ref({
fieldname: [
{required: true, message: "请输入名称", trigger: 'blur'}
],
fieldsize: [
{required: true, message: "请输入长度", trigger: 'blur'}
],
value: [
{required: true, message: "请输入值", trigger: 'blur'}
],
datatype: [
{required: true, message: "请选择字段类型", trigger: 'change'}
],
})
const ruleFormRef = ref()
for (const item of cmdFields.value){
tableData.value.push(item)
const tableData = ref<CmdInfo[]>([])
if (props.message) {
tableData.value = props.message
}
type fieldType = {
cmd_name: string,
cmd_type: string,
fieldindex: number,
fieldname: string,
fieldsize: string,
value: string,
minvalue: string,
maxvalue: string,
datatype: string,
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
}
const fields = ref<fieldType>({
const fieldTypes = [
{ value: 0, label: 'DATATYPE_DEFAULT' },
{ value: 1, label: 'DATATYPE_STR' },
{ value: 2, label: 'DATATYPE_UINT_STR' },
{ value: 3, label: 'DATATYPE_INT_STR' },
{ value: 4, label: 'DATATYPE_FLOAT_STR' },
{ value: 5, label: 'DATATYPE_DOUBLE_STR' },
{ value: 6, label: 'DATATYPE_HEX' },
{ value: 7, label: 'DATATYPE_STR_HEX' },
{ value: 8, label: 'DATATYPE_UINT_HEX' },
{ value: 9, label: 'DATATYPE_INT_HEX' },
{ value: 10, label: 'DATATYPE_FLOAT_HEX' },
{ value: 11, label: 'DATATYPE_DOUBLE_HEX' },
{ value: 12, label: 'DATATYPE_DOUBLE' },
{ value: 13, label: 'DATATYPE_PAYLOAD' },
{ value: 14, label: 'DATATYPE_INT8' },
{ value: 15, label: 'DATATYPE_TIMESTR' },
{ value: 16, label: 'DATATYPE_MAX' },
]
const fields = ref<CmdInfo>({
cmd_name: '',
cmd_type: '',
fieldindex: 0,
fieldname: '',
fieldsize: '',
fieldsize: 0,
value: '',
minvalue: '',
maxvalue: '',
datatype: '',
datatype: 1,
operation_in: 0,
operation_in_num: 0,
operation_out: 0,
......@@ -231,36 +204,23 @@ const fields = ref<fieldType>({
lua_script_in: '',
lua_script_out: ''
})
const fieldTypes = [
{ value: 0, label: 'DATATYPE_DEFAULT'},
{ value: 1, label: 'DATATYPE_STR '},
{ value: 2, label: 'DATATYPE_UINT_STR '},
{ value: 3, label: 'DATATYPE_INT_STR '},
{ value: 4, label: 'DATATYPE_FLOAT_STR '},
{ value: 5, label: 'DATATYPE_DOUBLE_STR '},
{ value: 6, label: 'DATATYPE_HEX '},
{ value: 7, label: 'DATATYPE_STR_HEX '},
{ value: 8, label: 'DATATYPE_UINT_HEX '},
{ value: 9, label: 'DATATYPE_INT_HEX '},
{ value: 10, label: 'DATATYPE_FLOAT_HEX '},
{ value: 11, label: 'DATATYPE_DOUBLE_HEX '},
{ value: 12, label: 'DATATYPE_DOUBLE '},
{ value: 13, label: 'DATATYPE_PAYLOAD '},
{ value: 14, label: 'DATATYPE_INT8 '},
{ value: 15, label: 'DATATYPE_TIMESTR '},
{ value: 16, label: 'DATATYPE_MAX'},
]
let operation = ''
const rules = reactive<FormRules<typeof fields>>({
fieldname: [{ required: true, message: "请输入名称", trigger: 'blur' }],
fieldsize: [{ required: true, message: "请输入长度", trigger: 'blur' }],
value: [{ required: true, message: "请输入值", trigger: 'blur' }],
datatype: [{ required: true, message: "请选择字段类型", trigger: 'change' }],
})
const ruleFormRef = ref<typeof ElForm>()
const addField = () => {
flag.value = true;
more.value = false
// for(const key in fields.value){
// fields.value[key] = '';
// }
fields.value.cmd_name = props.info
fields.value.cmd_type = props.type
fields.value.cmd_name = props.cmdName
fields.value.cmd_type = props.cmdType
fields.value.fieldindex = tableData.value.length + 1
fields.value.minvalue = 'null'
fields.value.maxvalue = 'null'
......@@ -272,52 +232,33 @@ const addField = () => {
fields.value.operation_out_num = 0
fields.value.operabo_in = 0
fields.value.operabo_out = 0
dialogVisible.value = true;
if (ruleFormRef.value){
ruleFormRef.value.clearValidate()
}
}
function editField(data){
function editField(data: CmdInfo) {
dialogVisible.value = true
flag.value = false
more.value = false
for (const key in data){
fields.value[key] = data[key]
}
fields.value = data
}
const resetForm = () => {
for (const key in fields.value){
fields.value[key] = ''
}
ruleFormRef.value.clearValidate()
}
async function Edit(id, params){
await EditProtocolCmd(id, params)
function Edit(id: number, params: any) {
EditProtocolCmd(id, params)
}
async function Delete(id){
await DeleteProtocolCmd(id)
function Delete(id: number) {
DeleteProtocolCmd(id)
}
async function Add(params){
await AddProtocolCMd(params)
function Add(params: any) {
AddProtocolCMd(params)
}
function confirm(str, data){
if (str === 'delete'){
operation = '删除'
} else if(flag.value){
operation = '增加'
}else if (!flag.value){
operation = '修改'
}
function confirm(type: string, data: CmdInfo) {
ElMessageBox.confirm(
'是否确认' + operation + '?',
'是否确认?',
'Warning',
{
confirmButtonText: '确定',
......@@ -328,31 +269,18 @@ function confirm(str, data){
.then(() => {
ElMessage({
type: 'success',
message: operation + '成功',
message: '操作成功',
})
dialogVisible.value = false
more.value = false
if (operation === '修改'){
if (type === 'edit') {
let params = fields.value
for (const key in params){
if (params[key] === null){
params[key] = 'none'
}
}
Edit(params['id'], params)
for (const item of Object.keys(fields.value)){
tableData.value[fields.value['fieldindex'] -1 ][item] = fields.value[item]
}
}else if (operation === '删除'){
Delete(data['id'])
tableData.value.splice(data['fieldindex'] -1 , 1)
}else if (operation === '增加'){
Edit(params.id!, params)
} else if (type === 'delete') {
Delete(data.id!)
tableData.value.splice(data['fieldindex'] - 1, 1)
} else if (type === 'add') {
Add(fields.value)
let params = {}
for (const item of Object.keys(fields.value)){
params[item] = fields.value[item]
}
tableData.value.push(params)
}
})
.catch(() => {
......@@ -363,35 +291,43 @@ function confirm(str, data){
})
}
const cancel = () => {
const handlerClose = () => {
dialogVisible.value = false
more.value = false
ruleFormRef.value.clearValidate()
// ruleFormRef.value.resetFields()
ruleFormRef.value!.clearValidate()
}
async function open(str, data){
if (str === 'delete'){
function open(str: string, data: CmdInfo) {
if (str === 'delete') {
confirm(str, data)
return
}
if (!ruleFormRef.value) return;
await ruleFormRef.value.validate((valid) => {
if (valid){
ruleFormRef.value.validate((valid: boolean) => {
if (valid) {
confirm(str, data)
// ruleFormRef.value.resetFields()
}else {
// ruleFormRef.value.resetFields()
} else {
return false
}
})
}
const dialogSubmit = (flag: boolean, data: CmdInfo) => {
if (flag) {
open('add', data)
}
else {
open('edit', data)
}
}
</script>
<style>
.el-row:not(:last-child) {
margin-bottom: 10px; /* 添加间距 */
margin-bottom: 10px;
/* 添加间距 */
}
</style>
\ No newline at end of file
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"
export async function DeviceProtocol(){
return axios.get('http://192.168.0.214:8000/op/dev_cmd_name_poll').then(
function (response){
const baseURL = 'http://192.168.0.214:8000/op'
export function DeviceProtocol() {
return axios.get('/api/dev_cmd_name_poll').then(
function (response) {
return response.data
}
)
}
export async function ProtocolCmd(){
return axios.get('http://192.168.0.214:8000/op/all_dev_cmd_define').then(
function (response){
export function ProtocolCmd() {
return axios.get('/api/all_dev_cmd_define').then(
function (response) {
return response.data
}
)
}
export async function EditProtocolCmd(id,params){
const response = await axios.put('http://192.168.0.214:8000/op/all_dev_cmd_define/' + id + '/', params)
export function EditProtocolCmd(id: number, params: any) {
return axios.put('/api/all_dev_cmd_define/' + id + '/', params).then(
function (response) {
return response.data
}
)
}
export async function DeleteProtocolCmd(id){
return axios.delete('http://192.168.0.214:8000/op/all_dev_cmd_define/' + id).then(
function (response){
export function DeleteProtocolCmd(id: number) {
return axios.delete('/api/all_dev_cmd_define/' + id).then(
function (response) {
return response.data
}
)
}
export async function AddProtocolCMd(params){
return axios.post('http://192.168.0.214:8000/op/all_dev_cmd_define/' , params).then(
function (response){
export function AddProtocolCMd(params: any) {
return axios.post('/api/all_dev_cmd_define/', params).then(
function (response) {
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({
{
path: '/',
name: 'index',
component: () => import('@/views/index/home-page.vue'),
component: () => import('@/views/index/HomePage.vue'),
},
{
path: '/protocol',
......
frontend/src/views/FileDown.vue
......@@ -24,7 +24,5 @@ const downloadFile = () => {
<template>
<ElButton type="primary" @click="downloadFile">导出文件</ElButton>
</template>
\ No newline at end of file
frontend/src/views/index/home-page.vue → frontend/src/views/index/HomePage.vue
......@@ -22,12 +22,12 @@
<el-button-group>
<el-button
class="square-button"
:type="type1 ? 'primary' : 'Default'"
:type="type1 ? 'primary' : 'default'"
@click="showComponent('real')"
>设备</el-button>
<el-button
class="square-button"
:type="type2 ? 'primary' : 'Default'"
:type="type2 ? 'primary' : 'default'"
@click="showComponent('virtual')"
>模拟设备</el-button>
</el-button-group>
......
frontend/src/views/protocol/protocol.vue
<template>
<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">
<el-button>导出数据库</el-button>
</div>
</div>
<!-- 下拉列表 -->
<kit-collapse class="mt-4"></kit-collapse>
<el-dialog title="新增协议" v-model="addProtocol">
<el-form >
<el-dialog title="新增协议" v-model="isShow">
<el-form>
<el-form-item label="协议名称" :label-width="formLabelWidth">
<el-input autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="addProtocol = false">取消</el-button>
<el-button type="primary" @click="addProtocol = false">
<el-button @click="isShow = false">取消</el-button>
<el-button type="primary" @click="addProtocol">
确定
</el-button>
</span>
......@@ -26,28 +27,37 @@
</template>
<script setup lang="ts">
import {ref} from 'vue';
import KitCollapse from "../../components/kit-collapse.vue";
import { ref } from 'vue';
import KitCollapse from "@/components/protocol/KitCollapse";
const addProtocol = ref(false)
const isShow = ref<boolean>(false)
const formLabelWidth = '140px'
// TODO：添加协议
const addProtocol = () => {
isShow.value = false
console.log('addProtocol')
}
</script>
<style scoped>
.button-container {
display: flex;
justify-content: space-between; /* 使内部元素平均分布 */
align-items: center; /* 垂直居中 */
justify-content: space-between;
/* 使内部元素平均分布 */
align-items: center;
/* 垂直居中 */
}
.left-button {
margin-right: auto; /* 将按钮1靠左 */
margin-right: auto;
/* 将按钮1靠左 */
}
.right-buttons {
display: flex;
align-items: center; /* 垂直居中 */
}
</style>
align-items: center;
/* 垂直居中 */
}</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 = [
path("test/download/", download),
path("mqtt/", include("mqtt.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("protocol_version_manage.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