From 7aa7addb440cf1e419f0428bb70bff96d2e26425 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Thu, 20 Aug 2026 09:59:01 +0800
Subject: [PATCH] 11

---
 src/api/collection/gate.ts                    |   84 +
 src/api/collection/videoPlatform.ts           |   45 +
 src/api/device/deviceCamera.ts                |    9 +-
 src/api/device/deviceStatistics.ts            |  159 ++
 .../rtsp-plugin-video/video-plugin.vue        |    8 +-
 .../admin/dict/components/dict-table.vue      |  173 ++
 src/views/admin/system/dept/index.vue         |   25 +-
 src/views/admin/system/menu/form.vue          |    5 -
 .../system/role/components/role-list.vue      |  223 +++
 src/views/admin/system/role/form.vue          |   55 +-
 src/views/admin/system/role/index.vue         |  194 +-
 .../admin/system/role/role-permission.vue     |    7 +
 .../system/user/components/user-list.vue      |  255 +++
 src/views/admin/system/user/form.vue          |  140 +-
 src/views/admin/system/user/i18n/en.ts        |    1 +
 src/views/admin/system/user/i18n/zh-cn.ts     |    1 +
 src/views/admin/system/user/index.vue         |  237 +--
 src/views/admin/system/user/user-role.vue     |    7 +
 src/views/alarm/alarm-record/index.vue        |   36 +
 src/views/area/_components/areaHouseForm.vue  |   16 +-
 src/views/area/_components/areaHouseList.vue  |  182 ++
 src/views/area/_components/areaHouseTable.vue |   84 +-
 src/views/area/_components/areaManageList.vue |  167 ++
 src/views/area/_components/bindCameraForm.vue |   34 +-
 .../area/_components/bindCameraTable.vue      |   10 +-
 src/views/area/areaHouse/index.vue            |  181 +-
 src/views/area/areaManage/index.vue           |  166 +-
 src/views/base/data/index.vue                 | 1580 +++++++++++++++++
 src/views/base/deviceCamera/index.vue         |    7 +
 src/views/base/rc/auto.vue                    |    7 +
 src/views/base/rc/car.vue                     |    7 +
 src/views/base/rc/person.vue                  |    7 +
 src/views/base/ss/area.vue                    |    7 +
 src/views/base/ss/jkList.vue                  |    7 +
 src/views/base/ss/sbList.vue                  |    7 +
 src/views/base/ss/ssType.vue                  |    7 +
 src/views/car/carAccess/index.vue             |   51 +-
 src/views/car/carManage/index.vue             |  214 +--
 src/views/car/carRecord/index.vue             |   54 +-
 src/views/car/components/car-manage-list.vue  |  217 +++
 src/views/collection/car/access.vue           |   51 +
 .../car/components/gate-device-form.vue       |  202 +++
 .../car/components/gate-device-list.vue       |  180 ++
 .../car/components/gate-log-list.vue          |   47 +
 .../car/components/gate-operation-list.vue    |   81 +
 .../car/components/gate-remote-list.vue       |   97 +
 src/views/collection/car/display.vue          |  174 ++
 src/views/collection/video/monitor.vue        |    7 +
 src/views/collection/video/platform.vue       |  465 +++++
 src/views/collection/video/playback.vue       |    7 +
 src/views/collection/video/recorder.vue       |    8 +
 src/views/collection/video/sbList.vue         |    8 +
 src/views/device/components/camera-list.vue   |  258 +++
 src/views/device/components/device-list.vue   |  211 +++
 src/views/device/deviceCamera/index.vue       |  225 +--
 src/views/device/deviceManage/index.vue       |  208 +--
 src/views/door/doorReign/index.vue            |   40 +-
 .../sys/sysPerson/components/person-list.vue  |  245 +++
 src/views/sys/sysPerson/index.vue             |  242 +--
 .../job-manage/components/job-manage-list.vue |  427 +++++
 src/views/tools/job-manage/index.vue          |  426 +----
 61 files changed, 6030 insertions(+), 2255 deletions(-)
 create mode 100644 src/api/collection/gate.ts
 create mode 100644 src/api/collection/videoPlatform.ts
 create mode 100644 src/api/device/deviceStatistics.ts
 create mode 100644 src/views/admin/dict/components/dict-table.vue
 create mode 100644 src/views/admin/system/role/components/role-list.vue
 create mode 100644 src/views/admin/system/role/role-permission.vue
 create mode 100644 src/views/admin/system/user/components/user-list.vue
 create mode 100644 src/views/admin/system/user/user-role.vue
 create mode 100644 src/views/area/_components/areaHouseList.vue
 create mode 100644 src/views/area/_components/areaManageList.vue
 create mode 100644 src/views/base/data/index.vue
 create mode 100644 src/views/base/deviceCamera/index.vue
 create mode 100644 src/views/base/rc/auto.vue
 create mode 100644 src/views/base/rc/car.vue
 create mode 100644 src/views/base/rc/person.vue
 create mode 100644 src/views/base/ss/area.vue
 create mode 100644 src/views/base/ss/jkList.vue
 create mode 100644 src/views/base/ss/sbList.vue
 create mode 100644 src/views/base/ss/ssType.vue
 create mode 100644 src/views/car/components/car-manage-list.vue
 create mode 100644 src/views/collection/car/access.vue
 create mode 100644 src/views/collection/car/components/gate-device-form.vue
 create mode 100644 src/views/collection/car/components/gate-device-list.vue
 create mode 100644 src/views/collection/car/components/gate-log-list.vue
 create mode 100644 src/views/collection/car/components/gate-operation-list.vue
 create mode 100644 src/views/collection/car/components/gate-remote-list.vue
 create mode 100644 src/views/collection/car/display.vue
 create mode 100644 src/views/collection/video/monitor.vue
 create mode 100644 src/views/collection/video/platform.vue
 create mode 100644 src/views/collection/video/playback.vue
 create mode 100644 src/views/collection/video/recorder.vue
 create mode 100644 src/views/collection/video/sbList.vue
 create mode 100644 src/views/device/components/camera-list.vue
 create mode 100644 src/views/device/components/device-list.vue
 create mode 100644 src/views/sys/sysPerson/components/person-list.vue
 create mode 100644 src/views/tools/job-manage/components/job-manage-list.vue

diff --git a/src/api/collection/gate.ts b/src/api/collection/gate.ts
new file mode 100644
index 0000000..6a4e984
--- /dev/null
+++ b/src/api/collection/gate.ts
@@ -0,0 +1,84 @@
+import request from "/@/utils/request";
+
+export interface GateDashboard {
+  deviceTotal: number;
+  onlineTotal: number;
+  offlineTotal: number;
+  todayEnterTotal: number;
+  todayExitTotal: number;
+  unidentifiedTotal: number;
+  iccConnected: boolean;
+  message: string;
+  checkedAt: string;
+}
+
+export function devicePage(query: any) {
+  return request({
+    url: "/admin/collection/car/access/device/page",
+    method: "get",
+    params: query,
+  });
+}
+
+export function getDevice(id: string) {
+  return request({
+    url: `/admin/collection/car/access/device/${id}`,
+    method: "get",
+  });
+}
+
+export function addDevice(data: any) {
+  return request({
+    url: "/admin/collection/car/access/device",
+    method: "post",
+    data,
+  });
+}
+
+export function updateDevice(data: any) {
+  return request({
+    url: "/admin/collection/car/access/device",
+    method: "put",
+    data,
+  });
+}
+
+export function pushDevice(id: string) {
+  return request({
+    url: `/admin/collection/car/access/device/${id}/push`,
+    method: "post",
+    timeout: 120000,
+  });
+}
+
+export function removeDevice(id: string, deleteRemote = false) {
+  return request({
+    url: `/admin/collection/car/access/device/${id}`,
+    method: "delete",
+    params: { deleteRemote },
+    timeout: deleteRemote ? 120000 : 50000,
+  });
+}
+
+export function remoteDeviceList(params?: any) {
+  return request({
+    url: "/admin/collection/car/display/device/list",
+    method: "get",
+    params,
+  });
+}
+
+export function operationPage(params?: any) {
+  return request({
+    url: "/admin/collection/car/display/operation/page",
+    method: "get",
+    params,
+  });
+}
+
+export function dashboard() {
+  return request({
+    url: "/admin/collection/car/display/dashboard",
+    method: "get",
+  });
+}
diff --git a/src/api/collection/videoPlatform.ts b/src/api/collection/videoPlatform.ts
new file mode 100644
index 0000000..0cacd75
--- /dev/null
+++ b/src/api/collection/videoPlatform.ts
@@ -0,0 +1,45 @@
+import request from "/@/utils/request";
+
+export interface PlatformStatus {
+    version: string;
+    releaseDate: string;
+    connected: boolean;
+    remoteDeviceCount: number | null;
+    remoteChannelCount: number | null;
+    localDeviceCount: number;
+    localChannelCount: number;
+    onlineDeviceCount: number;
+    deviceDifference: number | null;
+    channelDifference: number | null;
+    checkedAt: string;
+    message: string;
+}
+
+export interface PlatformSyncResult extends PlatformStatus {
+    success: boolean;
+    startedAt: string;
+    finishedAt: string;
+    durationMillis: number;
+    deviceAddedCount: number;
+    deviceUpdatedCount: number;
+    deviceFailedCount: number;
+    channelAddedCount: number;
+    channelUpdatedCount: number;
+    channelFailedCount: number;
+    errors: string[];
+}
+
+export function getStatus() {
+    return request({
+        url: "/admin/third/platform/status",
+        method: "get",
+    });
+}
+
+export function syncPlatform() {
+    return request({
+        url: "/admin/third/platform/sync",
+        method: "post",
+        timeout: 300000,
+    });
+}
diff --git a/src/api/device/deviceCamera.ts b/src/api/device/deviceCamera.ts
index a739689..92004fc 100644
--- a/src/api/device/deviceCamera.ts
+++ b/src/api/device/deviceCamera.ts
@@ -1,5 +1,12 @@
 import request from "/@/utils/request"
 
+export function getToken() {
+  return request({
+    url: '/admin/third/camera/getToken',
+    method: 'get'
+  })
+}
+
 export function getRtspVideo(query: any) {
   return request({
     url: '/admin/third/camera/getRtspVideo',
@@ -14,4 +21,4 @@ export function getRtspVideoList(query: any) {
       method: 'get',
       params: query
     })
-  }
\ No newline at end of file
+  }
diff --git a/src/api/device/deviceStatistics.ts b/src/api/device/deviceStatistics.ts
new file mode 100644
index 0000000..011785e
--- /dev/null
+++ b/src/api/device/deviceStatistics.ts
@@ -0,0 +1,159 @@
+import request from "/@/utils/request";
+
+/**
+ * 单类设备的运行统计。
+ */
+export interface DeviceStatusDetail {
+  deviceName?: string;
+  deviceCategory?: string;
+  total: number;
+  online: number;
+  offline: number;
+  onlineRate: number;
+}
+
+/**
+ * 设备总览统计，分别包含总量、监控、门禁和道闸数据。
+ */
+export interface DeviceTotalData {
+  total: DeviceStatusDetail;
+  camera: DeviceStatusDetail;
+  door: DeviceStatusDetail;
+  gate: DeviceStatusDetail;
+}
+
+/**
+ * 设备在线率趋势数据。
+ */
+export interface DeviceOnlineTrendItem {
+  recordTime: string;
+  onlineDeviceTotalRate: number;
+}
+
+/**
+ * 区域设备数量统计。
+ */
+export interface AreaDeviceStatisticsItem {
+  areaName: string;
+  totalCount: number | string;
+  onlineCount: number | string;
+  offlineCount: number | string;
+}
+
+/**
+ * 设备告警数量统计。
+ */
+export interface DeviceAlarmTotalData {
+  todayAlarmCount: number;
+  alarmCount: number;
+}
+
+/**
+ * 设备告警趋势数据。
+ */
+export interface DeviceAlarmTrendItem {
+  alarmCount: number;
+  time: string;
+  weekStr?: string;
+}
+
+/**
+ * 实时告警摘要行。
+ */
+export interface DeviceAlarmSummaryItem {
+  id?: string | number;
+  alarmCode?: string;
+  alarmDate?: string;
+  alarmPosition?: string;
+  alarmType?: string;
+  alarmTypeName?: string;
+  alarmStat?: string;
+  handleStat?: string;
+  alarmGrade?: string;
+  deviceName?: string;
+}
+
+/**
+ * 统计接口通用的时间范围参数。
+ */
+export interface StatisticsDateRange {
+  recordListList?: string[];
+  alarmDateList?: string[];
+}
+
+/**
+ * 实时告警摘要分页查询参数。
+ */
+export interface DeviceAlarmPageQuery extends StatisticsDateRange {
+  current: number;
+  size: number;
+  alarmCode?: string;
+  deviceName?: string;
+}
+
+/**
+ * 获取设备数量及在线状态总览。
+ */
+export function getDeviceTotal() {
+  return request({
+    url: "/admin/total/plan/total-device",
+    method: "get",
+  });
+}
+
+/**
+ * 获取设备在线率趋势。
+ */
+export function getDeviceOnlineTrend(data: StatisticsDateRange) {
+  return request({
+    url: "/admin/total/plan/device-offline-rate",
+    method: "post",
+    data,
+  });
+}
+
+/**
+ * 获取设备区域数量排行。
+ */
+export function getAreaDeviceStatistics() {
+  return request({
+    url: "/admin/total/plan/camera-area-total-device",
+    method: "get",
+  });
+}
+
+/**
+ * 获取今日告警数和历史告警总数。
+ */
+export function getDeviceAlarmTotal() {
+  return request({
+    url: "/admin/alarmRecord/total/num-total",
+    method: "post",
+  });
+}
+
+/**
+ * 获取设备告警趋势。
+ */
+export function getDeviceAlarmTrend(data: StatisticsDateRange) {
+  return request({
+    url: "/admin/alarmRecord/total/alarm-by-time",
+    method: "post",
+    data,
+  });
+}
+
+/**
+ * 获取最新设备告警摘要。
+ */
+export function getDeviceAlarmPage(data: DeviceAlarmPageQuery) {
+  return request({
+    url: "/admin/alarmRecord/total/page",
+    method: "post",
+    params: {
+      current: data.current,
+      size: data.size,
+    },
+    data,
+  });
+}
diff --git a/src/components/rtsp-plugin-video/video-plugin.vue b/src/components/rtsp-plugin-video/video-plugin.vue
index d3b95e5..c267d43 100644
--- a/src/components/rtsp-plugin-video/video-plugin.vue
+++ b/src/components/rtsp-plugin-video/video-plugin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="video-container" :style="videoStyle" :class="{ 'preview-mode': currentWindowType === 0 }">
+  <div class="video-container" :class="{ 'preview-mode': currentWindowType === 0 }">
     <div v-if="loading" class="loading-mask">正在初始化...</div>
     <div id="video-plugin-preview-0" class="pane" />
     <div id="video-plugin-preview-3" class="pane" />
@@ -822,14 +822,16 @@ defineExpose({
 
 <style scoped>
 .video-container {
-  flex: 1;
+  /* 底层播放器统一保持监控画面常用的 16:9，避免被外层不规则高度拉伸。 */
+  flex: 0 0 auto;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
-  height: 100%;
+  height: auto;
+  aspect-ratio: 16 / 9;
   position: relative;
   background: #2F3235;
 }
diff --git a/src/views/admin/dict/components/dict-table.vue b/src/views/admin/dict/components/dict-table.vue
new file mode 100644
index 0000000..ed1fdbc
--- /dev/null
+++ b/src/views/admin/dict/components/dict-table.vue
@@ -0,0 +1,173 @@
+<template>
+	<div v-if="normalizedDictKey" class="layout-padding-auto layout-padding-view">
+		<el-row v-show="showSearch" class="ml10">
+			<el-form ref="queryRef" :model="state.queryForm" :inline="true" @keyup.enter="getDataList">
+				<el-form-item label="关键字" prop="keyword">
+					<el-input
+						v-model="state.queryForm.keyword"
+						clearable
+						placeholder="请输入标签、数据值、描述或备注"
+						@clear="getDataList"
+					/>
+				</el-form-item>
+				<el-form-item>
+					<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
+					<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+				</el-form-item>
+			</el-form>
+		</el-row>
+		<div class="mb8">
+			<el-tooltip :disabled="Boolean(dictContext.id)" content="未找到对应的字典类型" placement="top">
+				<span>
+					<el-button class="ml10" icon="folder-add" type="primary" :disabled="!dictContext.id"
+						@click="openCreateDialog">
+						{{ $t('common.addBtn') }}
+					</el-button>
+				</span>
+			</el-tooltip>
+			<right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right; margin-right: 20px"
+				@queryTable="getDataList" />
+		</div>
+
+		<el-table v-loading="state.loading || contextLoading" :data="state.dataList" style="width: 100%" border
+			:cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle">
+			<el-table-column prop="value" :label="$t('dictItem.itemValue')" show-overflow-tooltip />
+			<el-table-column prop="label" :label="$t('dictItem.label')" show-overflow-tooltip />
+			<el-table-column prop="description" :label="$t('dictItem.description')" show-overflow-tooltip />
+			<el-table-column prop="sortOrder" :label="$t('dictItem.sortOrder')" show-overflow-tooltip />
+			<el-table-column prop="remarks" :label="$t('dictItem.remarks')" show-overflow-tooltip />
+			<el-table-column prop="createTime" :label="$t('dictItem.createTime')" show-overflow-tooltip />
+
+			<el-table-column :label="$t('common.action')" width="150" fixed="right">
+				<template #default="{ row }">
+					<el-button icon="edit-pen" text type="primary" @click="openEditDialog(row)">
+						{{ $t('common.editBtn') }}
+					</el-button>
+					<el-button icon="delete" text type="primary" @click="handleDelete(row)">
+						{{ $t('common.delBtn') }}
+					</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+
+		<pagination v-bind="state.pagination" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" />
+		<dict-form ref="dictFormRef" @refresh="getDataList(false)" />
+	</div>
+</template>
+
+<script setup lang="ts" name="dictTable">
+import { computed, reactive, ref, watch } from 'vue';
+import { BasicTableProps, useTable } from '/@/hooks/table';
+import { delItemObj, fetchItemList, getObjDetails } from '/@/api/admin/dict';
+import { useMessage, useMessageBox } from '/@/hooks/message';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+	dictKey?: string;
+}>();
+
+const DictForm = defineAsyncComponent(() => import('../dictItem/form.vue'));
+const { t } = useI18n();
+const dictFormRef = ref();
+const queryRef = ref();
+const showSearch = ref(true);
+const contextLoading = ref(false);
+const normalizedDictKey = computed(() => props.dictKey?.trim() || '');
+const dictContext = reactive({
+	id: '',
+	dictType: '',
+});
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {
+		dictType: '',
+		keyword: '',
+	},
+	createdIsNeed: false,
+	pageList: (query: any) => fetchItemList({
+		...query,
+		dictType: normalizedDictKey.value,
+	}),
+});
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
+
+const loadDict = async (dictKey: string) => {
+	contextLoading.value = true;
+	Object.assign(dictContext, { id: '', dictType: dictKey });
+	state.queryForm = { dictType: dictKey, keyword: '' };
+	state.dataList = [];
+	state.pagination!.current = 1;
+
+	try {
+		const { data } = await getObjDetails({ dictType: dictKey });
+		if (dictKey !== normalizedDictKey.value) return;
+		if (!data?.id) return;
+		Object.assign(dictContext, {
+			id: data?.id || '',
+			dictType: dictKey,
+		});
+		await getDataList();
+	} finally {
+		if (dictKey === normalizedDictKey.value) {
+			contextLoading.value = false;
+		}
+	}
+};
+
+watch(normalizedDictKey, (dictKey) => {
+	if (!dictKey) {
+		Object.assign(dictContext, { id: '', dictType: '' });
+		state.queryForm = { dictType: '', keyword: '' };
+		state.dataList = [];
+		return;
+	}
+	loadDict(dictKey);
+}, { immediate: true });
+
+const belongsToCurrentDict = (row: any) => row?.dictType === normalizedDictKey.value;
+
+const resetQuery = () => {
+	queryRef.value?.resetFields();
+	state.queryForm.dictType = normalizedDictKey.value;
+	getDataList();
+};
+
+const openCreateDialog = () => {
+	if (!dictContext.id || !normalizedDictKey.value) return;
+	dictFormRef.value.openDialog(null, {
+		dictId: dictContext.id,
+		dictType: normalizedDictKey.value,
+	});
+};
+
+const openEditDialog = (row: any) => {
+	if (!belongsToCurrentDict(row)) return;
+	dictFormRef.value.openDialog(row, {
+		dictId: dictContext.id,
+		dictType: normalizedDictKey.value,
+	});
+};
+
+const handleDelete = async (row: any) => {
+	if (!belongsToCurrentDict(row)) return;
+
+	try {
+		await useMessageBox().confirm(t('common.delConfirmText'));
+	} catch {
+		return;
+	}
+
+	try {
+		await delItemObj(row.id);
+		await getDataList(false);
+		useMessage().success(t('common.delSuccessText'));
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	}
+};
+
+defineExpose({
+	refresh: getDataList,
+});
+</script>
diff --git a/src/views/admin/system/dept/index.vue b/src/views/admin/system/dept/index.vue
index 5723be5..edecfed 100644
--- a/src/views/admin/system/dept/index.vue
+++ b/src/views/admin/system/dept/index.vue
@@ -4,7 +4,8 @@
 			<el-row shadow="hover" v-show="showSearch" class="ml10">
 				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="filter">
 					<el-form-item prop="deptName" :label="$t('sysdept.name')">
-						<el-input :placeholder="$t('sysdept.inputdeptNameTip')" style="max-width: 180px" v-model="state.queryForm.deptName"></el-input>
+						<el-input :placeholder="$t('sysdept.inputdeptNameTip')" style="max-width: 180px"
+							v-model="state.queryForm.deptName"></el-input>
 					</el-form-item>
 					<el-form-item>
 						<el-button icon="search" type="primary" @click="filter">
@@ -16,21 +17,16 @@
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="top-right-btn" v-if="!defaultTreeViewRef" v-auth="'sys_dept_add'" @click="handleAdd">
+					<el-button icon="folder-add" type="primary" class="top-right-btn" v-if="!defaultTreeViewRef"
+						v-auth="'sys_dept_add'" @click="handleAdd">
 						{{ $t('common.addBtn') }}
 					</el-button>
 					<el-button plain icon="upload-filled" type="primary" class="ml10" @click="excelUploadRef.show()">
 						{{ $t('common.importBtn') }}
 					</el-button>
 					<el-button @click="handleExpand"> {{ $t('common.expandBtn') }}</el-button>
-					<right-toolbar
-						v-model:showSearch="showSearch"
-						:export="'sys_dept_add'"
-						@exportExcel="exportExcel"
-						class="ml10"
-						style="float: right; margin-right: 20px"
-						@queryTable="getDataList"
-					>
+					<right-toolbar v-model:showSearch="showSearch" :export="'sys_dept_add'" @exportExcel="exportExcel"
+						class="ml10" style="float: right; margin-right: 20px" @queryTable="getDataList">
 						<el-tooltip class="item" effect="dark" :content="$t('queryTree.view')" placement="top">
 							<el-button circle icon="Grid" @click="handleView"></el-button>
 						</el-tooltip>
@@ -41,13 +37,8 @@
 			<tree-view ref="treeViewRef" v-if="defaultTreeViewRef" />
 			<table-view ref="tableViewRef" v-if="!defaultTreeViewRef" />
 
-			<upload-excel
-				ref="excelUploadRef"
-				:title="$t('sysdept.importTip')"
-				url="/admin/dept/import"
-				temp-url="/admin/sys-file/local/file/dept.xlsx"
-				@refreshDataList="getDataList"
-			/>
+			<upload-excel ref="excelUploadRef" :title="$t('sysdept.importTip')" url="/admin/dept/import"
+				temp-url="/admin/sys-file/local/file/dept.xlsx" @refreshDataList="getDataList" />
 		</div>
 	</div>
 </template>
diff --git a/src/views/admin/system/menu/form.vue b/src/views/admin/system/menu/form.vue
index 0cf2666..2118ba8 100644
--- a/src/views/admin/system/menu/form.vue
+++ b/src/views/admin/system/menu/form.vue
@@ -157,11 +157,6 @@ const dataRules = reactive({
     required: true,
     message: '菜单不能为空',
     trigger: 'blur'
-  }, {
-    validator: (rule: any, value: any, callback: any) => {
-      validateExist(rule, value, callback, state.ruleForm.menuId !== '' || state.ruleForm.menuType === '1');
-    },
-    trigger: 'blur',
   }],
   path: [{validator: rule.overLength, trigger: 'blur'}, {required: true, message: '路径不能为空', trigger: 'blur'}],
   icon: [{validator: rule.overLength, trigger: 'blur'}, {required: true, message: '图标不能为空', trigger: 'blur'}],
diff --git a/src/views/admin/system/role/components/role-list.vue b/src/views/admin/system/role/components/role-list.vue
new file mode 100644
index 0000000..a76bea9
--- /dev/null
+++ b/src/views/admin/system/role/components/role-list.vue
@@ -0,0 +1,223 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row v-show="showSearch" shadow="hover" class="ml10">
+				<el-form ref="queryRef" :model="state.queryForm" :inline="true" @keyup.enter="getDataList">
+					<el-form-item :label="$t('sysrole.roleName')" prop="roleName">
+						<el-input v-model="state.queryForm.roleName" :placeholder="$t('sysrole.inputRoleNameTip')" />
+					</el-form-item>
+					<el-form-item>
+						<el-button icon="search" type="primary" @click="getDataList">
+							{{ $t('common.queryBtn') }}
+						</el-button>
+						<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+					</el-form-item>
+				</el-form>
+			</el-row>
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<template v-if="isRoleMode">
+						<el-button icon="folder-add" type="primary" class="ml10" v-auth="'sys_role_add'" @click="roleDialogRef.openDialog()">
+							{{ $t('common.addBtn') }}
+						</el-button>
+						<el-button plain icon="upload-filled" type="primary" class="ml10" v-auth="'sys_user_add'" @click="excelUploadRef.show()">
+							{{ $t('common.importBtn') }}
+						</el-button>
+						<el-button
+							plain
+							:disabled="multiple"
+							icon="Delete"
+							type="primary"
+							class="ml10"
+							v-auth="'sys_user_del'"
+							@click="handleDelete(selectObjs)"
+						>
+							{{ $t('common.delBtn') }}
+						</el-button>
+					</template>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="isRoleMode ? 'sys_role_export' : false"
+						class="ml10"
+						style="float: right; margin-right: 20px"
+						@exportExcel="exportExcel"
+						@queryTable="getDataList"
+					></right-toolbar>
+				</div>
+			</el-row>
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				style="width: 100%"
+				row-key="roleId"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="handleSelectionChange"
+			>
+				<el-table-column v-if="isRoleMode" type="selection" :selectable="handleSelectable" width="50" align="center" />
+				<el-table-column type="index" :label="$t('sysrole.index')" width="80" />
+				<el-table-column prop="roleName" :label="$t('sysrole.roleName')" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="roleCode" :label="$t('sysrole.roleCode')" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="roleDesc" :label="$t('sysrole.roleDesc')" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="data_authority" :label="$t('sysrole.data_authority')" show-overflow-tooltip>
+					<template #default="scope">
+						<dict-tag :options="dictType" :value="scope.row.dsType"></dict-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="createTime" :label="$t('sysrole.createTime')" show-overflow-tooltip></el-table-column>
+				<el-table-column :label="$t('common.action')" :width="isRoleMode ? 180 : 250">
+					<template #default="scope">
+						<el-button
+							v-if="isRoleMode"
+							text
+							type="primary"
+							icon="edit-pen"
+							v-auth="'sys_role_edit'"
+							@click="roleDialogRef.openDialog(scope.row.roleId)"
+						>
+							{{ $t('common.editBtn') }}
+						</el-button>
+
+						<el-button
+							v-if="!isRoleMode"
+							text
+							type="primary"
+							icon="turn-off"
+							v-auth="'sys_role_perm'"
+							@click="permessionRef.openDialog(scope.row)"
+						>
+							{{ $t('sysrole.permissionTip') }}
+						</el-button>
+
+						<el-button
+							v-if="!isRoleMode"
+							text
+							type="primary"
+							icon="edit-pen"
+							v-auth="'sys_role_edit'"
+							@click="roleDialogRef.openDialog(scope.row.roleId)"
+						>
+							{{ $t('sysrole.data_authority') }}
+						</el-button>
+
+						<el-tooltip
+							v-if="isRoleMode"
+							:content="$t('sysrole.deleteDisabledTip')"
+							:disabled="scope.row.roleId !== '1'"
+							placement="top"
+						>
+							<span style="margin-left: 12px">
+								<el-button
+									text
+									type="primary"
+									icon="delete"
+									:disabled="scope.row.roleId === '1'"
+									v-auth="'sys_role_del'"
+									@click="handleDelete([scope.row.roleId])"
+								>
+									{{ $t('common.delBtn') }}
+								</el-button>
+							</span>
+						</el-tooltip>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination v-bind="state.pagination" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" />
+		</div>
+
+		<!-- 角色编辑、新增 -->
+		<role-dialog ref="roleDialogRef" :mode="props.mode" @refresh="getDataList()" />
+		<!-- 导入角色 -->
+		<upload-excel
+			v-if="isRoleMode"
+			ref="excelUploadRef"
+			:title="$t('sysrole.importRoleTip')"
+			url="/admin/role/import"
+			temp-url="/admin/sys-file/local/file/role.xlsx"
+			@refreshDataList="getDataList"
+		/>
+		<!-- 授权 -->
+		<permession v-if="!isRoleMode" ref="permessionRef" />
+	</div>
+</template>
+
+<script setup lang="ts" name="systemRoleList">
+import { BasicTableProps, useTable } from '/@/hooks/table';
+import { pageList, delObj } from '/@/api/admin/role';
+import { useMessage, useMessageBox } from '/@/hooks/message';
+import { useI18n } from 'vue-i18n';
+
+const RoleDialog = defineAsyncComponent(() => import('../form.vue'));
+const Permession = defineAsyncComponent(() => import('../permession.vue'));
+const { t } = useI18n();
+
+const props = withDefaults(
+	defineProps<{
+		mode?: 'role' | 'permission';
+	}>(),
+	{
+		mode: 'role',
+	}
+);
+
+const isRoleMode = computed(() => props.mode === 'role');
+
+const roleDialogRef = ref();
+const permessionRef = ref();
+const excelUploadRef = ref();
+const queryRef = ref();
+const showSearch = ref(true);
+const selectObjs = ref<string[]>([]);
+const multiple = ref(true);
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {
+		roleName: '',
+	},
+	pageList,
+	descs: ['create_time'],
+});
+
+const dictType = ref([
+	{ label: '全部', value: '0' },
+	{ label: '自定义', value: '1' },
+	{ label: '本级及子级', value: '2' },
+	{ label: '本级', value: '3' },
+	{ label: '本人', value: '4' },
+]);
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);
+
+const resetQuery = () => {
+	queryRef.value.resetFields();
+	getDataList();
+};
+
+const exportExcel = () => {
+	downBlobFile('/admin/role/export', Object.assign(state.queryForm, { ids: selectObjs.value }), 'role.xlsx');
+};
+
+const handleSelectable = (row: any) => row.roleId !== '1';
+
+const handleSelectionChange = (objs: { roleId: string }[]) => {
+	selectObjs.value = objs.map(({ roleId }) => roleId);
+	multiple.value = !objs.length;
+};
+
+const handleDelete = async (ids: string[]) => {
+	try {
+		await useMessageBox().confirm(t('common.delConfirmText'));
+	} catch {
+		return;
+	}
+
+	try {
+		await delObj(ids);
+		getDataList();
+		useMessage().success(t('common.delSuccessText'));
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	}
+};
+</script>
diff --git a/src/views/admin/system/role/form.vue b/src/views/admin/system/role/form.vue
index 3a086d5..ebf7bf0 100644
--- a/src/views/admin/system/role/form.vue
+++ b/src/views/admin/system/role/form.vue
@@ -1,13 +1,19 @@
 <template>
-	<el-dialog :close-on-click-modal="false" :title="form.roleId ? $t('common.editBtn') : $t('common.addBtn')" width="600" draggable v-model="visible">
+	<el-dialog
+		:close-on-click-modal="false"
+		:title="permissionOnly ? $t('sysrole.data_authority') : form.roleId ? $t('common.editBtn') : $t('common.addBtn')"
+		width="600"
+		draggable
+		v-model="visible"
+	>
 		<el-form :model="form" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
-			<el-form-item :label="$t('sysrole.roleName')" prop="roleName">
+			<el-form-item v-if="!permissionOnly" :label="$t('sysrole.roleName')" prop="roleName">
 				<el-input :placeholder="$t('sysrole.please_enter_a_role_name')" clearable v-model="form.roleName"></el-input>
 			</el-form-item>
-			<el-form-item :label="$t('sysrole.roleCode')" prop="roleCode">
+			<el-form-item v-if="!permissionOnly" :label="$t('sysrole.roleCode')" prop="roleCode">
 				<el-input :placeholder="$t('sysrole.please_enter_the_role_Code')" :disabled="form.roleId !== ''" clearable v-model="form.roleCode"></el-input>
 			</el-form-item>
-			<el-form-item :label="$t('sysrole.roleDesc')" prop="roleDesc">
+			<el-form-item v-if="!permissionOnly" :label="$t('sysrole.roleDesc')" prop="roleDesc">
 				<el-input
 					maxlength="100"
 					:rows="3"
@@ -16,7 +22,7 @@
 					v-model="form.roleDesc"
 				></el-input>
 			</el-form-item>
-			<el-form-item :label="$t('sysrole.menu_authority')" prop="dsType">
+			<el-form-item :label="$t('sysrole.data_authority')" prop="dsType">
 				<el-select :placeholder="$t('sysrole.please_select')" clearable v-model="form.dsType">
 					<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in dictType" />
 				</el-select>
@@ -54,6 +60,17 @@ import { useI18n } from 'vue-i18n';
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['refresh']);
 
+const props = withDefaults(
+	defineProps<{
+		mode?: 'role' | 'permission';
+	}>(),
+	{
+		mode: 'role',
+	}
+);
+
+const permissionOnly = computed(() => props.mode === 'permission');
+
 const { t } = useI18n();
 
 // 定义变量内容
@@ -137,19 +154,30 @@ const dictType = ref([
 // 打开弹窗
 const openDialog = (id: string) => {
 	visible.value = true;
-	form.roleId = '';
+	loading.value = true;
+	Object.assign(form, {
+		roleId: '',
+		roleName: '',
+		roleCode: '',
+		roleDesc: '',
+		dsType: 0,
+		dsScope: '',
+	});
+	dataForm.checkedDsScope = [];
 
 	nextTick(() => {
-		dataFormRef.value.resetFields();
+		dataFormRef.value?.clearValidate();
 	});
 
-	// 获取角色信息
+	// 获取角色信息和部门树，完成后才允许提交
+	const requests = [getDeptData()];
 	if (id) {
 		form.roleId = id;
-		getRoleData(id);
+		requests.push(getRoleData(id));
 	}
-
-	getDeptData();
+	Promise.all(requests).finally(() => {
+		loading.value = false;
+	});
 };
 
 // 提交
@@ -179,8 +207,9 @@ const onSubmit = async () => {
 // 初始化角色数据
 const getRoleData = (id: string) => {
 	// 获取部门数据
-	getObj(id).then((res: any) => {
+	return getObj(id).then((res: any) => {
 		Object.assign(form, res.data);
+		form.dsType = Number.isFinite(Number(res.data.dsType)) ? Number(res.data.dsType) : 0;
 		if (res.data.dsScope) {
 			dataForm.checkedDsScope = res.data.dsScope.split(',');
 		} else {
@@ -191,7 +220,7 @@ const getRoleData = (id: string) => {
 
 // 获取菜单结构数据
 const getDeptData = () => {
-	deptTree().then((res: any) => {
+	return deptTree().then((res: any) => {
 		dataForm.deptData = res.data;
 	});
 };
diff --git a/src/views/admin/system/role/index.vue b/src/views/admin/system/role/index.vue
index abc21c0..858aa6b 100644
--- a/src/views/admin/system/role/index.vue
+++ b/src/views/admin/system/role/index.vue
@@ -1,197 +1,7 @@
 <template>
-	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<el-row shadow="hover" v-show="showSearch" class="ml10">
-				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-					<el-form-item :label="$t('sysrole.roleName')" prop="roleName">
-						<el-input :placeholder="$t('sysrole.inputRoleNameTip')" v-model="state.queryForm.roleName" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="search" type="primary" @click="getDataList">
-							{{ $t('common.queryBtn') }}
-						</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
-					</el-form-item>
-				</el-form>
-			</el-row>
-			<el-row>
-				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="roleDialogRef.openDialog()" v-auth="'sys_role_add'">
-						{{ $t('common.addBtn') }}
-					</el-button>
-					<el-button plain icon="upload-filled" type="primary" class="ml10" @click="excelUploadRef.show()" v-auth="'sys_user_add'">
-						{{ $t('common.importBtn') }}
-					</el-button>
-					<el-button plain :disabled="multiple" icon="Delete" type="primary" class="ml10" v-auth="'sys_user_del'" @click="handleDelete(selectObjs)">
-						{{ $t('common.delBtn') }}
-					</el-button>
-					<right-toolbar
-						v-model:showSearch="showSearch"
-						:export="'sys_role_export'"
-						@exportExcel="exportExcel"
-						class="ml10"
-						style="float: right; margin-right: 20px"
-						@queryTable="getDataList"
-					></right-toolbar>
-				</div>
-			</el-row>
-			<el-table
-				:data="state.dataList"
-				v-loading="state.loading"
-				style="width: 100%"
-        row-key="roleId"
-        @selection-change="handleSelectionChange"
-				border
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-			>
-				<el-table-column type="selection" :selectable="handleSelectable" width="50" align="center" />
-				<el-table-column type="index" :label="$t('sysrole.index')" width="80" />
-				<el-table-column prop="roleName" :label="$t('sysrole.roleName')" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="roleCode" :label="$t('sysrole.roleCode')" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="roleDesc" :label="$t('sysrole.roleDesc')" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="data_authority" :label="$t('sysrole.data_authority')" show-overflow-tooltip>
-					<template #default="scope">
-						<dict-tag :options="dictType" :value="scope.row.dsType"></dict-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="createTime" :label="$t('sysrole.createTime')" show-overflow-tooltip></el-table-column>
-				<el-table-column :label="$t('common.action')" width="250">
-					<template #default="scope">
-						<el-button text type="primary" icon="edit-pen" v-auth="'sys_role_edit'" @click="roleDialogRef.openDialog(scope.row.roleId)">{{
-							$t('common.editBtn')
-						}}</el-button>
-
-						<el-button text type="primary" icon="turn-off" v-auth="'sys_role_perm'" @click="permessionRef.openDialog(scope.row)">{{
-							$t('sysrole.permissionTip')
-						}}</el-button>
-
-						<el-tooltip :content="$t('sysrole.deleteDisabledTip')" :disabled="scope.row.roleId !== '1'" placement="top">
-							<span style="margin-left: 12px">
-								<el-button
-									text
-									type="primary"
-									icon="delete"
-									:disabled="scope.row.roleId === '1'"
-									v-auth="'sys_role_del'"
-									@click="handleDelete([scope.row.roleId])"
-									>{{ $t('common.delBtn') }}
-								</el-button>
-							</span>
-						</el-tooltip>
-					</template>
-				</el-table-column>
-			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-		</div>
-
-		<!-- 角色编辑、新增  -->
-		<role-dialog ref="roleDialogRef" @refresh="getDataList()" />
-		<!-- 导入角色 -->
-		<upload-excel
-			ref="excelUploadRef"
-			:title="$t('sysrole.importRoleTip')"
-			url="/admin/role/import"
-			temp-url="/admin/sys-file/local/file/role.xlsx"
-			@refreshDataList="getDataList"
-		/>
-		<!-- 授权 -->
-		<permession ref="permessionRef" />
-	</div>
+	<role-list mode="role" />
 </template>
 
 <script setup lang="ts" name="systemRole">
-import { BasicTableProps, useTable } from '/@/hooks/table';
-import { pageList, delObj } from '/@/api/admin/role';
-import { useMessage, useMessageBox } from '/@/hooks/message';
-import { useI18n } from 'vue-i18n';
-
-// 引入组件
-const RoleDialog = defineAsyncComponent(() => import('./form.vue'));
-const Permession = defineAsyncComponent(() => import('./permession.vue'));
-const { t } = useI18n();
-
-// 定义变量内容
-const roleDialogRef = ref();
-const permessionRef = ref();
-const excelUploadRef = ref();
-const queryRef = ref();
-const showSearch = ref(true);
-// 多选rows
-const selectObjs = ref([]) as any;
-// 是否可以多选
-const multiple = ref(true);
-
-const state: BasicTableProps = reactive<BasicTableProps>({
-	queryForm: {
-		roleName: '',
-	},
-	pageList: pageList, // H
-	descs: ['create_time'],
-});
-
-const dictType = ref([
-	{
-		label: '全部',
-		value: '0',
-	},
-	{
-		label: '自定义',
-		value: '1',
-	},
-	{
-		label: '本级及子级',
-		value: '2',
-	},
-	{
-		label: '本级',
-		value: '3',
-	},
-  {
-    label: '本人',
-    value: '4',
-  },
-]);
-
-//  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);
-
-// 清空搜索条件
-const resetQuery = () => {
-	queryRef.value.resetFields();
-	getDataList();
-};
-
-// 导出excel
-const exportExcel = () => {
-	downBlobFile('/admin/role/export',Object.assign(state.queryForm,{ids:selectObjs}), 'role.xlsx');
-};
-
-// 是否可以多选
-const handleSelectable = (row: any) => {
-	return row.roleId !== '1';
-};
-
-// 多选事件
-const handleSelectionChange = (objs: { roleId: string }[]) => {
-	selectObjs.value = objs.map(({ roleId }) => roleId);
-	multiple.value = !objs.length;
-};
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-	try {
-		await useMessageBox().confirm(t('common.delConfirmText'));
-	} catch {
-		return;
-	}
-
-	try {
-		await delObj(ids);
-		getDataList();
-		useMessage().success(t('common.delSuccessText'));
-	} catch (err: any) {
-		useMessage().error(err.msg);
-	}
-};
+import RoleList from './components/role-list.vue';
 </script>
diff --git a/src/views/admin/system/role/role-permission.vue b/src/views/admin/system/role/role-permission.vue
new file mode 100644
index 0000000..5dc59bc
--- /dev/null
+++ b/src/views/admin/system/role/role-permission.vue
@@ -0,0 +1,7 @@
+<template>
+	<role-list mode="permission" />
+</template>
+
+<script setup lang="ts" name="systemRolePermission">
+import RoleList from './components/role-list.vue';
+</script>
diff --git a/src/views/admin/system/user/components/user-list.vue b/src/views/admin/system/user/components/user-list.vue
new file mode 100644
index 0000000..cbcbe3b
--- /dev/null
+++ b/src/views/admin/system/user/components/user-list.vue
@@ -0,0 +1,255 @@
+<template>
+	<div class="layout-padding">
+		<draggable-dept-tree
+			ref="draggableDepTreeRef"
+			placeholder="请输入部门名称"
+			:show-expand="true"
+			switch-inactive-text="包含"
+			switch-active-text="不包含"
+			:defaultTreeWidth="15"
+			:nodeClickable="false"
+			@getSelectNode="handleGetSelectNode"
+		>
+			<div class="layout-padding-auto layout-padding-view">
+				<el-row v-show="showSearch">
+					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+						<el-form-item :label="$t('sysuser.username')" prop="username">
+							<el-input v-model="state.queryForm.username" :placeholder="$t('sysuser.inputUsernameTip')" clearable />
+						</el-form-item>
+						<el-form-item :label="$t('sysuser.phone')" prop="phone">
+							<el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')" clearable />
+						</el-form-item>
+						<el-form-item>
+							<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
+							<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+						</el-form-item>
+					</el-form>
+				</el-row>
+				<el-row>
+					<div class="mb8" style="width: 100%">
+						<template v-if="isUserMode">
+							<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary" @click="userDialogRef.openDialog()">
+								{{ $t('common.addBtn') }}
+							</el-button>
+							<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary" @click="excelUploadRef.show()">
+								{{ $t('common.importBtn') }}
+							</el-button>
+							<el-button
+								plain
+								v-auth="'sys_user_del'"
+								:disabled="multiple"
+								class="ml10"
+								icon="Delete"
+								type="primary"
+								@click="handleDelete(selectObjs)"
+							>
+								{{ $t('common.delBtn') }}
+							</el-button>
+						</template>
+
+						<right-toolbar
+							v-model:showSearch="showSearch"
+							:export="isUserMode ? 'sys_user_export' : false"
+							class="ml10 mr20"
+							style="float: right"
+							@exportExcel="exportExcel"
+							@queryTable="getDataList"
+						/>
+					</div>
+				</el-row>
+				<el-table
+					v-loading="state.loading"
+					:data="state.dataList"
+					row-key="userId"
+					border
+					:cell-style="tableStyle.cellStyle"
+					:header-cell-style="tableStyle.headerCellStyle"
+					@selection-change="handleSelectionChange"
+				>
+					<el-table-column v-if="isUserMode" :selectable="handleSelectable" type="selection" width="40" />
+					<el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" />
+					<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left" show-overflow-tooltip></el-table-column>
+					<el-table-column :label="$t('sysuser.name')" prop="name" show-overflow-tooltip></el-table-column>
+					<el-table-column :label="$t('sysuser.phone')" prop="phone" show-overflow-tooltip></el-table-column>
+					<el-table-column :label="$t('sysuser.post')" show-overflow-tooltip>
+						<template #default="scope">
+							<el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName }}</el-tag>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('sysuser.role')" show-overflow-tooltip>
+						<template #default="scope">
+							<el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName }}</el-tag>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('sysuser.lockFlag')" show-overflow-tooltip>
+						<template #default="scope">
+							<el-switch
+								v-model="scope.row.lockFlag"
+								:disabled="!isUserMode"
+								active-value="0"
+								inactive-value="9"
+								@change="changeSwitch(scope.row)"
+							></el-switch>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('common.action')" :width="isUserMode ? 200 : 140" fixed="right">
+						<template #default="scope">
+							<div v-if="isUserMode" style="display: flex">
+								<popover-input v-model="inputPassword" @confirm="changePassword(scope.row)">
+									<template #default>
+										<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary" class="mr-4">
+											{{ $t('sysuser.passwordBtn') }}
+										</el-button>
+									</template>
+								</popover-input>
+								<el-button v-auth="'sys_user_edit'" icon="edit-pen" text type="primary" @click="userDialogRef.openDialog(scope.row.userId)">
+									{{ $t('common.editBtn') }}
+								</el-button>
+								<el-tooltip :content="$t('sysuser.deleteDisabledTip')" :disabled="scope.row.userId !== '1'" placement="top">
+									<span style="margin-left: 12px">
+										<el-button
+											icon="delete"
+											v-auth="'sys_user_del'"
+											:disabled="scope.row.username === 'admin'"
+											text
+											type="primary"
+											@click="handleDelete([scope.row.userId])"
+										>
+											{{ $t('common.delBtn') }}
+										</el-button>
+									</span>
+								</el-tooltip>
+							</div>
+							<el-button
+								v-else
+								v-auth="'sys_user_edit'"
+								icon="UserFilled"
+								text
+								type="primary"
+								@click="userDialogRef.openDialog(scope.row.userId)"
+							>
+								{{ $t('sysuser.assignRoleBtn') }}
+							</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+				<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"></pagination>
+			</div>
+		</draggable-dept-tree>
+
+		<user-form ref="userDialogRef" :mode="props.mode" :dept-id="state.queryForm.deptId" @refresh="getDataList(false)" />
+		<upload-excel
+			v-if="isUserMode"
+			ref="excelUploadRef"
+			:title="$t('sysuser.importUserTip')"
+			temp-url="/admin/sys-file/local/file/user.xlsx"
+			url="/admin/user/import"
+			@refreshDataList="getDataList"
+		/>
+	</div>
+</template>
+
+<script lang="ts" name="systemUserList" setup>
+import { delObj, pageList, putObj } from '/@/api/admin/user';
+import { BasicTableProps, useTable } from '/@/hooks/table';
+import { useMessage, useMessageBox } from '/@/hooks/message';
+import { useI18n } from 'vue-i18n';
+
+const UserForm = defineAsyncComponent(() => import('../form.vue'));
+const PopoverInput = defineAsyncComponent(() => import('/@/components/PopoverInput/index.vue'));
+
+const props = withDefaults(
+	defineProps<{
+		mode?: 'user' | 'role';
+	}>(),
+	{
+		mode: 'user',
+	}
+);
+
+const isUserMode = computed(() => props.mode === 'user');
+const { t } = useI18n();
+
+const userDialogRef = ref();
+const excelUploadRef = ref();
+const queryRef = ref();
+const showSearch = ref(true);
+const inputPassword = ref();
+const draggableDepTreeRef = ref();
+const selectObjs = ref<string[]>([]);
+const multiple = ref(true);
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {
+		deptId: '',
+		username: '',
+		phone: '',
+	},
+	pageList,
+});
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);
+
+const resetQuery = () => {
+	queryRef.value?.resetFields();
+	state.queryForm.deptId = '';
+	state.queryForm.deptCodes = [];
+	draggableDepTreeRef.value?.resetData();
+	getDataList();
+};
+
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+	state.queryForm.deptId = curClickedNode.id;
+	state.queryForm.deptCodes = checkedTreeNodes.map((item: any) => item.id);
+	state.queryForm.isInclude = !isDeepTree;
+	getDataList();
+};
+
+const exportExcel = () => {
+	downBlobFile('/admin/user/export', Object.assign(state.queryForm, { ids: selectObjs.value }), 'users.xlsx');
+};
+
+const handleSelectable = (row: any) => row.username !== 'admin';
+
+const handleSelectionChange = (objs: { userId: string }[]) => {
+	selectObjs.value = objs.map(({ userId }) => userId);
+	multiple.value = !objs.length;
+};
+
+const handleDelete = async (ids: string[]) => {
+	try {
+		await useMessageBox().confirm(t('common.delConfirmText'));
+	} catch {
+		return;
+	}
+
+	try {
+		await delObj(ids);
+		getDataList();
+		useMessage().success(t('common.delSuccessText'));
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	}
+};
+
+const changeSwitch = async (row: any) => {
+	if (!isUserMode.value) return;
+	row.password = undefined;
+	row.phone = undefined;
+	await putObj(row);
+	useMessage().success(t('common.optSuccessText'));
+	getDataList();
+};
+
+const changePassword = async (row: any) => {
+	if (!inputPassword.value || inputPassword.value.length < 6 || inputPassword.value.length > 20) {
+		useMessage().error(t('sysuser.inputPasswordTip'));
+		return;
+	}
+	row.phone = undefined;
+	row.password = inputPassword.value;
+	await putObj(row);
+	useMessage().success(t('common.optSuccessText'));
+	getDataList();
+};
+</script>
diff --git a/src/views/admin/system/user/form.vue b/src/views/admin/system/user/form.vue
index 299a636..cd0d300 100644
--- a/src/views/admin/system/user/form.vue
+++ b/src/views/admin/system/user/form.vue
@@ -1,35 +1,43 @@
 <template>
 	<div class="system-user-dialog-container">
-		<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" draggable v-model="visible">
+		<el-dialog
+			:close-on-click-modal="false"
+			:title="roleOnly ? $t('sysuser.assignRoleBtn') : dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
+			draggable
+			v-model="visible"
+		>
 			<el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
 				<el-row :gutter="20">
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.username')" prop="username">
-							<el-input :disabled="dataForm.userId !== ''" placeholder="请输入用户名" v-model="dataForm.username"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.password')" prop="password">
-							<el-input clearable placeholder="请输入密码" type="password" v-model="dataForm.password"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.name')" prop="name">
-							<el-input clearable placeholder="请输入姓名" v-model="dataForm.name"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.phone')" prop="phone">
-							<el-input clearable placeholder="请输入手机号" v-model="dataForm.phone"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
+					<template v-if="!roleOnly">
+						<el-col :span="12" class="mb20">
+							<el-form-item :label="$t('sysuser.username')" prop="username">
+								<el-input :disabled="dataForm.userId !== ''" placeholder="请输入用户名" v-model="dataForm.username"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="12" class="mb20">
+							<el-form-item :label="$t('sysuser.password')" prop="password">
+								<el-input clearable placeholder="请输入密码" type="password" v-model="dataForm.password"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="12" class="mb20">
+							<el-form-item :label="$t('sysuser.name')" prop="name">
+								<el-input clearable placeholder="请输入姓名" v-model="dataForm.name"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="12" class="mb20">
+							<el-form-item :label="$t('sysuser.phone')" prop="phone">
+								<el-input clearable placeholder="请输入手机号" v-model="dataForm.phone"></el-input>
+							</el-form-item>
+						</el-col>
+					</template>
+					<el-col :span="roleOnly ? 24 : 12" class="mb20">
 						<el-form-item :label="$t('sysuser.role')" prop="role">
 							<el-select clearable multiple placeholder="请选择角色" v-model="dataForm.role">
 								<el-option :key="item.roleId" :label="item.roleName" :value="item.roleId" v-for="item in roleData" />
 							</el-select>
 						</el-form-item>
 					</el-col>
+					<template v-if="!roleOnly">
 					<el-col :span="12" class="mb20">
 						<el-form-item :label="$t('sysuser.post')" prop="post">
 							<el-select clearable multiple placeholder="请选择岗位" v-model="dataForm.post">
@@ -69,6 +77,7 @@
 							</el-radio-group>
 						</el-form-item>
 					</el-col>
+					</template>
 				</el-row>
 			</el-form>
 			<template #footer>
@@ -106,12 +115,18 @@ const roleData = ref<any[]>([]);
 const postData = ref<any[]>([]);
 const loading = ref(false);
 
-const props = defineProps({
-  deptId: {
-    type: String,
-    default: '',
-  }
-});
+const props = withDefaults(
+	defineProps<{
+		deptId?: string;
+		mode?: 'user' | 'role';
+	}>(),
+	{
+		deptId: '',
+		mode: 'user',
+	}
+);
+
+const roleOnly = computed(() => props.mode === 'role');
 
 const dataForm = reactive({
 	userId: '',
@@ -180,24 +195,45 @@ const dataRules = ref({
 // 打开弹窗
 const openDialog = async (id: string) => {
 	visible.value = true;
-	dataForm.userId = '';
-
-	// 重置表单数据
-	nextTick(() => {
-		dataFormRef.value?.resetFields();
+	loading.value = true;
+	Object.assign(dataForm, {
+		userId: '',
+		username: '',
+		password: '',
+		salt: '',
+		wxOpenid: '',
+		qqOpenid: '',
+		lockFlag: '0',
+		phone: '',
+		deptId: '',
+		roleList: [],
+		postList: [],
+		nickname: '',
+		name: '',
+		email: '',
+		post: [],
+		role: [],
 	});
 
-	// 修改获取用户信息
-	if (id) {
-		dataForm.userId = id;
-		await getUserData(id);
-		dataForm.password = '******';
-	}
+	nextTick(() => {
+		dataFormRef.value?.clearValidate();
+	});
 
-	// 加载使用的数据
-	getDeptData();
-	getPostData();
-	getRoleData();
+	try {
+		if (id) {
+			dataForm.userId = id;
+			await getUserData(id);
+			if (!roleOnly.value) dataForm.password = '******';
+		}
+
+		if (roleOnly.value) {
+			await getRoleData();
+		} else {
+			await Promise.all([getDeptData(), getPostData(), getRoleData()]);
+		}
+	} finally {
+		loading.value = false;
+	}
 };
 
 // 提交
@@ -209,6 +245,15 @@ const onSubmit = async () => {
 		const { userId, phone, password } = dataForm;
 
 		if (userId) {
+			if (roleOnly.value) {
+				loading.value = true;
+				await putObj({ userId, username: dataForm.username, role: dataForm.role });
+				useMessage().success(t('common.editSuccessText'));
+				visible.value = false;
+				emit('refresh');
+				return;
+			}
+
 			// 清除占位符，避免提交错误的数据
 			if (phone?.includes('*')) dataForm.phone = undefined;
 			if (password?.includes('******')) dataForm.password = undefined;
@@ -241,7 +286,6 @@ const onSubmit = async () => {
  */
 const getUserData = async (id: string) => {
 	try {
-		loading.value = true;
 		const { data } = await getObj(id);
 		Object.assign(dataForm, data);
 		if (data.roleList) {
@@ -252,15 +296,13 @@ const getUserData = async (id: string) => {
 		}
 	} catch (err: any) {
 		useMessage().error(err.msg);
-	} finally {
-		loading.value = false;
 	}
 };
 
 // 初始化部门数据
 const getDeptData = () => {
 	// 获取部门数据
-	deptTree().then((res) => {
+	return deptTree().then((res) => {
 		deptData.value = res.data;
 		// 默认选择在树中选中的部门
     if (!dataForm.userId) {
@@ -271,7 +313,7 @@ const getDeptData = () => {
 
 // 岗位数据
 const getPostData = () => {
-	postList().then((res) => {
+	return postList().then((res) => {
 		postData.value = res.data;
 		// 默认选择第一个
     if (!dataForm.userId) {
@@ -281,7 +323,7 @@ const getPostData = () => {
 };
 // 角色数据
 const getRoleData = () => {
-	roleList().then((res) => {
+	return roleList().then((res) => {
 		roleData.value = res.data;
 		// 默认选择第一个
     if (!dataForm.userId) {
diff --git a/src/views/admin/system/user/i18n/en.ts b/src/views/admin/system/user/i18n/en.ts
index c1899ed..34e7255 100644
--- a/src/views/admin/system/user/i18n/en.ts
+++ b/src/views/admin/system/user/i18n/en.ts
@@ -20,6 +20,7 @@ export default {
 		deleteDisabledTip: 'admin are not allowed to delete',
 		noDataScopeTip: 'no data permissions',
 		passwordBtn: 'password',
+		assignRoleBtn: 'assign roles',
 	},
 	personal: {
 		name: 'personal info',
diff --git a/src/views/admin/system/user/i18n/zh-cn.ts b/src/views/admin/system/user/i18n/zh-cn.ts
index df7ffec..4459f53 100644
--- a/src/views/admin/system/user/i18n/zh-cn.ts
+++ b/src/views/admin/system/user/i18n/zh-cn.ts
@@ -20,6 +20,7 @@ export default {
 		deleteDisabledTip: 'admin 不允许被删除',
 		noDataScopeTip: '没有数据权限',
 		passwordBtn: '密码',
+		assignRoleBtn: '分配角色',
 	},
 	personal: {
 		name: '个人信息',
diff --git a/src/views/admin/system/user/index.vue b/src/views/admin/system/user/index.vue
index fb0ad32..55999e1 100644
--- a/src/views/admin/system/user/index.vue
+++ b/src/views/admin/system/user/index.vue
@@ -1,240 +1,7 @@
 <template>
-	<div class="layout-padding">
-		<draggable-dept-tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-			@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-			:defaultTreeWidth="15" :nodeClickable="false">
-			<div class="layout-padding-auto layout-padding-view">
-				<el-row v-show="showSearch">
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-						<el-form-item :label="$t('sysuser.username')" prop="username">
-							<el-input v-model="state.queryForm.username" :placeholder="$t('sysuser.inputUsernameTip')"
-								clearable />
-						</el-form-item>
-						<el-form-item :label="$t('sysuser.phone')" prop="phone">
-							<el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')"
-								clearable />
-						</el-form-item>
-						<el-form-item>
-							<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn')
-							}}</el-button>
-							<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
-						</el-form-item>
-					</el-form>
-				</el-row>
-				<el-row>
-					<div class="mb8" style="width: 100%">
-						<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary"
-							@click="userDialogRef.openDialog()">
-							{{ $t('common.addBtn') }}
-						</el-button>
-						<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary"
-							@click="excelUploadRef.show()">
-							{{ $t('common.importBtn') }}
-						</el-button>
-
-						<el-button plain v-auth="'sys_user_del'" :disabled="multiple" class="ml10" icon="Delete"
-							type="primary" @click="handleDelete(selectObjs)">
-							{{ $t('common.delBtn') }}
-						</el-button>
-
-						<right-toolbar v-model:showSearch="showSearch" :export="'sys_user_export'"
-							@exportExcel="exportExcel" @queryTable="getDataList" class="ml10 mr20"
-							style="float: right" />
-					</div>
-				</el-row>
-				<el-table v-loading="state.loading" :data="state.dataList" @selection-change="handleSelectionChange"
-					row-key="userId" border :cell-style="tableStyle.cellStyle"
-					:header-cell-style="tableStyle.headerCellStyle">
-					<el-table-column :selectable="handleSelectable" type="selection" width="40" />
-					<el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" />
-					<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left"
-						show-overflow-tooltip></el-table-column>
-					<el-table-column :label="$t('sysuser.name')" prop="name" show-overflow-tooltip></el-table-column>
-					<el-table-column :label="$t('sysuser.phone')" prop="phone" show-overflow-tooltip></el-table-column>
-					<el-table-column :label="$t('sysuser.post')" show-overflow-tooltip>
-						<template #default="scope">
-							<el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName
-							}}</el-tag>
-						</template>
-					</el-table-column>
-					<el-table-column :label="$t('sysuser.role')" show-overflow-tooltip>
-						<template #default="scope">
-							<el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName
-							}}</el-tag>
-						</template>
-					</el-table-column>
-					<el-table-column :label="$t('sysuser.lockFlag')" show-overflow-tooltip>
-						<template #default="scope">
-							<el-switch v-model="scope.row.lockFlag" @change="changeSwitch(scope.row)" active-value="0"
-								inactive-value="9"></el-switch>
-						</template>
-					</el-table-column>
-					<el-table-column :label="$t('common.action')" width="200" fixed="right">
-						<template #default="scope">
-							<div style="display: flex">
-								<!-- 重置密码 -->
-								<popover-input v-model="inputPassword" @confirm="changePassword(scope.row)">
-									<template #default>
-										<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary"
-											class="mr-4">
-											{{ $t('sysuser.passwordBtn') }}
-										</el-button>
-									</template>
-								</popover-input>
-								<!-- 修改信息 -->
-								<el-button v-auth="'sys_user_edit'" icon="edit-pen" text type="primary"
-									@click="userDialogRef.openDialog(scope.row.userId)">
-									{{ $t('common.editBtn') }}
-								</el-button>
-								<!-- 删除用户 -->
-								<el-tooltip :content="$t('sysuser.deleteDisabledTip')"
-									:disabled="scope.row.userId !== '1'" placement="top">
-									<span style="margin-left: 12px">
-										<el-button icon="delete" v-auth="'sys_user_del'"
-											:disabled="scope.row.username === 'admin'" text type="primary"
-											@click="handleDelete([scope.row.userId])">{{ $t('common.delBtn') }}
-										</el-button>
-									</span>
-								</el-tooltip>
-							</div>
-						</template>
-					</el-table-column>
-				</el-table>
-				<pagination v-bind="state.pagination" @current-change="currentChangeHandle"
-					@size-change="sizeChangeHandle">
-				</pagination>
-			</div>
-		</draggable-dept-tree>
-		<user-form ref="userDialogRef" @refresh="getDataList(false)" :deptId="state.queryForm.deptId" />
-		<upload-excel ref="excelUploadRef" :title="$t('sysuser.importUserTip')"
-			temp-url="/admin/sys-file/local/file/user.xlsx" url="/admin/user/import" @refreshDataList="getDataList" />
-	</div>
+	<user-list mode="user" />
 </template>
 
 <script lang="ts" name="systemUser" setup>
-import { delObj, pageList, putObj } from '/@/api/admin/user';
-import { deptTree } from '/@/api/admin/dept';
-import { BasicTableProps, useTable } from '/@/hooks/table';
-import { useMessage, useMessageBox } from '/@/hooks/message';
-import { useI18n } from 'vue-i18n';
-
-// 动态引入组件
-const UserForm = defineAsyncComponent(() => import('./form.vue'));
-const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'));
-const PopoverInput = defineAsyncComponent(() => import('/@/components/PopoverInput/index.vue'));
-
-const { t } = useI18n();
-
-// 定义变量内容
-const userDialogRef = ref();
-const excelUploadRef = ref();
-const queryRef = ref();
-const showSearch = ref(true);
-const inputPassword = ref();
-const draggableDepTreeRef = ref()
-
-// 多选rows
-const selectObjs = ref([]) as any;
-// 是否可以多选
-const multiple = ref(true);
-
-// 定义表格查询、后台调用的API
-const state: BasicTableProps = reactive<BasicTableProps>({
-	queryForm: {
-		deptId: '',
-		username: '',
-		phone: '',
-	},
-	pageList: pageList,
-});
-const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);
-
-// 部门树使用的数据
-const deptData = reactive({
-	queryList: (name: String) => {
-		return deptTree({
-			deptName: name,
-		});
-	},
-});
-
-// 清空搜索条件
-const resetQuery = () => {
-	queryRef.value?.resetFields();
-	state.queryForm.deptId = '';
-	// 清空树状选择
-	state.queryForm.deptId = ""
-	state.queryForm.deptCodes = []
-	draggableDepTreeRef.value.resetData()
-	getDataList();
-};
-
-// 树节点选择时
-const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
-	state.queryForm.deptId = curClickedNode.id
-	state.queryForm.deptCodes = checkedTreeNodes.map((item: any) => item.id)
-	state.queryForm.isInclude = !isDeepTree
-	getDataList()
-}
-
-// 点击树
-const handleNodeClick = (e: any) => {
-	state.queryForm.deptId = e.id;
-	getDataList();
-};
-
-// 导出excel
-const exportExcel = () => {
-	downBlobFile('/admin/user/export', Object.assign(state.queryForm, { ids: selectObjs }), 'users.xlsx');
-};
-
-// 是否可以多选
-const handleSelectable = (row: any) => {
-	return row.username !== 'admin';
-};
-
-// 多选事件
-const handleSelectionChange = (objs: { userId: string }[]) => {
-	selectObjs.value = objs.map(({ userId }) => userId);
-	multiple.value = !objs.length;
-};
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-	try {
-		await useMessageBox().confirm(t('common.delConfirmText'));
-	} catch {
-		return;
-	}
-	try {
-		await delObj(ids);
-		getDataList();
-		useMessage().success(t('common.delSuccessText'));
-	} catch (err: any) {
-		useMessage().error(err.msg);
-	}
-};
-
-//表格内开关 (用户状态)
-const changeSwitch = async (row: any) => {
-	// 不修改密码
-	row.password = undefined;
-	row.phone = undefined;
-	await putObj(row);
-	useMessage().success(t('common.optSuccessText'));
-	getDataList();
-};
-
-//修改用户密码
-const changePassword = async (row: any) => {
-	if (!inputPassword.value || inputPassword.value.length < 6 || inputPassword.value.length > 20) {
-		useMessage().error(t('sysuser.inputPasswordTip'));
-		return;
-	}
-	row.phone = undefined;
-	row.password = inputPassword.value;
-	await putObj(row);
-	useMessage().success(t('common.optSuccessText'));
-	getDataList();
-};
+import UserList from './components/user-list.vue';
 </script>
diff --git a/src/views/admin/system/user/user-role.vue b/src/views/admin/system/user/user-role.vue
new file mode 100644
index 0000000..f9964c6
--- /dev/null
+++ b/src/views/admin/system/user/user-role.vue
@@ -0,0 +1,7 @@
+<template>
+	<user-list mode="role" />
+</template>
+
+<script lang="ts" name="systemUserRole" setup>
+import UserList from './components/user-list.vue';
+</script>
diff --git a/src/views/alarm/alarm-record/index.vue b/src/views/alarm/alarm-record/index.vue
index fcd8eef..6ebfcb8 100644
--- a/src/views/alarm/alarm-record/index.vue
+++ b/src/views/alarm/alarm-record/index.vue
@@ -138,6 +138,38 @@ const resetQuery = () => {
   getDataList()
 }
 
+/**
+ * 解析统计页传入的查询条件，仅合并告警列表支持的字段。
+ * URL 参数属于外部输入，解析失败时回退为空对象，避免阻断列表初始化。
+ */
+const parseAdminQueryParams = (params: unknown) => {
+  if (!params) return {}
+
+  try {
+    const rawParams = Array.isArray(params) ? params[0] : params
+    const parsed = typeof rawParams === 'string' ? JSON.parse(rawParams) : rawParams
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
+
+    const supportedKeys = [
+      'alarmCode',
+      'deviceName',
+      'alarmTypeList',
+      'alarmPosition',
+      'handleStat',
+      'alarmGrade',
+      'alarmDateList',
+    ] as const
+    return supportedKeys.reduce((result, key) => {
+      const value = (parsed as Record<string, unknown>)[key]
+      if (value !== undefined && value !== null && value !== '') result[key] = value
+      return result
+    }, {} as Record<string, unknown>)
+  } catch {
+    useMessage().warning('统计页筛选条件无效，已使用默认查询条件')
+    return {}
+  }
+}
+
 onBeforeMount(() => {
   const query: any = useRoute().query
   if (query && query.action == 'panel') {
@@ -147,6 +179,10 @@ onBeforeMount(() => {
     }
     storesPanel.openFromPanel()
   }
+  // 统计页使用普通后台路由，不打开或关闭大屏面板状态。
+  if (query && query.action == 'admin') {
+    Object.assign(state.queryForm, parseAdminQueryParams(query.params))
+  }
 })
 
 onBeforeUnmount(() => {
diff --git a/src/views/area/_components/areaHouseForm.vue b/src/views/area/_components/areaHouseForm.vue
index 8818a75..ecd9104 100644
--- a/src/views/area/_components/areaHouseForm.vue
+++ b/src/views/area/_components/areaHouseForm.vue
@@ -4,7 +4,7 @@
       <el-row :gutter="24">
         <el-col :span="24" class="mb20">
           <el-form-item label="空间" prop="areaId">
-            <select-area v-model="form.areaId" placeholder="请选择空间" />
+            <select-area v-model="form.areaId" :disabled="areaLocked" placeholder="请选择空间" />
           </el-form-item>
         </el-col>
         <el-col :span="24" class="mb20">
@@ -85,6 +85,7 @@ const emit = defineEmits(['refresh']);
 const dataFormRef = ref();
 const visible = ref(false)
 const loading = ref(false)
+const areaLocked = ref(false)
 // 定义字典
 const { dh_house_type } = useDict('dh_house_type')
 // 提交表单数据
@@ -115,17 +116,20 @@ const dataRules = ref({
 })
 
 // 打开弹窗
-const openDialog = (id: string) => {
+const openDialog = async (id?: string, areaId?: string, lockArea = false) => {
   visible.value = true
+  areaLocked.value = lockArea
   form.id = ''
   // 重置表单数据
-  nextTick(() => {
-    dataFormRef.value?.resetFields();
-  });
+  await nextTick();
+  dataFormRef.value?.resetFields();
+  dataFormRef.value?.clearValidate();
   // 获取areaHouse信息
   if (id) {
     form.id = id
     getareaHouseData(id)
+  } else {
+    form.areaId = areaId || ''
   }
 };
 
@@ -163,4 +167,4 @@ const getareaHouseData = (id: string) => {
 defineExpose({
   openDialog
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/area/_components/areaHouseList.vue b/src/views/area/_components/areaHouseList.vue
new file mode 100644
index 0000000..ed6c9e5
--- /dev/null
+++ b/src/views/area/_components/areaHouseList.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-row shadow="hover" v-show="showSearch" class="ml10">
+        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+          <el-form-item style="width: 250px;" label="空间编码" prop="areaUniqueCode">
+            <el-input v-model="state.queryForm.areaUniqueCode" placeholder="请输入空间编码" />
+          </el-form-item>
+          <el-form-item style="width: 250px;" label="空间名" prop="areaName">
+            <el-input v-model="state.queryForm.areaName" placeholder="请输入空间名" />
+          </el-form-item>
+          <el-form-item style="width: 250px;" label="房间名" prop="name">
+            <el-input v-model="state.queryForm.name" placeholder="请输入房间名" />
+          </el-form-item>
+          <el-form-item style="width: 250px;" label="空间类型" prop="areaBizType">
+            <dict-select v-model="state.queryForm.areaBizType" :options="dh_build_type" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="search" type="primary" @click="getDataList">
+              {{ $t('common.queryBtn') }}
+            </el-button>
+            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+            v-auth="'area_areaHouse_add'">
+            新 增
+          </el-button>
+          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'area_areaHouse_del'"
+            @click="handleDelete(selectObjs)">
+            删除
+          </el-button>
+          <right-toolbar v-model:showSearch="showSearch" :export="'area_areaHouse_export'" @exportExcel="exportExcel"
+            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+        @sort-change="sortChangeHandle">
+        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column type="index" label="#" width="80" />
+        <el-table-column prop="areaName" label="空间名" />
+        <el-table-column prop="areaUniqueCode" label="空间编码" />
+        <el-table-column prop="areaBizType" width="100" label="空间类型">
+          <template #default="{ row }">
+            <dict-tag :options="dh_build_type" :value="row.areaBizType" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="房屋名" />
+        <el-table-column prop="houseCode" label="房号" />
+        <el-table-column prop="noFloor" label="楼层">
+          <template #default="{ row }">
+            {{ row.noFloor }}楼
+          </template>
+        </el-table-column>
+        <el-table-column prop="bizType" label="类型">
+          <template #default="{ row }">
+            <dict-tag :options="dh_house_type" :value="row.bizType" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="memo" label="备注" show-overflow-tooltip />
+        <el-table-column prop="sortOrder" label="排序" />
+        <el-table-column label="操作" width="240">
+          <template #default="{ row }">
+            <el-button icon="CameraFilled" text type="primary" v-auth="'area_areaHouse_edit'"
+              @click="bindCameraTableDialogRef.openDialog(row.id)">绑定相机</el-button>
+            <el-button icon="edit-pen" text type="primary" v-auth="'area_areaHouse_edit'"
+              @click="formDialogRef.openDialog(row.id)">编辑</el-button>
+            <el-button icon="delete" text type="primary" v-auth="'area_areaHouse_del'"
+              @click="handleDelete([row.id])">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </div>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+    <bind-camera-table-dialog ref="bindCameraTableDialogRef" />
+  </div>
+</template>
+
+<script setup lang="ts" name="areaHouseList">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObjs } from "/@/api/area/areaHouse";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+import { usePanel } from "/@/stores/panel"
+import dayjs from "dayjs";
+
+const storesPanel = usePanel()
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./areaHouseForm.vue'));
+const BindCameraTableDialog = defineAsyncComponent(() => import('./bindCameraTable.vue'));
+
+// 定义查询字典
+const { dh_build_type, dh_house_type } = useDict("dh_build_type", "dh_house_type");
+// 定义变量内容
+const formDialogRef = ref()
+const bindCameraTableDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  postDownBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+onBeforeMount(() => {
+  const query: any = useRoute().query
+  if (query && query.action == 'panel') {
+    if (query.params) {
+      Object.assign(state.queryForm, JSON.parse(query.params))
+      getDataList()
+    }
+    storesPanel.openFromPanel()
+  }
+})
+
+onBeforeUnmount(() => {
+  const query = useRoute().query
+  if (query && query.action == 'panel') {
+    storesPanel.closeFromPanel()
+  }
+})
+
+// 导出excel
+const exportExcel = () => {
+  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
+  postDownBlobFile('/admin/areaHouse/export', Object.assign(state.queryForm, { ids: selectObjs }), `房屋管理_${timeSuffix}.xlsx`)
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+</script>
diff --git a/src/views/area/_components/areaHouseTable.vue b/src/views/area/_components/areaHouseTable.vue
index aa7da2a..f6eafe1 100644
--- a/src/views/area/_components/areaHouseTable.vue
+++ b/src/views/area/_components/areaHouseTable.vue
@@ -17,6 +17,18 @@
                 <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
             </el-form-item>
         </el-form>
+        <el-row>
+            <div class="mb8" style="width: 100%">
+                <el-button icon="folder-add" type="primary" @click="openHouseForm"
+                    v-auth="'area_areaHouse_add'">
+                    新 增
+                </el-button>
+                <el-button plain :disabled="multiple" icon="Delete" type="primary"
+                    v-auth="'area_areaHouse_del'" @click="handleDelete(selectObjs)">
+                    删除
+                </el-button>
+            </div>
+        </el-row>
         <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
             :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
             @sort-change="sortChangeHandle">
@@ -43,25 +55,27 @@
             </el-table-column>
             <el-table-column prop="memo" label="备注" show-overflow-tooltip />
             <el-table-column prop="sortOrder" label="排序" />
-            <el-table-column label="操作" width="150">
-                <template #default="scope">
+            <el-table-column label="操作" width="240" fixed="right">
+                <template #default="{ row }">
+                    <el-button icon="CameraFilled" text type="primary" v-auth="'area_areaHouse_edit'"
+                        @click="bindCameraTableDialogRef.openDialog(row.id)">摄像头</el-button>
                     <el-button icon="edit-pen" text type="primary" v-auth="'area_areaHouse_edit'"
-                        @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
+                        @click="formDialogRef.openDialog(row.id, state.queryForm.areaId, true)">编辑</el-button>
                     <el-button icon="delete" text type="primary" v-auth="'area_areaHouse_del'"
-                        @click="handleDelete([scope.row.id])">删除</el-button>
+                        @click="handleDelete([row.id])">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
         <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="visible = false">取消</el-button>
-                <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+                <el-button @click="visible = false">关闭</el-button>
             </span>
         </template>
 
         <!-- 编辑、新增  -->
         <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+        <bind-camera-table-dialog ref="bindCameraTableDialogRef" />
 
     </el-dialog>
 </template>
@@ -71,17 +85,15 @@ import { BasicTableProps, useTable } from "/@/hooks/table";
 import { useDict } from '/@/hooks/dict';
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import * as AreaHouseApi from '/@/api/area/areaHouse'
-import { rule } from '/@/utils/validate';
-const emit = defineEmits(['refresh']);
 
 // 引入组件
-const FormDialog = defineAsyncComponent(() => import('./areaHouseTable.vue'));
+const FormDialog = defineAsyncComponent(() => import('./areaHouseForm.vue'));
+const BindCameraTableDialog = defineAsyncComponent(() => import('./bindCameraTable.vue'));
 
 // 定义变量内容
 const formDialogRef = ref()
-const dataFormRef = ref();
+const bindCameraTableDialogRef = ref()
 const visible = ref(false)
-const loading = ref(false)
 
 // 多选变量
 const selectObjs = ref([]) as any
@@ -105,50 +117,23 @@ const {
     currentChangeHandle,
     sizeChangeHandle,
     sortChangeHandle,
-    downBlobFile,
     tableStyle
 } = useTable(state)
 
-// 提交表单数据
-const form = reactive({
-    id: '',
-    areaId: '',
-    name: '',
-    houseCode: '',
-    noFloor: '',
-    bizType: '',
-    houseState: '',
-    memo: '',
-    sortOrder: '',
-});
-
 // 打开弹窗
 const openDialog = (id: string) => {
     visible.value = true
-    form.id = ''
-    // 获取areaHouse信息
-    if (id) {
-        state.queryForm.areaId = id
-        getDataList()
-    }
+    state.queryForm = { areaId: id }
+    state.pagination!.current = 1
+    selectObjs.value = []
+    multiple.value = true
+    getDataList()
 };
 
-// 提交
-const onSubmit = async () => {
-    const valid = await dataFormRef.value.validate().catch(() => { });
-    if (!valid) return false;
-    try {
-        loading.value = true;
-        form.id ? await AreaHouseApi.putObj(form) : await AreaHouseApi.addObj(form);
-        useMessage().success(form.id ? '修改成功' : '添加成功');
-        visible.value = false;
-        emit('refresh');
-    } catch (err: any) {
-        useMessage().error(err.msg);
-    } finally {
-        loading.value = false;
-    }
-};
+// 在当前空间下新增房间
+const openHouseForm = () => {
+    formDialogRef.value.openDialog('', state.queryForm.areaId, true)
+}
 
 // 清空搜索条件
 const resetQuery = () => {
@@ -156,6 +141,7 @@ const resetQuery = () => {
     queryRef.value?.resetFields()
     // 清空多选
     selectObjs.value = []
+    multiple.value = true
     getDataList()
 }
 
@@ -175,6 +161,8 @@ const handleDelete = async (ids: string[]) => {
     try {
         await AreaHouseApi.delObjs(ids);
         getDataList();
+        selectObjs.value = [];
+        multiple.value = true;
         useMessage().success('删除成功');
     } catch (err: any) {
         useMessage().error(err.msg);
@@ -185,4 +173,4 @@ const handleDelete = async (ids: string[]) => {
 defineExpose({
     openDialog
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/area/_components/areaManageList.vue b/src/views/area/_components/areaManageList.vue
new file mode 100644
index 0000000..0d54270
--- /dev/null
+++ b/src/views/area/_components/areaManageList.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-row shadow="hover" v-show="showSearch" class="ml10">
+        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+          <el-form-item style="width: 250px;" label="空间编码" prop="uniqueCode">
+            <el-input v-model="state.queryForm.uniqueCode" placeholder="请输入空间编码" />
+          </el-form-item>
+          <el-form-item style="width: 250px;" label="空间名" prop="name">
+            <el-input v-model="state.queryForm.name" placeholder="请输入空间名" />
+          </el-form-item>
+          <el-form-item style="width: 250px;" label="空间类型" prop="bizType">
+            <dict-select v-model="state.queryForm.bizType" :options="dh_build_type" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="search" type="primary" @click="getDataList">
+              {{ $t('common.queryBtn') }}
+            </el-button>
+            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+            v-auth="'admin_areaManage_add'">
+            新 增
+          </el-button>
+          <el-button plain icon="upload-filled" class="ml10" @click="uploadExcelRef.show()">
+            导 入
+          </el-button>
+          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_areaManage_del'"
+            @click="handleDelete(selectObjs)">
+            删除
+          </el-button>
+          <right-toolbar v-model:showSearch="showSearch" :export="'admin_areaManage_export'" @exportExcel="exportExcel"
+            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+        @sort-change="sortChangeHandle">
+        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column type="index" label="#" width="80" />
+        <el-table-column prop="uniqueCode" label="空间编码" />
+        <el-table-column prop="name" label="空间名" />
+        <el-table-column prop="bizType" label="空间类型">
+          <template #default="{ row }">
+            <dict-tag :options="dh_build_type" :value="row.bizType" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="area" label="建筑面积">
+          <template #default="{ row }">
+            <span>{{ row.area }}平方米</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="memo" label="空间备注" show-overflow-tooltip />
+        <el-table-column prop="sortOrder" label="排序" show-overflow-tooltip />
+        <el-table-column label="操作" width="350">
+          <template #default="{ row }">
+            <el-button icon="OfficeBuilding" text type="primary" v-auth="'admin_areaManage_edit'"
+              @click="areaPlaybackDeviceTableDialogRef.openDialog(row.id)">
+              报警回放摄像头
+            </el-button>
+            <el-button icon="OfficeBuilding" text type="primary" v-auth="'admin_areaManage_edit'"
+              @click="areaHouseTableDialogRef.openDialog(row.id)">
+              房间
+            </el-button>
+            <el-button icon="edit-pen" text type="primary" v-auth="'admin_areaManage_edit'"
+              @click="formDialogRef.openDialog(row.id)">编辑</el-button>
+            <el-button icon="delete" text type="primary" v-auth="'admin_areaManage_del'"
+              @click="handleDelete([row.id])">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </div>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+    <area-house-table-dialog ref="areaHouseTableDialogRef" />
+    <area-playback-device-table-dialog ref="areaPlaybackDeviceTableDialogRef" />
+    <upload-excel ref="uploadExcelRef" title="空间导入" url="/admin/areaManage/read-excel"
+      temp-url="/admin/sys-file/local/file/area_import_temp.xlsx" @refreshDataList="getDataList(false)" />
+  </div>
+</template>
+
+<script setup lang="ts" name="areaManageList">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObjs } from "/@/api/area/areaManage";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+import dayjs from "dayjs";
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('../areaManage/form.vue'));
+const AreaHouseTableDialog = defineAsyncComponent(() => import('./areaHouseTable.vue'));
+const AreaPlaybackDeviceTableDialog = defineAsyncComponent(() => import('./areaPlaybackDeviceTable.vue'));
+// 定义查询字典
+const { dh_build_type } = useDict("dh_build_type")
+// 定义变量内容
+const formDialogRef = ref()
+const areaHouseTableDialogRef = ref()
+const areaPlaybackDeviceTableDialogRef = ref()
+const bindCameraDialogRef = ref()
+
+// 搜索变量
+const uploadExcelRef = ref()
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  postDownBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
+  postDownBlobFile('/admin/areaManage/export', Object.assign(state.queryForm, { ids: selectObjs }), `空间管理_${timeSuffix}.xlsx`)
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+</script>
diff --git a/src/views/area/_components/bindCameraForm.vue b/src/views/area/_components/bindCameraForm.vue
index e4fb7fa..16b00ee 100644
--- a/src/views/area/_components/bindCameraForm.vue
+++ b/src/views/area/_components/bindCameraForm.vue
@@ -42,6 +42,12 @@
                             <el-input v-model="form.z" placeholder="z不能为空" />
                         </el-form-item>
                     </el-col>
+                    <el-col :span="24" class="mb20">
+                        <el-form-item label="摄像头方向" prop="cameraDirection">
+                            <el-input-number v-model="form.cameraDirection" :min="0" :max="359" :precision="2"
+                                :controls="false" class="w-full" placeholder="请输入0-359度，留空则朝向当前视角" />
+                        </el-form-item>
+                    </el-col>
                 </div>
             </el-row>
         </el-form>
@@ -75,6 +81,12 @@ const form = reactive<any>({
     id: '',
     areaHouseId: '',
     channelIds: [],
+    uniqueCode: '',
+    channelCode: '',
+    x: '',
+    y: '',
+    z: '',
+    cameraDirection: null,
 });
 
 // 定义校验规则
@@ -88,14 +100,23 @@ const dataRules = ref({
 // 打开弹窗
 const openDialog = (areaHouseId: string, bindId?: string) => {
     visible.value = true
-    form.areaHouseId = ''
-    form.id = bindId
-    // 重置表单数据
+    Object.assign(form, {
+        name: '',
+        id: bindId || '',
+        areaHouseId: areaHouseId || '',
+        channelIds: [],
+        uniqueCode: '',
+        channelCode: '',
+        x: '',
+        y: '',
+        z: '',
+        cameraDirection: null,
+    })
+    // 表单值已在上方重置，这里只清除上次打开残留的校验状态
     nextTick(() => {
-        dataFormRef.value?.resetFields();
+        dataFormRef.value?.clearValidate();
     });
     // 获取areaHouse信息
-    if (areaHouseId) form.areaHouseId = areaHouseId
     getareaHouseDeviceData(bindId, areaHouseId)
     // 查询设备通道信息
     getHouseDeviceList();
@@ -156,6 +177,7 @@ const getareaHouseDeviceData = async (bindId: any, areaHouseId: any) => {
                 form.x = houseDeviceRes.x
                 form.y = houseDeviceRes.y
                 form.z = houseDeviceRes.z
+                form.cameraDirection = houseDeviceRes.cameraDirection ?? null
             }
         } else if (areaHouseId) {
             const { data: houseRes } = await AreaHouseApi.getObj(areaHouseId)
@@ -174,4 +196,4 @@ const getareaHouseDeviceData = async (bindId: any, areaHouseId: any) => {
 defineExpose({
     openDialog
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/area/_components/bindCameraTable.vue b/src/views/area/_components/bindCameraTable.vue
index f7030a2..574e61b 100644
--- a/src/views/area/_components/bindCameraTable.vue
+++ b/src/views/area/_components/bindCameraTable.vue
@@ -25,6 +25,14 @@
                 <el-table-column prop="x" label="x" width="100" />
                 <el-table-column prop="y" label="y" width="100" />
                 <el-table-column prop="z" label="z" width="100" />
+                <el-table-column prop="cameraDirection" label="方向（度）" width="140">
+                    <template #default="{ row }">
+                        <span v-if="row.cameraDirection !== null && row.cameraDirection !== undefined">
+                            {{ row.cameraDirection }}°
+                        </span>
+                        <span v-else>默认朝向视角</span>
+                    </template>
+                </el-table-column>
             </el-table-column>
             <el-table-column label="房屋">
                 <el-table-column prop="houseName" label="房屋名" />
@@ -142,4 +150,4 @@ const handleDelete = async (ids: string[]) => {
 defineExpose({
     openDialog
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/area/areaHouse/index.vue b/src/views/area/areaHouse/index.vue
index 76e5116..8e3ba43 100644
--- a/src/views/area/areaHouse/index.vue
+++ b/src/views/area/areaHouse/index.vue
@@ -1,182 +1,7 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <el-row shadow="hover" v-show="showSearch" class="ml10">
-        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-          <el-form-item style="width: 250px;" label="空间编码" prop="areaUniqueCode">
-            <el-input v-model="state.queryForm.areaUniqueCode" placeholder="请输入空间编码" />
-          </el-form-item>
-          <el-form-item style="width: 250px;" label="空间名" prop="areaName">
-            <el-input v-model="state.queryForm.areaName" placeholder="请输入空间名" />
-          </el-form-item>
-          <el-form-item style="width: 250px;" label="房间名" prop="name">
-            <el-input v-model="state.queryForm.name" placeholder="请输入房间名" />
-          </el-form-item>
-          <el-form-item style="width: 250px;" label="空间类型" prop="areaBizType">
-            <dict-select v-model="state.queryForm.areaBizType" :options="dh_build_type" />
-          </el-form-item>
-          <el-form-item>
-            <el-button icon="search" type="primary" @click="getDataList">
-              {{ $t('common.queryBtn') }}
-            </el-button>
-            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-            v-auth="'area_areaHouse_add'">
-            新 增
-          </el-button>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'area_areaHouse_del'"
-            @click="handleDelete(selectObjs)">
-            删除
-          </el-button>
-          <right-toolbar v-model:showSearch="showSearch" :export="'area_areaHouse_export'" @exportExcel="exportExcel"
-            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
-        </div>
-      </el-row>
-      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-        @sort-change="sortChangeHandle">
-        <el-table-column type="selection" width="40" align="center" />
-        <el-table-column type="index" label="#" width="80" />
-        <el-table-column prop="areaName" label="空间名" />
-        <el-table-column prop="areaUniqueCode" label="空间编码" />
-        <el-table-column prop="areaBizType" width="100" label="空间类型">
-          <template #default="{ row }">
-            <dict-tag :options="dh_build_type" :value="row.areaBizType" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="name" label="房屋名" />
-        <el-table-column prop="houseCode" label="房号" />
-        <el-table-column prop="noFloor" label="楼层">
-          <template #default="{ row }">
-            {{ row.noFloor }}楼
-          </template>
-        </el-table-column>
-        <el-table-column prop="bizType" label="类型">
-          <template #default="{ row }">
-            <dict-tag :options="dh_house_type" :value="row.bizType" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="memo" label="备注" show-overflow-tooltip />
-        <el-table-column prop="sortOrder" label="排序" />
-        <el-table-column label="操作" width="240">
-          <template #default="{ row }">
-            <el-button icon="CameraFilled" text type="primary" v-auth="'area_areaHouse_edit'"
-              @click="bindCameraTableDialogRef.openDialog(row.id)">绑定相机</el-button>
-            <el-button icon="edit-pen" text type="primary" v-auth="'area_areaHouse_edit'"
-              @click="formDialogRef.openDialog(row.id)">编辑</el-button>
-            <el-button icon="delete" text type="primary" v-auth="'area_areaHouse_del'"
-              @click="handleDelete([row.id])">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-    </div>
-
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-    <bind-camera-table-dialog ref="bindCameraTableDialogRef" />
-  </div>
+  <area-house-list />
 </template>
 
 <script setup lang="ts" name="systemAreaHouse">
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import { fetchList, delObjs } from "/@/api/area/areaHouse";
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
-import { usePanel } from "/@/stores/panel"
-import dayjs from "dayjs";
-
-const storesPanel = usePanel()
-
-// 引入组件
-const FormDialog = defineAsyncComponent(() => import('../_components/areaHouseForm.vue'));
-const BindCameraTableDialog = defineAsyncComponent(() => import('../_components/bindCameraTable.vue'));
-
-// 定义查询字典
-const { dh_build_type, dh_house_type } = useDict("dh_build_type", "dh_house_type");
-// 定义变量内容
-const formDialogRef = ref()
-const bindCameraTableDialogRef = ref()
-// 搜索变量
-const queryRef = ref()
-const showSearch = ref(true)
-// 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
-
-const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
-  pageList: fetchList
-})
-
-//  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  postDownBlobFile,
-  tableStyle
-} = useTable(state)
-
-// 清空搜索条件
-const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  getDataList()
-}
-
-onBeforeMount(() => {
-  const query: any = useRoute().query
-  if (query && query.action == 'panel') {
-    if (query.params) {
-      Object.assign(state.queryForm, JSON.parse(query.params))
-      getDataList()
-    }
-    storesPanel.openFromPanel()
-  }
-})
-
-onBeforeUnmount(() => {
-  const query = useRoute().query
-  if (query && query.action == 'panel') {
-    storesPanel.closeFromPanel()
-  }
-})
-
-// 导出excel
-const exportExcel = () => {
-  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
-  postDownBlobFile('/admin/areaHouse/export', Object.assign(state.queryForm, { ids: selectObjs }), `房屋管理_${timeSuffix}.xlsx`)
-}
-
-// 多选事件
-const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
-  multiple.value = !objs.length;
-};
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
-
-  try {
-    await delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
-</script>
\ No newline at end of file
+import AreaHouseList from '../_components/areaHouseList.vue';
+</script>
diff --git a/src/views/area/areaManage/index.vue b/src/views/area/areaManage/index.vue
index ba91333..53bef5d 100644
--- a/src/views/area/areaManage/index.vue
+++ b/src/views/area/areaManage/index.vue
@@ -1,167 +1,7 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <el-row shadow="hover" v-show="showSearch" class="ml10">
-        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-          <el-form-item style="width: 250px;" label="空间编码" prop="uniqueCode">
-            <el-input v-model="state.queryForm.uniqueCode" placeholder="请输入空间编码" />
-          </el-form-item>
-          <el-form-item style="width: 250px;" label="空间名" prop="name">
-            <el-input v-model="state.queryForm.name" placeholder="请输入空间名" />
-          </el-form-item>
-          <el-form-item style="width: 250px;" label="空间类型" prop="bizType">
-            <dict-select v-model="state.queryForm.bizType" :options="dh_build_type" />
-          </el-form-item>
-          <el-form-item>
-            <el-button icon="search" type="primary" @click="getDataList">
-              {{ $t('common.queryBtn') }}
-            </el-button>
-            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-            v-auth="'admin_areaManage_add'">
-            新 增
-          </el-button>
-          <el-button plain icon="upload-filled" class="ml10" @click="uploadExcelRef.show()">
-            导 入
-          </el-button>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_areaManage_del'"
-            @click="handleDelete(selectObjs)">
-            删除
-          </el-button>
-          <right-toolbar v-model:showSearch="showSearch" :export="'admin_areaManage_export'" @exportExcel="exportExcel"
-            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
-        </div>
-      </el-row>
-      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-        @sort-change="sortChangeHandle">
-        <el-table-column type="selection" width="40" align="center" />
-        <el-table-column type="index" label="#" width="80" />
-        <el-table-column prop="uniqueCode" label="空间编码" />
-        <el-table-column prop="name" label="空间名" />
-        <el-table-column prop="bizType" label="空间类型">
-          <template #default="{ row }">
-            <dict-tag :options="dh_build_type" :value="row.bizType" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="area" label="建筑面积">
-          <template #default="{ row }">
-            <span>{{ row.area }}平方米</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="memo" label="空间备注" show-overflow-tooltip />
-        <el-table-column prop="sortOrder" label="排序" show-overflow-tooltip />
-        <el-table-column label="操作" width="350">
-          <template #default="{ row }">
-            <el-button icon="OfficeBuilding" text type="primary" v-auth="'admin_areaManage_edit'"
-              @click="areaPlaybackDeviceTableDialogRef.openDialog(row.id)">
-              报警回放摄像头
-            </el-button>
-            <el-button icon="OfficeBuilding" text type="primary" v-auth="'admin_areaManage_edit'"
-              @click="areaHouseTableDialogRef.openDialog(row.id)">
-              房间
-            </el-button>
-            <el-button icon="edit-pen" text type="primary" v-auth="'admin_areaManage_edit'"
-              @click="formDialogRef.openDialog(row.id)">编辑</el-button>
-            <el-button icon="delete" text type="primary" v-auth="'admin_areaManage_del'"
-              @click="handleDelete([row.id])">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-    </div>
-
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-    <area-house-table-dialog ref="areaHouseTableDialogRef" />
-    <area-playback-device-table-dialog ref="areaPlaybackDeviceTableDialogRef" />
-    <upload-excel ref="uploadExcelRef" title="空间导入" url="/admin/areaManage/read-excel"
-      temp-url="/admin/sys-file/local/file/area_import_temp.xlsx" @refreshDataList="getDataList(false)" />
-  </div>
+  <area-manage-list />
 </template>
 
 <script setup lang="ts" name="systemAreaManage">
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import { fetchList, delObjs } from "/@/api/area/areaManage";
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
-import dayjs from "dayjs";
-
-// 引入组件
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
-const AreaHouseTableDialog = defineAsyncComponent(() => import('../_components/areaHouseTable.vue'));
-const AreaPlaybackDeviceTableDialog = defineAsyncComponent(() => import('../_components/areaPlaybackDeviceTable.vue'));
-// 定义查询字典
-const { dh_build_type } = useDict("dh_build_type")
-// 定义变量内容
-const formDialogRef = ref()
-const areaHouseTableDialogRef = ref()
-const areaPlaybackDeviceTableDialogRef = ref()
-const bindCameraDialogRef = ref()
-
-// 搜索变量
-const uploadExcelRef = ref()
-const queryRef = ref()
-const showSearch = ref(true)
-// 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
-
-const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
-  pageList: fetchList
-})
-
-//  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  postDownBlobFile,
-  tableStyle
-} = useTable(state)
-
-// 清空搜索条件
-const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  getDataList()
-}
-
-// 导出excel
-const exportExcel = () => {
-  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
-  postDownBlobFile('/admin/areaManage/export', Object.assign(state.queryForm, { ids: selectObjs }), `空间管理_${timeSuffix}.xlsx`)
-}
-
-// 多选事件
-const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
-  multiple.value = !objs.length;
-};
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
-
-  try {
-    await delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
-</script>
\ No newline at end of file
+import AreaManageList from '../_components/areaManageList.vue';
+</script>
diff --git a/src/views/base/data/index.vue b/src/views/base/data/index.vue
new file mode 100644
index 0000000..1bd5bd6
--- /dev/null
+++ b/src/views/base/data/index.vue
@@ -0,0 +1,1580 @@
+<template>
+  <div class="layout-padding device-statistics-page">
+    <div class="layout-padding-auto">
+      <main class="device-dashboard" aria-labelledby="device-statistics-title">
+        <header class="dashboard-header">
+          <div class="dashboard-heading">
+            <div class="dashboard-heading__icon" aria-hidden="true">
+              <el-icon>
+                <Monitor />
+              </el-icon>
+            </div>
+            <div>
+              <h1 id="device-statistics-title">设备统计</h1>
+              <p>集中查看设备运行状态、区域分布和告警动态</p>
+            </div>
+          </div>
+
+          <div class="dashboard-actions">
+            <div class="update-time" aria-live="polite">
+              <span class="update-time__dot" aria-hidden="true"></span>
+              {{ lastUpdated ? `更新于 ${lastUpdated}` : "正在获取最新数据" }}
+            </div>
+            <el-radio-group v-model="selectedRange" class="range-switch" :disabled="refreshing" aria-label="统计时间范围"
+              @change="handleRangeChange">
+              <el-radio-button v-for="item in rangeOptions" :key="item.value" :label="item.value">
+                {{ item.label }}
+              </el-radio-button>
+            </el-radio-group>
+            <el-button class="refresh-button" :icon="Refresh" :loading="refreshing" aria-label="刷新设备统计数据"
+              @click="handleManualRefresh">
+              刷新
+            </el-button>
+          </div>
+        </header>
+
+        <div v-if="moduleErrors.length" class="error-banner" role="alert">
+          <div class="error-banner__content">
+            <el-icon aria-hidden="true">
+              <WarningFilled />
+            </el-icon>
+            <span>{{ moduleErrors.join("、") }}加载失败，其他模块仍显示最近一次成功数据。</span>
+          </div>
+          <el-button type="danger" text :disabled="refreshing" @click="handleManualRefresh">重新加载</el-button>
+        </div>
+
+        <section class="kpi-grid" aria-label="设备核心指标" v-loading="dashboardLoading">
+          <article v-for="item in kpiCards" :key="item.key" class="kpi-card" :class="`kpi-card--${item.tone}`">
+            <div class="kpi-card__icon" aria-hidden="true">
+              <el-icon>
+                <component :is="item.icon" />
+              </el-icon>
+            </div>
+            <div class="kpi-card__content">
+              <p>{{ item.label }}</p>
+              <div class="kpi-card__value">
+                <strong>{{ item.value }}</strong>
+                <span>{{ item.suffix }}</span>
+              </div>
+              <small>{{ item.description }}</small>
+            </div>
+          </article>
+        </section>
+
+        <section class="charts-grid" aria-label="设备统计图表">
+          <article class="data-panel chart-panel chart-panel--one-third" v-loading="dashboardLoading">
+            <header class="panel-header">
+              <div>
+                <h2>设备分类占比</h2>
+                <p>监控、门禁与道闸设备构成</p>
+              </div>
+              <el-tag type="info" effect="plain">当前</el-tag>
+            </header>
+            <div ref="distributionChartRef" class="chart-canvas" role="img" :aria-label="distributionSummary"></div>
+            <p class="chart-summary">{{ distributionSummary }}</p>
+          </article>
+
+          <article class="data-panel chart-panel chart-panel--one-third" v-loading="dashboardLoading">
+            <header class="panel-header">
+              <div>
+                <h2>分类运行状态</h2>
+                <p>各类设备在线与离线数量对比</p>
+              </div>
+              <el-tag type="success" effect="plain">实时</el-tag>
+            </header>
+            <div ref="statusChartRef" class="chart-canvas" role="img" :aria-label="statusSummary"></div>
+            <p class="chart-summary">{{ statusSummary }}</p>
+          </article>
+
+          <article class="data-panel chart-panel chart-panel--one-third" v-loading="dashboardLoading">
+            <header class="panel-header">
+              <div>
+                <h2>区域设备排行</h2>
+                <p>设备数量最多的前五个区域</p>
+              </div>
+              <el-tag effect="plain">TOP 5</el-tag>
+            </header>
+            <div ref="areaChartRef" class="chart-canvas" role="img" :aria-label="areaSummary"></div>
+            <p class="chart-summary">{{ areaSummary }}</p>
+          </article>
+
+          <article class="data-panel chart-panel chart-panel--two-thirds" v-loading="dashboardLoading">
+            <header class="panel-header">
+              <div>
+                <h2>设备在线率趋势</h2>
+                <p>{{ activeRangeLabel }}每日在线率变化</p>
+              </div>
+              <span class="panel-header__metric">当前 {{ formatPercent(deviceTotal.total.onlineRate) }}</span>
+            </header>
+            <div ref="onlineChartRef" class="chart-canvas" role="img" :aria-label="onlineTrendSummary"></div>
+            <p class="chart-summary">{{ onlineTrendSummary }}</p>
+          </article>
+
+          <article class="data-panel chart-panel chart-panel--one-third" v-loading="dashboardLoading">
+            <header class="panel-header">
+              <div>
+                <h2>设备告警趋势</h2>
+                <p>{{ activeRangeLabel }}每日告警数量</p>
+              </div>
+              <el-tag type="danger" effect="plain">{{ formatNumber(alarmTotal.todayAlarmCount) }} 条今日</el-tag>
+            </header>
+            <div ref="alarmChartRef" class="chart-canvas" role="img" :aria-label="alarmTrendSummary"></div>
+            <p class="chart-summary">{{ alarmTrendSummary }}</p>
+          </article>
+        </section>
+
+        <section class="data-panel alarm-panel" aria-labelledby="alarm-summary-title">
+          <header class="panel-header panel-header--table">
+            <div>
+              <h2 id="alarm-summary-title">最新设备告警</h2>
+              <p>展示最新 6 条设备告警，点击记录可进入告警记录页</p>
+            </div>
+            <el-button type="primary" text @click="navigateToAlarmPage()">查看全部</el-button>
+          </header>
+          <div class="table-scroll">
+            <el-table :data="alarmSummaryList" v-loading="alarmLoading" row-key="id" class="clickable-table"
+              empty-text="暂无设备告警" @row-click="navigateToAlarmPage">
+              <el-table-column prop="alarmCode" label="告警编号" min-width="180" show-overflow-tooltip>
+                <template #default="{ row }">{{ row.alarmCode || "--" }}</template>
+              </el-table-column>
+              <el-table-column prop="deviceName" label="设备名称" min-width="160" show-overflow-tooltip>
+                <template #default="{ row }">{{ row.deviceName || "未知设备" }}</template>
+              </el-table-column>
+              <el-table-column prop="alarmDate" label="告警时间" min-width="180" />
+              <el-table-column prop="alarmPosition" label="告警地点" min-width="180" show-overflow-tooltip>
+                <template #default="{ row }">{{ row.alarmPosition || "未知地点" }}</template>
+              </el-table-column>
+              <el-table-column prop="alarmType" label="告警类型" min-width="150">
+                <template #default="{ row }">
+                  <dict-tag :options="alarm_type" :value="row.alarmType" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="handleStat" label="处理状态" min-width="110">
+                <template #default="{ row }">
+                  <dict-tag :options="handle_stat" :value="row.handleStat" />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="90" fixed="right">
+                <template #default="{ row }">
+                  <el-button type="primary" text @click.stop="navigateToAlarmPage(row)">查看</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </section>
+
+        <section class="data-panel device-table-panel" aria-labelledby="device-list-title">
+          <header class="panel-header panel-header--table">
+            <div>
+              <h2 id="device-list-title">全部设备运行明细</h2>
+              <p>统计范围内所有设备的连接、同步和归属信息</p>
+            </div>
+            <span class="table-total">共 {{ formatNumber(deviceState.pagination?.total || 0) }} 台</span>
+          </header>
+
+          <el-form ref="deviceQueryRef" :model="deviceState.queryForm" :inline="true" class="device-filters"
+            @keyup.enter="handleDeviceSearch">
+            <el-form-item label="设备名称" prop="deviceName">
+              <el-input v-model="deviceState.queryForm.deviceName" clearable placeholder="请输入设备名称" />
+            </el-form-item>
+            <el-form-item label="设备类型" prop="deviceCategory">
+              <dict-select v-model="deviceState.queryForm.deviceCategory" :options="device_category" clearable
+                placeholder="请选择设备类型" />
+            </el-form-item>
+            <el-form-item label="在线状态" prop="isOnline">
+              <dict-select v-model="deviceState.queryForm.isOnline" :options="is_nline" clearable
+                placeholder="请选择在线状态" />
+            </el-form-item>
+            <el-form-item class="device-filters__actions">
+              <el-button type="primary" :icon="Search" @click="handleDeviceSearch">查询</el-button>
+              <el-button :icon="RefreshLeft" @click="resetDeviceQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+
+          <div class="table-scroll">
+            <el-table :data="deviceState.dataList" v-loading="deviceState.loading" border empty-text="暂无设备数据"
+              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+              @sort-change="sortChangeHandle">
+              <el-table-column type="index" label="#" width="60" />
+              <el-table-column prop="deviceCode" label="设备编码" min-width="150" show-overflow-tooltip />
+              <el-table-column prop="deviceName" label="设备名称" min-width="170" show-overflow-tooltip />
+              <el-table-column prop="deviceCategory" label="设备类型" min-width="140">
+                <template #default="{ row }">
+                  <dict-tag :options="device_category" :value="row.deviceCategory" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="deviceManufacturer" label="厂商类型" min-width="140">
+                <template #default="{ row }">
+                  <dict-tag :options="dh_device_manufacturer" :value="row.deviceManufacturer" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="orgName" label="所属组织" min-width="170" show-overflow-tooltip>
+                <template #default="{ row }">{{ row.orgName || "--" }}</template>
+              </el-table-column>
+              <el-table-column prop="isOnline" label="在线状态" min-width="120">
+                <template #default="{ row }">
+                  <tag-online :isOnline="String(row.isOnline) === '1'" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="isSync" label="同步状态" min-width="130">
+                <template #default="{ row }">
+                  <tag-sync :isSync="String(row.isSync) === '1'" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="offlineReason" label="离线原因" min-width="180" show-overflow-tooltip>
+                <template #default="{ row }">{{ row.offlineReason || "--" }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+            v-bind="deviceState.pagination" />
+        </section>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="baseData">
+import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
+import type { Component, Ref } from "vue";
+// 统计图表统一使用 ECharts 实例，便于集中处理缩放与资源释放。
+import * as echarts from "echarts";
+import type { ECharts, EChartsOption } from "echarts";
+import dayjs from "dayjs";
+import {
+  Bell,
+  CircleCheck,
+  CircleClose,
+  DataLine,
+  Monitor,
+  Refresh,
+  RefreshLeft,
+  Search,
+  WarningFilled,
+} from "@element-plus/icons-vue";
+import type { FormInstance } from "element-plus";
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { useDict } from "/@/hooks/dict";
+import { useMessage } from "/@/hooks/message";
+import { fetchList as fetchDeviceList } from "/@/api/device/deviceManage";
+import {
+  AreaDeviceStatisticsItem,
+  DeviceAlarmSummaryItem,
+  DeviceAlarmTotalData,
+  DeviceAlarmTrendItem,
+  DeviceOnlineTrendItem,
+  DeviceStatusDetail,
+  DeviceTotalData,
+  getAreaDeviceStatistics,
+  getDeviceAlarmPage,
+  getDeviceAlarmTotal,
+  getDeviceAlarmTrend,
+  getDeviceOnlineTrend,
+  getDeviceTotal,
+} from "/@/api/device/deviceStatistics";
+
+type RangeValue = "week" | "month" | "year";
+type ChartKey = "distribution" | "status" | "online" | "area" | "alarm";
+
+interface KpiCard {
+  key: string;
+  label: string;
+  value: string;
+  suffix: string;
+  description: string;
+  tone: "primary" | "success" | "danger" | "warning" | "info";
+  icon: Component;
+}
+
+const router = useRouter();
+const message = useMessage();
+
+// 页面使用现有字典组件，保证统计页与设备管理页的状态口径一致。
+const { device_category, is_nline, dh_device_manufacturer, alarm_type, handle_stat } = useDict(
+  "device_category",
+  "is_nline",
+  "dh_device_manufacturer",
+  "alarm_type",
+  "handle_stat"
+);
+
+const rangeOptions: Array<{ label: string; value: RangeValue }> = [
+  { label: "近 7 日", value: "week" },
+  { label: "本月", value: "month" },
+  { label: "本年", value: "year" },
+];
+
+const selectedRange = ref<RangeValue>("week");
+const refreshing = ref(false);
+const dashboardLoading = ref(true);
+const alarmLoading = ref(false);
+const lastUpdated = ref("");
+const moduleErrors = ref<string[]>([]);
+const reduceMotion = ref(false);
+const alarmSummaryList = ref<DeviceAlarmSummaryItem[]>([]);
+const onlineTrendList = ref<DeviceOnlineTrendItem[]>([]);
+const areaStatisticsList = ref<AreaDeviceStatisticsItem[]>([]);
+const alarmTrendList = ref<DeviceAlarmTrendItem[]>([]);
+
+const createEmptyDetail = (): DeviceStatusDetail => ({
+  deviceName: "",
+  deviceCategory: "",
+  total: 0,
+  online: 0,
+  offline: 0,
+  onlineRate: 0,
+});
+
+const deviceTotal = ref<DeviceTotalData>({
+  total: createEmptyDetail(),
+  camera: createEmptyDetail(),
+  door: createEmptyDetail(),
+  gate: createEmptyDetail(),
+});
+
+const alarmTotal = ref<DeviceAlarmTotalData>({
+  todayAlarmCount: 0,
+  alarmCount: 0,
+});
+
+// 设备明细表继续使用项目统一的 useTable，保留分页、排序和加载反馈。
+const deviceQueryRef = ref<FormInstance>();
+const deviceState: BasicTableProps = reactive<BasicTableProps>({
+  createdIsNeed: false,
+  queryForm: {
+    deviceName: "",
+    deviceCategory: "",
+    isOnline: "",
+  },
+  pagination: {
+    current: 1,
+    size: 10,
+    total: 0,
+    pageSizes: [10, 20, 50, 100],
+    layout: "total, sizes, prev, pager, next, jumper",
+  },
+  pageList: fetchDeviceList,
+});
+
+const {
+  getDataList: getDeviceDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  tableStyle,
+} = useTable(deviceState);
+
+const distributionChartRef = ref<HTMLDivElement | null>(null);
+const statusChartRef = ref<HTMLDivElement | null>(null);
+const onlineChartRef = ref<HTMLDivElement | null>(null);
+const areaChartRef = ref<HTMLDivElement | null>(null);
+const alarmChartRef = ref<HTMLDivElement | null>(null);
+const chartInstances: Partial<Record<ChartKey, ECharts>> = {};
+
+let pollTimer: number | undefined;
+let resizeObserver: ResizeObserver | undefined;
+let resizeFrame: number | undefined;
+let motionMediaQuery: MediaQueryList | undefined;
+let isUnmounted = false;
+
+const numberFormatter = new Intl.NumberFormat("zh-CN");
+
+const formatNumber = (value: number | string | null | undefined) => {
+  const numericValue = Number(value || 0);
+  return numberFormatter.format(Number.isFinite(numericValue) ? numericValue : 0);
+};
+
+const formatPercent = (value: number | string | null | undefined) => {
+  const numericValue = Number(value || 0);
+  return `${Number.isFinite(numericValue) ? numericValue.toFixed(2) : "0.00"}%`;
+};
+
+const activeRangeLabel = computed(() => {
+  return rangeOptions.find((item) => item.value === selectedRange.value)?.label || "近 7 日";
+});
+
+const kpiCards = computed<KpiCard[]>(() => [
+  {
+    key: "total",
+    label: "设备总数",
+    value: formatNumber(deviceTotal.value.total.total),
+    suffix: "台",
+    description: "当前纳管设备总量",
+    tone: "primary",
+    icon: markRaw(Monitor),
+  },
+  {
+    key: "online",
+    label: "在线设备",
+    value: formatNumber(deviceTotal.value.total.online),
+    suffix: "台",
+    description: "连接状态正常",
+    tone: "success",
+    icon: markRaw(CircleCheck),
+  },
+  {
+    key: "offline",
+    label: "离线设备",
+    value: formatNumber(deviceTotal.value.total.offline),
+    suffix: "台",
+    description: "需要关注或排查",
+    tone: "danger",
+    icon: markRaw(CircleClose),
+  },
+  {
+    key: "rate",
+    label: "总体在线率",
+    value: Number(deviceTotal.value.total.onlineRate || 0).toFixed(2),
+    suffix: "%",
+    description: "在线设备占比",
+    tone: "info",
+    icon: markRaw(DataLine),
+  },
+  {
+    key: "alarm",
+    label: "今日告警",
+    value: formatNumber(alarmTotal.value.todayAlarmCount),
+    suffix: "条",
+    description: `累计 ${formatNumber(alarmTotal.value.alarmCount)} 条`,
+    tone: "warning",
+    icon: markRaw(Bell),
+  },
+]);
+
+const categoryDetails = computed(() => [
+  { name: deviceTotal.value.camera.deviceName || "监控设备", value: deviceTotal.value.camera },
+  { name: deviceTotal.value.door.deviceName || "门禁设备", value: deviceTotal.value.door },
+  { name: deviceTotal.value.gate.deviceName || "道闸设备", value: deviceTotal.value.gate },
+]);
+
+const distributionSummary = computed(() => {
+  const content = categoryDetails.value.map((item) => `${item.name}${formatNumber(item.value.total)}台`).join("，");
+  return `设备分类占比：${content || "暂无数据"}。`;
+});
+
+const statusSummary = computed(() => {
+  const content = categoryDetails.value
+    .map((item) => `${item.name}在线${formatNumber(item.value.online)}台、离线${formatNumber(item.value.offline)}台`)
+    .join("；");
+  return `分类运行状态：${content || "暂无数据"}。`;
+});
+
+const onlineTrendSummary = computed(() => {
+  if (!onlineTrendList.value.length) return `${activeRangeLabel.value}暂无设备在线率趋势数据。`;
+  const latest = onlineTrendList.value[onlineTrendList.value.length - 1];
+  return `${activeRangeLabel.value}设备在线率趋势，共${onlineTrendList.value.length}个数据点，最新在线率为${formatPercent(
+    latest.onlineDeviceTotalRate
+  )}。`;
+});
+
+const areaSummary = computed(() => {
+  if (!areaStatisticsList.value.length) return "暂无区域设备排行数据。";
+  return `区域设备排行：${areaStatisticsList.value
+    .map((item) => `${item.areaName}${formatNumber(item.totalCount)}台`)
+    .join("，")}。`;
+});
+
+const alarmTrendSummary = computed(() => {
+  if (!alarmTrendList.value.length) return `${activeRangeLabel.value}暂无设备告警趋势数据。`;
+  const total = alarmTrendList.value.reduce((sum, item) => sum + Number(item.alarmCount || 0), 0);
+  return `${activeRangeLabel.value}共发生${formatNumber(total)}条设备告警。`;
+});
+
+/**
+ * 将接口可能返回的空字段统一转换为安全数值，避免图表出现 NaN。
+ */
+const normalizeDetail = (detail?: Partial<DeviceStatusDetail>): DeviceStatusDetail => ({
+  deviceName: detail?.deviceName || "",
+  deviceCategory: detail?.deviceCategory || "",
+  total: Number(detail?.total || 0),
+  online: Number(detail?.online || 0),
+  offline: Number(detail?.offline || 0),
+  onlineRate: Number(detail?.onlineRate || 0),
+});
+
+const normalizeDeviceTotal = (data?: Partial<DeviceTotalData>) => ({
+  total: normalizeDetail(data?.total),
+  camera: normalizeDetail(data?.camera),
+  door: normalizeDetail(data?.door),
+  gate: normalizeDetail(data?.gate),
+});
+
+/**
+ * 根据时间选项生成后端可解析的起止时间。
+ */
+const getSelectedDateRange = () => {
+  const end = dayjs().endOf("day");
+  let start = dayjs().subtract(6, "day").startOf("day");
+
+  if (selectedRange.value === "month") start = dayjs().startOf("month");
+  if (selectedRange.value === "year") start = dayjs().startOf("year");
+
+  return [start.format("YYYY-MM-DD HH:mm:ss"), end.format("YYYY-MM-DD HH:mm:ss")];
+};
+
+const chartColors = {
+  primary: "#2563eb",
+  secondary: "#0ea5e9",
+  success: "#059669",
+  warning: "#d97706",
+  danger: "#dc2626",
+  text: "#334155",
+  muted: "#64748b",
+  grid: "#e2e8f0",
+};
+
+const getChartInstance = (key: ChartKey, element: HTMLDivElement | null) => {
+  if (!element) return undefined;
+  if (!chartInstances[key]) chartInstances[key] = markRaw(echarts.init(element));
+  return chartInstances[key];
+};
+
+const getEmptyOption = (messageText: string): EChartsOption => ({
+  animation: false,
+  graphic: {
+    type: "text",
+    left: "center",
+    top: "middle",
+    style: {
+      text: messageText,
+      fill: chartColors.muted,
+      fontSize: 14,
+    },
+  },
+});
+
+const setChartOption = (key: ChartKey, elementRef: Ref<HTMLDivElement | null>, option: EChartsOption) => {
+  const instance = getChartInstance(key, elementRef.value);
+  if (!instance) return;
+  instance.clear();
+  instance.setOption(option, true);
+};
+
+const commonTooltip = {
+  backgroundColor: "rgba(255, 255, 255, 0.98)",
+  borderColor: "#dbeafe",
+  borderWidth: 1,
+  padding: [10, 12],
+  textStyle: { color: chartColors.text, fontSize: 12 },
+  extraCssText: "box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); border-radius: 6px;",
+};
+
+/**
+ * 渲染设备分类占比环形图。
+ */
+const renderDistributionChart = () => {
+  const data = categoryDetails.value
+    .map((item) => ({ name: item.name, value: item.value.total }))
+    .filter((item) => item.value > 0);
+  if (!data.length) {
+    setChartOption("distribution", distributionChartRef, getEmptyOption("暂无设备分类数据"));
+    return;
+  }
+
+  setChartOption("distribution", distributionChartRef, {
+    animation: !reduceMotion.value,
+    animationDuration: 280,
+    color: [chartColors.primary, chartColors.success, chartColors.warning],
+    aria: { enabled: true, decal: { show: true } },
+    tooltip: { ...commonTooltip, trigger: "item", formatter: "{b}<br/>数量：{c} 台<br/>占比：{d}%" },
+    legend: {
+      bottom: 0,
+      left: "center",
+      icon: "circle",
+      itemWidth: 8,
+      itemHeight: 8,
+      textStyle: { color: chartColors.muted, fontSize: 12 },
+    },
+    graphic: [
+      {
+        type: "text",
+        left: "center",
+        top: "38%",
+        style: { text: formatNumber(deviceTotal.value.total.total), fill: chartColors.text, fontSize: 26, fontWeight: 700 },
+      },
+      {
+        type: "text",
+        left: "center",
+        top: "51%",
+        style: { text: "设备总数", fill: chartColors.muted, fontSize: 12 },
+      },
+    ],
+    series: [
+      {
+        name: "设备分类",
+        type: "pie",
+        radius: ["56%", "76%"],
+        center: ["50%", "44%"],
+        avoidLabelOverlap: true,
+        itemStyle: { borderColor: "#ffffff", borderWidth: 3, borderRadius: 4 },
+        label: { show: false },
+        emphasis: { label: { show: true, formatter: "{b}\n{c} 台", fontSize: 13, fontWeight: 600 } },
+        data,
+      },
+    ],
+  });
+};
+
+/**
+ * 渲染各类设备在线、离线堆叠条形图。
+ */
+const renderStatusChart = () => {
+  const details = categoryDetails.value;
+  const hasData = details.some((item) => item.value.total > 0);
+  if (!hasData) {
+    setChartOption("status", statusChartRef, getEmptyOption("暂无设备状态数据"));
+    return;
+  }
+
+  setChartOption("status", statusChartRef, {
+    animation: !reduceMotion.value,
+    animationDuration: 280,
+    aria: { enabled: true, decal: { show: true } },
+    tooltip: { ...commonTooltip, trigger: "axis", axisPointer: { type: "shadow" } },
+    legend: {
+      top: 0,
+      right: 0,
+      icon: "circle",
+      itemWidth: 8,
+      itemHeight: 8,
+      textStyle: { color: chartColors.muted },
+    },
+    grid: { top: 42, left: 12, right: 20, bottom: 10, containLabel: true },
+    xAxis: {
+      type: "value",
+      minInterval: 1,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: chartColors.muted },
+      splitLine: { lineStyle: { color: chartColors.grid, type: "dashed" } },
+    },
+    yAxis: {
+      type: "category",
+      data: details.map((item) => item.name),
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: chartColors.text, fontSize: 12 },
+    },
+    series: [
+      {
+        name: "在线",
+        type: "bar",
+        stack: "total",
+        barMaxWidth: 24,
+        itemStyle: { color: chartColors.success, borderRadius: [4, 0, 0, 4] },
+        label: { show: true, position: "inside", color: "#ffffff", formatter: ({ value }: any) => (value ? value : "") },
+        data: details.map((item) => item.value.online),
+      },
+      {
+        name: "离线",
+        type: "bar",
+        stack: "total",
+        barMaxWidth: 24,
+        itemStyle: { color: chartColors.danger, borderRadius: [0, 4, 4, 0] },
+        label: { show: true, position: "inside", color: "#ffffff", formatter: ({ value }: any) => (value ? value : "") },
+        data: details.map((item) => item.value.offline),
+      },
+    ],
+  });
+};
+
+/**
+ * 渲染在线率时间趋势图。
+ */
+const renderOnlineTrendChart = () => {
+  if (!onlineTrendList.value.length) {
+    setChartOption("online", onlineChartRef, getEmptyOption("暂无在线率趋势数据"));
+    return;
+  }
+
+  setChartOption("online", onlineChartRef, {
+    animation: !reduceMotion.value,
+    animationDuration: 280,
+    aria: { enabled: true },
+    tooltip: {
+      ...commonTooltip,
+      trigger: "axis",
+      valueFormatter: (value: any) => `${Number(value).toFixed(2)}%`,
+      axisPointer: { type: "line", lineStyle: { color: chartColors.secondary, type: "dashed" } },
+    },
+    legend: {
+      top: 0,
+      right: 0,
+      icon: "circle",
+      itemWidth: 8,
+      itemHeight: 8,
+      textStyle: { color: chartColors.muted },
+    },
+    grid: { top: 42, left: 12, right: 24, bottom: 12, containLabel: true },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: onlineTrendList.value.map((item) => item.recordTime),
+      axisLine: { lineStyle: { color: chartColors.grid } },
+      axisTick: { show: false },
+      axisLabel: { color: chartColors.muted, hideOverlap: true },
+    },
+    yAxis: {
+      type: "value",
+      min: 0,
+      max: 100,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: chartColors.muted, formatter: "{value}%" },
+      splitLine: { lineStyle: { color: chartColors.grid, type: "dashed" } },
+    },
+    series: [
+      {
+        name: "设备在线率",
+        type: "line",
+        smooth: true,
+        showSymbol: onlineTrendList.value.length <= 31,
+        symbol: "circle",
+        symbolSize: 7,
+        data: onlineTrendList.value.map((item) => Number(item.onlineDeviceTotalRate || 0)),
+        lineStyle: { color: chartColors.primary, width: 3 },
+        itemStyle: { color: chartColors.primary, borderColor: "#ffffff", borderWidth: 2 },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "rgba(37, 99, 235, 0.24)" },
+            { offset: 1, color: "rgba(37, 99, 235, 0.02)" },
+          ]),
+        },
+      },
+    ],
+  });
+};
+
+/**
+ * 渲染区域设备在线、离线数量排行。
+ */
+const renderAreaChart = () => {
+  if (!areaStatisticsList.value.length) {
+    setChartOption("area", areaChartRef, getEmptyOption("暂无区域排行数据"));
+    return;
+  }
+
+  const data = [...areaStatisticsList.value].reverse();
+  setChartOption("area", areaChartRef, {
+    animation: !reduceMotion.value,
+    animationDuration: 280,
+    aria: { enabled: true, decal: { show: true } },
+    tooltip: { ...commonTooltip, trigger: "axis", axisPointer: { type: "shadow" } },
+    legend: {
+      top: 0,
+      right: 0,
+      icon: "circle",
+      itemWidth: 8,
+      itemHeight: 8,
+      textStyle: { color: chartColors.muted },
+    },
+    grid: { top: 42, left: 12, right: 28, bottom: 10, containLabel: true },
+    xAxis: {
+      type: "value",
+      minInterval: 1,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: chartColors.muted },
+      splitLine: { lineStyle: { color: chartColors.grid, type: "dashed" } },
+    },
+    yAxis: {
+      type: "category",
+      data: data.map((item) => item.areaName || "未命名区域"),
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: chartColors.text, width: 78, overflow: "truncate" },
+    },
+    series: [
+      {
+        name: "在线",
+        type: "bar",
+        stack: "total",
+        barMaxWidth: 18,
+        itemStyle: { color: chartColors.primary, borderRadius: [3, 0, 0, 3] },
+        data: data.map((item) => Number(item.onlineCount || 0)),
+      },
+      {
+        name: "离线",
+        type: "bar",
+        stack: "total",
+        barMaxWidth: 18,
+        itemStyle: { color: chartColors.warning, borderRadius: [0, 3, 3, 0] },
+        label: {
+          show: true,
+          position: "right",
+          color: chartColors.muted,
+          formatter: ({ dataIndex }: any) => formatNumber(data[dataIndex]?.totalCount),
+        },
+        data: data.map((item) => Number(item.offlineCount || 0)),
+      },
+    ],
+  });
+};
+
+/**
+ * 渲染设备告警数量趋势图。
+ */
+const renderAlarmTrendChart = () => {
+  if (!alarmTrendList.value.length) {
+    setChartOption("alarm", alarmChartRef, getEmptyOption("暂无告警趋势数据"));
+    return;
+  }
+
+  setChartOption("alarm", alarmChartRef, {
+    animation: !reduceMotion.value,
+    animationDuration: 280,
+    aria: { enabled: true },
+    tooltip: { ...commonTooltip, trigger: "axis", valueFormatter: (value: any) => `${value} 条` },
+    legend: {
+      top: 0,
+      right: 0,
+      icon: "circle",
+      itemWidth: 8,
+      itemHeight: 8,
+      textStyle: { color: chartColors.muted },
+    },
+    grid: { top: 42, left: 12, right: 20, bottom: 12, containLabel: true },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: alarmTrendList.value.map((item) => item.time),
+      axisLine: { lineStyle: { color: chartColors.grid } },
+      axisTick: { show: false },
+      axisLabel: { color: chartColors.muted, hideOverlap: true },
+    },
+    yAxis: {
+      type: "value",
+      minInterval: 1,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: chartColors.muted },
+      splitLine: { lineStyle: { color: chartColors.grid, type: "dashed" } },
+    },
+    series: [
+      {
+        name: "告警数量",
+        type: "line",
+        smooth: true,
+        showSymbol: alarmTrendList.value.length <= 31,
+        symbol: "circle",
+        symbolSize: 7,
+        data: alarmTrendList.value.map((item) => Number(item.alarmCount || 0)),
+        lineStyle: { color: chartColors.danger, width: 3 },
+        itemStyle: { color: chartColors.danger, borderColor: "#ffffff", borderWidth: 2 },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "rgba(220, 38, 38, 0.2)" },
+            { offset: 1, color: "rgba(220, 38, 38, 0.02)" },
+          ]),
+        },
+      },
+    ],
+  });
+};
+
+const renderAllCharts = () => {
+  renderDistributionChart();
+  renderStatusChart();
+  renderOnlineTrendChart();
+  renderAreaChart();
+  renderAlarmTrendChart();
+};
+
+/**
+ * 分别处理统计接口结果，单个模块失败不会阻断其他图表更新。
+ */
+const loadStatistics = async () => {
+  const dateRange = getSelectedDateRange();
+  const results = await Promise.allSettled([
+    getDeviceTotal(),
+    getDeviceOnlineTrend({ recordListList: dateRange }),
+    getAreaDeviceStatistics(),
+    getDeviceAlarmTotal(),
+    getDeviceAlarmTrend({ alarmDateList: dateRange }),
+  ]);
+  const errors: string[] = [];
+
+  // 页面卸载后忽略迟到的接口响应，避免继续操作已销毁的图表。
+  if (isUnmounted) return errors;
+
+  if (results[0].status === "fulfilled") {
+    deviceTotal.value = normalizeDeviceTotal(results[0].value?.data);
+  } else errors.push("设备总览");
+
+  if (results[1].status === "fulfilled") {
+    onlineTrendList.value = Array.isArray(results[1].value?.data) ? results[1].value.data : [];
+  } else errors.push("在线率趋势");
+
+  if (results[2].status === "fulfilled") {
+    areaStatisticsList.value = Array.isArray(results[2].value?.data) ? results[2].value.data : [];
+  } else errors.push("区域排行");
+
+  if (results[3].status === "fulfilled") {
+    alarmTotal.value = {
+      todayAlarmCount: Number(results[3].value?.data?.todayAlarmCount || 0),
+      alarmCount: Number(results[3].value?.data?.alarmCount || 0),
+    };
+  } else errors.push("告警数量");
+
+  if (results[4].status === "fulfilled") {
+    alarmTrendList.value = Array.isArray(results[4].value?.data) ? results[4].value.data : [];
+  } else errors.push("告警趋势");
+
+  await nextTick();
+  renderAllCharts();
+  return errors;
+};
+
+const loadAlarmSummary = async () => {
+  alarmLoading.value = true;
+  try {
+    const response = await getDeviceAlarmPage({ current: 1, size: 6 });
+    if (!isUnmounted) {
+      alarmSummaryList.value = Array.isArray(response?.data?.records) ? response.data.records : [];
+    }
+    return [] as string[];
+  } catch (error) {
+    return ["实时告警"];
+  } finally {
+    if (!isUnmounted) alarmLoading.value = false;
+  }
+};
+
+/**
+ * 统一刷新统计、告警和设备明细，并通过锁避免轮询请求重叠。
+ */
+const refreshDashboard = async (includeDeviceTable = true) => {
+  if (refreshing.value) return;
+  refreshing.value = true;
+  try {
+    const [statisticsErrors, alarmErrors] = await Promise.all([loadStatistics(), loadAlarmSummary()]);
+    if (isUnmounted) return;
+    if (includeDeviceTable && !deviceState.loading) await getDeviceDataList(false);
+    moduleErrors.value = [...statisticsErrors, ...alarmErrors];
+    lastUpdated.value = dayjs().format("HH:mm:ss");
+  } finally {
+    if (!isUnmounted) {
+      dashboardLoading.value = false;
+      refreshing.value = false;
+    }
+  }
+};
+
+const handleManualRefresh = async () => {
+  await refreshDashboard(true);
+  if (!moduleErrors.value.length) message.success("设备统计数据已更新");
+};
+
+const handleRangeChange = () => {
+  refreshDashboard(false);
+};
+
+const handleDeviceSearch = () => {
+  getDeviceDataList();
+};
+
+const resetDeviceQuery = () => {
+  deviceQueryRef.value?.resetFields();
+  Object.assign(deviceState.queryForm, {
+    deviceName: "",
+    deviceCategory: "",
+    isOnline: "",
+  });
+  getDeviceDataList();
+};
+
+/**
+ * 跳转告警记录页时携带可用筛选条件，保持普通后台布局。
+ */
+const navigateToAlarmPage = (row?: DeviceAlarmSummaryItem) => {
+  const params: Record<string, any> = {};
+  if (row?.alarmCode) params.alarmCode = row.alarmCode;
+  if (row?.deviceName) params.deviceName = row.deviceName;
+  if (row?.alarmDate) {
+    params.alarmDateList = [
+      dayjs(row.alarmDate).startOf("day").format("YYYY-MM-DD HH:mm:ss"),
+      dayjs(row.alarmDate).endOf("day").format("YYYY-MM-DD HH:mm:ss"),
+    ];
+  }
+
+  router.push({
+    path: "/alarm/alarm-record/index",
+    query: {
+      action: "admin",
+      params: JSON.stringify(params),
+    },
+  });
+};
+
+const resizeCharts = () => {
+  if (resizeFrame) window.cancelAnimationFrame(resizeFrame);
+  resizeFrame = window.requestAnimationFrame(() => {
+    Object.values(chartInstances).forEach((instance) => instance?.resize());
+  });
+};
+
+const setupResizeObserver = () => {
+  if (typeof ResizeObserver === "undefined") return;
+  resizeObserver = new ResizeObserver(resizeCharts);
+  [distributionChartRef, statusChartRef, onlineChartRef, areaChartRef, alarmChartRef].forEach((elementRef) => {
+    if (elementRef.value) resizeObserver?.observe(elementRef.value);
+  });
+};
+
+const handleMotionPreferenceChange = (event: MediaQueryListEvent) => {
+  reduceMotion.value = event.matches;
+  renderAllCharts();
+};
+
+onMounted(async () => {
+  motionMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+  reduceMotion.value = motionMediaQuery.matches;
+  motionMediaQuery.addEventListener?.("change", handleMotionPreferenceChange);
+
+  await nextTick();
+  renderAllCharts();
+  setupResizeObserver();
+  await refreshDashboard(true);
+
+  // 统计页每 10 秒自动刷新，并通过 refreshDashboard 防止请求重叠。
+  if (!isUnmounted) pollTimer = window.setInterval(() => refreshDashboard(true), 10_000);
+});
+
+onBeforeUnmount(() => {
+  isUnmounted = true;
+  if (pollTimer) window.clearInterval(pollTimer);
+  if (resizeFrame) window.cancelAnimationFrame(resizeFrame);
+  resizeObserver?.disconnect();
+  motionMediaQuery?.removeEventListener?.("change", handleMotionPreferenceChange);
+  Object.values(chartInstances).forEach((instance) => instance?.dispose());
+});
+</script>
+
+<style scoped lang="scss">
+.device-statistics-page {
+  --dashboard-primary: #2563eb;
+  --dashboard-success: #047857;
+  --dashboard-danger: #dc2626;
+  --dashboard-warning: #b45309;
+  --dashboard-info: #0369a1;
+  --dashboard-surface: var(--el-bg-color, #ffffff);
+  --dashboard-page: var(--next-bg-main-color, #f1f5f9);
+  --dashboard-border: var(--el-border-color-light, #e2e8f0);
+  --dashboard-text: var(--el-text-color-primary, #1e293b);
+  --dashboard-muted: var(--el-text-color-secondary, #64748b);
+
+  .layout-padding-auto {
+    min-width: 0;
+    padding: 12px;
+    background: var(--dashboard-page);
+  }
+}
+
+.device-dashboard {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 4px 4px 24px;
+  color: var(--dashboard-text);
+  scrollbar-gutter: stable;
+}
+
+.dashboard-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 12px 4px 20px;
+}
+
+.dashboard-heading,
+.dashboard-actions,
+.dashboard-heading__icon,
+.update-time,
+.error-banner,
+.error-banner__content,
+.panel-header,
+.kpi-card {
+  display: flex;
+  align-items: center;
+}
+
+.dashboard-heading {
+  min-width: 0;
+  gap: 12px;
+
+  h1 {
+    margin: 0;
+    font-size: 22px;
+    line-height: 1.35;
+    font-weight: 700;
+    letter-spacing: 0;
+  }
+
+  p {
+    margin: 4px 0 0;
+    color: var(--dashboard-muted);
+    font-size: 13px;
+    line-height: 1.5;
+  }
+}
+
+.dashboard-heading__icon {
+  flex: 0 0 44px;
+  width: 44px;
+  height: 44px;
+  justify-content: center;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  background: #eff6ff;
+  color: var(--dashboard-primary);
+  font-size: 22px;
+}
+
+.dashboard-actions {
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.update-time {
+  height: 44px;
+  justify-content: center;
+  gap: 8px;
+  color: var(--dashboard-muted);
+  font-size: 13px;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.update-time__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--dashboard-success);
+  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.1);
+}
+
+/* 顶部操作控件统一高度和行高，保证文字在按钮内严格居中。 */
+.range-switch {
+  display: inline-flex;
+  align-items: stretch;
+
+  :deep(.el-radio-button) {
+    display: inline-flex;
+  }
+
+  :deep(.el-radio-button__inner) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 20px;
+  }
+}
+
+.refresh-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 44px;
+
+  :deep(span) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 20px;
+  }
+}
+
+.error-banner {
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+  padding: 10px 14px;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  background: #fef2f2;
+  color: #991b1b;
+  font-size: 13px;
+
+  :deep(.el-button) {
+    min-height: 44px;
+  }
+}
+
+.error-banner__content {
+  min-width: 0;
+  gap: 8px;
+  line-height: 1.5;
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+  min-height: 126px;
+  margin-bottom: 12px;
+}
+
+.kpi-card,
+.data-panel {
+  border: 1px solid var(--dashboard-border);
+  border-radius: 8px;
+  background: var(--dashboard-surface);
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
+}
+
+.kpi-card {
+  position: relative;
+  min-width: 0;
+  min-height: 126px;
+  gap: 14px;
+  padding: 18px;
+  overflow: hidden;
+  transition: border-color 200ms ease, box-shadow 200ms ease;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: currentColor;
+    content: "";
+  }
+
+  &:hover {
+    border-color: #bfdbfe;
+    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
+  }
+}
+
+.kpi-card__icon {
+  display: grid;
+  flex: 0 0 44px;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border-radius: 8px;
+  background: currentColor;
+  font-size: 22px;
+
+  .el-icon {
+    color: #ffffff;
+  }
+}
+
+.kpi-card__content {
+  min-width: 0;
+  color: var(--dashboard-text);
+
+  p,
+  small {
+    margin: 0;
+    color: var(--dashboard-muted);
+  }
+
+  p {
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  small {
+    display: block;
+    margin-top: 6px;
+    font-size: 12px;
+  }
+}
+
+.kpi-card__value {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  margin-top: 4px;
+  font-variant-numeric: tabular-nums;
+
+  strong {
+    overflow-wrap: anywhere;
+    color: var(--dashboard-text);
+    font-size: 28px;
+    line-height: 1.15;
+    font-weight: 700;
+    letter-spacing: 0;
+  }
+
+  span {
+    color: var(--dashboard-muted);
+    font-size: 13px;
+  }
+}
+
+.kpi-card--primary {
+  color: var(--dashboard-primary);
+}
+
+.kpi-card--success {
+  color: var(--dashboard-success);
+}
+
+.kpi-card--danger {
+  color: var(--dashboard-danger);
+}
+
+.kpi-card--warning {
+  color: var(--dashboard-warning);
+}
+
+.kpi-card--info {
+  color: var(--dashboard-info);
+}
+
+.charts-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.chart-panel--one-third {
+  grid-column: span 4;
+}
+
+.chart-panel--two-thirds {
+  grid-column: span 8;
+}
+
+.data-panel {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.panel-header {
+  justify-content: space-between;
+  min-height: 66px;
+  gap: 16px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--dashboard-border);
+
+  :deep(.el-button) {
+    min-height: 44px;
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    line-height: 1.4;
+    font-weight: 650;
+    letter-spacing: 0;
+  }
+
+  p {
+    margin: 3px 0 0;
+    color: var(--dashboard-muted);
+    font-size: 12px;
+    line-height: 1.4;
+  }
+}
+
+.panel-header--table {
+  min-height: 72px;
+}
+
+.panel-header__metric,
+.table-total {
+  color: var(--dashboard-primary);
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-canvas {
+  width: 100%;
+  height: 290px;
+  min-height: 290px;
+}
+
+.chart-summary {
+  min-height: 52px;
+  margin: 0;
+  padding: 10px 16px;
+  border-top: 1px solid var(--dashboard-border);
+  color: var(--dashboard-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.alarm-panel,
+.device-table-panel {
+  margin-bottom: 12px;
+}
+
+.table-scroll {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.clickable-table :deep(.el-table__row) {
+  cursor: pointer;
+  transition: background-color 180ms ease;
+}
+
+.device-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 12px;
+  padding: 14px 16px 2px;
+  border-bottom: 1px solid var(--dashboard-border);
+
+  :deep(.el-form-item) {
+    min-width: 220px;
+    margin-right: 0;
+  }
+
+  :deep(.el-input),
+  :deep(.el-select) {
+    width: 160px;
+  }
+}
+
+.device-filters__actions {
+  min-width: auto !important;
+}
+
+.device-table-panel :deep(.pagination-container) {
+  padding: 12px 16px;
+}
+
+@media (max-width: 1400px) {
+  .kpi-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1100px) {
+  .dashboard-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .dashboard-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .chart-panel--one-third,
+  .chart-panel--two-thirds {
+    grid-column: span 6;
+  }
+}
+
+@media (max-width: 768px) {
+  .device-statistics-page .layout-padding-auto {
+    padding: 8px;
+  }
+
+  .device-dashboard {
+    padding-bottom: 16px;
+  }
+
+  .dashboard-actions,
+  .range-switch {
+    width: 100%;
+  }
+
+  .range-switch {
+    display: flex;
+
+    :deep(.el-radio-button) {
+      flex: 1;
+    }
+
+    :deep(.el-radio-button__inner) {
+      width: 100%;
+    }
+  }
+
+  .update-time {
+    width: 100%;
+  }
+
+  .kpi-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .chart-panel--one-third,
+  .chart-panel--two-thirds {
+    grid-column: 1 / -1;
+  }
+
+  .panel-header {
+    align-items: flex-start;
+  }
+
+  .device-filters {
+    display: block;
+
+    :deep(.el-form-item),
+    :deep(.el-input),
+    :deep(.el-select) {
+      width: 100%;
+      min-width: 0;
+    }
+
+    :deep(.el-input__wrapper),
+    :deep(.el-select__wrapper) {
+      min-height: 44px;
+    }
+  }
+
+  .device-filters__actions :deep(.el-form-item__content) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+
+    .el-button {
+      min-height: 44px;
+      margin-left: 0;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .dashboard-heading {
+    align-items: flex-start;
+  }
+
+  .kpi-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .kpi-card {
+    min-height: 112px;
+  }
+
+  .error-banner {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .chart-canvas {
+    height: 270px;
+    min-height: 270px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+  .kpi-card,
+  .clickable-table :deep(.el-table__row) {
+    transition: none;
+  }
+}
+</style>
diff --git a/src/views/base/deviceCamera/index.vue b/src/views/base/deviceCamera/index.vue
new file mode 100644
index 0000000..e180769
--- /dev/null
+++ b/src/views/base/deviceCamera/index.vue
@@ -0,0 +1,7 @@
+<template>
+    <camera-list />
+</template>
+
+<script setup lang="ts" name="baseDeviceCamera">
+import CameraList from "../../device/components/camera-list.vue";
+</script>
diff --git a/src/views/base/rc/auto.vue b/src/views/base/rc/auto.vue
new file mode 100644
index 0000000..84814f6
--- /dev/null
+++ b/src/views/base/rc/auto.vue
@@ -0,0 +1,7 @@
+<template>
+  <job-manage-list />
+</template>
+
+<script setup lang="ts" name="baseAuto">
+import JobManageList from '../../tools/job-manage/components/job-manage-list.vue';
+</script>
diff --git a/src/views/base/rc/car.vue b/src/views/base/rc/car.vue
new file mode 100644
index 0000000..10fc2de
--- /dev/null
+++ b/src/views/base/rc/car.vue
@@ -0,0 +1,7 @@
+<template>
+  <car-manage-list />
+</template>
+
+<script setup lang="ts" name="baseCar">
+import CarManageList from '../../car/components/car-manage-list.vue';
+</script>
diff --git a/src/views/base/rc/person.vue b/src/views/base/rc/person.vue
new file mode 100644
index 0000000..45def9f
--- /dev/null
+++ b/src/views/base/rc/person.vue
@@ -0,0 +1,7 @@
+<template>
+  <person-list />
+</template>
+
+<script setup lang="ts" name="basePerson">
+import PersonList from '../../sys/sysPerson/components/person-list.vue';
+</script>
diff --git a/src/views/base/ss/area.vue b/src/views/base/ss/area.vue
new file mode 100644
index 0000000..c677420
--- /dev/null
+++ b/src/views/base/ss/area.vue
@@ -0,0 +1,7 @@
+<template>
+  <area-manage-list />
+</template>
+
+<script setup lang="ts" name="baseArea">
+import AreaManageList from '../../area/_components/areaManageList.vue';
+</script>
diff --git a/src/views/base/ss/jkList.vue b/src/views/base/ss/jkList.vue
new file mode 100644
index 0000000..619718e
--- /dev/null
+++ b/src/views/base/ss/jkList.vue
@@ -0,0 +1,7 @@
+<template>
+    <camera-list :actions="['detail', 'preview', 'replay']" :enable-crud="false" />
+</template>
+
+<script setup lang="ts" name="baseJkList">
+import CameraList from "../../device/components/camera-list.vue";
+</script>
diff --git a/src/views/base/ss/sbList.vue b/src/views/base/ss/sbList.vue
new file mode 100644
index 0000000..36393d4
--- /dev/null
+++ b/src/views/base/ss/sbList.vue
@@ -0,0 +1,7 @@
+<template>
+    <camera-list :actions="['preview', 'replay', 'edit', 'delete']" :enable-crud="true" />
+</template>
+
+<script setup lang="ts" name="baseSbList">
+import CameraList from "../../device/components/camera-list.vue";
+</script>
diff --git a/src/views/base/ss/ssType.vue b/src/views/base/ss/ssType.vue
new file mode 100644
index 0000000..62127bf
--- /dev/null
+++ b/src/views/base/ss/ssType.vue
@@ -0,0 +1,7 @@
+<template>
+    <dict-table dict-key="device_category" />
+</template>
+
+<script setup lang="ts" name="baseSsType">
+import DictTable from '../../admin/dict/components/dict-table.vue';
+</script>
diff --git a/src/views/car/carAccess/index.vue b/src/views/car/carAccess/index.vue
index 6f0fbee..1327cd1 100644
--- a/src/views/car/carAccess/index.vue
+++ b/src/views/car/carAccess/index.vue
@@ -1,6 +1,6 @@
 <!-- 车辆进出管理 -->
 <template>
-  <div class="layout-padding">
+  <div :class="{ 'layout-padding': !props.embedded, 'embedded-access-list': props.embedded }">
     <div class="layout-padding-auto layout-padding-view">
       <el-row shadow="hover" v-show="showSearch" class="ml10">
         <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
@@ -33,24 +33,16 @@
           </el-form-item>
         </el-form>
       </el-row>
-      <el-row v-if="false">
+      <el-row v-if="props.readOnly">
         <div class="mb8" style="width: 100%">
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-            v-auth="'car_carAccess_add'">
-            新 增
-          </el-button>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'car_carAccess_del'"
-            @click="handleDelete(selectObjs)">
-            删除
-          </el-button>
-          <right-toolbar v-model:showSearch="showSearch" :export="false" @exportExcel="exportExcel" class="ml10 mr20"
-            style="float: right;" @queryTable="getDataList"></right-toolbar>
+          <el-button icon="Download" @click="exportExcel">导出</el-button>
+          <el-button icon="Refresh" @click="getDataList(false)">刷新</el-button>
         </div>
       </el-row>
       <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
         :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
         @sort-change="sortChangeHandle">
-        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column v-if="!props.readOnly" type="selection" width="40" align="center" />
         <el-table-column type="index" label="#" width="80" />
 
         <el-table-column v-if="false" label="车辆信息">
@@ -71,6 +63,7 @@
             </template>
           </el-table-column>
           <el-table-column prop="enterTime" sortable min-width="180" label="入场时间" />
+          <el-table-column prop="enterSluiceDevChnName" min-width="150" label="入场道闸通道" show-overflow-tooltip />
           <el-table-column prop="parseOriginalPicPathEnter" min-width="100" label="抓拍图片">
             <template #default="{ row }">
               <preview-image width="50px" height="50px" v-if="row.parseOriginalPicPathEnter"
@@ -82,6 +75,7 @@
         <el-table-column label="出场">
           <el-table-column prop="exitCarNum" min-width="100" label="出场车牌号" />
           <el-table-column prop="exitTime" sortable min-width="180" label="出场时间" />
+          <el-table-column prop="exitSluiceDevChnName" min-width="150" label="出场道闸通道" show-overflow-tooltip />
           <el-table-column prop="parseOriginalPicPathExit" min-width="100" label="抓拍图片">
             <template #default="{ row }">
               <preview-image width="50px" height="50px" v-if="row.parseOriginalPicPathExit"
@@ -101,7 +95,7 @@
     </div>
 
     <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+    <form-dialog v-if="!props.readOnly" ref="formDialogRef" @refresh="getDataList(false)" />
 
   </div>
 </template>
@@ -115,6 +109,12 @@ import { getDefaultAlarmDateList } from "/@/utils/other"
 
 import * as CarAccessApi from "/@/api/car/carAccess";
 
+const props = defineProps({
+  readOnly: { type: Boolean, default: false },
+  embedded: { type: Boolean, default: false },
+  active: { type: Boolean, default: false },
+})
+
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
 // 定义查询字典
@@ -158,9 +158,21 @@ const resetQuery = () => {
 
 // 导出excel
 const exportExcel = () => {
-  downBlobFile('/car/carAccess/export', Object.assign(state.queryForm, { ids: selectObjs }), 'carAccess.xlsx')
+  downBlobFile('/admin/car/carAccess/export', { ...state.queryForm }, '车辆进出记录.xlsx')
 }
 
+let refreshTimer: ReturnType<typeof setInterval> | undefined
+watch(() => props.active, (active) => {
+  if (refreshTimer) clearInterval(refreshTimer)
+  refreshTimer = undefined
+  if (props.readOnly && active) {
+    refreshTimer = setInterval(() => getDataList(false), 10000)
+  }
+}, { immediate: true })
+onBeforeUnmount(() => {
+  if (refreshTimer) clearInterval(refreshTimer)
+})
+
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
   selectObjs.value = objs.map(({ id }) => id);
@@ -183,4 +195,11 @@ const handleDelete = async (ids: string[]) => {
     useMessage().error(err.msg);
   }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.embedded-access-list :deep(.layout-padding-auto) {
+  height: auto;
+  min-height: 0;
+}
+</style>
diff --git a/src/views/car/carManage/index.vue b/src/views/car/carManage/index.vue
index 6ba2232..3731920 100644
--- a/src/views/car/carManage/index.vue
+++ b/src/views/car/carManage/index.vue
@@ -1,217 +1,7 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <el-row shadow="hover" v-show="showSearch" class="ml10">
-        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-          <el-form-item style="width: 250px;" label="车牌号" prop="carNum">
-            <el-input v-model="state.queryForm.carNum" placeholder="请输入车牌号" />
-          </el-form-item>
-          <el-form-item style="width: 250px;" label="是否军车" prop="isArmyCar">
-            <dict-select v-model="state.queryForm.isArmyCar" :options="yes_no_type" placeholder="请选择" />
-          </el-form-item>
-          <el-form-item style="width: 250px;" label="车主姓名" prop="personName">
-            <el-input v-model="state.queryForm.personName" placeholder="请输入车主姓名" />
-          </el-form-item>
-          <el-form-item style="width: 250px;" label="车辆类型" prop="carType">
-            <dict-select v-model="state.queryForm.carType" :options="dh_car_type" placeholder="请选择车辆类型" />
-          </el-form-item>
-          <el-form-item>
-            <el-button icon="search" type="primary" @click="getDataList">
-              {{ $t('common.queryBtn') }}
-            </el-button>
-            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-            v-auth="'car_carManage_add'">
-            新 增
-          </el-button>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'car_carManage_del'"
-            @click="handleDelete(selectObjs)">
-            删除
-          </el-button>
-          <right-toolbar v-model:showSearch="showSearch" :export="'car_carManage_export'" @exportExcel="exportExcel"
-            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
-        </div>
-      </el-row>
-      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-        @sort-change="sortChangeHandle">
-        <el-table-column type="selection" width="40" align="center" />
-        <el-table-column type="index" label="#" width="80" />
-
-        <el-table-column label="人员">
-          <el-table-column prop="personName" label="姓名" min-width="100" show-overflow-tooltip />
-          <el-table-column prop="personPhone" label="手机号" min-width="120" />
-          <el-table-column prop="deptName" label="部门" min-width="100" />
-        </el-table-column>
-
-        <el-table-column label="车辆">
-          <el-table-column prop="carCode" label="车辆编号" min-width="200" show-overflow-tooltip />
-          <el-table-column prop="carType" label="车辆类型" min-width="100">
-            <template #default="{ row }">
-              <dict-tag :options="dh_car_type" :value="row.carType" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="carStatus" label="车辆状态" min-width="100">
-            <template #default="{ row }">
-              <dict-tag :options="dh_car_status" :value="row.carStatus" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="carBrand" label="车辆品牌" min-width="100">
-            <template #default="{ row }">
-              <dict-tag :options="dh_car_brand" :value="row.carBrand" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="carColor" label="车辆颜色" min-width="100">
-            <template #default="{ row }">
-              <dict-tag :options="dh_car_color" :value="row.carColor" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="carNum" label="车牌号" min-width="120" />
-          <el-table-column prop="carNumColor" label="车牌颜色" min-width="100">
-            <template #default="{ row }">
-              <dict-tag :options="dh_car_num_color" :value="row.carNumColor" />
-            </template>
-          </el-table-column>
-        </el-table-column>
-        <el-table-column prop="listType" label="黑白名单状态" min-width="120">
-          <template #default="{ row }">
-            <dict-tag :options="dh_car_list_type" :value="row.listType" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="memo" label="备注信息" min-width="200" show-overflow-tooltip />
-        <el-table-column label="数据同步配置" min-width="150">
-          <template #default="{ row }">
-            <dict-tag :options="user_sync_config" :value="row.syncConfigType" />
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="160" fixed="right" v-auths="['car_carManage_edit']">
-          <template #default="{ row }">
-            <div class="grid grid-cols-2 gap-2 w-full">
-              <el-button style="margin: 0;" icon="Reading" text type="primary" v-auth="'car_carManage_edit'"
-                @click="syncConfigFormRef.openDialog(row.id)">
-                同步设置
-              </el-button>
-              <el-button style="margin: 0;" icon="edit-pen" text type="primary" v-auth="'car_carManage_edit'"
-                @click="formDialogRef.openDialog(row.id)">
-                编辑
-              </el-button>
-              <el-button style="margin: 0;" icon="delete" text type="primary" v-auth="'car_carManage_del'"
-                @click="handleDelete([row.id])">
-                删除
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-    </div>
-
-    <!-- 编辑、新增  -->
-    <form-dialog ref="syncConfigFormRef" @refresh="getDataList(false)" />
-    <car-form ref="formDialogRef" @refresh="getDataList(false)" />
-
-  </div>
+  <car-manage-list />
 </template>
 
 <script setup lang="ts" name="systemCarManage">
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import { fetchList, delObjs } from "/@/api/car/carManage";
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
-import { usePanel } from "/@/stores/panel"
-import dayjs from "dayjs";
-
-const storesPanel = usePanel()
-
-// 引入组件
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
-const CarForm = defineAsyncComponent(() => import('./car-form.vue'));
-// 定义查询字典
-const { dh_car_color, dh_car_num_color, dh_car_brand, dh_car_type, dh_car_status, dh_car_list_type, yes_no_type, user_sync_config } = useDict("dh_car_color", "dh_car_num_color", "dh_car_brand", "dh_car_type", "dh_car_status", "dh_car_list_type", "yes_no_type", "user_sync_config")
-
-// 定义变量内容
-const formDialogRef = ref()
-const syncConfigFormRef = ref()
-// 搜索变量
-const queryRef = ref()
-const showSearch = ref(true)
-// 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
-
-const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
-  pageList: fetchList
-})
-
-//  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  postDownBlobFile,
-  tableStyle
-} = useTable(state)
-
-onBeforeMount(() => {
-  const query: any = useRoute().query
-  if (query && query.action == 'panel') {
-    if (query.params) {
-      Object.assign(state.queryForm, JSON.parse(query.params))
-      getDataList()
-    }
-    storesPanel.openFromPanel()
-  }
-})
-
-onBeforeUnmount(() => {
-  const query = useRoute().query
-  if (query && query.action == 'panel') {
-    storesPanel.closeFromPanel()
-  }
-})
-
-// 清空搜索条件
-const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  getDataList()
-}
-
-// 导出excel
-const exportExcel = () => {
-  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
-  postDownBlobFile('/admin/car/carManage/export', Object.assign(state.queryForm, { ids: selectObjs }), `车辆管理_${timeSuffix}.xlsx`)
-}
-
-// 多选事件
-const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
-  multiple.value = !objs.length;
-};
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
-
-  try {
-    await delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
+import CarManageList from '../components/car-manage-list.vue';
 </script>
diff --git a/src/views/car/carRecord/index.vue b/src/views/car/carRecord/index.vue
index 23110a8..4d1212f 100644
--- a/src/views/car/carRecord/index.vue
+++ b/src/views/car/carRecord/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-padding">
+  <div :class="{ 'layout-padding': !props.embedded, 'embedded-record-list': props.embedded }">
     <div class="layout-padding-auto layout-padding-view">
       <el-row shadow="hover" v-show="showSearch" class="ml10">
         <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
@@ -34,15 +34,17 @@
       </el-row>
       <el-row>
         <div class="mb8" style="width: 100%">
-          <el-button v-auth="'sys_user_add'" icon="Refresh" type="primary" @click="dataCleaning">
+          <el-button v-if="!props.readOnly" v-auth="'sys_user_add'" icon="Refresh" type="primary" @click="dataCleaning">
             清洗数据
           </el-button>
+          <el-button v-else icon="Download" @click="exportExcel">导出</el-button>
+          <el-button v-if="props.readOnly" icon="Refresh" @click="getDataList(false)">刷新</el-button>
         </div>
       </el-row>
       <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
         :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
         @sort-change="sortChangeHandle">
-        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column v-if="!props.readOnly" type="selection" width="40" align="center" />
         <el-table-column type="index" label="#" width="80" />
         <el-table-column prop="capTime" min-width="180" label="抓拍时间" />
         <el-table-column label="车辆信息">
@@ -51,6 +53,13 @@
               <dict-tag :options="dh_car_direct" :value="row.carDirect" />
             </template>
           </el-table-column>
+          <el-table-column prop="strobeState" width="130" label="自动开闸结果">
+            <template #default="{ row }">
+              <el-tag v-if="row.strobeState === '1'" type="success">白名单开闸</el-tag>
+              <el-tag v-else-if="row.strobeState === '0'" type="info">未开闸</el-tag>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
           <el-table-column prop="carColor" width="120" label="车辆颜色">
             <template #default="{ row }">
               <dict-tag :options="dh_car_color" :value="row.carColor" />
@@ -66,9 +75,9 @@
             <template #default="{ row }">
               <div class="flex items-center gap-2">
                 <dict-tag v-if="row.carNumColor" :options="dh_car_num_color" :value="row.carNumColor" />
-                <el-tag v-else type="danger">未知</el-tag>
+                <el-tag v-else type="danger">未识别</el-tag>
                 <span v-if="row.carNum">{{ row.carNum }}</span>
-                <span v-else class="color-danger">未知</span>
+                <span v-else class="color-danger">未识别</span>
               </div>
             </template>
           </el-table-column>
@@ -110,7 +119,7 @@
           </el-table-column>
         </el-table-column>
 
-        <el-table-column label="操作" width="150" fixed="right">
+        <el-table-column v-if="!props.readOnly" label="操作" width="150" fixed="right">
           <template #default="{ row }">
             <el-button icon="edit-pen" text type="primary" v-if="false" v-auth="'car_carRecord_edit'"
               @click="formDialogRef.openDialog(row.id)">编辑</el-button>
@@ -123,7 +132,7 @@
     </div>
 
     <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+    <form-dialog v-if="!props.readOnly" ref="formDialogRef" @refresh="getDataList(false)" />
 
   </div>
 </template>
@@ -141,6 +150,12 @@ import * as ComDhSettingApi from "/@/api/com/comDhSetting";
 
 import CarPersonName from "../components/carPersonName.vue"
 
+const props = defineProps({
+  readOnly: { type: Boolean, default: false },
+  embedded: { type: Boolean, default: false },
+  active: { type: Boolean, default: false },
+})
+
 const storesPanel = usePanel()
 
 // 引入组件
@@ -171,7 +186,7 @@ const {
   currentChangeHandle,
   sizeChangeHandle,
   sortChangeHandle,
-  downBlobFile,
+  postDownBlobFile,
   tableStyle
 } = useTable(state)
 
@@ -184,6 +199,10 @@ const resetQuery = () => {
   getDataList()
 }
 
+const exportExcel = () => {
+  postDownBlobFile('/admin/car/carRecord/export', { ...state.queryForm }, '车辆识别记录.xlsx')
+}
+
 // 获取大华配置
 const getDhSetting = async () => {
   try {
@@ -209,12 +228,22 @@ onBeforeMount(() => {
 })
 
 onBeforeUnmount(() => {
+  if (refreshTimer) clearInterval(refreshTimer)
   const query = useRoute().query
   if (query && query.action == 'panel') {
     storesPanel.closeFromPanel()
   }
 })
 
+let refreshTimer: ReturnType<typeof setInterval> | undefined
+watch(() => props.active, (active) => {
+  if (refreshTimer) clearInterval(refreshTimer)
+  refreshTimer = undefined
+  if (props.readOnly && active) {
+    refreshTimer = setInterval(() => getDataList(false), 10000)
+  }
+}, { immediate: true })
+
 onMounted(() => {
   getDhSetting()
 })
@@ -256,4 +285,11 @@ const handleDelete = async (ids: string[]) => {
     useMessage().error(err.msg);
   }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.embedded-record-list :deep(.layout-padding-auto) {
+  height: auto;
+  min-height: 0;
+}
+</style>
diff --git a/src/views/car/components/car-manage-list.vue b/src/views/car/components/car-manage-list.vue
new file mode 100644
index 0000000..fc4da80
--- /dev/null
+++ b/src/views/car/components/car-manage-list.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-row shadow="hover" v-show="showSearch" class="ml10">
+        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+          <el-form-item style="width: 250px;" label="车牌号" prop="carNum">
+            <el-input v-model="state.queryForm.carNum" placeholder="请输入车牌号" />
+          </el-form-item>
+          <el-form-item style="width: 250px;" label="是否军车" prop="isArmyCar">
+            <dict-select v-model="state.queryForm.isArmyCar" :options="yes_no_type" placeholder="请选择" />
+          </el-form-item>
+          <el-form-item style="width: 250px;" label="车主姓名" prop="personName">
+            <el-input v-model="state.queryForm.personName" placeholder="请输入车主姓名" />
+          </el-form-item>
+          <el-form-item style="width: 250px;" label="车辆类型" prop="carType">
+            <dict-select v-model="state.queryForm.carType" :options="dh_car_type" placeholder="请选择车辆类型" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="search" type="primary" @click="getDataList">
+              {{ $t('common.queryBtn') }}
+            </el-button>
+            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+            v-auth="'car_carManage_add'">
+            新 增
+          </el-button>
+          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'car_carManage_del'"
+            @click="handleDelete(selectObjs)">
+            删除
+          </el-button>
+          <right-toolbar v-model:showSearch="showSearch" :export="'car_carManage_export'" @exportExcel="exportExcel"
+            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+        @sort-change="sortChangeHandle">
+        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column type="index" label="#" width="80" />
+
+        <el-table-column label="人员">
+          <el-table-column prop="personName" label="姓名" min-width="100" show-overflow-tooltip />
+          <el-table-column prop="personPhone" label="手机号" min-width="120" />
+          <el-table-column prop="deptName" label="部门" min-width="100" />
+        </el-table-column>
+
+        <el-table-column label="车辆">
+          <el-table-column prop="carCode" label="车辆编号" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="carType" label="车辆类型" min-width="100">
+            <template #default="{ row }">
+              <dict-tag :options="dh_car_type" :value="row.carType" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="carStatus" label="车辆状态" min-width="100">
+            <template #default="{ row }">
+              <dict-tag :options="dh_car_status" :value="row.carStatus" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="carBrand" label="车辆品牌" min-width="100">
+            <template #default="{ row }">
+              <dict-tag :options="dh_car_brand" :value="row.carBrand" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="carColor" label="车辆颜色" min-width="100">
+            <template #default="{ row }">
+              <dict-tag :options="dh_car_color" :value="row.carColor" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="carNum" label="车牌号" min-width="120" />
+          <el-table-column prop="carNumColor" label="车牌颜色" min-width="100">
+            <template #default="{ row }">
+              <dict-tag :options="dh_car_num_color" :value="row.carNumColor" />
+            </template>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column prop="listType" label="黑白名单状态" min-width="120">
+          <template #default="{ row }">
+            <dict-tag :options="dh_car_list_type" :value="row.listType" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="memo" label="备注信息" min-width="200" show-overflow-tooltip />
+        <el-table-column label="数据同步配置" min-width="150">
+          <template #default="{ row }">
+            <dict-tag :options="user_sync_config" :value="row.syncConfigType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right" v-auths="['car_carManage_edit']">
+          <template #default="{ row }">
+            <div class="grid grid-cols-2 gap-2 w-full">
+              <el-button style="margin: 0;" icon="Reading" text type="primary" v-auth="'car_carManage_edit'"
+                @click="syncConfigFormRef.openDialog(row.id)">
+                同步设置
+              </el-button>
+              <el-button style="margin: 0;" icon="edit-pen" text type="primary" v-auth="'car_carManage_edit'"
+                @click="formDialogRef.openDialog(row.id)">
+                编辑
+              </el-button>
+              <el-button style="margin: 0;" icon="delete" text type="primary" v-auth="'car_carManage_del'"
+                @click="handleDelete([row.id])">
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </div>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="syncConfigFormRef" @refresh="getDataList(false)" />
+    <car-form ref="formDialogRef" @refresh="getDataList(false)" />
+
+  </div>
+</template>
+
+<script setup lang="ts" name="carManageList">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObjs } from "/@/api/car/carManage";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+import { usePanel } from "/@/stores/panel"
+import dayjs from "dayjs";
+
+const storesPanel = usePanel()
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('../carManage/form.vue'));
+const CarForm = defineAsyncComponent(() => import('../carManage/car-form.vue'));
+// 定义查询字典
+const { dh_car_color, dh_car_num_color, dh_car_brand, dh_car_type, dh_car_status, dh_car_list_type, yes_no_type, user_sync_config } = useDict("dh_car_color", "dh_car_num_color", "dh_car_brand", "dh_car_type", "dh_car_status", "dh_car_list_type", "yes_no_type", "user_sync_config")
+
+// 定义变量内容
+const formDialogRef = ref()
+const syncConfigFormRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  postDownBlobFile,
+  tableStyle
+} = useTable(state)
+
+onBeforeMount(() => {
+  const query: any = useRoute().query
+  if (query && query.action == 'panel') {
+    if (query.params) {
+      Object.assign(state.queryForm, JSON.parse(query.params))
+      getDataList()
+    }
+    storesPanel.openFromPanel()
+  }
+})
+
+onBeforeUnmount(() => {
+  const query = useRoute().query
+  if (query && query.action == 'panel') {
+    storesPanel.closeFromPanel()
+  }
+})
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
+  postDownBlobFile('/admin/car/carManage/export', Object.assign(state.queryForm, { ids: selectObjs }), `车辆管理_${timeSuffix}.xlsx`)
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+</script>
diff --git a/src/views/collection/car/access.vue b/src/views/collection/car/access.vue
new file mode 100644
index 0000000..4e29fd0
--- /dev/null
+++ b/src/views/collection/car/access.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view access-page">
+      <header class="page-header">
+        <div>
+          <h2>出入道闸接入管理</h2>
+          <p>本地台账优先保存，可按设备选择同步到大华 ICC。</p>
+        </div>
+      </header>
+      <el-tabs v-model="activeTab" class="access-tabs">
+        <el-tab-pane label="道闸设备" name="devices" lazy>
+          <gate-device-list />
+        </el-tab-pane>
+        <el-tab-pane label="同步日志" name="logs" lazy>
+          <gate-log-list />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="collectionCarAccess">
+import GateDeviceList from "./components/gate-device-list.vue";
+import GateLogList from "./components/gate-log-list.vue";
+
+const activeTab = ref("devices");
+</script>
+
+<style scoped>
+.access-page {
+  display: block;
+  overflow-y: auto;
+  padding: 18px 22px;
+}
+
+.page-header h2 {
+  margin: 0;
+  font-size: 20px;
+  letter-spacing: 0;
+  color: var(--el-text-color-primary);
+}
+
+.page-header p {
+  margin: 7px 0 0;
+  color: var(--el-text-color-secondary);
+}
+
+.access-tabs {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/collection/car/components/gate-device-form.vue b/src/views/collection/car/components/gate-device-form.vue
new file mode 100644
index 0000000..dc9edf3
--- /dev/null
+++ b/src/views/collection/car/components/gate-device-form.vue
@@ -0,0 +1,202 @@
+<template>
+  <el-dialog v-model="visible" :title="form.id ? '编辑道闸设备' : '新增道闸设备'" width="920px"
+    :close-on-click-modal="false" draggable>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="125px" v-loading="loading">
+      <el-divider content-position="left">本地设备台账</el-divider>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="设备名称" prop="deviceName">
+            <el-input v-model="form.deviceName" maxlength="100" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备分类" prop="deviceCategory">
+            <el-select v-model="form.deviceCategory" class="w100">
+              <el-option label="出入口设备" value="35" />
+              <el-option label="独立道闸设备" value="36" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备厂商" prop="deviceManufacturer">
+            <dict-select v-model="form.deviceManufacturer" :options="dh_device_manufacturer" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备型号">
+            <el-input v-model="form.deviceModel" maxlength="100" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备 IP" prop="deviceIp">
+            <el-input v-model="form.deviceIp" maxlength="50" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备端口" prop="devicePort">
+            <el-input-number v-model="form.devicePort" :min="0" :max="65535" :controls="false" class="w100" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所属组织" prop="ownerCode">
+            <el-tree-select v-model="form.ownerCode" :data="deptData"
+              :props="{ value: 'id', label: 'name', children: 'children' }" check-strictly filterable clearable
+              class="w100" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="排序">
+            <el-input-number v-model="form.sortOrder" :min="0" :controls="false" class="w100" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-divider content-position="left">ICC 接入参数</el-divider>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="登录方式" prop="loginType">
+            <el-select v-model="form.loginType" class="w100" clearable>
+              <el-option label="IP/域名登录" value="0" />
+              <el-option label="主动注册" value="1" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="登录账号" prop="loginName">
+            <el-input v-model="form.loginName" maxlength="128" autocomplete="off" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备密码" prop="loginPassword">
+            <el-input v-model="form.loginPassword" type="password" show-password autocomplete="new-password"
+              :placeholder="form.passwordConfigured ? '已设置，留空表示不修改' : '请输入设备密码'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="道闸通道名称" prop="gateChannelName">
+            <el-input v-model="form.gateChannelName" maxlength="255" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="通道序号">
+            <el-input-number v-model="form.gateChannelSeq" :min="1" :controls="false" class="w100" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="canManageIcc" :span="12">
+          <el-form-item label="保存后同步">
+            <el-switch v-model="form.syncToIcc" active-text="同步到 ICC" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-alert type="info" :closable="false" show-icon
+            title="本地台账会优先保存；ICC 推送失败时可在列表查看原因并单条重试。" />
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="submit">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="GateDeviceForm">
+import { deptTree } from "/@/api/admin/dept";
+import * as GateApi from "/@/api/collection/gate";
+import { useDict } from "/@/hooks/dict";
+import { useMessage } from "/@/hooks/message";
+import { auth } from "/@/utils/authFunction";
+
+const emit = defineEmits(["refresh"]);
+const { dh_device_manufacturer } = useDict("dh_device_manufacturer");
+const visible = ref(false);
+const loading = ref(false);
+const formRef = ref();
+const deptData = ref<any[]>([]);
+const canManageIcc = computed(() => auth("collection_gate_icc_manage"));
+
+const initialForm = () => ({
+  id: "",
+  deviceName: "",
+  deviceCode: "",
+  deviceCategory: "35",
+  deviceType: "",
+  deviceManufacturer: "",
+  deviceModel: "",
+  deviceIp: "",
+  devicePort: 37777 as number | undefined,
+  ownerCode: "",
+  memo: "",
+  sortOrder: 0,
+  loginType: "0",
+  loginName: "admin",
+  loginPassword: "",
+  passwordConfigured: false,
+  gateChannelName: "",
+  gateChannelSeq: 1,
+  syncToIcc: false,
+});
+
+const form = reactive(initialForm());
+const validatePassword = (_rule: any, value: string, callback: (error?: Error) => void) => {
+  if (form.syncToIcc && !form.passwordConfigured && !value) callback(new Error("同步到 ICC 时请输入设备密码"));
+  else callback();
+};
+const rules = {
+  deviceName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
+  deviceCategory: [{ required: true, message: "请选择设备分类", trigger: "change" }],
+  deviceManufacturer: [{ required: true, message: "请选择设备厂商", trigger: "change" }],
+  deviceIp: [
+    { required: true, message: "请输入设备 IP", trigger: "blur" },
+    { pattern: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}$/, message: "IP 地址格式不正确", trigger: "blur" },
+  ],
+  devicePort: [{ required: true, message: "请输入设备端口", trigger: "blur" }],
+  ownerCode: [{ required: true, message: "请选择所属组织", trigger: "change" }],
+  loginType: [{ required: true, message: "请选择登录方式", trigger: "change" }],
+  loginName: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
+  loginPassword: [{ validator: validatePassword, trigger: "blur" }],
+  gateChannelName: [{ required: true, message: "请输入道闸通道名称", trigger: "blur" }],
+};
+
+const openDialog = async (id?: string) => {
+  visible.value = true;
+  Object.assign(form, initialForm());
+  formRef.value?.clearValidate();
+  const treePromise = deptTree().then((res: any) => { deptData.value = res?.data || []; });
+  if (id) {
+    loading.value = true;
+    try {
+      const { data } = await GateApi.getDevice(id);
+      Object.assign(form, data, {
+        id,
+        devicePort: data?.devicePort ? Number(data.devicePort) : undefined,
+        loginPassword: "",
+        syncToIcc: false,
+      });
+    } finally {
+      loading.value = false;
+    }
+  }
+  await treePromise;
+};
+
+const submit = async () => {
+  const valid = await formRef.value?.validate().catch(() => false);
+  if (!valid) return;
+  loading.value = true;
+  try {
+    const payload = { ...form, devicePort: String(form.devicePort ?? "") };
+    const { data } = form.id ? await GateApi.updateDevice(payload) : await GateApi.addDevice(payload);
+    if (data?.iccSynced || !form.syncToIcc) useMessage().success(data?.message || "保存成功");
+    else useMessage().warning(data?.message || "本地已保存，ICC 同步失败");
+    visible.value = false;
+    emit("refresh");
+  } catch (error: any) {
+    useMessage().error(error?.msg || "保存失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+defineExpose({ openDialog });
+</script>
diff --git a/src/views/collection/car/components/gate-device-list.vue b/src/views/collection/car/components/gate-device-list.vue
new file mode 100644
index 0000000..67b2509
--- /dev/null
+++ b/src/views/collection/car/components/gate-device-list.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="gate-device-list">
+    <el-form ref="queryRef" :model="state.queryForm" inline @keyup.enter="getDataList">
+      <el-form-item label="设备名称" prop="deviceName">
+        <el-input v-model="state.queryForm.deviceName" placeholder="名称模糊查询" clearable />
+      </el-form-item>
+      <el-form-item label="设备 IP" prop="deviceIp">
+        <el-input v-model="state.queryForm.deviceIp" placeholder="IP 模糊查询" clearable />
+      </el-form-item>
+      <el-form-item label="设备分类" prop="deviceCategory">
+        <el-select v-model="state.queryForm.deviceCategory" clearable style="width: 180px">
+          <el-option label="出入口设备" value="35" />
+          <el-option label="独立道闸设备" value="36" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="同步状态" prop="syncStatus">
+        <el-select v-model="state.queryForm.syncStatus" clearable style="width: 150px">
+          <el-option label="未同步" value="0" />
+          <el-option label="同步成功" value="1" />
+          <el-option label="同步失败" value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div class="table-actions">
+      <div>
+        <el-button type="primary" icon="Plus" v-auth="'admin_deviceManage_add'" @click="formRef.openDialog()">
+          新增
+        </el-button>
+        <el-button icon="UploadFilled" @click="uploadRef.show()">导入</el-button>
+      </div>
+      <div>
+        <el-button icon="Download" v-auth="'admin_deviceManage_export'" @click="exportList">导出</el-button>
+        <el-button icon="Refresh" @click="getDataList(false)">刷新</el-button>
+      </div>
+    </div>
+
+    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+      :header-cell-style="tableStyle.headerCellStyle">
+      <el-table-column type="index" label="#" width="60" />
+      <el-table-column prop="deviceName" label="设备名称" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="deviceIp" label="IP" min-width="130" />
+      <el-table-column prop="devicePort" label="端口" width="90" />
+      <el-table-column label="设备分类" min-width="120">
+        <template #default="{ row }">{{ row.deviceCategory === '36' ? '独立道闸设备' : '出入口设备' }}</template>
+      </el-table-column>
+      <el-table-column prop="deviceManufacturer" label="厂商" width="110">
+        <template #default="{ row }">
+          <dict-tag :options="dh_device_manufacturer" :value="row.deviceManufacturer" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="orgName" label="所属组织" min-width="130" show-overflow-tooltip />
+      <el-table-column prop="gateChannelName" label="道闸通道" min-width="130" show-overflow-tooltip />
+      <el-table-column prop="loginName" label="登录账号" width="110" />
+      <el-table-column label="密码" width="90" align="center">
+        <template #default="{ row }">{{ row.passwordConfigured ? '已设置' : '未设置' }}</template>
+      </el-table-column>
+      <el-table-column label="ICC 同步" width="110" align="center">
+        <template #default="{ row }">
+          <el-tooltip v-if="row.syncStatus === '2'" :content="row.lastSyncError || '同步失败'" placement="top">
+            <el-tag type="danger">同步失败</el-tag>
+          </el-tooltip>
+          <el-tag v-else-if="row.syncStatus === '1'" type="success">同步成功</el-tag>
+          <el-tag v-else type="info">未同步</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="lastSyncTime" label="最近同步" min-width="170" />
+      <el-table-column label="操作" fixed="right" width="245">
+        <template #default="{ row }">
+          <el-button text type="primary" icon="RefreshRight" v-auth="'collection_gate_icc_manage'"
+            :loading="pushingId === row.id" @click="push(row)">同步 ICC</el-button>
+          <el-button text type="primary" icon="EditPen" v-auth="'admin_deviceManage_edit'"
+            @click="formRef.openDialog(row.id)">编辑</el-button>
+          <el-button text type="danger" icon="Delete" v-auth="'admin_deviceManage_del'"
+            @click="remove(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+
+    <gate-device-form ref="formRef" @refresh="getDataList(false)" />
+    <upload-excel ref="uploadRef" title="设备导入" url="/admin/deviceManage/read-excel"
+      temp-url="/admin/sys-file/local/file/device_import_temp.xlsx" @refreshDataList="getDataList(false)" />
+  </div>
+</template>
+
+<script setup lang="ts" name="GateDeviceList">
+import { ElMessageBox } from "element-plus";
+import dayjs from "dayjs";
+import * as GateApi from "/@/api/collection/gate";
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { useDict } from "/@/hooks/dict";
+import { useMessage } from "/@/hooks/message";
+import { auth } from "/@/utils/authFunction";
+import GateDeviceForm from "./gate-device-form.vue";
+
+const { dh_device_manufacturer } = useDict("dh_device_manufacturer");
+const queryRef = ref();
+const formRef = ref();
+const uploadRef = ref();
+const pushingId = ref("");
+const canManageIcc = computed(() => auth("collection_gate_icc_manage"));
+const state: BasicTableProps = reactive({ queryForm: {}, pageList: GateApi.devicePage });
+const { getDataList, sizeChangeHandle, currentChangeHandle, postDownBlobFile, tableStyle } = useTable(state);
+
+const resetQuery = () => {
+  queryRef.value?.resetFields();
+  getDataList();
+};
+
+const exportList = () => {
+  postDownBlobFile("/admin/deviceManage/export", {
+    ...state.queryForm,
+    deviceCategoryList: ["35", "36"],
+  }, `道闸设备_${dayjs().format("YYYY-MM-DD_HH-mm-ss")}.xlsx`);
+};
+
+const push = async (row: any) => {
+  pushingId.value = row.id;
+  try {
+    const { data } = await GateApi.pushDevice(row.id);
+    data?.iccSynced ? useMessage().success(data.message) : useMessage().warning(data?.message || "ICC 同步失败");
+    getDataList(false);
+  } catch (error: any) {
+    useMessage().error(error?.msg || "ICC 同步失败");
+  } finally {
+    pushingId.value = "";
+  }
+};
+
+const remove = async (row: any) => {
+  let deleteRemote = false;
+  if (row.iccDeviceCode && canManageIcc.value) {
+    try {
+      await ElMessageBox.confirm(
+        "该设备已同步到 ICC。请选择删除范围，远端删除会先调用 ICC，成功后才删除本地台账。",
+        "删除道闸设备",
+        {
+          type: "warning",
+          confirmButtonText: "同时删除 ICC",
+          cancelButtonText: "仅删除本地",
+          distinguishCancelAndClose: true,
+        },
+      );
+      deleteRemote = true;
+    } catch (action) {
+      if (action !== "cancel") return;
+    }
+  } else {
+    try {
+      const message = row.iccDeviceCode
+        ? "当前账号无 ICC 删除权限，本次只删除本地台账，ICC 设备会保留。是否继续？"
+        : "确认删除该本地道闸设备？";
+      await ElMessageBox.confirm(message, "删除道闸设备", { type: "warning" });
+    } catch {
+      return;
+    }
+  }
+  try {
+    await GateApi.removeDevice(row.id, deleteRemote);
+    useMessage().success("删除成功");
+    getDataList(false);
+  } catch (error: any) {
+    useMessage().error(error?.msg || "删除失败");
+  }
+};
+</script>
+
+<style scoped>
+.table-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+</style>
diff --git a/src/views/collection/car/components/gate-log-list.vue b/src/views/collection/car/components/gate-log-list.vue
new file mode 100644
index 0000000..91d0aab
--- /dev/null
+++ b/src/views/collection/car/components/gate-log-list.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <el-form ref="queryRef" :model="state.queryForm" inline @keyup.enter="getDataList">
+      <el-form-item label="接口类型" prop="type">
+        <el-input v-model="state.queryForm.type" placeholder="请求类型模糊查询" clearable />
+      </el-form-item>
+      <el-form-item label="请求方式" prop="method">
+        <el-select v-model="state.queryForm.method" clearable style="width: 130px">
+          <el-option label="GET" value="GET" />
+          <el-option label="POST" value="POST" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+      :header-cell-style="tableStyle.headerCellStyle">
+      <el-table-column type="index" label="#" width="60" />
+      <el-table-column prop="type" label="请求类型" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="method" label="方式" width="90" />
+      <el-table-column prop="url" label="接口地址" min-width="280" show-overflow-tooltip />
+      <el-table-column label="结果" width="90">
+        <template #default="{ row }">
+          <el-tag :type="row.errorMsg ? 'danger' : 'success'">{{ row.errorMsg ? '失败' : '成功' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="errorMsg" label="失败原因" min-width="220" show-overflow-tooltip />
+      <el-table-column prop="createTime" label="调用时间" width="180" />
+    </el-table>
+    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+  </div>
+</template>
+
+<script setup lang="ts" name="GateLogList">
+import * as ComDhLogApi from "/@/api/com/comDhLog";
+import { BasicTableProps, useTable } from "/@/hooks/table";
+
+const queryRef = ref();
+const state: BasicTableProps = reactive({ queryForm: {}, pageList: ComDhLogApi.fetchList });
+const { getDataList, sizeChangeHandle, currentChangeHandle, tableStyle } = useTable(state);
+const resetQuery = () => {
+  queryRef.value?.resetFields();
+  getDataList();
+};
+</script>
diff --git a/src/views/collection/car/components/gate-operation-list.vue b/src/views/collection/car/components/gate-operation-list.vue
new file mode 100644
index 0000000..cde5104
--- /dev/null
+++ b/src/views/collection/car/components/gate-operation-list.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <el-form ref="queryRef" :model="state.queryForm" inline @keyup.enter="getDataList">
+      <el-form-item label="车牌号" prop="carNum">
+        <el-input v-model="state.queryForm.carNum" clearable />
+      </el-form-item>
+      <el-form-item label="操作人" prop="ownerName">
+        <el-input v-model="state.queryForm.ownerName" clearable />
+      </el-form-item>
+      <el-form-item label="操作类型" prop="handFlag">
+        <el-select v-model="state.queryForm.handFlag" clearable style="width: 150px">
+          <el-option v-for="item in handFlagOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作时间" prop="dateRange">
+        <el-date-picker v-model="dateRange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
+          start-placeholder="开始时间" end-placeholder="结束时间" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="search">查询</el-button>
+        <el-button icon="Refresh" @click="reset">重置</el-button>
+        <el-button icon="Download" @click="exportList">导出</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+      :header-cell-style="tableStyle.headerCellStyle">
+      <el-table-column type="index" label="#" width="60" />
+      <el-table-column prop="devName" label="道闸设备" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="carDirectStr" label="方向" width="100" />
+      <el-table-column prop="capDateStr" label="操作时间" width="180" />
+      <el-table-column prop="operatorName" label="操作人" min-width="110" />
+      <el-table-column prop="carNum" label="车牌号" min-width="120">
+        <template #default="{ row }">
+          <span :class="{ 'color-danger': row.carNum === '未识别' }">{{ row.carNum || '未识别' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="handFlagStr" label="操作类型" min-width="130">
+        <template #default="{ row }">
+          <el-tag :type="row.handFlag === 4 || row.handFlag === 5 ? 'warning' : 'success'">{{ row.handFlagStr }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="ownerName" label="车主" min-width="120" />
+    </el-table>
+    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+  </div>
+</template>
+
+<script setup lang="ts" name="GateOperationList">
+import dayjs from "dayjs";
+import * as GateApi from "/@/api/collection/gate";
+import { BasicTableProps, useTable } from "/@/hooks/table";
+
+const queryRef = ref();
+const dateRange = ref<string[]>([]);
+const handFlagOptions = [
+  { label: "人工开闸", value: 1 },
+  { label: "忽略", value: 2 },
+  { label: "遥控开闸", value: 3 },
+  { label: "遥控关闸", value: 4 },
+  { label: "人工关闸", value: 5 },
+];
+const state: BasicTableProps = reactive({ queryForm: {}, pageList: GateApi.operationPage });
+const { getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile, tableStyle } = useTable(state);
+
+const applyDate = () => {
+  state.queryForm.capDateStartStr = dateRange.value?.[0] || undefined;
+  state.queryForm.capDateEndStr = dateRange.value?.[1] || undefined;
+};
+const search = () => { applyDate(); getDataList(); };
+const reset = () => {
+  queryRef.value?.resetFields();
+  dateRange.value = [];
+  applyDate();
+  getDataList();
+};
+const exportList = () => {
+  applyDate();
+  downBlobFile("/admin/collection/car/display/operation/export", state.queryForm,
+    `开关闸记录_${dayjs().format("YYYY-MM-DD_HH-mm-ss")}.xlsx`);
+};
+</script>
diff --git a/src/views/collection/car/components/gate-remote-list.vue b/src/views/collection/car/components/gate-remote-list.vue
new file mode 100644
index 0000000..a39fd79
--- /dev/null
+++ b/src/views/collection/car/components/gate-remote-list.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <el-form ref="queryRef" :model="query" inline @keyup.enter="load">
+      <el-form-item label="关键字" prop="searchKey">
+        <el-input v-model="query.searchKey" placeholder="设备名称、IP、编码或组织" clearable style="width: 260px" />
+      </el-form-item>
+      <el-form-item label="在线状态" prop="isOnline">
+        <el-select v-model="query.isOnline" clearable style="width: 140px">
+          <el-option label="在线" :value="1" />
+          <el-option label="离线" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="load">查询</el-button>
+        <el-button icon="Refresh" @click="reset">重置</el-button>
+      </el-form-item>
+      <el-form-item class="refresh-status">
+        <el-tag :type="lastError ? 'danger' : 'info'">
+          {{ lastError || `每 10 秒刷新，最近更新 ${lastRefresh || '-'}` }}
+        </el-tag>
+      </el-form-item>
+    </el-form>
+    <el-table :data="rows" v-loading="loading" border>
+      <el-table-column type="index" label="#" width="60" align="center" />
+      <el-table-column prop="deviceName" label="设备名称" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="deviceCode" label="ICC 设备编码" min-width="190" show-overflow-tooltip />
+      <el-table-column prop="deviceCategoryStr" label="设备分类" min-width="130" />
+      <el-table-column prop="deviceManufacturerStr" label="厂商" width="110">
+        <template #default="{ row }">{{ row.deviceManufacturerStr || row.deviceManufacturer || '大华' }}</template>
+      </el-table-column>
+      <el-table-column prop="deviceIp" label="IP" min-width="130" />
+      <el-table-column prop="devicePort" label="端口" width="90" />
+      <el-table-column prop="orgName" label="所属组织" min-width="150" show-overflow-tooltip />
+      <el-table-column label="实时状态" width="110" align="center">
+        <template #default="{ row }">
+          <el-tag :type="row.isOnline === 1 ? 'success' : 'danger'">{{ row.isOnline === 1 ? '在线' : '离线' }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts" name="GateRemoteList">
+import dayjs from "dayjs";
+import * as GateApi from "/@/api/collection/gate";
+
+const props = defineProps({ active: { type: Boolean, default: false } });
+const queryRef = ref();
+const query = reactive({ searchKey: "", isOnline: undefined as number | undefined });
+const rows = ref<any[]>([]);
+const loading = ref(false);
+const lastRefresh = ref("");
+const lastError = ref("");
+let timer: ReturnType<typeof setInterval> | undefined;
+
+const load = async (quiet = false) => {
+  if (!quiet) loading.value = true;
+  try {
+    const { data } = await GateApi.remoteDeviceList(query);
+    rows.value = data || [];
+    lastRefresh.value = dayjs().format("HH:mm:ss");
+    lastError.value = "";
+  } catch (error: any) {
+    lastError.value = error?.msg || "ICC 状态读取失败";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const reset = () => {
+  queryRef.value?.resetFields();
+  load();
+};
+const stopTimer = () => {
+  if (timer) clearInterval(timer);
+  timer = undefined;
+};
+const startTimer = () => {
+  stopTimer();
+  if (props.active) timer = setInterval(() => load(true), 10000);
+};
+
+watch(() => props.active, (active) => {
+  if (active) {
+    load();
+    startTimer();
+  } else stopTimer();
+}, { immediate: true });
+onBeforeUnmount(stopTimer);
+defineExpose({ refresh: load });
+</script>
+
+<style scoped>
+.refresh-status {
+  float: right;
+}
+</style>
diff --git a/src/views/collection/car/display.vue b/src/views/collection/car/display.vue
new file mode 100644
index 0000000..d36ce3a
--- /dev/null
+++ b/src/views/collection/car/display.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view display-page">
+      <header class="page-header">
+        <div>
+          <h2>出入道闸数据展示</h2>
+          <p>{{ dashboardText }}</p>
+        </div>
+        <el-button icon="Refresh" :loading="dashboardLoading" @click="refreshAll">刷新</el-button>
+      </header>
+
+      <section class="summary-grid" v-loading="dashboardLoading">
+        <div v-for="item in summaryItems" :key="item.key" class="summary-item">
+          <span>{{ item.label }}</span>
+          <strong :class="item.tone">{{ dashboardData[item.key] ?? 0 }}</strong>
+        </div>
+      </section>
+
+      <el-tabs v-model="activeTab" class="display-tabs">
+        <el-tab-pane label="实时状态" name="status">
+          <gate-remote-list ref="remoteRef" :active="activeTab === 'status'" />
+        </el-tab-pane>
+        <el-tab-pane label="开关闸记录" name="operation" lazy>
+          <gate-operation-list />
+        </el-tab-pane>
+        <el-tab-pane label="车辆识别记录" name="record" lazy>
+          <div class="embedded-view">
+            <car-record :read-only="true" :embedded="true" :active="activeTab === 'record'" />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="车辆进出记录" name="access" lazy>
+          <div class="embedded-view">
+            <car-access :read-only="true" :embedded="true" :active="activeTab === 'access'" />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="collectionCarDisplay">
+import dayjs from "dayjs";
+import * as GateApi from "/@/api/collection/gate";
+import type { GateDashboard } from "/@/api/collection/gate";
+import GateRemoteList from "./components/gate-remote-list.vue";
+import GateOperationList from "./components/gate-operation-list.vue";
+import CarRecord from "/@/views/car/carRecord/index.vue";
+import CarAccess from "/@/views/car/carAccess/index.vue";
+
+const emptyDashboard = (): GateDashboard => ({
+  deviceTotal: 0,
+  onlineTotal: 0,
+  offlineTotal: 0,
+  todayEnterTotal: 0,
+  todayExitTotal: 0,
+  unidentifiedTotal: 0,
+  iccConnected: false,
+  message: "正在读取 ICC 状态",
+  checkedAt: "",
+});
+const activeTab = ref("status");
+const remoteRef = ref();
+const dashboardLoading = ref(false);
+const dashboardData = reactive<GateDashboard>(emptyDashboard());
+const summaryItems = [
+  { key: "deviceTotal", label: "设备总数", tone: "" },
+  { key: "onlineTotal", label: "在线数", tone: "success" },
+  { key: "offlineTotal", label: "离线数", tone: "danger" },
+  { key: "todayEnterTotal", label: "今日进入", tone: "primary" },
+  { key: "todayExitTotal", label: "今日离开", tone: "primary" },
+  { key: "unidentifiedTotal", label: "未识别车牌", tone: "warning" },
+] as const;
+
+const dashboardText = computed(() => {
+  const checkedAt = dashboardData.checkedAt ? dayjs(dashboardData.checkedAt).format("YYYY-MM-DD HH:mm:ss") : "-";
+  return `${dashboardData.iccConnected ? 'ICC 连接正常' : 'ICC 连接异常'} · ${dashboardData.message || ''} · ${checkedAt}`;
+});
+const loadDashboard = async () => {
+  dashboardLoading.value = true;
+  try {
+    const { data } = await GateApi.dashboard();
+    Object.assign(dashboardData, emptyDashboard(), data || {});
+  } finally {
+    dashboardLoading.value = false;
+  }
+};
+const refreshAll = async () => {
+  await Promise.all([loadDashboard(), activeTab.value === "status" ? remoteRef.value?.refresh() : Promise.resolve()]);
+};
+onMounted(loadDashboard);
+</script>
+
+<style scoped>
+.display-page {
+  display: block;
+  overflow-y: auto;
+  padding: 18px 22px;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.page-header h2 {
+  margin: 0;
+  font-size: 20px;
+  letter-spacing: 0;
+  color: var(--el-text-color-primary);
+}
+
+.page-header p {
+  margin: 7px 0 0;
+  color: var(--el-text-color-secondary);
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(120px, 1fr));
+  margin: 18px 0;
+  border-top: 1px solid var(--el-border-color-light);
+  border-left: 1px solid var(--el-border-color-light);
+}
+
+.summary-item {
+  min-height: 86px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 9px;
+  padding: 12px 16px;
+  border-right: 1px solid var(--el-border-color-light);
+  border-bottom: 1px solid var(--el-border-color-light);
+}
+
+.summary-item span {
+  color: var(--el-text-color-secondary);
+}
+
+.summary-item strong {
+  font-size: 25px;
+  line-height: 1;
+  color: var(--el-text-color-primary);
+}
+
+.summary-item strong.primary { color: var(--el-color-primary); }
+.summary-item strong.success { color: var(--el-color-success); }
+.summary-item strong.warning { color: var(--el-color-warning); }
+.summary-item strong.danger { color: var(--el-color-danger); }
+
+.embedded-view :deep(> .layout-padding) {
+  height: auto;
+  padding: 0;
+}
+
+.embedded-view :deep(.layout-padding-auto) {
+  height: auto;
+  min-height: 0;
+  padding: 0;
+  box-shadow: none;
+}
+
+@media (max-width: 1100px) {
+  .summary-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
+}
+
+@media (max-width: 640px) {
+  .display-page { padding: 14px; }
+  .page-header { align-items: flex-start; }
+  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+</style>
diff --git a/src/views/collection/video/monitor.vue b/src/views/collection/video/monitor.vue
new file mode 100644
index 0000000..4238bf7
--- /dev/null
+++ b/src/views/collection/video/monitor.vue
@@ -0,0 +1,7 @@
+<template>
+    <monitor-device-list />
+</template>
+
+<script setup lang="ts" name="collectionVideoMonitor">
+import MonitorDeviceList from "./sbList.vue";
+</script>
diff --git a/src/views/collection/video/platform.vue b/src/views/collection/video/platform.vue
new file mode 100644
index 0000000..64bf816
--- /dev/null
+++ b/src/views/collection/video/platform.vue
@@ -0,0 +1,465 @@
+<template>
+    <div class="layout-padding">
+        <div class="layout-padding-auto layout-padding-view platform-page" v-loading="state.loading">
+            <header class="page-header">
+                <div>
+                    <h2>平台接入管理</h2>
+                    <div class="platform-label">
+                        当前接入平台：大华 ICC {{ state.status.version || "V5.000.0000012.5R" }}
+                        <span v-if="state.status.releaseDate">（{{ state.status.releaseDate }} 发布）</span>
+                    </div>
+                </div>
+                <div class="header-actions">
+                    <el-button type="primary" icon="RefreshRight" :loading="state.syncing" @click="syncNow"
+                        v-auth="'admin_deviceManage_edit'">
+                        立即同步
+                    </el-button>
+                    <el-button icon="Connection" :loading="state.testing" @click="testConnection">测试连接</el-button>
+                    <el-button icon="Refresh" :loading="state.refreshing" @click="refreshPage">刷新状态</el-button>
+                </div>
+            </header>
+
+            <el-alert class="phase-alert" type="info" :closable="false" show-icon
+                title="当前按 ICC V5.0.12（2022-12-09）接口对接，支持设备与通道同步、预览和录像回放；该版本未开放录像计划接口。" />
+
+            <section class="status-section">
+                <h3>接入与同步状态</h3>
+                <div class="status-grid">
+                    <div class="status-item">
+                        <span class="status-label">连接状态</span>
+                        <el-tag :type="connectionTagType" effect="light">{{ connectionText }}</el-tag>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">同步状态</span>
+                        <el-tag :type="syncTagType" effect="light">{{ syncText }}</el-tag>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">ICC 设备数</span>
+                        <strong>{{ countText(state.status.remoteDeviceCount) }}</strong>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">本地同步设备数</span>
+                        <strong>{{ countText(state.status.localDeviceCount) }}</strong>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">设备数量差异</span>
+                        <strong :class="differenceClass(state.status.deviceDifference)">
+                            {{ differenceText(state.status.deviceDifference) }}
+                        </strong>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">ICC 通道数</span>
+                        <strong>{{ countText(state.status.remoteChannelCount) }}</strong>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">本地同步通道数</span>
+                        <strong>{{ countText(state.status.localChannelCount) }}</strong>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">通道数量差异</span>
+                        <strong :class="differenceClass(state.status.channelDifference)">
+                            {{ differenceText(state.status.channelDifference) }}
+                        </strong>
+                    </div>
+                    <div class="status-item">
+                        <span class="status-label">在线设备数</span>
+                        <strong>{{ countText(state.status.onlineDeviceCount) }}</strong>
+                    </div>
+                    <div class="status-item status-result">
+                        <span class="status-label">最近同步结果</span>
+                        <span>{{ state.lastSyncResult }}</span>
+                    </div>
+                    <div class="status-item status-result">
+                        <span class="status-label">最近检查时间</span>
+                        <span>{{ state.lastCheckTime }}</span>
+                    </div>
+                </div>
+            </section>
+
+            <el-divider />
+
+            <section class="log-section">
+                <div class="section-header">
+                    <h3>最近 ICC 请求记录</h3>
+                    <span class="section-note">展示最近 8 条接口调用结果</span>
+                </div>
+                <el-table :data="state.logs" border v-loading="state.logsLoading" empty-text="暂无 ICC 请求记录">
+                    <el-table-column prop="type" label="请求类型" min-width="150" show-overflow-tooltip />
+                    <el-table-column prop="method" label="方式" width="80" align="center" />
+                    <el-table-column prop="url" label="接口地址" min-width="280" show-overflow-tooltip />
+                    <el-table-column label="结果" width="90" align="center">
+                        <template #default="{ row }">
+                            <el-tag :type="row.errorMsg ? 'danger' : 'success'" effect="light">
+                                {{ row.errorMsg ? "失败" : "成功" }}
+                            </el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="createTime" label="调用时间" width="170">
+                        <template #default="{ row }">{{ formatTime(row.createTime) }}</template>
+                    </el-table-column>
+                    <el-table-column prop="errorMsg" label="错误摘要" min-width="180" show-overflow-tooltip>
+                        <template #default="{ row }">{{ row.errorMsg || "-" }}</template>
+                    </el-table-column>
+                </el-table>
+            </section>
+
+            <el-divider />
+
+            <section class="setting-section">
+                <div class="section-header">
+                    <h3>大华 ICC 配置</h3>
+                    <el-button type="primary" icon="Check" :loading="state.saving" @click="saveSetting">
+                        保存配置
+                    </el-button>
+                </div>
+                <dh-icc-setting ref="settingRef" />
+            </section>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="collectionVideoPlatform">
+import dayjs from "dayjs";
+import { useMessage } from "/@/hooks/message";
+import * as ComDhLogApi from "/@/api/com/comDhLog";
+import * as VideoPlatformApi from "/@/api/collection/videoPlatform";
+import type { PlatformStatus, PlatformSyncResult } from "/@/api/collection/videoPlatform";
+import DhIccSetting from "/@/views/alarm/setting/dhIccSetting/dh-icc-setting.vue";
+
+type ConnectionStatus = "checking" | "connected" | "disconnected";
+type SyncStatus = "checking" | "synced" | "different" | "failed";
+
+const emptyStatus = (): PlatformStatus => ({
+    version: "V5.000.0000012.5R",
+    releaseDate: "2022-12-09",
+    connected: false,
+    remoteDeviceCount: null,
+    remoteChannelCount: null,
+    localDeviceCount: 0,
+    localChannelCount: 0,
+    onlineDeviceCount: 0,
+    deviceDifference: null,
+    channelDifference: null,
+    checkedAt: "",
+    message: "正在检查 ICC 平台状态",
+});
+
+const settingRef = ref();
+
+const state = reactive({
+    loading: true,
+    refreshing: false,
+    testing: false,
+    syncing: false,
+    saving: false,
+    logsLoading: false,
+    connectionStatus: "checking" as ConnectionStatus,
+    syncStatus: "checking" as SyncStatus,
+    status: emptyStatus(),
+    logs: [] as any[],
+    lastSyncResult: "正在读取 ICC 与本地台账",
+    lastCheckTime: "-",
+});
+
+const connectionText = computed(() => ({
+    checking: "检查中",
+    connected: "连接正常",
+    disconnected: "连接异常",
+}[state.connectionStatus]));
+
+const connectionTagType = computed(() => ({
+    checking: "info",
+    connected: "success",
+    disconnected: "danger",
+}[state.connectionStatus] as "info" | "success" | "danger"));
+
+const syncText = computed(() => ({
+    checking: "检查中",
+    synced: "数量一致",
+    different: "存在差异",
+    failed: "状态异常",
+}[state.syncStatus]));
+
+const syncTagType = computed(() => ({
+    checking: "info",
+    synced: "success",
+    different: "warning",
+    failed: "danger",
+}[state.syncStatus] as "info" | "success" | "warning" | "danger"));
+
+const countText = (value: number | null | undefined) => value == null ? "-" : value;
+
+const differenceText = (value: number | null | undefined) => {
+    if (value == null) return "-";
+    return value > 0 ? `+${value}` : String(value);
+};
+
+const differenceClass = (value: number | null | undefined) => value ? "is-different" : "";
+
+const formatTime = (value?: string) => value ? dayjs(value).format("YYYY-MM-DD HH:mm:ss") : "-";
+
+const getStatusSummary = (status: PlatformStatus) => {
+    if (!status.connected) return status.message || "ICC 平台连接异常";
+    if (status.deviceDifference === 0 && status.channelDifference === 0) {
+        return "ICC 与本地设备、通道数量一致";
+    }
+    const descriptions: string[] = [];
+    if (status.deviceDifference) descriptions.push(`设备差异 ${differenceText(status.deviceDifference)}`);
+    if (status.channelDifference) descriptions.push(`通道差异 ${differenceText(status.channelDifference)}`);
+    return descriptions.length ? descriptions.join("，") : "同步数量状态已更新";
+};
+
+const applyStatus = (status: PlatformStatus, updateSummary = true) => {
+    state.status = status;
+    state.connectionStatus = status.connected ? "connected" : "disconnected";
+    state.syncStatus = !status.connected
+        ? "failed"
+        : status.deviceDifference === 0 && status.channelDifference === 0
+            ? "synced"
+            : "different";
+    state.lastCheckTime = formatTime(status.checkedAt);
+    if (updateSummary) state.lastSyncResult = getStatusSummary(status);
+};
+
+const loadPlatformStatus = async () => {
+    state.connectionStatus = "checking";
+    state.syncStatus = "checking";
+    try {
+        const { data } = await VideoPlatformApi.getStatus();
+        applyStatus(data);
+        return data.connected;
+    } catch (error: any) {
+        state.connectionStatus = "disconnected";
+        state.syncStatus = "failed";
+        state.lastSyncResult = error?.msg || "ICC 平台状态读取失败";
+        state.lastCheckTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+        return false;
+    }
+};
+
+const loadLogs = async () => {
+    state.logsLoading = true;
+    try {
+        const { data } = await ComDhLogApi.fetchList({ current: 1, size: 8 });
+        state.logs = data?.records || [];
+        return true;
+    } catch (error) {
+        state.logs = [];
+        return false;
+    } finally {
+        state.logsLoading = false;
+    }
+};
+
+const testConnection = async () => {
+    state.testing = true;
+    try {
+        const connected = await loadPlatformStatus();
+        await loadLogs();
+        connected
+            ? useMessage().success("ICC V5.0.12 鉴权及基础资源接口连接正常")
+            : useMessage().error(state.status.message || "大华 ICC 连接失败");
+    } finally {
+        state.testing = false;
+    }
+};
+
+const refreshPage = async () => {
+    state.refreshing = true;
+    try {
+        const [, statusReady] = await Promise.all([
+            settingRef.value?.getSetting(),
+            loadPlatformStatus(),
+            loadLogs(),
+        ]);
+        statusReady ? useMessage().success("平台状态已刷新") : useMessage().warning("部分平台状态读取失败");
+    } finally {
+        state.refreshing = false;
+    }
+};
+
+const syncNow = async () => {
+    state.syncing = true;
+    try {
+        const { data } = await VideoPlatformApi.syncPlatform();
+        const result = data as PlatformSyncResult;
+        applyStatus(result, false);
+        state.lastSyncResult = result.success
+            ? `设备新增 ${result.deviceAddedCount}、更新 ${result.deviceUpdatedCount}；通道新增 ${result.channelAddedCount}、更新 ${result.channelUpdatedCount}；耗时 ${result.durationMillis} ms`
+            : result.errors.join("；");
+        result.success
+            ? useMessage().success("ICC 设备和通道同步完成")
+            : useMessage().warning("ICC 同步部分失败，请查看同步结果和请求记录");
+        await loadLogs();
+    } catch (error: any) {
+        useMessage().error(error?.msg || "ICC 设备和通道同步失败");
+    } finally {
+        state.syncing = false;
+    }
+};
+
+const saveSetting = async () => {
+    state.saving = true;
+    try {
+        await settingRef.value?.onSubmit();
+    } finally {
+        state.saving = false;
+    }
+};
+
+onMounted(async () => {
+    try {
+        await Promise.all([loadPlatformStatus(), loadLogs()]);
+    } finally {
+        state.loading = false;
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.platform-page {
+    display: block;
+    overflow-y: auto;
+    padding: 20px 24px;
+}
+
+.page-header,
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+h2,
+h3 {
+    margin: 0;
+    color: var(--el-text-color-primary);
+    letter-spacing: 0;
+}
+
+h2 {
+    font-size: 20px;
+}
+
+h3 {
+    font-size: 16px;
+}
+
+.platform-label {
+    margin-top: 8px;
+    color: var(--el-text-color-secondary);
+}
+
+.header-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+.header-actions :deep(.el-button + .el-button) {
+    margin-left: 0;
+}
+
+.phase-alert {
+    margin-top: 18px;
+}
+
+.status-section,
+.log-section,
+.setting-section {
+    margin-top: 24px;
+}
+
+.status-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(150px, 1fr));
+    margin-top: 14px;
+    border-top: 1px solid var(--el-border-color-light);
+    border-left: 1px solid var(--el-border-color-light);
+}
+
+.status-item {
+    min-height: 84px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 10px;
+    padding: 14px 16px;
+    border-right: 1px solid var(--el-border-color-light);
+    border-bottom: 1px solid var(--el-border-color-light);
+    background: var(--el-fill-color-blank);
+}
+
+.status-item strong {
+    font-size: 24px;
+    line-height: 1;
+    color: var(--el-color-primary);
+}
+
+.status-item strong.is-different {
+    color: var(--el-color-warning);
+}
+
+.status-label {
+    color: var(--el-text-color-secondary);
+}
+
+.status-result {
+    grid-column: span 2;
+}
+
+.status-result:last-child {
+    grid-column: span 1;
+}
+
+.setting-section {
+    max-width: 960px;
+}
+
+.section-header {
+    margin-bottom: 6px;
+}
+
+.section-note {
+    color: var(--el-text-color-secondary);
+    font-size: 13px;
+}
+
+@media (max-width: 1100px) {
+    .status-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .status-result,
+    .status-result:last-child {
+        grid-column: span 2;
+    }
+}
+
+@media (max-width: 640px) {
+    .platform-page {
+        padding: 16px;
+    }
+
+    .page-header {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .header-actions {
+        justify-content: flex-start;
+    }
+
+    .status-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .status-result,
+    .status-result:last-child {
+        grid-column: span 1;
+    }
+}
+</style>
diff --git a/src/views/collection/video/playback.vue b/src/views/collection/video/playback.vue
new file mode 100644
index 0000000..b9b068d
--- /dev/null
+++ b/src/views/collection/video/playback.vue
@@ -0,0 +1,7 @@
+<template>
+    <device-group-play />
+</template>
+
+<script setup lang="ts" name="collectionVideoPlayback">
+import DeviceGroupPlay from "/@/views/device/deviceGroupPlay/index.vue";
+</script>
diff --git a/src/views/collection/video/recorder.vue b/src/views/collection/video/recorder.vue
new file mode 100644
index 0000000..f557cc3
--- /dev/null
+++ b/src/views/collection/video/recorder.vue
@@ -0,0 +1,8 @@
+<template>
+    <camera-list :fixed-query="{ isSync: 1 }" :enable-crud="false" :enable-export="true"
+        :actions="['detail', 'preview', 'replay']" />
+</template>
+
+<script setup lang="ts" name="baseDeviceCamera">
+import CameraList from "../../device/components/camera-list.vue";
+</script>
diff --git a/src/views/collection/video/sbList.vue b/src/views/collection/video/sbList.vue
new file mode 100644
index 0000000..2eb88b4
--- /dev/null
+++ b/src/views/collection/video/sbList.vue
@@ -0,0 +1,8 @@
+<template>
+  <camera-list :fixed-query="{ isSync: 1 }" :enable-crud="false" :enable-export="true"
+    :actions="['detail', 'preview', 'replay']" />
+</template>
+
+<script setup lang="ts" name="collectionVideoDeviceList">
+import CameraList from "/@/views/device/components/camera-list.vue";
+</script>
diff --git a/src/views/device/components/camera-list.vue b/src/views/device/components/camera-list.vue
new file mode 100644
index 0000000..9ace420
--- /dev/null
+++ b/src/views/device/components/camera-list.vue
@@ -0,0 +1,258 @@
+<template>
+    <div class="layout-padding">
+        <div class="layout-padding-auto layout-padding-view">
+            <draggable-org-Tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
+                @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
+                :defaultTreeWidth="15" :nodeClickable="false">
+                <template #default>
+                    <el-row shadow="hover" v-show="showSearch" class="ml10">
+                        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+                            <el-form-item style="width: 250px;" label="设备名" prop="deviceName">
+                                <el-input v-model="state.queryForm.deviceName" placeholder="请输入设备名" />
+                            </el-form-item>
+                            <el-form-item style="width: 250px;" label="设备类型" prop="deviceCategory">
+                                <dict-select v-model="state.queryForm.deviceCategory" :options="device_category" />
+                            </el-form-item>
+                            <el-form-item style="width: 250px;" label="状态" prop="isOnline">
+                                <dict-select v-model="state.queryForm.isOnline" :options="is_nline" />
+                            </el-form-item>
+                            <el-form-item v-if="!hasFixedQuery('isSync')" style="width: 250px;" label="同步状态"
+                                prop="isSync">
+                                <dict-select v-model="state.queryForm.isSync" :options="is_sync" />
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button icon="search" type="primary" @click="getDataList">
+                                    {{ $t('common.queryBtn') }}
+                                </el-button>
+                                <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+                            </el-form-item>
+                        </el-form>
+                    </el-row>
+                    <el-row>
+                        <div class="mb8" style="width: 100%">
+                            <el-button v-if="props.enableCrud" icon="folder-add" type="primary" class="ml10"
+                                @click="formDialogRef.openDialog()" v-auth="'admin_deviceManage_add'">
+                                新 增
+                            </el-button>
+                            <el-button v-if="props.enableCrud && hasAction('delete')" plain :disabled="multiple"
+                                icon="Delete" type="primary" v-auth="'admin_deviceManage_del'"
+                                @click="handleDelete(selectObjs)">
+                                删除
+                            </el-button>
+                            <el-button v-if="props.enableCrud" plain icon="upload-filled" class="ml10"
+                                @click="uploadExcelRef.show()">
+                                导 入
+                            </el-button>
+                            <right-toolbar v-model:showSearch="showSearch"
+                                :export="props.enableCrud || props.enableExport ? 'admin_deviceManage_export' : false"
+                                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+                                @queryTable="getDataList"></right-toolbar>
+                        </div>
+                    </el-row>
+                    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+                        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+                        @sort-change="sortChangeHandle">
+                        <el-table-column v-if="props.enableCrud && hasAction('delete')" type="selection" width="40"
+                            align="center" />
+                        <el-table-column type="index" label="#" width="80" />
+                        <el-table-column prop="deviceCode" align="left" min-width="100" label="设备编码" />
+                        <el-table-column prop="deviceName" align="left" min-width="150" label="设备名称" />
+                        <el-table-column prop="deviceIp" align="left" min-width="150" label="ip" />
+                        <el-table-column prop="devicePort" align="left" min-width="100" label="端口" />
+                        <el-table-column prop="deviceCategory" align="left" min-width="150" label="设备大类">
+                            <template #default="{ row }">
+                                <dict-tag :options="device_category" :value="row.deviceCategory" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="deviceManufacturer" align="left" min-width="100" label="厂商类型">
+                            <template #default="{ row }">
+                                <dict-tag :options="dh_device_manufacturer" :value="row.deviceManufacturer" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="orgName" align="left" min-width="150" label="设备所属组织" />
+                        <el-table-column prop="isOnline" align="left" min-width="120" label="状态">
+                            <template #default="{ row }">
+                                <tag-online :isOnline="row.isOnline == 1" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="isSync" align="left" min-width="120" label="同步状态">
+                            <template #default="{ row }">
+                                <tag-sync :isSync="row.isSync == 1" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="offlineReason" align="left" min-width="120" label="离线原因">
+                            <template #default="{ row }">
+                                {{ row.offlineReason }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column v-if="hasRowActions" label="操作" fixed="right" :width="actionColumnWidth">
+                            <template #default="{ row }">
+                                <div class="grid grid-cols-3 gap-2 w-full">
+                                    <el-button v-if="hasAction('detail')" style="margin: 0;" class="!ml-0 w-full"
+                                        icon="InfoFilled" text type="primary" @click="toDetail(row)">
+                                        详情
+                                    </el-button>
+                                    <el-button v-if="hasAction('preview')" style="margin: 0;" class="!ml-0 w-full"
+                                        icon="VideoPlay" text type="primary"
+                                        @click="previewVideoRef.openDialog(row.id)">
+                                        预览
+                                    </el-button>
+                                    <el-button v-if="hasAction('replay')" style="margin: 0;" class="!ml-0 w-full"
+                                        icon="VideoCamera" text type="primary"
+                                        @click="replayVideoDialogRef.openDialog('device', row.deviceCode)">
+                                        回放
+                                    </el-button>
+                                    <el-button v-if="hasAction('edit')" style="margin: 0;" class="!ml-0 w-full"
+                                        icon="edit-pen" text type="primary" v-auth="'admin_deviceManage_edit'"
+                                        @click="formDialogRef.openDialog(row.id)">
+                                        编辑
+                                    </el-button>
+                                    <el-button v-if="hasAction('delete')" style="margin: 0;" class="!ml-0 w-full"
+                                        icon="delete" text type="primary" v-auth="'admin_deviceManage_del'"
+                                        @click="handleDelete([row.id])">
+                                        删除
+                                    </el-button>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+                        v-bind="state.pagination" />
+                </template>
+            </draggable-org-Tree>
+
+        </div>
+        <!-- 编辑、新增  -->
+        <form-dialog v-if="props.enableCrud || hasAction('edit')" ref="formDialogRef" @refresh="getDataList(false)" />
+        <preview-video-dialog v-if="hasAction('preview')" ref="previewVideoRef" />
+        <replay-video-dialog v-if="hasAction('replay')" ref="replayVideoDialogRef" />
+        <upload-excel v-if="props.enableCrud" ref="uploadExcelRef" title="设备导入" url="/admin/deviceManage/read-excel"
+            temp-url="/admin/sys-file/local/file/device_import_temp.xlsx" @refreshDataList="getDataList(false)" />
+    </div>
+</template>
+
+<script setup lang="ts" name="deviceCameraList">
+import { useRouter } from "vue-router"
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import * as DeviceManageApi from "/@/api/device/deviceManage";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+import dayjs from "dayjs";
+
+type CameraAction = 'detail' | 'preview' | 'replay' | 'edit' | 'delete';
+
+const props = withDefaults(defineProps<{
+    actions?: CameraAction[];
+    enableCrud?: boolean;
+    enableExport?: boolean;
+    fixedQuery?: Record<string, any>;
+}>(), {
+    actions: () => ['detail', 'preview', 'replay', 'edit', 'delete'],
+    enableCrud: true,
+    enableExport: false,
+    fixedQuery: () => ({}),
+});
+
+const hasAction = (action: CameraAction) => props.actions.includes(action);
+const hasFixedQuery = (key: string) => Object.prototype.hasOwnProperty.call(props.fixedQuery, key);
+const hasRowActions = computed(() => props.actions.length > 0);
+const actionColumnWidth = computed(() => props.actions.length > 3 ? 240 : 200);
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import("./deviceForm.vue"));
+const PreviewVideoDialog = defineAsyncComponent(() => import("./preview-video/preview-video-dialog.vue"));
+const ReplayVideoDialog = defineAsyncComponent(() => import("./replay-video/replay-video-dialog.vue"));
+
+const { push } = useRouter()
+
+// 定义查询字典
+const { device_category, is_sync, is_nline, dh_device_manufacturer } = useDict("device_category", "is_sync", "is_nline", "dh_device_manufacturer")
+// 定义变量内容
+const formDialogRef = ref()
+const previewVideoRef = ref()
+const replayVideoDialogRef = ref()
+// 搜索变量
+const uploadExcelRef = ref()
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+const draggableDepTreeRef = ref()
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    queryForm: { ...props.fixedQuery },
+    pageList: (params: any) => DeviceManageApi.cameraPage({ ...params, ...props.fixedQuery })
+})
+
+//  table hook
+const {
+    getDataList,
+    currentChangeHandle,
+    sizeChangeHandle,
+    sortChangeHandle,
+    downBlobFile,
+    postDownBlobFile,
+    tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+    // 清空搜索条件
+    queryRef.value?.resetFields()
+    // 清空多选
+    selectObjs.value = []
+    draggableDepTreeRef.value.resetData()
+    getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+    const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
+    postDownBlobFile('/admin/deviceManage/camera-export', {
+        ...state.queryForm,
+        ...props.fixedQuery,
+        ids: selectObjs.value,
+    }, `设施管理_${timeSuffix}.xlsx`)
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+    selectObjs.value = objs.map(({ id }) => id);
+    multiple.value = !objs.length;
+};
+
+const toDetail = (row: any) => {
+    push({
+        path: "/device/detail/index",
+        query: {
+            id: row.id
+        }
+    })
+}
+
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean) => {
+    state.queryForm.ownerCode = curClickedNode.id
+    state.queryForm.orgCodes = checkedTreeNodes.map((item: any) => item.id)
+    state.queryForm.isInclude = !isDeepTree
+    getDataList()
+}
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+    try {
+        await useMessageBox().confirm('此操作将永久删除');
+    } catch {
+        return;
+    }
+
+    try {
+        await DeviceManageApi.delObjs(ids);
+        getDataList();
+        useMessage().success('删除成功');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    }
+};
+</script>
diff --git a/src/views/device/components/device-list.vue b/src/views/device/components/device-list.vue
new file mode 100644
index 0000000..1c3029a
--- /dev/null
+++ b/src/views/device/components/device-list.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <draggable-org-Tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
+        @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含" :defaultTreeWidth="15"
+        :nodeClickable="false">
+        <template #default>
+          <el-row shadow="hover" v-show="showSearch" class="ml10">
+            <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+              <el-form-item style="width: 250px;" label="设备名" prop="deviceName">
+                <el-input v-model="state.queryForm.deviceName" placeholder="请输入设备名" />
+              </el-form-item>
+              <el-form-item style="width: 250px;" label="设备类型" prop="deviceCategory">
+                <dict-select v-model="state.queryForm.deviceCategory" :options="device_category" />
+              </el-form-item>
+              <el-form-item style="width: 250px;" label="状态" prop="isOnline">
+                <dict-select v-model="state.queryForm.isOnline" :options="is_nline" />
+              </el-form-item>
+              <el-form-item>
+                <el-button icon="search" type="primary" @click="getDataList">
+                  {{ $t('common.queryBtn') }}
+                </el-button>
+                <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+              </el-form-item>
+            </el-form>
+          </el-row>
+          <el-row>
+            <div class="mb8" style="width: 100%">
+              <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+                v-auth="'admin_deviceManage_add'">
+                新 增
+              </el-button>
+              <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_deviceManage_del'"
+                @click="handleDelete(selectObjs)">
+                删除
+              </el-button>
+              <el-button plain icon="upload-filled" class="ml10" @click="uploadExcelRef.show()">
+                导 入
+              </el-button>
+              <right-toolbar v-model:showSearch="showSearch" :export="'admin_deviceManage_export'"
+                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+                @queryTable="getDataList"></right-toolbar>
+            </div>
+          </el-row>
+          <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+            @sort-change="sortChangeHandle">
+            <el-table-column type="selection" width="40" align="center" />
+            <el-table-column type="index" label="#" width="80" />
+            <el-table-column prop="deviceCode" align="left" min-width="100" label="设备编码" />
+            <el-table-column prop="deviceSn" align="left" min-width="150" label="设备唯一标识码" />
+            <el-table-column prop="deviceName" align="left" min-width="150" label="设备名称" />
+            <el-table-column prop="deviceIp" align="left" min-width="150" label="ip" />
+            <el-table-column prop="devicePort" align="left" min-width="100" label="端口" />
+            <el-table-column prop="deviceCategory" align="left" min-width="150" label="设备大类">
+              <template #default="{ row }">
+                <dict-tag :options="device_category" :value="row.deviceCategory" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="deviceManufacturer" align="left" min-width="100" label="厂商类型">
+              <template #default="{ row }">
+                <dict-tag :options="dh_device_manufacturer" :value="row.deviceManufacturer" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="orgName" align="left" min-width="150" label="设备所属组织" />
+            <el-table-column prop="isOnline" align="left" min-width="120" label="状态">
+              <template #default="{ row }">
+                <tag-online :isOnline="row.isOnline == 1" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="isSync" align="left" min-width="120" label="同步状态">
+              <template #default="{ row }">
+                <tag-sync :isSync="row.isSync == 1" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="offlineReason" align="left" min-width="120" label="离线原因">
+              <template #default="{ row }">
+                {{ row.offlineReason }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" width="200">
+              <template #default="{ row }">
+                <el-button icon="edit-pen" text type="primary" v-auth="'admin_deviceManage_edit'"
+                  @click="formDialogRef.openDialog(row.id)">
+                  编辑
+                </el-button>
+                <el-button icon="delete" text type="primary" v-auth="'admin_deviceManage_del'"
+                  @click="handleDelete([row.id])">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+        </template>
+      </draggable-org-Tree>
+
+    </div>
+    <upload-excel ref="uploadExcelRef" title="设备导入" url="/admin/deviceManage/read-excel"
+      temp-url="/admin/sys-file/local/file/device_import_temp.xlsx" @refreshDataList="getDataList(false)" />
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+  </div>
+</template>
+
+<script setup lang="ts" name="deviceList">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObjs } from "/@/api/device/deviceManage";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+import { usePanel } from "/@/stores/panel"
+import dayjs from "dayjs";
+
+const storesPanel = usePanel()
+
+const uploadExcelRef = ref()
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./deviceForm.vue'));
+// 定义查询字典
+const { device_category, is_sync, is_nline, dh_device_manufacturer } = useDict("device_category", "is_sync", "is_nline", "dh_device_manufacturer")
+// 定义变量内容
+const formDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+const draggableDepTreeRef = ref()
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  postDownBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  draggableDepTreeRef.value.resetData()
+  getDataList()
+}
+
+onBeforeMount(() => {
+  const query: any = useRoute().query
+  if (query && query.action == 'panel') {
+    if (query.params) {
+      Object.assign(state.queryForm, JSON.parse(query.params))
+      getDataList()
+    }
+    storesPanel.openFromPanel()
+  }
+})
+
+onBeforeUnmount(() => {
+  const query = useRoute().query
+  if (query && query.action == 'panel') {
+    storesPanel.closeFromPanel()
+  }
+})
+
+// 导出excel
+const exportExcel = () => {
+  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
+  postDownBlobFile('/admin/deviceManage/export', Object.assign(state.queryForm, { ids: selectObjs }), `设备信息管理_${timeSuffix}.xlsx`)
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean) => {
+  state.queryForm.ownerCode = curClickedNode.id
+  state.queryForm.orgCodes = checkedTreeNodes.map((item: any) => item.id)
+  state.queryForm.isInclude = !isDeepTree
+  getDataList()
+}
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+</script>
diff --git a/src/views/device/deviceCamera/index.vue b/src/views/device/deviceCamera/index.vue
index e26af53..e7faec5 100644
--- a/src/views/device/deviceCamera/index.vue
+++ b/src/views/device/deviceCamera/index.vue
@@ -1,228 +1,7 @@
 <template>
-    <div class="layout-padding">
-        <div class="layout-padding-auto layout-padding-view">
-            <draggable-org-Tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-                @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-                :defaultTreeWidth="15" :nodeClickable="false">
-                <template #default>
-                    <el-row shadow="hover" v-show="showSearch" class="ml10">
-                        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-                            <el-form-item style="width: 250px;" label="设备名" prop="deviceName">
-                                <el-input v-model="state.queryForm.deviceName" placeholder="请输入设备名" />
-                            </el-form-item>
-                            <el-form-item style="width: 250px;" label="设备类型" prop="deviceCategory">
-                                <dict-select v-model="state.queryForm.deviceCategory" :options="device_category" />
-                            </el-form-item>
-                            <el-form-item style="width: 250px;" label="状态" prop="isOnline">
-                                <dict-select v-model="state.queryForm.isOnline" :options="is_nline" />
-                            </el-form-item>
-                            <el-form-item style="width: 250px;" label="同步状态" prop="isSync">
-                                <dict-select v-model="state.queryForm.isSync" :options="is_sync" />
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button icon="search" type="primary" @click="getDataList">
-                                    {{ $t('common.queryBtn') }}
-                                </el-button>
-                                <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
-                            </el-form-item>
-                        </el-form>
-                    </el-row>
-                    <el-row>
-                        <div class="mb8" style="width: 100%">
-                            <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-                                v-auth="'admin_deviceManage_add'">
-                                新 增
-                            </el-button>
-                            <el-button plain :disabled="multiple" icon="Delete" type="primary"
-                                v-auth="'admin_deviceManage_del'" @click="handleDelete(selectObjs)">
-                                删除
-                            </el-button>
-                            <el-button plain icon="upload-filled" class="ml10" @click="uploadExcelRef.show()">
-                                导 入
-                            </el-button>
-                            <right-toolbar v-model:showSearch="showSearch" :export="'admin_deviceManage_export'"
-                                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
-                                @queryTable="getDataList"></right-toolbar>
-                        </div>
-                    </el-row>
-                    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-                        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-                        @sort-change="sortChangeHandle">
-                        <el-table-column type="selection" width="40" align="center" />
-                        <el-table-column type="index" label="#" width="80" />
-                        <el-table-column prop="deviceCode" align="left" min-width="100" label="设备编码" />
-                        <el-table-column prop="deviceName" align="left" min-width="150" label="设备名称" />
-                        <el-table-column prop="deviceIp" align="left" min-width="150" label="ip" />
-                        <el-table-column prop="devicePort" align="left" min-width="100" label="端口" />
-                        <el-table-column prop="deviceCategory" align="left" min-width="150" label="设备大类">
-                            <template #default="{ row }">
-                                <dict-tag :options="device_category" :value="row.deviceCategory" />
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="deviceManufacturer" align="left" min-width="100" label="厂商类型">
-                            <template #default="{ row }">
-                                <dict-tag :options="dh_device_manufacturer" :value="row.deviceManufacturer" />
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="orgName" align="left" min-width="150" label="设备所属组织" />
-                        <el-table-column prop="isOnline" align="left" min-width="120" label="状态">
-                            <template #default="{ row }">
-                                <tag-online :isOnline="row.isOnline == 1" />
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="isSync" align="left" min-width="120" label="同步状态">
-                            <template #default="{ row }">
-                                <tag-sync :isSync="row.isSync == 1" />
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="offlineReason" align="left" min-width="120" label="离线原因">
-                            <template #default="{ row }">
-                                {{ row.offlineReason }}
-                            </template>
-                        </el-table-column>
-                        <el-table-column label="操作" fixed="right" width="200">
-                            <template #default="{ row }">
-                                <div class="grid grid-cols-3 gap-2 w-full">
-                                    <el-button style="margin: 0;" class="!ml-0 w-full" icon="InfoFilled" text
-                                        type="primary" @click="toDetail(row)">
-                                        详情
-                                    </el-button>
-                                    <el-button style="margin: 0;" class="!ml-0 w-full" icon="VideoPlay" text
-                                        type="primary" @click="previewVideoRef.openDialog(row.id)">
-                                        预览
-                                    </el-button>
-                                    <el-button style="margin: 0;" class="!ml-0 w-full" icon="VideoCamera" text
-                                        type="primary"
-                                        @click="replayVideoDialogRef.openDialog('device', row.deviceCode)">
-                                        回放
-                                    </el-button>
-                                    <el-button style="margin: 0;" class="!ml-0 w-full" icon="edit-pen" text
-                                        type="primary" v-auth="'admin_deviceManage_edit'"
-                                        @click="formDialogRef.openDialog(row.id)">
-                                        编辑
-                                    </el-button>
-                                    <el-button style="margin: 0;" class="!ml-0 w-full" icon="delete" text type="primary"
-                                        v-auth="'admin_deviceManage_del'" @click="handleDelete([row.id])">
-                                        删除
-                                    </el-button>
-                                </div>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
-                        v-bind="state.pagination" />
-                </template>
-            </draggable-org-Tree>
-
-        </div>
-        <!-- 编辑、新增  -->
-        <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-        <preview-video-dialog ref="previewVideoRef" />
-        <replay-video-dialog ref="replayVideoDialogRef" />
-        <upload-excel ref="uploadExcelRef" title="设备导入" url="/admin/deviceManage/read-excel"
-            temp-url="/admin/sys-file/local/file/device_import_temp.xlsx" @refreshDataList="getDataList(false)" />
-    </div>
+    <camera-list />
 </template>
 
 <script setup lang="ts" name="systemDeviceManage">
-import { useRouter } from "vue-router"
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import * as DeviceManageApi from "/@/api/device/deviceManage";
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
-import dayjs from "dayjs";
-
-// 引入组件
-const FormDialog = defineAsyncComponent(() => import("../components/deviceForm.vue"));
-const PreviewVideoDialog = defineAsyncComponent(() => import("../components/preview-video/preview-video-dialog.vue"));
-const ReplayVideoDialog = defineAsyncComponent(() => import("../components/replay-video/replay-video-dialog.vue"));
-
-const { push } = useRouter()
-
-// 定义查询字典
-const { device_category, is_sync, is_nline, dh_device_manufacturer } = useDict("device_category", "is_sync", "is_nline", "dh_device_manufacturer")
-// 定义变量内容
-const formDialogRef = ref()
-const previewVideoRef = ref()
-const replayVideoDialogRef = ref()
-// 搜索变量
-const uploadExcelRef = ref()
-const queryRef = ref()
-const showSearch = ref(true)
-// 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
-const draggableDepTreeRef = ref()
-
-const state: BasicTableProps = reactive<BasicTableProps>({
-    queryForm: {},
-    pageList: DeviceManageApi.cameraPage
-})
-
-//  table hook
-const {
-    getDataList,
-    currentChangeHandle,
-    sizeChangeHandle,
-    sortChangeHandle,
-    downBlobFile,
-    postDownBlobFile,
-    tableStyle
-} = useTable(state)
-
-// 清空搜索条件
-const resetQuery = () => {
-    // 清空搜索条件
-    queryRef.value?.resetFields()
-    // 清空多选
-    selectObjs.value = []
-    draggableDepTreeRef.value.resetData()
-    getDataList()
-}
-
-// 导出excel
-const exportExcel = () => {
-    const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
-    postDownBlobFile('/admin/deviceManage/camera-export', Object.assign(state.queryForm, { ids: selectObjs.value }), `设施管理_${timeSuffix}.xlsx`)
-}
-
-// 多选事件
-const selectionChangHandle = (objs: { id: string }[]) => {
-    selectObjs.value = objs.map(({ id }) => id);
-    multiple.value = !objs.length;
-};
-
-const toDetail = (row: any) => {
-    push({
-        path: "/device/detail/index",
-        query: {
-            id: row.id
-        }
-    })
-}
-
-// 树节点选择时
-const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean) => {
-    state.queryForm.ownerCode = curClickedNode.id
-    state.queryForm.orgCodes = checkedTreeNodes.map((item: any) => item.id)
-    state.queryForm.isInclude = !isDeepTree
-    getDataList()
-}
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-    try {
-        await useMessageBox().confirm('此操作将永久删除');
-    } catch {
-        return;
-    }
-
-    try {
-        await DeviceManageApi.delObjs(ids);
-        getDataList();
-        useMessage().success('删除成功');
-    } catch (err: any) {
-        useMessage().error(err.msg);
-    }
-};
+import CameraList from "../components/camera-list.vue";
 </script>
diff --git a/src/views/device/deviceManage/index.vue b/src/views/device/deviceManage/index.vue
index bf3fe00..a269699 100644
--- a/src/views/device/deviceManage/index.vue
+++ b/src/views/device/deviceManage/index.vue
@@ -1,211 +1,7 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <draggable-org-Tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-        @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含" :defaultTreeWidth="15"
-        :nodeClickable="false">
-        <template #default>
-          <el-row shadow="hover" v-show="showSearch" class="ml10">
-            <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-              <el-form-item style="width: 250px;" label="设备名" prop="deviceName">
-                <el-input v-model="state.queryForm.deviceName" placeholder="请输入设备名" />
-              </el-form-item>
-              <el-form-item style="width: 250px;" label="设备类型" prop="deviceCategory">
-                <dict-select v-model="state.queryForm.deviceCategory" :options="device_category" />
-              </el-form-item>
-              <el-form-item style="width: 250px;" label="状态" prop="isOnline">
-                <dict-select v-model="state.queryForm.isOnline" :options="is_nline" />
-              </el-form-item>
-              <el-form-item>
-                <el-button icon="search" type="primary" @click="getDataList">
-                  {{ $t('common.queryBtn') }}
-                </el-button>
-                <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
-              </el-form-item>
-            </el-form>
-          </el-row>
-          <el-row>
-            <div class="mb8" style="width: 100%">
-              <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-                v-auth="'admin_deviceManage_add'">
-                新 增
-              </el-button>
-              <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_deviceManage_del'"
-                @click="handleDelete(selectObjs)">
-                删除
-              </el-button>
-              <el-button plain icon="upload-filled" class="ml10" @click="uploadExcelRef.show()">
-                导 入
-              </el-button>
-              <right-toolbar v-model:showSearch="showSearch" :export="'admin_deviceManage_export'"
-                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
-                @queryTable="getDataList"></right-toolbar>
-            </div>
-          </el-row>
-          <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-            :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-            @sort-change="sortChangeHandle">
-            <el-table-column type="selection" width="40" align="center" />
-            <el-table-column type="index" label="#" width="80" />
-            <el-table-column prop="deviceCode" align="left" min-width="100" label="设备编码" />
-            <el-table-column prop="deviceSn" align="left" min-width="150" label="设备唯一标识码" />
-            <el-table-column prop="deviceName" align="left" min-width="150" label="设备名称" />
-            <el-table-column prop="deviceIp" align="left" min-width="150" label="ip" />
-            <el-table-column prop="devicePort" align="left" min-width="100" label="端口" />
-            <el-table-column prop="deviceCategory" align="left" min-width="150" label="设备大类">
-              <template #default="{ row }">
-                <dict-tag :options="device_category" :value="row.deviceCategory" />
-              </template>
-            </el-table-column>
-            <el-table-column prop="deviceManufacturer" align="left" min-width="100" label="厂商类型">
-              <template #default="{ row }">
-                <dict-tag :options="dh_device_manufacturer" :value="row.deviceManufacturer" />
-              </template>
-            </el-table-column>
-            <el-table-column prop="orgName" align="left" min-width="150" label="设备所属组织" />
-            <el-table-column prop="isOnline" align="left" min-width="120" label="状态">
-              <template #default="{ row }">
-                <tag-online :isOnline="row.isOnline == 1" />
-              </template>
-            </el-table-column>
-            <el-table-column prop="isSync" align="left" min-width="120" label="同步状态">
-              <template #default="{ row }">
-                <tag-sync :isSync="row.isSync == 1" />
-              </template>
-            </el-table-column>
-            <el-table-column prop="offlineReason" align="left" min-width="120" label="离线原因">
-              <template #default="{ row }">
-                {{ row.offlineReason }}
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" fixed="right" width="200">
-              <template #default="{ row }">
-                <el-button icon="edit-pen" text type="primary" v-auth="'admin_deviceManage_edit'"
-                  @click="formDialogRef.openDialog(row.id)">
-                  编辑
-                </el-button>
-                <el-button icon="delete" text type="primary" v-auth="'admin_deviceManage_del'"
-                  @click="handleDelete([row.id])">
-                  删除
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-        </template>
-      </draggable-org-Tree>
-
-    </div>
-    <upload-excel ref="uploadExcelRef" title="设备导入" url="/admin/deviceManage/read-excel"
-      temp-url="/admin/sys-file/local/file/device_import_temp.xlsx" @refreshDataList="getDataList(false)" />
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-  </div>
+  <device-list />
 </template>
 
 <script setup lang="ts" name="systemDeviceManage">
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import { fetchList, delObjs } from "/@/api/device/deviceManage";
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
-import { usePanel } from "/@/stores/panel"
-import dayjs from "dayjs";
-
-const storesPanel = usePanel()
-
-const uploadExcelRef = ref()
-
-// 引入组件
-const FormDialog = defineAsyncComponent(() => import('../components/deviceForm.vue'));
-// 定义查询字典
-const { device_category, is_sync, is_nline, dh_device_manufacturer } = useDict("device_category", "is_sync", "is_nline", "dh_device_manufacturer")
-// 定义变量内容
-const formDialogRef = ref()
-// 搜索变量
-const queryRef = ref()
-const showSearch = ref(true)
-// 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
-const draggableDepTreeRef = ref()
-
-const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
-  pageList: fetchList
-})
-
-//  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  postDownBlobFile,
-  tableStyle
-} = useTable(state)
-
-// 清空搜索条件
-const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  draggableDepTreeRef.value.resetData()
-  getDataList()
-}
-
-onBeforeMount(() => {
-  const query: any = useRoute().query
-  if (query && query.action == 'panel') {
-    if (query.params) {
-      Object.assign(state.queryForm, JSON.parse(query.params))
-      getDataList()
-    }
-    storesPanel.openFromPanel()
-  }
-})
-
-onBeforeUnmount(() => {
-  const query = useRoute().query
-  if (query && query.action == 'panel') {
-    storesPanel.closeFromPanel()
-  }
-})
-
-// 导出excel
-const exportExcel = () => {
-  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
-  postDownBlobFile('/admin/deviceManage/export', Object.assign(state.queryForm, { ids: selectObjs }), `设备信息管理_${timeSuffix}.xlsx`)
-}
-
-// 多选事件
-const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
-  multiple.value = !objs.length;
-};
-
-// 树节点选择时
-const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean) => {
-  state.queryForm.ownerCode = curClickedNode.id
-  state.queryForm.orgCodes = checkedTreeNodes.map((item: any) => item.id)
-  state.queryForm.isInclude = !isDeepTree
-  getDataList()
-}
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
-
-  try {
-    await delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
+import DeviceList from '../components/device-list.vue';
 </script>
diff --git a/src/views/door/doorReign/index.vue b/src/views/door/doorReign/index.vue
index eead2ce..c1062a9 100644
--- a/src/views/door/doorReign/index.vue
+++ b/src/views/door/doorReign/index.vue
@@ -40,7 +40,7 @@
                             <div class="success-count color-success" @click="openDoorTableDialogRef(row)">
                                 <span> {{ row.doorReignCount ?? 0 }}</span>
                                 <span>人</span>
-                                <span v-if="row.doorReignCount"
+                                <span v-if="row.doorReignCount && row.doorReignCount > 0"
                                     style="font-size: 12px; margin-left: 4px; opacity: 0.8;">
                                     (点击查看)
                                 </span>
@@ -52,7 +52,8 @@
                             <div class="success-count color-success" @click="openCarTableDialogRef(row)">
                                 <span> {{ row.carReignCount ?? 0 }}</span>
                                 <span>人</span>
-                                <span v-if="row.carReignCount" style="font-size: 12px; margin-left: 4px; opacity: 0.8;">
+                                <span v-if="row.carReignCount && row.carReignCount > 0"
+                                    style="font-size: 12px; margin-left: 4px; opacity: 0.8;">
                                     (点击查看)
                                 </span>
                             </div>
@@ -63,7 +64,8 @@
                             <div class="success-count color-success" @click="doTotalReignCount(row)">
                                 <span> {{ row.reignCount ?? 0 }}</span>
                                 <span>人</span>
-                                <span v-if="row.reignCount" style="font-size: 12px; margin-left: 4px; opacity: 0.8;">
+                                <span v-if="row.reignCount && row.reignCount > 0"
+                                    style="font-size: 12px; margin-left: 4px; opacity: 0.8;">
                                     (点击查看)
                                 </span>
                             </div>
@@ -75,7 +77,8 @@
                         <div class="danger-count color-danger" @click="doNotReignCount(row)">
                             <span> {{ row.noneReignCount ?? 0 }}</span>
                             <span>人</span>
-                            <span v-if="row.noneReignCount" style="font-size: 12px; margin-left: 4px; opacity: 0.8;">
+                            <span v-if="row.noneReignCount && row.noneReignCount > 0"
+                                style="font-size: 12px; margin-left: 4px; opacity: 0.8;">
                                 (点击查看)
                             </span>
                         </div>
@@ -83,17 +86,25 @@
                 </el-table-column>
                 <el-table-column prop="lateCount" min-width="100" align="center" label="异常进入人数">
                     <template #default="{ row }">
-                        <div class="color-danger">
-                            <span> {{ row.lateCount }}</span>
+                        <div class="danger-count color-danger" @click="doAbnormalCount(row, '100')">
+                            <span> {{ row.lateCount ?? 0 }}</span>
                             <span>人</span>
+                            <span v-if="row.lateCount && row.lateCount > 0"
+                                style="font-size: 12px; margin-left: 4px; opacity: 0.8;">
+                                (点击查看)
+                            </span>
                         </div>
                     </template>
                 </el-table-column>
                 <el-table-column prop="earlyCount" min-width="100" align="center" label="异常外出人数">
                     <template #default="{ row }">
-                        <div class="color-danger">
-                            <span> {{ row.earlyCount }}</span>
+                        <div class="danger-count color-danger" @click="doAbnormalCount(row, '200')">
+                            <span> {{ row.earlyCount ?? 0 }}</span>
                             <span>人</span>
+                            <span v-if="row.earlyCount && row.earlyCount > 0"
+                                style="font-size: 12px; margin-left: 4px; opacity: 0.8;">
+                                (点击查看)
+                            </span>
                         </div>
                     </template>
                 </el-table-column>
@@ -164,6 +175,17 @@ const doNotReignCount = (row: any) => {
     })
 }
 
+const doAbnormalCount = (row: any, alarmType: '100' | '200') => {
+    const params = {
+        clockDateList: [row.time + " 00:00:00", row.time + " 23:59:59"],
+        alarmTypeList: [alarmType],
+    }
+    push({
+        path: "/door/doorCarReignRecord/index",
+        query: { params: JSON.stringify(params) }
+    })
+}
+
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
     selectObjs.value = objs.map(({ id }) => id);
@@ -247,4 +269,4 @@ function addDays(dateStr: string, days: number) {
         transform: scale(1.1);
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/sys/sysPerson/components/person-list.vue b/src/views/sys/sysPerson/components/person-list.vue
new file mode 100644
index 0000000..8f1b2cb
--- /dev/null
+++ b/src/views/sys/sysPerson/components/person-list.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <draggable-dept-tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
+        @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含" :defaultTreeWidth="15"
+        :nodeClickable="false">
+        <el-row shadow="hover" v-show="showSearch" class="ml10">
+          <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+            <el-form-item style="width: 250px;" label="姓名" prop="name">
+              <el-input v-model="state.queryForm.name" placeholder="请输入姓名" />
+            </el-form-item>
+            <el-form-item style="width: 250px;" label="手机号" prop="phone">
+              <el-input v-model="state.queryForm.phone" placeholder="请输入手机号" />
+            </el-form-item>
+            <el-form-item style="width: 250px;" label="证件号码" prop="paperNumber">
+              <el-input v-model="state.queryForm.paperNumber" placeholder="请输入证件号码" />
+            </el-form-item>
+            <el-form-item style="width: 250px;" label="是否加入打卡统计" prop="clockEnable">
+              <dict-select v-model="state.queryForm.clockEnable" :options="yes_no_type" />
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="search" type="primary" @click="getDataList">
+                {{ $t('common.queryBtn') }}
+              </el-button>
+              <el-button icon="Refresh" @click="resetQuery">
+                {{ $t('common.resetBtn') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-row>
+        <el-row>
+          <div class="mb8" style="width: 100%">
+            <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+              v-auth="'admin_sysPerson_add'">
+              新 增
+            </el-button>
+            <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_sysPerson_del'"
+              @click="handleDelete(selectObjs)">
+              删除
+            </el-button>
+            <right-toolbar v-model:showSearch="showSearch" :export="'admin_sysPerson_export'" @exportExcel="exportExcel"
+              class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
+          </div>
+        </el-row>
+        <el-table :data="state.dataList" v-loading="state.loading" border size="small"
+          :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+          @selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+          <el-table-column type="selection" width="40" align="center" />
+          <el-table-column type="index" label="#" width="64" />
+          <el-table-column width="250" label="人员信息">
+            <template #default="{ row }">
+              <div class="flex items-center gap-2 py-1">
+                <div class="w-[52px] shrink-0">
+                  <preview-image width="42px" height="42px" :src="row.avatar" />
+                </div>
+                <div class="flex flex-1 flex-col justify-center gap-1 overflow-hidden pr-2">
+                  <div class="flex items-center gap-1 overflow-hidden leading-5">
+                    <span class="truncate font-medium">{{ row.name }}</span>
+                    <span v-if="row.age" class="shrink-0 text-xs text-gray-500">{{ row.age }}岁</span>
+                    <tag-sex :code="row.sex" />
+                  </div>
+                  <div class="flex items-center gap-1 text-xs text-gray-500 leading-5">
+                    <span class="shrink-0">编码</span>
+                    <div class="flex-1 text-ellipsis text-start">{{ row.code || '--' }}</div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column width="220" label="证件信息">
+            <template #default="{ row }">
+              <div class="flex flex-col justify-start items-start gap-1 py-1 text-start text-xs leading-5">
+                <div class="flex w-full gap-2">
+                  <div class="w-16 shrink-0 text-gray-500">证件类型</div>
+                  <div class="flex-1 overflow-hidden text-ellipsis">
+                    <dict-tag :options="dh_paper_type" :value="row.paperType" />
+                  </div>
+                </div>
+                <div class="flex w-full gap-2">
+                  <div class="w-16 shrink-0 text-gray-500">证件号码</div>
+                  <div class="flex-1 overflow-hidden text-ellipsis">{{ row.paperNumber || '--' }}</div>
+                </div>
+                <div class="flex w-full gap-2">
+                  <div class="w-16 shrink-0 text-gray-500">证件地址</div>
+                  <div class="flex-1 overflow-hidden text-ellipsis">{{ row.paperAddress || '--' }}</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="deptName" width="132" label="部门名称" show-overflow-tooltip />
+          <el-table-column prop="phone" width="140" label="手机号码" show-overflow-tooltip />
+          <el-table-column prop="email" width="170" label="电子邮箱" show-overflow-tooltip />
+          <el-table-column prop="status" width="110" label="人员状态" show-overflow-tooltip>
+            <template #default="{ row }">
+              <tag-user-status :code="row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="isSync" width="100" label="同步">
+            <template #default="{ row }">
+              <tag-sync :isSync="row.isSync == 1" />
+            </template>
+          </el-table-column>
+          <el-table-column width="100" label="是否加入打卡">
+            <template #default="{ row }">
+              <el-tag :type="row.clockEnable === '1' ? 'success' : 'danger'">
+                {{ row.clockEnable === '1' ? '已加入' : '未加入' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="同步配置" min-width="120" show-overflow-tooltip>
+            <template #default="{ row }">
+              <dict-tag :options="user_sync_config" :value="row.syncConfigType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="170" fixed="right"
+            v-auths="['admin_sysPerson_edit', 'admin_sysPerson_del']">
+            <template #default="{ row }">
+              <div class="flex flex-wrap items-center gap-x-3 gap-y-1 py-1 text-xs">
+                <el-button style="margin: 0; padding: 0;" icon="Reading" text type="primary"
+                  v-auth="'admin_sysPerson_edit'" @click="syncConfigFormRef.openDialog(row.id)">
+                  同步设置
+                </el-button>
+                <el-button style="margin: 0; padding: 0;" icon="edit-pen" text type="primary"
+                  v-auth="'admin_sysPerson_edit'" @click="formDialogRef.openDialog(row.id)">
+                  编辑
+                </el-button>
+                <el-button style="margin: 0; padding: 0;" icon="delete" text type="primary"
+                  v-auth="'admin_sysPerson_del'" @click="handleDelete([row.id])">
+                  删除
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+      </draggable-dept-tree>
+    </div>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+    <!-- 同步设置  -->
+    <sync-config-form ref="syncConfigFormRef" @refresh="getDataList(false)" />
+
+  </div>
+</template>
+
+<script setup lang="ts" name="sysPersonList">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObjs } from '/@/api/sys/sysPerson'
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+import dayjs from "dayjs";
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('../person-form.vue'));
+const SyncConfigForm = defineAsyncComponent(() => import('../form.vue'));
+
+// 定义查询字典
+const { dh_paper_type, user_sync_config, yes_no_type } = useDict('dh_paper_type', 'user_sync_config', 'yes_no_type')
+
+// 定义变量内容
+const formDialogRef = ref()
+const syncConfigFormRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+const draggableDepTreeRef = ref()
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  postDownBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  // 清空树状选择
+  state.queryForm.deptId = ""
+  state.queryForm.deptCodes = []
+  draggableDepTreeRef.value.resetData()
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
+  postDownBlobFile('/admin/sysPerson/export', Object.assign(state.queryForm, { ids: selectObjs }), `人员信息管理_${timeSuffix}.xlsx`)
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+  state.queryForm.deptId = curClickedNode.id
+  state.queryForm.deptCodes = checkedTreeNodes.map((item: any) => item.id)
+  state.queryForm.isInclude = !isDeepTree
+  getDataList()
+}
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.text-ellipsis {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/views/sys/sysPerson/index.vue b/src/views/sys/sysPerson/index.vue
index fc02c8c..56f46b7 100644
--- a/src/views/sys/sysPerson/index.vue
+++ b/src/views/sys/sysPerson/index.vue
@@ -1,245 +1,7 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <draggable-dept-tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-        @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含" :defaultTreeWidth="15"
-        :nodeClickable="false">
-        <el-row shadow="hover" v-show="showSearch" class="ml10">
-          <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-            <el-form-item style="width: 250px;" label="姓名" prop="name">
-              <el-input v-model="state.queryForm.name" placeholder="请输入姓名" />
-            </el-form-item>
-            <el-form-item style="width: 250px;" label="手机号" prop="phone">
-              <el-input v-model="state.queryForm.phone" placeholder="请输入手机号" />
-            </el-form-item>
-            <el-form-item style="width: 250px;" label="证件号码" prop="paperNumber">
-              <el-input v-model="state.queryForm.paperNumber" placeholder="请输入证件号码" />
-            </el-form-item>
-            <el-form-item style="width: 250px;" label="是否加入打卡统计" prop="clockEnable">
-              <dict-select v-model="state.queryForm.clockEnable" :options="yes_no_type" />
-            </el-form-item>
-            <el-form-item>
-              <el-button icon="search" type="primary" @click="getDataList">
-                {{ $t('common.queryBtn') }}
-              </el-button>
-              <el-button icon="Refresh" @click="resetQuery">
-                {{ $t('common.resetBtn') }}
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </el-row>
-        <el-row>
-          <div class="mb8" style="width: 100%">
-            <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-              v-auth="'admin_sysPerson_add'">
-              新 增
-            </el-button>
-            <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_sysPerson_del'"
-              @click="handleDelete(selectObjs)">
-              删除
-            </el-button>
-            <right-toolbar v-model:showSearch="showSearch" :export="'admin_sysPerson_export'" @exportExcel="exportExcel"
-              class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
-          </div>
-        </el-row>
-        <el-table :data="state.dataList" v-loading="state.loading" border size="small"
-          :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-          @selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
-          <el-table-column type="selection" width="40" align="center" />
-          <el-table-column type="index" label="#" width="64" />
-          <el-table-column width="250" label="人员信息">
-            <template #default="{ row }">
-              <div class="flex items-center gap-2 py-1">
-                <div class="w-[52px] shrink-0">
-                  <preview-image width="42px" height="42px" :src="row.avatar" />
-                </div>
-                <div class="flex flex-1 flex-col justify-center gap-1 overflow-hidden pr-2">
-                  <div class="flex items-center gap-1 overflow-hidden leading-5">
-                    <span class="truncate font-medium">{{ row.name }}</span>
-                    <span v-if="row.age" class="shrink-0 text-xs text-gray-500">{{ row.age }}岁</span>
-                    <tag-sex :code="row.sex" />
-                  </div>
-                  <div class="flex items-center gap-1 text-xs text-gray-500 leading-5">
-                    <span class="shrink-0">编码</span>
-                    <div class="flex-1 text-ellipsis text-start">{{ row.code || '--' }}</div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column width="220" label="证件信息">
-            <template #default="{ row }">
-              <div class="flex flex-col justify-start items-start gap-1 py-1 text-start text-xs leading-5">
-                <div class="flex w-full gap-2">
-                  <div class="w-16 shrink-0 text-gray-500">证件类型</div>
-                  <div class="flex-1 overflow-hidden text-ellipsis">
-                    <dict-tag :options="dh_paper_type" :value="row.paperType" />
-                  </div>
-                </div>
-                <div class="flex w-full gap-2">
-                  <div class="w-16 shrink-0 text-gray-500">证件号码</div>
-                  <div class="flex-1 overflow-hidden text-ellipsis">{{ row.paperNumber || '--' }}</div>
-                </div>
-                <div class="flex w-full gap-2">
-                  <div class="w-16 shrink-0 text-gray-500">证件地址</div>
-                  <div class="flex-1 overflow-hidden text-ellipsis">{{ row.paperAddress || '--' }}</div>
-                </div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="deptName" width="132" label="部门名称" show-overflow-tooltip />
-          <el-table-column prop="phone" width="140" label="手机号码" show-overflow-tooltip />
-          <el-table-column prop="email" width="170" label="电子邮箱" show-overflow-tooltip />
-          <el-table-column prop="status" width="110" label="人员状态" show-overflow-tooltip>
-            <template #default="{ row }">
-              <tag-user-status :code="row.status" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="isSync" width="100" label="同步">
-            <template #default="{ row }">
-              <tag-sync :isSync="row.isSync == 1" />
-            </template>
-          </el-table-column>
-          <el-table-column width="100" label="是否加入打卡">
-            <template #default="{ row }">
-              <el-tag :type="row.clockEnable === '1' ? 'success' : 'danger'">
-                {{ row.clockEnable === '1' ? '已加入' : '未加入' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="同步配置" min-width="120" show-overflow-tooltip>
-            <template #default="{ row }">
-              <dict-tag :options="user_sync_config" :value="row.syncConfigType" />
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="170" fixed="right"
-            v-auths="['admin_sysPerson_edit', 'admin_sysPerson_del']">
-            <template #default="{ row }">
-              <div class="flex flex-wrap items-center gap-x-3 gap-y-1 py-1 text-xs">
-                <el-button style="margin: 0; padding: 0;" icon="Reading" text type="primary"
-                  v-auth="'admin_sysPerson_edit'" @click="syncConfigFormRef.openDialog(row.id)">
-                  同步设置
-                </el-button>
-                <el-button style="margin: 0; padding: 0;" icon="edit-pen" text type="primary"
-                  v-auth="'admin_sysPerson_edit'" @click="formDialogRef.openDialog(row.id)">
-                  编辑
-                </el-button>
-                <el-button style="margin: 0; padding: 0;" icon="delete" text type="primary"
-                  v-auth="'admin_sysPerson_del'" @click="handleDelete([row.id])">
-                  删除
-                </el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-      </draggable-dept-tree>
-    </div>
-
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-    <!-- 同步设置  -->
-    <sync-config-form ref="syncConfigFormRef" @refresh="getDataList(false)" />
-
-  </div>
+  <person-list />
 </template>
 
 <script setup lang="ts" name="systemSysPerson">
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import { fetchList, delObjs } from '/@/api/sys/sysPerson'
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
-import dayjs from "dayjs";
-
-// 引入组件
-const FormDialog = defineAsyncComponent(() => import('./person-form.vue'));
-const SyncConfigForm = defineAsyncComponent(() => import('./form.vue'));
-
-// 定义查询字典
-const { dh_paper_type, user_sync_config, yes_no_type } = useDict('dh_paper_type', 'user_sync_config', 'yes_no_type')
-
-// 定义变量内容
-const formDialogRef = ref()
-const syncConfigFormRef = ref()
-// 搜索变量
-const queryRef = ref()
-const showSearch = ref(true)
-// 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
-const draggableDepTreeRef = ref()
-
-const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
-  pageList: fetchList
-})
-
-//  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  postDownBlobFile,
-  tableStyle
-} = useTable(state)
-
-// 清空搜索条件
-const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  // 清空树状选择
-  state.queryForm.deptId = ""
-  state.queryForm.deptCodes = []
-  draggableDepTreeRef.value.resetData()
-  getDataList()
-}
-
-// 导出excel
-const exportExcel = () => {
-  const timeSuffix = dayjs().format('YYYY-MM-DD_HH-mm-ss')
-  postDownBlobFile('/admin/sysPerson/export', Object.assign(state.queryForm, { ids: selectObjs }), `人员信息管理_${timeSuffix}.xlsx`)
-}
-
-// 多选事件
-const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
-  multiple.value = !objs.length;
-};
-
-// 树节点选择时
-const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
-  state.queryForm.deptId = curClickedNode.id
-  state.queryForm.deptCodes = checkedTreeNodes.map((item: any) => item.id)
-  state.queryForm.isInclude = !isDeepTree
-  getDataList()
-}
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
-
-  try {
-    await delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
+import PersonList from './components/person-list.vue';
 </script>
-
-<style lang="scss" scoped>
-.text-ellipsis {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
diff --git a/src/views/tools/job-manage/components/job-manage-list.vue b/src/views/tools/job-manage/components/job-manage-list.vue
new file mode 100644
index 0000000..58c160d
--- /dev/null
+++ b/src/views/tools/job-manage/components/job-manage-list.vue
@@ -0,0 +1,427 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-row class="ml10" v-show="showSearch">
+        <el-form :inline="true" :model="state.queryForm" ref="queryRef">
+          <el-form-item :label="$t('job.jobName')" prop="jobName">
+            <el-input :placeholder="$t('job.inputjobNameTip')" @keyup.enter="getDataList" clearable
+                      v-model="state.queryForm.jobName"/>
+          </el-form-item>
+          <el-form-item :label="t('job.jobStatus')" prop="jobStatus">
+            <el-select :placeholder="t('job.inputjobStatusTip')" v-model="state.queryForm.jobStatus">
+              <el-option :key="index" :label="item.label" :value="item.value"
+                         v-for="(item, index) in job_status"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('job.jobExecuteStatus')" prop="jobExecuteStatus">
+            <el-select :placeholder="t('job.inputjobExecuteStatusTip')" v-model="state.queryForm.jobExecuteStatus">
+              <el-option :key="index" :label="item.label" :value="item.value"
+                         v-for="(item, index) in job_execute_status"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button @click="getDataList" icon="Search" type="primary">{{ $t('common.queryBtn') }}</el-button>
+            <el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button v-auth="'job_sys_job_add'" @click="formDialogRef.openDialog()" class="ml10" icon="folder-add"
+                     type="primary">
+            {{ $t('common.addBtn') }}
+          </el-button>
+          <el-button plain v-auth="'job_sys_job_del'" :disabled="multiple" @click="handleDelete(undefined)" class="ml10"
+                     icon="Delete" type="primary">
+            {{ $t('common.delBtn') }}
+          </el-button>
+          <right-toolbar
+              :export="'job_sys_job_add'"
+              @exportExcel="exportExcel"
+              @queryTable="getDataList"
+              class="ml10"
+              style="float: right; margin-right: 20px"
+              v-model:showSearch="showSearch"
+          >
+            <el-tooltip class="item" effect="dark" :content="$t('queryTree.view')" placement="top">
+              <el-button circle icon="Grid" @click="tableViewRef = !tableViewRef"></el-button>
+            </el-tooltip>
+          </right-toolbar>
+        </div>
+      </el-row>
+
+      <!-- 表格视图  -->
+      <el-table
+          v-if="tableViewRef"
+          :data="state.dataList"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          row-key="jobId"
+          v-loading="state.loading"
+          border
+          :cell-style="tableStyle.cellStyle"
+          :header-cell-style="tableStyle.headerCellStyle"
+      >
+        <el-table-column align="center" type="selection" width="40"/>
+        <el-table-column :label="t('job.index')" fixed="left" type="index" width="60"/>
+        <el-table-column :label="t('job.jobName')" fixed="left" prop="jobName" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.jobGroup')" prop="jobGroup" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.jobStatus')" prop="jobStatus" show-overflow-tooltip width="120">
+          <template #default="scope">
+            <dict-tag :options="job_status" :value="scope.row.jobStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('job.jobExecuteStatus')" prop="jobExecuteStatus" show-overflow-tooltip width="120">
+          <template #default="scope">
+            <dict-tag :options="job_execute_status" :value="scope.row.jobExecuteStatus"></dict-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column :label="t('job.startTime')" prop="startTime" show-overflow-tooltip width="120"/>
+
+        <el-table-column :label="t('job.previousTime')" prop="previousTime" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.nextTime')" prop="nextTime" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.jobType')" prop="jobType" show-overflow-tooltip width="120">
+          <template #default="scope">
+            <dict-tag :options="job_type" :value="scope.row.jobType"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('job.executePath')" prop="executePath" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.className')" prop="className" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.methodName')" prop="methodName" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.methodParamsValue')" prop="methodParamsValue" show-overflow-tooltip
+                         width="120"/>
+        <el-table-column :label="t('job.cronExpression')" prop="cronExpression" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.misfirePolicy')" prop="misfirePolicy" show-overflow-tooltip width="200">
+          <template #default="scope">
+            <dict-tag :options="misfire_policy" :value="scope.row.misfirePolicy"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.action')" fixed="right" width="300">
+          <template #default="scope">
+            <el-button @click="handleJobLog(scope.row)" text type="primary">{{ $t('job.jobLogBtn') }}</el-button>
+
+            <el-button v-auth="'job_sys_job_start_job'" @click="handleStartJob(scope.row)" text type="primary"
+                       v-if="scope.row.jobStatus !== '2'"
+            >
+              {{ $t('job.jobStartBtn') }}
+            </el-button>
+
+            <el-button
+                v-auth="'job_sys_job_shutdown_job'"
+                @click="handleShutDownJob(scope.row)"
+                text
+                type="primary"
+                v-if="scope.row.jobStatus === '2'"
+            >
+              {{ $t('job.jobPauseBtn') }}
+            </el-button>
+
+            <el-button v-auth="'job_sys_job_edit'" @click="handleEditJob(scope.row)" text type="primary">
+              {{ $t('common.editBtn') }}
+            </el-button>
+
+            <el-button v-auth="'job_sys_job_start_job'" @click="handleRunJob(scope.row)" text type="primary">
+              {{ $t('job.jobRunBtn') }}
+            </el-button>
+
+            <el-button v-auth="'job_sys_job_del'" @click="handleDelete(scope.row)" text type="primary"
+                       :disabled="scope.row.jobStatus === '2'">{{ $t('common.delBtn') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 卡片视图  -->
+      <el-scrollbar v-if="!tableViewRef">
+        <div class="p-4">
+          <div class="mx-auto">
+            <!-- Main -->
+            <div class="grid grid-cols-4 gap-x-4 gap-y-6">
+              <div
+                  v-for="job in state.dataList"
+                  :key="job.jobId"
+                  class="w-full max-w-sm mt-2 bg-gray-100 dark:bg-[#1d1e1f] rounded-lg border dark:border-[#303030]"
+              >
+                <div aria-label="header" class="flex items-center p-4 space-x-4">
+                  <div aria-label="avatar" class="flex items-center mr-auto space-x-4">
+                    <div class="flex flex-col flex-1 space-y-2">
+                      <div class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                        {{ job.jobName }}
+                      </div>
+                      <p class="text-base font-normal text-gray-500 truncate dark:text-gray-400">
+                        {{ job.jobGroup }} / {{ job_type.find((item: any) => item.value === job.jobType)?.label }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div aria-label="navigation" class="py-2">
+                  <nav class="grid gap-1">
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.jobStatus') }}:</span>
+                      <span>{{ job_status.find((item: any) => item.value === job.jobStatus)?.label }}</span>
+                    </div>
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.cronExpression') }}:</span>
+                      <span>{{ job.cronExpression }}</span>
+                    </div>
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.previousTime') }}:</span>
+                      <span>{{ job.previousTime }}</span>
+                    </div>
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.nextTime') }}:</span>
+                      <span>{{ job.nextTime }}</span>
+                    </div>
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.jobExecuteStatus') }}:</span>
+                      <span>
+                          <el-icon v-if="job.jobExecuteStatus === '1'"><CircleCloseFilled/></el-icon>
+                          <el-icon v-if="job.jobExecuteStatus === '0'"><CircleCheckFilled/></el-icon>
+                      </span>
+                    </div>
+                  </nav>
+                </div>
+                <div aria-label="footer" class="pt-2 border-t dark:border-[#303030]">
+                  <div class="flex items-center justify-center min-w-full">
+                    <nav class="flex">
+                      <a
+                          @click="handleJobLog(job)"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('job.jobLogBtn') }}</span>
+                      </a>
+                      <a
+                          v-auth="'job_sys_job_start_job'"
+                          @click="handleStartJob(job)"
+                          v-if="job.jobStatus !== '2'"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('job.jobStartBtn') }}</span>
+                      </a>
+                      <a
+                          v-auth="'job_sys_job_shutdown_job'"
+                          @click="handleShutDownJob(job)"
+                          v-if="job.jobStatus === '2'"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('job.jobPauseBtn') }}</span>
+                      </a>
+                      <a
+                          v-auth="'job_sys_job_edit'" @click="handleEditJob(job)"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span> {{ $t('common.editBtn') }}</span>
+                      </a>
+                      <a
+                          v-auth="'job_sys_job_start_job'" @click="handleRunJob(job)"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('job.jobRunBtn') }}</span>
+                      </a>
+
+                      <a
+                          v-auth="'job_sys_job_del'" @click="handleDelete(job)" type="primary"
+                          v-if="job.jobStatus !== '2'"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('common.delBtn') }}</span>
+                      </a>
+                    </nav>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </el-scrollbar>
+
+      <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"/>
+    </div>
+
+    <!-- 编辑、新增  -->
+    <form-dialog @refresh="getDataList()" ref="formDialogRef"/>
+    <job-log ref="jobLogRef"></job-log>
+  </div>
+</template>
+
+<script lang="ts" name="jobManageList" setup>
+import {BasicTableProps, useTable} from '/@/hooks/table';
+import {delObj, fetchList, runJobRa, shutDownJobRa, startJobRa} from '/@/api/daemon/job';
+import {useMessage, useMessageBox} from '/@/hooks/message';
+import {useDict} from '/@/hooks/dict';
+import {useI18n} from 'vue-i18n';
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('../form.vue'));
+const JobLog = defineAsyncComponent(() => import('../job-log.vue'));
+
+// 获取国际化方法
+const {t} = useI18n();
+
+/** 表单弹窗引用 */
+const formDialogRef = ref();
+/** 作业日志引用 */
+const jobLogRef = ref();
+/** 表格视图 */
+const tableViewRef = ref(false)
+/** 搜索表单信息 */
+const queryForm = reactive({
+  jobName: '',
+  jobGroup: '',
+  jobStatus: '',
+  jobExecuteStatus: '',
+});
+/** 是否展示搜索表单 */
+const showSearch = ref(true);
+
+// 多选变量
+/** 选中的行 */
+const selectedRows = ref([]);
+/** 是否可以多选 */
+const multiple = ref(true);
+
+/** 查询字典 */
+const {
+  job_status,
+  job_execute_status,
+  misfire_policy,
+  job_type
+} = useDict('job_status', 'job_execute_status', 'misfire_policy', 'job_type');
+
+/** 表格状态变量 */
+const state = reactive<BasicTableProps>({
+  queryForm,
+  pageList: fetchList,
+  pagination: {
+    size: 8,
+    pageSizes: [4, 8, 12]
+  }
+});
+
+/** 获取表格数据方法 */
+const {getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle} = useTable(state);
+
+/** 重置查询表单 */
+const resetQuery = () => {
+  Object.keys(queryForm).forEach((key) => (queryForm[key] = ''));
+  getDataList();
+};
+
+/** 行选中事件 */
+const handleSelectionChange = (rows: any) => {
+  selectedRows.value = rows;
+  multiple.value = !rows.length;
+};
+
+/** 导出Excel */
+const exportExcel = () => {
+  downBlobFile('/job/sys-job/export', Object.assign(state.queryForm, {ids: selectedRows}), 'job.xlsx');
+};
+
+/** 查看作业日志 */
+const handleJobLog = (row) => {
+  jobLogRef.value.openDialog(row.jobId);
+};
+
+/** 编辑作业 */
+const handleEditJob = (row) => {
+  const jobStatus = row.jobStatus;
+  if (jobStatus === '1' || jobStatus === '3') {
+    formDialogRef.value.openDialog(row.jobId);
+  } else {
+    useMessage().error('运行中定时任务不可修改，请先暂停后操作');
+  }
+};
+
+/** 启动作业 */
+const handleStartJob = async (row) => {
+  const jobStatus = row.jobStatus;
+  if (jobStatus === '1' || jobStatus === '3') {
+    try {
+      await useMessageBox().confirm(`即将发布或启动(任务名称: ${row.jobName}), 是否继续?`);
+    } catch {
+      return;
+    }
+
+    try {
+      await startJobRa(row.jobId);
+      getDataList();
+      useMessage().success(t('common.optSuccessText'));
+    } catch (err: any) {
+      useMessage().error(err.msg);
+    }
+  } else {
+    useMessage().error('定时任务已运行');
+  }
+};
+
+/** 暂停作业 */
+const handleShutDownJob = async (row) => {
+  const jobStatus = row.jobStatus;
+  if (jobStatus === '2') {
+    try {
+      await useMessageBox().confirm(`即将暂停(任务名称: ${row.jobName}), 是否继续?`);
+    } catch {
+      return;
+    }
+
+    try {
+      await shutDownJobRa(row.jobId);
+      getDataList();
+      useMessage().success(t('common.optSuccessText'));
+    } catch (err: any) {
+      useMessage().error(err.msg);
+    }
+  } else {
+    useMessage().error('已暂停，不要重复操作');
+  }
+};
+
+/** 运行作业 */
+const handleRunJob = async (row) => {
+  try {
+    await useMessageBox().confirm(`立刻执行一次任务(任务名称: ${row.jobName}), 是否继续?`);
+  } catch {
+    return;
+  }
+
+  try {
+    await runJobRa(row.jobId);
+    getDataList();
+    useMessage().success(t('common.optSuccessText'));
+  } catch (err: any) {
+    useMessage().error('运行失败');
+  }
+};
+
+/** 删除操作 */
+const handleDelete = async (row) => {
+  if (!row) {
+    selectedRows.value.forEach(handleDelete);
+    return;
+  }
+
+  const {jobId, jobName} = row;
+  try {
+    await useMessageBox().confirm(`${t('common.delConfirmText')}(任务名称:${jobName})`);
+  } catch {
+    return;
+  }
+
+  try {
+    await delObj(jobId);
+    getDataList();
+    useMessage().success(t('common.delSuccessText'));
+  } catch (error: any) {
+    useMessage().error('删除失败');
+  }
+};
+</script>
diff --git a/src/views/tools/job-manage/index.vue b/src/views/tools/job-manage/index.vue
index 24a68bd..db35699 100644
--- a/src/views/tools/job-manage/index.vue
+++ b/src/views/tools/job-manage/index.vue
@@ -1,427 +1,7 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <el-row class="ml10" v-show="showSearch">
-        <el-form :inline="true" :model="state.queryForm" ref="queryRef">
-          <el-form-item :label="$t('job.jobName')" prop="jobName">
-            <el-input :placeholder="$t('job.inputjobNameTip')" @keyup.enter="getDataList" clearable
-                      v-model="state.queryForm.jobName"/>
-          </el-form-item>
-          <el-form-item :label="t('job.jobStatus')" prop="jobStatus">
-            <el-select :placeholder="t('job.inputjobStatusTip')" v-model="state.queryForm.jobStatus">
-              <el-option :key="index" :label="item.label" :value="item.value"
-                         v-for="(item, index) in job_status"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="t('job.jobExecuteStatus')" prop="jobExecuteStatus">
-            <el-select :placeholder="t('job.inputjobExecuteStatusTip')" v-model="state.queryForm.jobExecuteStatus">
-              <el-option :key="index" :label="item.label" :value="item.value"
-                         v-for="(item, index) in job_execute_status"></el-option>
-            </el-select>
-          </el-form-item>
-
-          <el-form-item>
-            <el-button @click="getDataList" icon="Search" type="primary">{{ $t('common.queryBtn') }}</el-button>
-            <el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <el-button v-auth="'job_sys_job_add'" @click="formDialogRef.openDialog()" class="ml10" icon="folder-add"
-                     type="primary">
-            {{ $t('common.addBtn') }}
-          </el-button>
-          <el-button plain v-auth="'job_sys_job_del'" :disabled="multiple" @click="handleDelete(undefined)" class="ml10"
-                     icon="Delete" type="primary">
-            {{ $t('common.delBtn') }}
-          </el-button>
-          <right-toolbar
-              :export="'job_sys_job_add'"
-              @exportExcel="exportExcel"
-              @queryTable="getDataList"
-              class="ml10"
-              style="float: right; margin-right: 20px"
-              v-model:showSearch="showSearch"
-          >
-            <el-tooltip class="item" effect="dark" :content="$t('queryTree.view')" placement="top">
-              <el-button circle icon="Grid" @click="tableViewRef = !tableViewRef"></el-button>
-            </el-tooltip>
-          </right-toolbar>
-        </div>
-      </el-row>
-
-      <!-- 表格视图  -->
-      <el-table
-          v-if="tableViewRef"
-          :data="state.dataList"
-          @selection-change="handleSelectionChange"
-          style="width: 100%"
-          row-key="jobId"
-          v-loading="state.loading"
-          border
-          :cell-style="tableStyle.cellStyle"
-          :header-cell-style="tableStyle.headerCellStyle"
-      >
-        <el-table-column align="center" type="selection" width="40"/>
-        <el-table-column :label="t('job.index')" fixed="left" type="index" width="60"/>
-        <el-table-column :label="t('job.jobName')" fixed="left" prop="jobName" show-overflow-tooltip width="120"/>
-        <el-table-column :label="t('job.jobGroup')" prop="jobGroup" show-overflow-tooltip width="120"/>
-        <el-table-column :label="t('job.jobStatus')" prop="jobStatus" show-overflow-tooltip width="120">
-          <template #default="scope">
-            <dict-tag :options="job_status" :value="scope.row.jobStatus"></dict-tag>
-          </template>
-        </el-table-column>
-        <el-table-column :label="t('job.jobExecuteStatus')" prop="jobExecuteStatus" show-overflow-tooltip width="120">
-          <template #default="scope">
-            <dict-tag :options="job_execute_status" :value="scope.row.jobExecuteStatus"></dict-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column :label="t('job.startTime')" prop="startTime" show-overflow-tooltip width="120"/>
-
-        <el-table-column :label="t('job.previousTime')" prop="previousTime" show-overflow-tooltip width="120"/>
-        <el-table-column :label="t('job.nextTime')" prop="nextTime" show-overflow-tooltip width="120"/>
-        <el-table-column :label="t('job.jobType')" prop="jobType" show-overflow-tooltip width="120">
-          <template #default="scope">
-            <dict-tag :options="job_type" :value="scope.row.jobType"></dict-tag>
-          </template>
-        </el-table-column>
-        <el-table-column :label="t('job.executePath')" prop="executePath" show-overflow-tooltip width="120"/>
-        <el-table-column :label="t('job.className')" prop="className" show-overflow-tooltip width="120"/>
-        <el-table-column :label="t('job.methodName')" prop="methodName" show-overflow-tooltip width="120"/>
-        <el-table-column :label="t('job.methodParamsValue')" prop="methodParamsValue" show-overflow-tooltip
-                         width="120"/>
-        <el-table-column :label="t('job.cronExpression')" prop="cronExpression" show-overflow-tooltip width="120"/>
-        <el-table-column :label="t('job.misfirePolicy')" prop="misfirePolicy" show-overflow-tooltip width="200">
-          <template #default="scope">
-            <dict-tag :options="misfire_policy" :value="scope.row.misfirePolicy"></dict-tag>
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('common.action')" fixed="right" width="300">
-          <template #default="scope">
-            <el-button @click="handleJobLog(scope.row)" text type="primary">{{ $t('job.jobLogBtn') }}</el-button>
-
-            <el-button v-auth="'job_sys_job_start_job'" @click="handleStartJob(scope.row)" text type="primary"
-                       v-if="scope.row.jobStatus !== '2'"
-            >
-              {{ $t('job.jobStartBtn') }}
-            </el-button>
-
-            <el-button
-                v-auth="'job_sys_job_shutdown_job'"
-                @click="handleShutDownJob(scope.row)"
-                text
-                type="primary"
-                v-if="scope.row.jobStatus === '2'"
-            >
-              {{ $t('job.jobPauseBtn') }}
-            </el-button>
-
-            <el-button v-auth="'job_sys_job_edit'" @click="handleEditJob(scope.row)" text type="primary">
-              {{ $t('common.editBtn') }}
-            </el-button>
-
-            <el-button v-auth="'job_sys_job_start_job'" @click="handleRunJob(scope.row)" text type="primary">
-              {{ $t('job.jobRunBtn') }}
-            </el-button>
-
-            <el-button v-auth="'job_sys_job_del'" @click="handleDelete(scope.row)" text type="primary"
-                       :disabled="scope.row.jobStatus === '2'">{{ $t('common.delBtn') }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 卡片视图  -->
-      <el-scrollbar v-if="!tableViewRef">
-        <div class="p-4">
-          <div class="mx-auto">
-            <!-- Main -->
-            <div class="grid grid-cols-4 gap-x-4 gap-y-6">
-              <div
-                  v-for="job in state.dataList"
-                  :key="job.jobId"
-                  class="w-full max-w-sm mt-2 bg-gray-100 dark:bg-[#1d1e1f] rounded-lg border dark:border-[#303030]"
-              >
-                <div aria-label="header" class="flex items-center p-4 space-x-4">
-                  <div aria-label="avatar" class="flex items-center mr-auto space-x-4">
-                    <div class="flex flex-col flex-1 space-y-2">
-                      <div class="text-lg font-bold text-gray-900 dark:text-gray-100">
-                        {{ job.jobName }}
-                      </div>
-                      <p class="text-base font-normal text-gray-500 truncate dark:text-gray-400">
-                        {{ job.jobGroup }} / {{ job_type.find((item: any) => item.value === job.jobType)?.label }}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div aria-label="navigation" class="py-2">
-                  <nav class="grid gap-1">
-                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
-                      <span class="font-medium">{{ $t('job.jobStatus') }}:</span>
-                      <span>{{ job_status.find((item: any) => item.value === job.jobStatus)?.label }}</span>
-                    </div>
-                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
-                      <span class="font-medium">{{ $t('job.cronExpression') }}:</span>
-                      <span>{{ job.cronExpression }}</span>
-                    </div>
-                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
-                      <span class="font-medium">{{ $t('job.previousTime') }}:</span>
-                      <span>{{ job.previousTime }}</span>
-                    </div>
-                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
-                      <span class="font-medium">{{ $t('job.nextTime') }}:</span>
-                      <span>{{ job.nextTime }}</span>
-                    </div>
-                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
-                      <span class="font-medium">{{ $t('job.jobExecuteStatus') }}:</span>
-                      <span>
-                          <el-icon v-if="job.jobExecuteStatus === '1'"><CircleCloseFilled/></el-icon>
-                          <el-icon v-if="job.jobExecuteStatus === '0'"><CircleCheckFilled/></el-icon>
-                      </span>
-                    </div>
-                  </nav>
-                </div>
-                <div aria-label="footer" class="pt-2 border-t dark:border-[#303030]">
-                  <div class="flex items-center justify-center min-w-full">
-                    <nav class="flex">
-                      <a
-                          @click="handleJobLog(job)"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
-                      >
-                        <span>{{ $t('job.jobLogBtn') }}</span>
-                      </a>
-                      <a
-                          v-auth="'job_sys_job_start_job'"
-                          @click="handleStartJob(job)"
-                          v-if="job.jobStatus !== '2'"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
-                      >
-                        <span>{{ $t('job.jobStartBtn') }}</span>
-                      </a>
-                      <a
-                          v-auth="'job_sys_job_shutdown_job'"
-                          @click="handleShutDownJob(job)"
-                          v-if="job.jobStatus === '2'"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
-                      >
-                        <span>{{ $t('job.jobPauseBtn') }}</span>
-                      </a>
-                      <a
-                          v-auth="'job_sys_job_edit'" @click="handleEditJob(job)"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
-                      >
-                        <span> {{ $t('common.editBtn') }}</span>
-                      </a>
-                      <a
-                          v-auth="'job_sys_job_start_job'" @click="handleRunJob(job)"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
-                      >
-                        <span>{{ $t('job.jobRunBtn') }}</span>
-                      </a>
-
-                      <a
-                          v-auth="'job_sys_job_del'" @click="handleDelete(job)" type="primary"
-                          v-if="job.jobStatus !== '2'"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
-                      >
-                        <span>{{ $t('common.delBtn') }}</span>
-                      </a>
-                    </nav>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </el-scrollbar>
-
-      <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"/>
-    </div>
-
-    <!-- 编辑、新增  -->
-    <form-dialog @refresh="getDataList()" ref="formDialogRef"/>
-    <job-log ref="jobLogRef"></job-log>
-  </div>
+  <job-manage-list />
 </template>
 
-<script lang="ts" name="systemSysJob" setup>
-import {BasicTableProps, useTable} from '/@/hooks/table';
-import {delObj, fetchList, runJobRa, shutDownJobRa, startJobRa} from '/@/api/daemon/job';
-import {useMessage, useMessageBox} from '/@/hooks/message';
-import {useDict} from '/@/hooks/dict';
-import {useI18n} from 'vue-i18n';
-
-// 引入组件
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
-const JobLog = defineAsyncComponent(() => import('./job-log.vue'));
-
-// 获取国际化方法
-const {t} = useI18n();
-
-/** 表单弹窗引用 */
-const formDialogRef = ref();
-/** 作业日志引用 */
-const jobLogRef = ref();
-/** 表格视图 */
-const tableViewRef = ref(false)
-/** 搜索表单信息 */
-const queryForm = reactive({
-  jobName: '',
-  jobGroup: '',
-  jobStatus: '',
-  jobExecuteStatus: '',
-});
-/** 是否展示搜索表单 */
-const showSearch = ref(true);
-
-// 多选变量
-/** 选中的行 */
-const selectedRows = ref([]);
-/** 是否可以多选 */
-const multiple = ref(true);
-
-/** 查询字典 */
-const {
-  job_status,
-  job_execute_status,
-  misfire_policy,
-  job_type
-} = useDict('job_status', 'job_execute_status', 'misfire_policy', 'job_type');
-
-/** 表格状态变量 */
-const state = reactive<BasicTableProps>({
-  queryForm,
-  pageList: fetchList,
-  pagination: {
-    size: 8,
-    pageSizes: [4, 8, 12]
-  }
-});
-
-/** 获取表格数据方法 */
-const {getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle} = useTable(state);
-
-/** 重置查询表单 */
-const resetQuery = () => {
-  Object.keys(queryForm).forEach((key) => (queryForm[key] = ''));
-  getDataList();
-};
-
-/** 行选中事件 */
-const handleSelectionChange = (rows: any) => {
-  selectedRows.value = rows;
-  multiple.value = !rows.length;
-};
-
-/** 导出Excel */
-const exportExcel = () => {
-  downBlobFile('/job/sys-job/export', Object.assign(state.queryForm, {ids: selectedRows}), 'job.xlsx');
-};
-
-/** 查看作业日志 */
-const handleJobLog = (row) => {
-  jobLogRef.value.openDialog(row.jobId);
-};
-
-/** 编辑作业 */
-const handleEditJob = (row) => {
-  const jobStatus = row.jobStatus;
-  if (jobStatus === '1' || jobStatus === '3') {
-    formDialogRef.value.openDialog(row.jobId);
-  } else {
-    useMessage().error('运行中定时任务不可修改，请先暂停后操作');
-  }
-};
-
-/** 启动作业 */
-const handleStartJob = async (row) => {
-  const jobStatus = row.jobStatus;
-  if (jobStatus === '1' || jobStatus === '3') {
-    try {
-      await useMessageBox().confirm(`即将发布或启动(任务名称: ${row.jobName}), 是否继续?`);
-    } catch {
-      return;
-    }
-
-    try {
-      await startJobRa(row.jobId);
-      getDataList();
-      useMessage().success(t('common.optSuccessText'));
-    } catch (err: any) {
-      useMessage().error(err.msg);
-    }
-  } else {
-    useMessage().error('定时任务已运行');
-  }
-};
-
-/** 暂停作业 */
-const handleShutDownJob = async (row) => {
-  const jobStatus = row.jobStatus;
-  if (jobStatus === '2') {
-    try {
-      await useMessageBox().confirm(`即将暂停(任务名称: ${row.jobName}), 是否继续?`);
-    } catch {
-      return;
-    }
-
-    try {
-      await shutDownJobRa(row.jobId);
-      getDataList();
-      useMessage().success(t('common.optSuccessText'));
-    } catch (err: any) {
-      useMessage().error(err.msg);
-    }
-  } else {
-    useMessage().error('已暂停，不要重复操作');
-  }
-};
-
-/** 运行作业 */
-const handleRunJob = async (row) => {
-  try {
-    await useMessageBox().confirm(`立刻执行一次任务(任务名称: ${row.jobName}), 是否继续?`);
-  } catch {
-    return;
-  }
-
-  try {
-    await runJobRa(row.jobId);
-    getDataList();
-    useMessage().success(t('common.optSuccessText'));
-  } catch (err: any) {
-    useMessage().error('运行失败');
-  }
-};
-
-/** 删除操作 */
-const handleDelete = async (row) => {
-  if (!row) {
-    selectedRows.value.forEach(handleDelete);
-    return;
-  }
-
-  const {jobId, jobName} = row;
-  try {
-    await useMessageBox().confirm(`${t('common.delConfirmText')}(任务名称:${jobName})`);
-  } catch {
-    return;
-  }
-
-  try {
-    await delObj(jobId);
-    getDataList();
-    useMessage().success(t('common.delSuccessText'));
-  } catch (error: any) {
-    useMessage().error('删除失败');
-  }
-};
+<script setup lang="ts" name="systemSysJob">
+import JobManageList from './components/job-manage-list.vue';
 </script>