增加视频监控页面

apps/web-antd/src/views/sis/deviceManage/data.ts

@@ -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',

apps/web-antd/src/views/sis/deviceManage/deviceManage-modal.vue

@@ -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>
-

apps/web-antd/src/views/sis/elevatorInfo/data.ts

@@ -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: '梯控摄像头',
-
   },
 ];

apps/web-antd/src/views/sis/factory/data.ts

@@ -0,0 +1,69 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'factoryNo',
+    label: '厂商编码',
+  },
+  {
+    component: 'Input',
+    fieldName: 'factoryName',
+    label: '厂商名称',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '厂商编码',
+    field: 'factoryNo',
+  },
+  {
+    title: '厂商名称',
+    field: 'factoryName',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '厂商编码',
+    fieldName: 'factoryNo',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '厂商名称',
+    fieldName: 'factoryName',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Input',
+  },
+];

apps/web-antd/src/views/sis/factory/factory-modal.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { factoryAdd, factoryInfo, factoryUpdate } from '#/api/sis/factory';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await factoryInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? factoryUpdate(data) : factoryAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
+

apps/web-antd/src/views/sis/factory/index.vue

@@ -0,0 +1,179 @@
+<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 {
+  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';
+
+import factoryModal from './factory-modal.vue';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  // columns: columns(),
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await factoryList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-factory-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [FactoryModal, modalApi] = useVbenModal({
+  connectedComponent: factoryModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<FactoryForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<FactoryForm>) {
+  await factoryRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<FactoryForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await factoryRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    factoryExport,
+    '厂商管理数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="厂商管理列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['property:factory:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['property:factory:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['property:factory:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['property:factory:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['property:factory:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <FactoryModal @reload="tableApi.query()" />
+  </Page>
+</template>

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

@@ -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';

apps/web-antd/src/views/sis/video/channel-tree.vue

@@ -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">

apps/web-antd/src/views/sis/video/data.ts

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

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

@@ -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>