feat: camera add split mode && list mode && support full screen

@@ -2,10 +2,12 @@ import { defHttp } from '/@/utils/http/axios';
 import {
   CameraModel,
   CameraQueryParam,
+  CameraRecord,
   StreamingMediaDeleteParam,
   StreamingQueryParam,
   StreamingSubmitParam,
 } from './model/cameraModel';
+import { PaginationResult } from '/#/axios';
 
 enum CameraManagerApi {
   CAMERA_POST_URL = '/video',
@@ -19,7 +21,7 @@ enum CameraManagerApi {
 }
 
 export const cameraPage = (params: CameraQueryParam) => {
-  return defHttp.get<CameraQueryParam>({
+  return defHttp.get<PaginationResult<CameraRecord>>({
     url: CameraManagerApi.CAMERA_GET_URL,
     params,
   });

@@ -2,11 +2,11 @@ import { BasicPageParams } from '/@/api/model/baseModel';
 export type CameraQueryParam = BasicPageParams & CameraParam;
 
 export type CameraParam = {
-  status: true;
-  name: string;
-  organizationId: string;
-  orderFiled: string;
-  orderType: string;
+  // status: true;
+  name?: string;
+  organizationId?: string;
+  // orderFiled: string;
+  // orderType: string;
 };
 
 export interface CameraModel {
@@ -82,3 +82,22 @@ export interface StreamingMediaDeleteParam {
   tenantId?: string;
   ids: string[];
 }
+
+export interface CameraRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  enabled: boolean;
+  tenantId: string;
+  videoUrl: string;
+  brand: string;
+  sn: string;
+  organizationId: string;
+  organizationName: string;
+  status: boolean;
+  accessMode: number;
+  playProtocol: number;
+}

+<template>
+  <div>
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+      <BasicTable
+        style="flex: auto"
+        :clickToRowSelect="false"
+        @register="registerTable"
+        :searchInfo="searchInfo"
+        class="w-3/4 xl:w-4/5"
+      >
+        <template #toolbar>
+          <a-button type="primary" @click="handleSwitchMode">分屏模式</a-button>
+          <Authority value="api:yt:video:post">
+            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增视频 </a-button>
+          </Authority>
+          <Authority value="api:yt:video:delete">
+            <Popconfirm
+              title="您确定要批量删除数据"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm="handleDeleteOrBatchDelete(null)"
+            >
+              <a-button type="primary" color="error" :disabled="hasBatchDelete">
+                批量删除
+              </a-button>
+            </Popconfirm>
+          </Authority>
+        </template>
+        <template #img="{ record }">
+          <TableImg
+            :size="30"
+            :showBadge="false"
+            :simpleShow="true"
+            :imgList="
+              typeof record.avatar !== 'undefined' && record.avatar !== '' && record.avatar != null
+                ? [record.avatar]
+                : null
+            "
+          />
+        </template>
+        <template #accessMode="{ record }">
+          <Tag :color="record.accessMode === AccessMode.ManuallyEnter ? 'cyan' : 'blue'">{{
+            record.accessMode === AccessMode.ManuallyEnter ? '手动输入' : '流媒体获取'
+          }}</Tag>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '预览',
+                icon: 'clarity:note-edit-line',
+                auth: 'api:yt:video:get',
+                onClick: handleViewVideo.bind(null, record),
+              },
+              {
+                label: '编辑',
+                auth: 'api:yt:video:update',
+                icon: 'clarity:note-edit-line',
+                onClick: handleCreateOrEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                auth: 'api:yt:video:delete',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  confirm: handleDeleteOrBatchDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </PageWrapper>
+    <CameraDrawer @register="registerDrawer" @success="handleSuccess" />
+    <VideoPreviewModal @register="registerModal" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
+  import { PageWrapper } from '/@/components/Page';
+  import { useDrawer } from '/@/components/Drawer';
+  import CameraDrawer from './CameraDrawer.vue';
+  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+  import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
+  import { searchFormSchema, columns, AccessMode, PageMode } from './config.data';
+  import VideoPreviewModal from './DialogPreviewVideo.vue';
+  import { useModal } from '/@/components/Modal';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm } from 'ant-design-vue';
+  import { Tag } from 'ant-design-vue';
+
+  export default defineComponent({
+    components: {
+      PageWrapper,
+      OrganizationIdTree,
+      BasicTable,
+      TableAction,
+      CameraDrawer,
+      VideoPreviewModal,
+      TableImg,
+      Authority,
+      Popconfirm,
+      Tag,
+    },
+    emits: ['switchMode'],
+    setup(_, { emit }) {
+      const searchInfo = reactive<Recordable>({});
+      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+      const [registerModal, { openModal }] = useModal();
+      // 表格hooks
+      const [registerTable, { reload, setProps }] = useTable({
+        title: '视频列表',
+        api: cameraPage,
+        columns,
+        showIndexColumn: false,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          resetFunc: resetFn,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+
+      // 刷新
+      const handleSuccess = () => {
+        reload();
+      };
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteCameraManage,
+        handleSuccess,
+        setProps
+      );
+
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
+      // 新增或编辑
+      const handleCreateOrEdit = (record: Recordable | null) => {
+        if (record) {
+          openDrawer(true, {
+            isUpdate: true,
+            record,
+          });
+        } else {
+          openDrawer(true, {
+            isUpdate: false,
+          });
+        }
+      };
+
+      // 树形选择器
+      const handleSelect = (organizationId: string) => {
+        searchInfo.organizationId = organizationId;
+        handleSuccess();
+      };
+      const handleViewVideo = (record) => {
+        openModal(true, {
+          isUpdate: true,
+          record,
+        });
+      };
+
+      const handleSwitchMode = () => {
+        emit('switchMode', PageMode.SPLIT_SCREEN_MODE);
+      };
+
+      return {
+        searchInfo,
+        hasBatchDelete,
+        handleCreateOrEdit,
+        handleDeleteOrBatchDelete,
+        handleSelect,
+        handleSuccess,
+        registerTable,
+        registerDrawer,
+        organizationIdTreeRef,
+        handleViewVideo,
+        registerModal,
+        AccessMode,
+        handleSwitchMode,
+      };
+    },
+  });
+</script>

+<script setup lang="ts">
+  import { PageWrapper } from '/@/components/Page';
+  import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.vue';
+  import { computed, onMounted, reactive, ref, unref } from 'vue';
+  import { Tabs, Row, Col, Spin, Button } from 'ant-design-vue';
+  import { cameraPage } from '/@/api/camera/cameraManager';
+  import { CameraRecord } from '/@/api/camera/model/cameraModel';
+  import { AndroidFilled } from '@ant-design/icons-vue';
+  import { videoPlay as VideoPlay } from 'vue3-video-play'; // 引入组件
+  import 'vue3-video-play/dist/style.css'; // 引入css
+  import { useFullscreen } from '@vueuse/core';
+  import CameraDrawer from './CameraDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { PageMode } from './config.data';
+
+  const emit = defineEmits(['switchMode']);
+  const organizationIdTreeRef = ref(null);
+  const videoContainer = ref<Nullable<HTMLDivElement>>(null);
+  const activeKey = ref(PageMode.SPLIT_SCREEN_MODE);
+  const cameraList = ref<CameraRecord[]>([]);
+  const organizationId = ref<Nullable<string>>(null);
+  const loading = ref(false);
+  const pagination = reactive({
+    page: 1,
+    pageSize: 4,
+    colNumber: 2,
+  });
+
+  const options = reactive({
+    width: '800px',
+    height: '450px',
+    color: '#409eff',
+    muted: false, //静音
+    webFullScreen: false,
+    autoPlay: true, //自动播放
+    currentTime: 0,
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制器
+    title: '', //视频名称
+    type: 'm3u8',
+    src: '', //视频源
+    controlBtns: [
+      'audioTrack',
+      'quality',
+      'speedRate',
+      'volume',
+      'setting',
+      'pip',
+      'pageFullScreen',
+      'fullScreen',
+    ],
+  });
+
+  // 树形选择器
+  const handleSelect = (orgId: string) => {
+    organizationId.value = orgId;
+    getCameraList();
+  };
+
+  const getColLayout = computed(() => {
+    const totalSpan = 24;
+    return totalSpan / pagination.colNumber;
+  });
+
+  const getCameraList = async () => {
+    try {
+      loading.value = true;
+      const { items } = await cameraPage({
+        page: 1,
+        pageSize: pagination.pageSize,
+        organizationId: unref(organizationId)!,
+      });
+      cameraList.value = items;
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handleSwitchLayoutWay = (pageSize: number, layout: number) => {
+    pagination.colNumber = layout;
+    pagination.pageSize = pageSize;
+    getCameraList();
+  };
+
+  const { enter } = useFullscreen(videoContainer);
+
+  const handleFullScreen = () => {
+    enter();
+  };
+
+  const handleChangeMode = (activeKey: string) => {
+    if (activeKey === PageMode.FULL_SCREEN_MODE) {
+      handleFullScreen();
+    } else if (activeKey === PageMode.LIST_MODE) {
+      emit('switchMode', PageMode.LIST_MODE);
+    }
+  };
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const handleAddCamera = () => {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  };
+
+  onMounted(() => {
+    getCameraList();
+  });
+</script>
+
+<template>
+  <div>
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+      <section class="p-4 pl-9 split-screen-mode flex flex-col flex-auto w-3/4 xl:w-4/5">
+        <div class="p-3 bg-light-50 flex justify-between mb-4">
+          <div class="flex gap-4 cursor-pointer items-center">
+            <div
+              class="w-8 h-8 flex justify-center items-center"
+              :style="{ color: pagination.colNumber === 1 ? '#1890ff' : '' }"
+              @click="handleSwitchLayoutWay(1, 1)"
+            >
+              <AndroidFilled class="text-2xl" />
+            </div>
+            <div
+              class="w-8 h-8 flex justify-center items-center"
+              :style="{ color: pagination.colNumber === 2 ? '#1890ff' : '' }"
+              @click="handleSwitchLayoutWay(4, 2)"
+            >
+              <AndroidFilled class="text-2xl" />
+            </div>
+            <div
+              class="w-8 h-8 flex justify-center items-center"
+              :style="{ color: pagination.colNumber === 3 ? '#1890ff' : '' }"
+              @click="handleSwitchLayoutWay(9, 3)"
+            >
+              <AndroidFilled class="text-2xl" />
+            </div>
+          </div>
+          <div class="flex items-center gap-4">
+            <div class="flex">
+              <Button type="primary" @click="handleAddCamera">新增视频</Button>
+            </div>
+            <Tabs type="card" v-model:activeKey="activeKey" @change="handleChangeMode">
+              <Tabs.TabPane :key="PageMode.SPLIT_SCREEN_MODE" tab="分屏模式" />
+              <Tabs.TabPane :key="PageMode.LIST_MODE" tab="列表模式" />
+              <Tabs.TabPane :key="PageMode.FULL_SCREEN_MODE" tab="全屏" />
+            </Tabs>
+          </div>
+        </div>
+        <section ref="videoContainer" class="bg-light-50 flex-auto">
+          <Spin :spinning="loading" class="h-full">
+            <Row :gutter="16" class="h-full mx-0">
+              <Col
+                v-for="item in cameraList"
+                :key="item.id"
+                :style="{ height: `${100 / pagination.colNumber}%` }"
+                class="h-1/2 !px-0 !flex justify-center items-center gap-2"
+                :span="getColLayout"
+              >
+                <div class="box-border w-full h-full p-3">
+                  <div class="bg-yellow-50 w-full h-full overflow-hidden">
+                    <VideoPlay v-bind="options" :src="item.videoUrl" />
+                  </div>
+                </div>
+              </Col>
+            </Row>
+          </Spin>
+        </section>
+      </section>
+    </PageWrapper>
+    <CameraDrawer @register="registerDrawer" @success="getCameraList" />
+  </div>
+</template>
+
+<style scoped lang="less">
+  .split-screen-mode:deep(.ant-tabs-bar) {
+    margin-bottom: 0;
+  }
+
+  .split-screen-mode:deep(.ant-spin-nested-loading) {
+    height: 100%;
+  }
+
+  .split-screen-mode:deep(.ant-spin-container) {
+    height: 100%;
+  }
+
+  .split-screen-mode:deep(.d-player-wrap) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .split-screen-mode:deep(.ant-tabs-tab-active) {
+    border-bottom: 1px solid #eee;
+  }
+</style>

@@ -23,6 +23,12 @@ export enum StreamType {
   THIRD = 2,
 }
 
+export enum PageMode {
+  SPLIT_SCREEN_MODE = 'splitScreen',
+  LIST_MODE = 'listMode',
+  FULL_SCREEN_MODE = 'fullScreenMode',
+}
+
 // 表格列数据
 export const columns: BasicColumn[] = [
   {

+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { PageMode } from './config.data';
+  import ListMode from './ListMode.vue';
+  import SplitScreenMode from './SplitScreenMode.vue';
+  const mode = ref<PageMode>(PageMode.SPLIT_SCREEN_MODE);
+
+  const handleSwitchMode = (key: PageMode) => {
+    mode.value = key;
+  };
+</script>
+
 <template>
   <div>
-    <PageWrapper dense contentFullHeight contentClass="flex">
-      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-      <BasicTable
-        style="flex: auto"
-        :clickToRowSelect="false"
-        @register="registerTable"
-        :searchInfo="searchInfo"
-        class="w-3/4 xl:w-4/5"
-      >
-        <template #toolbar>
-          <Authority value="api:yt:video:post">
-            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增视频 </a-button>
-          </Authority>
-          <Authority value="api:yt:video:delete">
-            <Popconfirm
-              title="您确定要批量删除数据"
-              ok-text="确定"
-              cancel-text="取消"
-              @confirm="handleDeleteOrBatchDelete(null)"
-            >
-              <a-button type="primary" color="error" :disabled="hasBatchDelete">
-                批量删除
-              </a-button>
-            </Popconfirm>
-          </Authority>
-        </template>
-        <template #img="{ record }">
-          <TableImg
-            :size="30"
-            :showBadge="false"
-            :simpleShow="true"
-            :imgList="
-              typeof record.avatar !== 'undefined' && record.avatar !== '' && record.avatar != null
-                ? [record.avatar]
-                : null
-            "
-          />
-        </template>
-        <template #accessMode="{ record }">
-          <Tag :color="record.accessMode === AccessMode.ManuallyEnter ? 'cyan' : 'blue'">{{
-            record.accessMode === AccessMode.ManuallyEnter ? '手动输入' : '流媒体获取'
-          }}</Tag>
-        </template>
-        <template #action="{ record }">
-          <TableAction
-            :actions="[
-              {
-                label: '预览',
-                icon: 'clarity:note-edit-line',
-                auth: 'api:yt:video:get',
-                onClick: handleViewVideo.bind(null, record),
-              },
-              {
-                label: '编辑',
-                auth: 'api:yt:video:update',
-                icon: 'clarity:note-edit-line',
-                onClick: handleCreateOrEdit.bind(null, record),
-              },
-              {
-                label: '删除',
-                auth: 'api:yt:video:delete',
-                icon: 'ant-design:delete-outlined',
-                color: 'error',
-                popConfirm: {
-                  title: '是否确认删除',
-                  confirm: handleDeleteOrBatchDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </BasicTable>
-    </PageWrapper>
-    <CameraDrawer @register="registerDrawer" @success="handleSuccess" />
-    <VideoPreviewModal @register="registerModal" />
+    <SplitScreenMode v-if="mode == PageMode.SPLIT_SCREEN_MODE" @switchMode="handleSwitchMode" />
+    <ListMode v-if="mode === PageMode.LIST_MODE" @switchMode="handleSwitchMode" />
   </div>
 </template>
-
-<script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
-  import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
-  import { useDrawer } from '/@/components/Drawer';
-  import CameraDrawer from './CameraDrawer.vue';
-  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
-  import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
-  import { searchFormSchema, columns, AccessMode } from './config.data';
-  import VideoPreviewModal from './DialogPreviewVideo.vue';
-  import { useModal } from '/@/components/Modal';
-  import { Authority } from '/@/components/Authority';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Popconfirm } from 'ant-design-vue';
-  import { Tag } from 'ant-design-vue';
-
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      OrganizationIdTree,
-      BasicTable,
-      TableAction,
-      CameraDrawer,
-      VideoPreviewModal,
-      TableImg,
-      Authority,
-      Popconfirm,
-      Tag,
-    },
-    setup() {
-      const searchInfo = reactive<Recordable>({});
-      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      const [registerModal, { openModal }] = useModal();
-      // 表格hooks
-      const [registerTable, { reload, setProps }] = useTable({
-        title: '视频列表',
-        api: cameraPage,
-        columns,
-        showIndexColumn: false,
-        clickToRowSelect: false,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchema,
-          resetFunc: resetFn,
-        },
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        rowKey: 'id',
-        actionColumn: {
-          width: 200,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
-        },
-      });
-      // 弹框
-      const [registerDrawer, { openDrawer }] = useDrawer();
-
-      // 刷新
-      const handleSuccess = () => {
-        reload();
-      };
-      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-        deleteCameraManage,
-        handleSuccess,
-        setProps
-      );
-
-      nextTick(() => {
-        setProps(selectionOptions);
-      });
-      // 新增或编辑
-      const handleCreateOrEdit = (record: Recordable | null) => {
-        if (record) {
-          openDrawer(true, {
-            isUpdate: true,
-            record,
-          });
-        } else {
-          openDrawer(true, {
-            isUpdate: false,
-          });
-        }
-      };
-
-      // 树形选择器
-      const handleSelect = (organizationId: string) => {
-        searchInfo.organizationId = organizationId;
-        handleSuccess();
-      };
-      const handleViewVideo = (record) => {
-        openModal(true, {
-          isUpdate: true,
-          record,
-        });
-      };
-      return {
-        searchInfo,
-        hasBatchDelete,
-        handleCreateOrEdit,
-        handleDeleteOrBatchDelete,
-        handleSelect,
-        handleSuccess,
-        registerTable,
-        registerDrawer,
-        organizationIdTreeRef,
-        handleViewVideo,
-        registerModal,
-        AccessMode,
-      };
-    },
-  });
-</script>