by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
Details

Browse Source 
# Conflicts:
#	apps/web-antd/vite.config.mts
This commit is contained in:
FLL
2025-08-12 14:00:32 +08:00
parent 938bb0a52a bc73f02c47
commit 12be6eb03b
43 changed files with 2701 additions and 1360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
apps/web-antd/index.html
View File

@@ -1,23 +1,24 @@
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="description" content="A Modern Back-end Management System" />
<meta name="keywords" content="Vben Admin Vue3 Vite" />
<meta name="author" content="Vben" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<!-- 由 vite 注入 VITE_APP_TITLE 变量，在 .env 文件内配置 -->
<title><%= VITE_APP_TITLE %></title>
<link rel="icon" href="/favicon.ico" />
<script type="text/javascript" src="/EasyPlayer-element.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="description" content="A Modern Back-end Management System"/>
<meta name="keywords" content="Vben Admin Vue3 Vite"/>
<meta name="author" content="Vben"/>
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<!-- 由 vite 注入 VITE_APP_TITLE 变量，在 .env 文件内配置 -->
<title><%= VITE_APP_TITLE %></title>
<link rel="icon" href="/favicon.ico"/>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=3.0&ak=5GUquqE2yrgMo3BPIGcn89dU8uMhnbxG"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

34
apps/web-antd/src/api/property/attendanceManagement/arrangement/index.ts
View File

@@ -1,18 +1,25 @@
import type { ArrangementVO, ArrangementForm, ArrangementQuery } from './model';
import type {
ArrangementVO,
ArrangementForm,
ArrangementQuery,
arrangmentListQuery,
} from './model';
import type { ID, IDS } from '#/api/common';
import type { PageResult } from '#/api/common';
import { commonExport } from '#/api/helper';
import { requestClient } from '#/api/request';
/**
* 分页查询排班列表
* @param params
* @returns 排班列表
*/
* 分页查询排班列表
* @param params
* @returns 排班列表
*/
export function arrangementList(params?: ArrangementQuery) {
return requestClient.get<PageResult<ArrangementVO>>('/property/arrangement/list', { params });
return requestClient.get<PageResult<ArrangementVO>>(
'/property/arrangement/list',
{ params },
);
}
/**
* 根据月份查询排班列表
@@ -58,3 +65,16 @@ export function arrangementUpdate(data: ArrangementForm) {
export function arrangementRemove(id: ID | IDS) {
return requestClient.deleteWithMsg<void>(`/property/arrangement/${id}`);
}
/**
* 查询某天排班详情列表
* @param params
* @returns 排班列表
*/
export function arrangmentList(params?: arrangmentListQuery) {
return requestClient.get<PageResult<ArrangementVO>>(
'/property/arrangement/list',
{ params },
);
}

20
apps/web-antd/src/api/property/attendanceManagement/arrangement/model.d.ts vendored
View File

@@ -9,37 +9,40 @@ export interface ArrangementVO {
/**
* 排班名称
*/
scheduleName: string;
scheduleName?: string;
/**
* 考勤组ID
*/
groupId: string | number;
groupId?: string | number;
/**
* 排班类型：1-固定班制，2-排班制
*/
scheduleType: number;
scheduleType?: number;
/**
* 日期类型：1-单个日期，2-长期有效，3-期间有效
*/
dateType: number;
dateType?: number;
/**
* 开始日期
*/
startDate: string;
startDate?: string;
/**
* 结束日期(仅date_type=3时有效)
*/
endDate: string;
endDate?: string;
/**
* 状态：0-未生效，1-已生效
*/
status: number;
status?: number;
userGroupList?:any[];
attendanceGroup?:any;
dateType?:number
}
export interface ArrangementForm extends BaseEntity {
@@ -134,3 +137,6 @@ export interface ArrangementQuery extends PageQuery {
*/
month?: string;
}
export interface arrangmentListQuery extends PageQuery {
currentDate:string//某天的日期
}

4
apps/web-antd/src/api/property/businessManagement/workOrders/model.d.ts vendored
View File

@@ -94,6 +94,10 @@ export interface WorkOrdersVO {
* 备注
*/
remark: string;
/**
* 图片
*/
orderImgUrl: string;
}

153
apps/web-antd/src/api/property/inspectionManagement/inspectionDetail/model.d.ts vendored
View File

@@ -32,20 +32,59 @@ export interface TaskDetailVO {
patrolType: string;
/**
* 签到类型
* 签到类型(1.现场拍照、2.摄像头签到、3.现场扫码)
*/
signType: string;
/**
* 实际巡检时间
*/
actualInspectionTime: string;
/**
* 实际签到状态(1已签到2.未签到)
*/
actualSignState: string;
/**
* 巡检状态(0未完成,1已完成)
*/
inspectionState: string;
/**
* 巡检照片
* 巡检图片
*/
inspectionImag
e: string;
inspectionImage: string;
/**
* 计划巡检人
*/
planInspectionPerson: string;
/**
* 实际巡检人
*/
actualInspectionPerson: string;
/**
* 任务状态
*/
taskStatus: string;
/**
* 巡检结果
*/
inspectionResults: string;
/**
* 巡检描述
*/
inspectionDesc: string;
/**
* 巡检位置
*/
inspectionLocation: string;
/**
* 实际巡检时间
@@ -67,6 +106,11 @@ e: string;
*/
pointEndTime: string;
/**
* 搜索值
*/
searchValue: string;
}
export interface TaskDetailForm extends BaseEntity {
@@ -101,20 +145,60 @@ export interface TaskDetailForm extends BaseEntity {
patrolType?: string;
/**
* 签到类型
* 签到类型(1.现场拍照、2.摄像头签到、3.现场扫码)
*/
signType?: string;
/**
* 实际巡检时间
*/
actualInspectionTime?: string;
/**
* 实际签到状态(1已签到2.未签到)
*/
actualSignState?: string;
/**
* 巡检状态(0未完成,1已完成)
*/
inspectionState?: string;
/**
* 巡检照片
* 巡检图片
*/
inspectionImage?: string;
/**
* 计划巡检人
*/
planInspectionPerson?: string;
/**
* 实际巡检人
*/
actualInspectionPerson?: string;
/**
* 任务状态
*/
taskStatus?: string;
/**
* 巡检结果
*/
inspectionResults?: string;
/**
* 巡检描述
*/
inspectionDesc?: string;
/**
* 巡检位置
*/
inspectionLocation?: string;
/**
* 实际巡检时间
*/
@@ -135,6 +219,11 @@ export interface TaskDetailForm extends BaseEntity {
*/
pointEndTime?: string;
/**
* 搜索值
*/
searchValue?: string;
}
export interface TaskDetailQuery extends PageQuery {
@@ -164,20 +253,59 @@ export interface TaskDetailQuery extends PageQuery {
patrolType?: string;
/**
* 签到类型
* 签到类型(1.现场拍照、2.摄像头签到、3.现场扫码)
*/
signType?: string;
/**
* 实际巡检时间
*/
actualInspectionTime?: string;
/**
* 实际签到状态(1已签到2.未签到)
*/
actualSignState?: string;
/**
* 巡检状态(0未完成,1已完成)
*/
inspectionState?: string;
/**
* 巡检照片
* 巡检图片
*/
inspectionImag
e?: string;
inspectionImage?: string;
/**
* 计划巡检人
*/
planInspectionPerson?: string;
/**
* 实际巡检人
*/
actualInspectionPerson?: string;
/**
* 任务状态
*/
taskStatus?: string;
/**
* 巡检结果
*/
inspectionResults?: string;
/**
* 巡检描述
*/
inspectionDesc?: string;
/**
* 巡检位置
*/
inspectionLocation?: string;
/**
* 实际巡检时间
@@ -194,6 +322,11 @@ e?: string;
*/
pointEndTime?: string;
/**
* 搜索值
*/
searchValue?: string;
/**
* 日期范围参数
*/

4
apps/web-antd/src/api/property/inspectionManagement/inspectionPoint/model.d.ts vendored
View File

@@ -46,6 +46,10 @@ export interface InspectionPointVO {
*/
searchValue: string;
itemName: string;
createTime: string;
}
export interface InspectionPointForm extends BaseEntity {

12
apps/web-antd/src/api/property/resident/person/model.d.ts vendored
View File

@@ -24,7 +24,7 @@ export interface PersonVO {
/**
* 性别
*/
gender: number
gender: string | number
/**
* 人脸图片
@@ -75,6 +75,10 @@ export interface PersonVO {
authEndDate?: string
authTime: any[]
rosterType?: string | number
}
export interface PersonForm extends BaseEntity {
@@ -293,7 +297,7 @@ export interface Person extends BaseEntity {
* @param file excel文件
*/
export interface PerssonImportParam {
updateSupport: boolean;
unitId: number;
file: Blob | File;
updateSupport: boolean
unitId: number
file: Blob | File
}

84
apps/web-antd/src/api/sis/deviceManage/model.d.ts vendored
View File

@@ -1,182 +1,194 @@
import type { BaseEntity, PageQuery } from '#/api/common'
import type { BaseEntity, PageQuery } from '#/api/common';
export interface DeviceManageVO {
/**
* 主键id
*/
id: string | number
id: string | number;
/**
* 设备编码
*/
deviceNo: string
deviceNo: string;
/**
* 设备名称
*/
deviceName: string
deviceName: string;
/**
* 设备ip
*/
deviceIp: string
deviceIp: string;
/**
* 设备端口
*/
devicePort: number
devicePort: number;
/**
* 设备账号
*/
deviceAccount: string
deviceAccount: string;
/**
* 设备密码
*/
devicePwd: string
devicePwd: string;
/**
* 设备
*/
deviceMac: string
deviceMac: string;
/**
* 设备在线状态 0:离线 1:在线 2:未知
*/
deviceStatus: number
deviceStatus: number;
/**
* 父级设备id
*/
parentId: string | number
parentId: string | number;
/**
* 设备通道编号
*/
channelNo: string
channelNo: string;
/**
* 录像机ip
*/
vcrIp: string
vcrIp: string;
/**
* 录像机端口
*/
vcrPort: number
vcrPort: number;
/**
* 录像机账号
*/
vcrAccount: string
vcrAccount: string;
/**
* 录像机密码
*/
vcrPwd: string
vcrPwd: string;
/**
* 门禁id
*/
accessControlId: string | number
accessControlId: string | number;
/**
* 楼层id
*/
floorId: string | number
floorId: string | number;
lon: number;
lat: number;
}
export interface DeviceManageForm extends BaseEntity {
/**
* 主键id
*/
id?: string | number
id?: string | number;
/**
* 设备编码
*/
deviceNo?: string
deviceNo?: string;
/**
* 设备名称
*/
deviceName?: string
deviceName?: string;
/**
* 设备ip
*/
deviceIp?: string
deviceIp?: string;
/**
* 设备端口
*/
devicePort?: number
devicePort?: number;
/**
* 设备账号
*/
deviceAccount?: string
deviceAccount?: string;
/**
* 设备密码
*/
devicePwd?: string
devicePwd?: string;
/**
* 设备
*/
deviceMac?: string
deviceMac?: string;
lon: number;
lat: number;
/**
* 设备在线状态 0:离线 1:在线 2:未知
*/
deviceStatus?: number
deviceStatus?: number;
}
export interface DeviceManageQuery extends PageQuery {
/**
* 设备编码
*/
deviceNo?: string
deviceNo?: string;
/**
* 设备名称
*/
deviceName?: string
deviceName?: string;
/**
* 设备ip
*/
deviceIp?: string
deviceIp?: string;
/**
* 设备端口
*/
devicePort?: number
devicePort?: number;
/**
* 设备账号
*/
deviceAccount?: string
deviceAccount?: string;
/**
* 设备密码
*/
devicePwd?: string
devicePwd?: string;
/**
* 设备
*/
deviceMac?: string
deviceMac?: string;
lon: number;
lat: number;
/**
* 设备在线状态 0:离线 1:在线 2:未知
*/
deviceStatus?: number
deviceStatus?: number;
/**
* 日期范围参数
*/
params?: any
params?: any;
}

3
apps/web-antd/src/api/sis/stream/index.ts
View File

@@ -12,9 +12,10 @@ export function addStreamProxy(params?: any) {
params,
);
}
export function addFFmpegStreamProxy(params?: any) {
return requestClient.post<AddStreamProxyResult>(
'sis/stream/realtime/addFfmpeg',
'sis/stream/FFmpeg/proxy',
params,
);
}

BIN
apps/web-antd/src/assets/map/alarm1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
apps/web-antd/src/assets/map/alarm2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
apps/web-antd/src/assets/map/camear.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
apps/web-antd/src/assets/map/video-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

21
apps/web-antd/src/utils/video.ts Normal file
View File

@@ -0,0 +1,21 @@
/**
* 验证浏览器是否支持播放h265 编码的视频流
*/
export function checkHEVCSupport() {
const video = document.createElement('video');
const h265Support = {
hevc: false,
hvc1: false,
};
// 测试不同的HEVC MIME类型
if (video.canPlayType) {
h265Support.hevc =
video.canPlayType('video/mp4; codecs="hev1.1.6.L93.B0"') !== '';
h265Support.hvc1 =
video.canPlayType('video/mp4; codecs="hvc1.1.6.L93.B0"') !== '';
}
const result = h265Support.hevc || h265Support.hvc1;
console.log('当前浏览器是否支持h265:' + result);
return result;
}

30
apps/web-antd/src/views/property/assetManage/depot/data.ts
View File

@@ -2,6 +2,8 @@ import type {FormSchemaGetter} from '#/adapter/form';
import type {VxeGridProps} from '#/adapter/vxe-table';
import {renderDict} from "#/utils/render";
import {getDictOptions} from "#/utils/dict";
import {z} from "#/adapter/form";
import {$t} from "@vben/locales";
export const querySchema: FormSchemaGetter = () => [
@@ -30,18 +32,10 @@ export const querySchema: FormSchemaGetter = () => [
export const columns: VxeGridProps['columns'] = [
{type: 'checkbox', width: 60},
{
title: '序号',
field: 'id',
slots: {
default: ({rowIndex}) => {
return (rowIndex + 1).toString();
}
}
},
{
title: '仓库名称',
field: 'depotName',
width:200
},
{
title: '仓库类型',
@@ -50,21 +44,23 @@ export const columns: VxeGridProps['columns'] = [
default: ({row}) => {
return renderDict(row.modelType, 'wy_cclx')
}
}
},
width:180
},
{
title: '状态',
field: 'state',
slots: {default: 'state'}
slots: {default: 'state'},
width:120
},
{
title: '创建时间',
field: 'createTime',
},
{
title: '描述信息',
field: 'msg',
},
{
title: '创建时间',
field: 'createTime',
minWidth:180,
},
{
field: 'action',
@@ -89,7 +85,7 @@ export const modalSchema: FormSchemaGetter = () => [
label: '仓库名称',
fieldName: 'depotName',
component: 'Input',
rules:'required'
rules: z.string().min(1,'请输入仓库名称').max(30, { message: '仓库名称过长' }),
},
{
label: '仓库类型',

78
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
View File

@@ -1,18 +1,9 @@
<script setup lang="ts">
import { computed, reactive, onMounted } from 'vue';
import { reactive, onMounted } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { useVbenForm } from '#/adapter/form';
import {
arrangementAdd,
arrangementInfo,
arrangementUpdate,
} from '#/api/property/attendanceManagement/arrangement';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { modalSchema, attendanceColumns } from './data';
import { arrangementAdd } from '#/api/property/attendanceManagement/arrangement';
import {
Radio,
DatePicker,
@@ -30,12 +21,8 @@ import type { PersonVO } from './type';
import { ref, h } from 'vue';
import { Tag, Table } from 'ant-design-vue';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
//表单项
let formModel = reactive<{
let formModal = reactive<{
id: string;
groupId: string;
attendanceType: string;
@@ -122,7 +109,7 @@ const columns = [
title: '操作',
key: 'action',
width: 80,
customRender: ({ record, index }: { record: any; index: number }) =>
customRender: ({ index }: { index: number }) =>
h(
'a',
{
@@ -181,28 +168,6 @@ function handleTableData(newTableData: any) {
}
}
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
formItemClass: 'col-span-2',
// 默认label宽度 px
labelWidth: 80,
// 通用配置项 会影响到所有表单项
componentProps: {
class: 'w-full',
},
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
connectedComponent: unitPersonModal,
});
@@ -210,7 +175,6 @@ const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[85%]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
@@ -219,13 +183,6 @@ const [BasicModal, modalApi] = useVbenModal({
}
await getGroupList();
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await arrangementInfo(id);
await formApi.setValues(record);
}
// await markInitialized();
modalApi.modalLoading(false);
},
@@ -256,17 +213,17 @@ async function getGroupList() {
function chooseGroup(value: any) {
const group = groupMap.value[value];
if (group) {
formModel.attendanceType = String(group.attendanceType);
formModal.attendanceType = String(group.attendanceType);
}
}
async function handleDateTypeChange(value: any) {
formModel.dateType = value;
formModal.dateType = value;
}
async function handleConfirm() {
try {
modalApi.lock(true);
await formRef.value.validate(); // 先校验
const data = formModel;
const data = formModal;
const { id } = modalApi.getData() as { id?: string };
data.id = id ? id : '';
if (data.dateType == 1) {
@@ -305,11 +262,10 @@ async function handleConfirm() {
});
}
}
await (isUpdate.value ? arrangementUpdate(data) : arrangementAdd(data));
resetInitialized();
await arrangementAdd(data);
emit('reload');
// 重置表单数据
Object.assign(formModel, {
Object.assign(formModal, {
id: '',
groupId: '',
attendanceType: '',
@@ -324,7 +280,6 @@ async function handleConfirm() {
longDate.value = '';
rangeDate.value = ['', ''];
modalApi.close();
await formApi.resetForm();
} catch (error) {
console.error(error);
} finally {
@@ -334,7 +289,7 @@ async function handleConfirm() {
async function handleClosed() {
// 重置表单数据
Object.assign(formModel, {
Object.assign(formModal, {
id: '',
groupId: '',
attendanceType: '',
@@ -350,19 +305,16 @@ async function handleClosed() {
longDate.value = '';
rangeDate.value = ['', ''];
// 重置表单状态
await formApi.resetForm();
resetInitialized();
modalApi.close();
}
onMounted(() => {});
</script>
<template>
<BasicModal :title="title">
<BasicModal title="新增">
<!-- 顶部表单区 -->
<Form
:model="formModel"
:model="formModal"
:rules="rules"
ref="formRef"
layout="horizontal"
@@ -371,7 +323,7 @@ onMounted(() => {});
<div class="grid grid-cols-2 gap-x-8 gap-y-2">
<FormItem name="groupId" label="请选择考勤组" class="mb-0">
<Select
v-model:value="formModel.groupId"
v-model:value="formModal.groupId"
:options="groupOptions"
placeholder="请选择"
@change="chooseGroup"
@@ -381,12 +333,12 @@ onMounted(() => {});
<Select
:disabled="true"
:options="getDictOptions('wy_kqlx')"
v-model:value="formModel.attendanceType"
v-model:value="formModal.attendanceType"
placeholder="请选择考勤组"
/>
</FormItem>
<FormItem label="排班日期" name="dateType" class="col-span-2 mb-0">
<RadioGroup v-model:value="formModel.dateType" class="mr-4">
<RadioGroup v-model:value="formModal.dateType" class="mr-4">
<Radio value="1">
<span>
单个日期

161
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue
View File

@@ -5,8 +5,13 @@ import { ref, onMounted, reactive } from 'vue';
import { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import arrangementModal from './arrangement-modal.vue';
import workforceDetailModal from './workforce-detail.vue';
import workforceDayDetailModal from './workforce-day-detail.vue';
import { useVbenModal } from '@vben/common-ui';
import { arrangementCalender } from '#/api/property/attendanceManagement/arrangement'; // 导入接口
import {
arrangementCalender,
arrangementRemove,
} from '#/api/property/attendanceManagement/arrangement'; // 导入接口
import { Modal } from 'ant-design-vue';
const emit = defineEmits<{
@@ -20,8 +25,6 @@ const calendarData = reactive<any[]>([]);
const loading = ref(false);
// 查询日历数据
const fetchCalendarData = async (month?: string) => {
console.log(123);
try {
loading.value = true;
const params = {
@@ -35,10 +38,10 @@ const fetchCalendarData = async (month?: string) => {
month ||
selectedDate.value?.format('YYYY-MM') ||
dayjs().format('YYYY-MM'); //当前月份的开始日期
// 清空之前的数据
calendarData.length = 0;
// 生成日历渲染数据结构
for (const row of res.rows) {
if (row.endDate) {
@@ -46,26 +49,27 @@ const fetchCalendarData = async (month?: string) => {
const endDate = dayjs(row.endDate);
const currentMonthStart = dayjs(currentMonth).startOf('month');
const currentMonthEnd = dayjs(currentMonth).endOf('month');
//当开始时间小于当前月份的开始日期
if (startDate.isBefore(currentMonthStart) || startDate.isSame(currentMonthStart, 'day')) {
console.log(row, '小 - 开始时间小于等于当前月份开始时间');
console.log('开始时间:', row.startDate);
console.log('结束时间:', row.endDate);
console.log('当前月份开始:', currentMonthStart.format('YYYY-MM-DD'));
console.log('当前月份结束:', currentMonthEnd.format('YYYY-MM-DD'));
if (
startDate.isBefore(currentMonthStart) ||
startDate.isSame(currentMonthStart, 'day')
) {
// 分析：
//如果结束时间小于当前月份的结束时间，则生成当前月份开始时间到row.endDate结束时间的n条数据
//如果结束时间大于等于当前月份的结束时间，则生成当前月份开始时间到当前月份结束时间（即当前月份天数）的n条数据
// 实现：
// 确定结束日期：取row.endDate和当前月份结束日期的较小值
const actualEndDate = endDate.isBefore(currentMonthEnd) ? endDate : currentMonthEnd;
console.log('实际结束日期:', actualEndDate.format('YYYY-MM-DD'));
// 生成从当前月份开始到实际结束日期的数据
// 先判断当前日期与结束日期的大小，如果小则取实际结束时间endDate，否则取月份实际结束时间currentMonthEnd
const actualEndDate = endDate.isBefore(currentMonthEnd)
? endDate
: currentMonthEnd;
// 生成数据
let currentDate = currentMonthStart;
let generatedCount = 0;
while (currentDate.isSame(actualEndDate, 'day') || currentDate.isBefore(actualEndDate, 'day')) {
while (
currentDate.isSame(actualEndDate, 'day') ||
currentDate.isBefore(actualEndDate, 'day')
) {
calendarData.push({
date: currentDate.format('YYYY-MM-DD'),
item: {
@@ -76,27 +80,21 @@ const fetchCalendarData = async (month?: string) => {
endDate: row.endDate,
},
});
generatedCount++;
currentDate = currentDate.add(1, 'day');
}
console.log(`生成了 ${generatedCount} 条数据`);
} else {
//当开始时间大于当前月份的开始日期
//如果结束时间小于当前月份的结束时间，则生成开始时间到结束时间的n条数据
console.log(row, '大 - 开始时间大于当前月份开始时间');
console.log('开始时间:', row.startDate);
console.log('结束时间:', row.endDate);
console.log('当前月份开始:', currentMonthStart.format('YYYY-MM-DD'));
console.log('当前月份结束:', currentMonthEnd.format('YYYY-MM-DD'));
// 确定结束日期：取row.endDate和当前月份结束日期的较小值
const actualEndDate = endDate.isBefore(currentMonthEnd) ? endDate : currentMonthEnd;
console.log('实际结束日期:', actualEndDate.format('YYYY-MM-DD'));
const actualEndDate = endDate.isBefore(currentMonthEnd)
? endDate
: currentMonthEnd;
// 生成从开始日期到实际结束日期的数据
let currentDate = startDate;
let generatedCount = 0;
while (currentDate.isSame(actualEndDate, 'day') || currentDate.isBefore(actualEndDate, 'day')) {
while (
currentDate.isSame(actualEndDate, 'day') ||
currentDate.isBefore(actualEndDate, 'day')
) {
calendarData.push({
date: currentDate.format('YYYY-MM-DD'),
item: {
@@ -107,13 +105,11 @@ const fetchCalendarData = async (month?: string) => {
endDate: row.endDate,
},
});
generatedCount++;
currentDate = currentDate.add(1, 'day');
}
console.log(`生成了 ${generatedCount} 条数据`);
}
} else {
// 没有结束日期的情况，只在开始日期添加一条数据
// 单个日期排班类型
calendarData.push({
date: row.startDate,
item: {
@@ -126,52 +122,38 @@ const fetchCalendarData = async (month?: string) => {
});
}
}
console.log('日历数据:', calendarData);
//变量calendarData,日期相同的数据放到一个对象中，数据结构为scheduleData
// 将calendarData按日期分组，形成scheduleData结构
const groupedData = new Map<string, any[]>();
// 遍历calendarData，按日期分组
calendarData.forEach(item => {
calendarData.forEach((item) => {
const date = item.date;
if (!groupedData.has(date)) {
groupedData.set(date, []);
}
groupedData.get(date)!.push(item.item);
});
// 转换为scheduleData格式
scheduleData.length = 0; // 清空原有数据
groupedData.forEach((items, date) => {
scheduleData.push({
date: date,
list: items.map(item => ({
list: items.map((item) => ({
type: 'success' as BadgeProps['status'],
content: item.groupName || '排班安排',
item: item
}))
item: item,
})),
});
});
console.log('处理后的scheduleData:', scheduleData);
// 测试：验证生成的日历数据
console.log('=== 日历数据验证 ===');
console.log('当前月份:', currentMonth);
console.log('原始数据条数:', res.rows.length);
console.log('生成的日历数据条数:', calendarData.length);
console.log('分组后的数据条数:', scheduleData.length);
// 验证是否有重复日期
const dateCounts = new Map<string, number>();
calendarData.forEach(item => {
calendarData.forEach((item) => {
const count = dateCounts.get(item.date) || 0;
dateCounts.set(item.date, count + 1);
});
console.log('日期分布:', Object.fromEntries(dateCounts));
console.log('=== 验证完成 ===');
} catch (error) {
console.error('获取日历数据失败:', error);
message.error('获取日历数据失败');
@@ -197,7 +179,7 @@ const getListData2 = (
current: Dayjs,
): { type: BadgeProps['status']; content: string; item?: any }[] => {
const dateStr = current.format('YYYY-MM-DD');
// 使用scheduleData结构
if (scheduleData.length > 0) {
const found = scheduleData.find((item) => item.date === dateStr);
@@ -205,7 +187,7 @@ const getListData2 = (
return found.list;
}
}
// 如果没有找到数据，返回空数组
return [];
};
@@ -247,25 +229,34 @@ function customHeader() {
// 返回想要的VNode或null
return null; // 什么都不显示
}
const [ArrangementModal, modalApi] = useVbenModal({
const [ArrangementModal, arrangementModalApi] = useVbenModal({
connectedComponent: arrangementModal,
});
const [WorkforceDetailModal, workforceDetailModalApi] = useVbenModal({
connectedComponent: workforceDetailModal,
});
const [WorkforceDayDetailModal, workforceDayDetailModalApi] = useVbenModal({
connectedComponent: workforceDayDetailModal,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
arrangementModalApi.setData({});
arrangementModalApi.open();
}
// 编辑排班
function handleEdit(item: any) {
console.log(815328);
// modalApi.setData({
function handleEdit(item: any, date: string) {
workforceDetailModalApi.setData({
id: item.id as number | string,
date: dayjs(date).format('YYYY-MM-DD'),
});
workforceDetailModalApi.open();
// arrangementModalApi.setData({
// id: item.id,
// groupId: item.groupId,
// startDate: item.startDate,
// endDate: item.endDate,
// });
// modalApi.open();
// arrangementModalApi.open();
}
// 删除排班
@@ -276,7 +267,7 @@ function handleDelete(item: any) {
onOk: async () => {
try {
// 这里需要调用删除接口
// await deleteArrangement(item.id);
await arrangementRemove(item.id);
message.success('删除成功');
fetchCalendarData();
} catch (error) {
@@ -287,23 +278,12 @@ function handleDelete(item: any) {
});
}
// 查看详情
function handleViewDetails(item: any) {
// 这里可以打开详情弹窗或跳转到详情页面
console.log('查看详情:', item);
}
// 获取指定日期的所有排班项目
function getScheduleItemsByDate(date: string) {
const found = scheduleData.find((item) => item.date === date);
return found ? found.list : [];
}
// 查看某日期的所有排班详情
function handleViewDateDetails(date: string) {
const items = getScheduleItemsByDate(date);
console.log(`${date} 的所有排班安排:`, items);
// 这里可以打开详情弹窗显示该日期的所有排班
workforceDayDetailModalApi.setData({
date: dayjs(date).format('YYYY-MM-DD'),
});
workforceDayDetailModalApi.open();
}
// 页面初始化时加载数据
@@ -349,13 +329,13 @@ onMounted(() => {
<span>
<span>{{ item.content }}</span>
<div class="action-buttons">
<a
<a
style="margin-left: 4px; color: #1890ff; cursor: pointer"
@click.stop="handleEdit(item.item)"
@click.stop="handleEdit(item.item, current)"
>
编辑
</a>
<a
<a
style="margin-left: 4px; color: #ff4d4f; cursor: pointer"
@click.stop="handleDelete(item.item)"
>
@@ -367,7 +347,7 @@ onMounted(() => {
<a
v-if="getListData2(current).length > 0"
style="margin-left: 4px; color: #1890ff; cursor: pointer"
@click.stop="handleViewDateDetails(current.format('YYYY-MM-DD'))"
@click.stop="handleViewDateDetails(current)"
>
详情
</a>
@@ -375,7 +355,12 @@ onMounted(() => {
</template>
</Calendar>
</div>
<!-- 新增排班弹窗 -->
<ArrangementModal @reload="fetchCalendarData()" />
<!-- 编辑排班弹窗 -->
<WorkforceDetailModal @reload="fetchCalendarData()" />
<!-- 查看某天的排班列表 -->
<WorkforceDayDetailModal @reload="workforceDayDetailModalApi.close()" />
</div>
</template>
<style scoped>

66
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
View File

@@ -1,5 +1,6 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { renderDict } from '#/utils/render';
export const querySchema: FormSchemaGetter = () => [
{
@@ -246,3 +247,68 @@ export const modalSchema: FormSchemaGetter = () => [
},
},
];
//排班日期详情
export const workforceDayDetailColumns:VxeGridProps['columns'] =[
{
title: '序号',
field: 'id',
width: 60,
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
},
},
},
{
title: '考勤组',
field: 'attendanceGroup.groupName',
width: 'auto',
},
{
title: '考勤类型',
field: 'attendanceGroup.attendanceType',
slots: {
default: ({ row }) => {
return renderDict(String(row.attendanceGroup.attendanceType),'wy_kqlx')
},
},
width: 'auto',
},
{
title: '班次名称',
field: 'shift.name',
width:'auto' ,
},
{
title: '考勤时间',
field: 'time',
width: 'auto',
slots: {
default: ({ row }) => {
if (row.shift.startTime && row.shift.endTime) {
if(row.shift.restEndTime&&row.shift.restStartTime){
return `${row.shift.restStartTime}～${row.shift.restEndTime} ${row.shift.startTime}～${row.shift.endTime}`;
}else{
return `${row.shift.startTime}～${row.shift.endTime}`;
}
}
return '/';
},
},
},
{
title: '班组人数',
field: 'userCount',
width:100,
slots: { default: 'userCount' },
},
{
title: '人员',
field: 'userGroupList',
minWidth: 200,
fixed: 'right',
slots: { default: 'userGroupList' },
},
]

107
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-day-detail.vue Normal file
View File

@@ -0,0 +1,107 @@
<script setup lang="ts">
import { useVbenModal, Page } from '@vben/common-ui';
import { arrangmentList } from '#/api/property/attendanceManagement/arrangement';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import dayjs from 'dayjs';
import { ref } from 'vue';
import { workforceDayDetailColumns } from './data';
const editDate = ref<string>('');
const gridOptions: VxeGridProps = {
checkboxConfig: {
highlight: true,
reserve: true,
},
columns: workforceDayDetailColumns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }) => {
return await arrangmentList({
pageNum: page.currentPage,
pageSize: page.pageSize,
currentDate: editDate.value,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
// 隐藏"刷新/重置"按钮（对应 redo）
refresh: false,
zoom: false, // 显示全屏
custom: false, // 隐藏列设置
},
};
const [BasicTable, tableApi] = useVbenVxeGrid({
gridOptions,
});
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[85%]',
fullscreenButton: false,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { date } = modalApi.getData() as { date?: string };
if (date) {
editDate.value = date;
}
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
modalApi.close();
}
async function handleClosed() {
modalApi.close();
}
</script>
<template>
<BasicModal :title="`${editDate}(${dayjs(editDate).format('dddd')})排班详情`">
<div class="py-2 text-base font-bold">
排班日期:{{ editDate }}({{ dayjs(editDate).format('dddd') }})
</div>
<div class="mb-2">
<Page :auto-content-height="true">
<BasicTable>
<template #userCount="{ row }">
<span>
{{ row.userGroupList.length }}
</span>
</template>
<template #userGroupList="{ row }">
<span
v-for="(item, index) in row.userGroupList"
:key="item.id"
class="wrap-cell"
>
{{ item.employeeName }}
<span v-if="index !== row.userGroupList.length - 1">、</span>
</span>
</template>
</BasicTable>
</Page>
</div>
</BasicModal>
</template>
<style scoped>
.wrap-cell {
white-space: normal !important;
word-break: break-all;
line-height: 1;
padding: 0 2px;
gap: 3px;
}
</style>

346
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-detail.vue Normal file
View File

@@ -0,0 +1,346 @@
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
arrangementInfo,
arrangementUpdate,
} from '#/api/property/attendanceManagement/arrangement';
import { Form, Select, FormItem } from 'ant-design-vue';
import unitPersonModal from './unit-person-modal.vue';
import { groupList } from '#/api/property/attendanceManagement/attendanceGroupSettings';
import { getDictOptions } from '#/utils/dict';
import dayjs from 'dayjs';
import type { PersonVO } from './type';
import { ref, h } from 'vue';
import { Tag, Table } from 'ant-design-vue';
const emit = defineEmits<{ reload: [] }>();
//表单项
let formModal = reactive<{
id: string | number;
groupId?: string | number;
attendanceType: string;
userGroupList: any[];
dateType: number | undefined;
}>({
id: '',
groupId: '',
attendanceType: '', //考勤组类型
userGroupList: [
// scheduleId:undefined,//排班ID
// employeeId:undefined,//员工ID
// employeeName:undefined,//员工姓名
// deptId:undefined,//部门ID
// deptName:undefined,//部门名称
], //考勤组人员列表
dateType: undefined, //排班日期类型
});
const formRef = ref();
const groupOptions = ref<any[]>([]);
const groupMap = ref<Record<string, any>>({}); // 用于快速查找
let tableData = reactive<
{ dept: { unitId: string | number; unitName: string }; users: PersonVO[] }[]
>([]); //存放考勤组人员列表数据
const columns = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
width: 60,
customRender: ({ index }: { index: number }) => index + 1,
},
{
title: '部门',
dataIndex: ['dept', 'unitName'],
key: 'dept',
width: 120,
customRender: ({ record }: { record: any }) => record.dept.unitName,
},
{
title: '已选人数',
dataIndex: 'users',
key: 'userCount',
width: 100,
customRender: ({ record }: { record: any }) => record.users.length,
},
{
title: '人员',
dataIndex: 'users',
key: 'users',
customRender: ({ record }: { record: any }) =>
record.users.map((user: any) =>
h(
Tag,
{
color: 'blue',
closable: true,
onClose: (e) => {
e.preventDefault();
handleRemoveUser(record, user);
},
style: 'margin-right: 4px;',
},
() => user.userName,
),
),
},
{
title: '操作',
key: 'action',
width: 80,
customRender: ({ index }: { index: number }) =>
h(
'a',
{
style:
'color: #ff4d4f; font-size: 18px; margin-left: 8px; cursor: pointer;',
onClick: () => handleRemoveRow(index),
},
'移除',
),
},
];
const editDate = ref<string | undefined>('');
function handleRemoveUser(row: any, user: any) {
row.users = row.users.filter((u: any) => u.id !== user.id);
}
function handleRemoveRow(index: number) {
tableData.splice(index, 1);
}
function handleTableData(newTableData: any) {
// 如果现有数据为空，直接替换
if (tableData.length === 0) {
tableData.splice(0, 0, ...newTableData);
return;
}
// 如果新数据为空，不做处理
if (newTableData.length === 0) {
return;
}
// 处理有数据的情况
for (const newItem of newTableData) {
// 查找是否已存在相同部门
const existingDeptIndex = tableData.findIndex(
(item) => item.dept.unitId === newItem.dept.unitId,
);
if (existingDeptIndex !== -1) {
// 找到相同部门，检查人员是否有重复
const existingDept = tableData[existingDeptIndex];
for (const newUser of newItem.users) {
// 检查该用户是否已存在
const userExists = existingDept?.users.some(
(existingUser) => existingUser.id === newUser.id,
);
if (!userExists) {
// 用户不存在，添加到现有部门
existingDept?.users.push(newUser);
}
}
} else {
// 部门不存在，直接添加新部门
tableData.push(newItem);
}
}
}
const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
connectedComponent: unitPersonModal,
});
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[85%]',
fullscreenButton: false,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
await getGroupList();
modalApi.modalLoading(true);
const { id, date } = modalApi.getData() as {
id?: number | string;
date?: string;
};
editDate.value = date;
if (id) {
const record = await arrangementInfo(id);
formModal.attendanceType = String(record.attendanceGroup.attendanceType);
formModal.id = record.id;
formModal.groupId = record.attendanceGroup.id;
formModal.dateType = record.dateType;
if (record.userGroupList) {
// 按部门分组处理 userGroupList
const deptMap = new Map();
for (const item of record.userGroupList) {
const deptId = item.deptId;
const deptName = item.deptName;
if (!deptMap.has(deptId)) {
deptMap.set(deptId, {
dept: { unitId: deptId, unitName: deptName },
users: [],
});
}
deptMap.get(deptId).users.push({
id: item.employeeId,
userName: item.employeeName,
});
}
// 转换为 tableData 格式
tableData.splice(0, 0, ...Array.from(deptMap.values()));
}
}
// await markInitialized();
modalApi.modalLoading(false);
},
});
const totalSelected: number = 0;
async function getGroupList() {
const res = await groupList({
pageSize: 1000000000,
pageNum: 1,
status: 1, //0:停用 1:启用
});
groupOptions.value = (res.rows || []).map((item) => ({
label: item.groupName,
value: item.id,
}));
// 构建 id 到 group 对象的映射
groupMap.value = {};
(res.rows || []).forEach((item) => {
groupMap.value[item.id] = item;
});
}
function chooseGroup(value: any) {
const group = groupMap.value[value];
if (group) {
formModal.attendanceType = String(group.attendanceType);
}
}
function handleAdd() {
unitPersonmodalApi.setData({});
unitPersonmodalApi.open();
}
async function handleConfirm() {
try {
modalApi.lock(true);
await formRef.value.validate(); // 先校验
const data = formModal;
data.userGroupList = tableData.flatMap((item) =>
item.users.map((user) => ({
deptId: item.dept.unitId,
deptName: item.dept.unitName,
employeeId: user.id,
employeeName: user.userName,
})),
);
await arrangementUpdate(data);
emit('reload');
// 重置表单数据
Object.assign(formModal, {
id: '',
groupId: '',
attendanceType: '',
dateType: undefined,
startDate: '',
endDate: '',
userGroupList: [],
});
// 重置其他数据
tableData.length = 0;
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
// 重置表单数据
Object.assign(formModal, {
id: '',
groupId: '',
attendanceType: '',
dateType: undefined,
startDate: '',
endDate: '',
userGroupList: [],
});
// 重置其他数据
tableData.length = 0;
modalApi.close();
}
onMounted(() => {});
</script>
<template>
<BasicModal title="编辑">
<div class="py-2 text-base font-bold">
排班日期:{{ editDate }}({{ dayjs(editDate).format('dddd') }})
</div>
<!-- 顶部表单区 -->
<Form :model="formModal" ref="formRef" layout="horizontal" class="mb-4">
<div class="grid grid-cols-2 gap-x-8 gap-y-2">
<FormItem name="groupId" label="请选择考勤组" class="mb-0">
<Select
v-model:value="formModal.groupId"
:options="groupOptions"
placeholder="请选择"
@change="chooseGroup"
/>
</FormItem>
<FormItem name="attendanceType" label="考勤类型" class="mb-0">
<Select
:disabled="true"
:options="getDictOptions('wy_kqlx')"
v-model:value="formModal.attendanceType"
placeholder="请选择考勤组"
/>
</FormItem>
</div>
</Form>
<!-- 考勤组人员表格区 -->
<div class="mb-2">
<div class="mb-2 flex items-center">
<span
>考勤组人员（已选
<span class="text-red-500">{{ totalSelected }}</span> 人）</span
>
<a-button type="primary" size="small" class="ml-4" @click="handleAdd"
>+ 添加人员</a-button
>
</div>
<Table
:columns="columns"
:dataSource="tableData"
:pagination="false"
rowKey="dept.unitId"
bordered
/>
</div>
<UnitPersonModal @reload="handleTableData" />
<!-- 底部按钮区 -->
</BasicModal>
</template>
<style scoped>
/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
:deep(.ant-input[disabled]),
:deep(.ant-input-number-disabled .ant-input-number-input),
:deep(.ant-select-disabled .ant-select-selection-item),
:deep(.ant-picker-input input[disabled]),
:deep(.ant-picker-disabled .ant-picker-input input) {
/* 设置一个更深的颜色，可以自己调整 */
color: rgba(0, 0, 0, 0.65) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
}
</style>

21
apps/web-antd/src/views/property/businessManagement/workOrders/data.ts
View File

@@ -51,6 +51,16 @@ export const columns: VxeGridProps['columns'] = [
field: 'typeName',
minWidth: 150,
},
{
title: '上报类型',
field: 'reportingType',
slots: {
default: ({row}) => {
return renderDict(row.reportingType, 'wy_gdsblx');
},
},
width: 100,
},
{
title: '派单时间',
field: 'dispatchTime',
@@ -164,6 +174,15 @@ export const modalSchema: FormSchemaGetter = () => [
},
rules: 'selectRequired',
},
{
label: '上报类型',
fieldName: 'reportingType',
component: 'Select',
componentProps: {
options: getDictOptions('wy_gdsblx'),
},
rules: 'selectRequired',
},
// {
// label: '状态',
// fieldName: 'status',
@@ -206,6 +225,7 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'location',
component: 'Input',
rules: 'selectRequired',
formItemClass:'col-span-2'
},
// {
// label: '计划完成时间',
@@ -234,6 +254,7 @@ export const modalSchema: FormSchemaGetter = () => [
label: '备注',
fieldName: 'remark',
component: 'Textarea',
formItemClass:'col-span-2'
},
// {
// label: '是否超时',

27
apps/web-antd/src/views/property/businessManagement/workOrders/work-orders-detail.vue
View File

@@ -42,7 +42,7 @@ async function handleOpenChange(open: boolean) {
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="工单详情信息" class="w-[70%]">
<div v-if="orderDetail">
<Descriptions size="small" :column="2" :labelStyle="{width:'120px'}">
<Descriptions size="small" :column="2" :labelStyle="{width:'130px'}" bordered>
<DescriptionsItem label="订单号">
{{ orderDetail.orderNo }}
</DescriptionsItem>
@@ -52,6 +52,16 @@ async function handleOpenChange(open: boolean) {
<DescriptionsItem label="工单类型">
{{orderDetail.typeName}}
</DescriptionsItem>
<DescriptionsItem label="上报类型">
<component
:is="renderDict(orderDetail.reportingType,'wy_gdsblx')"
/>
</DescriptionsItem>
<DescriptionsItem label="处理权重">
<component
:is="renderDict(orderDetail.processingWeight,'pro_processing_weight')"
/>
</DescriptionsItem>
<DescriptionsItem label="发起人">
{{ orderDetail.initiatorPeople }}
</DescriptionsItem>
@@ -68,26 +78,23 @@ async function handleOpenChange(open: boolean) {
<!-- {{ orderDetail.planCompleTime }}-->
<!-- </DescriptionsItem>-->
<DescriptionsItem label="备注" :span="2">
{{ orderDetail.remark }}
</DescriptionsItem>
<DescriptionsItem label="创建时间">
{{ orderDetail.createTime }}
</DescriptionsItem>
<DescriptionsItem label="备注">
{{ orderDetail.remark }}
</DescriptionsItem>
<DescriptionsItem label="完成时间">
{{ orderDetail.compleTime }}
</DescriptionsItem>
<DescriptionsItem label="处理权重">
<component
:is="renderDict(orderDetail.processingWeight,'pro_processing_weight')"
/>
</DescriptionsItem>
<DescriptionsItem label="是否超时" v-if="orderDetail.isTimeOut!=null">
<component
:is="renderDict(orderDetail.isTimeOut,'wy_sf')"
/>
</DescriptionsItem>
<DescriptionsItem label="服务评价" v-if="orderDetail.serviceEvalua!=null">
<DescriptionsItem label="服务评价" v-if="orderDetail.serviceEvalua!=null" :span="2">
<Rate :value="orderDetail.serviceEvalua" disabled/>
</DescriptionsItem>
<DescriptionsItem label="评价内容" v-if="orderDetail.serviceEvaluaText" :span="2">

2
apps/web-antd/src/views/property/community/data.ts
View File

@@ -154,7 +154,7 @@ export const modalSchema: FormSchemaGetter = () => [
{
label: '占地面积',
fieldName: 'area',
component: 'Input',
component: 'InputNumber',
},
{
label: '建成时间',

37
apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/data.ts
View File

@@ -52,6 +52,11 @@ export const columns: VxeGridProps['columns'] = [
field: 'pointId',
width:150
},
{
title: '巡检位置',
field: 'inspectionLocation',
width:150
},
{
title: '签到类型',
field: 'signType',
@@ -64,7 +69,7 @@ export const columns: VxeGridProps['columns'] = [
},
{
title: '巡检状态',
field: 'status',
field: 'inspectionState',
width:150,
slots: {
default: ({ row }) => {
@@ -92,6 +97,36 @@ export const columns: VxeGridProps['columns'] = [
field: 'inspectionTime',
width:150
},
{
title: '签到状态',
field: 'actualSignState',
width:120,
slots: {
default: ({ row }) => {
return renderDict(row.actualSignState, 'wy_xjqdzt');
},
},
},
{
title: '计划巡检人',
field: 'planInspectionPerson',
width:120
},
{
title: '实际巡检人',
field: 'actualInspectionPerson',
width:120
},
{
title: '巡检结果',
field: 'inspectionResults',
width:180
},
{
title: '巡检描述',
field: 'inspectionDesc',
width:180
},
{
title: '备注',
field: 'remark',

98
apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/detail.vue Normal file
View File

@@ -0,0 +1,98 @@
<script setup lang="ts">
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import {renderDict} from "#/utils/render";
import {taskDetailInfo} from "#/api/property/inspectionManagement/inspectionDetail";
import type {TaskDetailVO} from "#/api/property/inspectionManagement/inspectionDetail/model";
dayjs.extend(duration);
dayjs.extend(relativeTime);
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
taskDetail.value = null;
},
});
const taskDetail = shallowRef<null | TaskDetailVO>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const {id} = modalApi.getData() as { id: number | string };
taskDetail.value = await taskDetailInfo(id);
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="巡检明细详情" class="w-[70%]">
<Descriptions v-if="taskDetail" size="small" :column="2" bordered
:labelStyle="{width:'100px'}">
<DescriptionsItem label="巡检计划">
{{ taskDetail.planId }}
</DescriptionsItem>
<DescriptionsItem label="巡检任务">
{{ taskDetail.taskId }}
</DescriptionsItem>
<DescriptionsItem label="巡检路线">
{{taskDetail.routeId}}
</DescriptionsItem>
<DescriptionsItem label="巡检点">
{{ taskDetail.pointId}}
</DescriptionsItem>
<DescriptionsItem label="巡检位置">
{{ taskDetail.inspectionLocation}}
</DescriptionsItem>
<DescriptionsItem label="签到类型">
<component
:is="renderDict(taskDetail.signType,'wy_xjqdfs')"
/>
</DescriptionsItem>
<DescriptionsItem label="巡检状态">
<component
:is="renderDict(taskDetail.inspectionState,'wy_xjzt')"
/>
</DescriptionsItem>
<DescriptionsItem label="巡检照片" :span="2">
{{ taskDetail.inspectionImage }}
</DescriptionsItem>
<DescriptionsItem label="开始时间">
{{ taskDetail.pointStartTime }}
</DescriptionsItem>
<DescriptionsItem label="结束时间">
{{ taskDetail.pointEndTime }}
</DescriptionsItem>
<DescriptionsItem label="实际巡检时间">
{{ taskDetail.inspectionTime }}
</DescriptionsItem>
<DescriptionsItem label="签到状态">
<component
:is="renderDict(taskDetail.actualSignState,'wy_xjqdzt')"
/>
</DescriptionsItem>
<DescriptionsItem label="计划巡检人">
{{ taskDetail.planInspectionPerson }}
</DescriptionsItem>
<DescriptionsItem label="实际巡检人">
{{ taskDetail.actualInspectionPerson }}
</DescriptionsItem>
<DescriptionsItem label="巡检结果" :span="2">
{{ taskDetail.inspectionResults }}
</DescriptionsItem>
<DescriptionsItem label="巡检描述" :span="2">
{{ taskDetail.inspectionDesc }}
</DescriptionsItem>
<DescriptionsItem label="备注" :span="2">
{{ taskDetail.remark }}
</DescriptionsItem>
</Descriptions>
</BasicModal>
</template>

32
apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/index.vue
View File

@@ -17,6 +17,7 @@ import {
taskDetailExport,
taskDetailList
} from "#/api/property/inspectionManagement/inspectionDetail";
import detailModal from './detail.vue'
const formOptions: VbenFormProps = {
commonConfig: {
@@ -67,8 +68,12 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
gridOptions,
});
const [InspectionDetailsModal, modalApi] = useVbenModal({
connectedComponent: inspectionDetailsModal,
// const [InspectionDetailsModal, modalApi] = useVbenModal({
// connectedComponent: inspectionDetailsModal,
// });
const [DetailModal, detailApi] = useVbenModal({
connectedComponent: detailModal,
});
async function handInfo(row: Required<InspectionTaskForm>) {
@@ -97,17 +102,18 @@ function handleDownloadExcel() {
</Space>
</template>
<!-- <template #action="{ row }">-->
<!-- <Space>-->
<!-- <ghost-button-->
<!-- v-access:code="['property:inspectionTask:info']"-->
<!-- @click.stop="handInfo(row)"-->
<!-- >-->
<!-- {{ $t('pages.common.info') }}-->
<!-- </ghost-button>-->
<!-- </Space>-->
<!-- </template>-->
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['property:inspectionTask:info']"
@click.stop="handInfo(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
</Space>
</template>
</BasicTable>
<InspectionDetailsModal @reload="tableApi.query()"/>
<DetailModal></DetailModal>
<!-- <InspectionDetailsModal @reload="tableApi.query()"/>-->
</Page>
</template>

2
apps/web-antd/src/views/property/inspectionManagement/inspectionPlan/data.ts
View File

@@ -116,7 +116,7 @@ export const modalSchema: FormSchemaGetter = () => [
label: '计划名称',
fieldName: 'planName',
component: 'Input',
rules: 'required',
rules: z.string().min(1,'请输入计划名称').max(30, { message: '计划名称过长' }),
},
{
label: '巡检路线',

7
apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/data.ts
View File

@@ -50,6 +50,13 @@ export const columns: VxeGridProps['columns'] = [
title: '创建时间',
field: 'createTime',
},
{
title: '二维码',
field: 'qrcode',
slots:{
default: 'qrcode'
}
},
{
title: '备注',
field: 'remark',

41
apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import { Modal, Popconfirm, Space,Popover,QRCode } from 'ant-design-vue';
import {
useVbenVxeGrid,
@@ -17,6 +17,8 @@ import type { InspectionPointForm } from '#/api/property/inspectionManagement/in
import inspectionPointModal from './inspectionPoint-modal.vue';
import { columns, querySchema } from './data';
import pointDetail from './point-detail.vue';
import {ref} from "vue";
const formOptions: VbenFormProps = {
commonConfig: {
@@ -80,6 +82,10 @@ const [InspectionPointModal, modalApi] = useVbenModal({
connectedComponent: inspectionPointModal,
});
const [PointDetail, detailApi] = useVbenModal({
connectedComponent: pointDetail,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
@@ -89,6 +95,10 @@ async function handleEdit(row: Required<InspectionPointForm>) {
modalApi.setData({ id: row.id });
modalApi.open();
}
async function handleInfo(row: Required<InspectionPointForm>) {
detailApi.setData({ id: row.id });
detailApi.open();
}
async function handleDelete(row: Required<InspectionPointForm>) {
await inspectionPointRemove(row.id);
@@ -108,6 +118,16 @@ function handleMultiDelete() {
},
});
}
const qrcodeCanvasRef = ref();
async function handleDownload(row){
const url = await qrcodeCanvasRef.value.toDataURL();
const a = document.createElement('a');
a.download = `${row.pointName}.png`;
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>
<template>
@@ -134,6 +154,12 @@ function handleMultiDelete() {
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['property:inspectionPoint:info']"
@click.stop="handleInfo(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-access:code="['property:inspectionPoint:edit']"
@click.stop="handleEdit(row)"
@@ -156,7 +182,20 @@ function handleMultiDelete() {
</Popconfirm>
</Space>
</template>
<template #qrcode="{row}">
<Popover :overlay-inner-style="{ padding: 0 }">
<template #content>
<QRCode ref="qrcodeCanvasRef" :value="row.id" :bordered="false" />
</template>
<a-button
size="small"
@click="handleDownload(row)">
下载
</a-button>
</Popover>
</template>
</BasicTable>
<InspectionPointModal @reload="tableApi.query()" />
<PointDetail></PointDetail>
</Page>
</template>

64
apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/point-detail.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup lang="ts">
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem,QRCode} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import {renderDict} from "#/utils/render";
import {inspectionPointInfo} from "#/api/property/inspectionManagement/inspectionPoint";
import type {InspectionPointVO} from "#/api/property/inspectionManagement/inspectionPoint/model";
dayjs.extend(duration);
dayjs.extend(relativeTime);
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
pointDetail.value = null;
},
});
const pointDetail = shallowRef<null | InspectionPointVO>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const {id} = modalApi.getData() as { id: number | string };
pointDetail.value = await inspectionPointInfo(id);
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="巡检点详情" class="w-[70%]">
<Descriptions v-if="pointDetail" size="small" :column="2" bordered
:labelStyle="{width:'120px'}">
<DescriptionsItem label="巡检点名称">
{{ pointDetail.pointName }}
</DescriptionsItem>
<DescriptionsItem label="巡检点类型">
<component
:is="renderDict(pointDetail.pointType,'inspection_point_type')"
/>
</DescriptionsItem>
<DescriptionsItem label="巡检项目">
{{pointDetail.itemName}}
</DescriptionsItem>
<DescriptionsItem label="nfc编码">
{{ pointDetail.nfcCode}}
</DescriptionsItem>
<DescriptionsItem label="创建时间" :span="2">
{{ pointDetail.createTime}}
</DescriptionsItem>
<DescriptionsItem label="二维码" :span="2">
<QRCode :value="pointDetail.id" />
</DescriptionsItem>
<DescriptionsItem label="备注" :span="2">
{{pointDetail.remark}}
</DescriptionsItem>
</Descriptions>
</BasicModal>
</template>

65
apps/web-antd/src/views/property/resident/person/data.ts
View File

@@ -41,19 +41,10 @@ export const querySchema: FormSchemaGetter = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
// {
// title: '序号',
// title: '员工编号',
// field: 'id',
// slots: {
// default: ({ rowIndex }) => {
// return (rowIndex + 1).toString();
// },
// },
// width: 100,
// },
{
title: '员工编号',
field: 'id',
width: 100,
},
{
title: '员工名称',
field: 'userName',
@@ -62,7 +53,7 @@ export const columns: VxeGridProps['columns'] = [
{
title: '联系电话',
field: 'phone',
width: 100,
width: 120,
},
{
title: '性别',
@@ -72,18 +63,18 @@ export const columns: VxeGridProps['columns'] = [
return renderDict(row.gender, 'sys_user_sex')
},
},
width: 100,
width: 80,
},
{
field: 'img',
title: '人脸图片',
slots: { default: 'img' },
minWidth: 80,
width: 100,
},
{
title: '所属单位',
field: 'unitName',
width: 100,
width: 160,
},
// {
// title: '入驻位置',
@@ -93,10 +84,18 @@ export const columns: VxeGridProps['columns'] = [
title: '入驻时间',
field: 'time',
width: 100,
formatter: ({ cellValue }) => {
return cellValue ? new Date(cellValue).toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-') : ''
}
},
{
title: '车牌号码',
field: 'carNumber',
title: '人员标签',
field: 'rosterType',
slots: {
default: ({ row }) => {
return renderDict(row.rosterType, 'roster_type')
},
},
width: 100,
},
{
@@ -112,14 +111,13 @@ export const columns: VxeGridProps['columns'] = [
{
title: '备注',
field: 'remark',
width: 100,
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
minWidth: 180,
width: 200,
},
]
@@ -236,7 +234,24 @@ export const modalSchema: FormSchemaGetter = () => [
},
triggerFields: ['id'],
},
},
{
label: '人员标签',
fieldName: 'rosterType',
component: 'Select',
formItemClass: 'col-span-1',
componentProps: {
options: getDictOptions('roster_type')
},
dependencies: {
show: (values) => {
return typeof values.id !== 'undefined'
},
disabled: (values) => {
return !values.authSwitch
},
triggerFields: ['id', 'authSwitch'],
},
},
{
label: '授权期限',
@@ -253,7 +268,7 @@ export const modalSchema: FormSchemaGetter = () => [
show: (values) => {
return typeof values.id !== 'undefined'
},
disabled:(values) => {
disabled: (values) => {
return !values.authSwitch
},
triggerFields: ['id', 'authSwitch'],
@@ -263,12 +278,12 @@ export const modalSchema: FormSchemaGetter = () => [
label: '通行权限组',
fieldName: 'authGroupId',
component: 'ApiSelect',
formItemClass: 'col-span-2',
formItemClass: 'col-span-1',
dependencies: {
show: (values) => {
return typeof values.id !== 'undefined'
},
disabled:(values) => {
disabled: (values) => {
return !values.authSwitch
},
triggerFields: ['id', 'authSwitch'],
@@ -393,8 +408,8 @@ export async function getUnitList(): Promise<
{ value: number; label: string }[]
> {
const queryParam = {
pageNum: 1000,
pageSize: 1,
pageNum: 1,
pageSize: 1000,
}
const res = await resident_unitList(queryParam)
const data: { value: number; label: string }[] = []

5
apps/web-antd/src/views/property/resident/person/index.vue
View File

@@ -165,11 +165,6 @@ function handleInfo(row: Required<PersonForm>) {
<Avatar :src="row.img" v-if="row.img" />
<span v-else>无</span>
</template>
<template #state="{ row }">
<TableSwitch :checkedValue="1" :unCheckedValue="0" v-model:value="row.state" :api="() => personUpdate(row)"
:disabled="!hasAccessByCodes(['property:person:edit'])" @reload="() => tableApi.query()" />
</template>
<template #action="{ row }">
<Space>
<ghost-button @click.stop="handleInfo(row)">

2
apps/web-antd/src/views/property/resident/person/person-modal.vue
View File

@@ -72,7 +72,9 @@ const [BasicModal, modalApi] = useVbenModal({
const record = await personInfo(id)
userId.value = record.userId
unitId.value = record.unitId.toString()
record.gender = record.gender?.toString()
record.state = record.state?.toString()
record.rosterType = record.rosterType?.toString()
record.authTime = [record.authBegDate, record.authEndDate]
await formApi.setValues(record)
}

1868
apps/web-antd/src/views/screen/monitor/index.vue
View File

File diff suppressed because it is too large Load Diff

131
apps/web-antd/src/views/screen/monitor/map/Map.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<div class="vmap">
<div id="map" class="map-animation"></div>
</div>
</template>
<script setup lang="js">
import './map.scss';
import { icons, MapDefaultData } from './constants.js';
import { onMounted } from 'vue';
import { deviceManageList } from '#/api/sis/deviceManage/index.js';
// 地图全局对象
let map = null;
onMounted(() => {
mapFn.intiMap();
// 加载设备信息
deviceManageList({ deviceType: 1 }).then(({ rows = [], total = 0 }) => {
if (total > 0) {
// 渲染设备点位信息
let items = rows.map((item) => {
return {
icon: 'camera',
data: item,
lon: item.lon,
lat: item.lat,
};
});
mapFn.renderOverLayersData(items, function (marker, data) {
// 渲染设备点击事件
marker.addEventListener('click', () => {
console.log(data);
// 查询当前设备的通道信息
//渲染设备播放列表
const html = [
'<div class="video-wrap" style="width: 530px;height: 350px;padding-top:50px">',
`<div class="wrap-title" style="margin-top: -35px;">${data.deviceName}</div>`,
`<div class="close" onclick="pageEvent.closeInfoWindow()">X</div>`,
`<div class="wrap-content">`,
`<div onclick="pageEvent.playClick()" class="content-left" style="height: 270px">`,
'<video id="video-player" ref="player1" muted autoplay></video>',
`</div>`,
`</div>`,
`</div>`,
];
const infoWindow = new BMap.InfoWindow(html.join(''), {
width: 530,
height: 350,
enableCloseOnClick: false,
});
map.openInfoWindow(infoWindow, marker.point);
});
});
}
});
});
// 当前页面播放的对象
let currentPlayer = undefined;
window.pageEvent = {
closeInfoWindow() {
map.closeInfoWindow();
closeVideo(currentPlayer);
},
};
function closeVideo(player) {
if (player) {
try {
player.pause();
player.unload();
player.destroy();
} catch (e) {
console.log(e);
}
}
}
/* 地图相关方法 */
const mapFn = {
renderOverLayersData(data, cb, clear = true) {
// 清楚地图上的图层
if (clear) {
mapFn.clearLayers();
}
data.forEach((v) => {
const { lon, lat, data, icon } = v;
const marker = new BMap.Marker(new BMap.Point(lon, lat), {
icon: icons[icon],
});
// 将数据放入marker
marker.data = data;
marker.setTop(true, 100);
// 保存自定义信息到marker对象中
map.addOverlay(marker);
if (cb) {
cb(marker, data);
}
});
},
/**
* 清除地图上的所有图层
*/
clearLayers: () => map.clearOverlays(),
/**
* 初始化地图
* @param cb 地图初始化的回调函数
*/
intiMap: function (cb) {
// 创建地图实例
map = new BMap.Map('map', { enableMapClick: false });
// 设置地图中心和初始层级
map.centerAndZoom(
new BMap.Point(MapDefaultData.center[0], MapDefaultData.center[1]),
MapDefaultData.zoom,
);
// 设置地图样式
map.setMapStyleV2({
styleId: 'bbb822feddbffbb4dc419fc6c37f2e4e',
});
// 开启滚轮缩放
map.enableScrollWheelZoom(true);
map.clearOverlays();
if (cb) {
cb();
}
},
};
</script>

16
apps/web-antd/src/views/screen/monitor/map/constants.js Normal file
View File

@@ -0,0 +1,16 @@
import camera from "#/assets/map/camear.png";
export const MapDefaultData = {
center: [107.089,29.1714],
zoom: 21,
icons: {camera}
};
export const icons = {
camera: new BMap.Icon(MapDefaultData.icons.camera, new BMap.Size(23, 34), {
offset: new BMap.Size(12, 30),
textColor: '#fff',
zIndex: "100"
})
}

89
apps/web-antd/src/views/screen/monitor/map/map.scss Normal file
View File

@@ -0,0 +1,89 @@
.vmap {
position: relative;
width: 100%;
height: 100%;
.BMap_pop > div {
background: transparent !important;
border: 0 !important;
}
.BMap_pop > div:nth-child(n) {
display: none
}
.BMap_pop > div:nth-child(9) {
display: block
}
.BMap_pop > img {
width: 0 !important;
height: 0 !important;
}
#map {
width: 100%;
height: 100%;
.anchorBL {
display: none !important;
}
.close {
position: absolute;
right: 12px;
top: 5px;
font-size: 18px;
cursor: pointer;
border: 1px solid #409eff;
color: #409eff;
padding: 2px 5px;
text-align: center;
z-index: 100;
}
.wrap-title {
margin-top: 16px;
font-size: 16px;
color: white;
position: absolute;
height: 30px;
width: 100%;
line-height: 30px;
left: 20px;
font-weight: bold;
}
.video-wrap {
width: 530px !important;
height: 360px;
background: url("/src/assets/map/video-bg.png") no-repeat;
background-size: 100% 100%;
.wrap-content {
padding: 15px 10px 10px 10px;
height: 75%;
display: flex;
.content-left {
height: 100%;
width: 100%;
}
img {
width: 100%;
height: 111%;
}
.content-right {
margin-left: 15px;
padding-top: 10px;
}
}
}
}
}

19
apps/web-antd/src/views/sis/acAdmin/dp-tree.vue
View File

@@ -9,14 +9,7 @@ defineOptions({ inheritAttrs: false });
withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
const emit = defineEmits<{
checked: [];
/**
* 点击节点的事件
*/
reload: [];
select: [];
}>();
const emit = defineEmits(['checked', 'reload', 'select']);
const searchValue = defineModel('searchValue', {
type: String,
@@ -39,6 +32,7 @@ async function loadChannelTree() {
function handleNode(nodes: any[], level: number) {
nodes.forEach((node) => {
node.key = node.id;
if (node.level < level) {
node.disabled = true;
}
@@ -107,7 +101,13 @@ function checkNodeData() {
const checkData: any = {};
/**
* 树选中时间
* @param _keys 当前选中的节点key
* @param nodes 当前选中的节点
*/
function onTreeCheck(_keys: any, nodes: any) {
// nodes 为当前当前选中的节点
const { checked, checkedNodes } = nodes;
// 找到需要播放的视频节点
checkedNodes.forEach((node: any) => {
@@ -119,8 +119,7 @@ function onTreeCheck(_keys: any, nodes: any) {
delete checkData[id];
}
});
const data = toRaw(checkedNodes);
emit('checked', checked, data);
emit('checked', _keys, nodes);
}
onMounted(loadChannelTree);

211
apps/web-antd/src/views/sis/acAdmin/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<Page :auto-content-height="true">
<div class="flex h-full gap-[8px]">
<DpTree class="h-[87vh] w-[300px]" @checked="onNodeChecked" />
<DpTree class="h-full w-[300px]" @checked="onNodeChecked" />
<div class="bg-background flex-1">
<div class="video-play-area flex h-full flex-wrap">
<div
@@ -27,22 +27,24 @@
<script setup lang="ts">
import DpTree from './dp-tree.vue';
import { Page } from '@vben/common-ui';
import { ref } from 'vue';
import { onMounted, onUnmounted, ref, toRaw } from 'vue';
import mpegts from 'mpegts.js';
import { addStreamProxy } from '#/api/sis/stream';
import { addFFmpegStreamProxy, addStreamProxy } from '#/api/sis/stream';
import { message } from 'ant-design-vue';
import { checkHEVCSupport } from '#/utils/video';
import type { AddStreamProxyResult } from '#/api/sis/stream/model';
/**
* 屏幕播放器数量
*/
const selected = 'selected';
const playerNum = ref(4);
const playerNum = ref(1);
/**
* 屏幕播放器样式
*/
const playerStyle = ref({
width: '50%',
height: '50%',
width: '100%',
height: '100%',
});
const currentSelectPlayerIndex = ref(-1);
@@ -61,28 +63,112 @@ const setItemRef = (el: any) => {
}
};
function onNodeChecked(checked, nodes: any[]) {
/**
* 处理带有子节点的数据
* @param node
* @param newNode
*/
function handleParentNoe(node: any, newNode: any[] = []) {
node.forEach((item: any) => {
if (item.level === 6) {
newNode.push(toRaw(item.data));
}
if (item.children && item.children.length >= 1) {
handleParentNoe(item.children, newNode);
}
});
}
/**
* 节点选中时间处理
* @param _val 选中节点id
* @param checked 是否选中
* @param node 节点数据
*/
function onNodeChecked(
_val: any,
{ checked, node }: { checked: boolean; node: any },
) {
// 此次操作需要新增或者删除节点
let checkNode: any = [];
handleParentNoe([node], checkNode);
// 新增
if (checked) {
console.log(nodes);
nodes.forEach((node: any) => {
const { data, level } = node;
// 只播放视频节点
if (level == 6) {
const index =
currentSelectPlayerIndex.value === -1
? 0
: currentSelectPlayerIndex.value;
doPlayer(data, index);
/**
* 如果当前页面有选择播放未知，并且播放视频只有一个，则播放到制定位置
*/
if (currentSelectPlayerIndex.value !== -1 && checkNode.length == 1) {
doPlayer(checkNode[0], currentSelectPlayerIndex.value - 1);
}
// 批量播放 currentSelectPlayerIndex 将不再生效
else {
// 如果此次播放数量小于当前播能播放
const freeArr: number[] = []; // 空闲播放器数量
for (let i = 0; i < playerNum.value; i++) {
const playerData = playerList[i];
if (!playerData) {
freeArr.push(i);
}
}
// 要播放的视频数量，小于等于空闲播放器数量，则填充空闲即可
if (checkNode.length <= freeArr.length) {
for (let j = 0; j < checkNode.length; j++) {
doPlayer(checkNode[j], freeArr[j]);
}
}
// 直接覆盖原有的播放视频
else {
for (let i = 0; i < playerNum.value; i++) {
doPlayer(checkNode[i], i);
}
}
}
}
// 删除
else {
checkNode.forEach((item: any) => {
for (let i = 0; i < playerNum.value; i++) {
const player = playerList[i];
if (player && player.data.id === item.id) {
closePlayer(i);
}
}
});
} else {
}
}
// 播放器数据, 每一个位置代表页面上行的一个矩形
const playerList: any[] = [];
function streamProxy(nodeData: any, cb: Function) {
let params = {};
if (nodeData.nvrIp) {
params = {
videoIp: nodeData.nvrIp,
videoPort: nodeData.nvrPort,
factoryNo: nodeData.nvrFactoryNo,
account: nodeData.nvrAccount,
pwd: nodeData.nvrPwd,
channelId: nodeData.nvrChannelNo,
};
} else {
params = {
videoIp: nodeData.deviceIp,
videoPort: nodeData.devicePort,
factoryNo: nodeData.factoryNo,
account: nodeData.deviceAccount,
pwd: nodeData.devicePwd,
channelId: nodeData.channelNo,
};
if (isSupportH265) {
addStreamProxy(params).then((res) => cb(res));
} else {
addFFmpegStreamProxy(params).then((res) => cb(res));
}
}
}
/**
* 开始播放视频流
* @param nodeData 播放的节点数据
@@ -91,16 +177,7 @@ const playerList: any[] = [];
function doPlayer(nodeData: any, index: number = 0) {
console.log('index=', index);
if (mpegts.isSupported()) {
const params = {
videoIp: nodeData.deviceIp,
videoPort: 554,
factoryNo: nodeData.factoryNo,
account: nodeData.deviceAccount,
pwd: nodeData.devicePwd,
channelId: nodeData.channelNo ? nodeData.channelNo : 101,
};
// }
addStreamProxy(params).then((res) => {
streamProxy(nodeData, (res: AddStreamProxyResult) => {
const url = res.wsFlv;
// 将url 绑定到 nodeData
nodeData.url = url;
@@ -129,6 +206,7 @@ function doPlayer(nodeData: any, index: number = 0) {
playerList[index] = {
player,
data: nodeData,
el: videoElement,
};
} else {
console.log('视频播放元素获取异常');
@@ -139,54 +217,6 @@ function doPlayer(nodeData: any, index: number = 0) {
}
}
function changeElPlayer(playerInfo: any, index: number) {
const playerData = playerInfo.data;
const oldPlayer = playerInfo.player;
if (oldPlayer) {
closePlayVieo(oldPlayer);
}
const videoConfig = {
type: 'flv',
url: playerData.url,
isLive: true,
hasAudio: false,
hasVideo: true,
enableWorker: true, // 启用分离的线程进行转码
enableStashBuffer: false, // 关闭IO隐藏缓冲区
stashInitialSize: 256, // 减少首帧显示等待时长
};
const playerConfig = {
enableErrorRecover: true, // 启用错误恢复
autoCleanupMaxBackwardDuration: 30,
autoCleanupMinBackwardDuration: 10,
};
const player = mpegts.createPlayer(videoConfig, playerConfig);
const videoElement = itemRefs.value[index];
if (videoElement) {
player.attachMediaElement(videoElement);
player.load();
player.play();
playerList[index] = {
player,
data: playerData,
};
} else {
console.log('视频播放元素获取异常');
}
}
function closePlayVieo(plInfo: any) {
if (plInfo) {
try {
plInfo.pause(); // 暂停
plInfo.unload(); // 卸载
plInfo.destroy(); // 销毁
} catch (e) {
console.log('播放器关闭失败，e=', e);
}
}
}
function closePlayer(index: number) {
// 如果播放器存在，尝试关闭
const pData = playerList[index];
@@ -202,6 +232,33 @@ function closePlayer(index: number) {
}
}
}
function catchUp() {
playerList.forEach((playerData) => {
if (playerData) {
const { player, el } = playerData;
const end = player.buffered.end(player.buffered.length - 1);
const diff = end - el.currentTime;
if (diff > 2) {
// 如果延迟超过2秒
el.currentTime = end - 0.5; // 跳转到接近直播点
}
}
});
}
let isSupportH265 = false;
onMounted(() => {
// 检测浏览器是否支持h265
isSupportH265 = checkHEVCSupport();
setInterval(catchUp, 10000);
});
onUnmounted(() => {
for (let i = 0; i < playerList.length; i++) {
closePlayer(i);
}
});
</script>
<style>
.player {

75
apps/web-antd/src/views/sis/personLibImg/data.tsx
View File

@@ -5,31 +5,16 @@ import { DictEnum } from '@vben/constants';
import { getPopupContainer } from '@vben/utils';
import { getDictOptions } from '#/utils/dict';
import { personLibList } from '#/api/sis/personLib';
import type { PersonLibQuery, PersonLibVO } from '#/api/sis/personLib/model';
import { renderDict } from '#/utils/render'
import { log } from 'console'
let libArr: PersonLibVO[] = [];
export const querySchema: FormSchemaGetter = () => [
{
label: '图片库',
fieldName: 'libId',
component: 'ApiSelect',
label: '人员标签',
fieldName: 'rosterType',
component: 'Select',
componentProps: {
resultField: 'list', // 根据API返回结构调整
labelField: 'libName',
valueField: 'id',
// immediate: true,
api: async () => {
if (!libArr || libArr.length == 0) {
const params: PersonLibQuery = {
pageNum: 1,
pageSize: 500,
};
const res = await personLibList(params);
libArr = res.rows;
}
return libArr;
},
options: getDictOptions('roster_type'),
},
},
{
@@ -63,6 +48,11 @@ export const columns: VxeGridProps['columns'] = [
{
title: '性别',
field: 'sex',
slots:{
default: ({row}) =>{
return renderDict(row.sex, 'sys_user_sex')
}
}
},
{
title: '邮箱',
@@ -75,6 +65,11 @@ export const columns: VxeGridProps['columns'] = [
{
title: '证件类型',
field: 'certificateType',
slots:{
default: ({row}) =>{
return renderDict(row.certificateType, 'sys_certificate_type')
}
}
},
{
title: '证件号码',
@@ -84,6 +79,16 @@ export const columns: VxeGridProps['columns'] = [
title: '出生日期',
field: 'birthDate',
},
{
title: '人员标签',
field: 'rosterType',
slots: {
default: ({ row }) => {
return renderDict(row.rosterType, 'roster_type')
},
},
width: 100,
},
{
field: 'action',
fixed: 'right',
@@ -93,29 +98,19 @@ export const columns: VxeGridProps['columns'] = [
},
];
const test = getDictOptions('roster_type');
test.forEach(item => {
console.log('item',item)
});
export const modalSchema: FormSchemaGetter = () => [
{
label: '图片库',
fieldName: 'libIds',
component: 'ApiSelect',
label: '人员标签',
fieldName: 'rosterType',
component: 'Select',
rules: 'required',
componentProps: {
resultField: 'list', // 根据API返回结构调整
labelField: 'libName',
valueField: 'id',
mode: 'multiple',
// immediate: true,
api: async () => {
if (!libArr || libArr.length == 0) {
const params: PersonLibQuery = {
pageNum: 1,
pageSize: 500,
};
const res = await personLibList(params);
libArr = res.rows;
}
return libArr;
},
options: getDictOptions('roster_type'),
},
},
{

61
apps/web-antd/src/views/sis/video/index.vue
View File

@@ -2,7 +2,7 @@
<Page class="h-full w-full">
<!-- 设备分组区域 -->
<div class="flex h-full gap-[8px]">
<ChannelTree class="h-[83vh] w-[300px]" @check="onNodeChecked" />
<ChannelTree class="h-full w-[300px]" @check="onNodeChecked" />
<!-- 设备分组区域 -->
<div class="bg-background flex-1">
@@ -47,13 +47,15 @@ import { Page } from '@vben/common-ui';
import ChannelTree from './channel-tree.vue';
import mpegts from 'mpegts.js';
import { message } from 'ant-design-vue';
import { addStreamProxy } from '#/api/sis/stream';
import { addFFmpegStreamProxy, addStreamProxy } from '#/api/sis/stream';
import {
Svg16FrameIcon,
Svg1FrameIcon,
Svg4FrameIcon,
Svg9FrameIcon,
} from '@vben/icons';
import { checkHEVCSupport } from '#/utils/video';
import type { AddStreamProxyResult } from '#/api/sis/stream/model';
const selected = 'selected';
@@ -265,6 +267,35 @@ function changeElPlayer(playerInfo: any, index: number) {
}
}
function streamProxy(nodeData: any, cb: Function) {
let params = {};
if (nodeData.nvrIp) {
params = {
videoIp: nodeData.nvrIp,
videoPort: nodeData.nvrPort,
factoryNo: nodeData.nvrFactoryNo,
account: nodeData.nvrAccount,
pwd: nodeData.nvrPwd,
channelId: nodeData.nvrChannelNo,
};
} else {
params = {
videoIp: nodeData.deviceIp,
videoPort: nodeData.devicePort,
factoryNo: nodeData.factoryNo,
account: nodeData.deviceAccount,
pwd: nodeData.devicePwd,
channelId: nodeData.channelNo,
};
if (isSupportH265) {
addStreamProxy(params).then((res) => cb(res));
} else {
addFFmpegStreamProxy(params).then((res) => cb(res));
}
}
}
/**
* 开始播放视频流
* @param nodeData 播放的节点数据
@@ -273,27 +304,7 @@ function changeElPlayer(playerInfo: any, index: number) {
function doPlayer(nodeData: any, index: number = 0) {
console.log('index=', index);
if (mpegts.isSupported()) {
let params = {};
// if (nodeData.nvrIp) {
// params = {
// videoIp: nodeData.nvrIp,
// videoPort: nodeData.nvrPort,
// factoryNo: nodeData.nvrFactoryNo,
// account: nodeData.nvrAccount,
// pwd: nodeData.nvrPwd,
// channelId: nodeData.nvrChannelNo,
// };
// } else {
params = {
videoIp: nodeData.deviceIp,
videoPort: nodeData.devicePort,
factoryNo: nodeData.factoryNo,
account: nodeData.deviceAccount,
pwd: nodeData.devicePwd,
channelId: nodeData.channelNo,
};
// }
addStreamProxy(params).then((res) => {
streamProxy(nodeData, (res: AddStreamProxyResult) => {
const url = res.wsFlv;
// 将url 绑定到 nodeData
nodeData.url = url;
@@ -360,8 +371,10 @@ function closePlayer(index: number) {
}
}
let isSupportH265 = false;
onMounted(() => {
// 初始化不加载任何视频
// 检测浏览器是否支持h265
isSupportH265 = checkHEVCSupport();
});
onUnmounted(() => {

17
apps/web-antd/tsconfig.json
View File

@@ -4,9 +4,20 @@
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
"#/*": [
"./src/*"
]
}
},
"references": [{ "path": "./tsconfig.node.json" }],
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*.d.ts"]
"references": [
{
"path": "./tsconfig.node.json"
}
],
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"types/**/*.d.ts"
]
}

7
apps/web-antd/vite.config.mts
View File

@@ -27,12 +27,7 @@ export default defineConfig(async () => {
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
// mock代理目标地址
// target: 'http://192.168.43.169:8080',
// target: 'https://by.missmoc.top/api/',
target: 'http://192.168.1.108:8080',
// target: 'http://192.168.43.169:8080',
// target: 'http://47.109.37.87:3010',
// target: 'http://4082b6ba.r8.vip.cpolar.cn',
target: 'http://127.0.0.1:8080',
ws: true,
},
},