重点区域监控平台 --右侧修改。
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 class="videoList">
|
||||
<video-list ref="videoListRef"></video-list>
|
||||
<div class="complaintContent1">
|
||||
<video-list-right ref="videoListRef"></video-list-right>
|
||||
</div>
|
||||
|
||||
<!-- 工地列表 -->
|
||||
<div class="siteList">
|
||||
<!-- <div class="siteList">
|
||||
<site-list></site-list>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 热力图图例 -->
|
||||
<div class="legend"></div>
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ import { searchCamera } from "@/api/videoSurveillance/index";
|
|||
import bus from "@/views/layout/bus";
|
||||
import complaintEvent from "./components/ComplaintEvent";
|
||||
import VideoPlay from './components/VideoPlay'
|
||||
import VideoList from "./components/VideoList";
|
||||
import VideoListRight from "./components/VideoListRight";
|
||||
import SiteList from "./components/SiteList";
|
||||
import { selectByJdWd } from "@/api/construction/index";
|
||||
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
||||
|
|
@ -149,7 +149,7 @@ export default {
|
|||
components: {
|
||||
TiledMap,
|
||||
complaintEvent,
|
||||
VideoList,
|
||||
VideoListRight,
|
||||
SiteList,
|
||||
VideoPlay,
|
||||
HorizonTimeLine
|
||||
|
|
@ -738,7 +738,15 @@ export default {
|
|||
width: 478px;
|
||||
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 {
|
||||
width: 245px;
|
||||
height: 92px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue