This commit is contained in:
fyy
2025-07-21 11:29:03 +08:00
17 changed files with 403 additions and 106 deletions

View File

@@ -51,6 +51,7 @@
"echarts-gl": "^2.0.9",
"jsencrypt": "^3.3.2",
"lodash-es": "^4.17.21",
"mpegts.js": "^1.8.0",
"pinia": "catalog:",
"tinymce": "^7.3.0",
"unplugin-vue-components": "^0.27.3",

View File

@@ -12,7 +12,7 @@ import { requestClient } from '#/api/request';
* @returns
*/
export function factoryList(params?: FactoryQuery) {
return requestClient.get<PageResult<FactoryVO>>('/property/factory/list', { params });
return requestClient.get<PageResult<FactoryVO>>('/sis/factory/list', { params });
}
/**
@@ -21,7 +21,7 @@ export function factoryList(params?: FactoryQuery) {
* @returns
*/
export function factoryExport(params?: FactoryQuery) {
return commonExport('/property/factory/export', params ?? {});
return commonExport('/sis/factory/export', params ?? {});
}
/**
@@ -30,7 +30,7 @@ export function factoryExport(params?: FactoryQuery) {
* @returns
*/
export function factoryInfo(id: ID) {
return requestClient.get<FactoryVO>(`/property/factory/${id}`);
return requestClient.get<FactoryVO>(`/sis/factory/${id}`);
}
/**
@@ -39,7 +39,7 @@ export function factoryInfo(id: ID) {
* @returns void
*/
export function factoryAdd(data: FactoryForm) {
return requestClient.postWithMsg<void>('/property/factory', data);
return requestClient.postWithMsg<void>('/sis/factory', data);
}
/**
@@ -48,7 +48,7 @@ export function factoryAdd(data: FactoryForm) {
* @returns void
*/
export function factoryUpdate(data: FactoryForm) {
return requestClient.putWithMsg<void>('/property/factory', data);
return requestClient.putWithMsg<void>('/sis/factory', data);
}
/**
@@ -57,5 +57,5 @@ export function factoryUpdate(data: FactoryForm) {
* @returns void
*/
export function factoryRemove(id: ID | IDS) {
return requestClient.deleteWithMsg<void>(`/property/factory/${id}`);
return requestClient.deleteWithMsg<void>(`/sis/factory/${id}`);
}

View File

@@ -0,0 +1,13 @@
import type { AddStreamProxyResult } from './model';
import { requestClient } from '#/api/request';
/**
* 添加拉流代理,如果成功会返回可播放的视频流地址
* @param params
* @returns 人像信息列表
*/
export function addStreamProxy(params?: any) {
return requestClient.post<AddStreamProxyResult>('sis/stream//realtime/add', {
params,
});
}

View File

@@ -0,0 +1,22 @@
export interface AddStreamProxyResult {
key:string;
rtsp:string;
rtmp:string;
flv:string;
wsFlv:string;
mp4:string;
hls:string;
}
export interface AddStreamProxyQuery {
videoIp:string;
videoPort:number;
factoryNo:string;
account:string;
pwd:string;
channelId:string;
startTime:string;
endTime:string;
stream:string;
}

View File

@@ -3,6 +3,10 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import { getPopupContainer } from '@vben/utils';
import { getDictOptions } from '#/utils/dict';
import { DictEnum } from '@vben/constants';
import type { FactoryQuery } from '#/api/sis/factory/model';
import { factoryList } from '#/api/sis/factory';
import { deviceGroupList } from '#/api/sis/deviceGroup';
import type { DeviceGroupQuery } from '#/api/sis/deviceGroup/model';
export const querySchema: FormSchemaGetter = () => [
{
@@ -16,9 +20,13 @@ export const querySchema: FormSchemaGetter = () => [
label: '设备ip',
},
{
component: 'Input',
component: 'Select',
fieldName: 'deviceType',
label: '设备类型',
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.sis_ipc_device_type, true),
},
},
{
fieldName: 'deviceStatus',
@@ -40,12 +48,16 @@ export const columns: VxeGridProps['columns'] = [
field: 'deviceName',
},
{
title: '厂商编号',
field: 'factoryNo',
title: '设备厂商',
field: 'factoryName',
},
{
title: '设备类型',
field: 'device_type',
field: 'deviceTypeName',
},
{
title: '设备组',
field: 'groupName',
},
{
title: '设备ip',
@@ -90,15 +102,53 @@ export const modalSchema: FormSchemaGetter = () => [
},
{
label: '设备厂商',
fieldName: 'facrotyNo',
component: 'Input',
fieldName: 'factoryNo',
component: 'ApiSelect',
rules: 'required',
componentProps: {
allowClear: true,
resultField: 'list', // 根据API返回结构调整
labelField: 'factoryName',
valueField: 'factoryNo',
api: async () => {
const params: FactoryQuery = {
pageNum: 1,
pageSize: 500,
};
const res = await factoryList(params);
return res.rows;
},
},
},
{
label: '设备类型',
fieldName: 'deviceType',
component: 'Input',
component: 'Select',
rules: 'required',
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.sis_ipc_device_type, true),
},
},
{
label: '设备组',
fieldName: 'groupId',
component: 'ApiSelect',
rules: 'required',
componentProps: {
allowClear: true,
resultField: 'list', // 根据API返回结构调整
labelField: 'name',
valueField: 'id',
api: async () => {
const params: DeviceGroupQuery = {
pageNum: 1,
pageSize: 500,
};
const res = await deviceGroupList(params);
return res.rows;
},
},
},
{
label: '设备ip',

View File

@@ -6,10 +6,16 @@ import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { deviceManageAdd, deviceManageInfo, deviceManageUpdate } from '#/api/sis/deviceManage';
import {
deviceManageAdd,
deviceManageInfo,
deviceManageUpdate,
} from '#/api/sis/deviceManage';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
import { getDictOptions } from '#/utils/dict';
import { DictEnum } from '@vben/constants';
const emit = defineEmits<{ reload: [] }>();
@@ -27,7 +33,7 @@ const [BasicForm, formApi] = useVbenForm({
// 通用配置项 会影响到所有表单项
componentProps: {
class: 'w-full',
}
},
},
schema: modalSchema(),
showDefaultActions: false,
@@ -53,7 +59,6 @@ const [BasicModal, modalApi] = useVbenModal({
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
@@ -98,4 +103,3 @@ async function handleClosed() {
<BasicForm />
</BasicModal>
</template>

View File

@@ -1,7 +1,5 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { DeviceManageQuery } from '#/api/sis/deviceManage/model';
import { deviceManageList } from '#/api/sis/deviceManage';
export const querySchema: FormSchemaGetter = () => [
{
@@ -205,6 +203,5 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'elevatorControlDeviceId',
defaultValue: undefined,
label: '梯控摄像头',
},
];

View File

@@ -1,7 +1,6 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
@@ -11,17 +10,7 @@ export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'factoryName',
label: '设备厂商名称',
},
{
component: 'Input',
fieldName: 'dataState',
label: '数据状态1有效0无效',
},
{
component: 'Input',
fieldName: 'searchValue',
label: '搜索值',
label: '厂商名称',
},
];
@@ -29,30 +18,18 @@ export const querySchema: FormSchemaGetter = () => [
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '',
field: 'id',
},
{
title: '厂商编码',
field: 'factoryNo',
},
{
title: '设备厂商名称',
title: '厂商名称',
field: 'factoryName',
},
{
title: '备注',
field: 'remark',
},
{
title: '数据状态1有效0无效',
field: 'dataState',
},
{
title: '搜索值',
field: 'searchValue',
},
{
field: 'action',
fixed: 'right',
@@ -79,7 +56,7 @@ export const modalSchema: FormSchemaGetter = () => [
rules: 'required',
},
{
label: '设备厂商名称',
label: '厂商名称',
fieldName: 'factoryName',
component: 'Input',
rules: 'required',
@@ -89,15 +66,4 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'remark',
component: 'Input',
},
{
label: '数据状态1有效0无效',
fieldName: 'dataState',
component: 'Input',
rules: 'required',
},
{
label: '搜索值',
fieldName: 'searchValue',
component: 'Input',
},
];

View File

@@ -6,7 +6,7 @@ import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { factoryAdd, factoryInfo, factoryUpdate } from '#/api/property/factory';
import { factoryAdd, factoryInfo, factoryUpdate } from '#/api/sis/factory';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';

View File

@@ -1,25 +1,16 @@
<script setup lang="ts">
import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps
} from '#/adapter/vxe-table';
import {
factoryExport,
factoryList,
factoryRemove,
} from '#/api/property/factory';
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { factoryExport, factoryList, factoryRemove } from '#/api/sis/factory';
import type { FactoryForm } from '#/api/property/factory/model';
import { commonDownloadExcel } from '#/utils/file/download';
@@ -76,7 +67,7 @@ const gridOptions: VxeGridProps = {
keyField: 'id',
},
//
id: 'property-factory-index'
id: 'property-factory-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -118,9 +109,14 @@ function handleMultiDelete() {
}
function handleDownloadExcel() {
commonDownloadExcel(factoryExport, '厂商管理数据', tableApi.formApi.form.values, {
fieldMappingTime: formOptions.fieldMappingTime,
});
commonDownloadExcel(
factoryExport,
'厂商管理数据',
tableApi.formApi.form.values,
{
fieldMappingTime: formOptions.fieldMappingTime,
},
);
}
</script>
@@ -138,9 +134,10 @@ function handleDownloadExcel() {
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['property:factory:remove']"
@click="handleMultiDelete">
type="primary"
v-access:code="['property:factory:remove']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
<a-button

View File

@@ -1,4 +1,4 @@
import { type FormSchemaGetter, type VbenFormSchema } from '#/adapter/form';
import { type FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { DictEnum } from '@vben/constants';

View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import { onMounted, ref } from 'vue';
import { SyncOutlined } from '@ant-design/icons-vue';
import { InputSearch, Skeleton, Tree } from 'ant-design-vue';
@@ -11,21 +10,15 @@ defineOptions({ inheritAttrs: false });
withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
const emit = defineEmits<{
/**
* 点击刷新按钮的事件
*/
reload: [];
checked: [];
/**
* 点击节点的事件
*/
reload: [];
select: [];
}>();
const channelId = defineModel('channelId', {
required: true,
type: Array as PropType<string[]>,
});
const searchValue = defineModel('searchValue', {
type: String,
default: '',
@@ -39,7 +32,6 @@ const showTreeSkeleton = ref<boolean>(true);
async function loadChannelTree() {
showTreeSkeleton.value = true;
searchValue.value = '';
channelId.value = [];
const ret = await treeList();
channelTree.value = ret;
showTreeSkeleton.value = false;
@@ -85,14 +77,14 @@ onMounted(loadChannelTree);
<Tree
v-bind="$attrs"
v-if="channelTree.length > 0"
v-model:selected-keys="channelId"
:class="$attrs.class"
:field-names="{ title: 'label', key: 'id' }"
:show-line="{ showLeafIcon: false }"
:tree-data="channelTree"
:virtual="false"
default-expand-all
checkable
@select="$emit('select')"
@check="$emit('checked')"
>
<template #title="{ label }">
<span v-if="label.indexOf(searchValue) > -1">

View File

@@ -0,0 +1,4 @@
export interface CacheNode {
player: any; // 播放器控制对象
data: any; // 播放节点参数
}

View File

@@ -2,36 +2,286 @@
<Page class="h-full w-full">
<!-- 设备分组区域 -->
<div class="flex h-full gap-[8px]">
<ChannelTree v-model:channel-id="channelId" class="w-[260px]" />
<ChannelTree class="w-[260px]" @check="onNodeChecked" />
<!-- 设备分组区域 -->
<div class="bg-background flex-1">
<div class="video-play-area h-[calc(100%-40px)]">
<div class="video-play-area flex h-[calc(100%-40px)] flex-wrap">
<div
v-for="i in playerNum"
:style="playerStyle"
class="player"
:class="'player-' + i"
></div>
:class="`layer-${i} ${currentSelectPlayerIndex == i ? selected : ''}`"
@click="playerSelect(i)"
>
<video
style="width: 100%; height: 100%"
:ref="setItemRef"
muted
autoplay
></video>
</div>
</div>
<div class="player-area h-[40px]">
<div class="player-area flex h-[40px] gap-[5px]">
<div @click="onPlayerNumChanged(1)" class="h-[40px] w-[40px]">1</div>
<div @click="onPlayerNumChanged(2)" class="h-[40px] w-[40px]">2</div>
<div @click="onPlayerNumChanged(3)" class="h-[40px] w-[40px]">3</div>
<div @click="onPlayerNumChanged(4)" class="h-[40px] w-[40px]">4</div>
</div>
</div>
</div>
</Page>
>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { onMounted, onUnmounted, ref, toRaw } from 'vue';
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 type { AddStreamProxyQuery } from '#/api/sis/stream/model';
const selected = 'selected';
const itemRefs = ref<HTMLVideoElement[]>([]);
const setItemRef = (el: any) => {
if (el) {
itemRefs.value.push(el);
}
};
const channelId = ref("");
/**
* 屏幕播放器数量
*/
const playerNum = ref(1);
/**
* 屏幕播放器样式
*/
const playerStyle = ref({
width: '100%',
height: '100%',
});
const currentSelectPlayerIndex = ref(-1);
function playerSelect(index: number) {
if (index === currentSelectPlayerIndex.value) {
currentSelectPlayerIndex.value = -1;
return;
}
currentSelectPlayerIndex.value = index;
}
/**
* 播放器数量
* @param val
*/
function onPlayerNumChanged(val: number) {
// 1个屏幕
if (val === 1) {
playerStyle.value = {
width: '100%',
height: '100%',
};
playerNum.value = 1;
}
// 4个屏幕 2*2
else if (val === 2) {
playerStyle.value = {
width: '50%',
height: '50%',
};
playerNum.value = 4;
}
// 9个屏幕 3*3
else if (val === 3) {
playerStyle.value = {
width: '33.33%',
height: '33.33%',
};
playerNum.value = 9;
}
// 16个屏幕 4*4
else {
playerStyle.value = {
width: '25%',
height: '25%',
};
playerNum.value = 16;
}
}
/**
* 处理带有子节点的数据
* @param node
* @param newNode
*/
function handleParentNoe(node: any, newNode: any[] = []) {
if (node.children && node.children.length >= 1) {
node.children.forEach((item: any) => {
if (item.level === 2) {
newNode.push(toRaw(item.data));
}
if (item.children && item.children.length >= 1) {
handleParentNoe(item.children, newNode);
}
});
}
}
// 播放器数据, 每一个位置代表页面上行的一个矩形
const playerList: any[] = [];
/**
* 节点选中时间处理
* @param _val 选中节点id
* @param checked 是否选中
* @param node 节点数据
*/
function onNodeChecked(
_val: any,
{ checked, node }: { checked: boolean; node: any },
) {
// 此次操作需要新增或者删除节点
let checkNode: any = [];
if (node.level === 1) {
handleParentNoe(node, checkNode);
} else {
checkNode.push(toRaw(node.data));
}
// 新增
if (checked) {
if (currentSelectPlayerIndex.value === -1 && checkNode.length == 0) {
doPlayer(checkNode[0], currentSelectPlayerIndex.value);
}
// 批量播放 currentSelectPlayerIndex 将不再生效
else {
checkNode.forEach((item: any) => {
// 判断当前摄像数据是否已经在播放,如果在播放则此次不进行播放处理.默认选中最后一个
let firstFreePlayerIndex = playerNum.value - 1;
// 记录第一个空播放器是否已找到
let isRecord = false;
// 此次选中的设备是否播放
let isPlayer = true;
for (let i = 0; i < playerNum.value; i++) {
// 记录第一个出现空播放器的索引
const playerData = playerList[i];
// 没找到空播放器并且此次循环播放器为null
if (!isRecord && !playerData) {
firstFreePlayerIndex = i;
isRecord = true;
}
if (playerData && playerData.data.id == item.id) {
isRecord = false;
break;
}
}
if (isPlayer) {
doPlayer(item, firstFreePlayerIndex);
}
});
}
}
// 删除
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);
}
}
});
}
}
/**
* 开始播放视频流
* @param nodeData 播放的节点数据
* @param index 播放器的索引信息
*/
function doPlayer(nodeData: any, index: number) {
if (mpegts.isSupported()) {
const params = {
videoIp: nodeData.deviceIp,
videoPort: nodeData.devicePort,
factoryNo: nodeData.factoryNo,
account: nodeData.deviceAccount,
pwd: nodeData.devicePwd,
channelId: nodeData.channelNo,
};
addStreamProxy(params).then((res) => {
const url = res.wsFlv;
closePlayer(index);
const videoConfig = {
type: 'flv',
url: url,
isLive: true,
hasAudio: true,
hasVideo: true,
enableWorker: true, // 启用分离的线程进行转码
enableStashBuffer: false, // 关闭IO隐藏缓冲区
stashInitialSize: 128, // 减少首帧显示等待时长
};
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: nodeData,
};
} else {
console.log('视频播放元素获取异常');
}
});
} else {
message.error('浏览器不支持播放');
}
}
function closePlayer(index: number) {
// 如果播放器存在,尝试关闭
const pData = playerList[index];
if (pData) {
try {
const player = pData.player;
player.pause(); // 暂停
player.unload(); // 卸载
player.destroy(); // 销毁
playerList[index] = null;
} catch (e) {
console.log('播放器关闭失败e=', e);
}
}
}
onMounted(() => {
// 初始化不加载任何视频
});
onUnmounted(() => {
for (let i = 0; i < playerList.length; i++) {
closePlayer(i);
}
});
</script>
<style></style>
<style scoped>
.player {
border: 1px solid #e4e4e7;
cursor: pointer;
}
.player.selected {
border: 2px solid deepskyblue;
}
</style>

View File

@@ -28,8 +28,8 @@ export default defineConfig(async () => {
rewrite: (path) => path.replace(/^\/api/, ''),
// mock代理目标地址
// target: 'http://192.168.43.169:8080',
target: 'https://by.missmoc.top/api/',
// target: 'http://192.168.0.108:8080',
// target: 'https://by.missmoc.top/api/',
target: 'http://192.168.0.108:8080',
// target: 'http://192.168.0.106:8080',
// target: 'http://47.109.37.87:3010',
ws: true,