11

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

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

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
     })
-  }
+  }

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

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;
 }

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>

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>

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

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>

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;
 	});
 };

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>

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>

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>

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) {

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',

src/views/admin/system/user/i18n/zh-cn.ts

@@ -20,6 +20,7 @@ export default {
 		deleteDisabledTip: 'admin 不允许被删除',
 		noDataScopeTip: '没有数据权限',
 		passwordBtn: '密码',
+		assignRoleBtn: '分配角色',
 	},
 	personal: {
 		name: '个人信息',

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>

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>

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(() => {

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>
+</script>

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>

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>
+</script>

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>

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>
+</script>

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>
+</script>

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>
+import AreaHouseList from '../_components/areaHouseList.vue';
+</script>

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>
+import AreaManageList from '../_components/areaManageList.vue';
+</script>

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>

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>

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>

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>

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>

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>

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>

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>

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>
+</script>
+
+<style scoped>
+.embedded-access-list :deep(.layout-padding-auto) {
+  height: auto;
+  min-height: 0;
+}
+</style>

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>

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>
+</script>
+
+<style scoped>
+.embedded-record-list :deep(.layout-padding-auto) {
+  height: auto;
+  min-height: 0;
+}
+</style>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>
+</style>

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>

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>

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>

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>