feat:工地、重点区域功能补充
This commit is contained in:
liumingchun1
parent
e9d0592dde
commit
5664a37a17
|
|
@ -15,4 +15,49 @@ export function selectKeyAreaList(params) {
|
|||
params,
|
||||
})
|
||||
}
|
||||
|
||||
// 重点区域根据区域名称进行查询
|
||||
export function selectByLikeName(params) {
|
||||
return request({
|
||||
url: 'api/project/keyArea/selectByLikeName',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 重点区域根据类型进行筛选
|
||||
export function selectKeyArea(params) {
|
||||
return request({
|
||||
url: 'api/project/keyArea/selectKeyArea',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 重点区域--视频所有事件
|
||||
export function selectByAreaEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/keyArea/selectByAreaEvent',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 重点区域--视频当天事件
|
||||
export function selectByDayAreaEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/keyArea/selectByDayAreaEvent',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 数据统计--事件趋势
|
||||
export function selectMonthAreaEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/keyArea/selectMonthAreaEvent',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -21,6 +21,14 @@ export function selectMonthNoice() {
|
|||
method: 'get',
|
||||
})
|
||||
}
|
||||
//噪声
|
||||
export function selectNoiceEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectNoiceEvent',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 扬尘今日
|
||||
export function selectDayPm10() {
|
||||
return request({
|
||||
|
|
@ -42,6 +50,14 @@ export function selectMonthPm10() {
|
|||
method: 'get',
|
||||
})
|
||||
}
|
||||
//扬尘
|
||||
export function selectRaise(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectRaise',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 根据工地名搜索工地
|
||||
export function selectByProjectName(params) {
|
||||
return request({
|
||||
|
|
@ -90,19 +106,19 @@ export function selectMonthAll(params) {
|
|||
})
|
||||
}
|
||||
|
||||
//扬尘
|
||||
export function selectRaise(params) {
|
||||
// 查询当天工地视频感知事件
|
||||
export function selectDayVideo(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectRaise',
|
||||
url: 'api/project/building/selectByEvent',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
//噪声
|
||||
export function selectNoiceEvent(params) {
|
||||
// 查询全部工地视频感知事件
|
||||
export function selectAllVideo(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectNoiceEvent',
|
||||
url: 'api/project/building/selectByAllEvent',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
|
|
@ -150,4 +166,103 @@ export function selectByDayRoadData(params) {
|
|||
})
|
||||
}
|
||||
|
||||
// 数据统计--查询七天扬尘事件
|
||||
export function selectByWeekNaise(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectByWeekNaise',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 数据统计--查询30天扬尘事件
|
||||
export function selectByMonthNaise(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectByMonthNaise',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
// 数据统计--查询七天噪声事件
|
||||
export function selectByWeekNoice(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectByWeekNoice',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 数据统计--查询30天噪声事件
|
||||
export function selectByMonthNoice(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectByMonthNoice',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
// 数据统计--查询七天视频事件
|
||||
export function selectByWeekEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectByWeekEvent',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 数据统计--查询30天视频事件
|
||||
export function selectByMonthEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectByMonthEvent',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
// 数据统计-视频事件时间趋势
|
||||
export function selectMonthCurrentByEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectMonthCurrentByEvent',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 数据统计-物联事件时间趋势
|
||||
export function selectMonthCurrentByBuilding(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectMonthCurrentByBuilding',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 数据统计-走航表格数据--全部
|
||||
export function selectRoadDataCountEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectRoadDataCountEvent',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 数据统计-走航表格数据--近7天
|
||||
export function selectRoadDataWeekEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectRoadDataWeekEvent',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 数据统计-走航表格数据--近30天
|
||||
export function selectRoadDataMonthEvent(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectRoadDataMonthEvent',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
// 数据统计-走航事件时间趋势
|
||||
export function selectMonthCurrentByRoadData(params) {
|
||||
return request({
|
||||
url: 'api/project/building/selectMonthCurrentByRoadData',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventLis
|
|||
import SiteListPop from '@/views/pages/construction/components/SiteListPop'
|
||||
import WaterPointPop from '@/views/pages/waterPoints/components/WaterPointPop'
|
||||
import SiteRoadPop from '@/views/pages/construction/components/SiteRoadPop'
|
||||
import ImportantAreaPop from '@/views/pages/area/components/ImportantAreaPop'
|
||||
|
||||
|
||||
import bus from "@/views/layout/bus";
|
||||
|
|
@ -226,6 +227,25 @@ function createSiteRoadPop(feature) {
|
|||
})
|
||||
return popupDom.initDom()
|
||||
}
|
||||
// 重点区域弹窗
|
||||
function createImportantAreaPop(feature) {
|
||||
bus.$emit('areaCauseAnalysis',feature.data)
|
||||
|
||||
const popupDom = new Dom({
|
||||
template: '<Important-Area-pop :feature="feature"></Important-Area-pop>',
|
||||
data() {
|
||||
return {
|
||||
feature: feature,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
components: {
|
||||
ImportantAreaPop
|
||||
}
|
||||
})
|
||||
return popupDom.initDom()
|
||||
}
|
||||
/**
|
||||
* 生成专题企业信息通用弹窗Dom
|
||||
* @param resourceTitle
|
||||
|
|
@ -696,4 +716,5 @@ export {
|
|||
createSiteListPop,
|
||||
createWaterPointPop,
|
||||
createSiteRoadPop,
|
||||
createImportantAreaPop
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<el-dropdown trigger="click">
|
||||
<!-- <el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
{{ listTypeSelect || '全部'}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown> -->
|
||||
<div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
|
||||
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
|
||||
<div class="event-details-title">
|
||||
|
|
@ -72,20 +72,21 @@
|
|||
<p>事件描述:{{ item.eventCnName || ''}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-pagination
|
||||
<!-- <el-pagination
|
||||
v-if="total==0"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@current-change="pageChange"
|
||||
:page-count="pageCount"
|
||||
:page-size = 4
|
||||
:total="total"
|
||||
:current-page="currentPage"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-pagination> -->
|
||||
<el-pagination
|
||||
v-else
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@current-change="pageChange"
|
||||
:page-size = 4
|
||||
:total="total"
|
||||
:current-page="currentPage"
|
||||
>
|
||||
|
|
@ -96,7 +97,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
|
||||
import { selectByAreaEvent, selectByDayAreaEvent } from "@/api/area";
|
||||
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
||||
import bus from "@/views/layout/bus";
|
||||
import {
|
||||
|
|
@ -118,7 +119,7 @@ export default {
|
|||
},
|
||||
eventListData: [],
|
||||
preTime: "",
|
||||
pageCount: 0,
|
||||
// pageCount: 0,
|
||||
total:0,
|
||||
currentPage:1,
|
||||
roadData:[],
|
||||
|
|
@ -149,14 +150,15 @@ export default {
|
|||
page: 1,
|
||||
pageSize: 4,
|
||||
};
|
||||
selectEvent(params).then((res) => {
|
||||
this.eventListData = res.data.data.events
|
||||
this.pageCount = res.data.data.page
|
||||
selectByAreaEvent(params).then((res) => {
|
||||
this.eventListData = res.data.data.events
|
||||
this.total = res.data.data.sum
|
||||
this.$parent.allListDataNum = res.data.data.sum;
|
||||
});
|
||||
|
||||
selectByTime().then((res)=>{
|
||||
if(res.data.data){
|
||||
this.todayListNum = res.data.data.length
|
||||
selectByDayAreaEvent().then((res)=>{
|
||||
if(res.data.data.sum){
|
||||
this.todayListNum = res.data.data.sum
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -187,10 +189,9 @@ export default {
|
|||
pageChange(val) {
|
||||
this.currentPage = val
|
||||
if(this.listTypeSelect == '全部'){
|
||||
selectEvent({ pageSize: 4,page: val,}).then((res) => {
|
||||
selectByAreaEvent({ pageSize: 4,page: val,}).then((res) => {
|
||||
this.eventListData = res.data.data.events
|
||||
this.pageCount = res.data.data.page
|
||||
this.total = 0
|
||||
this.total = res.data.data.sum
|
||||
});
|
||||
} else {
|
||||
selectByName({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
|
||||
|
|
@ -198,7 +199,7 @@ export default {
|
|||
// console.log(res.data.data)
|
||||
this.eventListData = res.data.data.events;
|
||||
this.total = res.data.data.sum
|
||||
this.pageCount = 0
|
||||
// this.pageCount = 0
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
@ -207,10 +208,9 @@ export default {
|
|||
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
|
||||
selectAllVideo({ pageSize: 4,page: 1,}).then((res) => {
|
||||
this.eventListData = res.data.data.data
|
||||
this.total = res.data.data.sum
|
||||
});
|
||||
} else {
|
||||
selectByName({eventNewName: item, pageSize: 4,page: 1,}).then((res) => {
|
||||
|
|
@ -218,7 +218,7 @@ export default {
|
|||
// console.log(res.data.data)
|
||||
this.eventListData = res.data.data.events;
|
||||
this.total = res.data.data.sum
|
||||
this.pageCount = 0
|
||||
// this.pageCount = 0
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,478 +1,486 @@
|
|||
<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>
|
||||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="title-bg"></div>
|
||||
<div class="title">
|
||||
<span>{{ feature.data.areaName || "" }}</span>
|
||||
</div>
|
||||
<div class="site-address">{{ feature.data.location || "" }}</div>
|
||||
<div class="site-content">
|
||||
<div class="site-content-left">
|
||||
<div>
|
||||
<div>管理单位：{{ feature.data.management || "" }}</div>
|
||||
<el-tooltip :content="feature.data.about">
|
||||
<div class="left-mid-line" style="text-overflow:ellipsis">景区简介：{{ getAbout(feature.data.about)}}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="area-content-left-top">
|
||||
<div>
|
||||
<div>当前人数</div>
|
||||
<div>{{ feature.data.allNums || "0" }}人</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>本地人数</div>
|
||||
<div>{{ feature.data.localNums || "0" }}人</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>外地人数</div>
|
||||
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
||||
</div>
|
||||
<!-- <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="images img-container">
|
||||
<!-- <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl[0]" :preview-src-list="feature.data.picUrl" alt="" /> -->
|
||||
<el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl" :preview-src-list="[feature.data.picUrl]" alt="" />
|
||||
<span v-else>暂无图片</span>
|
||||
</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() {
|
||||
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);
|
||||
// },
|
||||
getAbout(content) {
|
||||
if(!content) {
|
||||
return '暂无'
|
||||
} else if(content.length < 40) {
|
||||
return content
|
||||
} else {
|
||||
return content.substring(0, 40) + '...'
|
||||
}
|
||||
},
|
||||
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: '人',
|
||||
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: '人',
|
||||
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: 'bar',
|
||||
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: 'bar',
|
||||
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" scoped>
|
||||
// .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: 6px 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;
|
||||
.left-mid-line {
|
||||
margin: 6px 0;
|
||||
}
|
||||
.area-content-left-top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
& > div {
|
||||
text-align: center;
|
||||
> div:first-child {
|
||||
color: #1ffefd;
|
||||
}
|
||||
> div:last-child {
|
||||
color: rgba(255, 255, 255,.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.img-container {
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.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;
|
||||
background: #18304c;
|
||||
&::-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>
|
||||
|
|
@ -5,13 +5,13 @@
|
|||
<div class="eventData">
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<el-input
|
||||
placeholder="请输入工地名称"
|
||||
placeholder="请输入区域名称"
|
||||
prefix-icon="el-icon-search"
|
||||
@input="searchSite"
|
||||
v-model="searchValue"
|
||||
>
|
||||
</el-input>
|
||||
<el-select v-model="selectValue" placeholder="全部区市" @change="fliterSiteByArea">
|
||||
<el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
|
|
@ -53,10 +53,12 @@
|
|||
import bus from "@/views/layout/bus";
|
||||
import {
|
||||
selectKeyAreaList,
|
||||
selectKeyArea,
|
||||
selectByAreaName,
|
||||
selectByLikeName
|
||||
} from "@/api/area";
|
||||
import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
|
||||
|
||||
import { createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -74,67 +76,108 @@ export default {
|
|||
|
||||
options: [
|
||||
{
|
||||
value: '公园广场',
|
||||
value: "全部",
|
||||
label: '全部'
|
||||
},{
|
||||
value: "公园广场",
|
||||
label: '公园广场'
|
||||
},{
|
||||
value: '商业街区',
|
||||
value: "商业街区",
|
||||
label: '商业街区'
|
||||
}, {
|
||||
value: '景区景点',
|
||||
value: "景区景点",
|
||||
label: '景区景点'
|
||||
}, {
|
||||
value: '海水浴场',
|
||||
value: "海水浴场",
|
||||
label: '海水浴场'
|
||||
}, {
|
||||
value: '窗口单位',
|
||||
value: "窗口单位",
|
||||
label: '窗口单位'
|
||||
},
|
||||
],
|
||||
selectValue: '公园广场',
|
||||
selectValue: "全部",
|
||||
siteDataAll: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
selectKeyAreaList({type:"公园广场"}).then((res) => {
|
||||
console.log(res.data.data)
|
||||
let params = {
|
||||
type1: "'公园广场','窗口单位'",
|
||||
type2: "'景区景点','海水浴场'",
|
||||
type3: "'商业街区'"
|
||||
}
|
||||
selectKeyAreaList(params).then((res) => {
|
||||
this.siteDataAll = res.data.data
|
||||
this.siteData = res.data.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
searchSite() {
|
||||
if (this.searchValue == "") {
|
||||
if (!this.searchValue && this.selectValue !== '全部') {
|
||||
selectKeyArea({ type: this.selectValue }).then((res) => {
|
||||
this.siteData = res.data.data
|
||||
})
|
||||
} else if (!this.searchValue) {
|
||||
this.siteData = this.siteDataAll;
|
||||
} else {
|
||||
}else {
|
||||
const params = {
|
||||
projectName: this.searchValue,
|
||||
areaName: this.searchValue,
|
||||
};
|
||||
// selectByProjectName(params).then((res) => {
|
||||
// this.siteData = res.data.data
|
||||
// });
|
||||
selectByLikeName(params).then((res) => {
|
||||
this.siteData = res.data.data
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
fliterSiteByArea(val) {
|
||||
selectKeyAreaList({type:val}).then((res) => {
|
||||
this.siteData = res.data.data
|
||||
})
|
||||
if(val === '全部') {
|
||||
let params = {
|
||||
type1: "'公园广场','窗口单位'",
|
||||
type2: "'景区景点','海水浴场'",
|
||||
type3: "'商业街区'"
|
||||
}
|
||||
selectKeyAreaList(params).then((res) => {
|
||||
this.siteData = res.data.data
|
||||
})
|
||||
} else {
|
||||
selectKeyArea({ type: val}).then((res) => {
|
||||
this.siteData = res.data.data
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
// 行点击
|
||||
analyse(row) {
|
||||
// bus.$emit("openCauseAnalysis", row);
|
||||
this.$parent.hiMapFun.removerPolygon()
|
||||
selectByAreaName({areaName:row.areaName}).then((res) => {
|
||||
if(row.latitude && row.longitude) {
|
||||
this.$parent.hiMapFun.removerPolygon()
|
||||
this.$parent.removeRoadCauseAnalysis()
|
||||
this.$parent.hiMapFun.removeLayerByLayerName("roadPoint");
|
||||
this.$parent.hiMap.mapObj.map.flyTo({ lat: row.latitude, lng: row.longitude });
|
||||
let dataEvent = [{
|
||||
latLng: { lat: row.latitude, lng: row.longitude },
|
||||
data: row,
|
||||
type: "site",
|
||||
}]
|
||||
this.$parent.hiMapFun.addPointsToMap(
|
||||
dataEvent,
|
||||
"poi-red.png",
|
||||
"roadPoint",
|
||||
createImportantAreaPop
|
||||
);
|
||||
} else {
|
||||
selectByAreaName({areaName:row.areaName}).then((res) => {
|
||||
if(res.data.data){
|
||||
let areaLatLng = []
|
||||
res.data.data.forEach((item) => {
|
||||
let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
|
||||
areaLatLng.push([lonLat[1],lonLat[0]])
|
||||
})
|
||||
this.$parent.hiMapFun.removerPolygon()
|
||||
this.$parent.removeRoadCauseAnalysis()
|
||||
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 关闭基本信息窗口
|
||||
informationClose() {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
</div> -->
|
||||
<div key="video" v-if="tabsActiveName == '视频感知事件'">
|
||||
<div class="event-num">
|
||||
<span>000</span>件
|
||||
<span> {{ totalEventCount }}</span>件
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div id="event-type-chart"></div>
|
||||
|
|
@ -75,9 +75,11 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
totalEventCount: '000',
|
||||
tabsButton: ["视频感知事件","出租车走航监测"],
|
||||
tabsActiveName: "视频感知事件",
|
||||
filterButton:{
|
||||
|
|
@ -109,9 +111,10 @@ import * as echarts from 'echarts'
|
|||
mounted() {
|
||||
|
||||
this.$nextTick( () => {
|
||||
this.getVideoData()
|
||||
this.initEventTypeCharts()
|
||||
this.initEventStateCharts()
|
||||
this.initEventTimeCharts()
|
||||
// this.initEventTimeCharts()
|
||||
// this.initRoadTimeCharts()
|
||||
})
|
||||
|
||||
|
|
@ -135,6 +138,28 @@ import * as echarts from 'echarts'
|
|||
typeSelect(item) {
|
||||
this.filterButton.typeSelectActive = item
|
||||
},
|
||||
|
||||
getVideoData() {
|
||||
this.totalEventCount = 0;
|
||||
const params = {
|
||||
page: 1,
|
||||
pageSize: 4,
|
||||
};
|
||||
selectByAreaEvent(params).then((res) => {
|
||||
this.totalEventCount = res.data.data.sum
|
||||
});
|
||||
selectMonthAreaEvent().then((res) => {
|
||||
if(res.data.data && res.data.data.length) {
|
||||
let xValue = []
|
||||
let yValue = []
|
||||
res.data.data.forEach(item => {
|
||||
xValue.push(item.pushTime)
|
||||
yValue.push(item.number)
|
||||
});
|
||||
this.initEventTimeCharts(xValue, yValue)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
closeDialog(){
|
||||
this.$emit('closeDialog')
|
||||
|
|
@ -346,10 +371,10 @@ import * as echarts from 'echarts'
|
|||
)
|
||||
eventState.setOption(option)
|
||||
},
|
||||
initEventTimeCharts () {
|
||||
initEventTimeCharts (xValue, yValue) {
|
||||
const option = {
|
||||
title: {
|
||||
text: "事件时间趋势",
|
||||
text: "事件时间趋势(近30天)",
|
||||
left: "left",
|
||||
top: 15,
|
||||
textStyle: {
|
||||
|
|
@ -377,7 +402,7 @@ import * as echarts from 'echarts'
|
|||
show: false,
|
||||
},
|
||||
boundaryGap: ['2%', '2%'],
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
||||
data: xValue
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
|
@ -404,7 +429,7 @@ import * as echarts from 'echarts'
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
|
||||
data: yValue,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,409 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2021-05-21 17:43:34
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2021-12-01 13:32:53
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="dh-view" />
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const DHWsInstance = DHWs.getInstance({
|
||||
reConnectCount: 2,
|
||||
connectionTimeout: 30 * 1000,
|
||||
messageEvents: {
|
||||
loginState() {
|
||||
console.log('aaaa');
|
||||
}
|
||||
}
|
||||
}); // 获取对象实例，使用单例模式，唯一
|
||||
DHWsInstance.detectConnectQt().then(res => {
|
||||
if (res) {
|
||||
console.info('登陆成功');
|
||||
} else {
|
||||
console.info('登陆失败,重新登录');
|
||||
DHWsInstance.login({
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
});
|
||||
// this.$Message.info('登录中...');
|
||||
DHWsInstance.on('loginState', (res) => {
|
||||
// this.isLogin = res;
|
||||
if (res) {
|
||||
// this.$Message.success('登录成功');
|
||||
// this.activePanel = 'key2'
|
||||
} else {
|
||||
// this.$Message.info('登录失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
import bus from '@/views/layout/bus';
|
||||
export default {
|
||||
props: {
|
||||
isDestroyed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
posX: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
posY: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
channelId: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// ws: {
|
||||
// type: Object,
|
||||
// default: () => {
|
||||
// return {};
|
||||
// }
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ws: DHWsInstance,
|
||||
activePanel: 'key12580',
|
||||
isLogin: false,
|
||||
loginType: '1',
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
ctrlType: 'playerWin',
|
||||
ctrlList: [
|
||||
{
|
||||
value: 'ctrl1',
|
||||
label: '控件1',
|
||||
},
|
||||
{
|
||||
value: 'ctrl2',
|
||||
label: '控件2',
|
||||
},
|
||||
{
|
||||
value: 'ctrl3',
|
||||
label: '控件3',
|
||||
},
|
||||
],
|
||||
splitList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '1 * 1',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '2 * 2',
|
||||
},
|
||||
{
|
||||
value: 9,
|
||||
label: '3 * 3',
|
||||
},
|
||||
],
|
||||
displayModeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '播放器预览模式',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '播放器回放模式',
|
||||
},
|
||||
],
|
||||
ctrl: 'ctrl133',
|
||||
splitNum: 1,
|
||||
displayMode: 1,
|
||||
displayTimeRange: [],
|
||||
recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
|
||||
downloadName: '',
|
||||
downTimeRange: [],
|
||||
downloadFormat: 0,
|
||||
downloadFormatList: [
|
||||
{
|
||||
value: 0,
|
||||
label: 'dav',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: 'avi',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'mp4',
|
||||
},
|
||||
],
|
||||
downloadSource: 3,
|
||||
downloadSourceList: [
|
||||
{
|
||||
value: 3,
|
||||
label: '中心录像',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '设备录像',
|
||||
},
|
||||
],
|
||||
showDownloadStreamType: false,
|
||||
downloadStreamType: 1,
|
||||
downloadStreamTypeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '主码流',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '辅码流',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '三码流',
|
||||
},
|
||||
],
|
||||
downloadIsShow: true,
|
||||
downloadIsShowList: [
|
||||
{
|
||||
value: true,
|
||||
label: '是',
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
label: '否',
|
||||
},
|
||||
],
|
||||
// posX: 650,
|
||||
// posY: 120,
|
||||
// width: 1250,
|
||||
height: 800,
|
||||
ratio: 100,
|
||||
scrollX: 0,
|
||||
scrollXH: 0,
|
||||
scrollY: 0,
|
||||
scrollYW: 0,
|
||||
cutPosX: 0,
|
||||
cutPosY: 0,
|
||||
cutWidth: 100,
|
||||
cutHeight: 100,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
channelId() {
|
||||
console.log('监测到了节点的变化', this.channelId);
|
||||
// bus.$emit('destroyVideoSur', true);
|
||||
// this.login();
|
||||
|
||||
this.realTimeVideo();
|
||||
},
|
||||
count() {
|
||||
// this.setVisible();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log("#############################我是新的")
|
||||
// this.destroy();
|
||||
// this.login();
|
||||
},
|
||||
mounted() {
|
||||
this.realTimeVideo();
|
||||
// bus.$emit('destroyVideoSur', true);
|
||||
// this.loginOut();
|
||||
// this.login();
|
||||
// bus.$off('destroyDHView');
|
||||
// bus.$on('destroyDHView', val =>{
|
||||
// console.log('销毁弹窗插件', val);
|
||||
// if(!val) {
|
||||
// this.destroy();
|
||||
// this.loginOut();
|
||||
// } else {
|
||||
// this.login();
|
||||
// }
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
loginOut() {
|
||||
this.ws.logout({
|
||||
loginIp: _global.config.loginInfo.loginIp
|
||||
});
|
||||
},
|
||||
create() {
|
||||
// 调用创建控件接口
|
||||
if (!this.isLogin) {
|
||||
// this.$Message.info('正在登陆客户端，请稍等......');
|
||||
return false;
|
||||
}
|
||||
const params = [
|
||||
{
|
||||
ctrlType: this.ctrlType,
|
||||
ctrlCode: this.ctrl,
|
||||
ctrlProperty: {
|
||||
displayMode: this.displayMode,
|
||||
splitNum: this.splitNum,
|
||||
channelList: [{ channelId: this.channelId }],
|
||||
},
|
||||
visible: true,
|
||||
posX: this.posX,
|
||||
posY: this.posY,
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
ratio: this.ratio,
|
||||
scrollX: this.scrollX,
|
||||
scrollY: this.scrollY,
|
||||
scrollXH: this.scrollXH,
|
||||
scrollYW: this.scrollYW,
|
||||
cutList: [
|
||||
{
|
||||
posX: 0,
|
||||
posY: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
this.ws.createCtrl(params);
|
||||
this.ws.on('createCtrlResult', (res) => {
|
||||
console.info('插件返回信息', res);
|
||||
});
|
||||
},
|
||||
login() { // 调用登录接口
|
||||
this.ws.detectConnectQt().then(res => {
|
||||
if (res) { // 连接客户端成功
|
||||
this.ws.login({
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
https: 1
|
||||
});
|
||||
// this.$Message.info('登录中...');
|
||||
this.ws.on('loginState', (res) => {
|
||||
this.isLogin = res;
|
||||
if (res) {
|
||||
this.$Message.success('登录成功');
|
||||
// this.activePanel = 'key2';
|
||||
} else {
|
||||
this.$Message.info('登录失败');
|
||||
}
|
||||
});
|
||||
} else { // 连接客户端失败
|
||||
// this.$Message.info('请重新安装客户端');
|
||||
this.$confirm('未检测到相关视频插件，是否进行下载？', '提示', {
|
||||
confirmButtonText: '下载',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const agent = this.getPCNum();
|
||||
if (agent === 32) {
|
||||
// 64位操作系统
|
||||
this.downloadFile(_global.config.loginInfo.name_32, _global.config.loginInfo.url_32);
|
||||
} else {
|
||||
// 32位操作系统
|
||||
this.downloadFile(_global.config.loginInfo.name_64, _global.config.loginInfo.url_64);
|
||||
}
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
downloadFile(name, url) {
|
||||
const alink = document.createElement('a');
|
||||
alink.download = name;// 文件名,大部分浏览器兼容,IE10及以下不兼容
|
||||
alink.href = url;// 创建 url地址
|
||||
alink.click(); // 自动点击
|
||||
},
|
||||
getPCNum() {
|
||||
const agent = navigator.userAgent.toLowerCase();
|
||||
if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
|
||||
return 32;
|
||||
}
|
||||
if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
|
||||
return 64;
|
||||
}
|
||||
},
|
||||
setVisible() {
|
||||
// 调用设置控件显隐接口
|
||||
if (!this.isLogin) {
|
||||
// this.$Message.info("正在登陆客户端，请稍等......");
|
||||
return false;
|
||||
}
|
||||
const params = [
|
||||
{
|
||||
ctrlCode: this.ctrl,
|
||||
visible: !this.ws.ctrls.find((i) => {
|
||||
if (i.ctrlCode === this.ctrl) {
|
||||
return i;
|
||||
}
|
||||
}).visible,
|
||||
},
|
||||
];
|
||||
this.ws.setCtrlVisible(params);
|
||||
},
|
||||
realTimeVideo() {
|
||||
// // 调用控件实时播放接口
|
||||
// if (!this.isLogin) {
|
||||
// console.log("正在登陆客户端，请稍等......");
|
||||
// // this.$Message.info("正在登陆客户端，请稍等......");
|
||||
// return false;
|
||||
// }
|
||||
// this.displayMode = 1;
|
||||
// if (this.ws.ctrls.length === 0) {
|
||||
// console.log("请先创建控件！");
|
||||
// // this.$Message.info("请先创建控件！");
|
||||
// }
|
||||
// const params = {
|
||||
// ctrlCode: this.ctrl,
|
||||
// channelIds: [this.channelId],
|
||||
// };
|
||||
// this.ws.openCtrlPreview(params);
|
||||
console.log('播放', this.channelId);
|
||||
if (!this.isLogin) {
|
||||
// this.$Message.info('正在登陆客户端，请稍等......');
|
||||
// return false;
|
||||
this.login();
|
||||
}
|
||||
// const params = [this.channelId];
|
||||
console.log('播放', this.channelId);
|
||||
this.ws.openVideo(this.channelId);
|
||||
},
|
||||
destroy() {
|
||||
// 调用销毁控件接口
|
||||
if (!this.isLogin) {
|
||||
// this.login();
|
||||
// this.$Message.info("正在登陆客户端，请稍等......");
|
||||
return false;
|
||||
}
|
||||
console.log('销毁插件', this.ws.ctrls);
|
||||
const ctrls = this.ws.ctrls.map((i) => {
|
||||
if (i.ctrlCode === this.ctrl) {
|
||||
return i.ctrlCode;
|
||||
}
|
||||
});
|
||||
console.log('销毁的插件名称', ctrls);
|
||||
this.ws.destroyCtrl(ctrls);
|
||||
},
|
||||
},
|
||||
// beforeDestroyed() {
|
||||
// this.destroy()
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
|
@ -37,8 +37,8 @@
|
|||
</div>
|
||||
|
||||
<div class="eventNum">
|
||||
累计事件数量
|
||||
<p><span>1236</span>件</p>
|
||||
累计事件数量(2022.05.25-至今)
|
||||
<p><span>{{ allListDataNum }}</span>件</p>
|
||||
</div>
|
||||
|
||||
<!-- 事件感知 -->
|
||||
|
|
@ -81,6 +81,10 @@
|
|||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<video-play
|
||||
v-if="openVideo"
|
||||
:channel-id="channelCode"
|
||||
></video-play>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -91,11 +95,13 @@ import TiledMap from "./components/tiledMap";
|
|||
import { searchCamera } from "@/api/videoSurveillance/index";
|
||||
import bus from "@/views/layout/bus";
|
||||
import complaintEvent from "./components/ComplaintEvent";
|
||||
import VideoPlay from './components/VideoPlay'
|
||||
import VideoList from "./components/VideoList";
|
||||
import SiteList from "./components/SiteList";
|
||||
import { selectByJdWd } from "@/api/construction/index";
|
||||
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop } from "@/supermap/createMarkerPopup";
|
||||
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
||||
import { listPassengerFlow, selectByTime, } from "@/api/civilizedCity.js";
|
||||
import { selectByAreaEvent, selectKeyArea } from "@/api/area";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -114,8 +120,9 @@ export default {
|
|||
thermodynamicPeopleAll: [],
|
||||
thermodynamicPeopleLocal: [],
|
||||
thermodynamicPeopleNoLocal: [],
|
||||
|
||||
|
||||
allListDataNum: '',
|
||||
openVideo: false,
|
||||
channelCode: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -123,6 +130,7 @@ export default {
|
|||
complaintEvent,
|
||||
VideoList,
|
||||
SiteList,
|
||||
VideoPlay
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
|
|
@ -132,8 +140,11 @@ export default {
|
|||
this.hiMapFun
|
||||
);
|
||||
|
||||
|
||||
|
||||
bus.$off('openCurrentVideoSurveillance')
|
||||
bus.$on('openCurrentVideoSurveillance', (channelCode) => {
|
||||
this.openVideo = true
|
||||
this.channelCode.unshift(channelCode)
|
||||
})
|
||||
// 根据经纬度查询半径内所有的工地
|
||||
bus.$off("openCauseAnalysis");
|
||||
bus.$on("openCauseAnalysis", (row) => {
|
||||
|
|
@ -173,12 +184,6 @@ export default {
|
|||
})
|
||||
|
||||
this.thermodynamic()
|
||||
|
||||
selectByTime().then((res)=>{
|
||||
if(res.data.data){
|
||||
this.todayListNum = res.data.data.length
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
querySearchAsync(queryString, cb) {
|
||||
|
|
@ -281,16 +286,14 @@ export default {
|
|||
},
|
||||
|
||||
layerHandleChange(item) {
|
||||
console.log('this.changeLayerBtnGroup---', this.changeLayerBtnGroup)
|
||||
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
||||
switch (item) {
|
||||
case "道路":
|
||||
this.roadOnMap(this.$refs.complaintEventRef.roadData);
|
||||
break;
|
||||
case "AI事件":
|
||||
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||
selectByTime().then((res) => {
|
||||
selectByAreaEvent().then((res) => {
|
||||
const dataEvent = [];
|
||||
res.data.data.forEach((item) => {
|
||||
res.data.data.events.forEach((item) => {
|
||||
dataEvent.push(
|
||||
{
|
||||
latLng: { lat: item.latitude, lng: item.longitude },
|
||||
|
|
@ -305,16 +308,44 @@ export default {
|
|||
case "视频监控":
|
||||
this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
|
||||
break;
|
||||
case "公园广场":
|
||||
case "商业街区":
|
||||
case "景区景点":
|
||||
case "海水浴场":
|
||||
case "窗口单位":
|
||||
this.hiMapFun.removeLayerByLayerName(item)
|
||||
selectKeyArea({ type: item}).then((res) => {
|
||||
const dataEvent = [];
|
||||
console.log('res.data.data----', res.data.data)
|
||||
res.data.data.forEach((item) => {
|
||||
dataEvent.push(
|
||||
{
|
||||
latLng: { lat: item.latitude, lng: item.longitude },
|
||||
data: item,
|
||||
type: "site",
|
||||
}
|
||||
)
|
||||
})
|
||||
this.hiMapFun.addPointsToMap(
|
||||
dataEvent,
|
||||
"poi-red.png",
|
||||
item,
|
||||
createImportantAreaPop
|
||||
);
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (item) {
|
||||
case "道路":
|
||||
this.hiMapFun.removerPolyline();
|
||||
break;
|
||||
case "公园广场":
|
||||
case "商业街区":
|
||||
case "景区景点":
|
||||
case "海水浴场":
|
||||
case "窗口单位":
|
||||
case "AI事件":
|
||||
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||
this.hiMapFun.removeLayerByLayerName(item)
|
||||
break;
|
||||
case "视频监控":
|
||||
this.hiMapFun.removeLayerByLayerName('全部')
|
||||
|
|
@ -414,6 +445,12 @@ export default {
|
|||
|
||||
}
|
||||
},
|
||||
removeRoadCauseAnalysis () {
|
||||
this.hiMapFun.removerPolygon()
|
||||
this.hiMapFun.removeLayerByLayerName('roadPoint')
|
||||
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||
this.hiMapFun.removeLayerByLayerName('全部')
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
<div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
|
||||
</div>
|
||||
<div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
|
||||
<div class="filter-btn-box" v-show="tabsActiveName !== '走航监测' && tabsActiveName !== '视频感知'">
|
||||
<div class="filter-btn-typeSelect">
|
||||
<div class="typeSelect-btn"
|
||||
v-for="item in filterButton.typeSelect"
|
||||
|
|
@ -60,6 +60,22 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="tabsActiveName == '视频感知'">
|
||||
<div class="event-details special-video-height" v-for="item in eventListData" :key="item.index" @click="openVideoDialog(item)">
|
||||
<div class="event-details-title">
|
||||
<span>{{item.eventNewName||''}}</span>
|
||||
<span>{{item.captureTime||''}}</span>
|
||||
<!-- <span>未派发</span> -->
|
||||
</div>
|
||||
<div class="event-details-des">
|
||||
<h5>事件地址：{{item.district||''}}</h5>
|
||||
<p>摄像头名称：{{item.cameraName||''}}</p>
|
||||
<p>事件描述：{{item.eventCnName||''}}</p>
|
||||
<!-- <p>简述简述简述简述简述简述简述简述</p> -->
|
||||
<!-- <p>{{filterButton.typeSelectActive == '工地扬尘'? 'pm10' : '噪声值'}}:{{filterButton.typeSelectActive == '工地扬尘'? item.pm10 :item.noice ||''}}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="tabsActiveName == '物联感知'">
|
||||
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openSiteDialog(item)">
|
||||
<div class="event-details-title">
|
||||
|
|
@ -89,10 +105,10 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
|
||||
import { selectAllVideo, selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
|
||||
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
|
||||
import {
|
||||
createSiteRoadPop,
|
||||
createSiteRoadPop,createEventListDetailsPop
|
||||
} from "@/supermap/createMarkerPopup";
|
||||
import bus from "@/views/layout/bus";
|
||||
import {
|
||||
|
|
@ -146,7 +162,9 @@ export default {
|
|||
this.getRoadData()
|
||||
this.selectRoadData()
|
||||
|
||||
|
||||
selectAllVideo({pageSize: 5,page: 1,}).then((res) => {
|
||||
this.$parent.allListDataNum += res.data.data.sum;
|
||||
});
|
||||
selectRaise({pageSize: 5,page: 1,}).then((res) => {
|
||||
this.$parent.allListDataNum += res.data.data.sum;
|
||||
});
|
||||
|
|
@ -161,11 +179,11 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
tabHandleClick(item) {
|
||||
this.$parent.removeRoadCauseAnalysis()
|
||||
this.tabsActiveName = item
|
||||
this.currentPage = 1
|
||||
if(item == '视频感知'){
|
||||
this.filterButton.typeSelect = []
|
||||
|
||||
this.selectAllVideo()
|
||||
}
|
||||
if(item == '物联感知'){
|
||||
this.filterButton.typeSelect = ['工地扬尘','工地噪声']
|
||||
|
|
@ -211,7 +229,17 @@ export default {
|
|||
this.total = res.data.data.sum
|
||||
});
|
||||
},
|
||||
|
||||
//视频感知
|
||||
selectAllVideo(val) {
|
||||
let params = {
|
||||
pageSize: 4,
|
||||
page: val || 1,
|
||||
}
|
||||
selectAllVideo(params).then((res) => {
|
||||
this.eventListData = res.data.data.data;
|
||||
this.total = res.data.data.sum;
|
||||
});
|
||||
},
|
||||
//物联感知 扬尘
|
||||
selectRaise() {
|
||||
let params = {
|
||||
|
|
@ -238,7 +266,7 @@ export default {
|
|||
//分页
|
||||
pageChange(val) {
|
||||
if(this.tabsActiveName == '视频感知') {
|
||||
|
||||
this.selectAllVideo(val)
|
||||
} else if(this.tabsActiveName == '物联感知') {
|
||||
if(this.filterButton.typeSelectActive == '工地扬尘'){
|
||||
let params = {
|
||||
|
|
@ -288,7 +316,25 @@ export default {
|
|||
);
|
||||
|
||||
},
|
||||
|
||||
openVideoDialog(data) {
|
||||
const EventListDetail = [
|
||||
{
|
||||
latLng: { lat: data.latitude, lng: data.longitude },
|
||||
data: data,
|
||||
type: 'eventList',
|
||||
from: ''
|
||||
}
|
||||
]
|
||||
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude })
|
||||
this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0])
|
||||
// this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||
this.$parent.hiMapFun.addPointsToMap(
|
||||
EventListDetail,
|
||||
'poi-event.png',
|
||||
'videoNotice',
|
||||
createEventListDetailsPop
|
||||
)
|
||||
},
|
||||
openSiteDialog(data) {
|
||||
bus.$emit("openCauseAnalysis", data);
|
||||
},
|
||||
|
|
@ -561,6 +607,9 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.special-video-height {
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -20,10 +20,20 @@
|
|||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="new-condition-line">
|
||||
<el-select v-model="selectNight" placeholder="夜间施工许可" @change="fliterSiteByNight">
|
||||
<el-option
|
||||
v-for="item in nightOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="eventNoise">
|
||||
<el-table
|
||||
:data="siteData"
|
||||
height='356'
|
||||
height='300'
|
||||
@row-click="analyse"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
|
|
@ -49,7 +59,7 @@
|
|||
{{scope.row.pm10 + 'mg/m³'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="88" prop="yjsg" label="夜间施工">
|
||||
<el-table-column prop="yjsg" label="夜间施工许可">
|
||||
<template slot-scope="scope">
|
||||
<img v-if="scope.row.yjsg == '是'" src="../../../../assets/construction/night.png" alt="">
|
||||
<img v-else src="../../../../assets/construction/nonight.png" alt="">
|
||||
|
|
@ -120,7 +130,20 @@ export default {
|
|||
label: '莱西市'
|
||||
}
|
||||
],
|
||||
selectValue: ''
|
||||
nightOption: [
|
||||
{
|
||||
value: '全部',
|
||||
label: '全部'
|
||||
},{
|
||||
value: '是',
|
||||
label: '是'
|
||||
}, {
|
||||
value: '否',
|
||||
label: '否'
|
||||
}
|
||||
],
|
||||
selectValue: '', // 选择的区市
|
||||
selectNight: '' // 选择的夜间施工许可
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -179,6 +202,14 @@ export default {
|
|||
this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
|
||||
}
|
||||
},
|
||||
// 根据是否夜间施工自查询
|
||||
fliterSiteByNight(val) {
|
||||
if (val == '全部') {
|
||||
this.siteData = this.siteDataAll;
|
||||
} else {
|
||||
this.siteData = this.siteDataAll.filter((item) => item.yjsg == val)
|
||||
}
|
||||
},
|
||||
// 行点击
|
||||
analyse(row) {
|
||||
bus.$emit("openCauseAnalysis", row);
|
||||
|
|
@ -265,6 +296,17 @@ export default {
|
|||
width: 161px;
|
||||
}
|
||||
}
|
||||
.new-condition-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top:16px;
|
||||
.el-select {
|
||||
width: 200px;
|
||||
.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .eventNoise {
|
||||
|
|
|
|||
|
|
@ -38,17 +38,15 @@
|
|||
</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 class="images img-container">
|
||||
<!-- <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl[0]" :preview-src-list="feature.data.picUrl" alt="" /> -->
|
||||
<el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl" :preview-src-list="[feature.data.picUrl]" alt="" />
|
||||
<span v-else>暂无图片</span>
|
||||
</div>
|
||||
<!-- <el-image-viewer
|
||||
v-if="imgViewerVisible"
|
||||
:url-list=
|
||||
/> -->
|
||||
<div class="video-table">
|
||||
<h4>周边监控</h4>
|
||||
<el-table
|
||||
|
|
@ -130,6 +128,10 @@ export default {
|
|||
pm10:[],
|
||||
noice:[],
|
||||
},
|
||||
imgList: [
|
||||
'http://15.72.183.90:7009/images/101_37020201581314000514.jpg',
|
||||
'http://15.72.183.90:7009/components/osg-default/_/video_event_panoramic/20220809-aa34ff49-000a580ae0030e-000f1990-0005b818'
|
||||
],
|
||||
monthData:{
|
||||
time:[],
|
||||
pm10:[],
|
||||
|
|
@ -439,6 +441,14 @@ export default {
|
|||
}
|
||||
.site-content-right {
|
||||
width: 280px;
|
||||
.img-container {
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.video-table {
|
||||
margin-top: 10px;
|
||||
h4 {
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
v-for="item in filterButton.typeSelect"
|
||||
:key="item"
|
||||
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
|
||||
@click="typeSelect(item)"
|
||||
@click="handleTypeSelect(item)"
|
||||
>{{item}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div key="video" v-if="tabsActiveName == '视频感知'">
|
||||
<div class="event-num">
|
||||
<span>000</span>件
|
||||
<span>{{ eventTotal }}</span>件
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div id="event-type-chart"></div>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
<div key="video" v-if="tabsActiveName == '物联感知'">
|
||||
<div class="event-num">
|
||||
<span>000</span>件
|
||||
<span>{{ eventTotal }}</span>件
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div id="event-type-chart"></div>
|
||||
|
|
@ -50,80 +50,69 @@
|
|||
</div>
|
||||
<div key="road" v-if="tabsActiveName == '走航监测'">
|
||||
<div class="event-num">
|
||||
<span>000</span>件
|
||||
<span>{{ eventTotal }}</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',
|
||||
}"
|
||||
style="background: transparent"
|
||||
>
|
||||
<el-table-column label="Top" width="46" type="index">
|
||||
</el-table-column>
|
||||
<el-table-column label="道路" prop="roadName" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column width="81" prop="start" label="路段开始" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column width="81" prop="end" label="路段结束" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column width="86" prop="times" label="告警次数">
|
||||
</el-table-column>
|
||||
:data="PollutionRoad"
|
||||
height='356'
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
'background-color': '#18304c',
|
||||
}"
|
||||
:header-cell-style="{
|
||||
color: '#1ffefd',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
style="background: transparent"
|
||||
>
|
||||
<el-table-column label="Top" width="46" type="index">
|
||||
</el-table-column>
|
||||
<el-table-column label="道路" prop="roadName" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column width="81" prop="start" label="路段开始" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column width="81" prop="end" label="路段结束" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column width="86" prop="number" label="告警次数">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="line"></div>
|
||||
<div id="event-time-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { selectAllVideo, selectByWeekEvent, selectByMonthEvent, selectByWeekNaise, selectByMonthNaise, selectRaise, selectByWeekNoice, selectByMonthNoice, selectNoiceEvent, selectMonthCurrentByEvent, selectMonthCurrentByBuilding, selectRoadDataCountEvent,selectRoadDataWeekEvent, selectRoadDataMonthEvent, selectMonthCurrentByRoadData } from "@/api/construction/index";
|
||||
import { selectRoadData } from "@/api/road";
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
eventTotal: '000',
|
||||
tabsButton: ["视频感知","物联感知","走航监测"],
|
||||
tabsActiveName: "视频感知",
|
||||
filterButton:{
|
||||
typeSelect:['全部','近7天','近30天'],
|
||||
typeSelectActive:'全部',
|
||||
},
|
||||
PollutionRoad:[
|
||||
{
|
||||
roadName: '某某路',
|
||||
start: '开始',
|
||||
end: '结束',
|
||||
times: '10',
|
||||
},
|
||||
{
|
||||
roadName: '某某路',
|
||||
start: '开始',
|
||||
end: '结束',
|
||||
times: '10',
|
||||
},
|
||||
{
|
||||
roadName: '某某路',
|
||||
start: '开始',
|
||||
end: '结束',
|
||||
times: '10',
|
||||
},
|
||||
]
|
||||
// 走航检测 表格
|
||||
PollutionRoad:[],
|
||||
// 柱状图
|
||||
barLabelArr: [],
|
||||
barValueArr: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.$nextTick( () => {
|
||||
this.initEventTypeCharts()
|
||||
// this.initEventTypeCharts()
|
||||
this.initEventStateCharts()
|
||||
this.initEventTimeCharts()
|
||||
// this.initEventTimeCharts()
|
||||
this.getVideoData()
|
||||
// this.initRoadTimeCharts()
|
||||
})
|
||||
|
||||
|
|
@ -133,26 +122,147 @@ import * as echarts from 'echarts'
|
|||
this.tabsActiveName = item
|
||||
if(item == '视频感知') {
|
||||
this.$nextTick( () => {
|
||||
this.initEventTypeCharts()
|
||||
this.getVideoData()
|
||||
// this.initEventTypeCharts()
|
||||
this.initEventStateCharts()
|
||||
this.initEventTimeCharts()
|
||||
// this.initEventTimeCharts()
|
||||
})
|
||||
}
|
||||
if(item == '走航监测') {
|
||||
} else if(item == '物联感知') {
|
||||
this.$nextTick( () => {
|
||||
this.initRoadTimeCharts()
|
||||
this.getDeviceData()
|
||||
// this.initEventTypeCharts()
|
||||
this.initEventStateCharts()
|
||||
// this.initEventTimeCharts()
|
||||
})
|
||||
} else if(item == '走航监测') {
|
||||
this.$nextTick( () => {
|
||||
this.getRoadData()
|
||||
// this.initRoadTimeCharts()
|
||||
})
|
||||
}
|
||||
},
|
||||
typeSelect(item) {
|
||||
handleTypeSelect(item) {
|
||||
this.filterButton.typeSelectActive = item
|
||||
if(this.tabsActiveName == '物联感知') {
|
||||
this.getDeviceData()
|
||||
} else if (this.tabsActiveName == '视频感知') {
|
||||
this.getVideoData()
|
||||
} else if (this.tabsActiveName == '走航监测') {
|
||||
this.getRoadData()
|
||||
}
|
||||
},
|
||||
|
||||
closeDialog(){
|
||||
this.$emit('closeDialog')
|
||||
},
|
||||
|
||||
initEventTypeCharts () {
|
||||
// 查询视频数据
|
||||
getVideoData() {
|
||||
let raiseType = selectAllVideo
|
||||
if(this.filterButton.typeSelectActive === '近7天') {
|
||||
raiseType = selectByWeekEvent
|
||||
} else if (this.filterButton.typeSelectActive === '近30天') {
|
||||
raiseType = selectByMonthEvent
|
||||
}
|
||||
let params = {
|
||||
pageSize: 5,
|
||||
page: 1,
|
||||
}
|
||||
this.eventTotal = 0
|
||||
this.barLabelArr = []
|
||||
this.barValueArr = []
|
||||
raiseType(params).then((res) => {
|
||||
this.eventTotal = res.data.data.sum;
|
||||
this.barLabelArr.push('渣土车发现')
|
||||
this.barValueArr.push(res.data.data.sum)
|
||||
this.initEventTypeCharts()
|
||||
});
|
||||
selectMonthCurrentByEvent().then((res) => {
|
||||
if(res.data.data && res.data.data.length) {
|
||||
let xValue = []
|
||||
let yValue = []
|
||||
res.data.data.forEach(item => {
|
||||
xValue.push(item.pushTime)
|
||||
yValue.push(item.number)
|
||||
});
|
||||
this.initEventTimeCharts(xValue, yValue)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 查询物联数据
|
||||
getDeviceData() {
|
||||
let raiseType = selectRaise
|
||||
let noiceType = selectNoiceEvent
|
||||
if(this.filterButton.typeSelectActive === '近7天') {
|
||||
raiseType = selectByWeekNaise
|
||||
noiceType = selectByWeekNoice
|
||||
} else if (this.filterButton.typeSelectActive === '近30天') {
|
||||
raiseType = selectByMonthNaise
|
||||
noiceType = selectByMonthNoice
|
||||
}
|
||||
let params = {
|
||||
pageSize: 5,
|
||||
page: 1,
|
||||
}
|
||||
this.eventTotal = 0
|
||||
this.barLabelArr = []
|
||||
this.barValueArr = []
|
||||
raiseType(params).then((res) => {
|
||||
this.eventTotal += res.data.data.sum;
|
||||
this.barLabelArr.push('工地扬尘')
|
||||
this.barValueArr.push(res.data.data.sum)
|
||||
this.initEventTypeCharts('device')
|
||||
});
|
||||
noiceType(params).then((res) => {
|
||||
this.eventTotal += res.data.data.sum;
|
||||
this.barLabelArr.push('工地噪声')
|
||||
this.barValueArr.push(res.data.data.sum)
|
||||
this.initEventTypeCharts('device')
|
||||
});
|
||||
selectMonthCurrentByBuilding().then((res) => {
|
||||
if(res.data.data && res.data.data.length) {
|
||||
let xValue = []
|
||||
let yValue = []
|
||||
res.data.data.forEach(item => {
|
||||
xValue.push(item.pushTime)
|
||||
yValue.push(item.number)
|
||||
});
|
||||
this.initEventTimeCharts(xValue, yValue)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 查询走航数据
|
||||
getRoadData() {
|
||||
let raiseType = selectRoadDataCountEvent
|
||||
// let roadType = selectRoadData
|
||||
if(this.filterButton.typeSelectActive === '近7天') {
|
||||
raiseType = selectRoadDataWeekEvent
|
||||
} else if (this.filterButton.typeSelectActive === '近30天') {
|
||||
raiseType = selectRoadDataMonthEvent
|
||||
}
|
||||
this.eventTotal = 0
|
||||
// 表格数据
|
||||
raiseType().then((res) => {
|
||||
if(res.data.data.roadDataDtos && res.data.data.roadDataDtos.length) {
|
||||
this.PollutionRoad = res.data.data.roadDataDtos.slice(0, 5)
|
||||
this.eventTotal = res.data.data.sum
|
||||
}
|
||||
});
|
||||
selectMonthCurrentByRoadData().then((res) => {
|
||||
if(res.data.data && res.data.data.length) {
|
||||
let xValue = []
|
||||
let yValue = []
|
||||
res.data.data.forEach(item => {
|
||||
xValue.push(item.pushTime)
|
||||
yValue.push(item.number)
|
||||
});
|
||||
this.initEventTimeCharts(xValue, yValue)
|
||||
}
|
||||
});
|
||||
},
|
||||
initEventTypeCharts (type) {
|
||||
if(type === 'device' && this.barLabelArr.length < 2) {
|
||||
return
|
||||
}
|
||||
const option = {
|
||||
title: {
|
||||
text: "事件类型分布",
|
||||
|
|
@ -169,7 +279,7 @@ import * as echarts from 'echarts'
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['非法运土', '工地扬尘', '其他'],
|
||||
data: this.barLabelArr,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
margin: 7,
|
||||
|
|
@ -189,7 +299,7 @@ import * as echarts from 'echarts'
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150],
|
||||
data: this.barValueArr,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
|
|
@ -358,10 +468,10 @@ import * as echarts from 'echarts'
|
|||
)
|
||||
eventState.setOption(option)
|
||||
},
|
||||
initEventTimeCharts () {
|
||||
initEventTimeCharts (xValue, yValue) {
|
||||
const option = {
|
||||
title: {
|
||||
text: "事件时间趋势",
|
||||
text: "事件时间趋势(近30天)",
|
||||
left: "left",
|
||||
top: 15,
|
||||
textStyle: {
|
||||
|
|
@ -389,7 +499,7 @@ import * as echarts from 'echarts'
|
|||
show: false,
|
||||
},
|
||||
boundaryGap: ['2%', '2%'],
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
||||
data: xValue
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
|
@ -416,7 +526,7 @@ import * as echarts from 'echarts'
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
|
||||
data: yValue,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
|
|
@ -452,100 +562,6 @@ import * as echarts from 'echarts'
|
|||
)
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
</div>
|
||||
|
||||
<div class="eventNum">
|
||||
累计事件数量
|
||||
累计事件数量(2022.05.25-至今)
|
||||
<p><span>{{allListDataNum}}</span>件</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -81,8 +81,8 @@ import bus from '@/views/layout/bus'
|
|||
import complaintEvent from './components/ComplaintEvent'
|
||||
import VideoList from './components/VideoList'
|
||||
import SiteList from './components/SiteList'
|
||||
import { selectByJdWd, selectByDayRaise, selectByDayNoice, selectByDayRoadData } from '@/api/construction/index'
|
||||
import { createSiteListPop, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
|
||||
import { selectByJdWd, selectDayVideo, selectByDayRaise, selectByDayNoice, selectByDayRoadData } from '@/api/construction/index'
|
||||
import { createSiteListPop, createCameraDetailsPop, createImportantAreaPop } from '@/supermap/createMarkerPopup'
|
||||
|
||||
import VideoPlay from './components/VideoPlay'
|
||||
import { selectAllByGps } from '@/api/road'
|
||||
|
|
@ -119,6 +119,10 @@ export default {
|
|||
this.hiMap.mapObj,
|
||||
this.hiMapFun
|
||||
)
|
||||
this.todayListNum = 0
|
||||
selectDayVideo().then((res) => {
|
||||
this.todayListNum += res.data.data.sum
|
||||
})
|
||||
|
||||
selectByDayRaise().then((res) => {
|
||||
this.todayListNum += res.data.data.sum
|
||||
|
|
@ -396,6 +400,7 @@ export default {
|
|||
this.hiMapFun.removeLayerByLayerName('videoSurveillance')
|
||||
this.hiMapFun.removeLayerByLayerName('constructionSite')
|
||||
this.hiMapFun.removeLayerByLayerName('roadPoint')
|
||||
this.hiMapFun.removeLayerByLayerName('videoNotice')
|
||||
}
|
||||
},
|
||||
beforeDestroy () {}
|
||||
|
|
|
|||
|
|
@ -248,7 +248,8 @@ export default {
|
|||
const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
|
||||
this.preTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
|
||||
currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1)
|
||||
this.weekTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
|
||||
// this.weekTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
|
||||
this.weekTime = this.getWeekDate()
|
||||
},
|
||||
// 生命周期 - 挂载完成（访问DOM元素）
|
||||
mounted () {
|
||||
|
|
@ -305,6 +306,25 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
// 获取本周一日期
|
||||
getWeekDate() {
|
||||
let now = new Date()
|
||||
let nowTime = now.getTime();
|
||||
let day = now.getDay();
|
||||
let oneDayTime = 1000 * 60 * 60 * 24;
|
||||
let mondayTime = nowTime - (day - 1) * oneDayTime;
|
||||
let lw = new Date(mondayTime);
|
||||
let lastY = lw.getFullYear();
|
||||
let lastM = lw.getMonth() + 1;
|
||||
let lastD = lw.getDate();
|
||||
let startData =
|
||||
lastY +
|
||||
"-" +
|
||||
(lastM < 10 ? "0" + lastM : lastM) +
|
||||
"-" +
|
||||
(lastD < 10 ? "0" + lastD : lastD);
|
||||
return startData + ' ' + '00:00:00'
|
||||
},
|
||||
// 道路污染数据 昨日
|
||||
async getRoadData () {
|
||||
const res = await getRoadData({ dt: this.preTime })
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
openCurrentVideo(channelCode){
|
||||
console.log('channelCode-----', channelCode)
|
||||
bus.$emit('openCurrentVideoSurveillance',channelCode)
|
||||
// getStreamByChannelCode({channelCode:channelCode}).then(res => {
|
||||
// let newVideoStream = this.IntelliURLReplaceIP(res.data.data)
|
||||
|
|
|
|||
Loading…
Reference in New Issue