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 17:00:46 +08:00
parent 4a12039789
commit 8114a56034
21 changed files with 1338 additions and 1270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/views/monitor/components/box-3.vue
View File

@@ -1,35 +1,20 @@
<template>
<!-- 视频 -->
<div class="box-3-content">
<navLeft></navLeft>
<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 v-if="videoLog == 1" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
<block @click="handleItemVideo">
<div class="flex video-one-1" v-if="videoLog == 1">
<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
<vue3VideoPlay v-bind="options"/>
</block>
</div>
</div>
<div class="video-live flex" v-if="videoLog==2">
<div class="video-lt">
<div class="video-lt v-error-bg">
<div class="desc">核心路段：这是一条信息说明</div>
<vue3VideoPlay v-bind="options"/>
</div>
<div class="video-rt">
@@ -38,6 +23,7 @@
</div>
<div class="rt-v-box">
<div class="rt-video v-error-bg" v-for="item in 8">
<div class="desc">核心路段：这是一条信息说明</div>
<vue3VideoPlay v-bind="options"/>
</div>
@@ -51,6 +37,8 @@
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import navLeft from '@/components/navLeft/index.vue'
let searchValue = ref('')
const options = reactive({
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
type: 'm3u8', //视频类型
@@ -86,27 +74,69 @@
</script>
<style lang="scss" scoped>
//背景色设置为透明
: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;
}
.box-3-content{
width:vw(2410);
width:vw(2356);
height:vh(965);
// 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);
.video-one-1{
background-image: url('/src/assets/images/log-v-bg.png');
background-size: 100% 100%;
flex-wrap: wrap;
padding-top:0;
padding:vh(30) vw(20);
margin-left:vw(20);
}
.video-live{
justify-content: space-between;
margin-left:vw(10) ;
.video-lt{
width:vw(1700);
width:vw(1666);
height:vh(950);
background-image: url('/src/assets/images/one-video-bg.png');
background-size: 100% 100%;
padding:vh(40) vw(50);
position:relative;
.desc{
position:absolute;
// width:100%;
left:vw(50);
right:vw(50);
top:40(vh);
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);
}
}
.video-rt{
width:vw(400);
@@ -153,15 +183,36 @@
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);
}
}
}
}
.v-item{
width:vw(420);
width:vw(400);
height:vh(300);
background-image: url('/src/assets/images/v-item-bg.png');
background-size: 100% 100%;
@@ -174,71 +225,6 @@
background-size: 100% 100%;
}
}
.left-nav{
margin-left:vw(10);
// 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>