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", "echarts-gl": "^2.0.9",
"jsencrypt": "^3.3.2", "jsencrypt": "^3.3.2",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"mpegts.js": "^1.8.0",
"pinia": "catalog:", "pinia": "catalog:",
"tinymce": "^7.3.0", "tinymce": "^7.3.0",
"unplugin-vue-components": "^0.27.3", "unplugin-vue-components": "^0.27.3",

View File

@@ -12,7 +12,7 @@ import { requestClient } from '#/api/request';
* @returns * @returns
*/ */
export function factoryList(params?: FactoryQuery) { 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 * @returns
*/ */
export function factoryExport(params?: FactoryQuery) { 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 * @returns
*/ */
export function factoryInfo(id: ID) { 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 * @returns void
*/ */
export function factoryAdd(data: FactoryForm) { 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 * @returns void
*/ */
export function factoryUpdate(data: FactoryForm) { 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 * @returns void
*/ */
export function factoryRemove(id: ID | IDS) { 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 { getPopupContainer } from '@vben/utils';
import { getDictOptions } from '#/utils/dict'; import { getDictOptions } from '#/utils/dict';
import { DictEnum } from '@vben/constants'; 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 = () => [ export const querySchema: FormSchemaGetter = () => [
{ {
@@ -16,9 +20,13 @@ export const querySchema: FormSchemaGetter = () => [
label: '设备ip', label: '设备ip',
}, },
{ {
component: 'Input', component: 'Select',
fieldName: 'deviceType', fieldName: 'deviceType',
label: '设备类型', label: '设备类型',
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.sis_ipc_device_type, true),
},
}, },
{ {
fieldName: 'deviceStatus', fieldName: 'deviceStatus',
@@ -40,12 +48,16 @@ export const columns: VxeGridProps['columns'] = [
field: 'deviceName', field: 'deviceName',
}, },
{ {
title: '厂商编号', title: '设备厂商',
field: 'factoryNo', field: 'factoryName',
}, },
{ {
title: '设备类型', title: '设备类型',
field: 'device_type', field: 'deviceTypeName',
},
{
title: '设备组',
field: 'groupName',
}, },
{ {
title: '设备ip', title: '设备ip',
@@ -90,15 +102,53 @@ export const modalSchema: FormSchemaGetter = () => [
}, },
{ {
label: '设备厂商', label: '设备厂商',
fieldName: 'facrotyNo', fieldName: 'factoryNo',
component: 'Input', component: 'ApiSelect',
rules: 'required', 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: '设备类型', label: '设备类型',
fieldName: 'deviceType', fieldName: 'deviceType',
component: 'Input', component: 'Select',
rules: 'required', 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', label: '设备ip',

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,5 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PropType } from 'vue';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { SyncOutlined } from '@ant-design/icons-vue'; import { SyncOutlined } from '@ant-design/icons-vue';
import { InputSearch, Skeleton, Tree } from 'ant-design-vue'; import { InputSearch, Skeleton, Tree } from 'ant-design-vue';
@@ -11,21 +10,15 @@ defineOptions({ inheritAttrs: false });
withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true }); withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
const emit = defineEmits<{ const emit = defineEmits<{
/**
* 点击刷新按钮的事件 checked: [];
*/
reload: [];
/** /**
* 点击节点的事件 * 点击节点的事件
*/ */
reload: [];
select: []; select: [];
}>(); }>();
const channelId = defineModel('channelId', {
required: true,
type: Array as PropType<string[]>,
});
const searchValue = defineModel('searchValue', { const searchValue = defineModel('searchValue', {
type: String, type: String,
default: '', default: '',
@@ -39,7 +32,6 @@ const showTreeSkeleton = ref<boolean>(true);
async function loadChannelTree() { async function loadChannelTree() {
showTreeSkeleton.value = true; showTreeSkeleton.value = true;
searchValue.value = ''; searchValue.value = '';
channelId.value = [];
const ret = await treeList(); const ret = await treeList();
channelTree.value = ret; channelTree.value = ret;
showTreeSkeleton.value = false; showTreeSkeleton.value = false;
@@ -85,14 +77,14 @@ onMounted(loadChannelTree);
<Tree <Tree
v-bind="$attrs" v-bind="$attrs"
v-if="channelTree.length > 0" v-if="channelTree.length > 0"
v-model:selected-keys="channelId"
:class="$attrs.class" :class="$attrs.class"
:field-names="{ title: 'label', key: 'id' }"
:show-line="{ showLeafIcon: false }" :show-line="{ showLeafIcon: false }"
:tree-data="channelTree" :tree-data="channelTree"
:virtual="false" :virtual="false"
default-expand-all default-expand-all
checkable
@select="$emit('select')" @select="$emit('select')"
@check="$emit('checked')"
> >
<template #title="{ label }"> <template #title="{ label }">
<span v-if="label.indexOf(searchValue) > -1"> <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"> <Page class="h-full w-full">
<!-- 设备分组区域 --> <!-- 设备分组区域 -->
<div class="flex h-full gap-[8px]"> <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="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 <div
v-for="i in playerNum" v-for="i in playerNum"
:style="playerStyle"
class="player" class="player"
:class="'player-' + i" :class="`layer-${i} ${currentSelectPlayerIndex == i ? selected : ''}`"
></div> @click="playerSelect(i)"
>
<video
style="width: 100%; height: 100%"
:ref="setItemRef"
muted
autoplay
></video>
</div> </div>
<div class="player-area h-[40px]"> </div>
<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> </div>
</div> </div>
</Page> </Page>
>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { onMounted, onUnmounted, ref, toRaw } from 'vue';
import { Page } from '@vben/common-ui'; import { Page } from '@vben/common-ui';
import ChannelTree from './channel-tree.vue'; 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 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> </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/, ''), rewrite: (path) => path.replace(/^\/api/, ''),
// mock代理目标地址 // mock代理目标地址
// target: 'http://192.168.43.169:8080', // target: 'http://192.168.43.169:8080',
target: 'https://by.missmoc.top/api/', // target: 'https://by.missmoc.top/api/',
// target: 'http://192.168.0.108:8080', target: 'http://192.168.0.108:8080',
// target: 'http://192.168.0.106:8080', // target: 'http://192.168.0.106:8080',
// target: 'http://47.109.37.87:3010', // target: 'http://47.109.37.87:3010',
ws: true, ws: true,

View File

@@ -21,6 +21,7 @@ export const DictEnum = {
wy_fjzt: 'wy_fjzt', // 房间状态 wy_fjzt: 'wy_fjzt', // 房间状态
wy_direction_towards: 'direction_towards', // 房间朝向 wy_direction_towards: 'direction_towards', // 房间朝向
sis_device_status: 'sis_device_status', //设备在线状态 sis_device_status: 'sis_device_status', //设备在线状态
sis_ipc_device_type: 'sis_ipc_device_type', //设备在线状态
wy_sf:'wy_sf',//是否可售 wy_sf:'wy_sf',//是否可售
SIS_ACCESS_CONTROL_DEVICE_TYPE: 'sis_access_control_device_type', SIS_ACCESS_CONTROL_DEVICE_TYPE: 'sis_access_control_device_type',
SIS_LIB_TYPE: 'sis_lib_type', SIS_LIB_TYPE: 'sis_lib_type',