yjhtgl-web/src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

<template>
  <div class="video-card">
    <div class="common-title gradient-text">视频监控</div>
    <div class="more-btn" @click="showVideoMonitorList">{{ '查看更多>>' }}</div>
    <div class="card-content video-list">
      <div v-for="(item, index) in listData" :key="index" class="video-box">
        <HKVideo :dot_data="item" autoplay />
        <div class="video-label">
          <span class="label">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
  <VideoMonitorEdit v-if="showListDialog" v-model="showListDialog" :lngLat="lngLat" />
</template>

<script lang="ts" setup name="VideoMonitor">
import { getVideoListByUser } from '@/api/videoMonitor';
import VideoMonitorEdit from './VideoMonitorEdit.vue';

const props = defineProps({
  longitude: Number,
  latitude: Number
});
let listData = ref([]);
let showListDialog = ref(false);
let lngLat = reactive({
  longitude: 110.925176,
  latitude: 21.678993
});
const initData = () => {
  lngLat.longitude = props.longitude ? props.longitude : 110.925176;
  lngLat.latitude = props.latitude ? props.latitude : 21.678993;
  getVideoListByUser({
    longitude: lngLat.longitude,
    latitude: lngLat.latitude,
    page: 1,
    pageSize: 4
  }).then((res) => {
    listData.value = res.rows;
  });
};
initData();

const showVideoMonitorList = () => {
  showListDialog.value = true;
};
</script>

<style lang="scss" scoped>
.video-card {
  width: 526px;
  height: 309px;
  background: url('@/assets/images/video/videoBox1.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  animation-name: slideLeft;
  animation-duration: 1.5s;
  .video-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 47px;
    padding-left: 25px;
    .video-box {
      width: 237px;
      height: 116px;
      margin-right: 13px;
      cursor: pointer;
      background: url('@/assets/images/video/videoBg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px 4px 5px 5px;
      &:nth-child(1),
      &:nth-child(2) {
        margin-bottom: 10px;
      }
      &:nth-child(2),
      &:nth-child(4) {
        margin-right: 0;
      }
      .video-label {
        position: absolute;
        bottom: 5px;
        right: 3px;
        z-index: 901;
        display: flex;
        .label {
          width: 186px;
          height: 22px;
          line-height: 22px;
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 5px 0 10px;
          color: #fff;
          background-color: rgba(18, 107, 248, 0.4);
          text-align: right;
        }
        &::before {
          content: '';
          width: 0;
          height: 0;
          border-bottom: 22px solid rgba(18, 107, 248, 0.4);
          border-left: 22px solid transparent;
        }
      }
    }
    :deep(.err_box) {
      align-items: flex-start;
      padding-top: 15px;
    }
  }
}
.more-btn {
  position: absolute;
  top: 22px;
  right: 8px;
  color: #00e8ff;
  font-size: 13px;
  cursor: pointer;
  z-index: 2;
}
</style>