积水点首页
This commit is contained in:
yangxiaojiang
parent
50611d32e1
commit
a57d293fc7
|
|
@ -100,6 +100,11 @@ export const pageRoutes = [{
|
||||||
name: 'point',
|
name: 'point',
|
||||||
meta: { title: '' }
|
meta: { title: '' }
|
||||||
},
|
},
|
||||||
|
{ path: '/waterPoints',
|
||||||
|
component: () => import('@/views/pages/waterPoints'),
|
||||||
|
name: 'waterPoints',
|
||||||
|
meta: { title: '积水点' }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/forestControl',
|
path: '/forestControl',
|
||||||
component: () =>
|
component: () =>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,505 @@
|
||||||
|
<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> 36 </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>
|
||||||
|
<div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
|
||||||
|
<div class="event-details" v-for="item in eventListData" :key="item.index">
|
||||||
|
<div class="event-details-title">
|
||||||
|
<span>{{item.roadName||''}}</span>
|
||||||
|
<span>{{item.dt||''}}</span>
|
||||||
|
<!-- <span>未派发</span> -->
|
||||||
|
</div>
|
||||||
|
<div class="event-details-des">
|
||||||
|
<h5>道路起止:{{item.start||''}}--{{item.end||''}}</h5>
|
||||||
|
<!-- <p>简述简述简述简述简述简述简述简述</p> -->
|
||||||
|
<p>pm10:{{item.pm10||''}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
layout="prev, pager, next"
|
||||||
|
@current-change="pageChange"
|
||||||
|
:total="total">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<statistical-analysis v-if="statisticalAnalysisIsShow" class="statisticalAnalysis" @closeDialog='statisticalAnalysisIsShow = false'></statistical-analysis>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
|
||||||
|
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
||||||
|
import bus from "@/views/layout/bus";
|
||||||
|
import {
|
||||||
|
getRoadData,
|
||||||
|
getRoadDataByTimeRegion,
|
||||||
|
selectRoadData,
|
||||||
|
} from "@/api/road";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabsButton: ["视频感知","物联感知","走航监测"],
|
||||||
|
tabsActiveName: "走航监测",
|
||||||
|
statisticalAnalysisIsShow: false,
|
||||||
|
filterButton:{
|
||||||
|
typeSelect:['事件','事件1'],
|
||||||
|
typeSelectActive:'事件',
|
||||||
|
processStateSelect:['全部','未派发','未处置','已处置'],
|
||||||
|
processStateSelectActive:'全部',
|
||||||
|
},
|
||||||
|
eventListData: [],
|
||||||
|
preTime: "",
|
||||||
|
total: 0,
|
||||||
|
roadData:[],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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() {
|
||||||
|
this.getRoadData()
|
||||||
|
this.selectRoadData()
|
||||||
|
this.selectRaise()
|
||||||
|
this.selectNoiceEvent()
|
||||||
|
},
|
||||||
|
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
|
||||||
|
},
|
||||||
|
|
||||||
|
async getRoadData() {
|
||||||
|
const res = await getRoadData({ dt: this.preTime });
|
||||||
|
//路网数据
|
||||||
|
this.roadData = res.data.data;
|
||||||
|
// bus.$emit("roadOnMap", this.roadData);
|
||||||
|
},
|
||||||
|
|
||||||
|
//走航监测
|
||||||
|
selectRoadData() {
|
||||||
|
let params = {
|
||||||
|
pageSize: 5,
|
||||||
|
page: 1,
|
||||||
|
}
|
||||||
|
selectRoadData(params).then((res) => {
|
||||||
|
this.eventListData = res.data.data.roadData;
|
||||||
|
this.total = res.data.data.sum
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//物联感知 扬尘 噪声
|
||||||
|
selectRaise() {
|
||||||
|
let params = {
|
||||||
|
pageSize: 5,
|
||||||
|
page: 1,
|
||||||
|
}
|
||||||
|
selectRaise(params).then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
// this.eventListData = res.data.data.roadData;
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
selectNoiceEvent() {
|
||||||
|
let params = {
|
||||||
|
pageSize: 5,
|
||||||
|
page: 1,
|
||||||
|
}
|
||||||
|
selectNoiceEvent(params).then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//分页
|
||||||
|
pageChange(val) {
|
||||||
|
if(this.tabsActiveName == '视频感知') {
|
||||||
|
|
||||||
|
} else if(this.tabsActiveName == '物联感知') {
|
||||||
|
let params = {
|
||||||
|
pageSize: 5,
|
||||||
|
page: val,
|
||||||
|
}
|
||||||
|
selectRaise(params).then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
});
|
||||||
|
} else if(this.tabsActiveName == '走航监测') {
|
||||||
|
let params = {
|
||||||
|
pageSize: 5,
|
||||||
|
page: val,
|
||||||
|
}
|
||||||
|
selectRoadData(params).then((res) => {
|
||||||
|
this.eventListData = res.data.data.roadData;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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: 625px;
|
||||||
|
height: 570px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.event-details {
|
||||||
|
margin-top: 10px;
|
||||||
|
// margin-top: 18px;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100px;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,431 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">工地列表</div>
|
||||||
|
<!-- 工地列表 -->
|
||||||
|
<div class="eventData">
|
||||||
|
<div style="display: flex;justify-content: space-between">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入工地名称"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
@input="searchSite"
|
||||||
|
v-model="searchValue"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
<el-select v-model="selectValue" placeholder="全部区市" @change="fliterSiteByArea">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="eventNoise">
|
||||||
|
<el-table
|
||||||
|
:data="siteData"
|
||||||
|
height='356'
|
||||||
|
@row-click="analyse"
|
||||||
|
:cell-style="{
|
||||||
|
color: '#fff',
|
||||||
|
cursor: 'pointer',
|
||||||
|
'background-color': '#18304c',
|
||||||
|
}"
|
||||||
|
:header-cell-style="{
|
||||||
|
color: '#1ffefd',
|
||||||
|
'background-color': '#2b4b7a',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-table-column width="114" label="工地名称" prop="projectName"
|
||||||
|
show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="78" prop="noice" label="噪声" sortable>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{scope.row.noice + 'dB'}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="86" prop="pm10" label="扬尘" sortable>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{scope.row.pm10 + 'mg/m³'}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="88" prop="yjsg" label="夜间施工">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<img v-if="scope.row.yjsg == '是'" src="../../../../assets/construction/night.png" alt="">
|
||||||
|
<img v-else src="../../../../assets/construction/nonight.png" alt="">
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import bus from "@/views/layout/bus";
|
||||||
|
import {
|
||||||
|
selectAllBuilding,
|
||||||
|
selectByProjectName,
|
||||||
|
selectDayAll,
|
||||||
|
selectWeekAll,
|
||||||
|
selectMonthAll,
|
||||||
|
} from "@/api/construction/index";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchValue: "",
|
||||||
|
siteData: [],
|
||||||
|
siteDataAll: [],
|
||||||
|
selectSiteData: [],
|
||||||
|
InformationActiveName: "基本信息",
|
||||||
|
informationShow: false,
|
||||||
|
detailedInfToday: [],
|
||||||
|
detailedInfWeek: [],
|
||||||
|
detailedInfMonth: [],
|
||||||
|
dustActiveName: "今日",
|
||||||
|
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: '全部区市',
|
||||||
|
label: '全部区市'
|
||||||
|
},{
|
||||||
|
value: '市南区',
|
||||||
|
label: '市南区'
|
||||||
|
}, {
|
||||||
|
value: '市北区',
|
||||||
|
label: '市北区'
|
||||||
|
}, {
|
||||||
|
value: '崂山区',
|
||||||
|
label: '崂山区'
|
||||||
|
}, {
|
||||||
|
value: '李沧区',
|
||||||
|
label: '李沧区'
|
||||||
|
}, {
|
||||||
|
value: '即墨区',
|
||||||
|
label: '即墨区'
|
||||||
|
},{
|
||||||
|
value: '西海岸新区',
|
||||||
|
label: '西海岸新区'
|
||||||
|
},{
|
||||||
|
value: '城阳区',
|
||||||
|
label: '城阳区'
|
||||||
|
},{
|
||||||
|
value: '胶州市',
|
||||||
|
label: '胶州市'
|
||||||
|
},{
|
||||||
|
value: '平度市',
|
||||||
|
label: '平度市'
|
||||||
|
},{
|
||||||
|
value: '莱西市',
|
||||||
|
label: '莱西市'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
selectValue: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.selectSiteByName();
|
||||||
|
// bus.$off("mainClick")
|
||||||
|
// bus.$on("mainClick", (data) => {
|
||||||
|
// this.informationShow = true;
|
||||||
|
// console.log(data);
|
||||||
|
// this.informationData = data;
|
||||||
|
// // 噪声及扬尘
|
||||||
|
// const params = {
|
||||||
|
// projectName: data.projectName,
|
||||||
|
// };
|
||||||
|
// selectByProjectName(params).then((res) => {
|
||||||
|
// // console.log(res.data.data);
|
||||||
|
// for (let i = 0; i < res.data.data.length; i++) {
|
||||||
|
// this.selectSiteData.push(res.data.data[i]);
|
||||||
|
// }
|
||||||
|
// // console.log(this.selectSiteData);
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // 噪声及扬尘信息
|
||||||
|
// this.NoAndPMToday(data.projectName);
|
||||||
|
// this.NoAndPMWeek(data.projectName);
|
||||||
|
// this.NoAndPMMonth(data.projectName);
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询所有工地
|
||||||
|
selectSiteByName() {
|
||||||
|
selectAllBuilding().then((res) => {
|
||||||
|
// console.log(res.data.data);
|
||||||
|
this.siteData = res.data.data
|
||||||
|
this.siteDataAll = res.data.data
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
searchSite() {
|
||||||
|
if (this.searchValue == "") {
|
||||||
|
this.siteData = this.siteDataAll;
|
||||||
|
} else {
|
||||||
|
const params = {
|
||||||
|
projectName: this.searchValue,
|
||||||
|
};
|
||||||
|
selectByProjectName(params).then((res) => {
|
||||||
|
this.siteData = res.data.data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fliterSiteByArea(val) {
|
||||||
|
console.log(val)
|
||||||
|
if (val == '全部区市') {
|
||||||
|
this.siteData = this.siteDataAll;
|
||||||
|
} else {
|
||||||
|
this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 行点击
|
||||||
|
analyse(row) {
|
||||||
|
bus.$emit("openCauseAnalysis", row);
|
||||||
|
},
|
||||||
|
// 关闭基本信息窗口
|
||||||
|
informationClose() {
|
||||||
|
this.informationShow = false;
|
||||||
|
},
|
||||||
|
// 今日噪声及扬尘信息
|
||||||
|
NoAndPMToday(data) {
|
||||||
|
// 今日
|
||||||
|
this.detailedInfToday = [];
|
||||||
|
const params = {
|
||||||
|
projectName: data,
|
||||||
|
};
|
||||||
|
selectDayAll(params).then((res) => {
|
||||||
|
for (let i = 0; i < res.data.data.length; i++) {
|
||||||
|
this.detailedInfToday.push(res.data.data[i]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 近一周噪声及扬尘信息
|
||||||
|
NoAndPMWeek(data) {
|
||||||
|
// 近一周
|
||||||
|
this.detailedInfWeek = [];
|
||||||
|
const params = {
|
||||||
|
projectName: data,
|
||||||
|
};
|
||||||
|
selectWeekAll(params).then((res) => {
|
||||||
|
for (let i = 0; i < res.data.data.length; i++) {
|
||||||
|
this.detailedInfWeek.push(res.data.data[i]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 近一月噪声及扬尘信息
|
||||||
|
NoAndPMMonth(data) {
|
||||||
|
// 近一月
|
||||||
|
this.detailedInfMonth = [];
|
||||||
|
const params = {
|
||||||
|
projectName: data,
|
||||||
|
};
|
||||||
|
selectMonthAll(params).then((res) => {
|
||||||
|
for (let i = 0; i < res.data.data.length; i++) {
|
||||||
|
this.detailedInfMonth.push(res.data.data[i]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../../../assets/construction/listTopBg.png) no-repeat,
|
||||||
|
url(../../../../assets/construction/siteTag.png) no-repeat 324px 17px;
|
||||||
|
padding: 30px 0 18px 18px;
|
||||||
|
.title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
::v-deep .eventData {
|
||||||
|
width: 368px;
|
||||||
|
margin-top: 14px;
|
||||||
|
.el-input {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
border: 1px solid rgba(31,254,253,.9);
|
||||||
|
color: #fff;
|
||||||
|
background: rgba($color: #203b5d, $alpha: .8);
|
||||||
|
border-radius: unset;
|
||||||
|
&::placeholder {
|
||||||
|
color: rgba($color: #fff, $alpha: 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-input__prefix {
|
||||||
|
color: rgba(31,254,253,.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select {
|
||||||
|
// margin-left: 10px;
|
||||||
|
.el-input {
|
||||||
|
width: 161px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .eventNoise {
|
||||||
|
margin-top: 16px;
|
||||||
|
.el-table {
|
||||||
|
border: 1px solid #325d94;
|
||||||
|
width: 100%;
|
||||||
|
th,td {
|
||||||
|
border-right: 1px solid #325d94 !important;
|
||||||
|
}
|
||||||
|
// .descending.is-leaf.is-sortable {
|
||||||
|
// .sort-caret {
|
||||||
|
// border-top-color: #1dfeff;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.cell {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
.el-table th.is-leaf {
|
||||||
|
border: 1px solid #1f557c;
|
||||||
|
}
|
||||||
|
.el-table td {
|
||||||
|
border: 0;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.el-table th {
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
.el-table__row:nth-of-type(even) > td {
|
||||||
|
background-color: #113660 !important;
|
||||||
|
}
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
background-color: #10335e;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #446dac !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 基本信息
|
||||||
|
.informationPop {
|
||||||
|
position: absolute;
|
||||||
|
top: 150px;
|
||||||
|
left: -800px;
|
||||||
|
width: 700px;
|
||||||
|
height: 350px;
|
||||||
|
background: #fff;
|
||||||
|
::v-deep .el-tabs {
|
||||||
|
.el-tabs__header {
|
||||||
|
margin: 0;
|
||||||
|
.el-tabs__item {
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.el-tabs__item.is-active {
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
.el-tabs__active-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.is-top {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-table th,
|
||||||
|
.el-table tr {
|
||||||
|
background: #3c657c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.informationMain {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
height: 310px;
|
||||||
|
p {
|
||||||
|
padding: 4px 10px;
|
||||||
|
}
|
||||||
|
.informationLeft {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
.informationRight {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.informationClose {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
right: 13px;
|
||||||
|
top: 2px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 详细信息
|
||||||
|
.dustList {
|
||||||
|
width: 100%;
|
||||||
|
::v-deep .el-table::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
::v-deep .el-tabs {
|
||||||
|
.el-tabs__header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 10px 0 10px 5px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
.is-top {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.el-tabs__item {
|
||||||
|
background: #ccc;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 75px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 2px;
|
||||||
|
border-radius: 23px;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 26px;
|
||||||
|
height: 26px;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.el-tabs__item.is-active {
|
||||||
|
background: #409eff;
|
||||||
|
}
|
||||||
|
.el-tabs__active-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-table th,
|
||||||
|
.el-table tr {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,478 @@
|
||||||
|
<template>
|
||||||
|
<div class="pop-box">
|
||||||
|
<div class="title-bg"></div>
|
||||||
|
<div class="title">
|
||||||
|
<span>{{ feature.data.projectName || "" }}</span>
|
||||||
|
<span v-if="feature.data.yjsg=='是'">夜间</span>
|
||||||
|
</div>
|
||||||
|
<div class="site-address">{{ feature.data.sgwz || "" }}</div>
|
||||||
|
<div class="site-content">
|
||||||
|
<div class="site-content-left">
|
||||||
|
<div class="site-content-left-top">
|
||||||
|
<div class="noise">
|
||||||
|
<img src="../../../../assets/construction/noise.png" alt="">
|
||||||
|
<div>
|
||||||
|
<p>噪声</p>
|
||||||
|
<p><span>{{ feature.data.noice || "" }}</span>dB</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="raise-dust">
|
||||||
|
<img src="../../../../assets/construction/raiseDust.png" alt="">
|
||||||
|
<div>
|
||||||
|
<p>扬尘</p>
|
||||||
|
<p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="site-content-left-bottom">
|
||||||
|
<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 id="chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="site-content-right">
|
||||||
|
<div
|
||||||
|
class="images"
|
||||||
|
v-viewer="{movable: false}"
|
||||||
|
style="
|
||||||
|
width: 280px;
|
||||||
|
height: 158px;
|
||||||
|
cursor: pointer;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="video-table">
|
||||||
|
<h4>周边监控</h4>
|
||||||
|
<el-table
|
||||||
|
:data="cameraData"
|
||||||
|
:cell-style="{
|
||||||
|
color: '#fff',
|
||||||
|
cursor: 'pointer',
|
||||||
|
'background-color': '#18304c',
|
||||||
|
borderColor: '#325d94'
|
||||||
|
}"
|
||||||
|
:header-cell-style="{
|
||||||
|
color: '#1ffefd',
|
||||||
|
borderColor: '#325d94',
|
||||||
|
'background-color': '#2b4b7a',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import bus from "@/views/layout/bus";
|
||||||
|
import 'viewerjs/dist/viewer.css'
|
||||||
|
import { directive as viewer } from "v-viewer"
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
||||||
|
export default {
|
||||||
|
name: "",
|
||||||
|
props: {
|
||||||
|
feature: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
console.log(this.feature);
|
||||||
|
selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
})
|
||||||
|
selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
})
|
||||||
|
this.$nextTick( () => {
|
||||||
|
this.initCharts()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filterButton:{
|
||||||
|
typeSelect:['近7天','近30天',],
|
||||||
|
typeSelectActive:'近7天',
|
||||||
|
},
|
||||||
|
cameraData: []
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// particularsClick(data){
|
||||||
|
// console.log(data)
|
||||||
|
// bus.$emit("mainClick", data);
|
||||||
|
// },
|
||||||
|
|
||||||
|
typeSelect(item) {
|
||||||
|
this.filterButton.typeSelectActive = item
|
||||||
|
this.initCharts()
|
||||||
|
},
|
||||||
|
|
||||||
|
initCharts () {
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
bottom: 34,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255, 255, 255,.8)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#345a99',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
boundaryGap: ['2%', '2%'],
|
||||||
|
data: ['1', '2', '3', '4', '5', '6', '7']
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: 'dB',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: 'rgba(255, 255, 255,.8)'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255, 255, 255,.8)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
interval: '1',
|
||||||
|
show: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: ['#1d3556','#18334c']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: 'ug/m³',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: 'rgba(255, 255, 255,.8)'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255, 255, 255,.8)',
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
max:100,
|
||||||
|
min: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
color: ['#309afe','#fab228'],
|
||||||
|
legend: {
|
||||||
|
right: '16%',
|
||||||
|
top: '12%',
|
||||||
|
icon: 'line',
|
||||||
|
data: ['噪声值','扬尘值',],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '噪声值',
|
||||||
|
data: [60, 30, 60, 70, 40, 60, 70],
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#3cb2ff' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#2682ff' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '扬尘值',
|
||||||
|
data: [30, 40, 50, 80, 90, 40, 60],
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#fdd033' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#fe9820' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
const charts = echarts.init(
|
||||||
|
document.getElementById('chart')
|
||||||
|
)
|
||||||
|
charts.setOption(option)
|
||||||
|
},
|
||||||
|
|
||||||
|
show () {
|
||||||
|
const viewer = this.$el.querySelector('.images').$viewer
|
||||||
|
viewer.show()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
viewer: viewer({
|
||||||
|
debug: true,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
// .leaflet-popup {
|
||||||
|
// width: auto !important;
|
||||||
|
// }
|
||||||
|
.site-popup {
|
||||||
|
.leaflet-popup-content-wrapper {
|
||||||
|
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
|
||||||
|
background: rgba(24,51,76,.95);
|
||||||
|
border: 1px solid rgba(50,227,235,.95);
|
||||||
|
}
|
||||||
|
.leaflet-popup-content {
|
||||||
|
width: 734px !important;
|
||||||
|
height: 453px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
.pop-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.title-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 42px;
|
||||||
|
width: 100%;
|
||||||
|
opacity: .4;
|
||||||
|
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title{
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
span:nth-child(2) {
|
||||||
|
display: inline-block;
|
||||||
|
width: 40px;
|
||||||
|
height: 22px;
|
||||||
|
margin-left: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #0494ff;
|
||||||
|
color: #1ffefd;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-address {
|
||||||
|
margin: 12px 0;
|
||||||
|
padding-left: 20px;
|
||||||
|
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||||
|
color: rgba(255, 255, 255, .6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-content {
|
||||||
|
display: flex;
|
||||||
|
.site-content-left {
|
||||||
|
width: 392px;
|
||||||
|
margin-right: 29px;
|
||||||
|
.site-content-left-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 107px;
|
||||||
|
padding: 24px 0 0 18px;
|
||||||
|
background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
|
||||||
|
display: flex;
|
||||||
|
.noise {
|
||||||
|
height: 60px;
|
||||||
|
width: 180px;
|
||||||
|
border-right: 1px solid #2c619c;
|
||||||
|
display: flex;
|
||||||
|
div {
|
||||||
|
margin-left: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
p {
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: #1ffefd;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
color: rgba(255, 255, 255,.6)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.raise-dust {
|
||||||
|
margin-left: 20px;
|
||||||
|
display: flex;
|
||||||
|
img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
margin-left: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
p {
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: #1ffefd;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
color: rgba(255, 255, 255,.6)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.site-content-left-bottom {
|
||||||
|
width: 100%;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 206px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.site-content-right {
|
||||||
|
width: 280px;
|
||||||
|
.video-table {
|
||||||
|
margin-top: 20px;
|
||||||
|
h4 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-table{
|
||||||
|
margin-top: 8px;
|
||||||
|
border: 1px solid #325d94;
|
||||||
|
.el-table__body-wrapper{
|
||||||
|
height: 90px;
|
||||||
|
overflow-y: auto;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
background-color: #10335e;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #446dac !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
th,td {
|
||||||
|
border-right: 1px solid #325d94;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-close-button {
|
||||||
|
color: #3afefc !important;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
.particulars {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
width: 80px;
|
||||||
|
height: 40px;
|
||||||
|
bottom: 5px;
|
||||||
|
}
|
||||||
|
.List-Details-pop {
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
width: 400px;
|
||||||
|
|
||||||
|
.topContent {
|
||||||
|
background: #000;
|
||||||
|
padding: 14px;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 400px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
b {
|
||||||
|
color: #000;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: #000;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,706 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div id="StatisticalAnalysis">
|
||||||
|
<div class="title-bg"></div>
|
||||||
|
<div class="close-btn" @click="closeDialog"><i class="el-icon-close"></i></div>
|
||||||
|
<h4>统计分析</h4>
|
||||||
|
<div class="tabs-button">
|
||||||
|
<div class="tabs-button-box">
|
||||||
|
<div class="tabs-button-btn"
|
||||||
|
@click="tabHandleClick(item)"
|
||||||
|
v-for="item in tabsButton"
|
||||||
|
:key="item"
|
||||||
|
:class="tabsActiveName == item?'tabs-button-btn-active':''"
|
||||||
|
>
|
||||||
|
{{item}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filter-btn-box">
|
||||||
|
<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>
|
||||||
|
<div key="video" v-if="tabsActiveName == '视频感知事件'">
|
||||||
|
<div class="event-num">
|
||||||
|
<span>000</span>件
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div id="event-type-chart"></div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div id="event-state-chart"></div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div id="event-time-chart"></div>
|
||||||
|
</div>
|
||||||
|
<div key="road" v-if="tabsActiveName == '出租车走航监测'">
|
||||||
|
<div class="event-num">
|
||||||
|
<span>000</span>件
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div id="road-time-chart"></div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<el-table
|
||||||
|
:data="PollutionRoad"
|
||||||
|
height='356'
|
||||||
|
:cell-style="{
|
||||||
|
color: '#fff',
|
||||||
|
cursor: 'pointer',
|
||||||
|
'background-color': '#18304c',
|
||||||
|
}"
|
||||||
|
:header-cell-style="{
|
||||||
|
color: '#1ffefd',
|
||||||
|
'background-color': '#2b4b7a',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-table-column label="Top" width="50" type="index">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="道路" prop="roadName" show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="84" prop="start" label="路段开始" show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="84" prop="end" label="路段结束" show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="86" prop="times" label="告警次数">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
tabsButton: ["视频感知事件","出租车走航监测"],
|
||||||
|
tabsActiveName: "视频感知事件",
|
||||||
|
filterButton:{
|
||||||
|
typeSelect:['全部','近7天','近30天'],
|
||||||
|
typeSelectActive:'全部',
|
||||||
|
},
|
||||||
|
PollutionRoad:[
|
||||||
|
{
|
||||||
|
roadName: '某某路',
|
||||||
|
start: '开始',
|
||||||
|
end: '结束',
|
||||||
|
times: '10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
roadName: '某某路',
|
||||||
|
start: '开始',
|
||||||
|
end: '结束',
|
||||||
|
times: '10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
roadName: '某某路',
|
||||||
|
start: '开始',
|
||||||
|
end: '结束',
|
||||||
|
times: '10',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
this.$nextTick( () => {
|
||||||
|
this.initEventTypeCharts()
|
||||||
|
this.initEventStateCharts()
|
||||||
|
this.initEventTimeCharts()
|
||||||
|
// this.initRoadTimeCharts()
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabHandleClick(item) {
|
||||||
|
this.tabsActiveName = item
|
||||||
|
if(item == '视频感知事件') {
|
||||||
|
this.$nextTick( () => {
|
||||||
|
this.initEventTypeCharts()
|
||||||
|
this.initEventStateCharts()
|
||||||
|
this.initEventTimeCharts()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(item == '出租车走航监测') {
|
||||||
|
this.$nextTick( () => {
|
||||||
|
this.initRoadTimeCharts()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
typeSelect(item) {
|
||||||
|
this.filterButton.typeSelectActive = item
|
||||||
|
},
|
||||||
|
|
||||||
|
closeDialog(){
|
||||||
|
this.$emit('closeDialog')
|
||||||
|
},
|
||||||
|
|
||||||
|
initEventTypeCharts () {
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: "事件类型分布",
|
||||||
|
left: "left",
|
||||||
|
top: 15,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "normal"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
bottom: 34,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['非法运土', '工地扬尘', '其他'],
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
margin: 7,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(254, 125, 42,0.6)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120, 200, 150],
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(254,125,42,1)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(254,125,42,0)'
|
||||||
|
}]),
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(255,211,107,1)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(255,211,107,0)'
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
barWidth : 23,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position : 'top',
|
||||||
|
distance: 5,
|
||||||
|
color: 'fe982a',
|
||||||
|
fontSize: 18,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
const eventType = echarts.init(
|
||||||
|
document.getElementById('event-type-chart')
|
||||||
|
)
|
||||||
|
eventType.setOption(option)
|
||||||
|
},
|
||||||
|
initEventStateCharts () {
|
||||||
|
const option = {
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: "事件状态分布",
|
||||||
|
left: "left",
|
||||||
|
top: 15,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "normal"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "事件处置率",
|
||||||
|
subtext: ' 65%',
|
||||||
|
left: 35,
|
||||||
|
top: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "normal"
|
||||||
|
},
|
||||||
|
subtextStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#3bed82",
|
||||||
|
fontWeight: "normal",
|
||||||
|
left: 40,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
bottom: 34,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '36%',
|
||||||
|
left: '45%',
|
||||||
|
icon: 'rect',
|
||||||
|
itemHeight: 10,
|
||||||
|
itemWidth: 10,
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
color: 'rgba(255, 255, 255,0.8)',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: '#1ef6f5'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter(name) {
|
||||||
|
let than = option.series[0].data;
|
||||||
|
let total = 0;
|
||||||
|
let tarValue;
|
||||||
|
for (let i = 0, l = than.length; i < l; i++) {
|
||||||
|
total += than[i].value;
|
||||||
|
if (than[i].name == name) {
|
||||||
|
tarValue = than[i].value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let p = (tarValue / total) * 100;
|
||||||
|
return '{name|' + name + " " + " " + '}{value|' + tarValue + '件' + " " + " " + p + "%" + '}'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['65%', '100%'],
|
||||||
|
left: 10,
|
||||||
|
top: 20,
|
||||||
|
width: 140,
|
||||||
|
hoverAnimation: false,
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: 'rgba(24,51,76,0.95)',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
color:['#3bed82', '#fe7d2a','#bfbfbf'],
|
||||||
|
data: [
|
||||||
|
{ value: 50, name: '已处置' },
|
||||||
|
{ value: 25, name: '未处置' },
|
||||||
|
{ value: 25, name: '已作废' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['65%', '80%'],
|
||||||
|
left: 10,
|
||||||
|
z: 22,
|
||||||
|
top: 20,
|
||||||
|
width: 140,
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
hoverAnimation: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
color:['rgba(0,0,0,0.35)'],
|
||||||
|
data: [
|
||||||
|
{ value: 100 },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
const eventState = echarts.init(
|
||||||
|
document.getElementById('event-state-chart')
|
||||||
|
)
|
||||||
|
eventState.setOption(option)
|
||||||
|
},
|
||||||
|
initEventTimeCharts () {
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: "事件时间趋势",
|
||||||
|
left: "left",
|
||||||
|
top: 15,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "normal"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 80,
|
||||||
|
bottom: 34,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255, 255, 255,0.8)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#345a99',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
boundaryGap: ['2%', '2%'],
|
||||||
|
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '数量',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: 'rgba(255, 255, 255.0.8)'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255, 255, 255,0.8)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
interval: '1',
|
||||||
|
show: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: ['#1d3556','#18334c']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(254, 152, 32, 0)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(254, 152, 32, 0.7)'
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#fdd033' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#fe9820' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
const eventTime = echarts.init(
|
||||||
|
document.getElementById('event-time-chart')
|
||||||
|
)
|
||||||
|
eventTime.setOption(option)
|
||||||
|
},
|
||||||
|
initRoadTimeCharts () {
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: "事件时间趋势",
|
||||||
|
left: "left",
|
||||||
|
top: 15,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "normal"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 80,
|
||||||
|
bottom: 34,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255, 255, 255,0.8)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#345a99',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
boundaryGap: ['2%', '2%'],
|
||||||
|
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '数量',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: 'rgba(255, 255, 255,0.8)'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255, 255, 255,0.8)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
interval: '1',
|
||||||
|
show: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: ['#1d3556','#18334c']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(254, 152, 32, 0)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(254, 152, 32, 0.7)'
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#fdd033' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#fe9820' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
const roadTime = echarts.init(
|
||||||
|
document.getElementById('road-time-chart')
|
||||||
|
)
|
||||||
|
roadTime.setOption(option)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scpoed>
|
||||||
|
#StatisticalAnalysis {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
padding: 12px 12px 18px;
|
||||||
|
.title-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 42px;
|
||||||
|
width: 100%;
|
||||||
|
opacity: .4;
|
||||||
|
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
|
||||||
|
}
|
||||||
|
.close-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
top: 12px;
|
||||||
|
color: #3afefc;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-button {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 20px;
|
||||||
|
.tabs-button-box {
|
||||||
|
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%;
|
||||||
|
width: 64px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #1ffffc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.filter-btn-box {
|
||||||
|
margin-top: 14px;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-num {
|
||||||
|
width: 138px;
|
||||||
|
height: 45px;
|
||||||
|
margin: 10px auto;
|
||||||
|
background: url(../../../../assets/construction/StatisticalAnalysisEventNum.png) no-repeat;
|
||||||
|
color: #1ffefd;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
span {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: bold;
|
||||||
|
background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% );
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(90deg, rgba($color: #306db0, $alpha: 0) 0,rgba($color: #306db0, $alpha: 1) 50%, rgba($color: #306db0, $alpha: 0) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#event-type-chart,#event-state-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 207px;
|
||||||
|
}
|
||||||
|
#event-time-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 240px;
|
||||||
|
}
|
||||||
|
#road-time-chart {
|
||||||
|
height: 240px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
::v-deep .el-table {
|
||||||
|
border: 1px solid #325d94;
|
||||||
|
width: 100%;
|
||||||
|
th,td {
|
||||||
|
border-right: 1px solid #325d94 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cell {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
.el-table th.is-leaf {
|
||||||
|
border: 1px solid #1f557c;
|
||||||
|
}
|
||||||
|
.el-table td {
|
||||||
|
border: 0;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.el-table th {
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
.el-table__row:nth-of-type(even) > td {
|
||||||
|
background-color: #113660 !important;
|
||||||
|
}
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
background-color: #10335e;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #446dac !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
<template>
|
||||||
|
<div class="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"
|
||||||
|
:class="tabsActiveName == item?'tabs-button-btn-active':''"
|
||||||
|
>
|
||||||
|
{{item}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="label-content">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入关键词"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
v-model="labelSearch"
|
||||||
|
@input="searchLabel"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
<el-checkbox-group v-model="checkboxGroup">
|
||||||
|
<el-checkbox-button
|
||||||
|
v-for="item in tabList"
|
||||||
|
:label="item.labelName"
|
||||||
|
:key="item.id"
|
||||||
|
@change="tabChange(item)"
|
||||||
|
>
|
||||||
|
{{item.labelName}}
|
||||||
|
</el-checkbox-button>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
|
||||||
|
import bus from "@/views/layout/bus";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabsButton: ["视频标签","视频列表"],
|
||||||
|
tabsActiveName: "视频标签",
|
||||||
|
tabList:[],
|
||||||
|
labelSearch:'',
|
||||||
|
checkboxGroup: [],
|
||||||
|
cameraAllData:[],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
getCameraAllLabel().then((res) => {
|
||||||
|
this.tabList = res.data.data
|
||||||
|
});
|
||||||
|
getCameraAll().then((res) => {
|
||||||
|
this.cameraAllData = res.data
|
||||||
|
// this.addResourceTomap('cameraAll',res.data);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabHandleClick(item) {
|
||||||
|
this.tabsActiveName = item
|
||||||
|
},
|
||||||
|
tabChange(item){
|
||||||
|
if(this.checkboxGroup.indexOf(item.labelName) !== -1){
|
||||||
|
bus.$emit("removeCameraLayer",'全部')
|
||||||
|
getCameraLabel({labelCode:item.labelCode}).then((res) => {
|
||||||
|
bus.$emit("CameraSingleDataOnMap",item.labelName,res.data.data)
|
||||||
|
|
||||||
|
// this.addResourceTomap(item.labelName,res.data.data);
|
||||||
|
// res.data.data.forEach((item) => {
|
||||||
|
// this.camreaTreeSingle.forEach((val) => {
|
||||||
|
// if(item.nodeName == val.channelName){
|
||||||
|
// val.children.push(item)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// this.camreaTreeIsShow = false;
|
||||||
|
})
|
||||||
|
}else {
|
||||||
|
bus.$emit("removeCameraLayer",item.labelName)
|
||||||
|
// this.checkStatus = "2"
|
||||||
|
// this.camreaTreeIsShow = true
|
||||||
|
// getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||||
|
// this.camreaTree = res.data.data
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
searchLabel(value) {
|
||||||
|
const params = {
|
||||||
|
labelName:value
|
||||||
|
}
|
||||||
|
selectByLabelName(params).then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
this.tabList = res.data.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../../../assets/construction/listTopBg.png) no-repeat,
|
||||||
|
url(../../../../assets/construction/videoTag.png) no-repeat 324px 17px;
|
||||||
|
padding: 30px 0 18px 18px;
|
||||||
|
|
||||||
|
.tabs-button {
|
||||||
|
position: relative;
|
||||||
|
.tabs-button-box {
|
||||||
|
width: 358px;
|
||||||
|
padding-bottom: 11px;
|
||||||
|
border-bottom: 3px solid #2c619c;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.tabs-button-btn {
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgba($color: #fff, $alpha: 0.6);
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 28px;
|
||||||
|
}
|
||||||
|
.tabs-button-btn-active {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.tabs-button-btn-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15px;
|
||||||
|
right: 6%;
|
||||||
|
width: 64px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #1ffffc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .label-content {
|
||||||
|
margin-top: 16px;
|
||||||
|
.el-input {
|
||||||
|
width: 358px;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
border: 1px solid rgba(31,254,253,.9);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: unset;
|
||||||
|
background: rgba($color: #203b5d, $alpha: .8);
|
||||||
|
&::placeholder {
|
||||||
|
color: rgba($color: #fff, $alpha: 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-input__prefix {
|
||||||
|
color: rgba(31,254,253,.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-checkbox-group {
|
||||||
|
height: 316px;
|
||||||
|
width: 372px;
|
||||||
|
overflow-y: auto;
|
||||||
|
margin-top: 6px;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
background-color: #10335e;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #446dac !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-checkbox-button {
|
||||||
|
border-radius: 15px;
|
||||||
|
margin: 10px;
|
||||||
|
.el-checkbox-button__inner {
|
||||||
|
height: 30px;
|
||||||
|
line-height: 6px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: linear-gradient(0deg, rgba($color: #24517b, $alpha: 1) 0, rgba($color: #24517b, $alpha: 0) 100%);
|
||||||
|
border: 1px solid #1d98a0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1ffefd;
|
||||||
|
}
|
||||||
|
.el-checkbox-button__inner:hover {
|
||||||
|
border: 1px solid #1ffefd;
|
||||||
|
background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-checkbox-button.is-checked {
|
||||||
|
.el-checkbox-button__inner{
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #1ffefd;
|
||||||
|
background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.wuhongjian
|
||||||
|
* @Date: 2020-06-09 20:35:02
|
||||||
|
* @LastEditors: hisense.wuhongjian
|
||||||
|
* @LastEditTime: 2021-12-21 14:40:47
|
||||||
|
* @Description: 超图地图容器
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div :id="mapId" class="tiled-map" />
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TiledMap',
|
||||||
|
props: {
|
||||||
|
mapId: {
|
||||||
|
// 地图容器的div的id
|
||||||
|
type: String,
|
||||||
|
default: () => 'map',
|
||||||
|
},
|
||||||
|
hiMap: {
|
||||||
|
// 调用该组件的父组件的v-model绑定的对象
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: '', // 地图对象
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (!this.map) {
|
||||||
|
this.initMap();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMap() {
|
||||||
|
// setTimeout(()=>{
|
||||||
|
this.map = this.hiMap.initMap(this.mapId, { type: 'remote' });
|
||||||
|
// },000);
|
||||||
|
// this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.tiled-map {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,520 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div id="contain">
|
||||||
|
<div class="map-box">
|
||||||
|
<div :id="mapId" class="normal-map-content">
|
||||||
|
<tiled-map :hi-map="hiMap" :map-id="mapId" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="title">青岛市积水点地图</div>
|
||||||
|
<div></div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="searchPoint">
|
||||||
|
<el-autocomplete
|
||||||
|
class="inline-input"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
v-model="state"
|
||||||
|
:fetch-suggestions="querySearchAsync"
|
||||||
|
placeholder="搜索地点"
|
||||||
|
:trigger-on-focus="false"
|
||||||
|
@select="handleSelect"
|
||||||
|
:popper-append-to-body="false"
|
||||||
|
popper-class="my-autocomplete"
|
||||||
|
>
|
||||||
|
<template slot-scope="{ item }">
|
||||||
|
<div style="margin-bottom: -10px" class="name">
|
||||||
|
{{ item.text || "" }}
|
||||||
|
</div>
|
||||||
|
<span style="font-size: 10px; color: #afbcc5">{{
|
||||||
|
item.detail.address || ""
|
||||||
|
}}</span>
|
||||||
|
</template>
|
||||||
|
<!-- <template slot="append">搜索</template> -->
|
||||||
|
</el-autocomplete>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eventNum">
|
||||||
|
累计事件数量
|
||||||
|
<p><span>1236</span>件</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 事件感知 -->
|
||||||
|
<div class="complaintContent">
|
||||||
|
<complaint-event ref="complaintEventRef"></complaint-event>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 视频标签、列表 -->
|
||||||
|
<div class="videoList">
|
||||||
|
<video-list ref="videoListRef"></video-list>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 工地列表 -->
|
||||||
|
<div class="siteList">
|
||||||
|
<site-list></site-list>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="changeLayer">
|
||||||
|
<div class="title">地图显示</div>
|
||||||
|
<div class="change-btn-box">
|
||||||
|
<el-checkbox-group v-model="changeLayerBtnGroup">
|
||||||
|
<el-checkbox v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { HieimpMap } from "@/supermap/map-init";
|
||||||
|
import TiledMap from "./components/tiledMap";
|
||||||
|
import { searchCamera } from "@/api/videoSurveillance/index";
|
||||||
|
import bus from "@/views/layout/bus";
|
||||||
|
import complaintEvent from "./components/ComplaintEvent";
|
||||||
|
import VideoList from "./components/VideoList";
|
||||||
|
import SiteList from "./components/SiteList";
|
||||||
|
import { selectByJdWd } from "@/api/construction/index";
|
||||||
|
import { createSiteListPop } from "@/supermap/createMarkerPopup";
|
||||||
|
import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
hiMap: new HieimpMap(), // 地图全局对象
|
||||||
|
mapId: "map-single", // 地图容器的id
|
||||||
|
|
||||||
|
state: "",
|
||||||
|
constructionSiteData: [],
|
||||||
|
changeLayerBtnList: ['AI事件','视频监控','工地','道路'],
|
||||||
|
changeLayerBtnGroup: [],
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
TiledMap,
|
||||||
|
complaintEvent,
|
||||||
|
VideoList,
|
||||||
|
SiteList,
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
|
||||||
|
this.multiScreenFun = this.hiMap.multiScreenFun(
|
||||||
|
this.hiMap.mapObj,
|
||||||
|
this.hiMapFun
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 根据经纬度查询半径内所有的工地
|
||||||
|
bus.$off("openCauseAnalysis");
|
||||||
|
bus.$on("openCauseAnalysis", (row) => {
|
||||||
|
// this.timeRegion = data.data.dt;
|
||||||
|
// this.hiMapFun.removerPolygon();
|
||||||
|
this.hiMapFun.removeLayerByLayerName("constructionSite");
|
||||||
|
// debugger
|
||||||
|
// this.circle(latLng);
|
||||||
|
this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd });
|
||||||
|
// this.WithinRadiusSite(latLng);
|
||||||
|
let dataEvent = [{
|
||||||
|
latLng: { lat: row.wd, lng: row.jd },
|
||||||
|
data: row,
|
||||||
|
type: "site",
|
||||||
|
}]
|
||||||
|
this.hiMapFun.addPointsToMap(
|
||||||
|
dataEvent,
|
||||||
|
"construction.png",
|
||||||
|
"constructionSite",
|
||||||
|
createSiteListPop
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
bus.$off("roadOnMap");
|
||||||
|
bus.$on("roadOnMap",(roadData) => {
|
||||||
|
this.roadOnMap(roadData);
|
||||||
|
})
|
||||||
|
|
||||||
|
bus.$off("removeCameraLayer");
|
||||||
|
bus.$on("removeCameraLayer",(type) => {
|
||||||
|
this.hiMapFun.removeLayerByLayerName(type)
|
||||||
|
})
|
||||||
|
|
||||||
|
bus.$off("CameraSingleDataOnMap");
|
||||||
|
bus.$on("CameraSingleDataOnMap",(labelName,data) => {
|
||||||
|
this.addResourceTomap(labelName,data);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
querySearchAsync(queryString, cb) {
|
||||||
|
if (queryString.length > 0) {
|
||||||
|
searchCamera(queryString).then((res) => {
|
||||||
|
cb(res.data.suggestions);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSelect(item) {
|
||||||
|
this.hiMapFun.clearAllLayers();
|
||||||
|
const arr = item.detail.location.split(",");
|
||||||
|
const searchDataDetail = [
|
||||||
|
{
|
||||||
|
latLng: { lat: arr[1], lng: arr[0] },
|
||||||
|
data: item,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] });
|
||||||
|
this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0]);
|
||||||
|
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||||
|
searchDataDetail,
|
||||||
|
"poi-red.png",
|
||||||
|
"address"
|
||||||
|
);
|
||||||
|
// this.timer = setTimeout(() => {
|
||||||
|
// this.addResourceTomap("全部", this.cameraAllData);
|
||||||
|
// }, 1000);
|
||||||
|
},
|
||||||
|
// 圈选查询
|
||||||
|
circle(latlng) {
|
||||||
|
this.hiMapFun.addCircleToMap(latlng, 3500);
|
||||||
|
},
|
||||||
|
// 根据经纬度查半径内的工地
|
||||||
|
async WithinRadiusSite(data) {
|
||||||
|
const param = {
|
||||||
|
jd: data.lng,
|
||||||
|
radius: 3000,
|
||||||
|
wd: data.lat,
|
||||||
|
};
|
||||||
|
const res = await selectByJdWd(param);
|
||||||
|
this.constructionSiteData = res.data.data;
|
||||||
|
const dataEvent = [];
|
||||||
|
this.constructionSiteData.forEach((item) => {
|
||||||
|
const arr = [0, 0.0, "", "0", "0.0"];
|
||||||
|
if (arr.indexOf(item.wd) == -1) {
|
||||||
|
dataEvent.push({
|
||||||
|
latLng: { lat: Number(item.wd), lng: Number(item.jd) },
|
||||||
|
data: item,
|
||||||
|
type: "site",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.hiMapFun.addPointsToMap(
|
||||||
|
dataEvent,
|
||||||
|
"construction.png",
|
||||||
|
"constructionSite",
|
||||||
|
createSiteListPop
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
//路网上图
|
||||||
|
roadOnMap(roadData) {
|
||||||
|
roadData.forEach((item) => {
|
||||||
|
let newPoint = JSON.parse(item.points);
|
||||||
|
newPoint[0].map((Point) => {
|
||||||
|
Point.reverse();
|
||||||
|
});
|
||||||
|
item.pm10 = Number(item.pm10);
|
||||||
|
switch (true) {
|
||||||
|
case 0 < item.pm10 && item.pm10 <= 50:
|
||||||
|
this.hiMapFun.addPathToMap(newPoint, "#36fe78");
|
||||||
|
break;
|
||||||
|
case 50 < item.pm10 && item.pm10 <= 150:
|
||||||
|
this.hiMapFun.addPathToMap(newPoint, "#fde202");
|
||||||
|
break;
|
||||||
|
case 150 < item.pm10 && item.pm10 <= 250:
|
||||||
|
this.hiMapFun.addPathToMap(newPoint, "#feb403");
|
||||||
|
break;
|
||||||
|
case 250 < item.pm10 && item.pm10 <= 350:
|
||||||
|
this.hiMapFun.addPathToMap(newPoint, "#fd8402");
|
||||||
|
break;
|
||||||
|
case 350 < item.pm10 && item.pm10 <= 420:
|
||||||
|
this.hiMapFun.addPathToMap(newPoint, "#fd4302");
|
||||||
|
break;
|
||||||
|
case 420 < item.pm10 && item.pm10 <= 500:
|
||||||
|
this.hiMapFun.addPathToMap(newPoint, "#fd0202");
|
||||||
|
break;
|
||||||
|
case 500 < item.pm10 && item.pm10 <= 600:
|
||||||
|
this.hiMapFun.addPathToMap(newPoint, "#a80101");
|
||||||
|
break;
|
||||||
|
case 600 < item.pm10 && item.pm10 <= 700:
|
||||||
|
this.hiMapFun.addPathToMap(newPoint, "#690000");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.hiMapFun.addPathToMap(newPoint, "#36fe78");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
layerHandleChange(item) {
|
||||||
|
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
||||||
|
switch (item) {
|
||||||
|
case "道路":
|
||||||
|
this.roadOnMap(this.$refs.complaintEventRef.roadData);
|
||||||
|
break;
|
||||||
|
case "AI事件":
|
||||||
|
break;
|
||||||
|
case "视频监控":
|
||||||
|
this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
|
||||||
|
break;
|
||||||
|
case "工地":
|
||||||
|
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
switch (item) {
|
||||||
|
case "道路":
|
||||||
|
this.hiMapFun.removerPolyline();
|
||||||
|
break;
|
||||||
|
case "AI事件":
|
||||||
|
break;
|
||||||
|
case "视频监控":
|
||||||
|
this.hiMapFun.removeLayerByLayerName('全部')
|
||||||
|
break;
|
||||||
|
case "工地":
|
||||||
|
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
addResourceTomap(type,data) {
|
||||||
|
const dataEvent = [];
|
||||||
|
data.forEach((item) => {
|
||||||
|
const arr = [0,0.0,'','0','0.0']
|
||||||
|
if(arr.indexOf(item.gpsX) == -1){
|
||||||
|
dataEvent.push({
|
||||||
|
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
|
||||||
|
data: item,
|
||||||
|
type: 'videoSurveillance'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeDestroy() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||||
|
src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
|
||||||
|
}
|
||||||
|
.map-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
.normal-map-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#contain {
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1000;
|
||||||
|
width: 100%;
|
||||||
|
height: 166px;
|
||||||
|
background: url("~@/assets/construction/title.png") no-repeat;
|
||||||
|
text-align: center;
|
||||||
|
.title {
|
||||||
|
font-size: 46px;
|
||||||
|
font-weight: bold;
|
||||||
|
background: linear-gradient(0deg, #99a8d0 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 3px 10px rgba(0,0,0,.9);
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchPoint {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
left: 496px;
|
||||||
|
top: 90px;
|
||||||
|
border: 1px solid rgba(31,254,253,.9);
|
||||||
|
::v-deep .el-input__inner {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba($color: #203b5d, $alpha: .8);
|
||||||
|
width: 226px;
|
||||||
|
height: 36px;
|
||||||
|
border:none;
|
||||||
|
&::placeholder {
|
||||||
|
color: rgba($color: #fff, $alpha: 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .el-input__prefix {
|
||||||
|
top: -1px;
|
||||||
|
color: rgba(31,254,253,.9);
|
||||||
|
}
|
||||||
|
::v-deep .el-input-group__append {
|
||||||
|
width: 54px;
|
||||||
|
height: 30px;
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: 6px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-indent: -4px;
|
||||||
|
color: #5e9bbd;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
::v-deep .my-autocomplete {
|
||||||
|
top: 29px !important;
|
||||||
|
z-index: -1 !important;
|
||||||
|
width: 226px !important;
|
||||||
|
left: 0px !important;
|
||||||
|
background: rgba(32,59,93,.8);
|
||||||
|
border: 1px solid #1ffefd;
|
||||||
|
li {
|
||||||
|
color: #fff;
|
||||||
|
&:hover {
|
||||||
|
background: #41738f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.complaintContent {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
left: 10px;
|
||||||
|
top: 90px;
|
||||||
|
height:908px;
|
||||||
|
width: 478px;
|
||||||
|
background: rgba($color: #05213b, $alpha: .85)
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventNum {
|
||||||
|
width: 245px;
|
||||||
|
height: 92px;
|
||||||
|
position: absolute;
|
||||||
|
top: 87px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 1000;
|
||||||
|
background: url(../../../assets/construction/eventNumBg.png) no-repeat;
|
||||||
|
text-align: center;
|
||||||
|
padding: 6px 0 13px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
p {
|
||||||
|
line-height: 50px;
|
||||||
|
span {
|
||||||
|
font-size: 46px;
|
||||||
|
font-weight: bold;
|
||||||
|
background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% );
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.videoList {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
right: 8px;
|
||||||
|
top: 92px;
|
||||||
|
width: 398px;
|
||||||
|
height:460px;
|
||||||
|
background: rgba($color: #05213b, $alpha: .85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.siteList {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
right: 8px;
|
||||||
|
top: 562px;
|
||||||
|
width: 398px;
|
||||||
|
height:500px;
|
||||||
|
background: rgba($color: #05213b, $alpha: .85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.changeLayer {
|
||||||
|
width: 332px;
|
||||||
|
height: 67px;
|
||||||
|
background: rgba(7,26,44,.8);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
z-index: 1000;
|
||||||
|
.title {
|
||||||
|
width: 96px;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(255,255,255,.6);
|
||||||
|
text-align: center;
|
||||||
|
line-height: 67px;
|
||||||
|
}
|
||||||
|
.change-btn-box {
|
||||||
|
height: 42px;
|
||||||
|
width: 230px;
|
||||||
|
margin-top: 12px;
|
||||||
|
border-left: 1px solid #005ea3;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
::v-deep .el-checkbox-group {
|
||||||
|
.el-checkbox {
|
||||||
|
width: 70px;
|
||||||
|
color: #fff;
|
||||||
|
.el-checkbox__input {
|
||||||
|
.el-checkbox__inner {
|
||||||
|
border: 1px solid #1ffefd;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-checkbox.is-checked {
|
||||||
|
.el-checkbox__label {
|
||||||
|
color: #1ffefd;
|
||||||
|
}
|
||||||
|
.el-checkbox__input {
|
||||||
|
.el-checkbox__inner {
|
||||||
|
border: 1px solid #1ffefd;
|
||||||
|
background: transparent;
|
||||||
|
&::after {
|
||||||
|
border: 1px solid #1ffefd;
|
||||||
|
border-left: 0;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang='scss'>
|
||||||
|
// ::-webkit-scrollbar {
|
||||||
|
// width: 8px;
|
||||||
|
// background: rgba(255, 255, 255, 0.1);
|
||||||
|
// }
|
||||||
|
// ::-webkit-scrollbar-thumb {
|
||||||
|
// border-radius: 10px;
|
||||||
|
// background: rgba(255, 255, 255, 0.15);
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue