Commit 8ea0f8fb authored by zhanglw's avatar zhanglw

视频监控布局变更

parent 27e5ba9a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="video111 videoKuang"> <div class="video111 videoKuang">
<el-container> <el-container>
<el-container style="display:flex;justify-content: space-between;"> <el-container style="display:flex;justify-content: space-between;">
<el-aside width="20vw" style="height: 89vh;margin-top: 5.5vh;z-index: 3;"> <el-aside width="20vw" style="height: 80vh;z-index: 3;">
<el-tree <el-tree
:data="videoData" :data="videoData"
:props="defaultProps" :props="defaultProps"
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="aiAnalysisRightViews"> <div class="aiAnalysisRightViews">
<div class="aiAnalysisRightViews_1"> <div class="aiAnalysisRightViews_1" style="display: none">
<!-- 智能AI分析 --> <!-- 智能AI分析 -->
<div class="aiAnalysisRightViews_1_title">智能AI分析</div> <div class="aiAnalysisRightViews_1_title">智能AI分析</div>
<div class="aiAnalysisRightViews_1_content"> <div class="aiAnalysisRightViews_1_content">
...@@ -62,14 +62,14 @@ ...@@ -62,14 +62,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="aiAnalysisRightViews_1"> <div class="aiAnalysisRightViews_1" style="display: none">
<!-- 报警车辆排行榜 --> <!-- 报警车辆排行榜 -->
<div class="aiAnalysisRightViews_1_title">报警车辆排行榜</div> <div class="aiAnalysisRightViews_1_title">报警车辆排行榜</div>
<div class="aiAnalysisRightViews_1_content"> <div class="aiAnalysisRightViews_1_content">
<div id="echarts2" class="echarts2" style="margin-top:1vh"></div> <div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
</div> </div>
</div> </div>
<div class="aiAnalysisRightViews_2"> <div class="aiAnalysisRightViews_2" style="display: none">
<!-- 报警车辆信息 --> <!-- 报警车辆信息 -->
<div class="aiAnalysisRightViews_2_title">报警车辆信息</div> <div class="aiAnalysisRightViews_2_title">报警车辆信息</div>
<div class="aiAnalysisRightViews_2_content"> <div class="aiAnalysisRightViews_2_content">
...@@ -798,9 +798,9 @@ export default { ...@@ -798,9 +798,9 @@ export default {
display: none; display: none;
} }
.videoKuang .roadClass{ .videoKuang .roadClass{
height: 45px; height: 35px;
width: 90%; width: 90%;
line-height: 45px; line-height: 35px;
text-align: center; text-align: center;
font-size: 19px; font-size: 19px;
font-weight: 600; font-weight: 600;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="video111 videoCars"> <div class="video111 videoCars">
<el-container> <el-container>
<el-container style="display:flex;justify-content: space-between;"> <el-container style="display:flex;justify-content: space-between;">
<el-aside width="20vw" style="height: 89vh;margin-top: 5.5vh;z-index: 3;"> <el-aside width="20vw" style="height: 100vh;z-index: 3;">
<div class="videoCarsInput"> <div class="videoCarsInput">
<div style="color: #A6F6F9;">选择车牌号:</div> <div style="color: #A6F6F9;">选择车牌号:</div>
<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="aiAnalysisRightViews"> <div class="aiAnalysisRightViews">
<div class="aiAnalysisRightViews_1"> <div class="aiAnalysisRightViews_1" style="display: none">
<!-- 智能AI分析 --> <!-- 智能AI分析 -->
<div class="aiAnalysisRightViews_1_title">智能AI分析</div> <div class="aiAnalysisRightViews_1_title">智能AI分析</div>
<div class="aiAnalysisRightViews_1_content"> <div class="aiAnalysisRightViews_1_content">
...@@ -62,14 +62,14 @@ ...@@ -62,14 +62,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="aiAnalysisRightViews_1"> <div class="aiAnalysisRightViews_1" style="display: none">
<!-- 报警车辆排行榜 --> <!-- 报警车辆排行榜 -->
<div class="aiAnalysisRightViews_1_title">报警车辆排行榜</div> <div class="aiAnalysisRightViews_1_title">报警车辆排行榜</div>
<div class="aiAnalysisRightViews_1_content"> <div class="aiAnalysisRightViews_1_content">
<div id="echarts2" class="echarts2" style="margin-top:1vh"></div> <div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
</div> </div>
</div> </div>
<div class="aiAnalysisRightViews_2"> <div class="aiAnalysisRightViews_2" style="display: none">
<!-- 报警车辆信息 --> <!-- 报警车辆信息 -->
<div class="aiAnalysisRightViews_2_title">报警车辆信息</div> <div class="aiAnalysisRightViews_2_title">报警车辆信息</div>
<div class="aiAnalysisRightViews_2_content"> <div class="aiAnalysisRightViews_2_content">
...@@ -799,7 +799,7 @@ export default { ...@@ -799,7 +799,7 @@ export default {
overflow: hidden; overflow: hidden;
} }
.videoCars .el-tree{ .videoCars .el-tree{
height: 53vh; height: 90vh;
background-color: rgba(32,42,67,0.95); background-color: rgba(32,42,67,0.95);
overflow-y: scroll; overflow-y: scroll;
} }
......
<template> <template>
<div class="DPcomputer18Box"> <div class="DPcomputer18Box">
<!-- 智能调度信息 --> <!-- 智能调度信息 -->
<div class="intelligentSchScrView_rightView_title">智能调度信息</div> <div class="intelligentSchScrView_rightView_title">车辆调度信息</div>
<div class="intelligentSchScrView_rightView_content"> <div class="intelligentSchScrView_rightView_content">
<div class="intelligentSchScrView_rightView_content_1_top"> <div class="intelligentSchScrView_rightView_content_1_top">
<div> <div>
...@@ -201,4 +201,4 @@ export default { ...@@ -201,4 +201,4 @@ export default {
font-size: 13px; font-size: 13px;
color: #A6F6F9; color: #A6F6F9;
} }
</style> </style>
\ No newline at end of file
...@@ -21,10 +21,36 @@ ...@@ -21,10 +21,36 @@
<!-- 时间 --> <!-- 时间 -->
<div class="currentTimeStyle">{{currentTime}}</div> <div class="currentTimeStyle">{{currentTime}}</div>
</div> </div>
<div class="videoSelectView" v-show="videoSelect1"> <div class="content_view" v-if="videoSelect1">
<div @click="lookFn2()" :class="videoSelectStyle == 2 ? 'videoSelectStyle1' : 'videoSelectStyle2'">车辆视频监控</div> <div class="content_view_left">
<div @click="lookFn1()" :class="videoSelectStyle == 1 ? 'videoSelectStyle1' : 'videoSelectStyle2'">矿山视频监控</div> <div class="aiAnalysisRightViews">
</div> <div class="aiAnalysisRightViews_1">
<!-- 报警车辆信息 -->
<div class="aiAnalysisRightViews_1_title">矿山视频监控</div>
<div class="aiAnalysisRightViews_1_content">
<kaungEZUIKitJs/>
</div>
</div>
</div>
<!-- <div class="videoSelectView">-->
<!-- <div @click="lookFn2()" :class="videoSelectStyle == 2 ? 'videoSelectStyle1' : 'videoSelectStyle2'">车辆视频监控</div>-->
<!-- <div @click="lookFn1()" :class="videoSelectStyle == 1 ? 'videoSelectStyle1' : 'videoSelectStyle2'">矿山视频监控</div>-->
<!-- </div>-->
</div>
<div class="content_view_center">
</div>
<div class="content_view_right">
<div class="aiAnalysisRightViews">
<div class="aiAnalysisRightViews_2">
<!-- 报警车辆信息 -->
<div class="aiAnalysisRightViews_2_title">车辆视频监控</div>
<div class="aiAnalysisRightViews_2_content">
<carsEZUIKitJs/>
</div>
</div>
</div>
</div>
</div>
<!-- 内容 --> <!-- 内容 -->
<div class="content_view" v-if="content_view_Show"> <div class="content_view" v-if="content_view_Show">
<div class="content_view_left"> <div class="content_view_left">
...@@ -38,13 +64,13 @@ ...@@ -38,13 +64,13 @@
</div> </div>
</div> </div>
<!-- 监控区域 --> <!-- 监控区域 -->
<div class="jiankongView"> <!-- <div class="jiankongView">-->
<carsEZUIKitJs v-if="carsEZUIKitJsShow"/> <!-- <carsEZUIKitJs v-if="carsEZUIKitJsShow"/>-->
<kaungEZUIKitJs v-if="kaungEZUIKitJsShow"/> <!-- <kaungEZUIKitJs v-if="kaungEZUIKitJsShow"/>-->
</div> <!-- </div>-->
<!-- 嵌入三维地图页面 --> <!-- 嵌入三维地图页面 -->
<!-- <iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>--> <!-- <iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- <iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>--> <iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>
<!-- <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>--> <!-- <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- 单个车辆视频监控 --> <!-- 单个车辆视频监控 -->
...@@ -757,4 +783,63 @@ export default { ...@@ -757,4 +783,63 @@ export default {
width: 80vw; width: 80vw;
height: 90vh; height: 90vh;
} }
.aiAnalysisRightViews{
width: 20vw;
height: 94.5vh;
overflow: hidden;
z-index: 3;
}
.aiAnalysisRightViews_1{
width: 20vw;
height: 80vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.aiAnalysisRightViews_1_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.aiAnalysisRightViews_1_content{
width: 100%;
height: 80vh;
}
.aiAnalysisRightViews_2{
width: 20vw;
height: 100vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.aiAnalysisRightViews_2_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.aiAnalysisRightViews_2_content{
width: 100%;
height: 100vh;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment