类型：开发

描述：
2025-11-26 02:37:32 +08:00
parent 7edb14c031
commit caa474a5a9
9 changed files with 410 additions and 33 deletions
--- a/src/api/monitor.js
+++ b/src/api/monitor.js
@@ -6,9 +6,9 @@ export function getTrafficEventsApi() {
    method: 'get'
  })
 }
-export function getVideoEventApi(scenicSpotId) {
+export function getVideoEventApi(scenicSpotId,type) {
  return request({
-    url: '/fjtcc-api/api/largeScreen/monitor/videoEvents?scenicSpotId='+scenicSpotId,
+    url: '/fjtcc-api/api/largeScreen/monitor/videoEvents?type='+type+'&scenicSpotId='+scenicSpotId,
    method: 'get'
  })
 }
--- a/src/components/monitor/index.vue
+++ b/src/components/monitor/index.vue
@@ -8,7 +8,7 @@
          v-for="(item, index) in navList"
          :key="index"
        >
-          {{ item.dictLabel }}
+          {{ item }}
        </div>
      </div>
    </div>
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -610,11 +610,11 @@
          }
          &-tag--important {
            @extend .item-tag;
-            background: #feae00;
+            background: #d9011b;
          }
          &-tag--warn {
            @extend .item-tag;
-            background: #d9011b;
+            background: #feae00;
          }
          &-tag--normal {
            @extend .item-tag;
--- a/src/views/hotel/components/video-box.vue
+++ b/src/views/hotel/components/video-box.vue
@@ -243,11 +243,14 @@
 	    isCollect: status == 0 ? 1 : 0
 	  })
 	  if (status == 0) {
+      if(thisVideo.value){
        thisVideo.value.isCollect=1
+      }
 	    videoList.value[index].isCollect = 1
-
 	  } else {
+      if(thisVideo.value){
        thisVideo.value.isCollect=0
+      }
 	    videoList.value[index].isCollect = 0
 	  }
 	  pubSub.publish('videoCollect', id)
@@ -394,6 +397,26 @@
 	  videoLog.value = 2
 	  cameraIndexCode.value = code
 	  setTimeout(() => {
+      if(url.startsWith('ws')){
+        const player = mpegtsjs.createPlayer({
+          url: url,
+          type: 'flv',
+          isLive: true,
+          hasAudio: false
+        })
+        player.attachMediaElement(videoRef.value)
+        player.load()
+        player.play()
+
+        // 错误处理和重连机制
+        player.on('error', (err) => {
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            player.load()
+            player.play()
+          }, 3000)
+        })
+      }else{
        hlsRef = new Hls({
          maxBufferLength: 10, // 最大缓冲长度（秒）
          maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -404,6 +427,8 @@
        hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
          videoRef.value.play()
        })
+      }
+
 	    if (type == 100) initVideo()
 	  }, 1000)
 	}
@@ -412,6 +437,26 @@
 	  nextTick(() => {
 	    videoList.value.forEach(async (item, index) => {
 	      const video = document.getElementById(`monitorVideo${index}`)
+        if(item.hlsUrl.startsWith('ws')){
+          var player = mpegtsjs.createPlayer({
+            url: item.hlsUrl,
+            type: 'flv',
+            isLive: true,
+            hasAudio: false
+          })
+          player.attachMediaElement(video)
+          player.load()
+          player.play()
+
+          // 错误处理和重连机制
+          player.on('error', (err) => {
+            // 3 秒后尝试重新加载
+            setTimeout(() => {
+              player.load()
+              player.play()
+            }, 3000)
+          })
+        }else{
          const hls = new Hls({
            maxBufferLength: 10, // 最大缓冲长度（秒）
            maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -423,6 +468,8 @@
            video.play()
          })
          hlsRefs.push(hls)
+        }
+
 	    })
 	  })
 	}
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -10,9 +10,8 @@
              :key="index"
              @click="handleNav(index)"
          >
-            <!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> -->
            <span>
-			      {{ item.dictLabel }}
+			      {{ item }}
 			    </span>
          </div>
          <div
@@ -518,7 +517,7 @@ const getVideoList = async (val) => {
    if (val == 3) {
      params.businessVideoDisplayPosition = ''
    } else {
-      params.businessVideoDisplayPosition = navList.value[current.value].dictValue
+      params.businessVideoDisplayPosition = navList.value[current.value]
    }

    let res = await getVideoListApi(params)
--- a/src/views/scenic/components/box-2.vue
+++ b/src/views/scenic/components/box-2.vue
@@ -119,10 +119,10 @@
      </div>
      <div class="box-2">
        <Title1 title="异常信息 " />
-		<!-- @click="handleToWorkOrder" -->
        <div style="cursor: pointer;" class="count-box flex">
          <count-item
            v-for="item in headList"
+            @click="showAbnormalList(item)"
            :label="item.name"
            :count="item.count"
            :type="item.type"
@@ -347,12 +347,14 @@
  />
  <traMap :longitude="longitude" :latitude="latitude" v-model="traMapShow"></traMap>
  <all-list :events="scenicSpotId" v-model="allShow" />
+  <warn-list v-model="warnShow" :type="warnType" :scenicSpotId="scenicSpotId" />
 </template>

 <script setup>
  import countup from 'vue-countup-v3'
  import PubSub from 'pubsub-js'
  import allList from './allList'
+  import warnList from './warnList.vue'
  import carIcon from '@/assets/images/car.png'
  import carStopIcon from '@/assets/images/car-stop.png'
  import carOfflineIcon from '@/assets/images/car-offline.png'
@@ -381,6 +383,7 @@
  //景区排队
  let allShow = ref(false)
  let events = ref({})
+  let warnType = ref("curr")

  const handleLineUp = (item)=>{
  	  allShow.value = true
@@ -407,6 +410,13 @@
  //查看交通信息
  let latitude = ref('')
  let longitude = ref('')
+  let warnShow = ref(false)
+  const showAbnormalList = function (item){
+    if(item.name=='今日异常总数'){
+      warnType.value = 'all'
+    }
+    warnShow.value = true;
+  }
  const hanldeLookMap = () => {
    router.push('/traffic')
    // traMapShow.value = true
--- a/src/views/scenic/components/warnList.vue
+++ b/src/views/scenic/components/warnList.vue
@@ -0,0 +1,311 @@
+<template>
+  <div class="z-dialog">
+    <el-dialog title="异常点位告警" 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">
+		  暂无异常情况
+	  </div>
+	  <div v-else>
+		  <ul class="list" >
+		    <li
+		      class="item"
+		      :style="{ backgroundImage: `url(${primary})` }"
+		      v-for="(item, index) in list"
+		      :key="index"
+		      @click="handleImage(item)"
+		    >
+		      <div
+			  class="item-title-box"
+			 ><div class="item-title">{{ item.analyzeTypeName}}</div><div class="item-num">{{ item.number}}人</div></div>
+			  <img style="width: 100%;height: 100%;" :src="item.imgurl || imageEmpty">
+		      <p style="display: flex;justify-content: space-between;">
+		        <span> {{ item.cameraName || item.cameraIndexCode }}</span>
+            <span class="cursorPointer" @click.stop="handleItem(item.cameraIndexCode)">查看监控></span>
+		      </p>
+		    </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 { getVideoEventApi,getVideoEventObjImgApi,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'
+    },
+    scenicSpotId: {
+      type: String,
+      default: ''
+    },
+    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 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 getVideoEventApi(props.scenicSpotId,props.type);
+    list.value = res.data
+	setTimeout(()=>{cond.value = true},1500)
+    nextTick(() => {
+      list.value.forEach(async (item, index) => {
+        getVideoEventObjImgApi(item.objId).then(res=>{
+          list.value[index].imgurl = res.data.url
+        });
+      })
+    })
+  }
+
+  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-box{
+    font-weight: 400;
+    z-index: 99;
+    height: vw(50);
+
+    font-size: vw(24);
+    color: #ffffff;
+    position: absolute;
+    left: 3%;
+
+    .item-title{
+      padding: vw(10);
+      display: inline-block;
+      background-image: url('@/assets/images/unfollow.png');
+      background-size: 100% 100%;
+    }
+    .item-num{
+      margin-left: vw(6);
+      padding: vw(5);
+      display: inline-block;
+      color: #ffffff;
+      background-color:red;
+      border-radius: 15%;
+      font-weight: bolder;
+    }
+  }
+  .no-data{
+	  height:vh(860);
+	  line-height: vh(860);
+	  text-align: center;
+	  font-size:vw(30);
+	  color:#02f9fa;
+  }
+  .cursorPointer{
+    cursor: pointer
+  }
+  .list {
+    //margin-top: vw(5);
+    gap: vw(8);
+    height: vh(860);
+    overflow: auto;
+    /* 滚动条整体样式 */
+    &::-webkit-scrollbar {
+      width: vw(4); /* 滚动条的宽度 */
+    }
+    /* 滚动条轨道 */
+    &::-webkit-scrollbar-track {
+      background: 'transparent'; /* 轨道的背景色 */
+    }
+    /* 滚动条滑块 */
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+      border-radius: 5px; /* 滑块的圆角 */
+    }
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+	padding:vw(10);
+    .item {
+      position: relative;
+      width: 33%;
+      height: vh(400);
+      padding: vw(12);
+	  margin-top:vh(20);
+      box-sizing: border-box;
+      background-image: url('@/assets/images/item-primary.png');
+      background-size: 100% 100%;
+      &-video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      > p {
+        position: absolute;
+        bottom: vw(12);
+        width: calc(100% - vw(24));
+        padding: vw(10) 0;
+        background: rgba(4, 30, 69, 0.72);
+        > span {
+          padding-left: vw(10);
+          font-weight: 400;
+          font-size: vw(14);
+          line-height: vw(14);
+          color: #ffffff;
+        }
+      }
+      &-unfollow {
+        cursor: pointer;
+        display: none;
+        position: absolute;
+        right: vw(4);
+        top: vw(4);
+        z-index: 99;
+        width: vw(64);
+        height: vw(30);
+        text-align: center;
+        line-height: vw(30);
+        font-weight: 400;
+        font-size: vw(12);
+        color: #ffffff;
+        background-image: url('@/assets/images/unfollow.png');
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .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>
--- a/src/views/scenic/index.vue
+++ b/src/views/scenic/index.vue
@@ -144,6 +144,13 @@
              scenicSpotId: scenicSpotId.value
            })
        )
+        sendMessage(
+            JSON.stringify({
+              action: 'start',
+              type: 'secureData',
+              scenicSpotId: scenicSpotId.value
+            })
+        )
        sendMessage(
            JSON.stringify({
              action: 'start',
--- a/src/views/workOrder/components/box-1.vue
+++ b/src/views/workOrder/components/box-1.vue
@@ -273,6 +273,7 @@ import {getDetailApi, getListApi} from '@/api/workOrder'
        align-items: center;
        justify-content: flex-start;
        padding: vh(8) vh(10);
+        font-size: vw(14);
        .label {
          width: vw(60);
          height: vh(24);
@@ -307,6 +308,8 @@ import {getDetailApi, getListApi} from '@/api/workOrder'
          margin-left: vw(30);
        }
        .btn{
+          font-size: vw(18);
+          font-weight: bolder;
          color: #2380fb;
          cursor: pointer;
        }