From 2cae29e9b448805eede0e8030a2f3232fbdccc5a Mon Sep 17 00:00:00 2001
From: duanliang <540489889@qq.com>
Date: Tue, 24 Jun 2025 12:33:44 +0800
Subject: [PATCH] 24

---
 src/api/scenic.js                          |   8 ++
 src/assets/images/jk-ico-2.png             | Bin 0 -> 1999 bytes
 src/assets/images/jk-ico.png               | Bin 0 -> 2027 bytes
 src/views/collect/components/video-box.vue |  15 ++-
 src/views/monitor/components/box-1.vue     |   6 +-
 src/views/vehicles/components/big-map.vue  | 113 +++++++++++++++++++--
 6 files changed, 129 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/images/jk-ico-2.png
 create mode 100644 src/assets/images/jk-ico.png

diff --git a/src/api/scenic.js b/src/api/scenic.js
index 185067a..aa23b9f 100644
--- a/src/api/scenic.js
+++ b/src/api/scenic.js
@@ -17,3 +17,11 @@ export function getGpsStatusListApi(data) {
     params: data
   })
 }
+//监控
+export function getSourceGpsApi(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/source/gps',
+    method: 'get',
+    params: data
+  })
+}
\ No newline at end of file
diff --git a/src/assets/images/jk-ico-2.png b/src/assets/images/jk-ico-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..2cbd4b9d2a8e0e10dffaa181d8755db8c9931511
GIT binary patch
literal 1999
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/jk-ico.png b/src/assets/images/jk-ico.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5420ca42618cda25acd0d7fe670e86cc6b23c96
GIT binary patch
literal 2027
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

literal 0
HcmV?d00001

diff --git a/src/views/collect/components/video-box.vue b/src/views/collect/components/video-box.vue
index 8fd1c62..33137e8 100644
--- a/src/views/collect/components/video-box.vue
+++ b/src/views/collect/components/video-box.vue
@@ -7,7 +7,13 @@
 			</div> -->
 			<div class="type-item" v-for="(item,index) in videoList">
 				<div class="type-title">{{item.label}}</div>
-				<draggable :data-item-index="index"  class="item-element" :item-key="item.key" :list="item.videos"  ghost-class="ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
+				<draggable 
+				:data-item-index="index"  
+				class="item-element" 
+				:item-key="item.key" 
+				:list="item.videos"  
+				ghost-class="ghost" 
+				:force-fallback="true" chosen-class="chosenClass" animation="300"
 					@start="onStart" @end="onEnd">
 					<template #item="{ element }">
 						<div class="video-item" :style="{
@@ -470,7 +476,7 @@
       .video-item {
         position: relative;
         width: vw(210);
-        height: vh(380);
+        height: vh(300);
         padding: vh(12) vw(12);
         box-sizing: border-box;
         background-image: url('@/assets/images/item-primary.png');
@@ -548,7 +554,7 @@
       // width: vw(720);
 	  // width:48%;
 	  // margin-right: 1%;
-      height: vh(380);
+      height: vh(275);
       padding: vh(10) vw(10);
 	  box-sizing: border-box;
 	  // margin-bottom:1%;
@@ -608,7 +614,8 @@
     }
     &-item__video {
       width: 100%;
-      height: vh(366);
+      height: vh(260);
+	  // height:100%;
       object-fit: fill;
     }
     &-detail {
diff --git a/src/views/monitor/components/box-1.vue b/src/views/monitor/components/box-1.vue
index 816bbbc..c3d8bd5 100644
--- a/src/views/monitor/components/box-1.vue
+++ b/src/views/monitor/components/box-1.vue
@@ -82,7 +82,6 @@
       </div>
       <div class="flex pt-20">
         <div class="box">
-<<<<<<< HEAD
           <Title3 title="拥堵告警" />
           <!-- <Line :width="760" :height="180" :data="jamlData" :xAxisData="jamXAxisData" /> -->
 		  
@@ -90,10 +89,8 @@
 		  :series="jamlData[0].data" 
 		  :data="jamXAxisData" :height="180" />
 		  
-=======
           <Title3 title="平均车速(KM/H)" />
           <Line :width="760" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
->>>>>>> 7c696b91971ef42b6e755b7bd49f244dd77c25b4
         </div>
       </div>
     </template>
@@ -406,6 +403,9 @@
       }
       &:nth-child(4) {
         .monitor-statistics-item__error {
+			margin-top: vh(10);
+			font-weight: bold;
+			font-size: vw(24);
           color: #e21b1b;
         }
         .monitor-statistics-item__value {
diff --git a/src/views/vehicles/components/big-map.vue b/src/views/vehicles/components/big-map.vue
index 6588f66..70b5878 100644
--- a/src/views/vehicles/components/big-map.vue
+++ b/src/views/vehicles/components/big-map.vue
@@ -40,11 +40,19 @@
               :class="{ item__active: current === index }"
               v-for="(item, index) in listTabs"
               :key="index"
-              @click="handleItem(item, index)"
+              @click.stop="handleItem(item, index)"
             >
-			<div class="child-box new-item">
-				<p class="item__label">{{ item.licenseNumber }}</p>
-
+			<div style="justify-content: center;" class="child-box new-item">
+				<p class="item__label" 
+				style="justify-content: flex-start;">
+				{{ item.licenseNumber }}
+					<img
+					v-if="item.hasVideo==1" 
+					@click.stop="handleMonitor(item)" 
+					class="item__map_video" 
+					src="@/assets/images/jk-ico-2.png" alt="">
+				</p>
+			
 			</div>
 			<div class="new-item">
 				<span  v-if="item.type == 0" class="label_img">
@@ -77,11 +85,20 @@
         <div id="big-car-ship" class="big-car-ship" />
       </div>
     <!-- </el-dialog> -->
+	
+	<el-dialog :title="'车辆监控'+gpsLicenseNumber" center v-model="dialogTableVisible2">
+	  <div class="bom-box bom-box2">
+	    <div class="table2">
+			<!-- <div class="header-title">三峡之巅广播</div> -->
+			<iframe style="width:100%;height:100%;" :src="gpsMonitorSrc"></iframe>
+	    </div>
+	  </div>
+	</el-dialog>
   </div>
 </template>
 
 <script setup>
-  import { getGpsListApi, getGpsStatusListApi } from '@/api/scenic'
+  import { getGpsListApi, getGpsStatusListApi,getSourceGpsApi } from '@/api/scenic'
 
   import closeIcon from '@/assets/images/close.png'
 
@@ -92,7 +109,8 @@
   import shipIcon from '@/assets/images/ship.png'
   import shipStopIcon from '@/assets/images/ship-stop.png'
   import shipOfflineIcon from '@/assets/images/ship-offline.png'
-
+  
+  import mapVideoIcon from '@/assets/images/map-video.png'
   import icon13 from '@/assets/images/icon-13.png'
   import icon14 from '@/assets/images/icon-14.png'
   import icon15 from '@/assets/images/icon-15.png'
@@ -116,6 +134,7 @@ import PubSub from 'pubsub-js'
 	  {id:2,text:'三峡之巅',scenicSpotId:'root00000000'},
 	  {id:3,text:'直通车',scenicSpotId:'奉节县'}
   ])
