WholeProcessPlatform/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/components/VideoPlayer.vue

<template>
  <div class="video-section">
    <div class="video-mode">
      <div class="video-main" v-loading="loading">
        <div v-if="activeMedia.type === 'image' && activeMedia.src" class="media-display">
          <img :src="activeMedia.src" style="width: 100%; height: 100%; object-fit: contain" />
        </div>
        <div v-else-if="activeMedia.type === 'video' && activeMedia.src" class="media-display">
          <LiveVideoBox :videoData="{ url: activeMedia.src }" height="100%" :showTitle="false" />
        </div>
        <div v-else class="media-empty">
          <a-empty :description="emptyText" />
        </div>
      </div>
      <div class="video-sidebar" v-loading="loading">
        <div class="sidebar-list" v-if="list.length > 0">
          <div
            v-for="item in list"
            :key="item.fid"
            class="sidebar-item"
            :class="{ active: activeFid === item.fid }"
            @click="handleSelect(item)"
          >
            <div class="item-thumb">
              <img v-if="item.type === 'img'" :src="item.imgPath" />
              <div v-else-if="item.type === 'vdsp'" class="thumb-placeholder">
                <img :src="videoCover" />
              </div>
              <span v-else class="no-media">无媒体</span>
            </div>
            <div class="item-time">{{ item.stName || item.ennm }}{{ item.tm }}</div>
          </div>
        </div>
        <a-empty v-else description="暂无数据" class="sidebar-empty" />
      </div>
    </div>
    <div class="sidebar-pagination" style="margin-top: 10px; display: flex; justify-content: end">
      <a-pagination
        v-model:current="currentPage"
        v-model:pageSize="currentPageSize"
        :page-size-options="pageSizeOptions"
        :total="total"
        show-size-changer
        size="small"
        @change="handlePageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import LiveVideoBox from '@/views/shiPinJianKong/components/LiveVideoBox.vue';
import videoCover from '@/assets/images/videFm.jpg';

interface Props {
  list: any[];
  activeFid: string;
  activeMedia: { type: string; src: string };
  loading: boolean;
  page: number;
  pageSize: number;
  pageSizeOptions: string[];
  total: number;
  emptyText?: string;
}

const props = withDefaults(defineProps<Props>(), {
  emptyText: '请选择右侧数据'
});

const emit = defineEmits<{
  (e: 'select', item: any): void;
  (e: 'pageChange', page: number, pageSize: number): void;
}>();

const currentPage = ref(props.page);
const currentPageSize = ref(props.pageSize);

watch(
  () => props.page,
  val => {
    currentPage.value = val;
  }
);

watch(
  () => props.pageSize,
  val => {
    currentPageSize.value = val;
  }
);

const handleSelect = (item: any) => {
  emit('select', item);
};

const handlePageChange = (page: number, pageSize: number) => {
  currentPage.value = page;
  currentPageSize.value = pageSize;
  emit('pageChange', page, pageSize);
};
</script>

<style scoped>

  .video-mode {
    display: flex;
    gap: 12px;
    width: 100%;
    height: 520px;

    .video-main {
      flex: 0 0 80%;
      background: #000;
      border-radius: 4px;
      overflow: hidden;

      .media-display {
        width: 100%;
        height: 100%;
      }

      .media-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }

    .video-sidebar {
      flex: 0 0 20%;
      display: flex;
      flex-direction: column;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      overflow: hidden;

      .sidebar-list {
        flex: 1;
        overflow-y: auto;

        .sidebar-item {
          padding: 8px;
          cursor: pointer;
          border-bottom: 1px solid #f0f0f0;
          transition: background 0.2s;

          &:hover {
            background: #f5f5f5;
          }

          &.active {
            background: #e6f7ff;
          }

          .item-thumb {
            width: 100%;
            height: 110px;
            background: #1a1a1a;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .thumb-placeholder {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;

              .no-media {
                font-size: 12px;
                color: #999;
              }
            }
          }

          .item-time {
            margin-top: 6px;
            font-size: 12px;
            color: #666;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .sidebar-empty {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      .sidebar-pagination {
        padding: 8px;
        text-align: center;
        border-top: 1px solid #e8e8e8;
      }
    }
  }
/* 样式继承自父组件 */
</style>