feat：完善功能

2025-02-26 22:18:09 +08:00
parent 5bdb5ea5c6
commit 01e3aabbfc
9 changed files with 456 additions and 108 deletions
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -50,7 +50,7 @@
          class="video-item"
          v-for="(item, index) in videoList"
          :key="index"
-          @click="handleItemVideo(item.hlsUrl, 100)"
+          @click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode)"
        >
          <div class="video-item__inner">
            <div
@@ -73,7 +73,7 @@
              autoplay
              :controls="false"
            >
-              <source src="" type="application/x-mpegURL" />
+              <source type="application/x-mpegURL" />
            </video>
            <p class="video-item__title--primary">
              {{ item.cameraName || item.cameraIndexCode }}
@@ -84,8 +84,9 @@
      <div class="pagination">
        <el-pagination
          v-model:current-page="params.pageNum"
-          background
+          :page-size="params.pageSize"
          :total="total"
+          background
          layout="prev, pager, next"
          @current-change="currentChange"
        />
@@ -94,16 +95,28 @@

    <div v-if="videoLog == 2" class="video-detail">
      <div class="video-detail__wrapper">
-        <video
-          class="video-detail__video"
-          ref="videoRef"
-          muted
-          autoplay
-          controls
-          style="object-fit: cover"
-        >
-          <source src="" type="application/x-mpegURL" />
+        <video class="video-detail__video" ref="videoRef" muted autoplay controls>
+          <source type="application/x-mpegURL" />
        </video>
+        <div class="action-box">
+          <div class="action-item">
+            <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
+            <span>聚焦</span>
+            <img src="@/assets/images/minus.png" title="焦距变小" @click="handleAction(Z00M_OUT)" />
+          </div>
+          <div class="action-item">
+            <img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" />
+            <img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" />
+            <img
+              class="pause"
+              src="@/assets/images/pause.png"
+              title="停止操作"
+              @click="handleAction(STOP)"
+            />
+            <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
+            <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
+          </div>
+        </div>
      </div>
      <div class="video-right">
        <div class="flex justify-between">
@@ -118,7 +131,7 @@
            class="item"
            v-for="(item, index) in videoList"
            :key="index"
-            @click="handleItemVideo(item.hlsUrl, 101)"
+            @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo)"
          >
            <div>
              <p class="item-title--primary">
@@ -144,18 +157,29 @@
 </template>

 <script setup>
-  import { getVideoListApi, postRefreshApi, getPreviewUrlApi } from '@/api/home'
+  import { getVideoListApi, getPreviewUrlApi } from '@/api/home'
  import {
    getVideoTypeApi,
    getVideoRegionsApi,
    postVideoRemainApi,
+    postVideoControlApi,
    postVideoCollectApi
  } from '@/api/monitor'

  import { debounce } from 'lodash'
-  import PubSub from 'pubsub-js'
+  import pubSub from 'pubsub-js'
  import Hls from 'hls.js'

+  const Z00M_IN = 'ZOOM_IN' // 焦距变大
+  const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+  const UP = 'UP' // 上转
+  const DOWN = 'DOWN' // 下转
+  const LEFT = 'LEFT' // 左转
+  const RIGHT = 'RIGHT' // 右转
+  const STOP = 'STOP' // 停止操作
+  let ACTION = '0'
+
+  let command = ref('')
  let videoList = ref([])
  let navList = ref([])
  let current = ref(0)
@@ -169,6 +193,7 @@
  let loading = ref(false)
  let total = ref(0)
  let cameraName = ref('')
+  let cameraIndexCode = ref('')
  let params = reactive({
    pageNum: 1,
    pageSize: 6,
@@ -176,6 +201,7 @@
    businessVideoDisplayPosition: ''
  })
  let hlsRefs = []
+  let hlsRef = null
  // const postVideoRemain = async () => {
  //   setInterval(() => {
  //     postVideoRemainApi({
