24

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
+  })
+}

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 {

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 {

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;