+  
   let tabsListIndex = ref(0)
   const handleTabsList = (item)=>{
 	  scenicSpotId.value = item.scenicSpotId
@@ -175,6 +194,17 @@ import PubSub from 'pubsub-js'
     //   number: 0
     // }
   ])
+  // 监控
+  let dialogTableVisible2 = ref(false)
+  let gpsMonitorSrc = ref(null)
+  let gpsLicenseNumber = ref(null)
+  const handleMonitor = async(item)=>{
+	  console.log(item,'00000')
+	  let res = await getSourceGpsApi({licenseNumber:item.licenseNumber,colorCode:item.colorCode})
+	  gpsMonitorSrc.value = res.data
+	  gpsLicenseNumber.value = item.licenseNumber
+	  dialogTableVisible2.value = true
+  }
   watch(
 	()=>[scenicStore.vehicleData,tabsIndex.value,map.value],
 	(val)=>{
@@ -432,8 +462,72 @@ import PubSub from 'pubsub-js'
     PubSub.unsubscribe(scenicChange)
   })
 </script>
+<style lasng="scss" scoped>
 
+	:deep(.el-dialog__headerbtn .el-dialog__close){
+			color:#fff;
+			font-size:30px;
+			position:relative;
+			top:0;
+			right:0;
+		}
+	:deep(.el-dialog) {
+	  background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
+	  background-size: 100% 100%;
+	}
+	:deep(.el-dialog__title) {
+	  color: #fff;
+	  font-weight: bold;
+	  
+	}
+</style>
 <style lang="scss">
+	.bom-box {
+		// padding-top:vh(20);
+		.table2{
+		  width:100%;
+		  height:vh(740);
+		  overflow-y: auto;
+		  margin-top:vh(20);
+		  /* 滚动条整体样式 */
+		  &::-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(50);
+		    font-weight: 400;
+		    font-size: vw(14);
+		    color: #f1f7ff;
+		    display: flex;
+		    &: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; /* 使用省略号表示文本溢出 */
+		    }
+		  }
+		}
+	
+	}
 	.coll-box{
 		width:100% !important;
 		flex:1 !important;
@@ -463,11 +557,18 @@ import PubSub from 'pubsub-js'
 		align-items: center;
 		flex:1;
 		height:100%;
+		.item__map_video{
+			width:vw(20);
+			height:vh(20);
+			margin-left:vw(4);
+		}
 	}
 	.item__label{
 		display:flex;
 		align-items: center;
 		min-width:vw(110);
+		justify-content: flex-end;
+		text-align: right;
 	}
 	.label_img{
 		background: #0063ff;