This commit is contained in:
yangxiaojiang
parent
f374443ba5
commit
012ab5879f
|
|
@ -0,0 +1,10 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function selectKeyAreaList(params) {
|
||||
return request({
|
||||
url: 'api/project/keyArea/selectKeyAreaList',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -24,3 +24,35 @@ export function selectCameraByName(params) {
|
|||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function selectReportOrigin(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectReportOrigin',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function selectCountWater(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectCountWater',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function selectCountWaters(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectCountWaters',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function selectCountLevel(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectCountLevel',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,6 +95,11 @@ export const pageRoutes = [{
|
|||
name: 'construction',
|
||||
meta: { title: '在建工地综合监管平台' }
|
||||
},
|
||||
{ path: '/area',
|
||||
component: () => import('@/views/pages/area'),
|
||||
name: 'area',
|
||||
meta: { title: '重点区域监控平台' }
|
||||
},
|
||||
{ path: '/point',
|
||||
component: () => import('@/views/pages/civilizedCity/components/Point'),
|
||||
name: 'point',
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -564,7 +564,7 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
|
|||
// layers = createMarkerClusterLayer(defaultStyle)
|
||||
const icon = createDefaultFeatureStyle({
|
||||
img: url || 'the-head.png',
|
||||
iconSize: url == ('construction.png'||url == 'waterPoint.png')?[37,49]:[36, 36],
|
||||
iconSize: url == ('construction.png'||url == 'waterPoint2.png'||url == 'waterPoint1.png'||url == 'waterPoint3.png')?[37,49]:[36, 36],
|
||||
})
|
||||
const arr = []
|
||||
features.map((feature, index) => {
|
||||
|
|
@ -583,14 +583,14 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
|
|||
const elementHtml = createPopupFun(feature)
|
||||
if (elementHtml) {
|
||||
if(feature.type=='road'){
|
||||
L.popup({ className: 'roadGovernance-popup', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
L.popup({ className: 'roadGovernance-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else if(feature.type=='site'){
|
||||
L.popup({ className: 'site-popup', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
L.popup({ className: 'site-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
}
|
||||
else if(feature.type=='waterPoint'){
|
||||
L.popup({ className: 'water-point-pop', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
L.popup({ className: 'water-point-pop', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else{
|
||||
L.popup({ className: 'epidemic-address', keepInView: true, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,521 @@
|
|||
<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> -->
|
||||
<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">
|
||||
<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-count="pageCount"
|
||||
:current-page="currentPage"
|
||||
>
|
||||
</el-pagination>
|
||||
<el-pagination
|
||||
v-else
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@current-change="pageChange"
|
||||
: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 { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
|
||||
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
||||
import bus from "@/views/layout/bus";
|
||||
import {
|
||||
selectEvent,
|
||||
selectByName,
|
||||
} from "@/api/civilizedCity";
|
||||
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: ["全部","占道经营","渣土车发现","违章停车","环境卫生","沿街晾晒","渣土车未密闭","道路积水事件",],
|
||||
};
|
||||
},
|
||||
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,
|
||||
};
|
||||
selectEvent(params).then((res) => {
|
||||
this.eventListData = res.data.data.events
|
||||
this.pageCount = res.data.data.page
|
||||
});
|
||||
},
|
||||
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 == '全部'){
|
||||
selectEvent({ pageSize: 4,page: val,}).then((res) => {
|
||||
this.eventListData = res.data.data.events
|
||||
this.pageCount = res.data.data.page
|
||||
this.total = 0
|
||||
});
|
||||
} else {
|
||||
selectByName({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 == '全部'){
|
||||
selectEvent({ pageSize: 4,page: 1,}).then((res) => {
|
||||
this.eventListData = res.data.data.events
|
||||
this.pageCount = res.data.data.page
|
||||
this.total = 0
|
||||
});
|
||||
} else {
|
||||
selectByName({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
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
position: relative;
|
||||
|
||||
.event-details {
|
||||
cursor: pointer;
|
||||
margin-top: 16px;
|
||||
// margin-top: 18px;
|
||||
width: 100%;
|
||||
max-height: 130px;
|
||||
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>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<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 prop="areaName" label="名称" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="location" label="位置" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="allNums" label="人数">
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bus from "@/views/layout/bus";
|
||||
import {
|
||||
selectKeyAreaList
|
||||
} from "@/api/area";
|
||||
|
||||
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: '窗口单位'
|
||||
},
|
||||
],
|
||||
selectValue: '公园广场'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
selectKeyAreaList({type:"公园广场"}).then((res) => {
|
||||
console.log(res.data.data)
|
||||
this.siteData = res.data.data
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
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) {
|
||||
selectKeyAreaList({type:val}).then((res) => {
|
||||
this.siteData = res.data.data
|
||||
})
|
||||
},
|
||||
// 行点击
|
||||
analyse(row) {
|
||||
bus.$emit("openCauseAnalysis", row);
|
||||
},
|
||||
// 关闭基本信息窗口
|
||||
informationClose() {
|
||||
this.informationShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</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%;
|
||||
background: transparent;
|
||||
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,351 @@
|
|||
<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 v-if="tabsActiveName == '视频标签'" 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 v-if="tabsActiveName == '视频列表'" class="label-content">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
suffix-icon="el-icon-search"
|
||||
v-model="labelSearch"
|
||||
@input="searchCameraTree"
|
||||
>
|
||||
</el-input>
|
||||
<el-tree
|
||||
v-show="cameraTreeIsShow"
|
||||
id="tree"
|
||||
:data="cameraTree"
|
||||
:props="{label:'name',children:'children',isLeaf:'leaf',}"
|
||||
:load="loadNode"
|
||||
node-key="id"
|
||||
@node-click="treeCameraClick"
|
||||
empty-text="暂无数据"
|
||||
:filter-node-method="filterNode"
|
||||
lazy>
|
||||
<!-- 是否离线checkStatus -->
|
||||
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
|
||||
<!-- <span>{{ data.channelName || '' }}</span> -->
|
||||
<!-- </span> -->
|
||||
</el-tree>
|
||||
<el-tree
|
||||
v-show="!cameraTreeIsShow"
|
||||
ref="tree"
|
||||
:data="cameraTreeSingle"
|
||||
:props="{label:'channelName',children:'children'}"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="treeCameraClick"
|
||||
>
|
||||
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
|
||||
<!-- <span>{{ data.channelName || '' }}</span> -->
|
||||
<!-- </span> -->
|
||||
</el-tree>
|
||||
</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:[],
|
||||
cameraTreeIsShow:true,
|
||||
cameraTreeSingle: [],
|
||||
checkStatus: '2',
|
||||
cameraTree:[],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
getCameraAllLabel().then((res) => {
|
||||
this.tabList = res.data.data
|
||||
});
|
||||
getCameraAll().then((res) => {
|
||||
this.cameraAllData = res.data
|
||||
// this.addResourceTomap('cameraAll',res.data);
|
||||
})
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
console.log(this.cameraTree)
|
||||
res.data.data.forEach((item) => {
|
||||
this.cameraTreeSingle.push({
|
||||
channelName: item.name,
|
||||
children: []
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
checkStatus(newV,oldV) {
|
||||
console.log(newV)
|
||||
this.$refs.tree.filter(newV)
|
||||
}
|
||||
},
|
||||
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.cameraTreeSingle.forEach((val) => {
|
||||
// if(item.nodeName == val.channelName){
|
||||
// val.children.push(item)
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// this.cameraTreeIsShow = false;
|
||||
})
|
||||
}else {
|
||||
bus.$emit("removeCameraLayer",item.labelName)
|
||||
// this.checkStatus = "2"
|
||||
// this.cameraTreeIsShow = true
|
||||
// getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
// this.cameraTree = res.data.data
|
||||
// })
|
||||
}
|
||||
},
|
||||
searchLabel(value) {
|
||||
const params = {
|
||||
labelName:value
|
||||
}
|
||||
selectByLabelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.tabList = res.data.data
|
||||
})
|
||||
},
|
||||
searchCameraTree(value) {
|
||||
if(value.length > 0){
|
||||
const params = {
|
||||
channelName:value
|
||||
}
|
||||
selectByChannelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.cameraTree = []
|
||||
res.data.data.forEach((item) => {
|
||||
this.cameraTree.push({
|
||||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode:item.channelCode,
|
||||
leaf:true,
|
||||
})
|
||||
})
|
||||
})
|
||||
}else {
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.checkboxGroup = []
|
||||
this.checkStatus = "2";
|
||||
this.cameraTreeIsShow = true
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
})
|
||||
document.getElementById("tree").scrollTop = 0;
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
// if (node.level === 0) {
|
||||
// return resolve([{ name: 'region' }]);
|
||||
// }
|
||||
console.log(node)
|
||||
if (node.level > 0) {
|
||||
let subData = []
|
||||
getCameraAllOrgan({parentId:node.data.id}).then((res) => {
|
||||
if(res.data.data.length == 0){
|
||||
const params = {
|
||||
parentId:node.data.id,
|
||||
checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus,
|
||||
}
|
||||
getCameraByParentId(params).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
subData.push({
|
||||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode:item.channelCode,
|
||||
checkStatus:item.checkStatus,
|
||||
leaf:true,
|
||||
})
|
||||
})
|
||||
return resolve(subData);
|
||||
})
|
||||
}else{
|
||||
subData = res.data.data
|
||||
return resolve(subData);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
treeCameraClick(data) {
|
||||
console.log(data)
|
||||
// if(data.channelCode){
|
||||
// const cameraTree = [{
|
||||
// latLng: { lat: data.gpsY, lng: data.gpsX },
|
||||
// data: data,
|
||||
// type:'cameraTree'
|
||||
// }]
|
||||
// this.hiMapFun.removeLayerByLayerName("cameraTree");
|
||||
// this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
|
||||
// const arr = [0,0.0,'','0','0.0']
|
||||
// if(arr.indexOf(data.gpsX) == -1){
|
||||
// this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
|
||||
// this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
|
||||
// }
|
||||
// }
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (value == "2") return true;
|
||||
if (value == "0") {
|
||||
return data.checkStatus == 0;
|
||||
}
|
||||
if (value == "1") {
|
||||
return data.checkStatus == 1;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</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,534 @@
|
|||
<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 class="title">重点区域</div>
|
||||
<div class="change-btn-box" style="width:230px">
|
||||
<el-checkbox-group v-model="changeLayerBtnGroup">
|
||||
<el-checkbox v-for="item in changeLayerBtnListArea" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="title">人流热力</div>
|
||||
<div class="change-btn-box">
|
||||
<el-checkbox-group v-model="changeLayerBtnGroup">
|
||||
<el-checkbox v-for="item in changeLayerBtnListHot" :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事件','视频监控','工地','道路'],
|
||||
changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'],
|
||||
changeLayerBtnListHot: ['全市','本市','外地',],
|
||||
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: 99px;
|
||||
}
|
||||
.change-btn-box {
|
||||
height: 92px;
|
||||
width: 134px;
|
||||
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>
|
||||
|
|
@ -1128,9 +1128,9 @@ export default {
|
|||
};
|
||||
selectByName(params).then((res) => {
|
||||
console.log(res);
|
||||
res.data.data.sort(this.compare("captureTime", "inverted"));
|
||||
res.data.data.events.sort(this.compare("captureTime", "inverted"));
|
||||
// console.log(res.data.data)
|
||||
this.EventTypeData = res.data.data;
|
||||
this.EventTypeData = res.data.data.events;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@click="tabHandleClick(item)"
|
||||
v-for="item in tabsButton"
|
||||
:key="item"
|
||||
:class="tabsActiveName == item?'tabs-button-btn-active':''"
|
||||
:class="tabsActiveName == item ? 'tabs-button-btn-active' : '' "
|
||||
>
|
||||
{{item}}
|
||||
</div>
|
||||
|
|
@ -42,14 +42,10 @@
|
|||
@input="searchCameraTree"
|
||||
>
|
||||
</el-input>
|
||||
<el-radio v-model="checkStatus" label="2">全部</el-radio>
|
||||
<el-radio v-model="checkStatus" label="1">正常</el-radio>
|
||||
<el-radio v-model="checkStatus" label="0">异常</el-radio>
|
||||
<span class="reset-button" @click="reset">重置</span>
|
||||
<el-tree
|
||||
v-show="camreaTreeIsShow"
|
||||
v-show="cameraTreeIsShow"
|
||||
id="tree"
|
||||
:data="camreaTree"
|
||||
:data="cameraTree"
|
||||
:props="{label:'name',children:'children',isLeaf:'leaf',}"
|
||||
:load="loadNode"
|
||||
node-key="id"
|
||||
|
|
@ -58,21 +54,21 @@
|
|||
:filter-node-method="filterNode"
|
||||
lazy>
|
||||
<!-- 是否离线checkStatus -->
|
||||
<span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.name }}</span>
|
||||
</span>
|
||||
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
|
||||
<!-- <span>{{ data.channelName || '' }}</span> -->
|
||||
<!-- </span> -->
|
||||
</el-tree>
|
||||
<el-tree
|
||||
v-show="!camreaTreeIsShow"
|
||||
v-show="!cameraTreeIsShow"
|
||||
ref="tree"
|
||||
:data="camreaTreeSingle"
|
||||
:data="cameraTreeSingle"
|
||||
:props="{label:'channelName',children:'children'}"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="treeCameraClick"
|
||||
>
|
||||
<span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.channelName }}</span>
|
||||
</span>
|
||||
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
|
||||
<!-- <span>{{ data.channelName || '' }}</span> -->
|
||||
<!-- </span> -->
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -91,10 +87,10 @@ export default {
|
|||
labelSearch:'',
|
||||
checkboxGroup: [],
|
||||
cameraAllData:[],
|
||||
camreaTreeIsShow:true,
|
||||
camreaTreeSingle: [],
|
||||
cameraTreeIsShow:true,
|
||||
cameraTreeSingle: [],
|
||||
checkStatus: '2',
|
||||
camreaTree:[],
|
||||
cameraTree:[],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -106,9 +102,10 @@ export default {
|
|||
// this.addResourceTomap('cameraAll',res.data);
|
||||
})
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
this.cameraTree = res.data.data
|
||||
console.log(this.cameraTree)
|
||||
res.data.data.forEach((item) => {
|
||||
this.camreaTreeSingle.push({
|
||||
this.cameraTreeSingle.push({
|
||||
channelName: item.name,
|
||||
children: []
|
||||
})
|
||||
|
|
@ -133,20 +130,20 @@ export default {
|
|||
|
||||
// this.addResourceTomap(item.labelName,res.data.data);
|
||||
// res.data.data.forEach((item) => {
|
||||
// this.camreaTreeSingle.forEach((val) => {
|
||||
// this.cameraTreeSingle.forEach((val) => {
|
||||
// if(item.nodeName == val.channelName){
|
||||
// val.children.push(item)
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// this.camreaTreeIsShow = false;
|
||||
// this.cameraTreeIsShow = false;
|
||||
})
|
||||
}else {
|
||||
bus.$emit("removeCameraLayer",item.labelName)
|
||||
// this.checkStatus = "2"
|
||||
// this.camreaTreeIsShow = true
|
||||
// this.cameraTreeIsShow = true
|
||||
// getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
// this.camreaTree = res.data.data
|
||||
// this.cameraTree = res.data.data
|
||||
// })
|
||||
}
|
||||
},
|
||||
|
|
@ -166,9 +163,9 @@ export default {
|
|||
}
|
||||
selectByChannelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.camreaTree = []
|
||||
this.cameraTree = []
|
||||
res.data.data.forEach((item) => {
|
||||
this.camreaTree.push({
|
||||
this.cameraTree.push({
|
||||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
|
|
@ -179,16 +176,16 @@ export default {
|
|||
})
|
||||
}else {
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
this.cameraTree = res.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.checkboxGroup = []
|
||||
this.checkStatus = "2";
|
||||
this.camreaTreeIsShow = true
|
||||
this.cameraTreeIsShow = true
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
this.cameraTree = res.data.data
|
||||
})
|
||||
document.getElementById("tree").scrollTop = 0;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="toady-list-content">
|
||||
<div class="toady-list-rotate"></div>
|
||||
<div class="toady-list-icon"></div>
|
||||
<div class="toady-list-num">易积水点<span>{{list.length || 0}} </span>个</div>
|
||||
<div class="toady-list-num">易积水点<span>{{listAll.length || 0}} </span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-box">
|
||||
|
|
@ -17,9 +17,9 @@
|
|||
@click="tabHandleClick(item)"
|
||||
v-for="item in tabsButton"
|
||||
:key="item.index"
|
||||
:class="tabsActiveName == item?'tabs-button-btn-active':''"
|
||||
:class="tabsActiveName == item.title ? 'tabs-button-btn-active' : '' "
|
||||
>
|
||||
{{item}}
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<div class="processStateSelect-btn"
|
||||
v-for="item in filterButton.type"
|
||||
:key="item"
|
||||
:class="filterButton.typeActive.indexOf(item) > -1 ? 'processStateSelect-btn-active':''"
|
||||
:class="filterButton.typeActive.indexOf(item) > -1 ? 'processStateSelect-btn-active' :'' "
|
||||
@click="selectType(item)"
|
||||
>
|
||||
<div class="select-circle"></div>
|
||||
|
|
@ -41,14 +41,16 @@
|
|||
<div class="top">
|
||||
<div>
|
||||
<span class='name'>{{item.waterPointName}}</span>
|
||||
<!-- <span class='topType'>物联感知</span> -->
|
||||
<span class='topType' v-show="item.reportOrigin !== '2'">{{reportOrigin(item.reportOrigin)}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span> -->
|
||||
<span class="type"></span>
|
||||
<span class="img" :class=" item.pointLevel=='traffic' ? 'red' : item.pointLevel=='pedestrian' ? 'yellow' : 'green' "></span>
|
||||
<span class="type">{{item.pointLevel=='traffic' ? '影响车辆(>30cm)' : item.pointLevel=='pedestrian' ? '影响行人(<30cm)' : '无积水(<10cm)' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom"></div>
|
||||
<div class="bottom">
|
||||
<!-- 液位： -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,7 +59,7 @@
|
|||
</template>
|
||||
<script>
|
||||
import { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
|
||||
import { selectWaterPoint,selectWaterCamera } from '@/api/waterPoints'
|
||||
import { selectWaterPoint,selectWaterCamera,selectReportOrigin } from '@/api/waterPoints'
|
||||
import StatisticalAnalysis from './StatisticalAnalysis.vue'
|
||||
import bus from '@/views/layout/bus'
|
||||
import {
|
||||
|
|
@ -68,7 +70,32 @@ import {
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
tabsButton: ['全部', '物联感知', '视频感知', '市民上报', '巡查上报'],
|
||||
tabsButton: [
|
||||
{
|
||||
title:'全部',
|
||||
id:'all'
|
||||
},
|
||||
{
|
||||
title:'水务局',
|
||||
id:'null'
|
||||
},
|
||||
{
|
||||
title:'城管局',
|
||||
id:'case'
|
||||
},
|
||||
{
|
||||
title:'智能算法识别',
|
||||
id:'video'
|
||||
},
|
||||
{
|
||||
title:'水务集团',
|
||||
id:'auditorReport'
|
||||
},
|
||||
{
|
||||
title:'群众上报',
|
||||
id:'commonReport'
|
||||
},
|
||||
],
|
||||
tabsActiveName: '全部',
|
||||
statisticalAnalysisIsShow: false,
|
||||
filterButton: {
|
||||
|
|
@ -91,7 +118,8 @@ export default {
|
|||
// type: '影响车辆(>30cm)',
|
||||
// text: '液位：12cm'
|
||||
// },
|
||||
]
|
||||
],
|
||||
listAll:[]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -111,14 +139,15 @@ export default {
|
|||
'00:00:00'
|
||||
},
|
||||
mounted () {
|
||||
this.getRoadData()
|
||||
this.selectRoadData()
|
||||
this.selectRaise()
|
||||
this.selectNoiceEvent()
|
||||
// this.getRoadData()
|
||||
// this.selectRoadData()
|
||||
// this.selectRaise()
|
||||
// this.selectNoiceEvent()
|
||||
|
||||
selectWaterPoint().then( (res) => {
|
||||
console.log(res)
|
||||
this.list = res.data.data
|
||||
this.listAll = res.data.data
|
||||
bus.$emit('waterPoint',res.data.data)
|
||||
})
|
||||
// selectWaterCamera().then( (res) => {
|
||||
|
|
@ -131,22 +160,75 @@ export default {
|
|||
selectType (item) {
|
||||
if (this.filterButton.typeActive.indexOf(item) > -1) {
|
||||
this.filterButton.typeActive.splice(this.filterButton.typeActive.indexOf(item), 1)
|
||||
if(this.filterButton.typeActive.length == 0){
|
||||
this.list = []
|
||||
} else{
|
||||
switch(item){
|
||||
case '影响车辆(>30cm)':
|
||||
this.list = this.list.filter( v => v.pointLevel != 'traffic')
|
||||
break;
|
||||
case '影响行人(<30cm)':
|
||||
this.list = this.list.filter( v => v.pointLevel != 'pedestrian')
|
||||
break;
|
||||
case '无积水(<10cm)':
|
||||
this.list = this.list.filter( v => v.pointLevel != 'non')
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.filterButton.typeActive.push(item)
|
||||
if(this.filterButton.typeActive.length == 3){
|
||||
this.list = this.listAll
|
||||
} else {
|
||||
switch(item){
|
||||
case '影响车辆(>30cm)':
|
||||
this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'traffic'))
|
||||
break;
|
||||
case '影响行人(<30cm)':
|
||||
this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'pedestrian'))
|
||||
break;
|
||||
case '无积水(<10cm)':
|
||||
this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'non'))
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
bus.$emit('waterPoint',this.list)
|
||||
this.$parent.eventCheckList = this.filterButton.typeActive
|
||||
},
|
||||
tabHandleClick (item) {
|
||||
this.tabsActiveName = item
|
||||
if (item == '视频感知') {
|
||||
this.tabsActiveName = item.title
|
||||
this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
|
||||
|
||||
if (item.title == '全部') {
|
||||
selectWaterPoint().then( (res) => {
|
||||
|
||||
this.list = res.data.data
|
||||
bus.$emit('waterPoint',res.data.data)
|
||||
})
|
||||
} else {
|
||||
selectReportOrigin({reportOrigin:item.id}).then( (res) => {
|
||||
|
||||
this.list = res.data.data
|
||||
bus.$emit('waterPoint',res.data.data)
|
||||
})
|
||||
}
|
||||
if (item == '物联感知') {
|
||||
this.filterButton.typeSelect = ['工地扬尘', '工地噪声']
|
||||
this.typeSelectActive = '工地扬尘'
|
||||
}
|
||||
if (item == '走航监测') {
|
||||
this.selectRoadData()
|
||||
},
|
||||
reportOrigin(reportOrigin){
|
||||
switch (reportOrigin) {
|
||||
case 'auditorReport':
|
||||
return '水务集团上报'
|
||||
case 'commonReport':
|
||||
return '群众上报'
|
||||
case 'case':
|
||||
return '城管案例'
|
||||
case 'video':
|
||||
return '视频感知'
|
||||
default:
|
||||
return '未知'
|
||||
}
|
||||
|
||||
},
|
||||
openStatisticalAnalysis () {
|
||||
this.statisticalAnalysisIsShow = true
|
||||
|
|
@ -336,6 +418,7 @@ export default {
|
|||
color: rgba($color: #fff, $alpha: 0.6);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
// min-width: 50px;
|
||||
}
|
||||
.tabs-button-btn-active {
|
||||
font-size: 20px;
|
||||
|
|
@ -345,9 +428,8 @@ export default {
|
|||
content: "";
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
// right: 24%;
|
||||
right: 6%;
|
||||
width: 64px;
|
||||
right: 24%;
|
||||
width: 60%;
|
||||
height: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #1ffffc;
|
||||
|
|
@ -409,6 +491,21 @@ export default {
|
|||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn:nth-child(1){
|
||||
.select-circle {
|
||||
border: 1px solid #f74b3f;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn:nth-child(2){
|
||||
.select-circle {
|
||||
border: 1px solid #ffae2b;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn:nth-child(3){
|
||||
.select-circle {
|
||||
border: 1px solid #31d779;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn-active {
|
||||
.select-circle::after {
|
||||
content: "";
|
||||
|
|
@ -424,6 +521,21 @@ export default {
|
|||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn-active:nth-child(1){
|
||||
.select-circle::after {
|
||||
background: #f74b3f;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn-active:nth-child(2){
|
||||
.select-circle::after {
|
||||
background: #ffae2b;
|
||||
}
|
||||
}
|
||||
.processStateSelect-btn-active:nth-child(3){
|
||||
.select-circle::after {
|
||||
background: #31d779;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -565,16 +677,16 @@ export default {
|
|||
height: 10px;
|
||||
border-radius: 10px;
|
||||
margin-right: 5px;
|
||||
background: red;
|
||||
background: #f74b3f;
|
||||
}
|
||||
.red {
|
||||
background: red;
|
||||
background: #f74b3f;
|
||||
}
|
||||
.yellow {
|
||||
background: yellow;
|
||||
background: #ffae2b;
|
||||
}
|
||||
.green {
|
||||
background: green;
|
||||
background: #31d779;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ import {
|
|||
selectWeekAll,
|
||||
selectMonthAll
|
||||
} from '@/api/construction/index'
|
||||
import { selectCountWater } from '@/api/waterPoints'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
|
|
@ -126,12 +127,29 @@ export default {
|
|||
// selectValue: ''
|
||||
// }
|
||||
return {
|
||||
district:['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
|
||||
districtData: [],
|
||||
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.initEventTypeCharts()
|
||||
|
||||
selectCountWater().then((res) => {
|
||||
this.district.map((district) => {
|
||||
let eligibility = res.data.data.find((data) => {
|
||||
return district == data.ssqy
|
||||
})
|
||||
if(eligibility){
|
||||
this.districtData.push(eligibility.count)
|
||||
} else {
|
||||
this.districtData.push(0)
|
||||
}
|
||||
})
|
||||
this.initEventTypeCharts()
|
||||
})
|
||||
|
||||
// this.selectSiteByName()
|
||||
// bus.$off("mainClick")
|
||||
// bus.$on("mainClick", (data) => {
|
||||
|
|
@ -170,7 +188,8 @@ export default {
|
|||
}
|
||||
},
|
||||
grid: {
|
||||
bottom: 40
|
||||
bottom: 40,
|
||||
top:10,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -197,7 +216,7 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [12, 10, 5, 8, 7, 9, 1, 2, 3, 2],
|
||||
data: this.districtData,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="title">统计分析</div>
|
||||
<div class="water-points-content">
|
||||
<div class="time">更新时间：{{ time }}</div>
|
||||
<div class="water-point-reporting-title">
|
||||
<!-- <div class="water-point-reporting-title">
|
||||
<div class="water-point-reporting-title-top">积水点上报Top10</div>
|
||||
<div class="water-point-reporting-title-bottom"></div>
|
||||
</div>
|
||||
|
|
@ -28,27 +28,27 @@
|
|||
><span>{{ item.number }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-point-analysis">
|
||||
</div> -->
|
||||
<div class="water-point-reporting-title">
|
||||
<div class="water-point-reporting-title-top">积水点来源分析</div>
|
||||
<div class="water-point-reporting-title-bottom"></div>
|
||||
</div>
|
||||
<div id="analysis-of-water-source"></div>
|
||||
<div class="water-point-reporting-title">
|
||||
<div class="water-point-reporting-title-top">积水点级别分析</div>
|
||||
<div class="water-point-reporting-title-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-point-analysis-eachars">
|
||||
<div id="analysis-of-water-source"></div>
|
||||
<div id="analysis-of-water-level"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import * as echarts from 'echarts'
|
||||
import { selectCountWaters,selectCountLevel } from '@/api/waterPoints'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -78,51 +78,119 @@ export default {
|
|||
name: '积水点位置666666666666',
|
||||
number: '15'
|
||||
}
|
||||
],
|
||||
source: [
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '水务集团上报',
|
||||
id:'auditorReport'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '群众上报',
|
||||
id:'commonReport'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '城管局',
|
||||
id:'case'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '智能算法识别',
|
||||
id:'video'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '水务局',
|
||||
id:'null'
|
||||
}
|
||||
],
|
||||
rank: [
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '无积水'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '影响行人'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '影响车辆'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
// 积水点来源分析charts图
|
||||
|
||||
|
||||
selectCountWaters().then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
if(item.reportOrigin == 'auditorReport') {
|
||||
this.source[0].value = item.count
|
||||
}
|
||||
if(item.reportOrigin == 'commonReport') {
|
||||
this.source[1].value = item.count
|
||||
}
|
||||
if(item.reportOrigin == 'case') {
|
||||
this.source[2].value = item.count
|
||||
}
|
||||
if(item.reportOrigin == 'video') {
|
||||
this.source[3].value = item.count
|
||||
}
|
||||
})
|
||||
this.initEventTypeCharts()
|
||||
})
|
||||
|
||||
selectCountLevel().then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
//无积水
|
||||
if(item.pointLevel == 'non') {
|
||||
this.rank[0].value = item.count
|
||||
}
|
||||
//影响行人
|
||||
if(item.pointLevel == 'pedestrian') {
|
||||
this.rank[1].value = item.count
|
||||
}
|
||||
//影响车辆
|
||||
if(item.pointLevel == 'traffic') {
|
||||
this.rank[2].value = item.count
|
||||
}
|
||||
})
|
||||
this.initEventTypeCharts2()
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 积水点来源分析charts图
|
||||
initEventTypeCharts () {
|
||||
const inner = [
|
||||
{
|
||||
value: 2,
|
||||
unit: '个',
|
||||
name: '物联感知'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
unit: '个',
|
||||
name: '视频感知'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
unit: '个',
|
||||
name: '市民上报'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
unit: '个',
|
||||
name: '巡查上报'
|
||||
}
|
||||
]
|
||||
const legend1 = inner.map((v) => v.name)
|
||||
const legend1 = this.source.map((v) => v.name)
|
||||
const legendData = [...legend1]
|
||||
const option = {
|
||||
color: ['#FBBD00', '#A3A3A3', '#E97C30', '#5A99D3'],
|
||||
color: ['#24a9ff', '#6873ff', '#4df6f7', '#3ee79d','#b7baff'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
grid: {
|
||||
height: '10px'
|
||||
// height: '10px'
|
||||
},
|
||||
legend: {
|
||||
width: '30%',
|
||||
left: 'left',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
|
|
@ -146,20 +214,22 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['0%', '80%'],
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner'
|
||||
}
|
||||
position: 'inner',
|
||||
show: false
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: inner
|
||||
// data: this.source.filter( v => v.value > 0)
|
||||
data: this.source
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -169,38 +239,24 @@ export default {
|
|||
eventType.setOption(option)
|
||||
},
|
||||
initEventTypeCharts2 () {
|
||||
const inner = [
|
||||
{
|
||||
value: 2,
|
||||
unit: '个',
|
||||
name: '物联感知'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
unit: '个',
|
||||
name: '视频感知'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
unit: '个',
|
||||
name: '市民上报'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
unit: '个',
|
||||
name: '巡查上报'
|
||||
}
|
||||
]
|
||||
const legend1 = inner.map((v) => v.name)
|
||||
const legend1 = this.rank.map((v) => v.name)
|
||||
const legendData = [...legend1]
|
||||
const option = {
|
||||
color: ['#FBBD00', '#A3A3A3', '#E97C30', '#5A99D3'],
|
||||
color: ['#31d779', '#ffae2b', '#f74b3f'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
grid: {
|
||||
height: '10px'
|
||||
// height: '10px'
|
||||
},
|
||||
legend: {
|
||||
width: '30%',
|
||||
left: 'left',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
|
|
@ -224,11 +280,14 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['45%', '80%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: function(value) {
|
||||
if(value == 0) return false
|
||||
}(),
|
||||
position: 'inner'
|
||||
}
|
||||
},
|
||||
|
|
@ -237,7 +296,7 @@ export default {
|
|||
show: false
|
||||
}
|
||||
},
|
||||
data: inner
|
||||
data: this.rank
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -346,5 +405,10 @@ export default {
|
|||
height: 165px;
|
||||
}
|
||||
}
|
||||
#analysis-of-water-source,#analysis-of-water-level {
|
||||
width: 100%;
|
||||
height: 165px;
|
||||
margin: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
所属区市: {{ feature.data.ssqy || "" }}
|
||||
</div>
|
||||
<div>
|
||||
积水级别:
|
||||
积水级别: {{feature.data.pointLevel=='traffic' ? '影响车辆(>30cm)' : feature.data.pointLevel=='pedestrian' ? '影响行人(<30cm)' : '无积水(<10cm)' }}
|
||||
</div>
|
||||
<div>
|
||||
液位:
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
<img @click="show" style="width:100%;height:100%;" :src="`http://15.72.183.90:7004`+feature.data.videoCapture||''" alt="">
|
||||
<img @click="show" style="width:100%;height:100%;" :src="feature.data.videoCapture||''" alt="">
|
||||
</div>
|
||||
<div class="video-table">
|
||||
<h4>周边监控</h4>
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
borderColor: '#325d94',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
style="background:transparent !important"
|
||||
>
|
||||
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
||||
</el-table-column>
|
||||
|
|
@ -63,8 +64,8 @@
|
|||
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'
|
||||
// import * as echarts from 'echarts'
|
||||
// import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
||||
import { selectCameraByName } from '@/api/waterPoints'
|
||||
export default {
|
||||
name: "",
|
||||
|
|
@ -78,6 +79,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
|
||||
if(res.data.data){
|
||||
this.feature.data.channelCode = res.data.data[0].channelCode
|
||||
this.feature.data.channelName = res.data.data[0].channelName
|
||||
this.feature.data.ssqy = res.data.data[0].ssqy
|
||||
|
|
@ -87,14 +89,15 @@ export default {
|
|||
cameraName: this.feature.data.channelName,
|
||||
channelCode: this.feature.data.channelCode
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
console.log(res)
|
||||
})
|
||||
selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
console.log(res)
|
||||
})
|
||||
// selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
// console.log(res)
|
||||
// })
|
||||
// selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
// console.log(res)
|
||||
// })
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -46,27 +46,30 @@
|
|||
<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="eventSelection">
|
||||
<div class="eventSelection">
|
||||
<el-checkbox-group v-model="eventCheckList">
|
||||
<el-checkbox label="影响车辆(>30cm)"></el-checkbox>
|
||||
<el-checkbox label="影响行人(<30cm)"></el-checkbox>
|
||||
<el-checkbox label="无积水(<10cm)"></el-checkbox>
|
||||
<el-checkbox label="影响车辆(>30cm)" @change="selectType('影响车辆(>30cm)')"></el-checkbox>
|
||||
<el-checkbox label="影响行人(<30cm)" @change="selectType('影响行人(<30cm)')"></el-checkbox>
|
||||
<el-checkbox label="无积水(<10cm)" @change="selectType('无积水(<10cm)')"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<i class="eventSelectionIcon"></i>
|
||||
<i class="eventSelectionIcon"></i>
|
||||
<i class="eventSelectionIcon"></i>
|
||||
</div> -->
|
||||
</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>
|
||||
|
|
@ -109,7 +112,7 @@ export default {
|
|||
// changeLayerBtnList: ['视频监控', '易积水点'],
|
||||
changeLayerBtnList: ['易积水点'],
|
||||
changeLayerBtnGroup: [],
|
||||
eventCheckList: [],
|
||||
eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
|
||||
openVideo: false,
|
||||
channelCode:[]
|
||||
|
||||
|
|
@ -326,18 +329,49 @@ export default {
|
|||
},
|
||||
|
||||
waterPointOnMap (data) {
|
||||
const dataEvent = []
|
||||
console.log(data)
|
||||
this.hiMapFun.removeLayerByLayerName('waterPoint1')
|
||||
this.hiMapFun.removeLayerByLayerName('waterPoint2')
|
||||
this.hiMapFun.removeLayerByLayerName('waterPoint3')
|
||||
const dataEvent1 = []
|
||||
const dataEvent2 = []
|
||||
const dataEvent3 = []
|
||||
|
||||
data.forEach((item) => {
|
||||
const arr = [0, 0.0, '', '0', '0.0']
|
||||
if (arr.indexOf(item.longitude) == -1) {
|
||||
dataEvent.push({
|
||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
||||
data: item,
|
||||
type: 'waterPoint'
|
||||
})
|
||||
switch(item.pointLevel){
|
||||
case 'non':
|
||||
dataEvent1.push({
|
||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
||||
data: item,
|
||||
type: 'waterPoint'
|
||||
})
|
||||
break;
|
||||
case 'pedestrian':
|
||||
dataEvent2.push({
|
||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
||||
data: item,
|
||||
type: 'waterPoint'
|
||||
})
|
||||
break;
|
||||
case 'traffic':
|
||||
dataEvent3.push({
|
||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
||||
data: item,
|
||||
type: 'waterPoint'
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
this.hiMapFun.addPointsToMap(dataEvent, 'waterPoint.png', 'waterPoint', createWaterPointPop)
|
||||
this.hiMapFun.addPointsToMap(dataEvent1, 'waterPoint1.png', 'waterPoint1', createWaterPointPop)
|
||||
this.hiMapFun.addPointsToMap(dataEvent2, 'waterPoint2.png', 'waterPoint2', createWaterPointPop)
|
||||
this.hiMapFun.addPointsToMap(dataEvent3, 'waterPoint3.png', 'waterPoint3', createWaterPointPop)
|
||||
},
|
||||
|
||||
selectType(item){
|
||||
this.$refs.complaintEventRef.selectType(item)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue