This commit is contained in:
yangxiaojiang 2022-07-15 17:49:10 +08:00
parent f374443ba5
commit 012ab5879f
21 changed files with 3419 additions and 167 deletions

10
src/api/area.js Normal file
View File

@ -0,0 +1,10 @@
import request from '@/utils/request'
export function selectKeyAreaList(params) {
return request({
url: 'api/project/keyArea/selectKeyAreaList',
method: 'get',
params
})
}

View File

@ -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
})
}

View File

@ -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

View File

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

View File

@ -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)
} }
} }
}) })

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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: {
// divid
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>

View File

@ -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>

View File

@ -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;
}); });
} }
} }

View File

@ -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;
}, },

View File

@ -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>
@ -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 {

View File

@ -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 () {
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.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, [{

View File

@ -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>

View File

@ -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 {

View File

@ -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){
case 'non':
dataEvent1.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) }, latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
data: item, data: item,
type: 'waterPoint' 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 () {}