|
@@ -1,5 +1,6 @@
|
|
|
<template>
|
|
|
<div class="dataView-content">
|
|
|
+ <!-- <dv-loading>Loading...</dv-loading> -->
|
|
|
<div class="data-header">
|
|
|
<div class="total-block">
|
|
|
<div>
|
|
@@ -44,47 +45,47 @@
|
|
|
<div class="data-body">
|
|
|
<div class="b-middle">
|
|
|
<div>
|
|
|
- <dv-border-box-8 style="padding: 10px;">
|
|
|
+ <dv-border-box-8 ref="map" style="padding: 10px;">
|
|
|
<div class="lajiliang">
|
|
|
<div class="laji-title">垃圾产生量</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor1">可回收垃圾</div>
|
|
|
- <div>{{ rubbishWeightData.RECYCLING }} 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.RECYCLING }} kg</div>
|
|
|
</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor2">其它垃圾</div>
|
|
|
- <div>{{ rubbishWeightData.GATHER_OTHER }} 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.GATHER_OTHER }} kg</div>
|
|
|
</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor3">厨余垃圾</div>
|
|
|
- <div>{{ rubbishWeightData.GATHER_KITCHEN }} 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.GATHER_KITCHEN }} kg</div>
|
|
|
</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor4">建筑垃圾</div>
|
|
|
- <div>{{ rubbishWeightData.GATHER_BUILDING }} 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.GATHER_BUILDING }} kg</div>
|
|
|
</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor5">有害垃圾</div>
|
|
|
- <div>{{ rubbishWeightData.HARM }} 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.HARM }} kg</div>
|
|
|
</div>
|
|
|
- <div class="laji-total">共计<span>{{ rubbishWeightTotal }}</span>吨</div>
|
|
|
+ <div class="laji-total">共计<span>{{ rubbishWeightTotal }}</span>kg</div>
|
|
|
</div>
|
|
|
<div id="map" :style="{height: '100%'}"></div>
|
|
|
</dv-border-box-8>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div>
|
|
|
- <dv-border-box-13>
|
|
|
+ <dv-border-box-13 ref="con1">
|
|
|
<div id="con1" style="width: 100%;height: 100%;"></div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <dv-border-box-13>
|
|
|
+ <dv-border-box-13 ref="con2">
|
|
|
<div id="con2" style="width: 100%;height: 100%;"></div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <dv-border-box-13>
|
|
|
+ <dv-border-box-13 ref="con4">
|
|
|
<div id="con4" style="width: 100%;height: 100%;"></div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
@@ -93,19 +94,19 @@
|
|
|
<div class="b-right">
|
|
|
<!-- 设备比例分布 -->
|
|
|
<div>
|
|
|
- <dv-border-box-13>
|
|
|
+ <dv-border-box-13 ref="con3">
|
|
|
<div id="con3" style="width: 100%;height: 100%;"></div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
<!-- 各分类垃圾量分布 -->
|
|
|
<div>
|
|
|
- <dv-border-box-13>
|
|
|
+ <dv-border-box-13 ref="con5">
|
|
|
<div id="con5" style="width: 100%;height: 100%;"></div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
<!-- 各机构投递量分布比例 -->
|
|
|
<div>
|
|
|
- <dv-border-box-13>
|
|
|
+ <dv-border-box-13 ref="con6">
|
|
|
<div id="con6" style="width: 100%;height: 100%;"></div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
@@ -403,7 +404,7 @@ export default {
|
|
|
const data = res.data || []
|
|
|
data.forEach(item => {
|
|
|
item.name = item.labelName
|
|
|
- item.value = item.weight
|
|
|
+ item.value = Math.round(item.weight / 1000)
|
|
|
})
|
|
|
const con6 = document.getElementById('con6')
|
|
|
const chart6 = echarts.init(con6)
|
|
@@ -420,9 +421,9 @@ export default {
|
|
|
console.log(res, '垃圾产生量')
|
|
|
if (res.status == 200) {
|
|
|
Object.keys(this.rubbishWeightData).map(item => {
|
|
|
- this.rubbishWeightData[item] = (res.data.list.find(key => key.rubbishType == item).rubbishWeight)
|
|
|
+ this.rubbishWeightData[item] = this.formatter(Math.round((res.data.list.find(key => key.rubbishType == item).rubbishWeight) / 1000))
|
|
|
})
|
|
|
- this.rubbishWeightTotal = res.data.total
|
|
|
+ this.rubbishWeightTotal = this.formatter(Math.round(res.data.total / 1000))
|
|
|
} else {
|
|
|
this.rubbishWeightTotal = 0
|
|
|
this.rubbishWeightData = {
|
|
@@ -543,15 +544,15 @@ export default {
|
|
|
this.infoWindow.close() // 初始关闭信息窗关闭
|
|
|
this.markerLayer.on('mousemove', this.showMarkTitle)
|
|
|
// 监听地图加载完成
|
|
|
- this.map.on('tilesloaded', this.getMapMark)
|
|
|
+ // this.map.on('tilesloaded', this.getMapMark)
|
|
|
},
|
|
|
// 获取热力图
|
|
|
getHeatMapData () {
|
|
|
// 初始化热力图并添加至map图层
|
|
|
const heat = new TMap.visualization.Heat({
|
|
|
- max: 350, // 热力最强阈值
|
|
|
+ max: 180, // 热力最强阈值
|
|
|
min: 0, // 热力最弱阈值
|
|
|
- height: 0, // 峰值高度
|
|
|
+ height: 40, // 峰值高度
|
|
|
gradientColor: { // 渐变颜色
|
|
|
0.2: '#0a8b4d',
|
|
|
0.3: '#57e0a5',
|
|
@@ -665,7 +666,8 @@ export default {
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: res.stationName
|
|
|
+ data: res.stationName,
|
|
|
+ show: false
|
|
|
},
|
|
|
yAxis: {
|
|
|
name: 'kg',
|
|
@@ -740,7 +742,8 @@ export default {
|
|
|
data: arr,
|
|
|
orient: 'vertical',
|
|
|
textStyle: {
|
|
|
- fontSize: 10
|
|
|
+ fontSize: 10,
|
|
|
+ color: '#abd7ff'
|
|
|
},
|
|
|
top: 15,
|
|
|
left: 'right'
|
|
@@ -859,6 +862,8 @@ export default {
|
|
|
chart1.setOption(option1)
|
|
|
this.chart1 = chart1
|
|
|
this.chart1.resize()
|
|
|
+ window.addEventListener('pageshow', this.chart1.resize())
|
|
|
+ on(window, 'pageshow', this.chart1.resize())
|
|
|
},
|
|
|
// 初始化饼图 title: 标题 data:数据 bit:单位
|
|
|
initPie (chart, title, data, bit) {
|
|
@@ -869,7 +874,6 @@ export default {
|
|
|
legend.push(p)
|
|
|
})
|
|
|
}
|
|
|
- console.log(legend, 'legend--------')
|
|
|
const option = {
|
|
|
color: ['#f56548', '#ffb301', '#7561af', '#06beff', '#20ce7a' ],
|
|
|
title: {
|
|
@@ -888,7 +892,7 @@ export default {
|
|
|
legend: {
|
|
|
orient: 'horizontal',
|
|
|
left: 'center',
|
|
|
- bottom: 'bottom',
|
|
|
+ bottom: '5',
|
|
|
padding: 5,
|
|
|
textStyle: {
|
|
|
color: '#abd7ff',
|
|
@@ -948,9 +952,14 @@ export default {
|
|
|
}
|
|
|
return option
|
|
|
}
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+
|
|
|
},
|
|
|
mounted () {
|
|
|
const that = this
|
|
|
+ // 默认定位在陕西省咸阳市
|
|
|
+ this.initMap({ lat: 34.32932, lng: 108.70929 })
|
|
|
window.onresize = () => {
|
|
|
return (() => {
|
|
|
that.chart1.resize()
|
|
@@ -961,13 +970,24 @@ export default {
|
|
|
that.chart6.resize()
|
|
|
})()
|
|
|
}
|
|
|
+ // 监听页面刷新,重置边框宽高
|
|
|
+ window.addEventListener('pageshow', (e) => {
|
|
|
+ // console.log(e, this.chart1, 'eeeeeeeeeeee')
|
|
|
+ this.$refs.map.initWH()
|
|
|
+ this.$refs.con1.initWH()
|
|
|
+ this.$refs.con2.initWH()
|
|
|
+ this.$refs.con3.initWH()
|
|
|
+ this.$refs.con4.initWH()
|
|
|
+ this.$refs.con5.initWH()
|
|
|
+ this.$refs.con6.initWH()
|
|
|
+ })
|
|
|
},
|
|
|
beforeRouteEnter (to, from, next) {
|
|
|
next(vm => {
|
|
|
+ vm.getMapMark()
|
|
|
setTimeout(() => {
|
|
|
vm.initChart()
|
|
|
- // 默认定位在陕西省咸阳市
|
|
|
- vm.initMap({ lat: 34.32932, lng: 108.70929 })
|
|
|
+
|
|
|
if (vm.queryParam.cityCode != '') {
|
|
|
vm.getAreaListRequest(vm.queryParam.cityCode)
|
|
|
}
|