add 1

package-lock.json

@@ -22,7 +22,8 @@
         "vue-countup-v3": "^1.4.2",
         "vue-echarts": "^7.0.3",
         "vue-router": "^4.4.5",
-        "vue3-seamless-scroll": "^2.0.1"
+        "vue3-seamless-scroll": "^2.0.1",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -4993,6 +4994,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5983,6 +5990,18 @@
         "throttle-debounce": "5.0.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",

package.json

@@ -23,7 +23,8 @@
     "vue-countup-v3": "^1.4.2",
     "vue-echarts": "^7.0.3",
     "vue-router": "^4.4.5",
-    "vue3-seamless-scroll": "^2.0.1"
+    "vue3-seamless-scroll": "^2.0.1",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

src/api/home.js

@@ -108,3 +108,27 @@ export function getSpotVideoEvents(data) {
     data
   })
 }
+// 徒步客流统计
+export function getSpotPassengerFlow(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/spot/passengerFlow',
+    method: 'get',
+    data
+  })
+}
+// 收藏视频
+export function getVideCollectCate(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/video/collectCate',
+    method: 'get',
+    data
+  })
+}
+// 收藏排序
+export function getVideCollectCateSort(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/video/collectCateSort',
+    method: 'post',
+    data
+  })
+}

src/api/sentiment.js

@@ -73,3 +73,10 @@ export function getSpotListApi() {
     method: 'get'
   })
 }
+// 景区列表
+export function getGsdataDetailApi(data) {
+  return request({
+    url: `/fjtcc-api/api/largeScreen/gsdata/detail/${data}`,
+    method: 'get',
+  })
+}

src/assets/com/webrtc.js

@@ -24,8 +24,9 @@ export default class MyWebrtc {
 		var holdFlag = false;
 
 		var session;
-		var incomingCallAudio = new window.Audio('./static/incoming-call-ringtone.wav');
+		var incomingCallAudio = new window.Audio('../static/incoming-call-ringtone.wav');
-		var ringbackAudio = new window.Audio('./static/ringbacktone.wav');
+		var ringbackAudio = new window.Audio('../static/ringbacktone.wav');
+		console.log(incomingCallAudio,'incomingCallAudio')
 		incomingCallAudio.loop = true;
 		ringbackAudio.loop = true;
 		var remoteAudio = new window.Audio();
@@ -45,9 +46,9 @@ export default class MyWebrtc {
 				video: true
 			};
 		}
-
+		this.changeAgent = null
 		//jssip实例初始化
