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

前端页面优化

This commit is contained in:
gaoyuanwei 2022-09-09 10:54:50 +08:00
parent 3aa1284cfb
commit ac15b43e98
8 changed files with 491 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/supermap/image/waterPoint4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

20
src/supermap/map-showResource.js
View File

@ -19,18 +19,18 @@ const restoreIconObj = {
restoreIcon: null,
currentLayer: null
}
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const progress = document.getElementById('progress')
const progressBar = document.getElementById('progress-bar')
function updateProgressBar(processed, total, elapsed, layersArray) {
if (elapsed > 1000) {
// if it takes more than a second to load, display the progress bar:
progress.style.display = 'block';
progressBar.style.width = Math.round(processed/total*100) + '%';
progress.style.display = 'block'
progressBar.style.width = Math.round(processed / total * 100) + '%'
}
if (processed === total) {
// all markers processed - hide the progress bar:
progress.style.display = 'none';
progress.style.display = 'none'
}
}
/**
@ -564,7 +564,7 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
// layers = createMarkerClusterLayer(defaultStyle)
const icon = createDefaultFeatureStyle({
img: url || 'the-head.png',
iconSize: url == ('construction.png'||url == 'waterPoint2.png'||url == 'waterPoint1.png'||url == 'waterPoint3.png')?[37,49]:[36, 36],
iconSize: url == ('construction.png' || url == 'waterPoint2.png' || url == 'waterPoint1.png' || url == 'waterPoint3.png' || url == 'waterPoint4.png') ? [37, 49] : [36, 36]
})
const arr = []
features.map((feature, index) => {
@ -583,13 +583,13 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
const elementHtml = createPopupFun(feature)
if (elementHtml) {
if (feature.type == 'road') {
L.popup({ className: 'roadGovernance-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
L.popup({ className: 'roadGovernance-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
} else if (feature.type == 'site') {
L.popup({ className: 'site-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
L.popup({ className: 'site-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
} else if (feature.type == 'siteRoad') {
L.popup({ className: 'site-road-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
L.popup({ className: 'site-road-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
} else if (feature.type == 'waterPoint') {
L.popup({ className: 'water-point-pop', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
L.popup({ className: 'water-point-pop', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
} else {
L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
}

94
src/views/pages/waterPoints/components/ComplaintEvent.vue
View File

@ -23,7 +23,14 @@
</div>
</div>
</div>
<div class="allNum">总数：{{allNum}}个</div>
<div class="allNum"><div>总数：{{allNum}}个</div>
<div v-if="tabsActiveName==='群众上报'">
<el-radio-group v-model="reportType" @change="reportTypeChange">
<el-radio-button label="随手拍"></el-radio-button>
<el-radio-button label="爱山东"></el-radio-button>
</el-radio-group>
</div>
</div>
<div class="filter-btn-box">
<div class="filter-btn-processStateSelect">
<div class="processStateSelect-btn"
@ -94,25 +101,25 @@ export default {
{
title: '智能算法识别',
id: 'video'
},
{
title: '城管局',
id: 'case'
}
// {
// title: '城管局',
// id: 'case'
// }
// {
// title:'水务集团',
// id:'null'
// },
],
tabsActiveName: '全部',
tabsActiveName: '水务局',
statisticalAnalysisIsShow: false,
filterButton: {
typeSelect: ['事件', '事件1'],
typeSelectActive: '事件',
type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'],
processStateSelect: ['全部', '未派发', '未处置', '已处置'],
processStateSelectActive: '全部',
typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)']
},
eventListData: [],
preTime: '',
@ -130,7 +137,8 @@ export default {
listAll: [],
policeList: [],
// 单项总数
allNum: 0
allNum: 0,
reportType: '随手拍'
}
},
components: {
@ -161,10 +169,18 @@ export default {
selectWaterPoliceList().then((policeRes) => {
this.policeList = policeRes.data.data || []
const dataAll = [...res.data.data, ...policeRes.data.data]
this.list = dataAll
// this.list = dataAll
this.listAll = dataAll
this.allNum = this.listAll.length
// bus.$emit('waterPoint', dataAll)
this.list = []
this.listAll.forEach(tempItem => {
if (tempItem.reportOrigin === 'auditorReport') {
this.list.push(tempItem)
}
})
this.allNum = this.list.length
bus.$emit('waterPoint', dataAll)
bus.$emit('waterPoint', this.list)
})
// this.list = res.data.data
// this.listAll = res.data.data
@ -187,7 +203,7 @@ export default {
return `影响行人(${deepth}cm)`
break
default:
return `无积水(${deepth}cm)`
return `无积水或少量积水(${deepth}cm)`
break
}
},
@ -204,7 +220,7 @@ export default {
case '影响行人(<30cm)':
this.list = this.list.filter(v => v.pointLevel != 'pedestrian')
break
case '无积水(<10cm)':
case '无积水或少量积水(<10cm)':
this.list = this.list.filter(v => v.pointLevel != 'non')
break
}
@ -221,7 +237,7 @@ export default {
case '影响行人(<30cm)':
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian'))
break
case '无积水(<10cm)':
case '无积水或少量积水(<10cm)':
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non'))
break
}
@ -234,7 +250,7 @@ export default {
tabHandleClick (item) {
this.allNum = 0
this.tabsActiveName = item.title
this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)']
if (item.title == '全部') {
selectWaterPoint().then((res) => {
@ -259,6 +275,20 @@ export default {
})
this.allNum = this.list.length
bus.$emit('waterPoint', this.list)
} else if (item.id == 'commonReport') {
if (this.reportType == '随手拍') {
selectReportOrigin({ reportOrigin: 'case' }).then((res) => {
this.list = res.data.data
this.allNum = this.list.length
bus.$emit('waterPoint', res.data.data)
})
} else if (this.reportType == '爱山东') {
selectReportOrigin({ reportOrigin: 'commonReport' }).then((res) => {
this.list = res.data.data
this.allNum = this.list.length
bus.$emit('waterPoint', res.data.data)
})
}
} else {
selectReportOrigin({ reportOrigin: item.id }).then((res) => {
this.list = res.data.data
@ -356,6 +386,14 @@ export default {
openDialog (item) {
bus.$emit('openWaterPointDialog', item)
},
// 爱山东、随手拍
reportTypeChange (item) {
this.reportType = item
this.tabHandleClick({
title: '群众上报',
id: 'commonReport'
})
}
}
}
@ -504,6 +542,21 @@ export default {
.allNum {
color: #ffffff;
margin: 12px 0px 0 12px;
display: flex;
justify-content: space-between;
::v-deep .el-radio-button__inner {
background: rgba(24, 51, 76, 0.95);
color: #ffffff;
border: none;
width: 70px;
padding: 6px;
border-radius: 2px;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: #279ff5;
border: none;
margin-right: 2px;
}
}
.filter-btn-box {
margin-top: 16px;
@ -701,13 +754,13 @@ export default {
.box3 {
color: #fff;
margin-top: 10px;
height: 600px;
height: 565px;
overflow-y: scroll;
cursor: pointer;
.item {
margin-top: 10px;
margin-top: 8px;
background: rgba(5, 33, 59, 0.35);
padding: 10px;
padding: 6px 10px;
.top {
display: flex;
justify-content: space-between;
@ -716,7 +769,7 @@ export default {
}
.name {
font-weight: 600;
font-size: 14px;
font-size: 16px;
}
.topType {
margin-left: 5px;
@ -743,6 +796,9 @@ export default {
.green {
background: #31d779;
}
.type {
font-size: 14px;
}
}
.bottom {
margin-top: 10px;

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

@ -1,9 +1,11 @@
<template>
<div class="box">
<div class="title"><p>易积水点市区分布</p><div class="bottomLine"></div></div>
<div class="title"><p>积水点级别分析</p><div class="bottomLine"></div></div>
<!-- <div class="title"><p>易积水点市区分布</p><div class="bottomLine"></div></div> -->
<!-- 工地列表 -->
<div class="eventData">
<div id="event-type-chart"></div>
<!-- <div id="event-type-chart"></div> -->
<div id="analysis-of-water-level"></div>
<!-- <div style="display: flex;justify-content: space-between">
<el-input
@ -72,7 +74,7 @@ import {
selectWeekAll,
selectMonthAll
} from '@/api/construction/index'
import { selectCountWater } from '@/api/waterPoints'
import { selectCountWater, selectCountLevel } from '@/api/waterPoints'
export default {
data () {
@ -127,27 +129,60 @@ export default {
// selectValue: ''
// }
return {
district:['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
districtData: [],
// district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
// districtData: []
rank: [
{
value: 0,
unit: '个',
name: '无积水或少量积水'
},
{
value: 0,
unit: '个',
name: '影响行人'
},
{
value: 0,
unit: '个',
name: '影响车辆'
}
]
}
},
created () {
},
mounted () {
selectCountWater().then((res) => {
this.district.map((district) => {
let eligibility = res.data.data.find((data) => {
return district == data.ssqy
})
if(eligibility){
this.districtData.push(eligibility.count)
} else {
this.districtData.push(0)
// selectCountWater().then((res) => {
// this.district.map((district) => {
// const eligibility = res.data.data.find((data) => {
// return district == data.ssqy
// })
// if (eligibility) {
// this.districtData.push(eligibility.count)
// } else {
// this.districtData.push(0)
// }
// })
// this.initEventTypeCharts()
// })
selectCountLevel().then((res) => {
res.data.data.forEach((item) => {
// 无积水
if (item.pointLevel == 'non') {
this.rank[0].value = item.count
}
// 影响行人
if (item.pointLevel == 'pedestrian') {
this.rank[1].value = item.count
}
// 影响车辆
if (item.pointLevel == 'traffic') {
this.rank[2].value = item.count
}
})
this.initEventTypeCharts()
this.initEventTypeCharts2()
})
// this.selectSiteByName()
@ -189,7 +224,7 @@ export default {
},
grid: {
bottom: 30,
top:10,
top: 10
},
xAxis: {
type: 'category',
@ -241,9 +276,7 @@ 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',
@ -257,6 +290,73 @@ export default {
document.getElementById('event-type-chart')
)
eventType.setOption(option)
},
initEventTypeCharts2 () {
const legend1 = this.rank.map((v) => v.name)
const legendData = [...legend1]
const option = {
color: ['#31d779', '#ffae2b', '#f74b3f'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
grid: {
// height: '10px'
},
legend: {
width: '30%',
left: 'left',
top: 'center',
textStyle: {
color: '#fff'
}
},
// itemStyle: {
// normal: {
// borderWidth: 2
// },
// label: {
// textStyle: {
// color: 'black',
// fontSize: 14,
// fontWeight: 'bolder'
// }
// }
// },
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
series: [
{
name: '',
type: 'pie',
radius: ['45%', '80%'],
label: {
normal: {
show: (function (value) {
if (value == 0) return false
}()),
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data: this.rank
}
]
}
const eventType = echarts.init(
document.getElementById('analysis-of-water-level')
)
eventType.setOption(option)
}
}
// methods: {
@ -347,14 +447,23 @@ export default {
padding: 0px 0 18px 0px;
.title {
color: #fff;
background: linear-gradient( to right, rgba(27, 103, 176, 1), rgba(27, 103, 176, 0) );
font-weight: bold;
background: linear-gradient(
to right,
rgba(27, 103, 176, 1),
rgba(27, 103, 176, 0)
);
p {
padding: 5px;
}
.bottomLine {
width: 100%;
height: 5px;
background: linear-gradient( to right, rgba(55, 185, 192, 1), rgba(55, 185, 192, 0) );
background: linear-gradient(
to right,
rgba(55, 185, 192, 1),
rgba(55, 185, 192, 0)
);
}
}
.eventData {
@ -364,16 +473,16 @@ export default {
width: 200px;
}
.el-input__inner {
border: 1px solid rgba(31,254,253,.9);
border: 1px solid rgba(31, 254, 253, 0.9);
color: #fff;
background: rgba($color: #203b5d, $alpha: .8);
background: rgba($color: #203b5d, $alpha: 0.8);
border-radius: unset;
&::placeholder {
color: rgba($color: #fff, $alpha: 0.6);
}
}
.el-input__prefix {
color: rgba(31,254,253,.9);
color: rgba(31, 254, 253, 0.9);
}
.el-select {
@ -382,12 +491,18 @@ export default {
width: 161px;
}
}
#event-type-chart,#event-state-chart {
#event-type-chart,
#event-state-chart {
width: 100%;
height: 207px;
display: flex;
justify-content: center;
}
#analysis-of-water-level {
width: 100%;
height: 165px;
margin: 22px;
}
}
::v-deep .eventNoise {
@ -395,7 +510,8 @@ export default {
.el-table {
border: 1px solid #325d94;
width: 100%;
th,td {
th,
td {
border-right: 1px solid #325d94 !important;
}
// .descending.is-leaf.is-sortable {

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

@ -35,11 +35,12 @@
</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="analysis-of-water-level"></div> -->
<div id="event-type-chart"></div>
</div>
</div>
@ -47,7 +48,7 @@
<script>
import moment from 'moment'
import * as echarts from 'echarts'
import { selectCountWaters,selectCountLevel, selectWaterPoliceList } from '@/api/waterPoints'
import { selectCountWaters, selectCountLevel, selectWaterPoliceList, selectCountWater } from '@/api/waterPoints'
export default {
data () {
@ -80,24 +81,24 @@ export default {
}
],
source: [
{
value: 0,
unit: '个',
name: '水务集团上报',
id:'auditorReport'
},
// {
// value: 0,
// unit: '个',
// name: '水务集团上报',
// id:'auditorReport'
// },
{
value: 0,
unit: '个',
name: '群众上报',
id: 'commonReport'
},
{
value: 0,
unit: '个',
name: '城管局',
id:'case'
},
// {
// value: 0,
// unit: '个',
// name: '城管局',
// id:'case'
// },
{
value: 0,
unit: '个',
@ -108,7 +109,7 @@ export default {
value: 0,
unit: '个',
name: '水务局',
id:'null'
id: 'auditorReport'
},
{
value: 0,
@ -121,7 +122,7 @@ export default {
{
value: 0,
unit: '个',
name: '无积水'
name: '无积水或少量积水'
},
{
value: 0,
@ -132,33 +133,34 @@ export default {
value: 0,
unit: '个',
name: '影响车辆'
},
]
}
],
district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
districtData: []
}
},
mounted () {
selectCountWaters().then((res) => {
res.data.data.forEach((item) => {
if(item.reportOrigin == 'null') {
// if(item.reportOrigin == 'null') {
// this.source[0].value = item.count
// }
if (item.reportOrigin == 'commonReport') {
this.source[0].value = item.count
}
if(item.reportOrigin == 'commonReport') {
// if(item.reportOrigin == 'case') {
// this.source[2].value = item.count
// }
if (item.reportOrigin == 'video') {
this.source[1].value = item.count
}
if(item.reportOrigin == 'case') {
this.source[2].value = item.count
}
if(item.reportOrigin == 'video') {
this.source[3].value = item.count
}
if (item.reportOrigin == 'auditorReport') {
this.source[4].value = item.count
this.source[2].value = item.count
}
})
selectWaterPoliceList().then((policeRes) => {
this.source[5].value = policeRes.data.data.length
this.source[3].value = policeRes.data.data.length
this.initEventTypeCharts()
})
})
@ -180,7 +182,19 @@ export default {
})
this.initEventTypeCharts2()
})
selectCountWater().then((res) => {
this.district.map((district) => {
const eligibility = res.data.data.find((data) => {
return district == data.ssqy
})
if (eligibility) {
this.districtData.push(eligibility.count)
} else {
this.districtData.push(0)
}
})
this.initEventTypeCharts3()
})
},
methods: {
// 积水点来源分析charts图
@ -188,7 +202,7 @@ export default {
const legend1 = this.source.map((v) => v.name)
const legendData = [...legend1]
const option = {
color: ['#24a9ff', '#6873ff', '#4df6f7', '#3ee79d','#b7baff'],
color: ['#4df6f7', '#3ee79d', '#6873ff', '#24a9ff', '#b7baff'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
@ -201,8 +215,8 @@ export default {
left: 'left',
top: 'center',
textStyle: {
color: '#fff',
},
color: '#fff'
}
},
// itemStyle: {
// normal: {
@ -233,7 +247,7 @@ export default {
normal: {
position: 'inner',
show: false
},
}
},
labelLine: {
normal: {
@ -267,8 +281,8 @@ export default {
left: 'left',
top: 'center',
textStyle: {
color: '#fff',
},
color: '#fff'
}
},
// itemStyle: {
// normal: {
@ -297,9 +311,9 @@ export default {
radius: ['45%', '80%'],
label: {
normal: {
show: function(value) {
show: (function (value) {
if (value == 0) return false
}(),
}()),
position: 'inner'
}
},
@ -316,7 +330,89 @@ export default {
document.getElementById('analysis-of-water-level')
)
eventType.setOption(option)
},
initEventTypeCharts3 () {
const option = {
title: {
// text: '事件类型分布',
left: 'left',
top: 15,
textStyle: {
fontSize: 16,
color: '#fff',
fontWeight: 'normal'
}
},
grid: {
bottom: 30,
top: 10
},
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: this.districtData,
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: 'inside',
distance: 0,
formatter: function (param) {
if (param.value > 0) { return param.value } else return ''
},
textStyle: {
color: '#fff',
fontSize: 12
}
}
}
]
}
const eventType = echarts.init(
document.getElementById('event-type-chart')
)
eventType.setOption(option)
}
}
}
</script>
@ -334,7 +430,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;
@ -414,13 +510,19 @@ export default {
}
& > div:last-child {
width: 40%;
height: 165px;
// height: 165px;
}
}
#analysis-of-water-source,#analysis-of-water-level {
#analysis-of-water-source,
#analysis-of-water-level {
width: 100%;
height: 165px;
margin: 22px;
}
#event-type-chart {
width: 100%;
height: 207px;
margin: 22px 0;
}
}
</style>

2
src/views/pages/waterPoints/components/WaterHistory.vue
View File

@ -90,7 +90,7 @@ export default {
selectWaterPondingInDay({ water_point_id: this.feature.data.waterPointId, year: String(this.dateYearData[0]), month: String(this.dateYearData[1]), day: String(this.dateYearData[2]) }).then((res) => {
console.log(res.data.data, 'res')
res.data.data.map(val => {
this.depthDayX.push(val.hour + ':' + val.minute)
this.depthDayX.push((val.hour > 9 ? val.hour : '0' + val.hour) + ':' + (val.minute > 9 ? val.minute : '0' + val.minute))
this.depthDayY.push(Number(val.depth) * 100)
})
console.log(this.depthDayX, this.depthDayY, ' this.depthDayX')

4
src/views/pages/waterPoints/components/WaterPointPop.vue
View File

@ -69,7 +69,7 @@
更新时间: {{ feature.data.updatedDate || "" }}
</div>
<div class="btn-area">
<button class="button" @click="analyse(feature)">线索分析</button>
<button class="button" @click="analyse(feature)">周边视频</button>
</div>
<WaterHistory v-if="feature.data.reportOrigin!='police'" :feature='feature' />
</div>
@ -141,7 +141,7 @@ export default {
} else if (data.pointLevel == 'pedestrian') {
return '影响行人(<30cm)'
} else {
return '无积水(<10cm)'
return '无积水或少量积水(<10cm)'
}
},
typeSelect (item) {

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

@ -46,21 +46,18 @@
<complaint-event ref="complaintEventRef"></complaint-event>
</div>
<!-- 事件多选 -->
<div class="eventSelection">
<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="无积水或少量积水(<10cm)" @change="selectType('无积水或少量积水(<10cm)')"></el-checkbox>
</el-checkbox-group>
<i class="eventSelectionIcon"></i>
<i class="eventSelectionIcon"></i>
<i class="eventSelectionIcon"></i>
</div>
<!-- 视频标签、列表 -->
<div class="videoList">
<video-list ref="videoListRef"></video-list>
@ -71,14 +68,14 @@
<site-list></site-list>
</div>
<div class="changeLayer">
<!-- <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-group>
</div>
</div>
</div> -->
<video-play
v-if="openVideo"
@ -113,7 +110,7 @@ export default {
// changeLayerBtnList: ['视频监控', '易积水点'],
changeLayerBtnList: ['易积水点'],
changeLayerBtnGroup: [],
eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'],
openVideo: false,
channelCode: []
@ -197,10 +194,9 @@ export default {
bus.$off('openCurrentVideoWaterPoint')
bus.$on('openCurrentVideoWaterPoint', channelCode => {
this.openVideo = true;
this.openVideo = true
this.channelCode.unshift(channelCode)
})
},
methods: {
querySearchAsync (queryString, cb) {
@ -372,9 +368,11 @@ export default {
this.hiMapFun.removeLayerByLayerName('waterPoint1')
this.hiMapFun.removeLayerByLayerName('waterPoint2')
this.hiMapFun.removeLayerByLayerName('waterPoint3')
this.hiMapFun.removeLayerByLayerName('waterPoint4')
const dataEvent1 = []
const dataEvent2 = []
const dataEvent3 = []
const dataEvent4 = []
data.forEach((item) => {
const arr = [0, 0.0, '', '0', '0.0']
@ -386,34 +384,35 @@ export default {
data: item,
type: 'waterPoint'
})
break;
break
case 'pedestrian':
dataEvent2.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
data: item,
type: 'waterPoint'
})
break;
break
case 'traffic':
dataEvent3.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
data: item,
type: 'waterPoint'
})
break;
break
default:
dataEvent1.push({
dataEvent4.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
data: item,
type: 'waterPoint'
})
break;
break
}
}
})
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) {
@ -427,7 +426,7 @@ export default {
@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
@font-face {
font-family: 'Tensentype-ZhiHeiJ-W5';
font-family: "Tensentype-ZhiHeiJ-W5";
src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
}
.map-box {
@ -456,11 +455,11 @@ 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: '青岛市易积水点地图';
text-shadow: 0px 3px 10px rgba(0,0,0,.9);
content: "青岛市易积水点地图";
text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
position: absolute;
z-index: -1;
}
@ -471,10 +470,10 @@ export default {
z-index: 1000;
left: 496px;
top: 90px;
border: 1px solid rgba(31,254,253,.9);
border: 1px solid rgba(31, 254, 253, 0.9);
::v-deep .el-input__inner {
color: #fff;
background: rgba($color: #203b5d, $alpha: .8);
background: rgba($color: #203b5d, $alpha: 0.8);
width: 226px;
height: 36px;
border: none;
@ -484,7 +483,7 @@ export default {
}
::v-deep .el-input__prefix {
top: -1px;
color: rgba(31,254,253,.9);
color: rgba(31, 254, 253, 0.9);
}
::v-deep .el-input-group__append {
width: 54px;
@ -503,7 +502,7 @@ export default {
z-index: -1 !important;
width: 226px !important;
left: 0px !important;
background: rgba(32,59,93,.8);
background: rgba(32, 59, 93, 0.8);
border: 1px solid #1ffefd;
li {
color: #fff;
@ -521,7 +520,7 @@ export default {
top: 90px;
height: 908px;
width: 478px;
background: rgba($color: #05213b, $alpha: .85)
background: rgba($color: #05213b, $alpha: 0.85);
}
.eventNum {
@ -558,23 +557,23 @@ export default {
top: 92px;
width: 398px;
// height:460px;
background: rgba($color: #05213b, $alpha: .85);
background: rgba($color: #05213b, $alpha: 0.85);
}
.siteList {
position: absolute;
z-index: 1000;
right: 8px;
top: 660px;
top: 703px;
width: 398px;
// height:500px;
background: rgba($color: #05213b, $alpha: .85);
background: rgba($color: #05213b, $alpha: 0.85);
}
.changeLayer {
width: 332px;
height: 67px;
background: rgba(7,26,44,.8);
background: rgba(7, 26, 44, 0.8);
position: absolute;
bottom: 10px;
left: 50%;
@ -585,7 +584,7 @@ export default {
width: 96px;
height: 100%;
font-size: 16px;
color: rgba(255,255,255,.6);
color: rgba(255, 255, 255, 0.6);
text-align: center;
line-height: 67px;
}
@ -600,13 +599,12 @@ export default {
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;
background: #027db4;
color: #ffffff;
box-shadow: unset;
}
@ -642,21 +640,27 @@ export default {
background: #f74b3f;
position: absolute;
left: 34.5px;
top: 21px;
top: 13px;
}
.eventSelectionIcon:nth-child(2) {
background: #ffae2b;
position: absolute;
left: 34.5px;
top: 42px;
top: 34px;
}
.eventSelectionIcon:nth-child(3) {
background: #31d779;
position: absolute;
left: 34.5px;
top: 63px;
top: 54px;
}
}
::v-deep .el-checkbox__label {
display: inline-grid;
width: 170px;
white-space: pre-line;
word-wrap: break-word;
}
}
</style>
<style lang='scss'>