@@ -185,6 +211,7 @@
  // }

  const initVideo = () => {
+    clearHlsRefs()
    nextTick(() => {
      videoList.value.forEach(async (item, index) => {
        const video = document.getElementById(`monitorVideo${index}`)
@@ -205,12 +232,22 @@
  const onInput = debounce((e) => {
    getVideoRegions()
  }, 500)
+  const clearHlsRefs = () => {
+    if (hlsRefs.length > 0) {
+      hlsRefs.map((item) => {
+        item.destroy()
+      })
+      hlsRefs = []
+    }
+  }
  const currentChange = (e) => {
+    clearHlsRefs()
    videoList.value = []
    getVideoList()
  }
  const handleNav = (e) => {
    if (current.value == e) return
+    clearHlsRefs()
    videoLog.value = 1
    params.pageNum = 1
    videoList.value = []
@@ -220,24 +257,46 @@
  }
  const handleBack = () => {
    videoLog.value = 1
+    hlsRef.destroy()
    initVideo()
  }
-  const handleItemVideo = (url, type) => {
+  const handleItemVideo = (url, type, code) => {
    videoLog.value = 2
+    cameraIndexCode.value = code
    setTimeout(() => {
-      const hls = new Hls({
+      hlsRef = new Hls({
        maxBufferLength: 10, // 最大缓冲长度（秒）
        maxMaxBufferLength: 15, // 缓冲区长度的上限
        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
      })
-      hls.loadSource(url)
-      hls.attachMedia(videoRef.value)
-      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      hlsRef.loadSource(url)
+      hlsRef.attachMedia(videoRef.value)
+      hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
        videoRef.value.play()
      })
      if (type == 100) initVideo()
    }, 1000)
  }
+  const handleAction = async (e) => {
+    if (e == STOP) {
+      ACTION = '1'
+    } else {
+      ACTION = '0'
+      command.value = e
+    }
+    await postVideoControlApi({
+      action: ACTION,
+      command: command.value,
+      cameraIndexCode: cameraIndexCode.value
+    })
+    if (e == STOP) {
+      command.value = ''
+    }
+    ElMessage({
+      message: '操作成功',
+      type: 'success'
+    })
+  }
  const handleRegions = (e) => {
    regionList.value[e].show = !regionList.value[e].show
  }
@@ -250,7 +309,7 @@
    videoSrc.value = res.data.url
  }
  const handleCollect = async (id, status, index) => {
-    let res = await postVideoCollectApi({
+    await postVideoCollectApi({
      id,
      isCollect: status == 0 ? 1 : 0
    })
@@ -259,6 +318,7 @@
    } else {
      videoList.value[index].isCollect = 0
    }
+    pubSub.publish('videoCollect', id)
  }
  const getVideoList = async () => {
    try {
@@ -269,7 +329,6 @@
      total.value = res.total
      if (res.data.length > 0) {
        videoList.value = res.data
-        console.log(videoList.value, 'videoList.value')
        nextTick(() => {
          videoList.value.forEach(async (x, index) => {
            const video = document.getElementById(`monitorVideo${index}`)
@@ -339,7 +398,7 @@
    }
  }
  const onMonitorChange = () => {
-    monitorChange = PubSub.subscribe('monitorChange', (res, data) => {
+    monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
      params.businessScenicArea = data.scenicSpotId
      params.pageNum = 1
      videoList.value = []
@@ -354,17 +413,42 @@
    onMonitorChange()
  })
  onUnmounted(() => {
-    // 释放hls实例
-    if (hlsRefs.length > 0) {
-      hlsRefs.map((item) => {
-        item.destroy()
-      })
-    }
-    PubSub.unsubscribe(monitorChange)
+    clearHlsRefs()
+    pubSub.unsubscribe(monitorChange)
  })
 </script>

 <style lang="scss" scoped>
+  .action {
+    &-box {
+      margin-top: vh(16);
+      gap: vw(20);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    &-item {
+      padding: vw(16);
+      display: flex;
+      align-items: center;
+      background: #0a4190;
+      border-radius: vw(8);
+      > img {
+        cursor: pointer;
+        width: vw(34);
+        height: auto;
+      }
+      > span {
+        margin: 0 vw(16);
+        font-weight: 400;
+        font-size: vw(16);
+        color: #ffffff;
+      }
+      .pause {
+        margin: 0 vw(10);
+      }
+    }
+  }
  //背景色设置为透明
  :deep(.el-input__wrapper) {
    background-color: rgba(0, 0, 0, 0);
@@ -625,6 +709,7 @@
      width: 100%;
      height: vh(406);
      object-fit: cover;
+      // background-color: #000;
    }
    &-detail {
      margin-left: vw(10);
@@ -655,7 +740,9 @@
    }
    &-detail__video {
      width: 100%;
-      height: vh(880);
+      height: vh(820);
+      object-fit: contain;
+      background-color: #000;
    }
    &-right {
      margin-left: vw(8);
--- a/src/views/scenic/components/big-map.vue
+++ b/src/views/scenic/components/big-map.vue
@@ -23,12 +23,11 @@
              :key="index"
              @click="handleTab(index)"
            >
-              {{ item.label }}({{ item.value }})
+              {{ item.label }}({{ item.number }})
            </li>
          </ul>
          <ul class="list">
            <li
-              v-if="active == 0"
              class="item"
              :class="{ item__active: current === index }"
              v-for="(item, index) in list"
@@ -50,7 +49,7 @@
                </div>
              </div>
            </li>
-            <li
+            <!-- <li
              v-if="active == 1"
              class="item"
              :class="{ item__active: current === index }"
@@ -118,7 +117,7 @@
                >
                </div>
              </div>
-            </li>
+            </li> -->
          </ul>
        </div>
        <div id="big-car-ship" class="big-car-ship" />
@@ -128,7 +127,7 @@
 </template>

 <script setup>
-  import { getGpsListApi } from '@/api/scenic'
+  import { getGpsListApi, getGpsStatusListApi } from '@/api/scenic'

  import closeIcon from '@/assets/images/close.png'
  import carIcon from '@/assets/images/car.png'
@@ -168,7 +167,6 @@
  let lng = ref('')
  let scenicSpotId = ref('')
  let keyword = ref('')
-  let status = ref('')
  let active = ref(0)
  let current = ref('')
  let scenicChange = null
@@ -181,24 +179,25 @@
  let tabs = ref([
    {
      label: '所有',
-      value: '0'
+      value: '',
+      number: 0
    },
    {
-      label: '在线',
-      value: '0'
+      label: '行驶',
+      value: '行驶',
+      number: 0
+    },
+    {
+      label: '静止',
+      value: '静止',
+      number: 0
    },
    {
      label: '离线',
-      value: '0'
-    },
-    {
-      label: '未启用',
-      value: '0'
+      value: '离线',
+      number: 0
    }
  ])
-  let onlineList = ref([])
-  let offlineList = ref([])
-  let staticList = ref([])

  watch(
    () => modelValue.value,
@@ -380,6 +379,7 @@
  const handleTab = (index) => {
    if (active.value == index) return
    active.value = index
+    getGpsList()
  }

  const handleClose = () => {
@@ -393,18 +393,18 @@

  const getGpsList = async () => {
    let res = await getGpsListApi({
-      scenicSpotId: scenicSpotId.value,
      keyword: keyword.value,
-      status: status.value
+      scenicSpotId: scenicSpotId.value,
+      status: tabs.value[active.value].value
    })
-    list.value = res.data
-    onlineList.value = res.data.filter((item) => item.status == '在线')
-    offlineList.value = res.data.filter((item) => item.status == '离线')
-    staticList.value = res.data.filter((item) => item.status == '未启用')
-    tabs.value[0].value = res.data.length
-    tabs.value[1].value = onlineList.value.length
-    tabs.value[2].value = offlineList.value.length
-    tabs.value[3].value = staticList.value.length
+    list.value = res.data.list
+    let statusRes = await getGpsStatusListApi({
+      scenicSpotId: scenicSpotId.value
+    })
+    tabs.value[0].number = statusRes.data['全部']
+    tabs.value[1].number = statusRes.data['行驶']
+    tabs.value[2].number = statusRes.data['静止']
+    tabs.value[3].number = statusRes.data['离线']
  }

  const onInput = debounce((e) => {
--- a/src/views/traffic/components/box-2.vue
+++ b/src/views/traffic/components/box-2.vue
@@ -3,7 +3,7 @@
    <ul class="nav">
      <li
        class="nav-item"
-        :class="{ active: current == index }"
+        :class="{ active: current === index }"
        v-for="(item, index) in routerList"
        :key="index"
        @click="handleNav(item, index)"
@@ -11,20 +11,11 @@
        {{ item.name }}
      </li>
    </ul>
+
    <div id="traffic-map" :class="[routers.length == 0 ? 'traffic-map-big' : 'traffic-map']" />
-    <div class="map-box">
-      <!-- <div class="video-list">
-        <div class="li">
-          <vue3VideoPlay v-bind="options" />
-        </div>
-        <div class="li">
-          <vue3VideoPlay v-bind="options" />
-        </div>
-        <div class="menu">查看更多</div>
-      </div> -->
-    </div>
+
    <div v-if="routers.length > 0" class="list">
-      <div class="item" v-for="(item, index) in routers" :key="index">
+      <div class="item" v-for="(item, index) in routers" :key="index" @click="handleRouter(item)">
        <div class="header">
          <div class="header-left">
            <img src="@/assets/images/work-icon-xl-1.png" />
@@ -49,7 +40,7 @@
              <img src="@/assets/images/t-icon-1.png" alt="" />拥堵距离
            </div>
            <div class="statistics-item__value flex">
-              {{item.congestLength}}
+              {{ item.congestLength }}
              <span>km</span>
            </div>
          </div>
@@ -133,6 +124,13 @@
    map.value.centerAndZoom(new BMapGL.Point(e.longitude, e.latitude), e.level)
  }

+  const handleRouter = (e) => {
+    let location = e.location.split(',')
+    console.log(location, 'location')
+    current.value = ''
+    map.value.centerAndZoom(new BMapGL.Point(location[0], location[1]), 15)
+  }
+
  const getRouterList = async () => {
    let res = await getRouterListApi()
    routerList.value = res.data
@@ -141,7 +139,6 @@
  const getRouters = async () => {
    let res = await getRoutersApi()
    routers.value = res.data
-    console.log(routers.value, 'routers')
  }

  onMounted(() => {