Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5

2025-07-21 11:50:52 +08:00
parent b74cde4531 f250bbf9ab
commit 33f2e117f6
27 changed files with 714 additions and 320 deletions
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -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",
--- a/apps/web-antd/src/api/property/attendanceManagement/attendanceGroupSettings/index.ts
+++ b/apps/web-antd/src/api/property/attendanceManagement/attendanceGroupSettings/index.ts
@@ -59,3 +59,12 @@ export function groupUpdate(data: GroupForm) {
 export function groupRemove(id: ID | IDS) {
  return requestClient.deleteWithMsg<void>(`/Property/group/${id}`);
 }
+
+/**
+ * 获取节假日数据
+ * @param year
+ */
+export async function getHoliday(year: string) {
+  const response = await fetch(`https://timor.tech/api/holiday/year/${year}`);
+  return response.json();
+}
--- a/apps/web-antd/src/api/property/attendanceManagement/attendanceGroupSettings/model.d.ts
+++ b/apps/web-antd/src/api/property/attendanceManagement/attendanceGroupSettings/model.d.ts
@@ -1,4 +1,4 @@
-import type { PageQuery, BaseEntity } from '#/api/common';
+import type {PageQuery, BaseEntity} from '#/api/common';

 export interface GroupVO {
  /**
@@ -63,7 +63,16 @@ export interface GroupQuery extends PageQuery {
  attendanceType?: number;

  /**
-    * 日期范围参数
-    */
+   * 日期范围参数
+   */
  params?: any;
 }
+
+/**
+ * 假期
+ */
+export interface Holiday {
+  holiday: boolean;
+  name: string;
+  date: string;
+}
--- a/apps/web-antd/src/api/property/costManagement/houseCharge/model.d.ts
+++ b/apps/web-antd/src/api/property/costManagement/houseCharge/model.d.ts
@@ -58,6 +58,8 @@ export interface HouseChargeVO {
  costItemsVo: CostItemSettingVO;

  chargeStatus: string;
+
+  personId: string;
 }

 export interface HouseChargeForm extends BaseEntity {
--- a/apps/web-antd/src/api/property/factory/index.ts
+++ b/apps/web-antd/src/api/property/factory/index.ts
@@ -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}`);
 }
--- a/apps/web-antd/src/api/property/factory/model.d.ts
+++ b/apps/web-antd/src/api/property/factory/model.d.ts
--- a/apps/web-antd/src/api/sis/stream/index.ts
+++ b/apps/web-antd/src/api/sis/stream/index.ts
@@ -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,
+  });
+}
--- a/apps/web-antd/src/api/sis/stream/model.d.ts
+++ b/apps/web-antd/src/api/sis/stream/model.d.ts
@@ -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;
+
+}
--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/data.ts
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/data.ts
@@ -2,7 +2,7 @@ import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import {getDictOptions} from "#/utils/dict";
 import {renderDict} from "#/utils/render";
-
+import type { TableColumnsType } from 'ant-design-vue';

 export const querySchema: FormSchemaGetter = () => [
  {
@@ -124,6 +124,18 @@ export const modalSchema: FormSchemaGetter = () => [
    rules:'required',
    defaultValue:'1',
  },
+  {
+    label: '',
+    fieldName: 'shiftData',
+    component: 'Input',
+    dependencies: {
+      show: (formValue) => formValue.attendanceType=='1',
+      triggerFields: ['attendanceType'],
+    },
+    slots:{
+      default:'shiftData'
+    },
+  },
  {
    label: '排班周期',
    fieldName: 'schedulingCycle',
@@ -138,32 +150,99 @@ export const modalSchema: FormSchemaGetter = () => [
    defaultValue:'1',
    rules:'required'
  },
+  {
+    label: '',
+    fieldName: 'cycleData',
+    component: 'Input',
+    dependencies: {
+      show: (formValue) => formValue.attendanceType=='1',
+      triggerFields: ['attendanceType'],
+    },
+    slots:{
+      default:'cycleData'
+    },
+  },
 ];

-export const weekdayColumns: VxeGridProps['columns'] = [
+export const weekdayColumns: TableColumnsType = [
  {
    title: '工作日',
-    name: 'label',
+    key: 'label',
    width:180,
    align:'center',
    dataIndex:'label'
  },
  {
    title: '班次',
-    name: 'shift',
+    key: 'shift',
    minWidth:180,
    align:'center',
    dataIndex:'shift'
  },
  {
    title: '操作',
-    name: 'action',
+    key: 'action',
    dataIndex:'action',
    width:180,
    align:'center',
-    slots:{
-      default:'action'
-    },
-
  },
 ]
+
+export const noClockingColumns: TableColumnsType = [
+  {
+    title: '无需打卡日期',
+    key: 'label',
+    width:180,
+    align:'center',
+    dataIndex:'label'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    dataIndex:'action',
+    width:180,
+    align:'center',
+  },
+]
+
+export const clockingColumns: TableColumnsType = [
+  {
+    title: '必须打卡日期',
+    key: 'label',
+    width:180,
+    align:'center',
+    dataIndex:'label'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    dataIndex:'action',
+    width:180,
+    align:'center',
+  },
+]
+
+export const cycleColumns: TableColumnsType = [
+  {
+    title: '天数',
+    key: 'label',
+    width:180,
+    align:'center',
+    dataIndex:'label'
+  },
+  {
+    title: '班次',
+    key: 'label',
+    width:180,
+    align:'center',
+    dataIndex:'label'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    dataIndex:'action',
+    width:180,
+    align:'center',
+  },
+]
+
--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue
@@ -13,9 +13,16 @@ import {
 } from '#/api/property/attendanceManagement/attendanceGroupSettings';
 import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';

-import {modalSchema, weekdayColumns} from './data';
-import {Tag, Button, Table} from 'ant-design-vue'
+import {
+  clockingColumns,
+  cycleColumns,
+  modalSchema,
+  noClockingColumns,
+  weekdayColumns
+} from './data';
+import {Tag, Button, Table, Checkbox} from 'ant-design-vue'
 import {getDictOptions} from "#/utils/dict";
+import holidayCalendar from './holiday-calendar.vue'

 const emit = defineEmits<{ reload: [] }>();

@@ -24,7 +31,9 @@ const weekdayData = ref<any[]>([])
 const title = computed(() => {
  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
-
+const settingData = ref<any>({
+  isAutomatic: true,
+})
 const [BasicForm, formApi] = useVbenForm({
  commonConfig: {
    // 默认占满两列
@@ -50,8 +59,9 @@ const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(

 const [BasicModal, modalApi] = useVbenModal({
  // 在这里更改宽度
-  class: 'w-[70%]',
+  class: 'w-[80%]',
  fullscreenButton: false,
+  maskClosable:false,
  onBeforeClose,
  onClosed: handleClosed,
  onConfirm: handleConfirm,
@@ -66,18 +76,17 @@ const [BasicModal, modalApi] = useVbenModal({
    if (isUpdate.value && id) {
      const record = await groupInfo(id);
      await formApi.setValues(record);
-    }else {
-      weekdayData.value=[]
-      getDictOptions('wy_kqgzr').forEach(item=>{
-      weekdayData.value.push({
-        dayOfWeek:item.value,
-        label:item.label,
-        shift:item.value=='6'||item.value=='7'?'休息':'常规班次：08:00:00~12:00:00    14:00:00~17:00:00'
-      })
+    } else {
+      weekdayData.value = []
+      getDictOptions('wy_kqgzr').forEach(item => {
+        weekdayData.value.push({
+          dayOfWeek: item.value,
+          label: item.label,
+          shift: item.value == '6' || item.value == '7' ? '休息' : '常规班次：08:00:00~12:00:00    14:00:00~17:00:00'
+        })
      })
    }
    await markInitialized();
-
    modalApi.modalLoading(false);
  },
 });
@@ -106,41 +115,95 @@ async function handleClosed() {
  await formApi.resetForm();
  resetInitialized();
 }
+
+const [HolidayCalendar, holidayApi] = useVbenModal({
+  connectedComponent: holidayCalendar,
+});
+
+/**
+ * 查看法定节假日日历
+ */
+async function showHoliday() {
+  holidayApi.open()
+}
+
 </script>

 <template>
  <BasicModal :title="title">
    <BasicForm>
      <template #weekdaySetting>
-        <div style="font-size: 0.875rem;">
+        <div class="item-font">
          <span>快捷设置班次：</span>
          <Tag color="processing">常规班次：08:00:00~12:00:00 14:00:00~17:00:00</Tag>
          <Button type="link">更改班次</Button>
        </div>
      </template>
      <template #settingItem>
-        <Table style="width: 100%" bordered :columns="weekdayColumns" :data-source="weekdayData"
-               size="small" :pagination="false">
-<!--          <template #headerCell="{ column }">-->
-<!--          </template>-->
-<!--          <template #bodyCell="{ column, record }">-->
-<!--            <template>-->
-<!--              {{ record[column.field] }}-->
-<!--            </template>-->
-<!--          </template>-->
-<!--          <template #action="{row}">-->
-<!--            <Button type="link">更改班次</Button>-->
-<!--            <Button type="link">休息</Button>-->
-<!--          </template>-->
-        </Table>
+        <div class="item-font" style="width: 100%;">
+          <Table style="width: 100%" bordered :columns="weekdayColumns" :data-source="weekdayData"
+                 size="small" :pagination="false">
+            <!--          <template #headerCell="{ column }">-->
+            <!--          </template>-->
+            <!--          <template #bodyCell="{ column, record }">-->
+            <!--            <template>-->
+            <!--              {{ record[column.field] }}-->
+            <!--            </template>-->
+            <!--          </template>-->
+            <!--          <template #action="{row}">-->
+            <!--            <Button type="link">更改班次</Button>-->
+            <!--            <Button type="link">休息</Button>-->
+            <!--          </template>-->
+          </Table>
+          <Checkbox class="item-padding-top" v-model:checked="settingData.isAutomatic">
+            法定节假日自动排休
+          </Checkbox>
+          <!--     https://timor.tech/api/holiday/year/2024 国务院节假日安排API-->
+          <Button type="link" @click="showHoliday">查看法定节假日日历</Button>
+          <p class="item-padding-top item-font-weight">特殊日期：</p>
+          <p class="item-padding">无需打卡日期：</p>
+          <Table style="width: 80%" bordered :columns="noClockingColumns" :data-source="[]"
+                 size="small" :pagination="false">
+          </Table>
+          <p class="item-padding">必须打卡日期：</p>
+          <Table style="width: 80%" bordered :columns="clockingColumns" :data-source="[]"
+                 size="small" :pagination="false">
+          </Table>
+        </div>
      </template>
      <template #attendanceShift>
-        班次
+        <Button size="small">选择班次</Button>
+      </template>
+      <template #shiftData>
+        <Tag closable color="processing">早班</Tag>
      </template>
      <template #schedulingCycle>
-        周期
+        <span class="item-font">周期天数4天</span>
+      </template>
+      <template #cycleData>
+        <Table style="width: 100%" bordered :columns="cycleColumns" :data-source="[]"
+               size="small" :pagination="false">
+        </Table>
      </template>
    </BasicForm>
+    <HolidayCalendar></HolidayCalendar>
  </BasicModal>
 </template>
+<style lang="scss" scoped>
+.item-font {
+  font-size: 0.875rem;
+}
+
+.item-font-weight {
+  font-weight: 500;
+}
+
+.item-padding-top {
+  padding-top: 1.1rem;
+}
+
+.item-padding {
+  padding: 1.1rem 0 0.5rem 0;
+}
+</style>

--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/holiday-calendar.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/holiday-calendar.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {ref, shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+
+import dayjs, {type Dayjs} from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+import type {HouseChargeVO} from "#/api/property/costManagement/houseCharge/model";
+import {getHoliday} from "#/api/property/attendanceManagement/attendanceGroupSettings";
+import {Calendar, Tag} from 'ant-design-vue'
+import type {Holiday} from "#/api/property/attendanceManagement/attendanceGroupSettings/model";
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    houseChargeDetail.value = null;
+  },
+});
+
+const houseChargeDetail = shallowRef<null | HouseChargeVO>(null);
+
+const holidayData = ref<any>({})
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const res = await getHoliday(new Date().getFullYear());
+  holidayData.value = res.holiday
+  modalApi.modalLoading(false);
+}
+
+const day = ref<Holiday>();
+const getListData = (value: Dayjs) => {
+  const date = value.format('MM-DD');
+  day.value = holidayData.value?.[date] ?? null;
+  return !!day.value;
+};
+
+const getMonthData = (value: Dayjs) => {
+  if (value.month() === 8) {
+    return 1394;
+  }
+};
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="法定节假日日历" class="w-[40%]">
+    <Calendar>
+      <template #dateCellRender="{ current }">
+        <div v-if="getListData(current)" style="height: 50px">
+          <Tag v-if="day.holiday" color="blue">
+            <span style="padding: 0 10px">休</span>
+          </Tag>
+          <Tag v-else color="red">
+            <span style="padding: 0 10px">班</span>
+          </Tag>
+        </div>
+      </template>
+      <template #monthCellRender="{ current }">
+        <div v-if="getMonthData(current)" class="notes-month">
+          <span>Backlog number</span>
+        </div>
+      </template>
+    </Calendar>
+  </BasicModal>
+</template>
+<style scoped lang="scss">
+:deep(.ant-picker-calendar.ant-picker-calendar-full .ant-picker-calendar-date-content) {
+  height: 46px !important;
+}
+
+</style>
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
@@ -2,16 +2,14 @@
 import { Radio, Select, Button, Table,Calendar } from 'ant-design-vue';
 import type { RadioChangeEvent } from 'ant-design-vue';
 import {ref} from 'vue';
-import dayjs from 'dayjs';
 import { Dayjs } from 'dayjs';
 import { columns, querySchema } from './data';
-import {   
+import {
  useVbenVxeGrid,
  vxeCheckboxChecked,
-  type VxeGridProps 
+  type VxeGridProps
 } from '#/adapter/vxe-table';
 import { getVxePopupContainer } from '@vben/utils';
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import {
  arrangementExport,
  arrangementList,
@@ -22,11 +20,7 @@ import type { ArrangementForm } from '#/api/property/attendanceManagement/arrang
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

-
-
-
 const emit = defineEmits<{(e:'changeView',value:boolean):void}>();
-
 const props = defineProps<{
  viewMode:'calender' | 'schedule'
 }>();
@@ -40,25 +34,6 @@ function handleViewModeChange(e: RadioChangeEvent): void {
  emit('changeView',e.target.value)
 }

-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: {
@@ -90,10 +65,23 @@ const gridOptions: VxeGridProps = {
    keyField: 'id',
  },
  // 表格全局唯一表示 保存列配置需要用到
-  id: 'property-arrangement-index'
+  id: 'property-arrangement-index',
+  toolbarConfig: {
+    // 控制工具栏整体是否显示（默认显示）
+    show: true,
+    // 隐藏"刷新/重置"按钮（对应 redo）
+    refresh: false,
+    // 隐藏"全屏"按钮
+    fullscreen: false,
+    // 隐藏"列设置"按钮（对应 setting）
+    columns: false,
+    // 隐藏"表格尺寸"按钮（对应 size）
+    size: undefined,
+    // 其他可能的按钮（如导出等，按需配置）
+    // export: false, // 如果有导出按钮，也可以隐藏
+  },
 };
 const [BasicTable, tableApi] = useVbenVxeGrid({
-  formOptions,
  gridOptions,
 });

@@ -129,7 +117,7 @@ async function handleDelete(row: Required<ArrangementForm>) {
      </div>
      <div class="flex-1">
        <Page :auto-content-height="true">
-        <BasicTable table-title="排班列表">
+        <BasicTable >
          <template #action="{ row }">
            <Space>
              <ghost-button
@@ -162,4 +150,3 @@ async function handleDelete(row: Required<ArrangementForm>) {
 </template>
 <style>
 </style>
-
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-refund.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-refund.vue
@@ -6,13 +6,11 @@ import {cloneDeep} from '@vben/utils';

 import {useVbenForm} from '#/adapter/form';
 import {
-  houseChargeAdd,
  houseChargeInfo, houseChargeRefund,
-  houseChargeUpdate
 } from '#/api/property/costManagement/houseCharge';
 import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';

-import {modalSchemaRefund, modalSchemaUpdate} from './data';
+import {modalSchemaRefund} from './data';
 import {renderDict} from "#/utils/render";
 import {Descriptions, DescriptionsItem, Divider} from "ant-design-vue";
 import type {HouseChargeVO} from "#/api/property/costManagement/houseCharge/model";
@@ -62,14 +60,15 @@ const [BasicModal, modalApi] = useVbenModal({
    modalApi.modalLoading(true);
    const {id} = modalApi.getData() as { id?: number | string };
    isUpdate.value = !!id;
-    record.value = await houseChargeInfo(id);
-    if (record.value) {
-      room.value = record.value.roomVo
-      costItem.value = record.value.costItemsVo
+    if(id){
+      record.value = await houseChargeInfo(id);
+      if (record.value) {
+        room.value = record.value.roomVo
+        costItem.value = record.value.costItemsVo
+      }
+      await formApi.setValues(record.value);
    }
-    await formApi.setValues(record.value);
    await markInitialized();
-
    modalApi.modalLoading(false);
  },
 });
@@ -83,8 +82,8 @@ async function handleConfirm() {
    }
    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
    const data = cloneDeep(await formApi.getValues());
-    data.costItemsId = record.value.costItemsId
-    data.personId = record.value.personId
+    data.costItemsId = record.value?.costItemsId
+    data.personId = record.value?.personId
    await houseChargeRefund(data);
    resetInitialized();
    emit('reload');
@@ -123,7 +122,7 @@ async function handleClosed() {
        {{ record.startTime }}
      </DescriptionsItem>
      <DescriptionsItem label="房间">
-        {{ room.roomNumber }}
+        {{ room?.roomNumber }}
      </DescriptionsItem>
      <DescriptionsItem label="面积(㎡)">
        {{ `${room?.area} （套内面积：${room?.insideInArea}）` }}
--- a/apps/web-antd/src/views/sis/deviceManage/data.ts
+++ b/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',
--- a/apps/web-antd/src/views/sis/deviceManage/deviceManage-modal.vue
+++ b/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>
-
--- a/apps/web-antd/src/views/sis/elevatorInfo/data.ts
+++ b/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: '梯控摄像头',
-
  },
 ];
--- a/apps/web-antd/src/views/sis/elevatorInfo/floorAuth-modal.vue
+++ b/apps/web-antd/src/views/sis/elevatorInfo/floorAuth-modal.vue
@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import { cloneDeep } from '@vben/utils'
-import { useVbenModal } from '@vben/common-ui'
-import { useVbenForm } from '#/adapter/form'
-import { queryByUnitId } from '#/api/property/floor'
-import { refAdd, refQuery } from '#/api/sis/elevatorInfo'
-import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup'
-
-const dataForm = ref<any>()
-const title = ref('楼层授权')
-
-const [BasicForm, formApi] = useVbenForm({
-  // 所有表单项共用，可单独在表单内覆盖
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-1',
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      component: 'CheckboxGroup',
-      componentProps: {
-        name: 'cname',
-        options: [],
-      },
-      defaultValue: [],
-      fieldName: 'floorNums',
-      label: '楼层'
-    }],
-  wrapperClass: 'grid-cols-1',
-  showDefaultActions: false
-})
-
-const [BasicModal, modalApi] = useVbenModal({
-  // 在这里更改宽度
-  class: 'w-[700px]',
-  fullscreenButton: false,
-  loading: true,
-  onClosed: handleClosed,
-  onConfirm: handleConfirm,
-  onOpened: handleInit,
-})
-
-function handleInit() {
-  dataForm.value = modalApi.getData()
-  const { unitId } = modalApi.getData()
-  queryByUnitId(unitId).then((res) => {
-    const arr: any[] = []
-    res.forEach((item) => {
-      arr.push({
-        label: item.floorName,
-        value: item.floorNumber,
-      })
-    })
-
-    formApi.updateSchema([
-      {
-        fieldName: 'floorNums',
-        componentProps: { options: arr },
-      }
-    ])
-    handleChecked()
-  })
-}
-
-function handleChecked() {
-  const { elevatorId } = modalApi.getData()
-  refQuery(elevatorId).then((res) => {
-    const arr: any[] = []
-    res.forEach((item) => {
-      arr.push(item.floorNum)
-    })
-    formApi.setFieldValue('floorNums', arr)
-  }).finally(() => {
-    modalApi.setState({ loading: false });
-  })
-}
-
-
-
-const { resetInitialized } = useBeforeCloseDiff(
-  {
-    initializedGetter: defaultFormValueGetter(formApi),
-    currentGetter: defaultFormValueGetter(formApi),
-  },
-)
-
-async function handleConfirm() {
-  // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-  const data = cloneDeep(await formApi.getValues())
-  const params = {
-    elevatorId: dataForm.value.elevatorId,
-    floorNums: data.floorNums
-  }
-  refAdd(params).finally(() => {
-    modalApi.close()
-  })
-}
-
-async function handleClosed() {
-  await formApi.resetForm()
-  resetInitialized()
-}
-</script>
-
-<template>
-  <BasicModal :title="title">
-    <BasicForm />
-  </BasicModal>
-</template>
--- a/apps/web-antd/src/views/sis/elevatorInfo/index.vue
+++ b/apps/web-antd/src/views/sis/elevatorInfo/index.vue
@@ -25,7 +25,6 @@ import { commonDownloadExcel } from '#/utils/file/download';

 import elevatorInfoModal from './elevatorInfo-modal.vue';
 import { columns, querySchema } from './data';
-import floorAuthModal from './floorAuth-modal.vue';

 const formOptions: VbenFormProps = {
  commonConfig: {
@@ -89,10 +88,6 @@ const [ElevatorInfoModal, modalApi] = useVbenModal({
  connectedComponent: elevatorInfoModal,
 });

-const [FloorAuthModal, floorAuthModalApi] = useVbenModal({
-  connectedComponent: floorAuthModal,
-});
-
 function handleAdd() {
  modalApi.setData({});
  modalApi.open();
@@ -128,11 +123,6 @@ function handleDownloadExcel() {
  });
 }

-function handleAuth(row: Required<ElevatorInfoForm>) {
-  floorAuthModalApi.setData({ unitId: row.unitId, elevatorId: row.elevatorId });
-  floorAuthModalApi.open();
-}
-
 </script>

 <template>
@@ -165,8 +155,6 @@ function handleAuth(row: Required<ElevatorInfoForm>) {
      </template>
      <template #action="{ row }">
        <Space>
-          <ghost-button @click.stop="handleAuth(row)">楼层授权</ghost-button>
-          
          <ghost-button
            v-access:code="['sis:elevatorInfo:edit']"
            @click.stop="handleEdit(row)"
@@ -191,6 +179,5 @@ function handleAuth(row: Required<ElevatorInfoForm>) {
      </template>
    </BasicTable>
    <ElevatorInfoModal @reload="tableApi.query()" />
-    <FloorAuthModal @reload="tableApi.query()" />
  </Page>
 </template>
--- a/apps/web-antd/src/views/property/factory/data.ts
+++ b/apps/web-antd/src/views/property/factory/data.ts
@@ -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',
-  },
 ];
--- a/apps/web-antd/src/views/property/factory/factory-modal.vue
+++ b/apps/web-antd/src/views/property/factory/factory-modal.vue
@@ -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';
--- a/apps/web-antd/src/views/property/factory/index.vue
+++ b/apps/web-antd/src/views/property/factory/index.vue
@@ -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
--- a/apps/web-antd/src/views/sis/personLibImg/data.tsx
+++ b/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';
--- a/apps/web-antd/src/views/sis/video/channel-tree.vue
+++ b/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">
--- a/apps/web-antd/src/views/sis/video/data.ts
+++ b/apps/web-antd/src/views/sis/video/data.ts
@@ -0,0 +1,4 @@
+export interface CacheNode {
+  player: any; // 播放器控制对象
+  data: any; // 播放节点参数
+}
--- a/apps/web-antd/src/views/sis/video/index.vue
+++ b/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>
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -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,