Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5
This commit is contained in:
@@ -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" />
|
||||
<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>
|
||||
<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>
|
||||
|
@@ -94,6 +94,10 @@ export interface WorkOrdersVO {
|
||||
* 备注
|
||||
*/
|
||||
remark: string;
|
||||
/**
|
||||
* 图片
|
||||
*/
|
||||
orderImgUrl: string;
|
||||
|
||||
}
|
||||
|
||||
|
@@ -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;
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
|
@@ -46,6 +46,10 @@ export interface InspectionPointVO {
|
||||
*/
|
||||
searchValue: string;
|
||||
|
||||
itemName: string;
|
||||
|
||||
createTime: string;
|
||||
|
||||
}
|
||||
|
||||
export interface InspectionPointForm extends BaseEntity {
|
||||
|
@@ -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
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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
BIN
apps/web-antd/src/assets/map/alarm1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.1 KiB |
BIN
apps/web-antd/src/assets/map/alarm2.png
Normal file
BIN
apps/web-antd/src/assets/map/alarm2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.3 KiB |
BIN
apps/web-antd/src/assets/map/camear.png
Normal file
BIN
apps/web-antd/src/assets/map/camear.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.4 KiB |
BIN
apps/web-antd/src/assets/map/video-bg.png
Normal file
BIN
apps/web-antd/src/assets/map/video-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
21
apps/web-antd/src/utils/video.ts
Normal file
21
apps/web-antd/src/utils/video.ts
Normal 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;
|
||||
}
|
@@ -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: '仓库类型',
|
||||
|
@@ -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: '是否超时',
|
||||
|
@@ -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">
|
||||
|
@@ -154,7 +154,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '占地面积',
|
||||
fieldName: 'area',
|
||||
component: 'Input',
|
||||
component: 'InputNumber',
|
||||
},
|
||||
{
|
||||
label: '建成时间',
|
||||
|
@@ -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',
|
||||
|
@@ -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>
|
@@ -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>
|
||||
|
@@ -116,7 +116,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
label: '计划名称',
|
||||
fieldName: 'planName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
rules: z.string().min(1,'请输入计划名称').max(30, { message: '计划名称过长' }),
|
||||
},
|
||||
{
|
||||
label: '巡检路线',
|
||||
|
@@ -50,6 +50,13 @@ export const columns: VxeGridProps['columns'] = [
|
||||
title: '创建时间',
|
||||
field: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '二维码',
|
||||
field: 'qrcode',
|
||||
slots:{
|
||||
default: 'qrcode'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
@@ -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 }[] = []
|
||||
|
@@ -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)">
|
||||
|
@@ -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)
|
||||
}
|
||||
|
File diff suppressed because it is too large
Load Diff
131
apps/web-antd/src/views/screen/monitor/map/Map.vue
Normal file
131
apps/web-antd/src/views/screen/monitor/map/Map.vue
Normal 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
16
apps/web-antd/src/views/screen/monitor/map/constants.js
Normal 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
89
apps/web-antd/src/views/screen/monitor/map/map.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@@ -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);
|
||||
|
@@ -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[]) {
|
||||
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);
|
||||
/**
|
||||
* 处理带有子节点的数据
|
||||
* @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);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
}
|
||||
|
||||
/**
|
||||
* 节点选中时间处理
|
||||
* @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) {
|
||||
/**
|
||||
* 如果当前页面有选择播放未知,并且播放视频只有一个,则播放到制定位置
|
||||
*/
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 播放器数据, 每一个位置代表页面上行的一个矩形
|
||||
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 {
|
||||
|
@@ -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'),
|
||||
},
|
||||
},
|
||||
{
|
||||
|
@@ -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,25 +267,18 @@ function changeElPlayer(playerInfo: any, index: number) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始播放视频流
|
||||
* @param nodeData 播放的节点数据
|
||||
* @param index 播放器的索引信息
|
||||
*/
|
||||
function doPlayer(nodeData: any, index: number = 0) {
|
||||
console.log('index=', index);
|
||||
if (mpegts.isSupported()) {
|
||||
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 {
|
||||
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,
|
||||
@@ -292,8 +287,24 @@ function doPlayer(nodeData: any, index: number = 0) {
|
||||
pwd: nodeData.devicePwd,
|
||||
channelId: nodeData.channelNo,
|
||||
};
|
||||
// }
|
||||
addStreamProxy(params).then((res) => {
|
||||
|
||||
if (isSupportH265) {
|
||||
addStreamProxy(params).then((res) => cb(res));
|
||||
} else {
|
||||
addFFmpegStreamProxy(params).then((res) => cb(res));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始播放视频流
|
||||
* @param nodeData 播放的节点数据
|
||||
* @param index 播放器的索引信息
|
||||
*/
|
||||
function doPlayer(nodeData: any, index: number = 0) {
|
||||
console.log('index=', index);
|
||||
if (mpegts.isSupported()) {
|
||||
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(() => {
|
||||
|
@@ -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"
|
||||
]
|
||||
}
|
||||
|
@@ -27,11 +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://127.0.0.1:8080',
|
||||
// target: 'http://192.168.0.106:8080',
|
||||
// target: 'http://47.109.37.87:3010',
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
|
Reference in New Issue
Block a user