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

积水点bug

This commit is contained in:
851673013@qq.com 2022-09-19 15:26:35 +08:00
parent 8631642603
commit 4f7290c1d5
2 changed files with 176 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/views/pages/waterPoints/components/VideoList.vue
View File

@ -35,20 +35,26 @@
</div>
<div id="analysis-of-water-source"></div>
<div class="water-point-reporting-title">
<div class="water-point-reporting-title-top">易积水点市区分布</div>
<div class="water-point-reporting-title-top">
易积水点市区分布 (水务局)
</div>
<!-- <div class="water-point-reporting-title-top">积水点级别分析</div> -->
<div class="water-point-reporting-title-bottom"></div>
</div>
<!-- <div id="analysis-of-water-level"></div> -->
<div id="event-type-chart"></div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import * as echarts from 'echarts'
import { selectCountWaters, selectCountLevel, selectWaterPoliceList, selectCountWater } from '@/api/waterPoints'
import {
selectCountWaters,
selectCountLevel,
selectWaterPoliceList,
selectCountWater
} from '@/api/waterPoints'
export default {
data () {
@ -135,9 +141,19 @@ export default {
name: '影响车辆'
}
],
district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
district: [
'市南区',
'市北区',
'李沧区',
'崂山区',
'城阳区',
'西海岸新区',
'即墨区',
'莱西市',
'胶州市',
'平度市'
],
districtData: []
}
},
mounted () {
@ -313,7 +329,7 @@ export default {
normal: {
show: (function (value) {
if (value == 0) return false
}()),
})(),
position: 'inner'
}
},
@ -349,7 +365,18 @@ export default {
},
xAxis: {
type: 'category',
data: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
data: [
'市南区',
'市北区',
'李沧区',
'崂山区',
'城阳区',
'西海岸新区',
'即墨区',
'莱西市',
'胶州市',
'平度市'
],
axisLabel: {
color: '#fff',
margin: 7,
@ -375,21 +402,27 @@ export default {
data: this.districtData,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
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, [{
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: {
@ -397,7 +430,9 @@ export default {
position: 'inside',
distance: 0,
formatter: function (param) {
if (param.value > 0) { return param.value } else return ''
if (param.value > 0) {
return param.value
} else return ''
},
textStyle: {
color: '#fff',
@ -412,7 +447,6 @@ export default {
)
eventType.setOption(option)
}
}
}
</script>
@ -430,7 +464,7 @@ export default {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Tensentype-ZhiHeiJ-W5";
font-family: 'Tensentype-ZhiHeiJ-W5';
}
.time {
text-align: left;

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

@ -26,10 +26,10 @@
>
<template slot-scope="{ item }">
<div style="margin-bottom: -10px" class="name">
{{ item.text || "" }}
{{ item.text || '' }}
</div>
<span style="font-size: 10px; color: #afbcc5">{{
item.detail.address || ""
item.detail.address || ''
}}</span>
</template>
<!-- <template slot="append">搜索</template> -->
@ -47,11 +47,20 @@
</div>
<!-- 事件多选 -->
<div class="eventSelection">
<div class="eventSelection" v-if="eventSelectionShow">
<el-checkbox-group v-model="eventCheckList">
<el-checkbox label="影响车辆(>30cm)" @change="selectType('影响车辆(>30cm)')"></el-checkbox>
<el-checkbox label="影响行人(<30cm)" @change="selectType('影响行人(<30cm)')"></el-checkbox>
<el-checkbox label="无积水或少量积水(<10cm)" @change="selectType('无积水或少量积水(<10cm)')"></el-checkbox>
<el-checkbox
label="影响车辆(>30cm)"
@change="selectType('影响车辆(>30cm)')"
></el-checkbox>
<el-checkbox
label="影响行人(<30cm)"
@change="selectType('影响行人(<30cm)')"
></el-checkbox>
<el-checkbox
label="无积水或少量积水(<10cm)"
@change="selectType('无积水或少量积水(<10cm)')"
></el-checkbox>
</el-checkbox-group>
<i class="eventSelectionIcon"></i>
<i class="eventSelectionIcon"></i>
@ -68,14 +77,20 @@
<site-list></site-list>
</div>
<!-- <div class="changeLayer">
<div class="title">地图图层</div>
<div class="changeLayer">
<div class="title">地图图层:</div>
<div class="change-btn-box">
<el-checkbox-group v-model="changeLayerBtnGroup">
<el-checkbox-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></el-checkbox-button>
<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> -->
</div>
<video-play
v-if="openVideo"
@ -96,7 +111,11 @@ import complaintEvent from './components/ComplaintEvent'
import VideoList from './components/VideoList'
import SiteList from './components/SiteList'
import { selectByJdWd } from '@/api/construction/index'
import { createSiteListPop, createCameraDetailsPop, createWaterPointPop } from '@/supermap/createMarkerPopup'
import {
createSiteListPop,
createCameraDetailsPop,
createWaterPointPop
} from '@/supermap/createMarkerPopup'
import VideoPlay from './components/VideoPlay'
export default {
@ -104,16 +123,19 @@ export default {
return {
hiMap: new HieimpMap(), // 地图全局对象
mapId: 'map-single', // 地图容器的id
eventSelectionShow: false,
state: '',
constructionSiteData: [],
// changeLayerBtnList: ['视频监控', '易积水点'],
changeLayerBtnList: ['易积水点'],
changeLayerBtnGroup: [],
eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'],
eventCheckList: [
'影响车辆(>30cm)',
'影响行人(<30cm)',
'无积水或少量积水(<10cm)'
],
openVideo: false,
channelCode: []
}
},
components: {
@ -139,11 +161,13 @@ export default {
bus.$on('openCauseAnalysis', (row) => {
this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd })
// this.WithinRadiusSite(latLng);
const dataEvent = [{
const dataEvent = [
{
latLng: { lat: row.wd, lng: row.jd },
data: row,
type: 'site'
}]
}
]
this.hiMapFun.addPointsToMap(
dataEvent,
'construction.png',
@ -177,7 +201,10 @@ export default {
bus.$off('openWaterPointDialog')
bus.$on('openWaterPointDialog', (item) => {
this.hiMap.mapObj.map.flyTo({ lat: item.latitude, lng: item.longitude }, 16)
this.hiMap.mapObj.map.flyTo(
{ lat: item.latitude, lng: item.longitude },
16
)
// this.WithinRadiusSite(latLng);
// const dataEvent = [{
// latLng: { lat: item.latitude, lng: item.longitude },
@ -193,7 +220,7 @@ export default {
})
bus.$off('openCurrentVideoWaterPoint')
bus.$on('openCurrentVideoWaterPoint', channelCode => {
bus.$on('openCurrentVideoWaterPoint', (channelCode) => {
this.openVideo = true
this.channelCode.unshift(channelCode)
})
@ -332,6 +359,7 @@ export default {
// this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
break
case '易积水点':
this.eventSelectionShow = !this.eventSelectionShow
break
default:
break
@ -342,6 +370,7 @@ export default {
// this.hiMapFun.removeLayerByLayerName('全部')
break
case '易积水点':
this.eventSelectionShow = !this.eventSelectionShow
break
default:
break
@ -361,7 +390,12 @@ export default {
})
}
})
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
dataEvent,
'videoSurveillance.png',
type,
createCameraDetailsPop
)
},
waterPointOnMap (data) {
@ -380,28 +414,40 @@ export default {
switch (item.pointLevel) {
case 'non':
dataEvent1.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
latLng: {
lat: Number(item.latitude),
lng: Number(item.longitude)
},
data: item,
type: 'waterPoint'
})
break
case 'pedestrian':
dataEvent2.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
latLng: {
lat: Number(item.latitude),
lng: Number(item.longitude)
},
data: item,
type: 'waterPoint'
})
break
case 'traffic':
dataEvent3.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
latLng: {
lat: Number(item.latitude),
lng: Number(item.longitude)
},
data: item,
type: 'waterPoint'
})
break
default:
dataEvent4.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
latLng: {
lat: Number(item.latitude),
lng: Number(item.longitude)
},
data: item,
type: 'waterPoint'
})
@ -409,10 +455,30 @@ export default {
}
}
})
this.hiMapFun.addPointsToMap(dataEvent1, 'waterPoint1.png', 'waterPoint1', createWaterPointPop)
this.hiMapFun.addPointsToMap(dataEvent2, 'waterPoint2.png', 'waterPoint2', createWaterPointPop)
this.hiMapFun.addPointsToMap(dataEvent3, 'waterPoint3.png', 'waterPoint3', createWaterPointPop)
this.hiMapFun.addPointsToMap(dataEvent4, 'waterPoint4.png', 'waterPoint4', createWaterPointPop)
this.hiMapFun.addPointsToMap(
dataEvent1,
'waterPoint1.png',
'waterPoint1',
createWaterPointPop
)
this.hiMapFun.addPointsToMap(
dataEvent2,
'waterPoint2.png',
'waterPoint2',
createWaterPointPop
)
this.hiMapFun.addPointsToMap(
dataEvent3,
'waterPoint3.png',
'waterPoint3',
createWaterPointPop
)
this.hiMapFun.addPointsToMap(
dataEvent4,
'waterPoint4.png',
'waterPoint4',
createWaterPointPop
)
},
selectType (item) {
@ -426,8 +492,8 @@ export default {
@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
@font-face {
font-family: "Tensentype-ZhiHeiJ-W5";
src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
font-family: 'Tensentype-ZhiHeiJ-W5';
src: url('../../../assets/construction/TTZhiHeiJ-W5.ttf');
}
.map-box {
width: 100%;
@ -446,7 +512,7 @@ export default {
z-index: 1000;
width: 100%;
height: 166px;
background: url("~@/assets/construction/title.png") no-repeat;
background: url('~@/assets/construction/title.png') no-repeat;
text-align: center;
.title {
font-size: 46px;
@ -455,10 +521,10 @@ export default {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Tensentype-ZhiHeiJ-W5";
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;
@ -571,7 +637,7 @@ export default {
}
.changeLayer {
width: 332px;
// width: 332px;
height: 67px;
background: rgba(7, 26, 44, 0.8);
position: absolute;
@ -591,7 +657,7 @@ export default {
.change-btn-box {
height: 67px;
line-height: 67px;
width: 230px;
// width: 230px;
padding-left: 20px;
::v-deep .el-checkbox-group {
@ -663,7 +729,7 @@ export default {
}
}
</style>
<style lang='scss'>
<style lang="scss">
// ::-webkit-scrollbar {
// width: 8px;
// background: rgba(255, 255, 255, 0.1);