feat 监控大屏、安全检测

src/views/monitor/components/box-3.vue

@@ -21,12 +21,68 @@
 		</div>
 		<!-- 视频 -->
 		<div class="video-box">
-			<div class="v-item" v-for="item in 15"></div>
+			<div v-if="videoLog == 1" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
+				  <block  @click="handleItemVideo">
+					  <vue3VideoPlay  v-bind="options"/>
+				  </block>
+					
+			</div>
+			
+			<div class="video-live flex" v-if="videoLog==2">
+				<div class="video-lt">
+					<vue3VideoPlay  v-bind="options"/>
+				</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">
+							<vue3VideoPlay  v-bind="options"/>
+						</div>
+						
+					</div>
+					
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
+	import { fitChartSize } from '@/utils/dataUtil'
+	const options = reactive({
+	    src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
+	    type: 'm3u8', //视频类型
+		width:"100%",
+		height:"100%",
+		color: "#409eff", //主题色
+		title: "", //视频名称
+		muted: false, //静音
+		webFullScreen: false,
+		speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
+		autoPlay: true, //自动播放
+		loop: false, //循环播放
+		mirror: false, //镜像画面
+		ligthOff: false, //关灯模式
+		volume: 0.3, //默认音量大小
+		control: true, //是否显示控制
+		controlBtns: [
+		    // "audioTrack",
+		    // "quality",
+		    // "speedRate",
+		    // "volume",
+		    "setting",
+		    "pip",
+		    "pageFullScreen",
+		    "fullScreen",
+		], //显示所有按钮,
+	});
+	const videoLog = ref(1)
+	const handleItemVideo = ()=>{
+		console.log('单击视频')
+		videoLog.value = 2
+	}
 	
 </script>
 <style lang="scss" scoped>
@@ -44,6 +100,66 @@
 			flex-wrap: wrap;
 			padding-top:0;
 			margin-left:vw(20);
+			.video-live{
+				justify-content: space-between;
+				.video-lt{
+					width:vw(1655);
+					height:vh(950);
+					background-image: url('/src/assets/images/one-video-bg.png');
+					background-size: 100% 100%;
+				}
+				.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;
+						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);
+					}
+					.v-error-bg{
+						background-image: url('/src/assets/images/v-item-bg-1.png');
+						background-size: 100% 100%;
+					}
+				}
+			}
 			.v-item{
 				width:vw(400);
 				height:vh(300);
@@ -53,9 +169,13 @@
 				margin-right:vw(4);
 				margin-bottom:vh(4);
 			}
+			.v-error-bg{
+				background-image: url('/src/assets/images/v-item-bg-1.png');
+				background-size: 100% 100%;
+			}
 		}
 		.left-nav{
-			margin-left:vw(20);
+			margin-left:vw(10);
 			// margin-top:vh(35);
 			width:vw(250);
 			.bom-box{