wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:重点区域功能补充，工地优化

This commit is contained in:
gounaikang@hisense.com 2022-08-24 18:08:59 +08:00
parent 9ae47a2e2f
commit 8b12cfac2b
7 changed files with 158 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/area.js
View File

@ -70,4 +70,32 @@ export function selectMonthAreaEvent(params) {
})
}
// 数据统计--分类
export function selectEventType(params) {
return request({
url: 'api/project/keyArea/selectEventType',
method: 'get',
params
})
}
// 弹窗--近7天
export function selectLocalWeekArea(params) {
return request({
url: 'api/project/keyArea/selectLocalWeekArea',
method: 'get',
params
})
}
// 弹窗--近30天
export function selectLocalMonthArea(params) {
return request({
url: 'api/project/keyArea/selectLocalMonthArea',
method: 'get',
params
})
}

71
src/views/pages/area/components/ImportantAreaPop.vue
View File

@ -100,7 +100,7 @@ import bus from "@/views/layout/bus";
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from "v-viewer"
import * as echarts from 'echarts'
import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
import {selectLocalWeekArea, selectLocalMonthArea} from '@/api/area.js'
export default {
name: "",
props: {
@ -112,15 +112,22 @@ export default {
},
},
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( () => {
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
res.data.data.forEach((item) => {
this.weekData.time.unshift(item.pushTime)
this.weekData.local.unshift(item.localNums)
this.weekData.outer.unshift(item.nonlocalNums)
})
this.chartData = this.weekData
this.initCharts()
})
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
res.data.data.forEach((item) => {
this.monthData.time.unshift(item.pushTime)
this.monthData.local.unshift(item.localNums)
this.monthData.outer.unshift(item.nonlocalNums)
})
})
},
data() {
return {
@ -128,8 +135,18 @@ export default {
typeSelect:['近7天','近30天',],
typeSelectActive:'近7天',
},
cameraData: []
cameraData: [],
weekData:{
time:[],
local:[],
outer:[],
},
monthData:{
time:[],
local:[],
outer:[],
},
chartData:{},
};
},
methods: {
@ -148,10 +165,17 @@ export default {
},
typeSelect(item) {
this.filterButton.typeSelectActive = item
if(item == '近7天'){
this.chartData = this.weekData
}
if(item == '近30天'){
this.chartData = this.monthData
}
this.initCharts()
},
initCharts () {
console.log('this.chartData---', this.chartData)
const option = {
grid: {
bottom: 34,
@ -171,7 +195,7 @@ export default {
show: false,
},
boundaryGap: ['2%', '2%'],
data: ['1', '2', '3', '4', '5', '6', '7']
data: this.chartData.time
},
yAxis: [
{
@ -196,26 +220,7 @@ export default {
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: {
@ -230,7 +235,7 @@ export default {
series: [
{
name: '本地人数',
data: [60, 30, 60, 70, 40, 60, 70],
data: this.chartData.local,
type: 'bar',
symbol: 'none',
lineStyle: {
@ -252,7 +257,7 @@ export default {
},
{
name: '外地人数',
data: [30, 40, 50, 80, 90, 40, 60],
data: this.chartData.outer,
type: 'bar',
symbol: 'none',
lineStyle: {

41
src/views/pages/area/components/SiteList.vue
View File

@ -148,9 +148,9 @@ export default {
// 行点击
analyse(row) {
// bus.$emit("openCauseAnalysis", row);
this.$parent.hiMapFun.removerPolygon()
this.$parent.removeRoadCauseAnalysis()
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 = [{
@ -164,20 +164,29 @@ export default {
"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)
}
})
}
} else if(row.point) {
let arr = JSON.parse(row.point)
let areaLatLng = []
arr.forEach((item) => {
let lonLat = gcjLL2wgs84LL(item[0], item[1]);
areaLatLng.push([lonLat[1],lonLat[0]])
})
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
}
// 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() {

32
src/views/pages/area/components/StatisticalAnalysis.vue
View File

@ -75,7 +75,7 @@
<script>
import * as echarts from 'echarts'
import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
import { selectMonthAreaEvent, selectByAreaEvent, selectEventType } from "@/api/area";
export default {
data () {
return {
@ -148,6 +148,30 @@ import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
selectByAreaEvent(params).then((res) => {
this.totalEventCount = res.data.data.sum
});
selectEventType().then((res) => {
let tempArr = res.data.data || []
let arrLabel = []
let arrValue = []
tempArr.forEach(item => {
if(!arrLabel.length) {
arrLabel.push(item.eventNewName)
arrValue.push(item.number)
} else {
let existFlag = false
arrLabel.forEach((labelItem,labelIndex) => {
if(labelItem === item.eventNewName) {
existFlag = true
arrValue[labelIndex] += item.number
}
})
if(!existFlag) {
arrLabel.push(item.eventNewName)
arrValue.push(item.number)
}
}
})
this.initEventTypeCharts(arrLabel, arrValue)
});
selectMonthAreaEvent().then((res) => {
if(res.data.data && res.data.data.length) {
let xValue = []
@ -165,7 +189,7 @@ import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
this.$emit('closeDialog')
},
initEventTypeCharts () {
initEventTypeCharts (arrLabel, arrValue) {
const option = {
title: {
text: "事件类型分布",
@ -182,7 +206,7 @@ import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
},
xAxis: {
type: 'category',
data: ['非法运土', '工地扬尘', '其他'],
data: arrLabel,
axisLabel: {
color: '#fff',
margin: 7,
@ -202,7 +226,7 @@ import { selectMonthAreaEvent, selectByAreaEvent } from "@/api/area";
},
series: [
{
data: [120, 200, 150],
data: arrValue,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

48
src/views/pages/area/index.vue
View File

@ -116,6 +116,7 @@ import { selectByJdWd } from "@/api/construction/index";
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
import { selectByAreaEvent, selectKeyArea } from "@/api/area";
import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
// 时间轴
import HorizonTimeLine from './components/HorizonTimeLine'
export default {
@ -450,22 +451,36 @@ export default {
case "窗口单位":
this.hiMapFun.removeLayerByLayerName(item)
selectKeyArea({ type: item}).then((res) => {
const dataEvent = [];
res.data.data.forEach((item) => {
dataEvent.push(
{
latLng: { lat: item.latitude, lng: item.longitude },
data: item,
type: "site",
if(item === '商业街区') {
res.data.data.forEach((newItem) => {
if(newItem.point) {
let arr = JSON.parse(newItem.point)
let areaLatLng = []
arr.forEach((pointItem) => {
let lonLat = gcjLL2wgs84LL(pointItem[0], pointItem[1]);
areaLatLng.push([lonLat[1],lonLat[0]])
})
this.hiMapFun.addAreaToMap(areaLatLng)
}
)
})
this.hiMapFun.addPointsToMap(
dataEvent,
"poi-red.png",
item,
createImportantAreaPop
);
})
} else {
const dataEvent = [];
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:
@ -478,6 +493,9 @@ export default {
case "景区景点":
case "海水浴场":
case "窗口单位":
if(item === '商业街区') {
this.hiMapFun.removerPolygon()
}
this.hiMapFun.removeLayerByLayerName(item)
break;
case "AI事件":

5
src/views/pages/construction/components/SiteListPop.vue
View File

@ -311,10 +311,15 @@ export default {
// width: auto !important;
// }
.site-popup {
a.leaflet-popup-close-button {
top:120px;
}
.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);
position: relative;
top: 120px;
}
.leaflet-popup-content {
width: 734px !important;

2
src/views/pages/construction/index.vue
View File

@ -442,7 +442,7 @@ export default {
font-family: "Tensentype-ZhiHeiJ-W5";
}
.title::before {
content: "在建工地综合监管平台";
content: "工地扬尘噪音监管";
text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
position: absolute;
z-index: -1;