-		this.jssipAgent = function(JsSipPhoneNumber, JsSipgetIp, JsSipgetPort, JsSipgetPassWord, remoteVideo, Registerstate, Callstate) {
+		this.jssipAgent = function(JsSipPhoneNumber, JsSipgetIp, JsSipgetPort, JsSipgetPassWord, remoteVideo, Registerstate, Callstate,callback) {
 			getJsSipPhoneNumber = JsSipPhoneNumber;
 			getJsSipgetIp = JsSipgetIp;
 			getJsSipgetPassWord = JsSipgetPassWord;
@@ -75,12 +76,13 @@ export default class MyWebrtc {
 				uri: sip_uri_,
 				register: true,
 				password: sip_password_,
-				contact_uri: sip_uri_ + ';transport=wss',
+				contact_uri: sip_uri_ + ';transport=ws',
 				ws_servers: ws_uri_
 				// session_timers: false
 			};
 
 			userAgent = new JsSIP.UA(configuration);
+			this.changeAgent = userAgent
 			incomingCallAudio.play();
 			incomingCallAudio.pause();
 			ringbackAudio.play();
@@ -108,9 +110,7 @@ export default class MyWebrtc {
 			});
 			//为传入或传出的会话/呼叫
 			userAgent.on('newRTCSession', function(data) {
-				console.info('onNewRTCSession: ', data);
 				if(data.originator == 'remote') { //incoming call
-
 					if(globalCallPhoneStates == "连接中" || globalCallPhoneStates == "通话中" || globalCallPhoneStates.indexOf("来电")>-1){
 						var options2 = {
 							all: false,
@@ -119,8 +119,9 @@ export default class MyWebrtc {
 						data.session.terminate(options2);
 						return;
 					}
-
+					// callback(data,globalCallPhoneStates)
-					autoAnswerFlag = document.getElementById('autoAnswerFlag').checked;
+					// autoAnswerFlag = document.getElementById('autoAnswerFlag').checked;
+					autoAnswerFlag = false
 					console.info("incomingSession, answer the call");
 					incomingSession = data.session;
 					Datas = data.session;
@@ -129,7 +130,7 @@ export default class MyWebrtc {
 						incomingNum = incomingNum.substring(incomingNum.indexOf("sip:")+4);
 						incomingNum = incomingNum.substring(0,incomingNum.indexOf("@"));
 					}
-
+					// doEvent("incoming_event",incomingNum,data.request.call_id);
 					globalCallPhoneStates = incomingNum+"来电";
 					
 					if(useVideo){
@@ -156,7 +157,7 @@ export default class MyWebrtc {
 								'mediaStream': null
 							});
 						}
-						getstatus2.innerText = "通话中";
+						// getstatus2.innerText = "通话中";
 						globalCallPhoneStates = "通话中";
 
 						Datas.connection.ontrack = getRemoteStream;
@@ -198,15 +199,18 @@ export default class MyWebrtc {
 					}else if(currentSession!=null && currentSession._request.call_id!=null){
 						call_id = currentSession._request.call_id;
 					}
-					doEvent("hangup_event",'',call_id);
+					// doEvent("hangup_event",'',call_id);
 					//Callstate.innerText = "已挂断";
 					globalCallPhoneStates = "已挂断";
-
+					youVideo = document.getElementById('youVideo');
+					youVideo.style.opacity = '0';
 					clearVideo();
 					currentSession = null;
 				});
 				data.session.on('accepted', function(data) {
 					console.info('onAccepted - ', data);
+					youVideo = document.getElementById('youVideo');
+					youVideo.style.opacity = '1';
 					var call_id = "";
 					if(data!=null && data.request!=null && data.request.call_id!=null){
 						call_id = data.request.call_id;
@@ -248,10 +252,10 @@ export default class MyWebrtc {
 						var holdOption = currentSession.isOnHold();
 						if(holdOption.local){
 							holdFlag = true;
-							doEvent("hold_event",'',data.request.call_id);
+							// doEvent("hold_event",'',data.request.call_id);
 						}else if(holdFlag){;
 							holdFlag = false;
-							doEvent("unhold_event",'',data.request.call_id);
+							// doEvent("unhold_event",'',data.request.call_id);
 						}
 					}
 
@@ -332,6 +336,7 @@ export default class MyWebrtc {
 					}
 					// doEvent("hangup_event",'',call_id);
 					// globalCallPhoneStates = "未通话";
+					globalCallPhoneStates = "呼叫失败";
 					
 					if(incomingSession!=null){
 						incomingCallAudio.pause();
@@ -344,7 +349,8 @@ export default class MyWebrtc {
 
 				if(data.session.direction === 'incoming'){
 					console.log('incoming - ',data.session);
-					autoAnswerFlag = document.getElementById('autoAnswerFlag').checked;
+					// autoAnswerFlag = document.getElementById('autoAnswerFlag').checked;
+					autoAnswerFlag = false
 					if(!autoAnswerFlag){
 						incomingCallAudio.play();
 					}
@@ -361,7 +367,7 @@ export default class MyWebrtc {
 				// ringbackAudio.play();
 				console.log('call is in progress');
 				// getstatus2.innerText = "连接中";
-				// globalCallPhoneStates = "连接中";
+				globalCallPhoneStates = "连接中";
 			},
 			'failed': function(e) {
 				console.log('call failed: ', e);
@@ -369,12 +375,12 @@ export default class MyWebrtc {
 				if(e.cause == "Busy") {
 					console.error("用户正忙");
 					// getstatus2.innerText = "用户正忙";
-					// globalCallPhoneStates = "用户正忙";
+					globalCallPhoneStates = "用户正忙";
 				} else {
 					console.error("拨打失败");
 					//通话状态
 					// getstatus2.innerText = "拨打失败";
-					// globalCallPhoneStates = "拨打失败";
+					globalCallPhoneStates = "拨打失败";
 					
 				}
 
@@ -385,7 +391,7 @@ export default class MyWebrtc {
 				// selfViewWap.style.display = "none";
 				console.log('call ended : ', e);
 				//通话状态
-				getstatus2.innerText = "已挂断";
+				// getstatus2.innerText = "已挂断";
 				globalCallPhoneStates = "已挂断";
 				
 				clearVideo();
@@ -397,7 +403,6 @@ export default class MyWebrtc {
 				console.log('call confirmed');
 			}
 		};
-
 		//语音拨打
 		this.JsSip_VoiceCall = function(callPhone,isVoice) {
 			console.log("isVoice",isVoice);
@@ -418,6 +423,7 @@ export default class MyWebrtc {
 		}
 		//接听
 		this.VoiceAnsWter = function() {
+			
 			incomingCallAudio.pause();
 			if(useVideo){
 				Datas.answer({
@@ -443,6 +449,7 @@ export default class MyWebrtc {
 
 		//发送DTMF
 		this.VoiceSendDTMF = function(dtmf) {
+			console.log(dtmf)
 			if(incomingSession!=null){
 				incomingSession.sendDTMF(dtmf);
 			}else{
@@ -517,39 +524,41 @@ export default class MyWebrtc {
 		function getRemoteStream(e) {
 			ringbackAudio.pause();
 			console.log('getRemoteStream - ', e.track, e.streams[0]);
-			//remoteAudio.srcObject = e.streams[0];
+			remoteAudio.srcObject = e.streams[0];
-
 			if(useVideo){
 				console.log(e.streams[0])
-				// youVideo.srcObject = e.streams[0];
+				youVideo.srcObject = e.streams[0];
-				// document.body.addEventListener('click', function () {
+				document.body.addEventListener('click', function () {
-				// 	meVideo.play();
+					meVideo.play();
-				// });
+				});
 				// 等到视频流准备好了
-				// var interval = setInterval(function () {
+				var interval = setInterval(function () {
-				// 	if (!meVideo.videoWidth) {
+					if (!meVideo.videoWidth) {
-				// 		return;
+						return;
-				// 	}
+					}
-				// 	//stage.appendChild(videoView);
+					//stage.appendChild(videoView);
-				// 	clearInterval(interval);
+					clearInterval(interval);
-				// }, 1000 / 50);
+				}, 1000 / 50);
 			}else{
-				// remoteAudio.srcObject = e.streams[0];
+				remoteAudio.srcObject = e.streams[0];
+				
 			}
 
 		}
 
 		//初始化视频
 		function initVideo(){
-			// meVideo = document.getElementById('meVideo');
+			meVideo = document.getElementById('meVideo');
-			// meVideo.setAttribute('autoplay', '');
+			meVideo.setAttribute('autoplay', '');
-			// meVideo.setAttribute('playsinline', '');
+			meVideo.setAttribute('playsinline', '');
-			// meVideo.style.width = '212px';
+			meVideo.style.width = '20vh';
-			//
+			
-			// youVideo = document.getElementById('youVideo');
+			youVideo = document.getElementById('youVideo');
-			// youVideo.setAttribute('autoplay', '');
+			youVideo.setAttribute('autoplay', '');
-			// youVideo.setAttribute('playsinline', '');
+			youVideo.setAttribute('playsinline', '');
-			// youVideo.style.width = '531px';
+			// youVideo.style.width = '1000px';
+			youVideo.style.opacity = '0';
+			youVideo.style.height = '80vh';
 
 			navigator.mediaDevices.getUserMedia({
 				audio: false,
@@ -558,18 +567,18 @@ export default class MyWebrtc {
 				}
 			}).then(function success(stream) {
 				console.log(stream)
-				// meVideo.srcObject = stream;
+				meVideo.srcObject = stream;
-				// document.body.addEventListener('click', function () {
+				document.body.addEventListener('click', function () {
-				// 	meVideo.play();
+					meVideo.play();
-				// });
+				});
-				// // 等到视频流准备好了
+				// 等到视频流准备好了
-				// var interval = setInterval(function () {
+				var interval = setInterval(function () {
-				// 	if (!meVideo.videoWidth) {
+					if (!meVideo.videoWidth) {
-				// 		return;
+						return;
-				// 	}
+					}
-				// 	//stage.appendChild(videoView);
+					//stage.appendChild(videoView);
-				// 	clearInterval(interval);
+					clearInterval(interval);
-				// }, 1000 / 50);
+				}, 1000 / 50);
 			}).catch(function (error) {
 				alert(error.message);
 			});
@@ -577,6 +586,7 @@ export default class MyWebrtc {
 
 		//释放视频资源
 		function clearVideo(){
+			return false
 			if(useVideo && meVideo!=null && meVideo.srcObject!=null){
 				meVideo.pause();
 				if(meVideo.srcObject.getTracks()[0]!=null){

src/layout/components/Correspondence/index.vue

@@ -43,6 +43,7 @@
     <el-dialog :title="gridTitle" center v-model="dialogTableVisible">
       <div class="bom-box">
         <div class="table">
+			
           <div class="header">
             <div>姓名</div>
             <div>部门</div>
@@ -58,7 +59,7 @@
               <div>{{ item.phoneNumber }}</div>
               <div>
                 <img @click="doCallTel(item)" class="tel-ico" src="@/assets/images/tel-icon.png" />
-                <img @click="doCallVoice(item)" class="voice-ico" src="@/assets/images/voice-icon.png" />
+                <!-- <img @click="doCallVoice(item)" class="voice-ico" src="@/assets/images/voice-icon.png" /> -->
                 <img @click="doCallVideo(item)" class="sp-ico" src="@/assets/images/sp-icom.png" />
               </div>
             </div>
@@ -74,14 +75,36 @@
 	    </div>
 	  </div>
 	</el-dialog>
-    <el-dialog v-model="dialogComVideo">
+<!-- 	<el-dialog :title="'三峡之巅广播'" top="0" @close="closeTh" width="1200px"  center v-model="dialogTableVisible3">
-      <div class="videoPrefecture_video" id="videoPrefecture">
+	
+	</el-dialog> -->
+	<div v-show="dialogTableVisible3" class="videoPrefecture_video" id="videoPrefecture">
+		<img src="/src/assets/images/close.png" @click="closeTh" class="closeCall" alt="" />
+			  <div class="flex-hj" :class="callType!=3?'tell-flex':''">
 				  <video  id="youVideo" class="oneVideo"></video>
-        <video id="meVideo" class="twoVideo"></video>
+				  <div class="hj-box" v-if="callType==3">
-<!--        <span class="glyphicon glyphicon-volume-down"></span>-->
+					  <div v-if="progressVal!=='通话中'">
-<!--        <span class="glyphicon glyphicon-off"></span>-->
+						  <img src="/src/assets/images/hj-1.png" class="hj-ico" alt="" />
+						  <div>{{progressVal=='未通话'?'呼叫中...':progressVal}}</div>
+					  </div>
+					
+				  </div>
+				  <div class="hj-box " v-else>
+					  <img src="/src/assets/images/hj-1.png" class="hj-ico" alt="" />
+					  <div>{{progressVal=='未通话'?'呼叫中...':progressVal}}</div>
+				  </div>
+			  </div>
+				  <div class="gd-ico" >
+					 <el-button type="success" @click="doCallVideo()" v-if="progressVal=='呼叫停止'||progressVal=='呼叫失败'" round>重拨</el-button>
+					 <!-- <el-button type="success" round>解除保持</el-button> -->
+					 <el-button type="success" @click="ansWerPhone()" v-else-if="thState" round>接听</el-button>
+					 <el-button type="danger" @click="closeTh" v-else round>挂断</el-button>
+					 
+				  </div>
+	        <video id="meVideo" :class="callType==3?'':'callVideo'" class="twoVideo"></video>
+	       <span class="glyphicon glyphicon-volume-down"></span>
+	       <span class="glyphicon glyphicon-off"></span>
 	</div>
-    </el-dialog>
   </div>
 </template>
 
@@ -93,8 +116,10 @@
   let deptsList = ref([])
   let dialogTableVisible = ref(false)
   let dialogTableVisible2 = ref(false)
+  let dialogTableVisible3 = ref(false)
+  let callType = ref(3)
   let dialogComVideo = ref(false)
-  const webrtcInstance = new MyWebrtc();
+  const webrtcInstance = new MyWebrtc()
   const getComDepts = async () => {
     let res = await getComDeptsApi()
     deptsList.value = res.data
@@ -110,18 +135,58 @@
 	  dialogTableVisible2.value = true
     // location.href="http://192.168.0.2:81/";
   }
+  let progressVal = ref(null)
+  let timer = ref(null)
+  watch(
+    () => dialogTableVisible.value,
+    (val) => {
+	  // comRegister();
+	  
+	
+    }
+  )
   const doCallTel = (item) => {
+	  callType.value = 1
+    dialogTableVisible3.value=true;
+	nextTick(()=>{
 		webrtcInstance.JsSip_VoiceCall('15123854798',true);
-    dialogComVideo.value=true;
+	})
   }
   const doCallVoice = (item) => {
+	  callType.value = 2
+	  dialogTableVisible3.value=true;
+	  
+	  nextTick(()=>{
 		  webrtcInstance.JsSip_VoiceCall('854798',false);
-    dialogComVideo.value=true;
+	  })
+    
   }
   const doCallVideo = (item) => {
+	  callType.value = 3
+	  dialogTableVisible3.value = true;
+	  nextTick(()=>{
 		  webrtcInstance.JsSip_VoiceCall('854798',true);
-    dialogComVideo.value=true;
+	  })
   }
+  // 接听
+  const ansWerPhone = ()=> {
+  	//调用语音接听方法
+	  nextTick(()=>{
+		webrtcInstance.VoiceAnsWter();
+		thState.value = false
+	  })
+  }
+  const huangUp = ()=>{
+	  // clearInterval(timer.value)
+	  //调用挂断方法
+	  dialogTableVisible3.value = false;
+	  webrtcInstance.JsSip_hangUpPhone();
+	  
+  }
+  const closeTh = ()=>{
+	  huangUp()
+  }
+  
   const handleDepsUser = async (id, item) => {
     gridTitle.value = item.name
     dialogTableVisible.value = true
@@ -129,16 +194,120 @@
     gridData.value = res.data
   }
   const comRegister = () => {
+	//初始化
+	nextTick(()=>{
 		webrtcInstance.jssipAgent('101','192.168.77.8','7066','Admin246246246',null,null,null);
+		// console.log(webrtcInstance.changeAgent)
+		webrtcInstance.changeAgent.on('newRTCSession',(res)=>{
+			timer.value = setInterval(()=>{
+				 progressVal.value = webrtcInstance.callPoneState()
+				 // console.log(progressVal.value,'progressVal.value')
+				 if(progressVal.value.includes('来电')){
+					 dialogTableVisible3.value = true;
+					 thState.value = true
+				 }else if( progressVal.value == '呼叫停止'){
+					 thState.value = false
+					 // dialogTableVisible3.value = false;
+					 // clearInterval(timer.value)
+				 }else if( progressVal.value == '已挂断'){
+					 thState.value = false
+					 closeTh()
+				 }else{
+					 thState.value = false
 				 }
+			},1000)
+		})
+	
+	})
+  }
+  let thState = ref(false)
   onMounted(() => {
     getComDepts()
     getComRecord()
-    comRegister();
+	comRegister()
+	return false
+	timer.value = setInterval(()=>{
+		 progressVal.value = webrtcInstance.callPoneState()
+		 console.log(progressVal.value,'progressVal.value')
+		 if(progressVal.value.includes('来电')){
+			 dialogTableVisible3.value = true;
+			 thState.value = true
+		 }else if( progressVal.value == '呼叫停止'){
+			 thState.value = false
+			 dialogTableVisible3.value = false;
+			 // clearInterval(timer.value)
+		 }else if( progressVal.value == '已挂断'){
+			 thState.value = false
+			 closeTh()
+		 }else{
+			 thState.value = false
+		 }
+	},1000)
   })
 </script>
 
 <style lang="scss" scoped>
+	.th-box{
+		margin:0 auto;
+	}
+	.callVideo{
+		opacity: 0 !important;
+	}
+	.flex-hj{
+		display: flex;
+		align-items: center;
+		position:relative;
+		// width:1050px;
+		// height:900px;
+		text-align: center;
+	}
+	.tell-flex{
+		margin:0 auto;
+	}
+	.hj-box{
+		text-align: center;
+		position:absolute;
+		left:0;
+		width:100%;
+		color:#fff;
+		font-size:vw(40);
+		.hj-ico{
+			width:vw(200);
+			margin-bottom:vh(20);
+		}
+		
+	}
+	.closeCall{
+		position:absolute;
+		right:0;
+		top:10px;
+		z-index: 6000;
+	}
+	.videoPrefecture_video{
+		position:relative;
+		min-height:600px;
+		position: absolute;
+		background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
+		top:50%;
+		
+		left:50%;
+		transform: translate(-50%,-50%);
+		z-index: 4999;
+		.oneVideo{
+			width:100%;
+			height:100%;
+		}
+		.twoVideo{
+			position:absolute;
+			bottom:20px;
+			right:20px;
+		}
+		.gd-ico{
+			position:absolute;
+			right:50px;
+			top:50px;
+		}
+	}
 	:deep(.el-dialog__headerbtn .el-dialog__close){
 		color:#fff;
 		font-size:40px;

src/layout/components/Header/index.vue

@@ -233,7 +233,6 @@
   let monitorDefaultData = ref(null)
   // 设置当前路由导航栏
   const setNav = async () => {
-	  console.log(monitorDefaultData.value,'setNav 测试 ++++++++++++')
     navLeft.value = []
     navRight.value = []
     otherLeftNav.value = []
@@ -246,11 +245,12 @@
         navLeft.value = [
 		  { name: '景区', path: '/scenic' },
           { name: '监控', path: '/monitor' },
-          { name: '交通', path: '/traffic' }
+          { name: '交通', path: '/traffic' },
+		  { name: '收藏', path: '/collect' },
         ]
         navRight.value = [
 		  { name:'车船', path:'/vehicles'},
-          // { name: '工单', path: '/workOrder' },
+          { name: '工单', path: '/workOrder' },
           { name: '舆情', path: '/sentiment' },
           { name: '场馆', path: '/hotel' }
         ]
@@ -293,6 +293,10 @@
         title.value = '交通大屏'
         isBack.value = true
         break
+	  case '/collect':
+		  title.value = '核心视频'
+		  isBack.value = true
+		  break
       case '/monitor':
         title.value = '监控大屏'
         isSkip.value = false
@@ -413,10 +417,10 @@
 <style scoped lang="scss">
 	.amplify{
 		position:absolute;
-		right:vw(550);
+		right:vw(20);
-		top:vh(50);
+		top:vh(20);
 		.icon-qp{
-			width:vw(50);
+			width:vw(30);
 		}
 	}
   .header {

src/router/index.js

@@ -64,6 +64,11 @@ const router = createRouter({
 		  name: 'vehicles',
 		  component: () => import('@/views/vehicles/index.vue')
 		},
+		{
+		  path: '/collect',
+		  name: 'collect',
+		  component: () => import('@/views/collect/index.vue')
+		},
       ]
     },
     {

src/views/collect/components/video-box.vue

@@ -0,0 +1,929 @@
+<template>
+  <div class="video-box">
+	  <div v-if="videoLog == 1" class="video-wrapper">
+	    <div class="video-list">
+			<!-- <div class="empty-box" v-if="videoList.length==0&&cond">
+						未接入
+			</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"
+					@start="onStart" @end="onEnd">
+					<template #item="{ element }">
+						<div class="video-item" :style="{
+							width:(100/grad)+'%'
+						}">
+							
+							<div class="video-item__inner">
+								<div
+									v-if="element.isDiy == 1"
+									class="video-item__follow"
+									@click.stop="handleCollect(element.cameraIndexCode, element.isDiy, index,element)"
+									>取消收藏
+								</div>
+								<div
+									v-if="element.isDiy == 0"
+									class="video-item__unfollow"
+									@click.stop="handleCollect(element.cameraIndexCode, element.isDiy, index,element)"
+									>收藏
+								</div>
+								<video
+									class="video-item__video"
+									:id="'monitorVideo' + element.cameraIndexCode"
+									preload="auto"
+									muted
+									autoplay
+									:controls="false"
+								/>
+								<p class="video-item__title--primary">
+									{{ element.cameraName || element.scenicAreaId }}
+								</p>
+							</div>
+						</div>	
+					</template>
+				
+				</draggable>
+			</div>
+			
+	    </div>
+	   <!-- <div class="pagination">
+	      <el-pagination
+	        v-model:current-page="params.pageNum"
+	        :page-size="params.pageSize"
+	        :total="total"
+	        background
+	        layout="prev, pager, next"
+	        @current-change="currentChange"
+	      />
+	    </div> -->
+	  </div>
+
+   <!-- <ul class="videos">
+      <li class="video-item" v-for="item in 8" :key="item">
+        <img src="@/assets/images/sxzd.png" alt="" />
+        <p>
+          <span>核心路段：这是一条信息说明</span>
+        </p>
+      </li>
+    </ul> -->
+  <!--  <div class="pagination-box">
+      <el-pagination background layout="prev, pager, next" :total="1000" />
+    </div> -->
+  </div>
+  <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy"  :isCollect="isCollect" :src="videoSrc" />
+</template>
+
+<script setup>
+	import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi } from '@/api/home'
+	import {
+	  getVideoTypeApi,
+	  getVideoRegionsApi,
+	  postVideoRemainApi,
+	  postVideoControlApi,
+	  postVideoCollectApi
+	} from '@/api/monitor'
+	import draggable from 'vuedraggable';
+	import pubSub from 'pubsub-js'
+	import Hls from 'hls.js'
+	import emptyIco from '@/assets/images/n-icon.png'
+	import { debounce } from 'lodash'
+	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 cond = ref(false)
+	let ACTION = '0'
+	let hlsRefs = []
+	let hlsRef = null
+	let timer = null
+	let videoLog = ref(1)
+	let videoList = ref([])
+	let cameraIndexCode = ref('')
+	let videoRef = ref()
+	let monitorChange = null
+	let total = ref(0)
+	let loading = ref(false)
+	let command = ref('')
+	let cameraName = ref('')
+	let regionList = ref()
+	let params = reactive({
+	    businessScenicArea: "",
+	    cameraName: "",
+		pageNum: 1,
+		pageSize: 6,
+	})
+	let grad = ref(3)
+	let show = ref(false)
+	const onMonitorChange = () => {
+	  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
+	    params.businessScenicArea = data.name
+	    params.pageNum = 1
+	    videoList.value = []
+	    total.value = 0
+		cond.value = false
+	    getRegionsList()
+	  })
+	}
+	const onStart = (res)=>{
+		
+	}
+	const onEnd = (evt)=>{
+		 const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
+		 console.log(evt,itemIndex,'eeeeeeee')
+		getVideCollectCateSort({
+			key:videoList.value[itemIndex].key,
+			cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
+		}).then((ress)=>{
+			
+			videoList.value[itemIndex] = newList
+		})
+		
+	}
+	// 获取关注列表
+	const  getVideCollectCateList = async () => {
+		clearHlsRefs()
+		params.businessVideoDisplayPosition = ''
+	  let res = await getVideCollectCate(params)
+	  videoList.value = res.data
+	  console.log(res,videoList.value.length,'ressssssssssssss')
+	  if(videoList.value.length<=3){
+		  grad.value = 3
+	  }else if(videoList.value.length<=6){
+		  grad.value = 2
+	  }else{
+		  grad.value = 1
+	  }
+	  postVideoRemain()
+	  // total.value = res.total
+	  
+	  initVideo()
+	}
+	// 收藏
+	const handleCollect = async (id, status, index,element) => {
+	  await getColletDiyApi({
+	    cameraIndexCode:id,
+	    isDiy: status == 0 ? 1 : 0
+	  })
+	  if (status == 0) {
+		  
+	    element.isDiy = 1
+		
+	  } else {
+		  
+	    element.isDiy = 0
+	  }
+	  // pubSub.publish('videoCollect', id)
+	}
+	// 采集
+	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 handleBack = () => {
+	  videoLog.value = 1
+	  hlsRef.destroy()
+	  initVideo()
+	}
+	let isCollect = ref(0)
+	let isDiy = ref(0)
+	let videoSrc = ref('')
+	const handleCamera = async (itemCode,resource) => {
+	  show.value = true
+	  let res = await getPreviewUrlApi({
+	    type: 'hls',
+	    cameraIndexCode:itemCode
+	  })
+	  cameraIndexCode.value = itemCode;
+	  isCollect.value = resource.isCollect
+	  isDiy.value = resource.isDiy
+	  videoSrc.value = res.data.url
+	}
+	//清除 hls
+	const clearHlsRefs = () => {
+	  if (hlsRefs.length > 0) {
+	    hlsRefs.map((item) => {
+	      item.destroy()
+	    })
+	    hlsRefs = []
+	  }
+	}
+	// 分页
+	const currentChange = (e) => {
+	  clearHlsRefs()
+	  videoList.value = []
+	  getRegionsList()
+	}
+
+	let thisVideo = ref(null)
+	const handleItemVideo = (url, type, code,item) => {
+	  thisVideo.value = item
+	  videoLog.value = 2
+	  cameraIndexCode.value = code
+	  setTimeout(() => {
+	    hlsRef = new Hls({
+	      maxBufferLength: 10, // 最大缓冲长度（秒）
+	      maxMaxBufferLength: 15, // 缓冲区长度的上限
+	      maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+	    })
+	    hlsRef.loadSource(url)
+	    hlsRef.attachMedia(videoRef.value)
+	    hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
+	      videoRef.value.play()
+	    })
+	    if (type == 100) initVideo()
+	  }, 1000)
+	}
+	const initVideo = () => {
+	  clearHlsRefs()
+	  nextTick(() => {
+	    videoList.value.forEach(async (it, i) => {
+			
+			it.videos.forEach((item,index)=>{
+				 setTimeout(() => { 
+					const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
+					if(item.hlsUrl){
+						const hls = new Hls({
+						  maxBufferLength: 10, // 最大缓冲长度（秒）
+						  maxMaxBufferLength: 15, // 缓冲区长度的上限
+						  maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+						})
+						hls.loadSource(item.hlsUrl)
+						hls.attachMedia(video)
+						hls.on(Hls.Events.MANIFEST_PARSED, () => {
+						  video.play()
+						})
+						hlsRefs.push(hls) 
+					} 
+				 }, 2000)
+				
+			})
+	     
+	    })
+	  })
+	}
+	watch(
+	  () => videoList.value,
+	  (val) => {
+	    if (val.length) {
+	      postVideoRemain()
+	    }
+	  },
+	  { immediate: true }
+	)
+	// 更新视频
+	const postVideoRemain = async () => {
+	  timer = setInterval(() => {
+		
+		  videoList.value.forEach((items,index)=>{
+			  setTimeout(()=>{
+				  postVideoRemainApi({
+				    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
+				  })
+			  },1500)
+			
+		  })
+	   
+	  }, 1500)
+	}
+	const getVideoRegions = async () => {
+	  let res = await getVideoRegionsApi({
+	    cameraName: cameraName.value,
+	    businessScenicArea: params.businessScenicArea
+	  })
+	  console.log(res,11111111111111)
+	  regionList.value = res.data
+	  regionList.value.forEach((item,index)=>{
+	  	// item.show = true
+	  	item.videoResources=item.resourcesList[0].videoResources
+	  })
+	  regionList.value[0].show = true
+	  
+	}
+	const handleRegions = (e) => {
+	  regionList.value[e].show = !regionList.value[e].show
+	}
+	const onInput = debounce((e) => {
+	  getVideoRegions()
+	}, 500)
+	let hotelChange = null;
+	onMounted(()=>{
+		getVideCollectCateList()
+		console.log(draggable,'draggable')
+	})
+	onUnmounted(() => {
+	  clearHlsRefs()
+	
+	})
+</script>
+<style></style>
+<style scoped lang="scss">
+	.type-item{
+		// width:32.5%;
+		flex: 1;
+		border:vw(2) solid #0096FF;
+		padding:vh(40) vw(20);
+		position:relative;
+		height:vh(900);
+		padding-bottom:vh(20);
+		.item-element{
+			display: flex;
+			align-items: flex-start;
+			height:100%;
+			flex-wrap: wrap;
+			 // gap: vw(10);
+			// width:vw(800);
+			&::-webkit-scrollbar {
+			  width: vw(4); /* 滚动条的宽度 */
+			}
+			/* 滚动条轨道 */
+			&::-webkit-scrollbar-track {
+			  background: 'transparent'; /* 轨道的背景色 */
+			}
+			/* 滚动条滑块 */
+			&::-webkit-scrollbar-thumb {
+			  background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+			  border-radius: 5px; /* 滑块的圆角 */
+			}
+			overflow: auto;
+		}
+	
+		.type-title{
+			position:absolute;
+			left:vw(-5);
+			top:0;
+			color:#fff;
+			background: url(@/assets/images/nav-l-t-bg.png) no-repeat;
+			background-size: 100%;
+			width:100%;
+			height:vh(30);
+			padding:0 vw(30);
+			font-size:vw(24);
+			line-height:vh(30);
+			// line-height: vh(40);
+		}
+	}
+	 .type-item:first-child {
+	    margin-right: vw(20);
+	  }
+	  .type-item:last-child {
+	    margin-left:  vw(20);
+	  }
+	.item-sc{
+	  padding:vw(10);
+	}
+	.empty-box{
+		display:flex;
+		align-items: center;
+		font-size:vw(40);
+		height:vh(750);
+		justify-content: center;
+		text-align:center;
+		width:100%;
+		color:#fff;
+	}
+	.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);
+	    }
+	  }
+	}
+  .video-box {
+	display: flex;
+	flex: 1;
+    flex: 1;
+    height: vh(950);
+    margin-top: vh(120);
+    margin-left: vw(10);
+    padding: vh(34) vw(26);
+    box-sizing: border-box;
+    // background-image: url('@/assets/images/one-video-bg.png');
+    background-size: 100% 100%;
+    .videos {
+      display: flex;
+      flex-wrap: wrap;
+      gap: vw(6);
+      .video-item {
+        position: relative;
+        width: vw(210);
+        height: vh(380);
+        padding: vh(12) vw(12);
+        box-sizing: border-box;
+        background-image: url('@/assets/images/item-primary.png');
+        background-size: 100% 100%;
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+        > p {
+          position: absolute;
+          width: calc(100% - vw(24));
+          height: vh(40);
+          bottom: vh(12);
+          background: rgba(4, 30, 69, 0.72);
+          > span {
+            padding-left: vw(20);
+            font-weight: 400;
+            font-size: vw(14);
+            color: #ffffff;
+            line-height: vh(40);
+          }
+        }
+      }
+    }
+    .pagination-box {
+      margin-top: vh(30);
+      margin-right: vw(50);
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+  .video {
+    &-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      // margin-top: vh(40);
+      margin-left: vw(10);
+      // padding: vh(30) vw(20);
+      // box-sizing: border-box;
+      // background-image: url('/src/assets/images/log-v-bg.png');
+      // background-size: 100% 100%;
+      .pagination {
+        padding: vh(10) vw(30);
+        position: absolute;
+        right: vw(30);
+        bottom: vh(20);
+      }
+    }
+    &-list {
+      // gap: vw(3);
+	  
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+	  // height:vh(890);
+	  // width:vw(800);
+	  // &::-webkit-scrollbar {
+	  //   width: vw(4); /* 滚动条的宽度 */
+	  // }
+	  // /* 滚动条轨道 */
+	  // &::-webkit-scrollbar-track {
+	  //   background: 'transparent'; /* 轨道的背景色 */
+	  // }
+	  // /* 滚动条滑块 */
+	  // &::-webkit-scrollbar-thumb {
+	  //   background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+	  //   border-radius: 5px; /* 滑块的圆角 */
+	  // }
+	  // overflow: auto;
+	  
+    }
+    &-item {
+      position: relative;
+      // width: vw(720);
+	  // width:48%;
+	  // margin-right: 1%;
+      height: vh(380);
+      padding: vh(10) vw(10);
+	  box-sizing: border-box;
+	  // margin-bottom:1%;
+      background-image: url('/src/assets/images/item-primary.png');
+      background-size: 100% 100%;
+      &:hover {
+        .video-item__follow {
+          display: block !important;
+        }
+      }
+    }
+    &-item__follow {
+      cursor: pointer;
+      display: none;
+      position: absolute;
+      right: vw(8);
+      top: vw(8);
+      z-index: 9999;
+      padding: 0 vw(20);
+      height: vh(24);
+      text-align: center;
+      line-height: vh(24);
+      font-weight: 400;
+      font-size: vw(16);
+      color: #ffffff;
+      background-image: url('@/assets/images/unfollow.png');
+      background-size: 100% 100%;
+    }
+    &-item__unfollow {
+      @extend .video-item__follow;
+      background-image: url('@/assets/images/unfollow.png');
+    }
+
+    &-item__inner {
+      position: relative;
+    }
+    &-item__title {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      padding: vh(10) vw(10);
+      color: #fff;
+      font-size: vw(14);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      z-index: 999;
+    }
+    &-item__title--error {
+      @extend .video-item__title;
+      background-color: rgba(226, 27, 27, 0.72);
+    }
+    &-item__title--primary {
+      @extend .video-item__title;
+      background-color: rgba(4, 30, 69, 0.72);
+    }
+    &-item__video {
+      width: 100%;
+      height: vh(366);
+      object-fit: fill;
+    }
+    &-detail {
+      margin-left: vw(10);
+      display: flex;
+      justify-content: space-between;
+    }
+    &-detail__wrapper {
+      position: relative;
+      padding: vh(40) vw(50);
+      width: vw(2060);
+      height: vh(960);
+      // background-image: url('/src/assets/images/one-video-bg.png');
+      // background-size: 100% 100%;
+    }
+    &-detail__title {
+      position: absolute;
+      left: vw(50);
+      right: vw(50);
+      top: 40 (vh);
+      z-index: 9;
+      font-weight: 400;
+      font-size: vw(14);
+      color: #ffffff;
+      padding: vw(20);
+      display: flex;
+      justify-content: space-between;
+      background: rgba(4, 30, 69, 0.5);
+    }
+    &-detail__video {
+      width: 100%;
+      height: vh(780);
+      object-fit: contain;
+      background-color: #000;
+    }
+    &-right {
+      margin-left: vw(8);
+      width: vw(440);
+      height: vh(890);
+      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(870);
+        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);
+        height: vh(950);
+        background: radial-gradient(
+          to bottom 70% at 99% 50%,
+          #0a4190 0%,
+          rgba(0, 77, 136, 0.6) 100%
+        );
+        border-radius: 0px 0px 0px 0px;
+        border: 1px solid;
+        opacity: 0.4;
+        border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+        margin-left: vw(10);
+        padding: vw(20);
+        .rt-v-box {
+          overflow-y: auto;
+          /* 滚动条整体样式 */
+          &::-webkit-scrollbar {
+            width: vw(4); /* 滚动条的宽度 */
+          }
+          /* 滚动条轨道 */
+          &::-webkit-scrollbar-track {
+            background: 'transparent'; /* 轨道的背景色 */
+          }
+          /* 滚动条滑块 */
+          &::-webkit-scrollbar-thumb {
+            background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+            border-radius: 5px; /* 滑块的圆角 */
+          }
+          height: 100%;
+        }
+        .title {
+          background-image: url('/src/assets/images/nav-l-t-bg.png');
+          background-size: 100% 100%;
+          margin-bottom: vh(10);
+          position: relative;
+          left: vw(-20);
+          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;
+          }
+        }
+        .rt-video {
+          width: 100%;
+          height: vh(300);
+          background-image: url('/src/assets/images/v-item-bg.png');
+          background-size: 100% 100%;
+          padding: vw(20);
+          box-sizing: border-box;
+          margin-bottom: vh(2);
+          position: relative;
+          .desc {
+            position: absolute;
+            width: 100%;
+            left: 0;
+            bottom: 0;
+            z-index: 9;
+            background: rgba(4, 30, 69, 0.5);
+            border-radius: 0px 0px 0px 0px;
+            text-align: center;
+            font-weight: 400;
+            font-size: vw(14);
+            color: #ffffff;
+            padding: vw(20);
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+        .v-error-bg {
+          background-image: url('/src/assets/images/v-item-bg-1.png');
+          background-size: 100% 100%;
+          .desc {
+            background: rgba(226, 27, 27, 0.5);
+          }
+        }
+      }
+    }
+}
+ .left-nav {
+    margin: 0 vw(8);
+    width: vw(250);
+    background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
+    .bom-box {
+      margin-top: vh(20);
+      .search-box {
+        border-radius: vw(2);
+        height: vh(36);
+        border: 1px solid #0096ff;
+        margin: vh(10) auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .search-icon {
+          width: vw(20);
+          height: vw(20);
+          margin-right: vw(10);
+        }
+      }
+
+      .tree-box {
+        position: relative;
+        height: vh(750);
+        padding: 0 vw(20);
+        overflow-y: auto;
+        overflow-x: hidden;
+        /* 滚动条整体样式 */
+        &::-webkit-scrollbar {
+          width: vw(4); /* 滚动条的宽度 */
+        }
+        /* 滚动条轨道 */
+        &::-webkit-scrollbar-track {
+          background: 'transparent'; /* 轨道的背景色 */
+        }
+        /* 滚动条滑块 */
+        &::-webkit-scrollbar-thumb {
+          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+          border-radius: 5px; /* 滑块的圆角 */
+        }
+        .tree-item {
+          cursor: pointer;
+          position: relative;
+          padding-top: vh(20);
+          // border-left: vw(2) solid #37d8fc;
+          &:nth-child(1) {
+            padding-top: 0;
+          }
+          &__node {
+            position: relative;
+            display: flex;
+            align-items: flex-start;
+          }
+          &__icon {
+            margin-left: vw(-8);
+            width: vw(16);
+            height: auto;
+          }
+          &__icon-up {
+            @extend .tree-item__icon;
+            transform: rotate(180deg);
+          }
+          &__name {
+            padding: 0 vw(20);
+            display: block;
+            font-weight: 400;
+            font-size: vw(15);
+            color: #ffffff;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+          &__child {
+            position: relative;
+            margin-top: vh(20);
+            margin-left: vw(20);
+            // border-left: vw(2) solid #37d8fc;
+          }
+          &-top__icon {
+            position: absolute;
+            left: vw(-8);
+            top: vh(0);
+            width: vw(16);
+            height: vw(16);
+          }
+          &-bottom__icon {
+            position: absolute;
+            left: vw(-8);
+            bottom: vh(0);
+            width: vw(16);
+            height: vw(16);
+          }
+          &__child-item {
+            padding: vh(0) vw(20) vh(20) vw(20);
+            cursor: pointer;
+            color: rgb(192,216,254);
+            font-weight: 400;
+            font-size: vw(15);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: flex;
+            align-items: flex-start;
+            &:nth-last-of-type(1) {
+              padding: vh(0) vw(20);
+            }
+          }
+        }
+      }
+    }
+}
+ //背景色设置为透明
+  :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;
+  }
+  :deep(.el-input__inner) {
+    height: vh(36);
+    font-size: vw(16);
+    color: #ffffff;
+  }
+</style>

src/views/collect/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <video-box />
+</template>
+
+<script setup>
+  import videoBox from './components/video-box'
+</script>

src/views/scenic/components/box-1.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="box-1" :class="homeStore.amplify?'':'coll-box'">
     <div class="header">
-     <div class="header__left" @click="handlePiaoPop">
+     <div class="header__left" >
         <img src="@/assets/images/ticket.png" />
         <div
           class="header__left-item"
           v-for="(item, index) in scenicStore.scenicSpotData.data"
           :key="index"
+		  @click="index==0?handlePop2:handlePiaoPop"
         >
           <div class="label">{{ item.name }}</div>
           <countup :end-val="item.value" />
@@ -118,6 +119,24 @@
 	    </div>
 	  </div>
 	</el-dialog>
+	<el-dialog :title="'徒步客流统计'" center v-model="dialogTableVisible2">
+	  <div class="bom-box">
+	    <div class="table">
+			<div class="header-title">{{gridTitle}}</div>
+	      <div class="header">
+	        <div>订票时间</div>
+	        <div>订票数量</div>
+	      </div>
+	      <div class="list">
+	        <div class="item" v-for="(item, index) in gridData" :key="index">
+	          <div>{{ item.time }}</div>
+	          <div>{{ item.value }}</div>
+	
+	        </div>
+	      </div>
+	    </div>
+	  </div>
+	</el-dialog>
   </div>
   <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
 
@@ -132,7 +151,7 @@
   import { useScenicStore } from '@/stores/scenic'
   
   import { useMap } from '@/hooks/map'
-  import {getPreviewUrlApi,getSpotTicketDate} from "@/api/home.js";
+  import {getPreviewUrlApi,getSpotTicketDate,getSpotPassengerFlow} from "@/api/home.js";
 import pubSub from 'pubsub-js'
   const router = useRouter()
   const scenicStore = useScenicStore()
@@ -173,9 +192,21 @@ import pubSub from 'pubsub-js'
     }
   });
   let dialogTableVisible = ref(false)
+  let dialogTableVisible2 = ref(false)
   let gridData = ref([])
   let gridTitle = ref('')
+  let girdAll = ref([])
+  const handlePop2 = async()=>{
+	  console.log(5555555555)
+	  return false
+	  dialogTableVisible2.value = true
+	  let res = await getSpotPassengerFlow({scenicSpotId:props.scenicSpotId})
+	  girdAll.value = res.data
+	  console.log(res,'res')
+  }
   const handlePiaoPop = async()=>{
+	  console.log(66666666666)
+	  return false
 	  dialogTableVisible.value = true
 	  let res = await getSpotTicketDate({scenicSpotId:props.scenicSpotId})
 	  gridData.value = res.data

src/views/scenic/components/box-2.vue

@@ -3,24 +3,27 @@
     <div class="flex">
       <div class="box mr-8">
         <Title1 title="排队信息" />
-        <div @click="handleLineUp()" 
+        <div
 		style="cursor: pointer;" 
 		class="count-box flex justify-between">
           <count-item
             label="今日入园人数"
             :count="scenicStore.scenicQueueData.header.jrjdrs"
             suffix="人"
+			@click="handlePop2()"
           />
 		  <count-item
 		     label="今日出园人数"
 		     :count="scenicStore.scenicQueueData.header.jrjdcy"
 		     suffix="人"
+			  @click="handleLineUp()" 
 		   />
           <count-item
             label="排队人数"
             :count="scenicStore.scenicQueueData.header.pdrs"
             :color="scenicStore.scenicQueueData.header.pdrs_type == 0 ? '' : '#E21B1B'"
             suffix="人"
+			 @click="handleLineUp()" 
           />
         </div>
         <div class="border">
@@ -303,6 +306,39 @@
         </div>
       </div>
     </div>
+	<el-dialog :title="'徒步客流统计'" center v-model="dialogTableVisible2">
+	  <div class="bom-box">
+	    <div class="table">
+			<div class="header-title">{{gridTitle}}</div>
+	      <div class="header">
+	        <div @click="handleTabPassFlow(0)" :class="hIndex==0?'h-active':''" >路段</div>
+	        <div @click="handleTabPassFlow(1)" :class="hIndex==1?'h-active':''">点位</div>
+	      </div>
+	      <div class="list">
+			  <div class="item">
+				 <div>名称</div>
+				 <div>进入</div>
+				 <div>离开</div>
+				 <div>保有量</div>
+			  </div>
+	        <div class="item" v-if="hIndex==0" v-for="(item, index) in tjArr.groups" :key="index">
+	          <div>{{ item.title }}</div>
+	          <div>{{ item.enter }}</div>
+			  <div>{{ item.exit }}</div>
+			  <div>{{ item.holdValue }}</div>
+	
+	        </div>
+			<div class="item" v-if="hIndex==1" v-for="(item, index) in tjArr.single" :key="index">
+				 <div>{{ item.title }}</div>
+				 <div>{{ item.enter }}</div>
+				 <div>{{ item.exit }}</div>
+				 <div>{{ item.holdValue }}</div>
+				
+			</div>
+	      </div>
+	    </div>
+	  </div>
+	</el-dialog>
   </div>
   <big-map
     v-model="show"
@@ -320,7 +356,7 @@
   import carIcon from '@/assets/images/car.png'
   import carStopIcon from '@/assets/images/car-stop.png'
   import carOfflineIcon from '@/assets/images/car-offline.png'
-
+  import {getSpotPassengerFlow} from "@/api/home.js";
   import shipIcon from '@/assets/images/ship.png'
   import shipStopIcon from '@/assets/images/ship-stop.png'
   import shipOfflineIcon from '@/assets/images/ship-offline.png'
@@ -349,7 +385,18 @@
   const handleLineUp = (item)=>{
   	  allShow.value = true
   	  events.value = item
-  	  console.log(item,7777777)
+  }
+  let dialogTableVisible2 = ref(false)
+  let tjArr = ref([])
+  let hIndex = ref(0)
+  const handleTabPassFlow = (index)=>{
+	  hIndex.value = index;
+  }
+  const handlePop2 = async()=>{
+  	  dialogTableVisible2.value = true
+  	  let res = await getSpotPassengerFlow({scenicSpotId:props.scenicSpotId})
+  	  tjArr.value = res.data
+  	  console.log(res,'res')
   }
   let show = ref(false)
   let scenicChange = null
@@ -505,7 +552,404 @@
     PubSub.unsubscribe(scenicChange)
   })
 </script>
+<style scoped lang="scss">
+	.h-active{
+		background-color: #fff;
+		color:#0063ff;
+	}
+	.coll-box{
+		flex:1 !important;
+	}
+  .box-1 {
+    margin-top: vh(120);
+    width: vw(900);
+    height: vh(950);
+    padding: vw(10);
+    box-sizing: border-box;
+    background-image: url('@/assets/images/bg-3.png');
+    background-size: 100% 100%;
+    .header {
+      display: flex;
+      margin-top: vh(10);
+      &__left {
+        display: flex;
+        align-items: center;
+		margin-right:vw(10);
+		cursor:pointer;
+        > img {
+          width: vw(74);
+          height: auto;
+        }
+      }
+      &__left-item {
+        position: relative;
+        width: vw(120);
+        height: vh(58);
+        padding-left: vw(10);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-image: url('@/assets/images/ticket-item-bg.png');
+        background-size: 100% 100%;
+		// margin-left:vw(30);
+        .label {
+          position: absolute;
+          top: vh(-4);
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
+		  left:vw(0)
+        }
+      }
+      & > div:nth-child(2) {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        .label {
+          font-weight: 400;
+          font-size: vw(16);
+          color: #ffffff;
+        }
+        .value {
+          font-weight: bold;
+          font-size: vw(28);
+          color: #02f9fa;
+          text-align: center;
+          line-height: vh(60);
+        }
+        .warning {
+          color:#DCBB48;;
+        }
+        .error {
+          color: #ff4400;
+        }
+      }
 
+      .countup-wrap {
+        color: #02f9fa;
+        font-size: vw(28);
+        font-weight: bold;
+      }
+    }
+    .main {
+      width: 100%;
+      height: vh(600);
+      overflow-x: auto;
+      overflow-y: hidden;
+	  position:relative;
+	  .look-btn{
+		  cursor: pointer;
+		  position: absolute;
+		  right: vw(20);
+		  top: 6%;
+		  transform: translateY(-50%);
+		  padding: vw(20);
+		  display: flex;
+		  align-items: center;
+		  background: #0a4190;
+		  border-radius: vw(4);
+		  font-size: vw(16);
+		  font-weight:700;
+		  color: #fff;
+		  z-index: 999;
+		  img{
+			  width:vw(100);
+			  // height:;
+		  }
+	  }
+      .scenic-box {
+        width: 100%;
+        height: 100%;
+      }
+      /* 滚动条整体样式 */
+      &::-webkit-scrollbar {
+        height: vh(10); /* 滚动条的宽度 */
+      }
+      /* 滚动条轨道 */
+      &::-webkit-scrollbar-track {
+        background: 'transparent'; /* 轨道的背景色 */
+      }
+      /* 滚动条滑块 */
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+        border-radius: 5px; /* 滑块的圆角 */
+      }
+      > img {
+        width: auto;
+        height: 100%;
+      }
+    }
+    .footer {
+      .item {
+        flex: 1;
+        height: vh(140);
+        display: flex;
+        align-items: center;
+        background-image: url('@/assets/images/bg-3.png');
+        background-size: 100% 100%;
+        &:nth-child(1) {
+          margin-right: vw(10);
+        }
+        .bg {
+          padding-left: vw(20);
+          width: vw(243);
+          height: vh(40);
+          display: flex;
+          align-items: center;
+          background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
+          &:nth-child(1) {
+            margin-bottom: vh(4);
+          }
+          .label {
+            width: vw(120);
+            font-weight: 400;
+            font-size: vw(14);
+            color: #fff;
+          }
+          .value {
+            font-weight: bold;
+            font-size: vw(28);
+            color: #fff;
+          }
+          .success {
+            color: #02f9fa;
+          }
+          .error {
+            color: #e21b1b;
+          }
+        }
+      }
+      .list {
+        margin-top: vh(4);
+        height: vh(116);
+        overflow: hidden;
+      }
+      .cell {
+        display: flex;
+        margin-left: vw(4);
+        margin-top: vh(12);
+        &:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+        .tag {
+          padding: 0 vw(16);
+          font-weight: bold;
+          font-size: vw(14);
+          color: #fff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: vw(2);
+        }
+        .tag--important {
+          @extend .tag;
+          background: #feae00;
+        }
+        .tag--warn {
+          @extend .tag;
+          background: #d9011b;
+        }
+        .tag--normal {
+          @extend .tag;
+          background: #2380fb;
+        }
+        .content {
+          margin-left: vw(4);
+          padding: 0 vw(10);
+          width: vw(760);
+          height: vh(24);
+          line-height: vh(24);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
+          border-radius: vw(2);
+          background: rgba(0, 150, 255, 0.28);
+        }
+      }
+      .more {
+        cursor: pointer;
+        width: auto;
+        height: vh(100);
+        margin-top: vh(12);
+      }
+    }
+  }
+</style>
+<style lang="scss" scoped>
+	:deep(.el-dialog__headerbtn .el-dialog__close){
+		color:#fff;
+		font-size:40px;
+		position:relative;
+		top:15px;
+		right:15px;
+	}
+	:deep(.el-dialog__header.show-close){
+		padding-right:0;
+	}
+  :deep(.el-dialog) {
+    background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
+    background-size: 100% 100%;
+	width:vw(1500);
+  }
+  :deep(.el-dialog__title) {
+    color: #fff;
+    font-weight: bold;
+  }
+
+  .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(1070);
+    background-image: url('@/assets/images/bg-1.png');
+    background-size: 100% 100%;
+  }
+  .bom-box2{
+	  // margin-top:vh(10);
+	  min-width:vw(900);
+	  height:vh(800);
+
+  }
+  .header-title{
+  		  font-size:vw(32);
+  		  color:#fff;
+  		  text-align:center;
+  		  font-weight:bold;
+  		  margin-bottom:vh(20);
+
+  }
+  .bom-box {
+	  .table2{
+		  width:100%;
+		  height:vh(740);
+	  }
+    .table {
+      width: 100%;
+      margin-top: vh(5);
+      .header {
+        height: vh(28);
+        font-weight: 400;
+        font-size: vw(24);
+        color: #fff;
+        display: flex;
+        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
+        & > div {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .list {
+        overflow-y: auto;
+        height: vh(490);
+        /* 滚动条整体样式 */
+        &::-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(24);
+          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; /* 使用省略号表示文本溢出 */
+          }
+        }
+      }
+    }
+    .title {
+      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 {
+    width: 100%;
+    height: vh(500);
+    .icon-box {
+      font-weight: 400;
+      font-size: vw(14);
+      color: #ffffff;
+      line-height: vh(16);
+      flex-wrap: wrap;
+      .item {
+        cursor: pointer;
+        width: 50%;
+        margin-top: vh(40);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
+        & > img {
+          width: vw(54);
+          height: auto;
+        }
+      }
+    }
+    .title {
+      width: vw(260);
+      height: vh(26);
+      text-align: center;
+      line-height: vh(26);
+      margin-left: vw(32.5);
+      font-size: vw(16);
+      font-weight: 800;
+      color: #fff;
+      background-image: url('@/assets/images/title-1.png');
+      background-size: 100% 100%;
+    }
+  }
+</style>
 <style scoped lang="scss">
   .null-box {
     width: vw(360);

src/views/sentiment/index.vue

@@ -4,7 +4,7 @@
       <div class="box-1 mr-8">
         <Title1 title="最新舆情" />
         <div class="list">
-          <div class="item" v-for="(item, index) in hotNewList" :key="index">
+          <div class="item" @click="handleHot(item)" v-for="(item, index) in hotNewList" :key="index">
             <p
               :class="{
                 'status-error': item.type == '负面',
@@ -71,6 +71,55 @@
         <word-cloud />
       </div>
     </div>
+	<el-dialog :title="'舆情详情'" center v-model="dialogTableVisible">
+	  <div class="bom-box">
+	    <div class="table">
+			<div class="modal-body">
+				<div class="m-modal">
+					<!-- <div class="detail-item">
+									<span class="label">标识：</span>
+									<span class="value">{{ detailsHot.id }}</span>
+					</div> -->
+					<div class="detail-item">
+						<span class="label">文章作者：</span>
+						<span class="value">{{ detailsHot.newsAuthor }}</span>
+					</div>
+					<div class="detail-item">
+						<span class="label">情感属性：</span>
+						<span class="value">{{ detailsHot.newsEmotion }}</span>
+					</div>
+					
+				</div>
+				<div class="m-modal">
+					<div class="detail-item">
+						<span class="label">发布平台：</span>
+						<span class="value">{{ detailsHot.platformName }}</span>
+					</div>
+					<div class="detail-item">
+						<span class="label">发布时间：</span>
+						<span class="value">{{ detailsHot.newsPosttime }}</span>
+					</div>
+				</div>
+				<div class="m-modal">
+					
+					<div class="detail-item">
+						<span class="label">原文链接：</span>
+						<a :href="detailsHot.newsUrl" target="_blank" class="link">{{ detailsHot.newsUrl }}</a>
+					</div>
+				</div>
+				<div class="detail-item">
+					<span class="label">文章标题：</span>
+					<div class="content" v-html="detailsHot.newsTitle"></div>
+				</div>
+			  <div class="detail-item">
+				<span class="label">新闻内容：</span>
+				<div class="content" v-html="detailsHot.newsContent"></div>
+			  </div>
+			</div>
+	      
+	    </div>
+	  </div>
+	</el-dialog>
   </div>
 </template>
 
@@ -83,7 +132,8 @@
     getLineChartApi,
     getStateApi,
     getTotalApi,
-    getSpotApi
+    getSpotApi,
+	getGsdataDetailApi
   } from '@/api/sentiment.js'
  import { useHomeStore } from '@/stores/home'
  const homeStore = useHomeStore()
@@ -96,7 +146,15 @@
   let stateList = ref([])
   let options = ref([])
   let params = reactive({ id: '' })
-
+  let dialogTableVisible = ref(false)
+  let detailsHot = ref({})
+  // 详情
+  const handleHot = async(item)=>{
+	  let res = await getGsdataDetailApi(item.id)
+	  console.log(res)
+	  detailsHot.value = res.data
+	  dialogTableVisible.value = true
+  }
   const getStop = async () => {
     let res = await getSpotApi()
     options.value = res.data
@@ -136,6 +194,251 @@
     if (timer) clearInterval(timer)
   })
 </script>
+<style lang="scss" scoped>
+
+
+.modal-header h3 {
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 16px;
+  color:#fff;
+  height:vh(850);
+  overflow:auto;
+}
+.m-modal{
+	display: flex;
+	
+}
+.detail-item {
+	flex:1;
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+/* .label {
+  font-weight: bold;
+  color: #666;
+}
+
+.value {
+  color: #333;
+} */
+
+.link {
+  color: #1890ff;
+  text-decoration: none;
+  // font-size:vw(14);
+}
+
+.title {
+  margin: 8px 0;
+}
+
+.content {
+  white-space: pre-wrap;
+  line-height: 2;
+  color: #fff;
+  margin-top:vh(10);
+}
+
+.modal-footer {
+  padding: 16px;
+  border-top: 1px solid #eee;
+  text-align: right;
+}
+
+.confirm-btn {
+  padding: 8px 16px;
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+</style>
+<style lang="scss" scoped>
+	:deep(.el-dialog__headerbtn .el-dialog__close){
+		color:#fff;
+		font-size:40px;
+		position:relative;
+		top:15px;
+		right:15px;
+	}
+	:deep(.el-dialog__header.show-close){
+		padding-right:0;
+	}
+  :deep(.el-dialog) {
+    background: url('/src/assets/images/map-bg-2.png') no-repeat center;
+    background-size: 100% 100%;
+	// width:vw(1500);
+	height:vh(880);
+	// overflow:auto;
+  }
+  :deep(.el-dialog__title) {
+    color: #fff;
+    font-weight: bold;
+  }
+
+  .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(1070);
+    background-image: url('@/assets/images/bg-1.png');
+    background-size: 100% 100%;
+  }
+  .bom-box2{
+	  // margin-top:vh(10);
+	  min-width:vw(900);
+	  height:vh(800);
+
+  }
+  .header-title{
+  		  font-size:vw(32);
+  		  color:#fff;
+  		  text-align:center;
+  		  font-weight:bold;
+  		  margin-bottom:vh(20);
+
+  }
+  .bom-box {
+	  .table2{
+		  width:100%;
+		  height:vh(740);
+	  }
+    .table {
+      width: 100%;
+      margin-top: vh(5);
+      .header {
+        height: vh(28);
+        font-weight: 400;
+        font-size: vw(24);
+        color: #fff;
+        display: flex;
+        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
+        & > div {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .list {
+        overflow-y: auto;
+        height: vh(490);
+        /* 滚动条整体样式 */
+        &::-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(24);
+          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; /* 使用省略号表示文本溢出 */
+          }
+        }
+      }
+    }
+    .title {
+      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 {
+    width: 100%;
+    height: vh(500);
+    .icon-box {
+      font-weight: 400;
+      font-size: vw(14);
+      color: #ffffff;
+      line-height: vh(16);
+      flex-wrap: wrap;
+      .item {
+        cursor: pointer;
+        width: 50%;
+        margin-top: vh(40);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
+        & > img {
+          width: vw(54);
+          height: auto;
+        }
+      }
+    }
+    .title {
+      width: vw(260);
+      height: vh(26);
+      text-align: center;
+      line-height: vh(26);
+      margin-left: vw(32.5);
+      font-size: vw(16);
+      font-weight: 800;
+      color: #fff;
+      background-image: url('@/assets/images/title-1.png');
+      background-size: 100% 100%;
+    }
+  }
+</style>
 
 <style scoped lang="scss">