lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 监控大屏、安全检测

Browse Source
This commit is contained in:
duanliang
2024-12-18 10:40:53 +08:00
parent 111133ffb4
commit 4a6820831b
25 changed files with 1984 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/views/testing/components/box-3.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<!-- 视频 -->
<div class="box-3-content">
<div class="left-nav">
<div class="top-box">
<!-- <div class="title">监控切换</div> -->
<div class="ul">
<div class="li active">异常告警</div>
<div class="li">景区入口</div>
<div class="li">核心路段</div>
<div class="li">公共交通</div>
<div class="li">广场</div>
</div>
</div>
<div class="bom-box">
<div class="title">
<span>检索</span>
</div>
</div>
</div>
<!-- 视频 -->
<div class="video-box">
<div class="v-item" v-for="item in 15">
<!-- 视频 -->
<vue3VideoPlay
v-bind="options"/>
</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",
], //显示所有按钮,
});
// webscoket连接
</script>
<style lang="scss" scoped>
.box-3-content{
width:vw(2353);
height:vh(964);
// background-image: url('/src/assets/images/monotir-bg-1.png');
background-size: 100% 100%;
margin-top: vh(120);
display: flex;
.video-box{
flex:1;
// padding:vh(40) vw(20);
display:flex;
flex-wrap: wrap;
padding-top:0;
margin-left:vw(20);
.v-item{
width:vw(400);
height:vh(300);
background-image: url('/src/assets/images/v-item-bg.png');
background-size: 100% 100%;
padding:vw(20);
margin-right:vw(4);
margin-bottom:vh(4);
}
}
.left-nav{
margin-left:vw(20);
// margin-top:vh(35);
width:vw(250);
.bom-box{
margin-top:vh(20);
.title{
background-image: url('/src/assets/images/nav-l-t-bg.png');
background-size: 100% 100%;
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{
text-align: left;
font-weight: 400;
font-size: vw(18);
color: rgba(255,255,255,0.7);
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
.title{
font-weight: 600;
font-size: vw(15);
text-align: left;
font-style: normal;
text-transform: none;
height:vh(35);
line-height: vh(34);
padding-left:vw(20);
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
}
.ul{
.li{
background: url('/src/assets/images/m-nav-bg-1.png');
background-size: 100% 100%;
width:vw(250);
height:vh(58);
line-height:vh(58);
text-align: center;
margin-bottom:vh(15);
}
.active{
background: url('/src/assets/images/m-nav-bg-2.png');
background-size: 100% 100%;
// width:vw(178);
}
}
}
}
}
</style>