sl-sfy-safety/src/views/security-confidentiality/overview/components/SecurityPosition.vue

<template>
  <div class="outer-person-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">治安重点部位监控</span>
      <el-tooltip effect="dark" placement="left">
        <span class="position-count">{{ positionCameraCount }}</span>
        <template #content>
          <span>共{{ positionCameraCount }}个监控位置</span>
        </template>
      </el-tooltip>
    </div>
    <div class="monitor-area">
      <div v-if="securityPositionCameraInfo.length === 0" class="empty-style">
        <img class="empty-img" src="@/assets/images/empty-2.png" alt="" />
        <span>暂无治安重点部位监控</span>
      </div>
      <div v-for="(item, index) in securityPositionCameraInfo" :key="index" class="monitor-item">
        <img
          v-if="!getCameraUrl(item)"
          src="@/assets/images/disaster-overview/no-camera-url.png"
          alt=""
          class="monitor-no-url"
        />
        <div class="monitor-video">
          <LiveVideo :url="getCameraUrl(item)" :poster="getCameraImg(item)" :id="`monitor-livevideo-${index}`" />
          <img
            src="@/assets/images/disaster-overview/full-screen.png"
            alt=""
            class="full-screen"
            @click="isFullScreen ? exitFullscreen() : fullScreen(`monitor-livevideo-${index}`, 'overview-monitor')"
          />
        </div>
        <div class="monitor-info">
          <img src="@/assets/images/disaster-overview/camera.png" alt="" />
          <span class="camera-name" :title="item.positionName + '-' + item.name"
            >{{ item.positionName }}-{{ item.name }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, ref } from 'vue';
  import { storeToRefs } from 'pinia';
  import screenfull from 'screenfull';
  import urlJoin from 'url-join';
  import LiveVideo from '@/components/live/LiveVideo.vue';
  import { userSplitScreenFullScreen } from '@/store/modules/userSplitScreenFullScreen';
  import { CameraInfo } from '@/api/disaster-overview';
  import { getSecurityPositionList } from '@/api/security-confidentiality-position';

  const { isFullScreen, curFullScreenType } = storeToRefs(userSplitScreenFullScreen());
  const { fullScreen, exitFullscreen } = userSplitScreenFullScreen();

  interface SecurityPositionCameraInfo extends CameraInfo {
    positionName: string;
  }

  const positionCameraCount = ref(0);
  const securityPositionCameraInfo = ref<SecurityPositionCameraInfo[]>([]);

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

  const getCameraUrl = (val: CameraInfo) => {
    if (val.pushStreamDTO && val.pushStreamDTO.videoUrls) {
      const videoUrl = val.pushStreamDTO.videoUrls.pushstreamIp;
      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;
    }
    return '';
  };

  const getCameraImg = (val: CameraInfo) => {
    if (val.pushStreamDTO && val.pushStreamDTO.imageUrl) {
      return val.pushStreamDTO.imageUrl;
    }
    return '';
  };

  onMounted(() => {
    getSecurityPositionList({
      groupName: '',
      cameraName: '',
    }).then((res) => {
      securityPositionCameraInfo.value = res.flatMap((item) => {
        return item.children.map((child) => ({
          ...child,
          positionName: item.groupName,
        }));
      });
      positionCameraCount.value = securityPositionCameraInfo.value.length;
    });
  });

  window.onresize = () => {
    if (!screenfull.isFullscreen) {
      isFullScreen.value = false; //判断退出全屏，进行赋值
      curFullScreenType.value = 'single';
    }
  };

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

<style scoped lang="scss">
  .container-title {
    height: 24px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #000000;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
      margin-right: 10px;
    }

    .title {
      margin-right: 12px;
    }
  }

  .position-count {
    font-size: 18px;
    color: #1777ff;
    text-shadow: 0 0 10px #1777ff;
  }

  .outer-person-container {
    width: 100%;
    height: 100%;
    padding-top: 14px;
  }

  .monitor-area {
    width: 100%;
    height: calc(100% - 48px);
    overflow: auto;
    padding: 0 16px;
    margin-top: 10px;

    .monitor-item:last-child {
      margin-bottom: 0;
    }

    .monitor-item {
      margin-bottom: 10px;

      .monitor-info {
        display: flex;
        align-items: center;

        .camera-name {
          margin-left: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 100%;
          font-size: 14px;
          color: #333333;
        }
      }

      .monitor-no-url {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .monitor-video {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .full-screen {
        position: absolute;
        bottom: 10px;
        right: 5px;
        cursor: pointer;
      }
    }

    .empty-style {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.5);

      .empty-img {
        width: 100%;
        object-fit: contain;
      }
    }
  }
</style>