Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5
This commit is contained in:
@@ -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",
|
||||
|
@@ -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}`);
|
||||
}
|
13
apps/web-antd/src/api/sis/stream/index.ts
Normal file
13
apps/web-antd/src/api/sis/stream/index.ts
Normal 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,
|
||||
});
|
||||
}
|
22
apps/web-antd/src/api/sis/stream/model.d.ts
vendored
Normal file
22
apps/web-antd/src/api/sis/stream/model.d.ts
vendored
Normal 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;
|
||||
|
||||
}
|
@@ -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',
|
||||
|
@@ -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>
|
||||
|
||||
|
@@ -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: '梯控摄像头',
|
||||
|
||||
},
|
||||
];
|
||||
|
@@ -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',
|
||||
},
|
||||
];
|
@@ -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';
|
@@ -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
|
@@ -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';
|
||||
|
@@ -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">
|
||||
|
@@ -0,0 +1,4 @@
|
||||
export interface CacheNode {
|
||||
player: any; // 播放器控制对象
|
||||
data: any; // 播放节点参数
|
||||
}
|
||||
|
@@ -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>
|
||||
|
@@ -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,
|
||||
|
Reference in New Issue
Block a user