feat：完善功能

2025-01-20 04:09:56 +08:00
parent 46c737fb93
commit 65244492b4
40 changed files with 2303 additions and 797 deletions
--- a/src/components/CoreVideo/index.vue
+++ b/src/components/CoreVideo/index.vue
@@ -11,7 +11,7 @@
      >
        <div>
          <p class="item-title--primary">
-            {{ item.cameraName }}
+            {{ item.cameraName || item.cameraIndexCode }}
          </p>
          <video
            class="item-img"
@@ -27,7 +27,7 @@
      </li>
    </ul>
  </div>
-  <VideoDialog v-model="videoShow" :src="src" />
+  <video-dialog v-model="videoShow" :src="src" />
 </template>

 <script setup>
@@ -47,7 +47,7 @@

  const getVideoList = async () => {
    let res = await getVideoListApi({
-      businessVideoDisplayPosition: 'core_scenic_area_video'
+      businessVideoDisplayPosition: '核心景区视频'
    })
    list.value = res.data
    nextTick(() => {
@@ -59,7 +59,11 @@
          cameraIndexCode: item.cameraIndexCode
        })
        item.hlsUrl = res1.data.hlsUrl
-        const hls = new Hls()
+        const hls = new Hls({
+          maxBufferLength: 10, // 最大缓冲长度（秒）
+          maxMaxBufferLength: 15, // 缓冲区长度的上限
+          maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
+        })
        hls.loadSource(res1.data.hlsUrl)
        hls.attachMedia(video)
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
--- a/src/components/Correspondence/index.vue
+++ b/src/components/Correspondence/index.vue
@@ -20,7 +20,6 @@
        <div class="header">
          <div>人员姓名</div>
          <div>部门</div>
-
          <div>时间</div>
        </div>
        <div class="list">
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -65,8 +65,10 @@

 <script setup>
  import { useRouter } from 'vue-router'
+
  import title2 from '@/assets/images/title-2.png'
  import title2Select from '@/assets/images/title-2-select.png'
+
  import { getWeatherApi } from '@/api/home'
  import { getSpotListApi } from '@/api/sentiment'

@@ -115,9 +117,9 @@
      minute
    )}:${fillZero(second)}`
  }
-  // 返回上一页
+  // 返回首页
  const handleBack = () => {
-    router.go(-1)
+    router.push('/home')
  }
  const handleCommand = () => {}
  // 点击导航
@@ -129,7 +131,14 @@
      otherScenic.value = ''
      current.value = index
      title.value = item.name
-      pubSub.publish('scenicChange', item)
+      switch (router.currentRoute.value.path) {
+        case '/scenic':
+          pubSub.publish('scenicChange', item)
+          break
+        case '/monitor':
+          pubSub.publish('monitorChange', item)
+          break
+      }
    }
  }

@@ -153,7 +162,7 @@
        isSkip.value = true
        isBack.value = false
        navLeft.value = [
-          { name: '安全', path: '/monitor' },
+          { name: '监控', path: '/monitor' },
          { name: '景区', path: '/scenic' },
          { name: '交通', path: '/traffic' }
        ]
@@ -167,13 +176,12 @@
        isBack.value = true
        let res = await getSpotListApi()
        navLeft.value = res.data
+        current.value = 0
        title.value = navLeft.value[current.value].name
        pubSub.publish('scenicChange', navLeft.value[current.value])
-
        break
      case '/sentiment':
        title.value = '舆情检测'
-
        isBack.value = true
        break
      case '/workOrder':
@@ -186,8 +194,16 @@
        break
      case '/monitor':
        title.value = '监控大屏'
+        isSkip.value = false
        let res1 = await getSpotListApi()
-        navLeft.value = res1.data
+        navLeft.value = [
+          {
+            name: '奉节县',
+            scenicSpotId: ''
+          },
+          ...res1.data
+        ]
+        current.vlaue = ''
        isBack.value = true
        break
      case '/sceneTesting':
--- a/src/components/Nav/index.vue
+++ b/src/components/Nav/index.vue
@@ -13,7 +13,6 @@
      <div class="title">
        <span>检索</span>
      </div>
-
      <div class="search-box flex">
        <el-input placeholder="请输入内容" v-model="searchValue" clearable> </el-input>
        <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
@@ -56,6 +55,8 @@
      default: () => true
    }
  })
+
+  onMounted(() => {})
 </script>
 <style lang="scss" scoped>
  //背景色设置为透明
--- a/src/components/PieRow/index.vue
+++ b/src/components/PieRow/index.vue
@@ -84,7 +84,7 @@
              padding: [0, 0, 5, 0]
            },
            name: {
-              color: '#7894A8',
+              color: '#fff',
              fontSize: fitChartSize(12)
            }
          }
@@ -108,7 +108,7 @@
          }
          defaultCofig.series[0].data = props.dataList
          defaultCofig.series[0].label.formatter = () => {
-            return `{value|${props.total}}` + '\n' + `{name|舆情总数  }`
+            return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
          }
          setOption({
            ...defaultCofig,
--- a/src/components/VideoDialog/index.vue
+++ b/src/components/VideoDialog/index.vue
@@ -1,9 +1,18 @@
 <template>
  <div class="dialog">
    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
-      <video class="video" ref="videoRef" muted autoplay controls style="object-fit: cover">
+      <video
+        v-if="src"
+        class="video"
+        ref="videoRef"
+        muted
+        autoplay
+        controls
+        style="object-fit: cover"
+      >
        <source src="" type="application/x-mpegURL" />
      </video>
+      <p v-else class="none">暂无信号</p>
      <img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
    </el-dialog>
  </div>
@@ -37,7 +46,11 @@
  )

  const init = () => {
-    const hls = new Hls()
+    const hls = new Hls({
+      maxBufferLength: 10, // 最大缓冲长度（秒）
+      maxMaxBufferLength: 15, // 缓冲区长度的上限
+      maxBufferSize: 15 * 1000 * 1000 // 最大缓冲大小（字节）
+    })
    hls.loadSource(props.src)
    hls.attachMedia(videoRef.value)
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
@@ -49,10 +62,23 @@
 <style scoped lang="scss">
  .dialog {
    z-index: 9999;
+    .none {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      color: #fff;
+      font-weight: bold;
+      font-size: vw(30);
+      transform: translate(-50%, -50%);
+      z-index: 999;
+    }
    :deep(.el-dialog) {
-      width: vw(1600);
-      height: vw(900);
-      padding: 0;
+      position: relative;
+      width: vw(1660);
+      height: vw(980);
+      padding: vw(40) vw(30) vw(30) vw(30);
+      background-image: url('@/assets/images/one-video-bg.png');
+      background-size: 100% 100%;
    }
    :deep(.el-dialog__header) {
      padding-bottom: 0 !important;
@@ -64,8 +90,8 @@
    .close {
      cursor: pointer;
      position: absolute;
-      right: vw(20);
-      top: vw(20);
+      right: vw(40);
+      top: vw(50);
      width: vw(60);
      z-index: 9999;
    }
--- a/src/components/monitor/index.vue
+++ b/src/components/monitor/index.vue
@@ -1,4 +1,54 @@
 <template>
+  <div class="left-nav">
+    <div v-if="showNav" class="top-box">
+      <div class="ul">
+        <div
+          class="li"
+          :class="{ active: current == index }"
+          v-for="(item, index) in navList"
+          :key="index"
+        >
+          {{ item.dictLabel }}
+        </div>
+      </div>
+    </div>
+    <div class="bom-box">
+      <div class="title">
+        <span>检索</span>
+      </div>
+      <div class="search-box flex">
+        <el-input placeholder="请输入内容" v-model="searchValue" clearable> </el-input>
+        <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
+      </div>
+      <div class="tree-box">
+        <div class="tree-a">
+          <span class="name-1">核心点位</span>
+          <div class="tree-b">
+            <span class="name-2">摄像头1</span>
+            <span class="name-2 activee">摄像头1</span>
+            <span class="name-2">摄像头1</span>
+          </div>
+        </div>
+        <div class="tree-a">
+          <span class="name-1">核心点位</span>
+          <div class="tree-b">
+            <span class="name-2">摄像头1</span>
+            <span class="name-2 activee">摄像头1</span>
+            <span class="name-2">摄像头1</span>
+          </div>
+        </div>
+        <div class="tree-a">
+          <span class="name-1">其他</span>
+          <div class="tree-b" v-if="true">
+            <span class="name-2">摄像头1</span>
+            <span class="name-2 activee">摄像头1</span>
+            <span class="name-2">摄像头1</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
  <div v-if="videoLog == 1" class="video-wrapper">
    <div class="video-list">
      <div
@@ -76,16 +126,24 @@

 <script setup>
  import { postRefreshApi } from '@/api/home'
+  import { getVideoTypeApi } from '@/api/monitor'
+
  import Hls from 'hls.js'

  let props = defineProps({
    list: {
      type: Array,
      default: () => []
+    },
+    showNav: {
+      type: Boolean,
+      default: () => true
    }
  })

-  const videoList = ref([])
+  let videoList = ref([])
+  let navList = ref([])
+  let current = ref(0)

  watch(
    () => props.list,
@@ -151,9 +209,203 @@
      if (type == 100) initVideo()
    })
  }
+
+  const getVideoType = async () => {
+    let res = await getVideoTypeApi({
+      businessScenicArea: '',
+      businessVideoDisplayPosition: ''
+    })
+    navList.value = res.data
+  }
+  onMounted(() => {
+    getVideoType()
+  })
 </script>

 <style lang="scss" scoped>
+  //背景色设置为透明
+  :deep(.el-input__wrapper) {
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    box-shadow: none;
+  }
+  //输入框颜色
+  :deep(.el-input__inner) {
+    background-color: rgba(0, 0, 0, 0) !important;
+    color: #fff;
+  }
+  .left-nav {
+    margin-left: vw(10);
+    // margin-top:vh(35);
+    width: vw(250);
+
+    .bom-box {
+      margin-top: vh(20);
+      .search-box {
+        background: rgba(217, 217, 217, 0);
+        border-radius: 2px 2px 2px 2px;
+        border: 1px solid #0096ff;
+        margin: vw(20) auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .search-icon {
+          width: vw(16);
+          height: vh(16);
+          margin: 0 vw(20);
+        }
+      }
+
+      .tree-box::before {
+        position: absolute;
+        top: vw(-8);
+        left: vw(-8);
+        content: '';
+        width: vw(12);
+        height: vw(12);
+        background-image: url('/src/assets/images/icon-a-1.png');
+        background-size: 100% 100%;
+      }
+      .tree-box::after {
+        position: absolute;
+        content: '';
+        width: vw(12);
+        height: vw(12);
+        background-image: url('/src/assets/images/icon-a-1.png');
+        background-size: 100% 100%;
+        bottom: vw(-4);
+        left: vw(-8);
+      }
+      .tree-box {
+        margin-left: vw(10);
+        margin-top: vh(20);
+        position: relative;
+        border-left: vw(3) solid;
+        border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
+        .tree-a {
+          .name-1 {
+            padding: 0 vw(20);
+            display: block;
+            font-weight: 400;
+            font-size: vw(15);
+            color: #ffffff;
+            height: vh(30);
+            line-height: vh(30);
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+        .tree-b::before {
+          position: absolute;
+          top: vw(-8);
+          left: vw(-8);
+          content: '';
+          width: vw(12);
+          height: vw(12);
+          background-image: url('/src/assets/images/icon-a-1.png');
+          background-size: 100% 100%;
+        }
+        // .tree-b::after{
+        // 	position:absolute;
+        // 	content: '';
+        // 	width:vw(12);
+        // 	height:vw(12);
+        // 	background-image: url('/src/assets/images/icon-a-1.png');
+        // 	background-size:100% 100%;
+        // 	bottom:vw(-4);
+        // 	left:vw(-8);
+
+        // }
+        .tree-b {
+          // margin-top:vh(20);
+          position: relative;
+          border-left: vw(3) solid;
+          border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
+          margin-left: vw(30);
+          margin-top: vh(10);
+          .name-2 {
+            padding: 0 vw(20);
+            display: block;
+            font-weight: 400;
+            font-size: vw(15);
+            color: #ffffff;
+            height: vh(30);
+            line-height: vh(30);
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+      }
+      .tree-box .tree-a:first-child {
+        position: relative;
+        top: vh(-15);
+      }
+      .tree-box .tree-a:last-child {
+        position: relative;
+        bottom: vh(-12);
+      }
+      .title {
+        background-image: url('/src/assets/images/nav-l-t-bg.png');
+        background-size: 100% 100%;
+
+        span {
+          margin-left: vw(30);
+          font-weight: 800;
+          font-size: vw(15);
+          line-height: vh(26);
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+
+          background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+          color: transparent;
+        }
+      }
+    }
+    .top-box {
+      text-align: left;
+      font-weight: 400;
+      font-size: vw(18);
+      color: rgba(255, 255, 255, 0.7);
+      line-height: 21px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+      .title {
+        font-weight: 600;
+        font-size: vw(15);
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        height: vh(35);
+        line-height: vh(34);
+        padding-left: vw(20);
+        // background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
+      }
+      .ul {
+        .li {
+          background: url('/src/assets/images/m-nav-bg-1.png');
+          background-size: 100% 100%;
+          width: vw(250);
+          height: vh(58);
+          line-height: vh(58);
+          text-align: center;
+          margin-bottom: vh(15);
+        }
+        .active {
+          background: url('/src/assets/images/m-nav-bg-2.png');
+          background-size: 100% 100%;
+          // width:vw(178);
+        }
+      }
+    }
+  }
+
  .video {
    &-wrapper {
      width: 100%;