sl-sfy-safety/src/views/production-safety/risk-identification-and-control/key-site-monitor-manage/VideosGridBase/CamerasGrid.vue

<template>
  <div class="main-grid" id="main-grid">
    <div v-if="cameraInPlay.some((x) => x.url !== '')" class="video-grid" :class="setGridSize()" id="video-grid">
      <div :id="`video-${index}`" v-for="(camera, index) in props.cameraInPlay" :key="camera.id" class="video-box">
        <div class="LiveVideo" v-if="camera.url !== ''">
          <LiveVideo
            :url="getWsUrl(camera.url)"
            :poster="camera.imageUrl"
            @dblclick="isFullScreen ? exitFullscreen() : fullScreen(`video-${index}`, 'single')"
          />
        </div>

        <div class="emptyCameraGrid" v-else>
          <div class="emptyCameraImgAndText">
            <img class="emptyCameraGridImg" src="@/assets/icons/nine-square-grid/cameraEmpty.png" />
            <div>暂未接入相机</div>
          </div>
        </div>

        <div class="video-controlBar" v-if="camera.url && !isFullScreen">
          <div class="cameraName">{{ camera.name }}</div>
          <div class="controlIconContainer">
            <Delete class="controlIcon fullScreen" @click="handleDeleteCamera(camera)" />
          </div>
        </div>
      </div>
    </div>

    <div class="allCameraEmpty" v-else>
      <img class="cameraEmptyImg" src="@/assets/icons/nine-square-grid/cameraEmpty.png" />
      <div>暂未接入相机</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onUnmounted } from 'vue';
  import { storeToRefs } from 'pinia';
  import LiveVideo from '@/components/live/LiveVideoFlv.vue';
  import screenfull from 'screenfull';
  import { Delete } from '@element-plus/icons-vue';
  import urlJoin from 'url-join';
  import { useCameraGroupList } from '@/store/modules/useCameraGroupList';
  import { userGridType } from '@/store/modules/userGridType';
  import { GridType } from '@/views/disaster/monitor/splitScreenRetrieval/type';
  import { type Camera, CameraInPlay } from '../type';
  import { userSplitScreenFullScreen } from '@/store/modules/userSplitScreenFullScreen';
  import { ElMessageBox } from 'element-plus';

  const props = defineProps<{ cameraInPlay: CameraInPlay[] }>();
  const { currentGrid } = storeToRefs(userGridType());
  const { isFullScreen, curFullScreenType } = storeToRefs(userSplitScreenFullScreen());

  const { playingGroup } = storeToRefs(useCameraGroupList());
  const { deleteCameraInPlaylist } = useCameraGroupList();
  const { fullScreen, exitFullscreen } = userSplitScreenFullScreen();

  function handleDeleteCamera(camera: Camera) {
    ElMessageBox.confirm('删除后，相机数据不可恢复，是否确认删除？', '提示', {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      customClass: 'customMessageBox--warning',
    })
      .then(() => {
        deleteCameraInPlaylist(playingGroup.value!, camera);
      })
      .catch(() => {
        return;
      });
  }

  const isHttps = () => {
    return window.location.protocol.startsWith('https');
  };

  const getWsUrl = (videoUrl: string) => {
    if (!videoUrl) return '';
    const protocol = isHttps() ? 'wss' : 'ws';
    // 如果是绝对地址
    if (videoUrl.startsWith('http')) {
      // 如果是https的话，websocket要用wss
      return videoUrl.replace('http', protocol);
    }
    const u = urlJoin(
      `${protocol}://`,
      window.location.host,
      window.location.pathname === '/' ? '' : window.location.pathname,
      videoUrl,
    );

    return u;
  };

  // 根据当前宫格数设置每个宫格宽高
  const setGridSize = () => {
    if (currentGrid.value === GridType.oneGrid) return 'oneGrid';
    if (currentGrid.value === GridType.fourGrids) return 'fourGrid';
    if (currentGrid.value === GridType.nineGrids) return 'nineGrids';
    if (currentGrid.value === GridType.sixteenGrids) return 'sixteenGrids';
  };

  // 全屏之后，无法监听到键盘按键的点击事件，所以只能监听窗口的变化进行判断
  window.onresize = () => {
    if (!screenfull.isFullscreen) {
      isFullScreen.value = false; //判断退出全屏，进行赋值
      curFullScreenType.value = 'single';
    }
  };

  onUnmounted(() => {
    window.onresize = null;
  });
</script>

<style lang="scss" scoped>
  .main-grid {
    height: calc(100% - 54px);
    background: #f4f7ff;
    padding: 0 10px 10px 10px;
    border-radius: 0 0 4px 4px;
    .video-grid {
      height: 100%;
      display: grid;
      gap: 4px;

      .video-box {
        position: relative;
        background: #fff;
        .LiveVideo {
          width: 100%;
          height: 100%;
          video {
            object-fit: fill;
          }
        }
        &:hover {
          .video-controlBar {
            display: flex;
          }
        }
        .emptyCameraGrid {
          height: 100%;
          font-size: 12px;
          color: #ebedf1;
          margin: auto;
          text-align: center;
          .emptyCameraImgAndText {
            margin: auto;
            color: #999999;
            .emptyCameraGridImg {
              height: 50%;
              width: 40%;
            }
          }
        }
        .video-controlBar {
          position: absolute;
          display: none;
          bottom: 10px;
          left: 0;
          width: 100%;
          justify-content: space-between;
          padding: 0 10px;

          .video-name {
            background-color: rgba(255, 255, 255, 0.7);
            padding: 0px 5px;
            border-radius: 5px;
            font-size: 12px;
            color: black;
          }
          .controlIconContainer {
            display: flex;
            justify-content: space-around;
            align-items: center;

            border-radius: 16px;
            padding: 0 16px;
            background: rgba(0, 0, 0, 0.4);
            .controlIcon {
              height: 20px;
              color: #fff;
            }
            .fullScreen {
              height: 18px;
              width: 18px;
            }
            .controlIcon:hover {
              color: #1777ff;
              cursor: pointer;
            }
          }
        }
        .videoDisconnected {
          height: 20%;
          width: 30%;
          position: absolute;
          color: white;
          font-size: 24px;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
        }
      }
      .selectedVideo {
        outline: 4px;
        outline-style: solid;
        outline-color: #a1a2a2;
      }
    }

    .oneGrid {
      grid-template-columns: repeat(1, 100%);
      grid-template-rows: repeat(1, 100%);
    }

    .fourGrid {
      grid-template-columns: repeat(2, calc(50% - 2px));
      grid-template-rows: repeat(2, calc(50% - 2px));
    }

    .nineGrids {
      grid-template-columns: repeat(3, calc(33.3% - 2px));
      grid-template-rows: repeat(3, calc(33.3% - 2px));
    }

    .sixteenGrids {
      gap: 2px;
      grid-template-columns: repeat(4, calc(25% - 1px));
      grid-template-rows: repeat(4, calc(25% - 1px));
    }

    .allCameraEmpty {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: auto;
      color: #999999;
      .cameraEmptyImg {
        height: 350px;
        width: 350px;
      }
    }
  }

  .cameraName {
    border-radius: 16px;
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
  }
</style>