完善牧安云哨-前端
This commit is contained in:
BBIT-Kai
@@ -0,0 +1,65 @@
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { pyRequestClient } from '#/api/request';
|
||||
|
||||
export namespace SystemUpdateApi {
|
||||
export interface SystemUpdate {
|
||||
[key: string]: any;
|
||||
id: string;
|
||||
code: number;
|
||||
dept_id?: string;
|
||||
dept_name?: string;
|
||||
remark?: string;
|
||||
oss_url?: string;
|
||||
size?: number;
|
||||
created_at?: string;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取升级包列表
|
||||
*/
|
||||
async function getUpdateList(params: Recordable<any>) {
|
||||
return pyRequestClient.get<Array<SystemUpdateApi.SystemUpdate>>(
|
||||
'/iot/common/update/list',
|
||||
{ params },
|
||||
);
|
||||
}
|
||||
/**
|
||||
* 创建升级包
|
||||
* @param data 升级包数据
|
||||
*/
|
||||
async function createUpdate(
|
||||
data: Omit<SystemUpdateApi.SystemUpdate, 'id' | 'created_at'>,
|
||||
) {
|
||||
delete data.oss_url
|
||||
return pyRequestClient.post('/iot/common/update', data);
|
||||
}
|
||||
/**
|
||||
* 删除升级包
|
||||
* @param id 升级包 ID
|
||||
*/
|
||||
async function deleteUpdate(id: string) {
|
||||
return pyRequestClient.delete(`/iot/common/update/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传
|
||||
*/
|
||||
export async function getUpdateUploadUrl() {
|
||||
return pyRequestClient.get('/iot/common/update/getUploadUrl');
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传
|
||||
*/
|
||||
export async function getMaxCodeByDeptId(dept_id: string) {
|
||||
return pyRequestClient.get('/iot/common/update/getMaxCodeByDeptId',{
|
||||
params: {dept_id}
|
||||
});
|
||||
}
|
||||
|
||||
export {
|
||||
createUpdate,
|
||||
deleteUpdate,
|
||||
getUpdateList,
|
||||
};
|
||||
@@ -0,0 +1,81 @@
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { pyRequestClient } from '#/api/request';
|
||||
|
||||
export namespace SentinelApi {
|
||||
export interface Record {
|
||||
id: string;
|
||||
name: string;
|
||||
is_inspected: 0 | 1;
|
||||
license_plate?: string;
|
||||
vehicle_type?: string;
|
||||
license_plate_image?: string;
|
||||
vehicle_image?: string;
|
||||
livestock_type?: string;
|
||||
livestock_source?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
remark?: string;
|
||||
dept_id?: string;
|
||||
dept_name?: string;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取记录列表数据
|
||||
*/
|
||||
async function getSentinelRecordList(params: Recordable<any>) {
|
||||
return pyRequestClient.get<Array<SentinelApi.Record>>(
|
||||
'/iot/sentinel/record/list',
|
||||
{ params },
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建记录
|
||||
* @param data 记录数据
|
||||
*/
|
||||
async function createSentinelRecord(data: Omit<SentinelApi.Record, 'id'>) {
|
||||
return pyRequestClient.post('/iot/sentinel/record', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新记录
|
||||
*
|
||||
* @param id 记录 ID
|
||||
* @param data 记录数据
|
||||
*/
|
||||
async function updateSentinelRecord(
|
||||
id: string,
|
||||
data: Omit<SentinelApi.Record, 'id'>,
|
||||
) {
|
||||
return pyRequestClient.put(`/iot/sentinel/record/${id}`, data);
|
||||
}
|
||||
/**
|
||||
* 更新记录（部分更新）
|
||||
*
|
||||
* @param id 记录 ID
|
||||
* @param data 需要更新的字段（部分字段即可）
|
||||
*/
|
||||
async function updateSentinelRecordPatch(
|
||||
id: string,
|
||||
data: Partial<Omit<SentinelApi.Record, 'id'>>,
|
||||
) {
|
||||
return pyRequestClient.patch(`/iot/sentinel/record/${id}`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除记录
|
||||
* @param id 记录 ID
|
||||
*/
|
||||
async function deleteSentinelRecord(id: string) {
|
||||
return pyRequestClient.delete(`/iot/sentinel/record/${id}`);
|
||||
}
|
||||
|
||||
export {
|
||||
createSentinelRecord,
|
||||
deleteSentinelRecord,
|
||||
getSentinelRecordList,
|
||||
updateSentinelRecord,
|
||||
updateSentinelRecordPatch,
|
||||
};
|
||||
@@ -0,0 +1,304 @@
|
||||
import { type VbenFormSchema, z } from "#/adapter/form";
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { SystemUserApi } from '#/api';
|
||||
|
||||
import * as api from '#/api';
|
||||
import { $t } from "@vben/locales";
|
||||
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '设备账号',
|
||||
rules: z
|
||||
.string({
|
||||
required_error: $t('ui.formRules.required', ['设备账号']),
|
||||
invalid_type_error: $t('ui.formRules.required', ['设备账号']),
|
||||
})
|
||||
.min(4, $t('ui.formRules.minLength', ['设备账号', 4]))
|
||||
.max(50, $t('ui.formRules.maxLength', ['设备账号', 50])),
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'InputPassword',
|
||||
fieldName: 'password',
|
||||
label: '密码',
|
||||
description: '123456',
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: api.getDeptList,
|
||||
class: 'w-full',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
},
|
||||
fieldName: 'dept_id',
|
||||
label: '所属组织',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: '可用', value: 1 },
|
||||
{ label: '不可用', value: 0 },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: 1,
|
||||
fieldName: 'status',
|
||||
label: '可用性',
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: '是', value: 1 },
|
||||
{ label: '否', value: 0 },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: 0,
|
||||
fieldName: 'is_superuser',
|
||||
label: '管理员',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
label: '设备编号',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '设备名称',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
// componentProps: {
|
||||
// readonly: true, // 如果组件支持 readonly
|
||||
// },
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: [
|
||||
{ label: '启用中', value: 1 },
|
||||
{ label: '已禁用', value: 0 },
|
||||
],
|
||||
},
|
||||
fieldName: 'status',
|
||||
label: '可用性',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: [
|
||||
{ label: '是', value: 1 },
|
||||
{ label: '否', value: 0 },
|
||||
],
|
||||
},
|
||||
fieldName: 'is_superuser',
|
||||
label: '管理员',
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: api.getDeptList,
|
||||
class: 'w-full',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
},
|
||||
fieldName: 'dept_id',
|
||||
label: '所属组织',
|
||||
},
|
||||
{
|
||||
component: 'RangePicker',
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useColumns<T = SystemUserApi.SystemUser>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
|
||||
onIsSuperUserChange?: (
|
||||
newStatus: any,
|
||||
row: T,
|
||||
) => PromiseLike<boolean | undefined>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '设备编号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '设备账号',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'online',
|
||||
slots: { default: 'status' },
|
||||
title: '当前状态',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'project',
|
||||
slots: { default: 'project' },
|
||||
title: '所属IoT项目',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'device_type',
|
||||
slots: { default: 'deviceType' },
|
||||
title: '设备类型',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'dept_name',
|
||||
minWidth: 120,
|
||||
title: '所属组织',
|
||||
},
|
||||
{
|
||||
cellRender: {
|
||||
attrs: { beforeChange: onStatusChange },
|
||||
name: onStatusChange ? 'CellSwitch' : 'CellTag',
|
||||
},
|
||||
field: 'status',
|
||||
title: '可用性',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
cellRender: {
|
||||
attrs: { beforeChange: onIsSuperUserChange },
|
||||
name: onIsSuperUserChange ? 'CellSwitch' : 'CellTag',
|
||||
},
|
||||
field: 'is_superuser',
|
||||
title: '管理员',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'created_at',
|
||||
title: '创建时间',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
title: '备注',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
field: 'version',
|
||||
title: '软件版本号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'ip',
|
||||
title: 'IP地址',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'hostname',
|
||||
title: '主机名',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'mac',
|
||||
title: '网卡地址',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'os',
|
||||
title: '操作系统',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'cpu',
|
||||
title: 'CPU型号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'memory_total',
|
||||
title: '内存大小',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'disk_total',
|
||||
title: '外存大小',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'last_seen',
|
||||
title: '信息更新时间',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
width: 300,
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
name: 'CellOperationEx',
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '设备名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
options: [
|
||||
{
|
||||
code: 'shutdown',
|
||||
text: '关闭程序',
|
||||
confirm: true,
|
||||
confirmTitle: '确认关闭程序？',
|
||||
confirmMessage: (row) => `设备「${row.name}」将被关闭`,
|
||||
},
|
||||
{
|
||||
code: 'restart',
|
||||
text: '重启程序',
|
||||
confirm: true,
|
||||
confirmTitle: '确认重启程序？',
|
||||
confirmMessage: (row) => `设备「${row.name}」将被重启`,
|
||||
},
|
||||
{
|
||||
code: 'check_update',
|
||||
text: '检查更新',
|
||||
confirm: false,
|
||||
},
|
||||
'edit',
|
||||
'delete',
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DataNode } from 'ant-design-vue/es/tree';
|
||||
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { SystemUserApi } from '#/api';
|
||||
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
import { Tree, useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Spin } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createDevice, updateDevice } from '#/api';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from './data';
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
|
||||
const formData = ref<SystemUserApi.SystemUser>();
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const roles = ref<DataNode[]>([]);
|
||||
const loadingRoles = ref(false);
|
||||
|
||||
const id = ref();
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) return;
|
||||
const values = await formApi.getValues();
|
||||
drawerApi.lock();
|
||||
(id.value ? updateDevice(id.value, values) : createDevice(values))
|
||||
.then(() => {
|
||||
emits('success');
|
||||
drawerApi.close();
|
||||
})
|
||||
.catch(() => {
|
||||
drawerApi.unlock();
|
||||
});
|
||||
},
|
||||
|
||||
async onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
const data = drawerApi.getData<SystemUserApi.SystemUser>();
|
||||
formApi.resetForm();
|
||||
|
||||
if (data) {
|
||||
formData.value = data;
|
||||
id.value = data.id;
|
||||
} else {
|
||||
id.value = undefined;
|
||||
}
|
||||
|
||||
// Wait for Vue to flush DOM updates (form fields mounted)
|
||||
await nextTick();
|
||||
if (data) {
|
||||
formApi.setValues(data);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const getDrawerTitle = computed(() => {
|
||||
return formData.value?.id ? '修改设备' : '新增设备';
|
||||
});
|
||||
|
||||
function getNodeClass(node: Recordable<any>) {
|
||||
const classes: string[] = [];
|
||||
if (node.value?.type === 'button') {
|
||||
classes.push('inline-flex');
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Drawer :title="getDrawerTitle">
|
||||
<Form>
|
||||
<template #roles="slotProps">
|
||||
<Spin :spinning="loadingRoles" wrapper-class-name="w-full">
|
||||
<Tree
|
||||
:tree-data="roles"
|
||||
multiple
|
||||
bordered
|
||||
:default-expanded-level="2"
|
||||
:get-node-class="getNodeClass"
|
||||
v-bind="slotProps"
|
||||
value-field="id"
|
||||
label-field="title"
|
||||
>
|
||||
<template #node="{ value }">
|
||||
{{ $t(value.title) }}
|
||||
</template>
|
||||
</Tree>
|
||||
</Spin>
|
||||
</template>
|
||||
</Form>
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
:deep(.ant-tree-title) {
|
||||
.tree-actions {
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tree-title:hover) {
|
||||
.tree-actions {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
justify-content: flex-end;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { SystemDeviceApi } from '#/api';
|
||||
|
||||
import { onBeforeUnmount, onMounted, reactive } from 'vue';
|
||||
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
import { Plus } from '@vben/icons';
|
||||
|
||||
import { Button, message, Modal, Tag } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
deleteDevice,
|
||||
getDeviceList,
|
||||
iotSendCommand,
|
||||
updateDevicePatch,
|
||||
} from '#/api';
|
||||
|
||||
import { useColumns, useGridFormSchema } from './data';
|
||||
import Form from './form.vue';
|
||||
|
||||
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* 状态开关即将改变
|
||||
* @param newStatus 期望改变的状态值
|
||||
* @param row 行数据
|
||||
* @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
|
||||
*/
|
||||
async function onStatusChange(
|
||||
newStatus: number,
|
||||
row: SystemDeviceApi.SystemDevice,
|
||||
) {
|
||||
const status: Recordable<string> = {
|
||||
0: '禁用',
|
||||
1: '启用',
|
||||
};
|
||||
try {
|
||||
await confirm(
|
||||
`你要将${row.name}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
|
||||
`切换状态`,
|
||||
);
|
||||
await updateDevicePatch(row.id, { status: newStatus });
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
async function onIsSuperUserChange(
|
||||
newStatus: number,
|
||||
row: SystemDeviceApi.SystemDevice,
|
||||
) {
|
||||
const status: Recordable<string> = {
|
||||
0: '普通用户',
|
||||
1: '超级用户',
|
||||
};
|
||||
try {
|
||||
await confirm(
|
||||
`你要将${row.name}切换为 【${status[newStatus.toString()]}】 吗？`,
|
||||
`切换状态`,
|
||||
);
|
||||
await updateDevicePatch(row.id, { is_superuser: newStatus });
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
|
||||
schema: useGridFormSchema(),
|
||||
submitOnChange: true,
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useColumns(onActionClick, onStatusChange, onIsSuperUserChange),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
const res = await getDeviceList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
return {
|
||||
items: res.list,
|
||||
total: res.total,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: false,
|
||||
refresh: true,
|
||||
search: true,
|
||||
zoom: true,
|
||||
},
|
||||
} as VxeTableGridOptions<SystemDeviceApi.SystemDevice>,
|
||||
});
|
||||
|
||||
function onActionClick(e: OnActionClickParams<SystemDeviceApi.SystemDevice>) {
|
||||
switch (e.code) {
|
||||
case 'check_update': {
|
||||
onCommand(e.row, 'check_update');
|
||||
break;
|
||||
}
|
||||
case 'delete': {
|
||||
onDelete(e.row);
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
onEdit(e.row);
|
||||
break;
|
||||
}
|
||||
case 'restart': {
|
||||
onCommand(e.row, 'restart');
|
||||
break;
|
||||
}
|
||||
case 'shutdown': {
|
||||
onCommand(e.row, 'shutdown');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
|
||||
* @param content 提示内容
|
||||
* @param title 提示标题
|
||||
*/
|
||||
function confirm(content: string, title: string) {
|
||||
return new Promise((reslove, reject) => {
|
||||
Modal.confirm({
|
||||
content,
|
||||
onCancel() {
|
||||
reject(new Error('已取消'));
|
||||
},
|
||||
onOk() {
|
||||
reslove(true);
|
||||
},
|
||||
title,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onEdit(row: SystemDeviceApi.SystemDevice) {
|
||||
formDrawerApi.setData(row).open();
|
||||
}
|
||||
|
||||
async function onCommand(data: SystemDeviceApi.SystemDevice, command: string) {
|
||||
await iotSendCommand(data.name, command, data.project, data.device_type);
|
||||
}
|
||||
|
||||
function onDelete(row: SystemDeviceApi.SystemDevice) {
|
||||
const hideLoading = message.loading({
|
||||
content: `正在删除设备：${[row.name]}`,
|
||||
duration: 0,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
deleteDevice(row.id)
|
||||
.then(() => {
|
||||
message.success({
|
||||
content: `已删除设备：${[row.name]}`,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
onRefresh();
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoading();
|
||||
});
|
||||
}
|
||||
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
function onCreate() {
|
||||
formDrawerApi.setData({}).open();
|
||||
}
|
||||
|
||||
const wsState = reactive({
|
||||
ws: null as null | WebSocket,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const ws = new WebSocket('wss://ai.ronsunny.cn:8090/ai/iot/ws/device-status');
|
||||
wsState.ws = ws;
|
||||
|
||||
ws.onmessage = async (e) => {
|
||||
const msg = JSON.parse(e.data);
|
||||
console.log('WS 事件', msg);
|
||||
|
||||
// 简单策略：任何设备上下线都刷新列表 后续改进针对单行
|
||||
await gridApi.query();
|
||||
};
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (wsState.ws) wsState.ws.close();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<FormDrawer @success="onRefresh" />
|
||||
<Grid :table-title="设备列表">
|
||||
<template #toolbar-tools>
|
||||
<Button type="primary" @click="onCreate">
|
||||
<Plus class="size-5" />
|
||||
新增设备
|
||||
</Button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<Tag v-if="row.online" style="color: green">在线</Tag>
|
||||
<Tag v-else style="color: gray">离线</Tag>
|
||||
</template>
|
||||
<template #deviceType="{ row }">
|
||||
<Tag v-if="row.device_type === 'edge'" style="color: #6b6bff">
|
||||
边缘设备
|
||||
</Tag>
|
||||
<Tag v-else-if="row.device_type === 'server'" style="color: #ff9c00">
|
||||
服务器
|
||||
</Tag>
|
||||
<Tag v-else style="color: gray">其他</Tag>
|
||||
</template>
|
||||
<template #project="{ row }">
|
||||
<Tag v-if="row.project === 'sentinel'" style="color: #eb6bff">
|
||||
牧安云哨
|
||||
</Tag>
|
||||
<Tag v-else style="color: gray">其他</Tag>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,179 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { reactive } from 'vue';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
import axios from 'axios';
|
||||
|
||||
import * as api from '#/api';
|
||||
|
||||
export function useFormSchema(uploadState: {
|
||||
sizeKb?: number;
|
||||
uploaded: boolean;
|
||||
uploadId?: string;
|
||||
uploading: boolean;
|
||||
}): VbenFormSchema[] {
|
||||
const formModel = reactive<{ code?: string; dept_id?: string }>({});
|
||||
|
||||
return [
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
fieldName: 'dept_id',
|
||||
label: '所属组织',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: api.getDeptList,
|
||||
class: 'w-full',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
onChange: async (value: string) => {
|
||||
if (!value) {
|
||||
message.warning('请选择组织');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await api.getMaxCodeByDeptId(value);
|
||||
const codeStr = String(res ?? '0');
|
||||
|
||||
// 弹窗显示最新版本号
|
||||
message.success(`该组织最新版本号：${codeStr}`);
|
||||
} catch (error) {
|
||||
message.error('获取最新版本号失败');
|
||||
console.error('获取最新版本号失败', error);
|
||||
}
|
||||
},
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'code',
|
||||
label: '版本号',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Upload',
|
||||
fieldName: 'oss_url', // 占位字段
|
||||
label: '更新包',
|
||||
componentProps: {
|
||||
maxCount: 1,
|
||||
accept: '.exe',
|
||||
customRequest: async ({ file, onSuccess, onError }) => {
|
||||
try {
|
||||
uploadState.uploading = true;
|
||||
uploadState.uploaded = false;
|
||||
|
||||
// 记录文件大小（KiB，保留 2 位小数）
|
||||
uploadState.sizeKb = Number((file.size / 1024).toFixed(2));
|
||||
|
||||
// 获取上传地址
|
||||
const { uploadUrl, id } = await api.getUpdateUploadUrl();
|
||||
|
||||
// PUT 上传
|
||||
await axios.put(uploadUrl, file, {
|
||||
headers: {
|
||||
'Content-Type': file.type,
|
||||
},
|
||||
});
|
||||
|
||||
// 记录状态
|
||||
uploadState.uploadId = id;
|
||||
uploadState.uploaded = true;
|
||||
|
||||
onSuccess?.({}, file);
|
||||
} catch (error) {
|
||||
uploadState.uploading = false;
|
||||
uploadState.uploaded = false;
|
||||
onError?.(error as Error);
|
||||
} finally {
|
||||
uploadState.uploading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'remark',
|
||||
label: '描述',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return { schemas, formModel };
|
||||
}
|
||||
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
label: '升级包编号',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'code',
|
||||
label: '版本号',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: api.getDeptList,
|
||||
class: 'w-full',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
},
|
||||
fieldName: 'dept_id',
|
||||
label: '所属组织',
|
||||
},
|
||||
{
|
||||
component: 'RangePicker',
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '升级包编号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'code',
|
||||
title: '版本号',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
title: '升级描述',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'dept_name',
|
||||
minWidth: 120,
|
||||
title: '所属组织',
|
||||
},
|
||||
{
|
||||
field: 'created_at',
|
||||
title: '创建时间',
|
||||
width: 200,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
<script lang="ts" setup>
|
||||
import type { SystemUserApi } from '#/api';
|
||||
|
||||
import { computed, nextTick, reactive, ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createUpdate } from '#/api/iot/update';
|
||||
|
||||
import { useFormSchema } from './data';
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
|
||||
const formData = ref<SystemUserApi.SystemUser>();
|
||||
|
||||
const uploadState = reactive<{
|
||||
sizeKb?: number;
|
||||
uploaded: boolean;
|
||||
uploadId?: string;
|
||||
uploading: boolean;
|
||||
}>({
|
||||
uploading: false,
|
||||
uploaded: false,
|
||||
});
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: useFormSchema(uploadState),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const id = ref();
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) return;
|
||||
|
||||
if (uploadState.uploading) {
|
||||
message.warning('文件正在上传，请稍后');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!uploadState.uploaded || !uploadState.uploadId) {
|
||||
message.warning('请先完成更新包上传');
|
||||
return;
|
||||
}
|
||||
|
||||
const values = await formApi.getValues();
|
||||
|
||||
drawerApi.lock();
|
||||
|
||||
createUpdate({
|
||||
...values,
|
||||
uploadId: uploadState.uploadId,
|
||||
size: uploadState.sizeKb,
|
||||
})
|
||||
.then(() => {
|
||||
emits('success');
|
||||
drawerApi.close();
|
||||
})
|
||||
.catch(() => {
|
||||
drawerApi.unlock();
|
||||
});
|
||||
},
|
||||
|
||||
async onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
const data = drawerApi.getData<SystemUserApi.SystemUser>();
|
||||
formApi.resetForm();
|
||||
uploadState.uploaded = false;
|
||||
uploadState.uploadId = undefined;
|
||||
|
||||
if (data) {
|
||||
formData.value = data;
|
||||
id.value = data.id;
|
||||
} else {
|
||||
id.value = undefined;
|
||||
}
|
||||
|
||||
// Wait for Vue to flush DOM updates (form fields mounted)
|
||||
await nextTick();
|
||||
if (data) {
|
||||
formApi.setValues(data);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const getDrawerTitle = computed(() => {
|
||||
return formData.value?.id ? '修改设备' : '新增设备';
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Drawer :title="getDrawerTitle">
|
||||
<Form />
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
:deep(.ant-tree-title) {
|
||||
.tree-actions {
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tree-title:hover) {
|
||||
.tree-actions {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
justify-content: flex-end;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { SystemDeviceApi } from '#/api';
|
||||
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
import { Plus } from '@vben/icons';
|
||||
|
||||
import { Button, message, Tag } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { deleteUpdate } from '#/api';
|
||||
import { getUpdateList } from '#/api/iot/update';
|
||||
|
||||
import { useColumns, useGridFormSchema } from './data';
|
||||
import Form from './form.vue';
|
||||
|
||||
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
|
||||
schema: useGridFormSchema(),
|
||||
submitOnChange: true,
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
const res = await getUpdateList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
return {
|
||||
items: res.list,
|
||||
total: res.total,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: false,
|
||||
refresh: true,
|
||||
search: true,
|
||||
zoom: true,
|
||||
},
|
||||
} as VxeTableGridOptions<SystemDeviceApi.SystemDevice>,
|
||||
});
|
||||
|
||||
function onDelete(row: SystemDeviceApi.SystemDevice) {
|
||||
const hideLoading = message.loading({
|
||||
content: `正在删除更新包：${[row.name]}`,
|
||||
duration: 0,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
deleteUpdate(row.id)
|
||||
.then(() => {
|
||||
message.success({
|
||||
content: `已删除更新包：${[row.name]}`,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
onRefresh();
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoading();
|
||||
});
|
||||
}
|
||||
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
function onCreate() {
|
||||
formDrawerApi.setData({}).open();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<FormDrawer @success="onRefresh" />
|
||||
<Grid :table-title="更新包列表">
|
||||
<template #toolbar-tools>
|
||||
<Button type="primary" @click="onCreate">
|
||||
<Plus class="size-5" />
|
||||
新增更新包
|
||||
</Button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<Tag v-if="row.online" style="color: green">在线</Tag>
|
||||
<Tag v-else style="color: gray">离线</Tag>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,84 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
content: string;
|
||||
}>();
|
||||
|
||||
const emits = defineEmits(['acknowledge']);
|
||||
|
||||
const handleAcknowledge = () => {
|
||||
emits('acknowledge');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<div v-if="visible" class="alert-overlay">
|
||||
<div class="alert-content">
|
||||
<div class="alert-title">牧安云哨</div>
|
||||
<div class="alert-text">{{ content }}</div>
|
||||
<button class="ack-btn" @click="handleAcknowledge">我已知晓</button>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* 多层连续渐变，平滑循环 */
|
||||
background: linear-gradient(270deg, #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #0000ff, #9900ff, #ff00ff, #ff0000);
|
||||
background-size: 1800% 100%;
|
||||
animation: gradientFlow 6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientFlow {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 100% 0%; }
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
color: white;
|
||||
font-size: 3.5rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 25px rgba(0,0,0,0.6);
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.alert-text {
|
||||
color: white;
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 20px rgba(0,0,0,0.5);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ack-btn {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border: 2px solid white;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
padding: 0.5rem 2rem;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
margin-bottom: 15rem;
|
||||
}
|
||||
|
||||
.ack-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,237 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { SystemUserApi } from '#/api';
|
||||
|
||||
import * as api from '#/api';
|
||||
|
||||
/**
|
||||
* 新增/修改
|
||||
*/
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'license_plate',
|
||||
label: '车牌',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'vehicle_type',
|
||||
label: '车型',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'livestock_type',
|
||||
label: '牲畜种类',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'livestock_source',
|
||||
label: '牲畜来源',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: '已检疫', value: 1 },
|
||||
{ label: '未检疫', value: 0 },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: 0,
|
||||
fieldName: 'is_inspected',
|
||||
label: '检疫状态',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 筛选
|
||||
*/
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
label: '编号',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'license_plate',
|
||||
label: '车牌',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'vehicle_type',
|
||||
label: '车型',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'ApiCombobox',
|
||||
fieldName: 'livestock_type',
|
||||
label: '牲畜种类',
|
||||
componentProps: {
|
||||
api: () => api.getDictDetailList('livestock_type'),
|
||||
labelField: 'value',
|
||||
valueField: 'value',
|
||||
showSearch: true,
|
||||
mode: 'combobox', // 可选 combobox / tags
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'livestock_source',
|
||||
label: '牲畜来源',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: [
|
||||
{ label: '已检疫', value: 1 },
|
||||
{ label: '未检疫', value: 0 },
|
||||
],
|
||||
},
|
||||
fieldName: 'is_inspected',
|
||||
label: '检疫状态',
|
||||
},
|
||||
{
|
||||
component: 'RangePicker',
|
||||
fieldName: 'createTime',
|
||||
label: '录入时间',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表展示
|
||||
* @param onActionClick
|
||||
* @param onStatusChange
|
||||
*/
|
||||
export function useColumns<T = SystemUserApi.SystemUser>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'license_plate',
|
||||
title: '车牌',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
cellRender: { name: 'CellImage' },
|
||||
field: 'license_plate_image',
|
||||
title: '车牌照',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'vehicle_type',
|
||||
title: '车型',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
cellRender: { name: 'CellImage' },
|
||||
field: 'vehicle_image',
|
||||
title: '车身照',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'livestock_type',
|
||||
title: '牲畜种类',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'livestock_source',
|
||||
title: '牲畜来源',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
field: 'is_inspected',
|
||||
title: '检疫状态',
|
||||
width: 100,
|
||||
cellRender: {
|
||||
name: 'CellSwitch',
|
||||
props: {
|
||||
checkedChildren: '已检疫',
|
||||
unCheckedChildren: '未检疫',
|
||||
},
|
||||
attrs: {
|
||||
beforeChange: onStatusChange,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'created_at',
|
||||
title: '录入时间',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'updated_at',
|
||||
title: '最后更新时间',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'dept_name',
|
||||
title: '所属组织',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
title: '备注',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '设备名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
},
|
||||
field: 'operation',
|
||||
fixed: 'right',
|
||||
title: '操作',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DataNode } from 'ant-design-vue/es/tree';
|
||||
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { SentinelApi } from '#/api';
|
||||
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
import { Tree, useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Spin } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createSentinelRecord, updateSentinelRecord } from '#/api';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from './data';
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
|
||||
const formData = ref<SentinelApi.Record>();
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const roles = ref<DataNode[]>([]);
|
||||
const loadingRoles = ref(false);
|
||||
|
||||
const id = ref();
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) return;
|
||||
const values = await formApi.getValues();
|
||||
drawerApi.lock();
|
||||
(id.value
|
||||
? updateSentinelRecord(id.value, values)
|
||||
: createSentinelRecord(values)
|
||||
)
|
||||
.then(() => {
|
||||
emits('success');
|
||||
drawerApi.close();
|
||||
})
|
||||
.catch(() => {
|
||||
drawerApi.unlock();
|
||||
});
|
||||
},
|
||||
|
||||
async onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
const data = drawerApi.getData<SentinelApi.Record>();
|
||||
formApi.resetForm();
|
||||
|
||||
if (data) {
|
||||
formData.value = data;
|
||||
id.value = data.id;
|
||||
} else {
|
||||
id.value = undefined;
|
||||
}
|
||||
|
||||
// Wait for Vue to flush DOM updates (form fields mounted)
|
||||
await nextTick();
|
||||
if (data) {
|
||||
formApi.setValues(data);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const getDrawerTitle = computed(() => {
|
||||
return formData.value?.id ? '修改记录' : '新增记录';
|
||||
});
|
||||
|
||||
function getNodeClass(node: Recordable<any>) {
|
||||
const classes: string[] = [];
|
||||
if (node.value?.type === 'button') {
|
||||
classes.push('inline-flex');
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Drawer :title="getDrawerTitle">
|
||||
<Form>
|
||||
<template #roles="slotProps">
|
||||
<Spin :spinning="loadingRoles" wrapper-class-name="w-full">
|
||||
<Tree
|
||||
:tree-data="roles"
|
||||
multiple
|
||||
bordered
|
||||
:default-expanded-level="2"
|
||||
:get-node-class="getNodeClass"
|
||||
v-bind="slotProps"
|
||||
value-field="id"
|
||||
label-field="title"
|
||||
>
|
||||
<template #node="{ value }">
|
||||
{{ $t(value.id) }}
|
||||
</template>
|
||||
</Tree>
|
||||
</Spin>
|
||||
</template>
|
||||
</Form>
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
:deep(.ant-tree-title) {
|
||||
.tree-actions {
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tree-title:hover) {
|
||||
.tree-actions {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
justify-content: flex-end;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Recordable } from '@vben-core/typings';
|
||||
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { SentinelApi } from '#/api';
|
||||
|
||||
import { onBeforeUnmount, onMounted, reactive, watch } from 'vue';
|
||||
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
import { Plus } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { Button, message, Modal } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
deleteSentinelRecord,
|
||||
getSentinelRecordList,
|
||||
updateSentinelRecordPatch,
|
||||
} from '#/api';
|
||||
import VehicleAlertOverlay from '#/views/sentinel/record/VehicleAlertOverlay.vue';
|
||||
|
||||
import { useColumns, useGridFormSchema } from './data';
|
||||
import Form from './form.vue';
|
||||
|
||||
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* 状态开关即将改变
|
||||
* @param newStatus 期望改变的状态值
|
||||
* @param row 行数据
|
||||
* @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
|
||||
*/
|
||||
async function onStatusChange(newStatus: number, row: SentinelApi.Record) {
|
||||
const status: Recordable<string> = {
|
||||
0: '不通过',
|
||||
1: '通过',
|
||||
};
|
||||
try {
|
||||
await confirm(
|
||||
`你要将记录编号为${row.id}的检查状态切换为【${status[newStatus.toString()]}】 吗？`,
|
||||
`切换检查状态`,
|
||||
);
|
||||
await updateSentinelRecordPatch(row.id, { is_inspected: newStatus });
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
|
||||
* @param content 提示内容
|
||||
* @param title 提示标题
|
||||
*/
|
||||
function confirm(content: string, title: string) {
|
||||
return new Promise((reslove, reject) => {
|
||||
Modal.confirm({
|
||||
content,
|
||||
onCancel() {
|
||||
reject(new Error('已取消'));
|
||||
},
|
||||
onOk() {
|
||||
reslove(true);
|
||||
},
|
||||
title,
|
||||
});
|
||||
});
|
||||
}
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
|
||||
schema: useGridFormSchema(),
|
||||
submitOnChange: true,
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useColumns(onActionClick, onStatusChange),
|
||||
height: 'auto',
|
||||
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
const res = await getSentinelRecordList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
return {
|
||||
items: res.list,
|
||||
total: res.total,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: false,
|
||||
refresh: true,
|
||||
search: true,
|
||||
zoom: true,
|
||||
},
|
||||
} as VxeTableGridOptions<SentinelApi.Record>,
|
||||
});
|
||||
|
||||
function onActionClick(e: OnActionClickParams<SentinelApi.Record>) {
|
||||
switch (e.code) {
|
||||
case 'delete': {
|
||||
onDelete(e.row);
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
onEdit(e.row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onEdit(row: SentinelApi.Record) {
|
||||
formDrawerApi.setData(row).open();
|
||||
}
|
||||
|
||||
function onDelete(row: SentinelApi.Record) {
|
||||
const hideLoading = message.loading({
|
||||
content: `正在删除记录：${[row.id]}`,
|
||||
duration: 0,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
deleteSentinelRecord(row.id)
|
||||
.then(() => {
|
||||
message.success({
|
||||
content: `已删除记录：${[row.id]}`,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
onRefresh();
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoading();
|
||||
});
|
||||
}
|
||||
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
function onCreate() {
|
||||
formDrawerApi.setData({}).open();
|
||||
}
|
||||
|
||||
const wsState = reactive({
|
||||
ws: null as null | WebSocket,
|
||||
});
|
||||
const alertState = reactive({
|
||||
visible: false,
|
||||
content: '',
|
||||
});
|
||||
|
||||
let ws: null | WebSocket = null;
|
||||
|
||||
function createWs(token: string) {
|
||||
if (ws) {
|
||||
ws.close();
|
||||
ws = null;
|
||||
}
|
||||
|
||||
ws = new WebSocket(
|
||||
`ws://127.0.0.1:13011/iot/ws/sentinel_record?token=${token}`,
|
||||
);
|
||||
|
||||
ws.onmessage = (e) => {
|
||||
const msg = JSON.parse(e.data);
|
||||
if (msg.type === 'vehicle_alert') {
|
||||
handleVehicleAlert(msg.content);
|
||||
}
|
||||
};
|
||||
|
||||
ws.addEventListener('close', () => {
|
||||
console.warn('ws closed');
|
||||
});
|
||||
}
|
||||
const accessStore = useAccessStore();
|
||||
onMounted(() => {
|
||||
if (accessStore.accessToken) {
|
||||
createWs(accessStore.accessToken);
|
||||
}
|
||||
});
|
||||
watch(
|
||||
() => accessStore.accessToken,
|
||||
(newToken, oldToken) => {
|
||||
if (newToken && newToken !== oldToken) {
|
||||
createWs(newToken);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (ws) {
|
||||
ws.close();
|
||||
ws = null;
|
||||
}
|
||||
});
|
||||
|
||||
function handleVehicleAlert(content: string) {
|
||||
alertState.content = content;
|
||||
alertState.visible = true;
|
||||
}
|
||||
|
||||
function acknowledgeAlert() {
|
||||
alertState.visible = false;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<VehicleAlertOverlay
|
||||
:visible="alertState.visible"
|
||||
:content="alertState.content"
|
||||
@acknowledge="acknowledgeAlert"
|
||||
/>
|
||||
|
||||
<FormDrawer @success="onRefresh" />
|
||||
<Grid :table-title="设备列表">
|
||||
<template #toolbar-tools>
|
||||
<Button type="primary" @click="onCreate">
|
||||
<Plus class="size-5" />
|
||||
手动新增记录
|
||||
</Button>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
Reference in New Issue
Block a user