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

积水点区市分布、底部

This commit is contained in:
gaoyuanwei 2022-07-05 19:13:09 +08:00
parent 7c3a72bd3a
commit b8f970aeea
2 changed files with 441 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

370
src/views/pages/waterPoints/components/SiteList.vue
View File

@ -1,9 +1,11 @@
<template>
<div class="box">
<div class="title">工地列表</div>
<div class="title"><p>积水点市区分布</p><div class="bottomLine"></div></div>
<!-- 工地列表 -->
<div class="eventData">
<div style="display: flex;justify-content: space-between">
<div id="event-type-chart"></div>
<!-- <div style="display: flex;justify-content: space-between">
<el-input
placeholder="请输入工地名称"
prefix-icon="el-icon-search"
@ -55,75 +57,82 @@
</template>
</el-table-column>
</el-table>
</div>
</div> -->
</div>
</div>
</template>
<script>
import bus from "@/views/layout/bus";
import * as echarts from 'echarts'
import bus from '@/views/layout/bus'
import {
selectAllBuilding,
selectByProjectName,
selectDayAll,
selectWeekAll,
selectMonthAll,
} from "@/api/construction/index";
selectMonthAll
} from '@/api/construction/index'
export default {
data () {
return {
searchValue: "",
siteData: [],
siteDataAll: [],
selectSiteData: [],
InformationActiveName: "基本信息",
informationShow: false,
detailedInfToday: [],
detailedInfWeek: [],
detailedInfMonth: [],
dustActiveName: "今日",
// return {
// searchValue: '',
// siteData: [],
// siteDataAll: [],
// selectSiteData: [],
// InformationActiveName: '基本信息',
// informationShow: false,
// detailedInfToday: [],
// detailedInfWeek: [],
// detailedInfMonth: [],
// dustActiveName: '今日',
// options: [
// {
// value: '全部区市',
// label: '全部区市'
// }, {
// value: '市南区',
// label: '市南区'
// }, {
// value: '市北区',
// label: '市北区'
// }, {
// value: '崂山区',
// label: '崂山区'
// }, {
// value: '李沧区',
// label: '李沧区'
// }, {
// value: '即墨区',
// label: '即墨区'
// }, {
// value: '西海岸新区',
// label: '西海岸新区'
// }, {
// value: '城阳区',
// label: '城阳区'
// }, {
// value: '胶州市',
// label: '胶州市'
// }, {
// value: '平度市',
// label: '平度市'
// }, {
// value: '莱西市',
// label: '莱西市'
// }
// ],
// selectValue: ''
// }
return {
options: [
{
value: '全部区市',
label: '全部区市'
},{
value: '市南区',
label: '市南区'
}, {
value: '市北区',
label: '市北区'
}, {
value: '崂山区',
label: '崂山区'
}, {
value: '李沧区',
label: '李沧区'
}, {
value: '即墨区',
label: '即墨区'
},{
value: '西海岸新区',
label: '西海岸新区'
},{
value: '城阳区',
label: '城阳区'
},{
value: '胶州市',
label: '胶州市'
},{
value: '平度市',
label: '平度市'
},{
value: '莱西市',
label: '莱西市'
}
],
selectValue: ''
};
},
mounted () {
this.selectSiteByName();
this.initEventTypeCharts()
// this.selectSiteByName()
// bus.$off("mainClick")
// bus.$on("mainClick", (data) => {
// this.informationShow = true;
@ -148,99 +157,182 @@ export default {
// });
},
methods: {
// 查询所有工地
selectSiteByName() {
selectAllBuilding().then((res) => {
// console.log(res.data.data);
this.siteData = res.data.data
this.siteDataAll = res.data.data
});
initEventTypeCharts () {
const option = {
title: {
// text: '事件类型分布',
left: 'left',
top: 15,
textStyle: {
fontSize: 16,
color: '#fff',
fontWeight: 'normal'
}
},
grid: {
bottom: 40
},
xAxis: {
type: 'category',
data: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
axisLabel: {
color: '#fff',
margin: 7,
show: true,
interval: 0,
rotate: 30
},
axisLine: {
lineStyle: {
color: 'rgba(254, 125, 42,0.6)'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
show: false
},
series: [
{
data: [12, 10, 5, 8, 7, 9, 1, 2, 3, 2],
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)
}
}
// methods: {
// // 查询所有工地
// selectSiteByName () {
// selectAllBuilding().then((res) => {
// // console.log(res.data.data);
// this.siteData = res.data.data
// this.siteDataAll = res.data.data
// })
// },
searchSite() {
if (this.searchValue == "") {
this.siteData = this.siteDataAll;
} else {
const params = {
projectName: this.searchValue,
};
selectByProjectName(params).then((res) => {
this.siteData = res.data.data
});
}
},
// 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) {
console.log(val)
if (val == '全部区市') {
this.siteData = this.siteDataAll;
} else {
this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
// fliterSiteByArea (val) {
// console.log(val)
// if (val == '全部区市') {
// this.siteData = this.siteDataAll
// } else {
// this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
// }
// },
// // 行点击
// analyse (row) {
// bus.$emit('openCauseAnalysis', row)
// },
// // 关闭基本信息窗口
// informationClose () {
// this.informationShow = false
// },
// // 今日噪声及扬尘信息
// NoAndPMToday (data) {
// // 今日
// this.detailedInfToday = []
// const params = {
// projectName: data
// }
// selectDayAll(params).then((res) => {
// for (let i = 0; i < res.data.data.length; i++) {
// this.detailedInfToday.push(res.data.data[i])
// }
// })
// },
// // 近一周噪声及扬尘信息
// NoAndPMWeek (data) {
// // 近一周
// this.detailedInfWeek = []
// const params = {
// projectName: data
// }
// selectWeekAll(params).then((res) => {
// for (let i = 0; i < res.data.data.length; i++) {
// this.detailedInfWeek.push(res.data.data[i])
// }
// })
// },
// // 近一月噪声及扬尘信息
// NoAndPMMonth (data) {
// // 近一月
// this.detailedInfMonth = []
// const params = {
// projectName: data
// }
// selectMonthAll(params).then((res) => {
// for (let i = 0; i < res.data.data.length; i++) {
// this.detailedInfMonth.push(res.data.data[i])
// }
// })
// }
// }
}
},
// 行点击
analyse(row) {
bus.$emit("openCauseAnalysis", row);
},
// 关闭基本信息窗口
informationClose() {
this.informationShow = false;
},
// 今日噪声及扬尘信息
NoAndPMToday(data) {
// 今日
this.detailedInfToday = [];
const params = {
projectName: data,
};
selectDayAll(params).then((res) => {
for (let i = 0; i < res.data.data.length; i++) {
this.detailedInfToday.push(res.data.data[i]);
}
});
},
// 近一周噪声及扬尘信息
NoAndPMWeek(data) {
// 近一周
this.detailedInfWeek = [];
const params = {
projectName: data,
};
selectWeekAll(params).then((res) => {
for (let i = 0; i < res.data.data.length; i++) {
this.detailedInfWeek.push(res.data.data[i]);
}
});
},
// 近一月噪声及扬尘信息
NoAndPMMonth(data) {
// 近一月
this.detailedInfMonth = [];
const params = {
projectName: data,
};
selectMonthAll(params).then((res) => {
for (let i = 0; i < res.data.data.length; i++) {
this.detailedInfMonth.push(res.data.data[i]);
}
});
},
},
};
</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;
padding: 0px 0 18px 0px;
.title {
color: #fff;
font-size: 20px;
background: linear-gradient( to right, rgba(27, 103, 176, 1), rgba(27, 103, 176, 0) );
p{
padding: 5px;
}
::v-deep .eventData {
width: 368px;
.bottomLine{
width: 100%;
height: 5px;
background: linear-gradient( to right, rgba(55, 185, 192, 1), rgba(55, 185, 192, 0) );
}
}
.eventData {
width: 100%;
margin-top: 14px;
.el-input {
width: 200px;
@ -264,6 +356,12 @@ export default {
width: 161px;
}
}
#event-type-chart,#event-state-chart {
width: 100%;
height: 207px;
display: flex;
justify-content: center;
}
}
::v-deep .eventNoise {

336
src/views/pages/waterPoints/index.vue
View File

@ -56,11 +56,23 @@
<site-list></site-list>
</div>
<!-- 事件多选 -->
<div class="eventSelection">
<el-checkbox-group v-model="eventCheckList">
<el-checkbox label="影响车辆(>30cm)"></el-checkbox>
<el-checkbox label="影响行人(<30cm)"></el-checkbox>
<el-checkbox label="无积水(<10cm)"></el-checkbox>
</el-checkbox-group>
<i class="eventSelectionIcon"></i>
<i class="eventSelectionIcon"></i>
<i class="eventSelectionIcon"></i>
</div>
<div class="changeLayer">
<div class="title">地图显示</div>
<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-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></el-checkbox-button>
</el-checkbox-group>
</div>
</div>
@ -69,222 +81,208 @@
</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';
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, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
export default {
data () {
return {
hiMap: new HieimpMap(), // 地图全局对象
mapId: "map-single", // 地图容器的id
mapId: 'map-single', // 地图容器的id
state: "",
state: '',
constructionSiteData: [],
changeLayerBtnList: ['AI事件','视频监控','工地','道路'],
changeLayerBtnList: ['视频监控', '积水点'],
changeLayerBtnGroup: [],
eventCheckList: []
};
}
},
components: {
TiledMap,
complaintEvent,
VideoList,
SiteList,
SiteList
},
created () {},
mounted () {
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
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) => {
bus.$off('openCauseAnalysis')
bus.$on('openCauseAnalysis', (row) => {
// this.timeRegion = data.data.dt;
// this.hiMapFun.removerPolygon();
this.hiMapFun.removeLayerByLayerName("constructionSite");
this.hiMapFun.removeLayerByLayerName('constructionSite')
// debugger
// this.circle(latLng);
this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd });
this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd })
// this.WithinRadiusSite(latLng);
let dataEvent = [{
const dataEvent = [{
latLng: { lat: row.wd, lng: row.jd },
data: row,
type: "site",
type: 'site'
}]
this.hiMapFun.addPointsToMap(
dataEvent,
"construction.png",
"constructionSite",
'construction.png',
'constructionSite',
createSiteListPop
);
});
bus.$off("roadOnMap");
bus.$on("roadOnMap",(roadData) => {
this.roadOnMap(roadData);
)
})
bus.$off("removeCameraLayer");
bus.$on("removeCameraLayer",(type) => {
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);
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);
});
cb(res.data.suggestions)
})
}
},
handleSelect (item) {
this.hiMapFun.clearAllLayers();
const arr = item.detail.location.split(",");
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]);
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"
);
'poi-red.png',
'address'
)
// this.timer = setTimeout(() => {
// this.addResourceTomap("全部", this.cameraAllData);
// }, 1000);
},
// 圈选查询
circle (latlng) {
this.hiMapFun.addCircleToMap(latlng, 3500);
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 = [];
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"];
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",
});
type: 'site'
})
}
});
})
this.hiMapFun.addPointsToMap(
dataEvent,
"construction.png",
"constructionSite",
'construction.png',
'constructionSite',
createSiteListPop
);
)
},
// 路网上图
roadOnMap (roadData) {
roadData.forEach((item) => {
let newPoint = JSON.parse(item.points);
const newPoint = JSON.parse(item.points)
newPoint[0].map((Point) => {
Point.reverse();
});
item.pm10 = Number(item.pm10);
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;
case item.pm10 > 0 && item.pm10 <= 50:
this.hiMapFun.addPathToMap(newPoint, '#36fe78')
break
case item.pm10 > 50 && item.pm10 <= 150:
this.hiMapFun.addPathToMap(newPoint, '#fde202')
break
case item.pm10 > 150 && item.pm10 <= 250:
this.hiMapFun.addPathToMap(newPoint, '#feb403')
break
case item.pm10 > 250 && item.pm10 <= 350:
this.hiMapFun.addPathToMap(newPoint, '#fd8402')
break
case item.pm10 > 350 && item.pm10 <= 420:
this.hiMapFun.addPathToMap(newPoint, '#fd4302')
break
case item.pm10 > 420 && item.pm10 <= 500:
this.hiMapFun.addPathToMap(newPoint, '#fd0202')
break
case item.pm10 > 500 && item.pm10 <= 600:
this.hiMapFun.addPathToMap(newPoint, '#a80101')
break
case item.pm10 > 600 && item.pm10 <= 700:
this.hiMapFun.addPathToMap(newPoint, '#690000')
break
default:
this.hiMapFun.addPathToMap(newPoint, "#36fe78");
break;
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;
case '视频监控':
// this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
break
case '积水点':
break
default:
break;
break
}
} else {
switch (item) {
case "道路":
this.hiMapFun.removerPolyline();
break;
case "AI事件":
break;
case "视频监控":
this.hiMapFun.removeLayerByLayerName('全部')
break;
case "工地":
break;
case '视频监控':
// this.hiMapFun.removeLayerByLayerName('全部')
break
case '积水点':
break
default:
break;
break
}
}
},
addResourceTomap (type, data) {
const dataEvent = [];
const dataEvent = []
data.forEach((item) => {
const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.gpsX) == -1) {
@ -292,15 +290,14 @@ export default {
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item,
type: 'videoSurveillance'
});
})
}
})
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
}
});
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
},
},
beforeDestroy() {},
};
beforeDestroy () {}
}
</script>
<style scoped lang="scss">
@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
@ -446,7 +443,7 @@ export default {
right: 8px;
top: 562px;
width: 398px;
height:500px;
// height:500px;
background: rgba($color: #05213b, $alpha: .85);
}
@ -469,40 +466,71 @@ export default {
line-height: 67px;
}
.change-btn-box {
height: 42px;
height: 67px;
line-height: 67px;
width: 230px;
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-button__inner{
padding: 6px 14px;
border: 0;
border-radius: 10px;
}
.el-checkbox-button:first-child .el-checkbox-button__inner{
margin-right: 10px;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner{
background: #027DB4;
color: #ffffff;
box-shadow: unset;
}
}
}
}
.eventSelection{
width: 170px;
height: 100px;
background: rgba(7, 26, 44, 0.8);
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
z-index: 1000;
::v-deep .el-checkbox__label{
color: #ffffff;
}
::v-deep .el-checkbox{
margin:0 15px;
.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;
}
margin-right: 15px;
}
}
.eventSelectionIcon{
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
background: red;
position: absolute;
left: 34.5px;
top: 21px;
}
.eventSelectionIcon:nth-child(2){
background: yellow;
position: absolute;
left: 34.5px;
top: 42px;
}
.eventSelectionIcon:nth-child(3){
background: green;
position: absolute;
left: 34.5px;
top: 63px;
}
}
}