feat：对接景区数据和监控视频

src/components/CoreVideo/index.vue

@@ -4,7 +4,7 @@
     <ul class="list">
       <li
         class="item"
-        :style="{ backgroundImage: `url(${index == 0 ? primary : error})` }"
+        :style="{ backgroundImage: `url(${primary})` }"
         v-for="(item, index) in list"
         :key="index"
         @click.shop="handleItem(item)"

src/components/Correspondence/index.vue

@@ -1,20 +1,17 @@
 <template>
-  <div class="box-4-content">
+  <div class="correspondence">
     <div class="top-box">
       <div class="title">融合通信</div>
       <div class="icon-box flex">
-        <div class="item" 
-		@click="handleDepsUser(item.id,item)" 
-		v-for="(item,index) in deptsList" 
-		:key="item.id">
-			<img src="/src/assets/images/r-icon-1.png" />
-			<view class="item-name">{{item.name}}</view>
-		</div>
-     <!--   <div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
-        <div class="item"><img src="/src/assets/images/r-icon-3.png" />龙桥河</div>
-        <div class="item"><img src="/src/assets/images/r-icon-4.png" />消防队</div>
-        <div class="item"><img src="/src/assets/images/r-icon-5.png" />文旅城</div>
-        <div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div> -->
+        <div
+          class="item"
+          v-for="item in deptsList"
+          :key="item.id"
+          @click="handleDepsUser(item.id, item)"
+        >
+          <img src="/src/assets/images/r-icon-1.png" />
+          <view class="item-name">{{ item.name }}</view>
+        </div>
       </div>
     </div>
     <div class="bom-box">
@@ -23,107 +20,99 @@
         <div class="header">
           <div>人员姓名</div>
           <div>部门</div>
-          <div>职位</div>
+
           <div>时间</div>
         </div>
         <div class="list">
           <div class="item" v-for="(item, index) in recordList" :key="index">
-            <div>{{item.nickname}}</div>
-            <div>{{item.department}}</div>
-            <div>{{item.postion}}</div>
-            <div>{{item.time}}</div>
+            <div>{{ item.nickname }}</div>
+            <div>{{ item.department }}</div>
+            <div>{{ item.time }}</div>
           </div>
         </div>
       </div>
     </div>
   </div>
-<el-dialog :title="gridTitle" center v-model="dialogTableVisible">
-	<div class="bom-box">
-	  <div class="table">
-	    <div class="header">
-	      <div>姓名</div>
-	      <div>部门</div>
-	      <div>职位</div>
-	      <div>电话号码</div>
-		  <div>操作</div>
-	    </div>
-	    <div class="list">
-	      <div class="item" v-for="(item, index) in gridData" :key="index">
-	        <div>{{item.nickName}}</div>
-	        <div>{{item.depthName}}</div>
-	        <div>{{item.postName}}</div>
-	        <div>{{item.phoneNumber}}</div>
-			<div>
-				<img class="sp-ico"  src="@/assets/images/sp-icom.png" />
-			</div>
-	      </div>
-	    </div>
-	  </div>
-	</div>
-</el-dialog>
+  <el-dialog :title="gridTitle" center v-model="dialogTableVisible">
+    <div class="bom-box">
+      <div class="table">
+        <div class="header">
+          <div>姓名</div>
+          <div>部门</div>
+          <div>职位</div>
+          <div>电话号码</div>
+          <div>操作</div>
+        </div>
+        <div class="list">
+          <div class="item" v-for="(item, index) in gridData" :key="index">
+            <div>{{ item.nickName }}</div>
+            <div>{{ item.depthName }}</div>
+            <div>{{ item.postName }}</div>
+            <div>{{ item.phoneNumber }}</div>
+            <div>
+              <img class="sp-ico" src="@/assets/images/sp-icom.png" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup>
-  import { useRouter } from 'vue-router'
-  import { getComDeptsApi,getComDeptUsersApi,getComRecordApi } from '@/api/common'
+  import { getComDeptsApi, getComDeptUsersApi, getComRecordApi } from '@/api/common'
   let deptsList = ref([])
   let dialogTableVisible = ref(false)
-  const getComDepts = async()=>{
-	  let res = await getComDeptsApi()
-	  deptsList.value = res.data
+  const getComDepts = async () => {
+    let res = await getComDeptsApi()
+    deptsList.value = res.data
   }
   let recordList = ref([])
-  const getComRecord = async()=>{
-  	  let res = await getComRecordApi()
-  	  recordList.value = res.data
+  const getComRecord = async () => {
+    let res = await getComRecordApi()
+    recordList.value = res.data
   }
   let gridData = ref([])
   let gridTitle = ref('')
-  const handleDepsUser = async(id,item)=>{
-	  gridTitle.value = item.name
-	  let res = await getComDeptUsersApi({id})
-	  gridData.value = res.data
-	  dialogTableVisible.value = true
-	  console.log(gridData.value,'getcomdepts')
+  const handleDepsUser = async (id, item) => {
+    gridTitle.value = item.name
+    dialogTableVisible.value = true
+    let res = await getComDeptUsersApi({ id })
+    gridData.value = res.data
   }
 
   onMounted(() => {
     getComDepts()
-	getComRecord()
+    getComRecord()
   })
 </script>
 <style>
-	.el-dialog {
-	 	background:url('/src/assets/images/map-bg-2.png') no-repeat top center;
-		background-size: 100% 100%;
-	 }
-	.el-dialog__title{
-	 	 color:#fff;
-	 	 font-weight: bold;
-	}
+  .el-dialog {
+    background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
+    background-size: 100% 100%;
+  }
+  .el-dialog__title {
+    color: #fff;
+    font-weight: bold;
+  }
 </style>
 <style lang="scss" scoped>
-	.sp-ico{
-		width:vw(50);
-		// height:vh(30);
-	}
-	.item-name{
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		width:100%;
-	}
-	.sp-img{
-		width:vw(100);
-	}
-  .box-4-content {
-    position: relative;
+  .sp-ico {
+    width: vw(40);
+  }
+  .item-name {
+    width: 90%;
+    text-align: center;
+  }
+  .sp-img {
+    width: vw(100);
+  }
+  .correspondence {
     margin: vw(8);
     width: vw(300);
-    height: vh(1060);
+    height: vh(1070);
     background-image: url('@/assets/images/bg-1.png');
     background-size: 100% 100%;
-   
   }
   .bom-box {
     .table {
@@ -211,7 +200,8 @@
       line-height: vh(16);
       flex-wrap: wrap;
       .item {
-        width: 33.33%;
+        cursor: pointer;
+        width: 50%;
         margin-top: vh(40);
         display: flex;
         flex-direction: column;

src/components/Line/index.vue

@@ -71,13 +71,13 @@
       formatter: (e) => {
         let valueStr = ''
         e.map((item) => {
-          valueStr += `<div>${item.seriesName}：${item.value}</div>`
+          valueStr += `<div>${item.axisValueLabel}：${item.value}</div>`
         })
         let str = `<div style="
                 background: #07356B;
                 border: 1px solid #0096FF;
                 color: #fff;
-                font-weight: 600;
+                font-weight: bold;
                 font-size: ${fitChartSize(16)}px;
                 border-radius: ${fitChartSize(4)}px;
                 padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">

src/components/monitor/index.vue

@@ -5,7 +5,7 @@
         class="video-item"
         v-for="(item, index) in videoList"
         :key="index"
-        @click="handleItemVideo(item.hlsUrl, item.cameraName, item.updateTime)"
+        @click="handleItemVideo(item.hlsUrl, 100)"
       >
         <div class="video-item__inner">
           <video
@@ -25,13 +25,8 @@
       </div>
     </div>
   </div>
-
   <div class="video-detail" v-if="videoLog == 2">
-    <div class="video-detail__wrapper v-error-bg">
-      <div class="video-detail__title">
-        <span>{{ videoTitle }}</span>
-        <span>{{ videoUpdateTime }}</span>
-      </div>
+    <div class="video-detail__wrapper">
       <video
         class="video-detail__video"
         ref="videoRef"
@@ -43,16 +38,39 @@
         <source src="" type="application/x-mpegURL" />
       </video>
     </div>
-    <!-- <div class="video-rt">
-      <div class="title">
-        <span>最近联系</span>
-      </div>
-      <div class="rt-v-box">
-        <div class="rt-video v-error-bg" v-for="item in 8">
-          <div class="desc">核心路段：这是一条信息说明</div>
+    <div class="video-right">
+      <div class="flex justify-between">
+        <Title2 title="异常告警" />
+        <div class="back-box" @click="handleBack">
+          <img class="icon" src="@/assets/images/back.png" />
+          <span>返回</span>
         </div>
       </div>
-    </div> -->
+      <ul class="list">
+        <li
+          class="item"
+          v-for="(item, index) in videoList"
+          :key="index"
+          @click="handleItemVideo(item.hlsUrl, 101)"
+        >
+          <div>
+            <p class="item-title--primary">
+              {{ item.cameraName }}
+            </p>
+            <video
+              class="item-img"
+              :id="'monitorVideo' + index"
+              muted
+              autoplay
+              :controls="false"
+              style="object-fit: cover"
+            >
+              <source src="" type="application/x-mpegURL" />
+            </video>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -96,23 +114,41 @@
 
   let videoLog = ref(1)
   let videoRef = ref()
-  let videoTitle = ref('')
-  let videoUpdateTime = ref('')
 
-  const handleItemVideo = (url, title, time) => {
+  const initVideo = () => {
+    nextTick(() => {
+      videoList.value.forEach(async (item, index) => {
+        const video = document.getElementById(`monitorVideo${index}`)
+        let res = await postRefreshApi({
+          type: 'hls',
+          businessVideoDisplayPosition: item.businessVideoDisplayPosition,
+          cameraIndexCode: item.cameraIndexCode
+        })
+        item.hlsUrl = res.data.hlsUrl
+        const hls = new Hls()
+        hls.loadSource(res.data.hlsUrl)
+        hls.attachMedia(video)
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          video.play()
+        })
+      })
+    })
+  }
+  const handleBack = () => {
+    videoLog.value = 1
+    initVideo()
+  }
+
+  const handleItemVideo = (url, type) => {
     videoLog.value = 2
-    videoTitle.value = title
-    videoUpdateTime.value = time
     nextTick(() => {
       const hls = new Hls()
-      console.log(url, '111')
-      console.log(videoRef.value, '222')
-
       hls.loadSource(url)
       hls.attachMedia(videoRef.value)
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
         videoRef.value.play()
       })
+      if (type == 100) initVideo()
     })
   }
 </script>
@@ -149,7 +185,7 @@
       }
     }
     &-item {
-      width: vw(404);
+      width: vw(410);
       height: vh(300);
       padding: vw(10);
       background-image: url('/src/assets/images/item-primary.png');
@@ -195,8 +231,8 @@
     &-detail__wrapper {
       position: relative;
       padding: vh(40) vw(50);
-      width: vw(1666);
-      height: vh(950);
+      width: vw(1660);
+      height: vh(960);
       background-image: url('/src/assets/images/one-video-bg.png');
       background-size: 100% 100%;
     }
@@ -218,6 +254,90 @@
       width: 100%;
       height: vh(880);
     }
+    &-right {
+      margin-left: vw(8);
+      width: vw(440);
+      height: vh(956);
+      background: #082f5a;
+      .back-box {
+        cursor: pointer;
+        padding-right: vw(20);
+        display: flex;
+        align-items: center;
+        .icon {
+          width: vw(30);
+          height: auto;
+          margin-right: vw(10);
+        }
+        & > span {
+          font-weight: bold;
+          font-size: vw(20);
+          color: #ffffff;
+        }
+      }
+      .list {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: vh(920);
+        padding: vw(8);
+        /* 滚动条整体样式 */
+        &::-webkit-scrollbar {
+          width: vw(0); /* 滚动条的宽度 */
+        }
+
+        /* 滚动条轨道 */
+        &::-webkit-scrollbar-track {
+          background: #f1f1f1; /* 轨道的背景色 */
+        }
+
+        /* 滚动条滑块 */
+        &::-webkit-scrollbar-thumb {
+          background: #888; /* 滑块的背景色 */
+          border-radius: 5px; /* 滑块的圆角 */
+        }
+
+        /* 当鼠标悬停在滚动条上时滑块的样式 */
+        &::-webkit-scrollbar-thumb:hover {
+          background: #555; /* 滑块的背景色 */
+        }
+      }
+
+      .item {
+        margin-bottom: vh(10);
+        padding: vw(10);
+        background-image: url('@/assets/images/item-primary.png');
+        background-size: 100% 100%;
+        & > div {
+          position: relative;
+        }
+        &-title {
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          padding: vw(10);
+          color: #fff;
+          font-size: vw(14);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          z-index: 999;
+        }
+        &-title--error {
+          @extend .item-title;
+          background-color: rgba(226, 27, 27, 0.72);
+        }
+        &-title--primary {
+          @extend .item-title;
+          background-color: rgba(4, 30, 69, 0.72);
+        }
+        &-img {
+          width: 100%;
+          height: vh(164);
+          display: block;
+          object-fit: cover;
+        }
+      }
+    }
     .video-live {
       .video-rt {
         width: vw(400);