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
|
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',
|
name: 'construction',
|
||||||
meta: { title: '在建工地综合监管平台' }
|
meta: { title: '在建工地综合监管平台' }
|
||||||
},
|
},
|
||||||
|
{ path: '/area',
|
||||||
|
component: () => import('@/views/pages/area'),
|
||||||
|
name: 'area',
|
||||||
|
meta: { title: '重点区域监控平台' }
|
||||||
|
},
|
||||||
{ path: '/point',
|
{ path: '/point',
|
||||||
component: () => import('@/views/pages/civilizedCity/components/Point'),
|
component: () => import('@/views/pages/civilizedCity/components/Point'),
|
||||||
name: '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)
|
// layers = createMarkerClusterLayer(defaultStyle)
|
||||||
const icon = createDefaultFeatureStyle({
|
const icon = createDefaultFeatureStyle({
|
||||||
img: url || 'the-head.png',
|
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 = []
|
const arr = []
|
||||||
features.map((feature, index) => {
|
features.map((feature, index) => {
|
||||||
|
|
@ -583,14 +583,14 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
|
||||||
const elementHtml = createPopupFun(feature)
|
const elementHtml = createPopupFun(feature)
|
||||||
if (elementHtml) {
|
if (elementHtml) {
|
||||||
if(feature.type=='road'){
|
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'){
|
} 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'){
|
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{
|
} 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) => {
|
selectByName(params).then((res) => {
|
||||||
console.log(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)
|
// console.log(res.data.data)
|
||||||
this.EventTypeData = res.data.data;
|
this.EventTypeData = res.data.data.events;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
@click="tabHandleClick(item)"
|
@click="tabHandleClick(item)"
|
||||||
v-for="item in tabsButton"
|
v-for="item in tabsButton"
|
||||||
:key="item"
|
:key="item"
|
||||||
:class="tabsActiveName == item?'tabs-button-btn-active':''"
|
:class="tabsActiveName == item ? 'tabs-button-btn-active' : '' "
|
||||||
>
|
>
|
||||||
{{item}}
|
{{item}}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -42,14 +42,10 @@
|
||||||
@input="searchCameraTree"
|
@input="searchCameraTree"
|
||||||
>
|
>
|
||||||
</el-input>
|
</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
|
<el-tree
|
||||||
v-show="camreaTreeIsShow"
|
v-show="cameraTreeIsShow"
|
||||||
id="tree"
|
id="tree"
|
||||||
:data="camreaTree"
|
:data="cameraTree"
|
||||||
:props="{label:'name',children:'children',isLeaf:'leaf',}"
|
:props="{label:'name',children:'children',isLeaf:'leaf',}"
|
||||||
:load="loadNode"
|
:load="loadNode"
|
||||||
node-key="id"
|
node-key="id"
|
||||||
|
|
@ -58,21 +54,21 @@
|
||||||
:filter-node-method="filterNode"
|
:filter-node-method="filterNode"
|
||||||
lazy>
|
lazy>
|
||||||
<!-- 是否离线checkStatus -->
|
<!-- 是否离线checkStatus -->
|
||||||
<span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
|
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
|
||||||
<span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.name }}</span>
|
<!-- <span>{{ data.channelName || '' }}</span> -->
|
||||||
</span>
|
<!-- </span> -->
|
||||||
</el-tree>
|
</el-tree>
|
||||||
<el-tree
|
<el-tree
|
||||||
v-show="!camreaTreeIsShow"
|
v-show="!cameraTreeIsShow"
|
||||||
ref="tree"
|
ref="tree"
|
||||||
:data="camreaTreeSingle"
|
:data="cameraTreeSingle"
|
||||||
:props="{label:'channelName',children:'children'}"
|
:props="{label:'channelName',children:'children'}"
|
||||||
:filter-node-method="filterNode"
|
:filter-node-method="filterNode"
|
||||||
@node-click="treeCameraClick"
|
@node-click="treeCameraClick"
|
||||||
>
|
>
|
||||||
<span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
|
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
|
||||||
<span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.channelName }}</span>
|
<!-- <span>{{ data.channelName || '' }}</span> -->
|
||||||
</span>
|
<!-- </span> -->
|
||||||
</el-tree>
|
</el-tree>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -91,10 +87,10 @@ export default {
|
||||||
labelSearch:'',
|
labelSearch:'',
|
||||||
checkboxGroup: [],
|
checkboxGroup: [],
|
||||||
cameraAllData:[],
|
cameraAllData:[],
|
||||||
camreaTreeIsShow:true,
|
cameraTreeIsShow:true,
|
||||||
camreaTreeSingle: [],
|
cameraTreeSingle: [],
|
||||||
checkStatus: '2',
|
checkStatus: '2',
|
||||||
camreaTree:[],
|
cameraTree:[],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -106,9 +102,10 @@ export default {
|
||||||
// this.addResourceTomap('cameraAll',res.data);
|
// this.addResourceTomap('cameraAll',res.data);
|
||||||
})
|
})
|
||||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||||
this.camreaTree = res.data.data
|
this.cameraTree = res.data.data
|
||||||
|
console.log(this.cameraTree)
|
||||||
res.data.data.forEach((item) => {
|
res.data.data.forEach((item) => {
|
||||||
this.camreaTreeSingle.push({
|
this.cameraTreeSingle.push({
|
||||||
channelName: item.name,
|
channelName: item.name,
|
||||||
children: []
|
children: []
|
||||||
})
|
})
|
||||||
|
|
@ -133,20 +130,20 @@ export default {
|
||||||
|
|
||||||
// this.addResourceTomap(item.labelName,res.data.data);
|
// this.addResourceTomap(item.labelName,res.data.data);
|
||||||
// res.data.data.forEach((item) => {
|
// res.data.data.forEach((item) => {
|
||||||
// this.camreaTreeSingle.forEach((val) => {
|
// this.cameraTreeSingle.forEach((val) => {
|
||||||
// if(item.nodeName == val.channelName){
|
// if(item.nodeName == val.channelName){
|
||||||
// val.children.push(item)
|
// val.children.push(item)
|
||||||
// }
|
// }
|
||||||
// })
|
// })
|
||||||
// })
|
// })
|
||||||
// this.camreaTreeIsShow = false;
|
// this.cameraTreeIsShow = false;
|
||||||
})
|
})
|
||||||
}else {
|
}else {
|
||||||
bus.$emit("removeCameraLayer",item.labelName)
|
bus.$emit("removeCameraLayer",item.labelName)
|
||||||
// this.checkStatus = "2"
|
// this.checkStatus = "2"
|
||||||
// this.camreaTreeIsShow = true
|
// this.cameraTreeIsShow = true
|
||||||
// getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
// 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) => {
|
selectByChannelName(params).then((res) => {
|
||||||
console.log(res)
|
console.log(res)
|
||||||
this.camreaTree = []
|
this.cameraTree = []
|
||||||
res.data.data.forEach((item) => {
|
res.data.data.forEach((item) => {
|
||||||
this.camreaTree.push({
|
this.cameraTree.push({
|
||||||
name: item.channelName,
|
name: item.channelName,
|
||||||
gpsX: item.gpsX,
|
gpsX: item.gpsX,
|
||||||
gpsY: item.gpsY,
|
gpsY: item.gpsY,
|
||||||
|
|
@ -179,16 +176,16 @@ export default {
|
||||||
})
|
})
|
||||||
}else {
|
}else {
|
||||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||||
this.camreaTree = res.data.data
|
this.cameraTree = res.data.data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
reset() {
|
reset() {
|
||||||
this.checkboxGroup = []
|
this.checkboxGroup = []
|
||||||
this.checkStatus = "2";
|
this.checkStatus = "2";
|
||||||
this.camreaTreeIsShow = true
|
this.cameraTreeIsShow = true
|
||||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||||
this.camreaTree = res.data.data
|
this.cameraTree = res.data.data
|
||||||
})
|
})
|
||||||
document.getElementById("tree").scrollTop = 0;
|
document.getElementById("tree").scrollTop = 0;
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<div class="toady-list-content">
|
<div class="toady-list-content">
|
||||||
<div class="toady-list-rotate"></div>
|
<div class="toady-list-rotate"></div>
|
||||||
<div class="toady-list-icon"></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>
|
</div>
|
||||||
<div class="tab-box">
|
<div class="tab-box">
|
||||||
|
|
@ -17,9 +17,9 @@
|
||||||
@click="tabHandleClick(item)"
|
@click="tabHandleClick(item)"
|
||||||
v-for="item in tabsButton"
|
v-for="item in tabsButton"
|
||||||
:key="item.index"
|
:key="item.index"
|
||||||
:class="tabsActiveName == item?'tabs-button-btn-active':''"
|
:class="tabsActiveName == item.title ? 'tabs-button-btn-active' : '' "
|
||||||
>
|
>
|
||||||
{{item}}
|
{{item.title}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
<div class="processStateSelect-btn"
|
<div class="processStateSelect-btn"
|
||||||
v-for="item in filterButton.type"
|
v-for="item in filterButton.type"
|
||||||
:key="item"
|
:key="item"
|
||||||
:class="filterButton.typeActive.indexOf(item) > -1 ? 'processStateSelect-btn-active':''"
|
:class="filterButton.typeActive.indexOf(item) > -1 ? 'processStateSelect-btn-active' :'' "
|
||||||
@click="selectType(item)"
|
@click="selectType(item)"
|
||||||
>
|
>
|
||||||
<div class="select-circle"></div>
|
<div class="select-circle"></div>
|
||||||
|
|
@ -41,14 +41,16 @@
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div>
|
<div>
|
||||||
<span class='name'>{{item.waterPointName}}</span>
|
<span class='name'>{{item.waterPointName}}</span>
|
||||||
<!-- <span class='topType'>物联感知</span> -->
|
<span class='topType' v-show="item.reportOrigin !== '2'">{{reportOrigin(item.reportOrigin)}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<!-- <span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span> -->
|
<span class="img" :class=" item.pointLevel=='traffic' ? 'red' : item.pointLevel=='pedestrian' ? 'yellow' : 'green' "></span>
|
||||||
<span class="type"></span>
|
<span class="type">{{item.pointLevel=='traffic' ? '影响车辆(>30cm)' : item.pointLevel=='pedestrian' ? '影响行人(<30cm)' : '无积水(<10cm)' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom"></div>
|
<div class="bottom">
|
||||||
|
<!-- 液位： -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,7 +59,7 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
|
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 StatisticalAnalysis from './StatisticalAnalysis.vue'
|
||||||
import bus from '@/views/layout/bus'
|
import bus from '@/views/layout/bus'
|
||||||
import {
|
import {
|
||||||
|
|
@ -68,7 +70,32 @@ import {
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
tabsButton: ['全部', '物联感知', '视频感知', '市民上报', '巡查上报'],
|
tabsButton: [
|
||||||
|
{
|
||||||
|
title:'全部',
|
||||||
|
id:'all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'水务局',
|
||||||
|
id:'null'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'城管局',
|
||||||
|
id:'case'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'智能算法识别',
|
||||||
|
id:'video'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'水务集团',
|
||||||
|
id:'auditorReport'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'群众上报',
|
||||||
|
id:'commonReport'
|
||||||
|
},
|
||||||
|
],
|
||||||
tabsActiveName: '全部',
|
tabsActiveName: '全部',
|
||||||
statisticalAnalysisIsShow: false,
|
statisticalAnalysisIsShow: false,
|
||||||
filterButton: {
|
filterButton: {
|
||||||
|
|
@ -91,7 +118,8 @@ export default {
|
||||||
// type: '影响车辆(>30cm)',
|
// type: '影响车辆(>30cm)',
|
||||||
// text: '液位：12cm'
|
// text: '液位：12cm'
|
||||||
// },
|
// },
|
||||||
]
|
],
|
||||||
|
listAll:[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -111,14 +139,15 @@ export default {
|
||||||
'00:00:00'
|
'00:00:00'
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.getRoadData()
|
// this.getRoadData()
|
||||||
this.selectRoadData()
|
// this.selectRoadData()
|
||||||
this.selectRaise()
|
// this.selectRaise()
|
||||||
this.selectNoiceEvent()
|
// this.selectNoiceEvent()
|
||||||
|
|
||||||
selectWaterPoint().then( (res) => {
|
selectWaterPoint().then( (res) => {
|
||||||
console.log(res)
|
console.log(res)
|
||||||
this.list = res.data.data
|
this.list = res.data.data
|
||||||
|
this.listAll = res.data.data
|
||||||
bus.$emit('waterPoint',res.data.data)
|
bus.$emit('waterPoint',res.data.data)
|
||||||
})
|
})
|
||||||
// selectWaterCamera().then( (res) => {
|
// selectWaterCamera().then( (res) => {
|
||||||
|
|
@ -131,22 +160,75 @@ export default {
|
||||||
selectType (item) {
|
selectType (item) {
|
||||||
if (this.filterButton.typeActive.indexOf(item) > -1) {
|
if (this.filterButton.typeActive.indexOf(item) > -1) {
|
||||||
this.filterButton.typeActive.splice(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 {
|
} else {
|
||||||
this.filterButton.typeActive.push(item)
|
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) {
|
tabHandleClick (item) {
|
||||||
this.tabsActiveName = item
|
this.tabsActiveName = item.title
|
||||||
if (item == '视频感知') {
|
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 = ['工地扬尘', '工地噪声']
|
reportOrigin(reportOrigin){
|
||||||
this.typeSelectActive = '工地扬尘'
|
switch (reportOrigin) {
|
||||||
}
|
case 'auditorReport':
|
||||||
if (item == '走航监测') {
|
return '水务集团上报'
|
||||||
this.selectRoadData()
|
case 'commonReport':
|
||||||
|
return '群众上报'
|
||||||
|
case 'case':
|
||||||
|
return '城管案例'
|
||||||
|
case 'video':
|
||||||
|
return '视频感知'
|
||||||
|
default:
|
||||||
|
return '未知'
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
openStatisticalAnalysis () {
|
openStatisticalAnalysis () {
|
||||||
this.statisticalAnalysisIsShow = true
|
this.statisticalAnalysisIsShow = true
|
||||||
|
|
@ -336,6 +418,7 @@ export default {
|
||||||
color: rgba($color: #fff, $alpha: 0.6);
|
color: rgba($color: #fff, $alpha: 0.6);
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
// min-width: 50px;
|
||||||
}
|
}
|
||||||
.tabs-button-btn-active {
|
.tabs-button-btn-active {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
@ -345,9 +428,8 @@ export default {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -15px;
|
bottom: -15px;
|
||||||
// right: 24%;
|
right: 24%;
|
||||||
right: 6%;
|
width: 60%;
|
||||||
width: 64px;
|
|
||||||
height: 5px;
|
height: 5px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: #1ffffc;
|
background-color: #1ffffc;
|
||||||
|
|
@ -409,6 +491,21 @@ export default {
|
||||||
margin-left: 8px;
|
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 {
|
.processStateSelect-btn-active {
|
||||||
.select-circle::after {
|
.select-circle::after {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -424,6 +521,21 @@ export default {
|
||||||
border-radius: 50%;
|
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;
|
height: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
background: red;
|
background: #f74b3f;
|
||||||
}
|
}
|
||||||
.red {
|
.red {
|
||||||
background: red;
|
background: #f74b3f;
|
||||||
}
|
}
|
||||||
.yellow {
|
.yellow {
|
||||||
background: yellow;
|
background: #ffae2b;
|
||||||
}
|
}
|
||||||
.green {
|
.green {
|
||||||
background: green;
|
background: #31d779;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bottom {
|
.bottom {
|
||||||
|
|
|
||||||
|
|
@ -72,6 +72,7 @@ import {
|
||||||
selectWeekAll,
|
selectWeekAll,
|
||||||
selectMonthAll
|
selectMonthAll
|
||||||
} from '@/api/construction/index'
|
} from '@/api/construction/index'
|
||||||
|
import { selectCountWater } from '@/api/waterPoints'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
|
|
@ -126,11 +127,28 @@ export default {
|
||||||
// selectValue: ''
|
// selectValue: ''
|
||||||
// }
|
// }
|
||||||
return {
|
return {
|
||||||
|
district:['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
|
||||||
|
districtData: [],
|
||||||
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted () {
|
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()
|
// this.selectSiteByName()
|
||||||
// bus.$off("mainClick")
|
// bus.$off("mainClick")
|
||||||
|
|
@ -170,7 +188,8 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
bottom: 40
|
bottom: 40,
|
||||||
|
top:10,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
|
|
@ -197,7 +216,7 @@ export default {
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: [12, 10, 5, 8, 7, 9, 1, 2, 3, 2],
|
data: this.districtData,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<div class="title">统计分析</div>
|
<div class="title">统计分析</div>
|
||||||
<div class="water-points-content">
|
<div class="water-points-content">
|
||||||
<div class="time">更新时间：{{ time }}</div>
|
<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-top">积水点上报Top10</div>
|
||||||
<div class="water-point-reporting-title-bottom"></div>
|
<div class="water-point-reporting-title-bottom"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -28,27 +28,27 @@
|
||||||
><span>{{ item.number }}</span>
|
><span>{{ item.number }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="water-point-analysis">
|
|
||||||
<div class="water-point-reporting-title">
|
<div class="water-point-reporting-title">
|
||||||
<div class="water-point-reporting-title-top">积水点来源分析</div>
|
<div class="water-point-reporting-title-top">积水点来源分析</div>
|
||||||
<div class="water-point-reporting-title-bottom"></div>
|
<div class="water-point-reporting-title-bottom"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="analysis-of-water-source"></div>
|
||||||
<div class="water-point-reporting-title">
|
<div class="water-point-reporting-title">
|
||||||
<div class="water-point-reporting-title-top">积水点级别分析</div>
|
<div class="water-point-reporting-title-top">积水点级别分析</div>
|
||||||
<div class="water-point-reporting-title-bottom"></div>
|
<div class="water-point-reporting-title-bottom"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="water-point-analysis-eachars">
|
|
||||||
<div id="analysis-of-water-source"></div>
|
|
||||||
<div id="analysis-of-water-level"></div>
|
<div id="analysis-of-water-level"></div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
|
import { selectCountWaters,selectCountLevel } from '@/api/waterPoints'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -78,51 +78,119 @@ export default {
|
||||||
name: '积水点位置666666666666',
|
name: '积水点位置666666666666',
|
||||||
number: '15'
|
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 () {
|
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()
|
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()
|
this.initEventTypeCharts2()
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 积水点来源分析charts图
|
// 积水点来源分析charts图
|
||||||
initEventTypeCharts () {
|
initEventTypeCharts () {
|
||||||
const inner = [
|
const legend1 = this.source.map((v) => v.name)
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
unit: '个',
|
|
||||||
name: '物联感知'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
unit: '个',
|
|
||||||
name: '视频感知'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 4,
|
|
||||||
unit: '个',
|
|
||||||
name: '市民上报'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
unit: '个',
|
|
||||||
name: '巡查上报'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const legend1 = inner.map((v) => v.name)
|
|
||||||
const legendData = [...legend1]
|
const legendData = [...legend1]
|
||||||
const option = {
|
const option = {
|
||||||
color: ['#FBBD00', '#A3A3A3', '#E97C30', '#5A99D3'],
|
color: ['#24a9ff', '#6873ff', '#4df6f7', '#3ee79d','#b7baff'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
height: '10px'
|
// height: '10px'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
width: '30%',
|
||||||
|
left: 'left',
|
||||||
|
top: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
// itemStyle: {
|
// itemStyle: {
|
||||||
// normal: {
|
// normal: {
|
||||||
|
|
@ -146,20 +214,22 @@ export default {
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '访问来源',
|
name: '',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['0%', '80%'],
|
radius: ['0%', '80%'],
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
position: 'inner'
|
position: 'inner',
|
||||||
}
|
show: false
|
||||||
|
},
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
normal: {
|
normal: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: inner
|
// data: this.source.filter( v => v.value > 0)
|
||||||
|
data: this.source
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -169,38 +239,24 @@ export default {
|
||||||
eventType.setOption(option)
|
eventType.setOption(option)
|
||||||
},
|
},
|
||||||
initEventTypeCharts2 () {
|
initEventTypeCharts2 () {
|
||||||
const inner = [
|
const legend1 = this.rank.map((v) => v.name)
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
unit: '个',
|
|
||||||
name: '物联感知'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
unit: '个',
|
|
||||||
name: '视频感知'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 4,
|
|
||||||
unit: '个',
|
|
||||||
name: '市民上报'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
unit: '个',
|
|
||||||
name: '巡查上报'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const legend1 = inner.map((v) => v.name)
|
|
||||||
const legendData = [...legend1]
|
const legendData = [...legend1]
|
||||||
const option = {
|
const option = {
|
||||||
color: ['#FBBD00', '#A3A3A3', '#E97C30', '#5A99D3'],
|
color: ['#31d779', '#ffae2b', '#f74b3f'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
height: '10px'
|
// height: '10px'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
width: '30%',
|
||||||
|
left: 'left',
|
||||||
|
top: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
// itemStyle: {
|
// itemStyle: {
|
||||||
// normal: {
|
// normal: {
|
||||||
|
|
@ -224,11 +280,14 @@ export default {
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '访问来源',
|
name: '',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['45%', '80%'],
|
radius: ['45%', '80%'],
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
|
show: function(value) {
|
||||||
|
if(value == 0) return false
|
||||||
|
}(),
|
||||||
position: 'inner'
|
position: 'inner'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -237,7 +296,7 @@ export default {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: inner
|
data: this.rank
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -346,5 +405,10 @@ export default {
|
||||||
height: 165px;
|
height: 165px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#analysis-of-water-source,#analysis-of-water-level {
|
||||||
|
width: 100%;
|
||||||
|
height: 165px;
|
||||||
|
margin: 22px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
所属区市: {{ feature.data.ssqy || "" }}
|
所属区市: {{ feature.data.ssqy || "" }}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
积水级别:
|
积水级别: {{feature.data.pointLevel=='traffic' ? '影响车辆(>30cm)' : feature.data.pointLevel=='pedestrian' ? '影响行人(<30cm)' : '无积水(<10cm)' }}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
液位:
|
液位:
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
cursor: pointer;
|
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>
|
||||||
<div class="video-table">
|
<div class="video-table">
|
||||||
<h4>周边监控</h4>
|
<h4>周边监控</h4>
|
||||||
|
|
@ -43,6 +43,7 @@
|
||||||
borderColor: '#325d94',
|
borderColor: '#325d94',
|
||||||
'background-color': '#2b4b7a',
|
'background-color': '#2b4b7a',
|
||||||
}"
|
}"
|
||||||
|
style="background:transparent !important"
|
||||||
>
|
>
|
||||||
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
@ -63,8 +64,8 @@
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
import 'viewerjs/dist/viewer.css'
|
import 'viewerjs/dist/viewer.css'
|
||||||
import { directive as viewer } from "v-viewer"
|
import { directive as viewer } from "v-viewer"
|
||||||
import * as echarts from 'echarts'
|
// import * as echarts from 'echarts'
|
||||||
import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
// import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
||||||
import { selectCameraByName } from '@/api/waterPoints'
|
import { selectCameraByName } from '@/api/waterPoints'
|
||||||
export default {
|
export default {
|
||||||
name: "",
|
name: "",
|
||||||
|
|
@ -78,6 +79,7 @@ export default {
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
|
selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
|
||||||
|
if(res.data.data){
|
||||||
this.feature.data.channelCode = res.data.data[0].channelCode
|
this.feature.data.channelCode = res.data.data[0].channelCode
|
||||||
this.feature.data.channelName = res.data.data[0].channelName
|
this.feature.data.channelName = res.data.data[0].channelName
|
||||||
this.feature.data.ssqy = res.data.data[0].ssqy
|
this.feature.data.ssqy = res.data.data[0].ssqy
|
||||||
|
|
@ -87,14 +89,15 @@ export default {
|
||||||
cameraName: this.feature.data.channelName,
|
cameraName: this.feature.data.channelName,
|
||||||
channelCode: this.feature.data.channelCode
|
channelCode: this.feature.data.channelCode
|
||||||
})
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
// selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||||
console.log(res)
|
// console.log(res)
|
||||||
})
|
// })
|
||||||
selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
// selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||||
console.log(res)
|
// console.log(res)
|
||||||
})
|
// })
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -46,27 +46,30 @@
|
||||||
<complaint-event ref="complaintEventRef"></complaint-event>
|
<complaint-event ref="complaintEventRef"></complaint-event>
|
||||||
</div>
|
</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-group v-model="eventCheckList">
|
||||||
<el-checkbox label="影响车辆(>30cm)"></el-checkbox>
|
<el-checkbox label="影响车辆(>30cm)" @change="selectType('影响车辆(>30cm)')"></el-checkbox>
|
||||||
<el-checkbox label="影响行人(<30cm)"></el-checkbox>
|
<el-checkbox label="影响行人(<30cm)" @change="selectType('影响行人(<30cm)')"></el-checkbox>
|
||||||
<el-checkbox label="无积水(<10cm)"></el-checkbox>
|
<el-checkbox label="无积水(<10cm)" @change="selectType('无积水(<10cm)')"></el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
<i class="eventSelectionIcon"></i>
|
<i class="eventSelectionIcon"></i>
|
||||||
<i class="eventSelectionIcon"></i>
|
<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="changeLayer">
|
||||||
<div class="title">地图图层</div>
|
<div class="title">地图图层</div>
|
||||||
|
|
@ -109,7 +112,7 @@ export default {
|
||||||
// changeLayerBtnList: ['视频监控', '易积水点'],
|
// changeLayerBtnList: ['视频监控', '易积水点'],
|
||||||
changeLayerBtnList: ['易积水点'],
|
changeLayerBtnList: ['易积水点'],
|
||||||
changeLayerBtnGroup: [],
|
changeLayerBtnGroup: [],
|
||||||
eventCheckList: [],
|
eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
|
||||||
openVideo: false,
|
openVideo: false,
|
||||||
channelCode:[]
|
channelCode:[]
|
||||||
|
|
||||||
|
|
@ -326,18 +329,49 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
waterPointOnMap (data) {
|
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) => {
|
data.forEach((item) => {
|
||||||
const arr = [0, 0.0, '', '0', '0.0']
|
const arr = [0, 0.0, '', '0', '0.0']
|
||||||
if (arr.indexOf(item.longitude) == -1) {
|
if (arr.indexOf(item.longitude) == -1) {
|
||||||
dataEvent.push({
|
switch(item.pointLevel){
|
||||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
case 'non':
|
||||||
data: item,
|
dataEvent1.push({
|
||||||
type: 'waterPoint'
|
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 () {}
|
beforeDestroy () {}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue