anKeYuan-largeScreen-1080/src/components/VideoMonitor/VideoGrid.vue

<template>
  <div class="panel-box video-grid">
    <div class="corner-deco tl"></div>
    <div class="corner-deco tr"></div>
    <div class="corner-deco bl"></div>
    <div class="corner-deco br"></div>
    <div class="panel-title">
      实时视频监控
      <span class="video-count">共 {{ videoTotal }} 路</span>
    </div>
    <div class="panel-content">
      <div class="grid-container">
        <H5PlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
        <!-- <div
          v-for="(video, idx) in videoList"
          :key="video.id"
          class="cam-frame"
          :class="{ 'ai-cam': video.ai }"
          :style="{ animationDelay: (idx * 0.08) + 's' }"
        >
          <div class="cam-inner">
            <div class="cam-video-area">
              <i class="el-icon-video-camera cam-icon"></i>
              <div class="cam-scan-line"></div>
            </div>
            <div class="cam-corner tl"></div>
            <div class="cam-corner tr"></div>
            <div class="cam-corner bl"></div>
            <div class="cam-corner br"></div>
          </div>
          <div class="cam-label">
            <span class="cam-name">{{ video.name }}</span>
            <span v-if="video.ai" class="cam-ai-badge">AI</span>
            <span class="cam-status" :class="video.status">{{ video.status === 'online' ? 'REC' : 'OFF' }}</span>
          </div>
        </div> -->
      </div>
      <div class="grid-pagination">
        <button class="page-btn" :disabled="videoQueryParams.page <= 1" @click="changePage(-1)">
          <i class="el-icon-arrow-left"></i>
        </button>
        <span class="page-info">{{ videoQueryParams.page }} / {{ totalPages }}</span>
        <button class="page-btn" :disabled="videoQueryParams.page >= totalPages" @click="changePage(1)">
          <i class="el-icon-arrow-right"></i>
        </button>
      </div>
    </div>
    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
  </div>
</template>

<script>
  import {getVideoList} from '@/api'
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'

  export default {
    name: 'VideoGrid',
    components: {H5PlayerVideo, fullH5PlayerVideo},
    data() {
      return {
        videoQueryParams: {
          page: 1,
          pageSize: 9,
          streamType: 1,
          source: 0,
        },
        videoType: false,
        videoList: [],
        videoTotal: 0,
        //全屏视频参数
        fullVideoProps: {},
        fullVideoType: false,
      }
    },
    computed: {
      totalPages() {
        return Math.ceil(this.videoTotal / 9) || 1
      }
    },
    mounted() {

    },
    methods: {
      //刷新视屏
      getVideoData(data) {
        let obj = {
          page: 1,
          pageSize: 9,
          passageway: '',
          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
          streamType: 1,
          source: 4,
          subIds: data,
        };
        this.$set(this, 'videoQueryParams', obj);
        this.$nextTick(() => {
          this.videoInitialize()
        })
      },
      async videoInitialize() {
        let self = this;
        self.$set(self, 'videoType', false);
        self.$set(self, 'videoList', []);
        try {
          const res = await getVideoList(this.videoQueryParams)

          // 假数据开始
          // let res = {
          //   data: {
          //     total: 100,
          //     records: [
          //       {streamUrl: '1', deviceNo: '1'},
          //       {streamUrl: '2', deviceNo: '2'},
          //       {streamUrl: '3', deviceNo: '3'},
          //       {streamUrl: '4', deviceNo: '4'},
          //       {streamUrl: '5', deviceNo: '5'},
          //       {streamUrl: '6', deviceNo: '6'},
          //       {streamUrl: '7', deviceNo: '7'},
          //       {streamUrl: '8', deviceNo: '8'},
          //       {streamUrl: '9', deviceNo: '9'},
          //     ],
          //   }
          // };
          // 假数据结束

          let list = [];
          for (let i = 0; i < res.data.records.length; i++) {
            list.push(
                {
                  width: 510, //(宽度:非必传-默认600)
                  height: 275, //(高度:非必传-默认338)
                  url: res.data.records[i].streamUrl,
                  cameraIndexCode: res.data.records[i].deviceNo,
                }
            )
          }
          this.$set(this, 'videoList', list)
          this.$set(this, 'videoTotal', res.data.total);
          this.$nextTick(() => {
            setTimeout(function () {
              self.$set(self, 'videoType', true);
            }, 1000);
          })
        } catch (e) {
          console.error('VideoGrid:', e)
        }
      },
      changePage(delta) {
        this.videoQueryParams.page += delta
        this.videoInitialize()
      },
      //全屏开启-关闭轮播
      stopTime(cameraIndexCode) {
        this.$set(this, 'fullVideoProps', {cameraIndexCode: cameraIndexCode});
        this.$set(this, 'fullVideoType', true);
      },
      //全屏关闭-开启轮播
      outFullScreen() {
        let self = this;
        this.$set(this, 'fullVideoType', false);
        this.$set(this, 'fullVideoProps', {});
      },
    }
  }
