完善牧安云哨-前端

vue2/apps/web-antd/src/api/iot/update.ts

@@ -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,
+};

vue2/apps/web-antd/src/api/sentinel/record.ts

@@ -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,
+};

vue2/apps/web-antd/src/views/iot/device/data.ts

@@ -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',
+        ],
+      },
+    },
+  ];
+}

vue2/apps/web-antd/src/views/iot/device/form.vue

@@ -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>

vue2/apps/web-antd/src/views/iot/device/index.vue

@@ -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>

vue2/apps/web-antd/src/views/iot/update/data.ts

@@ -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,
+    },
+  ];
+}

vue2/apps/web-antd/src/views/iot/update/form.vue

@@ -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>

vue2/apps/web-antd/src/views/iot/update/index.vue

@@ -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>

vue2/apps/web-antd/src/views/sentinel/record/VehicleAlertOverlay.vue

@@ -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>

vue2/apps/web-antd/src/views/sentinel/record/data.ts

@@ -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,
+    },
+  ];
+}

vue2/apps/web-antd/src/views/sentinel/record/form.vue

@@ -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>

vue2/apps/web-antd/src/views/sentinel/record/index.vue

@@ -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>