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, restoreIcon: null,
currentLayer: null currentLayer: null
} }
const progress = document.getElementById('progress'); const progress = document.getElementById('progress')
const progressBar = document.getElementById('progress-bar'); const progressBar = document.getElementById('progress-bar')
function updateProgressBar(processed, total, elapsed, layersArray) { function updateProgressBar(processed, total, elapsed, layersArray) {
if (elapsed > 1000) { if (elapsed > 1000) {
// if it takes more than a second to load, display the progress bar: // if it takes more than a second to load, display the progress bar:
progress.style.display = 'block'; progress.style.display = 'block'
progressBar.style.width = Math.round(processed/total*100) + '%'; progressBar.style.width = Math.round(processed / total * 100) + '%'
} }
if (processed === total) { if (processed === total) {
// all markers processed - hide the progress bar: // 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) // layers = createMarkerClusterLayer(defaultStyle)
const icon = createDefaultFeatureStyle({ const icon = createDefaultFeatureStyle({
img: url || 'the-head.png', 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 = [] const arr = []
features.map((feature, index) => { features.map((feature, index) => {
@ -583,13 +583,13 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
const elementHtml = createPopupFun(feature) const elementHtml = createPopupFun(feature)
if (elementHtml) { if (elementHtml) {
if (feature.type == 'road') { 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') { } 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') { } 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') { } 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 { } else {
L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) 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>
</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-box">
<div class="filter-btn-processStateSelect"> <div class="filter-btn-processStateSelect">
<div class="processStateSelect-btn" <div class="processStateSelect-btn"
@ -94,25 +101,25 @@ export default {
{ {
title: '智能算法识别', title: '智能算法识别',
id: 'video' id: 'video'
},
{
title: '城管局',
id: 'case'
} }
// { // {
// title: '城管局',
// id: 'case'
// }
// {
// title:'水务集团', // title:'水务集团',
// id:'null' // id:'null'
// }, // },
], ],
tabsActiveName: '全部', tabsActiveName: '水务局',
statisticalAnalysisIsShow: false, statisticalAnalysisIsShow: false,
filterButton: { filterButton: {
typeSelect: ['事件', '事件1'], typeSelect: ['事件', '事件1'],
typeSelectActive: '事件', typeSelectActive: '事件',
type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'], type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'],
processStateSelect: ['全部', '未派发', '未处置', '已处置'], processStateSelect: ['全部', '未派发', '未处置', '已处置'],
processStateSelectActive: '全部', processStateSelectActive: '全部',
typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'] typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)']
}, },
eventListData: [], eventListData: [],
preTime: '', preTime: '',
@ -130,7 +137,8 @@ export default {
listAll: [], listAll: [],
policeList: [], policeList: [],
// 单项总数 // 单项总数
allNum: 0 allNum: 0,
reportType: '随手拍'
} }
}, },
components: { components: {
@ -161,10 +169,18 @@ export default {
selectWaterPoliceList().then((policeRes) => { selectWaterPoliceList().then((policeRes) => {
this.policeList = policeRes.data.data || [] this.policeList = policeRes.data.data || []
const dataAll = [...res.data.data, ...policeRes.data.data] const dataAll = [...res.data.data, ...policeRes.data.data]
this.list = dataAll // this.list = dataAll
this.listAll = 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 this.allNum = this.list.length
bus.$emit('waterPoint', dataAll) bus.$emit('waterPoint', this.list)
}) })
// this.list = res.data.data // this.list = res.data.data
// this.listAll = res.data.data // this.listAll = res.data.data
@ -187,7 +203,7 @@ export default {
return `影响行人(${deepth}cm)` return `影响行人(${deepth}cm)`
break break
default: default:
return `无积水(${deepth}cm)` return `无积水或少量积水(${deepth}cm)`
break break
} }
}, },
@ -204,7 +220,7 @@ export default {
case '影响行人(<30cm)': case '影响行人(<30cm)':
this.list = this.list.filter(v => v.pointLevel != 'pedestrian') this.list = this.list.filter(v => v.pointLevel != 'pedestrian')
break break
case '无积水(<10cm)': case '无积水或少量积水(<10cm)':
this.list = this.list.filter(v => v.pointLevel != 'non') this.list = this.list.filter(v => v.pointLevel != 'non')
break break
} }
@ -221,7 +237,7 @@ export default {
case '影响行人(<30cm)': case '影响行人(<30cm)':
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian')) this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian'))
break break
case '无积水(<10cm)': case '无积水或少量积水(<10cm)':
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non')) this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non'))
break break
} }
@ -234,7 +250,7 @@ export default {
tabHandleClick (item) { tabHandleClick (item) {
this.allNum = 0 this.allNum = 0
this.tabsActiveName = item.title this.tabsActiveName = item.title
this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'] this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)']
if (item.title == '全部') { if (item.title == '全部') {
selectWaterPoint().then((res) => { selectWaterPoint().then((res) => {
@ -259,6 +275,20 @@ export default {
}) })
this.allNum = this.list.length this.allNum = this.list.length
bus.$emit('waterPoint', this.list) 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 { } else {
selectReportOrigin({ reportOrigin: item.id }).then((res) => { selectReportOrigin({ reportOrigin: item.id }).then((res) => {
this.list = res.data.data this.list = res.data.data
@ -356,6 +386,14 @@ export default {
openDialog (item) { openDialog (item) {
bus.$emit('openWaterPointDialog', item) bus.$emit('openWaterPointDialog', item)
},
// 爱山东、随手拍
reportTypeChange (item) {
this.reportType = item
this.tabHandleClick({
title: '群众上报',
id: 'commonReport'
})
} }
} }
} }
@ -504,6 +542,21 @@ export default {
.allNum { .allNum {
color: #ffffff; color: #ffffff;
margin: 12px 0px 0 12px; 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 { .filter-btn-box {
margin-top: 16px; margin-top: 16px;
@ -701,13 +754,13 @@ export default {
.box3 { .box3 {
color: #fff; color: #fff;
margin-top: 10px; margin-top: 10px;
height: 600px; height: 565px;
overflow-y: scroll; overflow-y: scroll;
cursor: pointer; cursor: pointer;
.item { .item {
margin-top: 10px; margin-top: 8px;
background: rgba(5, 33, 59, 0.35); background: rgba(5, 33, 59, 0.35);
padding: 10px; padding: 6px 10px;
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -716,7 +769,7 @@ export default {
} }
.name { .name {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 16px;
} }
.topType { .topType {
margin-left: 5px; margin-left: 5px;
@ -743,6 +796,9 @@ export default {
.green { .green {
background: #31d779; background: #31d779;
} }
.type {
font-size: 14px;
}
} }
.bottom { .bottom {
margin-top: 10px; margin-top: 10px;

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

@ -1,9 +1,11 @@
<template> <template>
<div class="box"> <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 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"> <!-- <div style="display: flex;justify-content: space-between">
<el-input <el-input
@ -72,7 +74,7 @@ import {
selectWeekAll, selectWeekAll,
selectMonthAll selectMonthAll
} from '@/api/construction/index' } from '@/api/construction/index'
import { selectCountWater } from '@/api/waterPoints' import { selectCountWater, selectCountLevel } from '@/api/waterPoints'
export default { export default {
data () { data () {
@ -127,27 +129,60 @@ export default {
// selectValue: '' // selectValue: ''
// } // }
return { return {
district:['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'], // district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
districtData: [], // districtData: []
rank: [
{
value: 0,
unit: '个',
name: '无积水或少量积水'
},
{
value: 0,
unit: '个',
name: '影响行人'
},
{
value: 0,
unit: '个',
name: '影响车辆'
}
]
} }
}, },
created () { created () {
}, },
mounted () { mounted () {
selectCountWater().then((res) => { // selectCountWater().then((res) => {
this.district.map((district) => { // this.district.map((district) => {
let eligibility = res.data.data.find((data) => { // const eligibility = res.data.data.find((data) => {
return district == data.ssqy // return district == data.ssqy
}) // })
if(eligibility){ // if (eligibility) {
this.districtData.push(eligibility.count) // this.districtData.push(eligibility.count)
} else { // } else {
this.districtData.push(0) // 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() // this.selectSiteByName()
@ -189,7 +224,7 @@ export default {
}, },
grid: { grid: {
bottom: 30, bottom: 30,
top:10, top: 10
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -241,9 +276,7 @@ export default {
position: 'inside', position: 'inside',
distance: 0, distance: 0,
formatter: function (param) { formatter: function (param) {
if(param.value > 0) if (param.value > 0) { return param.value } else return ''
return param.value
else return ''
}, },
textStyle: { textStyle: {
color: '#fff', color: '#fff',
@ -257,6 +290,73 @@ export default {
document.getElementById('event-type-chart') document.getElementById('event-type-chart')
) )
eventType.setOption(option) 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: { // methods: {
@ -347,14 +447,23 @@ export default {
padding: 0px 0 18px 0px; padding: 0px 0 18px 0px;
.title { .title {
color: #fff; 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 { p {
padding: 5px; padding: 5px;
} }
.bottomLine { .bottomLine {
width: 100%; width: 100%;
height: 5px; 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 { .eventData {
@ -364,16 +473,16 @@ export default {
width: 200px; width: 200px;
} }
.el-input__inner { .el-input__inner {
border: 1px solid rgba(31,254,253,.9); border: 1px solid rgba(31, 254, 253, 0.9);
color: #fff; color: #fff;
background: rgba($color: #203b5d, $alpha: .8); background: rgba($color: #203b5d, $alpha: 0.8);
border-radius: unset; border-radius: unset;
&::placeholder { &::placeholder {
color: rgba($color: #fff, $alpha: 0.6); color: rgba($color: #fff, $alpha: 0.6);
} }
} }
.el-input__prefix { .el-input__prefix {
color: rgba(31,254,253,.9); color: rgba(31, 254, 253, 0.9);
} }
.el-select { .el-select {
@ -382,12 +491,18 @@ export default {
width: 161px; width: 161px;
} }
} }
#event-type-chart,#event-state-chart { #event-type-chart,
#event-state-chart {
width: 100%; width: 100%;
height: 207px; height: 207px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
#analysis-of-water-level {
width: 100%;
height: 165px;
margin: 22px;
}
} }
::v-deep .eventNoise { ::v-deep .eventNoise {
@ -395,7 +510,8 @@ export default {
.el-table { .el-table {
border: 1px solid #325d94; border: 1px solid #325d94;
width: 100%; width: 100%;
th,td { th,
td {
border-right: 1px solid #325d94 !important; border-right: 1px solid #325d94 !important;
} }
// .descending.is-leaf.is-sortable { // .descending.is-leaf.is-sortable {

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

@ -35,11 +35,12 @@
</div> </div>
<div id="analysis-of-water-source"></div> <div id="analysis-of-water-source"></div>
<div class="water-point-reporting-title"> <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 class="water-point-reporting-title-bottom"></div>
</div> </div>
<div id="analysis-of-water-level"></div> <!-- <div id="analysis-of-water-level"></div> -->
<div id="event-type-chart"></div>
</div> </div>
</div> </div>
@ -47,7 +48,7 @@
<script> <script>
import moment from 'moment' import moment from 'moment'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { selectCountWaters,selectCountLevel, selectWaterPoliceList } from '@/api/waterPoints' import { selectCountWaters, selectCountLevel, selectWaterPoliceList, selectCountWater } from '@/api/waterPoints'
export default { export default {
data () { data () {
@ -80,24 +81,24 @@ export default {
} }
], ],
source: [ source: [
{ // {
value: 0, // value: 0,
unit: '个', // unit: '个',
name: '水务集团上报', // name: '水务集团上报',
id:'auditorReport' // id:'auditorReport'
}, // },
{ {
value: 0, value: 0,
unit: '个', unit: '个',
name: '群众上报', name: '群众上报',
id: 'commonReport' id: 'commonReport'
}, },
{ // {
value: 0, // value: 0,
unit: '个', // unit: '个',
name: '城管局', // name: '城管局',
id:'case' // id:'case'
}, // },
{ {
value: 0, value: 0,
unit: '个', unit: '个',
@ -108,7 +109,7 @@ export default {
value: 0, value: 0,
unit: '个', unit: '个',
name: '水务局', name: '水务局',
id:'null' id: 'auditorReport'
}, },
{ {
value: 0, value: 0,
@ -121,7 +122,7 @@ export default {
{ {
value: 0, value: 0,
unit: '个', unit: '个',
name: '无积水' name: '无积水或少量积水'
}, },
{ {
value: 0, value: 0,
@ -132,33 +133,34 @@ export default {
value: 0, value: 0,
unit: '个', unit: '个',
name: '影响车辆' name: '影响车辆'
}, }
] ],
district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
districtData: []
} }
}, },
mounted () { mounted () {
selectCountWaters().then((res) => { selectCountWaters().then((res) => {
res.data.data.forEach((item) => { 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 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 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') { if (item.reportOrigin == 'auditorReport') {
this.source[4].value = item.count this.source[2].value = item.count
} }
}) })
selectWaterPoliceList().then((policeRes) => { selectWaterPoliceList().then((policeRes) => {
this.source[5].value = policeRes.data.data.length this.source[3].value = policeRes.data.data.length
this.initEventTypeCharts() this.initEventTypeCharts()
}) })
}) })
@ -180,7 +182,19 @@ export default {
}) })
this.initEventTypeCharts2() 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: { methods: {
// 积水点来源分析charts图 // 积水点来源分析charts图
@ -188,7 +202,7 @@ export default {
const legend1 = this.source.map((v) => v.name) const legend1 = this.source.map((v) => v.name)
const legendData = [...legend1] const legendData = [...legend1]
const option = { const option = {
color: ['#24a9ff', '#6873ff', '#4df6f7', '#3ee79d','#b7baff'], color: ['#4df6f7', '#3ee79d', '#6873ff', '#24a9ff', '#b7baff'],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)' formatter: '{a} <br/>{b}: {c} ({d}%)'
@ -201,8 +215,8 @@ export default {
left: 'left', left: 'left',
top: 'center', top: 'center',
textStyle: { textStyle: {
color: '#fff', color: '#fff'
}, }
}, },
// itemStyle: { // itemStyle: {
// normal: { // normal: {
@ -233,7 +247,7 @@ export default {
normal: { normal: {
position: 'inner', position: 'inner',
show: false show: false
}, }
}, },
labelLine: { labelLine: {
normal: { normal: {
@ -267,8 +281,8 @@ export default {
left: 'left', left: 'left',
top: 'center', top: 'center',
textStyle: { textStyle: {
color: '#fff', color: '#fff'
}, }
}, },
// itemStyle: { // itemStyle: {
// normal: { // normal: {
@ -297,9 +311,9 @@ export default {
radius: ['45%', '80%'], radius: ['45%', '80%'],
label: { label: {
normal: { normal: {
show: function(value) { show: (function (value) {
if (value == 0) return false if (value == 0) return false
}(), }()),
position: 'inner' position: 'inner'
} }
}, },
@ -316,7 +330,89 @@ export default {
document.getElementById('analysis-of-water-level') document.getElementById('analysis-of-water-level')
) )
eventType.setOption(option) 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> </script>
@ -334,7 +430,7 @@ export default {
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-family: 'Tensentype-ZhiHeiJ-W5'; font-family: "Tensentype-ZhiHeiJ-W5";
} }
.time { .time {
text-align: left; text-align: left;
@ -414,13 +510,19 @@ export default {
} }
& > div:last-child { & > div:last-child {
width: 40%; width: 40%;
height: 165px; // height: 165px;
} }
} }
#analysis-of-water-source,#analysis-of-water-level { #analysis-of-water-source,
#analysis-of-water-level {
width: 100%; width: 100%;
height: 165px; height: 165px;
margin: 22px; margin: 22px;
} }
#event-type-chart {
width: 100%;
height: 207px;
margin: 22px 0;
}
} }
</style> </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) => { 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') console.log(res.data.data, 'res')
res.data.data.map(val => { 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) this.depthDayY.push(Number(val.depth) * 100)
}) })
console.log(this.depthDayX, this.depthDayY, ' this.depthDayX') 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 || "" }} 更新时间: {{ feature.data.updatedDate || "" }}
</div> </div>
<div class="btn-area"> <div class="btn-area">
<button class="button" @click="analyse(feature)">线索分析</button> <button class="button" @click="analyse(feature)">周边视频</button>
</div> </div>
<WaterHistory v-if="feature.data.reportOrigin!='police'" :feature='feature' /> <WaterHistory v-if="feature.data.reportOrigin!='police'" :feature='feature' />
</div> </div>
@ -141,7 +141,7 @@ export default {
} else if (data.pointLevel == 'pedestrian') { } else if (data.pointLevel == 'pedestrian') {
return '影响行人(<30cm)' return '影响行人(<30cm)'
} else { } else {
return '无积水(<10cm)' return '无积水或少量积水(<10cm)'
} }
}, },
typeSelect (item) { typeSelect (item) {

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

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