</script>

<style lang="scss" scoped>
  .video-grid {
    height: 100%;
    display: flex;
    flex-direction: column;

    .panel-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }

  .video-count {
    font-size: 12px;
    color: $text-muted;
    font-weight: normal;
    margin-left: auto;
  }

  .grid-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
  }

  /* ---- Camera Frame ---- */
  .cam-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    animation: camEntrance 0.5s ease-out both;
  }

  @keyframes camEntrance {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .cam-inner {
    flex: 1;
    position: relative;
    background: rgba(6, 22, 56, 0.6);
    clip-path: polygon(
            0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
            100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
    );
    overflow: hidden;
    border: 1px solid rgba(72, 215, 255, 0.15);
    transition: all 0.3s ease;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(72, 215, 255, 0.12);
      clip-path: inherit;
      pointer-events: none;
      z-index: 2;
    }

    &::after {
      content: '';
      position: absolute;
      inset: -2px;
      background: conic-gradient(from 0deg, transparent 0%, rgba(72, 215, 255, 0.4) 10%, transparent 20%);
      animation: camFrameBorderFlow 6s linear infinite;
      clip-path: inherit;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .cam-frame:hover &::after {
      opacity: 1;
    }
  }

  @keyframes camFrameBorderFlow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Camera corner accents */
  .cam-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    z-index: 3;

    &::before, &::after {
      content: '';
      position: absolute;
      background: $accent;
      box-shadow: 0 0 4px $accent;
    }

    &.tl {
      top: 0;
      left: 0;
      &::before {
        top: 0;
        left: 0;
        width: 12px;
        height: 1px;
      }
      &::after {
        top: 0;
        left: 0;
        width: 1px;
        height: 12px;
      }
    }
    &.tr {
      top: 0;
      right: 0;
      &::before {
        top: 0;
        right: 0;
        width: 12px;
        height: 1px;
      }
      &::after {
        top: 0;
        right: 0;
        width: 1px;
        height: 12px;
      }
    }
    &.bl {
      bottom: 0;
      left: 0;
      &::before {
        bottom: 0;
        left: 0;
        width: 12px;
        height: 1px;
      }
      &::after {
        bottom: 0;
        left: 0;
        width: 1px;
        height: 12px;
      }
    }
    &.br {
      bottom: 0;
      right: 0;
      &::before {
        bottom: 0;
        right: 0;
        width: 12px;
        height: 1px;
      }
      &::after {
        bottom: 0;
        right: 0;
        width: 1px;
        height: 12px;
      }
    }
  }

  /* AI camera variant - orange accents */
  .ai-cam {
    .cam-corner::before, .cam-corner::after {
      background: $accent-orange;
      box-shadow: 0 0 4px $accent-orange;
    }

    .cam-inner {
      border-color: rgba(255, 176, 32, 0.2);

      &::after {
        background: conic-gradient(from 0deg, transparent 0%, rgba(255, 176, 32, 0.4) 10%, transparent 20%);
      }
    }

    .cam-scan-line {
      background: linear-gradient(180deg, transparent, rgba(255, 176, 32, 0.15), transparent);
    }
  }

  .cam-video-area {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .cam-icon {
    font-size: 30px;
    color: rgba(72, 215, 255, 0.12);
    z-index: 1;

    .ai-cam & {
      color: rgba(255, 176, 32, 0.12);
    }
  }

  .cam-scan-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgba(72, 215, 255, 0.08), transparent);
    animation: gridScan 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
  }

  @keyframes gridScan {
    0% {
      top: -40%;
    }
    50% {
      top: 100%;
    }
    50.01% {
      top: -40%;
    }
    100% {
      top: -40%;
    }
  }

  .cam-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 12px;
    background: rgba(6, 22, 56, 0.8);
    border-top: 1px solid rgba(72, 215, 255, 0.08);
    flex-shrink: 0;
  }

  .cam-name {
    color: $text-secondary;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cam-ai-badge {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    color: $accent-orange;
    background: rgba(255, 176, 32, 0.15);
    border: 1px solid rgba(255, 176, 32, 0.3);
    font-weight: 700;
  }

  .cam-status {
    font-size: 10px;
    font-weight: 600;

    &.online {
      color: $accent-green;
      animation: recBlink 1.5s ease-in-out infinite;
    }

    &.offline {
      color: $text-muted;
    }
  }

  @keyframes recBlink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
  }

  /* ---- Pagination ---- */
  .grid-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    flex-shrink: 0;
  }

  .page-btn {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: rgba(72, 215, 255, 0.06);
    border: 1px solid rgba(72, 215, 255, 0.15);
    color: $text-secondary;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    &:hover:not(:disabled) {
      border-color: $accent;
      color: $accent;
      box-shadow: 0 0 8px rgba(72, 215, 255, 0.2);
    }

    &:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
  }

  .page-info {
    font-size: 13px;
    color: $text-secondary;
    font-family: 'Courier New', monospace;
  }
</style>