重点区域监控平台 --右侧修改。
This commit is contained in:
parent
ea0b545fc6
commit
b1cc5f735d
|
|
@ -0,0 +1,544 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<header>
|
||||||
|
<div class="title">事件感知</div>
|
||||||
|
</header>
|
||||||
|
<div class="toady-list">
|
||||||
|
<div class="toady-list-content">
|
||||||
|
<div class="toady-list-rotate"></div>
|
||||||
|
<div class="toady-list-icon"></div>
|
||||||
|
<div class="toady-list-num">今日事件<span> {{todayListNum}} </span>件</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-box">
|
||||||
|
<div class="tabs-button">
|
||||||
|
<div class="tabs-button-box">
|
||||||
|
<div class="tabs-button-btn"
|
||||||
|
@click="tabHandleClick(item)"
|
||||||
|
v-for="item in tabsButton"
|
||||||
|
:key="item.index"
|
||||||
|
:class="tabsActiveName == item?'tabs-button-btn-active' : ''"
|
||||||
|
>
|
||||||
|
{{item}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
|
||||||
|
<div class="filter-btn-typeSelect">
|
||||||
|
<div class="typeSelect-btn"
|
||||||
|
v-for="item in filterButton.typeSelect"
|
||||||
|
:key="item"
|
||||||
|
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active' : ''"
|
||||||
|
@click="typeSelect(item)"
|
||||||
|
>{{item}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="filter-btn-processStateSelect">
|
||||||
|
<div class="processStateSelect-btn"
|
||||||
|
v-for="item in filterButton.processStateSelect"
|
||||||
|
:key="item"
|
||||||
|
:class="filterButton.processStateSelectActive == item ? 'processStateSelect-btn-active' : ''"
|
||||||
|
@click="processStateSelect(item)"
|
||||||
|
>
|
||||||
|
<div class="select-circle"></div>
|
||||||
|
<div class="processStateSelect">{{item}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<el-dropdown trigger="click">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
{{ listTypeSelect || '全部'}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||||
|
</span>
|
||||||
|
<el-dropdown-menu slot="dropdown" class="dropdownCss">
|
||||||
|
<el-dropdown-item
|
||||||
|
v-for="(item, index) in EventBtns"
|
||||||
|
:key="index"
|
||||||
|
@click.native="EventBtnsClick(item)"
|
||||||
|
>{{ item }}
|
||||||
|
</el-dropdown-item
|
||||||
|
>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
<div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
|
||||||
|
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
|
||||||
|
<div class="event-details-title">
|
||||||
|
<span>{{item.eventNewName||''}}</span>
|
||||||
|
<span>{{item.captureTime||''}}</span>
|
||||||
|
<!-- <span>未派发</span> -->
|
||||||
|
</div>
|
||||||
|
<div class="event-details-des">
|
||||||
|
<h5>事件地址:{{ item.district || ''}}</h5>
|
||||||
|
<p>摄像头名称:{{ item.cameraName || ''}}</p>
|
||||||
|
<p>事件描述:{{ item.eventCnName || ''}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <el-pagination
|
||||||
|
v-if="total==0"
|
||||||
|
background
|
||||||
|
layout="prev, pager, next"
|
||||||
|
@current-change="pageChange"
|
||||||
|
:page-size = 4
|
||||||
|
:total="total"
|
||||||
|
:current-page="currentPage"
|
||||||
|
>
|
||||||
|
</el-pagination> -->
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
layout="prev, pager, next"
|
||||||
|
@current-change="pageChange"
|
||||||
|
:page-size = 4
|
||||||
|
:total="total"
|
||||||
|
:current-page="currentPage"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<statistical-analysis v-if="statisticalAnalysisIsShow" class="statisticalAnalysis" @closeDialog='statisticalAnalysisIsShow = false'></statistical-analysis>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { selectByAreaEvent, selectByNameAreaEvent, selectByDayAreaEvent } from "@/api/area";
|
||||||
|
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
||||||
|
import bus from "@/views/layout/bus";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabsButton: ["视频感知",],
|
||||||
|
tabsActiveName: "视频感知",
|
||||||
|
statisticalAnalysisIsShow: false,
|
||||||
|
filterButton:{
|
||||||
|
typeSelect:['事件','事件1'],
|
||||||
|
typeSelectActive:'事件',
|
||||||
|
processStateSelect:['全部','未派发','未处置','已处置'],
|
||||||
|
processStateSelectActive:'全部',
|
||||||
|
},
|
||||||
|
eventListData: [],
|
||||||
|
preTime: "",
|
||||||
|
// pageCount: 0,
|
||||||
|
total:0,
|
||||||
|
currentPage:1,
|
||||||
|
roadData:[],
|
||||||
|
listTypeSelect: "全部",
|
||||||
|
EventBtns: ["全部","占道经营","渣土车发现","违章停车","环境卫生","沿街晾晒","渣土车未密闭","道路积水事件",],
|
||||||
|
|
||||||
|
todayListNum:0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
StatisticalAnalysis,
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const currentDate = new Date();
|
||||||
|
currentDate.setTime(currentDate.getTime());
|
||||||
|
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
|
||||||
|
this.preTime =
|
||||||
|
currentDate.getFullYear() +
|
||||||
|
"-" +
|
||||||
|
(currentDate.getMonth() + 1) +
|
||||||
|
"-" +
|
||||||
|
currentDate.getDate() +
|
||||||
|
" " +
|
||||||
|
"00:00:00";
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const params = {
|
||||||
|
page: 1,
|
||||||
|
pageSize: 4,
|
||||||
|
};
|
||||||
|
selectByAreaEvent(params).then((res) => {
|
||||||
|
this.eventListData = res.data.data.events
|
||||||
|
this.total = res.data.data.sum
|
||||||
|
this.$parent.allListDataNum = res.data.data.sum;
|
||||||
|
});
|
||||||
|
|
||||||
|
selectByDayAreaEvent().then((res)=>{
|
||||||
|
if(res.data.data.sum){
|
||||||
|
this.todayListNum = res.data.data.sum
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabHandleClick(item) {
|
||||||
|
this.tabsActiveName = item
|
||||||
|
if(item == '视频感知'){
|
||||||
|
|
||||||
|
}
|
||||||
|
if(item == '物联感知'){
|
||||||
|
this.filterButton.typeSelect = ['工地扬尘','工地噪声']
|
||||||
|
this.typeSelectActive = '工地扬尘'
|
||||||
|
}
|
||||||
|
if(item == '走航监测'){
|
||||||
|
this.selectRoadData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
openStatisticalAnalysis() {
|
||||||
|
this.statisticalAnalysisIsShow = true
|
||||||
|
},
|
||||||
|
typeSelect(item) {
|
||||||
|
this.filterButton.typeSelectActive = item
|
||||||
|
},
|
||||||
|
processStateSelect(item) {
|
||||||
|
this.filterButton.processStateSelectActive = item
|
||||||
|
},
|
||||||
|
//分页
|
||||||
|
pageChange(val) {
|
||||||
|
this.currentPage = val
|
||||||
|
if(this.listTypeSelect == '全部'){
|
||||||
|
selectByAreaEvent({ pageSize: 4,page: val,}).then((res) => {
|
||||||
|
this.eventListData = res.data.data.events
|
||||||
|
this.total = res.data.data.sum
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
selectByNameAreaEvent({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
|
||||||
|
// res.data.data.sort(this.compare("captureTime", "inverted"));
|
||||||
|
// console.log(res.data.data)
|
||||||
|
this.eventListData = res.data.data.events;
|
||||||
|
this.total = res.data.data.sum
|
||||||
|
// this.pageCount = 0
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
EventBtnsClick(item) {
|
||||||
|
this.currentPage = 1
|
||||||
|
this.listTypeSelect = item;
|
||||||
|
if(item == '全部'){
|
||||||
|
selectByAreaEvent({ pageSize: 4,page: 1,}).then((res) => {
|
||||||
|
this.eventListData = res.data.data.events
|
||||||
|
this.total = res.data.data.sum
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
selectByNameAreaEvent({eventNewName: item, pageSize: 4,page: 1,}).then((res) => {
|
||||||
|
// res.data.data.sort(this.compare("captureTime", "inverted"));
|
||||||
|
// console.log(res.data.data)
|
||||||
|
this.eventListData = res.data.data.events;
|
||||||
|
this.total = res.data.data.sum
|
||||||
|
// this.pageCount = 0
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
openDetailsDialog(data) {
|
||||||
|
this.$parent.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||||
|
const EventListDetail = [
|
||||||
|
{
|
||||||
|
latLng: { lat: data.latitude, lng: data.longitude },
|
||||||
|
data: data,
|
||||||
|
type: "eventList",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude });
|
||||||
|
this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0]);
|
||||||
|
this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||||
|
EventListDetail,
|
||||||
|
"poi-event.png",
|
||||||
|
"EventListDetail"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||||
|
src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'DIN-Bold';
|
||||||
|
src: url("../../../../assets/construction/DIN-Bold.otf");
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
position: relative;
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
background: url(../../../../assets/construction/subTitle.png) no-repeat center;
|
||||||
|
text-align: center;
|
||||||
|
.title {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||||
|
}
|
||||||
|
.title::before {
|
||||||
|
content: '事件感知';
|
||||||
|
text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: .6);
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.toady-list {
|
||||||
|
width:100%;
|
||||||
|
height:132px;
|
||||||
|
background: url(../../../../assets/construction/toadyListBgi.png) no-repeat center top;
|
||||||
|
.toady-list-content {
|
||||||
|
margin-left: 80px;
|
||||||
|
height:128px;
|
||||||
|
position: relative;
|
||||||
|
.toady-list-rotate {
|
||||||
|
position: absolute;
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
background: url(../../../../assets/construction/rotateBgi.png) no-repeat;
|
||||||
|
animation: routation 20s linear infinite;
|
||||||
|
}
|
||||||
|
.toady-list-icon {
|
||||||
|
position: absolute;
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
background: url(../../../../assets/construction/toadyListIcon.png) no-repeat;
|
||||||
|
}
|
||||||
|
.toady-list-num {
|
||||||
|
position: absolute;
|
||||||
|
width: 248px;
|
||||||
|
height: 72px;
|
||||||
|
top: 20px;
|
||||||
|
left: 100px;
|
||||||
|
background: url(../../../../assets/construction/toadyListBgi2.png) no-repeat;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 72px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
span {
|
||||||
|
font-size: 38px;
|
||||||
|
font-weight: bold;
|
||||||
|
background: linear-gradient(180deg, #ff9fa8 0%, #fff 100%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-family: 'DIN-Bold';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes routation {
|
||||||
|
0%{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform:rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-box {
|
||||||
|
margin:0 10px;
|
||||||
|
|
||||||
|
.tabs-button {
|
||||||
|
position: relative;
|
||||||
|
.tabs-button-box {
|
||||||
|
width: 340px;
|
||||||
|
padding-bottom: 11px;
|
||||||
|
border-bottom: 3px solid #2c619c;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// justify-content: space-around;
|
||||||
|
.tabs-button-btn {
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgba($color: #fff, $alpha: 0.6);
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tabs-button-btn-active {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.tabs-button-btn-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15px;
|
||||||
|
// right: 24%;
|
||||||
|
right: 6%;
|
||||||
|
width: 64px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #1ffffc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.statisticalAnalysisBtn {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 0px;
|
||||||
|
width: 96px;
|
||||||
|
height: 28px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1ffefd;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid rgba(31, 254, 253, .6);
|
||||||
|
border-radius: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn-box {
|
||||||
|
margin-top: 16px;
|
||||||
|
.filter-btn-typeSelect {
|
||||||
|
display: flex;
|
||||||
|
.typeSelect-btn {
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(0, 255, 255, .6);
|
||||||
|
background: rgba(2,51,87,.6);
|
||||||
|
margin-right: 5px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.typeSelect-btn-active {
|
||||||
|
background: #005ea3;
|
||||||
|
border: 1px solid #00ffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.filter-btn-processStateSelect {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 12px;
|
||||||
|
color: #fff;
|
||||||
|
.processStateSelect-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
.select-circle {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #00ffff;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.processStateSelect {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.processStateSelect-btn-active {
|
||||||
|
.select-circle::after {
|
||||||
|
content: "";
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: #00ffff;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-list {
|
||||||
|
// margin-top: 12px;
|
||||||
|
// margin-top: 30px;
|
||||||
|
width: 100%;
|
||||||
|
height: 670px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.event-details {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 16px;
|
||||||
|
// margin-top: 18px;
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
padding-right: 8px;
|
||||||
|
background: linear-gradient(90deg, #173759 0, #133150 100%);
|
||||||
|
.event-details-title {
|
||||||
|
height: 36px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
span:nth-child(1) {
|
||||||
|
width: 140px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #1ffefd;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 36px;
|
||||||
|
background: linear-gradient(90deg, rgba($color: #0873c1, $alpha: 1) 0, rgba($color: #0873c1, $alpha: 0) 100%);
|
||||||
|
}
|
||||||
|
span:nth-child(2) {
|
||||||
|
color: rgba(255,255,255,.6);
|
||||||
|
padding-left: 80px;
|
||||||
|
}
|
||||||
|
span:nth-child(3) {
|
||||||
|
width: 49px;
|
||||||
|
height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 20px;
|
||||||
|
background: #ae761c;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.event-details-des {
|
||||||
|
padding: 8px 0 0 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
h5 {
|
||||||
|
font-weight: normal;
|
||||||
|
padding-left: 18px;
|
||||||
|
color: rgba(255,255,255, .6);
|
||||||
|
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: rgba(255,255,255, .8);
|
||||||
|
line-height: 28px;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
display:-webkit-box;
|
||||||
|
-webkit-box-orient:vertical;
|
||||||
|
-webkit-line-clamp:1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-pagination {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
// margin-top: 16px;
|
||||||
|
button, ul>li {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(31,254,253, .5);
|
||||||
|
background: transparent;
|
||||||
|
color: rgba(31,254,253, .5);
|
||||||
|
}
|
||||||
|
li:not(.disabled).active {
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid rgba(31,254,253, .5);
|
||||||
|
background: rgba(31,254,253, .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.statisticalAnalysis {
|
||||||
|
position: absolute;
|
||||||
|
left: 486px;
|
||||||
|
top: 0;
|
||||||
|
width: 400px;
|
||||||
|
height: 878px;
|
||||||
|
background: rgba(24,51,76,.95);
|
||||||
|
border: 1px solid rgba(50,227,235,.95);
|
||||||
|
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dropdown {
|
||||||
|
margin-top: 10px;
|
||||||
|
.el-dropdown-link {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -47,14 +47,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 视频标签、列表 -->
|
<!-- 视频标签、列表 -->
|
||||||
<div class="videoList">
|
<div class="complaintContent1">
|
||||||
<video-list ref="videoListRef"></video-list>
|
<video-list-right ref="videoListRef"></video-list-right>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 工地列表 -->
|
<!-- 工地列表 -->
|
||||||
<div class="siteList">
|
<!-- <div class="siteList">
|
||||||
<site-list></site-list>
|
<site-list></site-list>
|
||||||
</div>
|
</div> -->
|
||||||
<!-- 热力图图例 -->
|
<!-- 热力图图例 -->
|
||||||
<div class="legend"></div>
|
<div class="legend"></div>
|
||||||
|
|
||||||
|
|
@ -110,7 +110,7 @@ import { searchCamera } from "@/api/videoSurveillance/index";
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
import complaintEvent from "./components/ComplaintEvent";
|
import complaintEvent from "./components/ComplaintEvent";
|
||||||
import VideoPlay from './components/VideoPlay'
|
import VideoPlay from './components/VideoPlay'
|
||||||
import VideoList from "./components/VideoList";
|
import VideoListRight from "./components/VideoListRight";
|
||||||
import SiteList from "./components/SiteList";
|
import SiteList from "./components/SiteList";
|
||||||
import { selectByJdWd } from "@/api/construction/index";
|
import { selectByJdWd } from "@/api/construction/index";
|
||||||
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
||||||
|
|
@ -149,7 +149,7 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
TiledMap,
|
TiledMap,
|
||||||
complaintEvent,
|
complaintEvent,
|
||||||
VideoList,
|
VideoListRight,
|
||||||
SiteList,
|
SiteList,
|
||||||
VideoPlay,
|
VideoPlay,
|
||||||
HorizonTimeLine
|
HorizonTimeLine
|
||||||
|
|
@ -738,7 +738,15 @@ export default {
|
||||||
width: 478px;
|
width: 478px;
|
||||||
background: rgba($color: #05213b, $alpha: .85)
|
background: rgba($color: #05213b, $alpha: .85)
|
||||||
}
|
}
|
||||||
|
.complaintContent1 {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
right: 10px;
|
||||||
|
top: 90px;
|
||||||
|
height:980px;
|
||||||
|
width: 478px;
|
||||||
|
background: rgba($color: #05213b, $alpha: .85)
|
||||||
|
}
|
||||||
.eventNum {
|
.eventNum {
|
||||||
width: 245px;
|
width: 245px;
|
||||||
height: 92px;
|
height: 92px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue