fengjie-datascreen/src/views/monitor/components/trafficList.vue

<template>
  <div class="z-dialog">
    <el-dialog :title="props.type=='deal'?'已解除告警':'核心路段拥堵告警'" v-model="modelValue" align-center :modal="false" :show-close="false">
      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
	  <div class="no-data" v-if="cond&&!list.length">
		  {{props.type=='deal'?'暂无数据':'暂无拥堵告警'}}
	  </div>
	  <div v-else>
		  <ul class="list" >
		    <li
		      class="item"
		      v-for="(item, index) in list"
		      :key="index"
		    >
          <span> {{item.congestTailDesc}}{{item.direction}}发生{{item.extraEventStatus}}，平均车速{{item.speed}}KM/H</span>
          <span>{{timestampToTime(item.startTime)}}</span>
		    </li>
		  </ul>
	  </div>
    </el-dialog>
  </div>
  <video-dialog v-model="videoShow" :src="src" :isDiy="isDiy" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
  <image-dialog v-model="imageShow" :src="imgSrc"/>
</template>

<script setup>
  import { getTrafficEventsApi,getPreviewUrlSubApi } from '@/api/monitor'

  import primary from '@/assets/images/item-primary.png'

  import imageEmpty from '@/assets/images/imgloading.png'
  import pubSub from 'pubsub-js'

  let props = defineProps({
    type: {
      type: String,
      default: 'curr'
    },
    events: {
      type: String,
      default: ''
    },
  })
  let modelValue = defineModel()
  let isCollect = ref(0)
  let list = ref([])
  let hlsRefs = []
  let total = ref(0)
  let src = ref('')
  let imgSrc = ref('')
  let imageShow = ref(false)
  let cameraIndexCode = ref('')
  let videoShow = ref(false)
  let isDiy = ref(0)
  let params = reactive({
    pageNum: 1,
    pageSize: 6,
	businessScenicArea:'',
  })

  watch(
    () => modelValue.value,
    (val) => {
      if (val) {
		  params.pageNum = 1
		  cond.value = false
		  params.businessScenicArea = props.events
		  list.value = []
        setTimeout(() => {
          getVideoList()
        }, 1000)
      }
    }
  )
  const onVideoCollect = () => {
    pubSub.subscribe('videoCollect', () => {
      clearHlsRefs()
  	  getVideoList()
    })
  }
  const handleImage = (item) => {
    getVideoEventObjImgApi(item.objId).then(res=>{
      imgSrc.value = res.data.url
      imageShow.value = true
    });
  }
  const handleItem =  async (id) => {
    let {code,data} = await getPreviewUrlSubApi({
      type: 'hls',
      cameraIndexCode:id
    })
    if(code===200){
      src.value = data.url
      isCollect.value = data.isCollect
      isDiy.value = data.isDiy
      cameraIndexCode.value = id
      videoShow.value = true
    }
  }
  const timestampToTime = (timestamp)=>{
    var date = new Date(timestamp*1000);
    return date.toLocaleString();
  }
  const handleCollect = async (id, status) => {
    await postVideoCollectApi({
      cameraIndexCode:id,
      isCollect: status == 0 ? 1 : 0
    })
    clearHlsRefs()
    params.pageNum = 1
    getVideoList()
    pubSub.publish('videoCollect')
  }
  const handleClose = () => {
    clearHlsRefs()
    modelValue.value = false
  }
  const clearHlsRefs = () => {
    if (hlsRefs.length > 0) {
      hlsRefs.map((item) => {
        item.destroy()
      })
      hlsRefs = []
    }
  }
  const pageNumChange = () => {
	  cond.value = false
    clearHlsRefs()
    list.value = []
    getVideoList()
  }
  let cond = ref(false)
  const getVideoList = async () => {
    let res = await getTrafficEventsApi(props.type);
    list.value = res.data
	setTimeout(()=>{cond.value = true},1500)
  }

  onMounted(() => {
	  onVideoCollect()
  })
  onUnmounted(() => {})
</script>

<style scoped lang="scss">
  .z-dialog {
    :deep(.el-dialog) {
      width: vw(2100);
      padding: vw(8);
      background-image: url('@/assets/images/dialog-bg.png') !important;
      background-size: 100% 100%;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
    }
    :deep(.el-dialog__header) {
      padding-bottom: 0 !important;
      margin-top: vw(10);
      text-align: center;
    }
    :deep(.el-dialog__title) {
      color: #fff;
      font-weight: bold;
    }
  }
  .item-title{
    font-weight: 400;
    z-index: 99;
    height: vw(50);
    padding: vw(10);
    font-size: vw(24);
    color: #ffffff;
    position: absolute;
    left: 3%;
    background-image: url('@/assets/images/unfollow.png');
    background-size: 100% 100%;
  }
  .no-data{
	  height:vh(860);
	  line-height: vh(860);
	  text-align: center;
	  font-size:vw(30);
	  color:#02f9fa;
  }
  .cursorPointer{
    cursor: pointer
  }
  .list {
    overflow-y: auto;
    margin-top: vh(50);
    height: vh(590);
    /* 滚动条整体样式 */
    &::-webkit-scrollbar {
      width: vw(4); /* 滚动条的宽度 */
    }
    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background: 'transparent'; /* 轨道的背景色 */
    }
    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
      border-radius: 5px; /* 滑块的圆角 */
    }
    .item {
      height: vh(80);
      line-height: vh(80);
      font-weight: 400;
      font-size: vw(25);
      color: #f1f7ff;
      display: flex;
      justify-content: space-between;
      padding: 0 vw(10);
      &:nth-child(2n + 1) {
        background: linear-gradient(
                90deg,
                rgba(0, 150, 255, 0) 0%,
                rgba(0, 150, 255, 0.22) 100%
        );
      }
      & > div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap; /* 保证文本在一行内显示 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
      }
    }
  }
  .pagination {
    padding-top: vw(20);
    margin-right: vw(20);
    padding-bottom: vw(20);
    display: flex;
    justify-content: flex-end;
  }
  .close {
    cursor: pointer;
    position: absolute;
    right: vw(20);
    top: vw(20);
    width: vw(60);
    z-index: 9999;
  }
</style>