|
@@ -128,7 +128,10 @@ import {
|
|
|
getHeatMapData,
|
|
|
getLocationCode,
|
|
|
getRubbishTypeTotal,
|
|
|
- querySumWeight
|
|
|
+ querySumWeight,
|
|
|
+ labelWeightPercent,
|
|
|
+ devicePercent,
|
|
|
+ getDwTotal
|
|
|
} from '@/api/borard.js'
|
|
|
import {
|
|
|
getProvince,
|
|
@@ -240,6 +243,8 @@ export default {
|
|
|
}
|
|
|
this.addrDistrictList = []
|
|
|
this.queryParam.districtCode = ''
|
|
|
+ // 地图经纬度
|
|
|
+ this.getLocationCode()
|
|
|
this.getAreaListRequest(e.target.value)
|
|
|
this.initChart()
|
|
|
},
|
|
@@ -300,26 +305,25 @@ export default {
|
|
|
},
|
|
|
// 获取用户总数
|
|
|
getUser () {
|
|
|
- getUserTotal({
|
|
|
- 'provinceCode': this.queryParam.provinceCode,
|
|
|
- 'cityCode': this.queryParam.cityCode,
|
|
|
- 'districtCode': this.queryParam.districtCode
|
|
|
- }).then(res => {
|
|
|
+ getUserTotal({}).then(res => {
|
|
|
const data = res.data || 0
|
|
|
this.userTotal = data
|
|
|
})
|
|
|
},
|
|
|
// 获取设备总数
|
|
|
getDevice () {
|
|
|
- getDeviceTotal({
|
|
|
- 'provinceCode': this.queryParam.provinceCode,
|
|
|
- 'cityCode': this.queryParam.cityCode,
|
|
|
- 'districtCode': this.queryParam.districtCode
|
|
|
- }).then(res => {
|
|
|
+ getDeviceTotal({}).then(res => {
|
|
|
const data = res.data || 0
|
|
|
this.devTotal = data
|
|
|
})
|
|
|
},
|
|
|
+ // 获取试点单位数(网点数量)
|
|
|
+ getDwTotal () {
|
|
|
+ getDwTotal({}).then(res => {
|
|
|
+ const data = res.data.count || 0
|
|
|
+ this.dwTotal = data
|
|
|
+ })
|
|
|
+ },
|
|
|
// 获取新用户注册量
|
|
|
getNewRegister () {
|
|
|
const params = {
|
|
@@ -373,29 +377,52 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ // 设备分布比例
|
|
|
+ getDevicePercent () {
|
|
|
+ devicePercent({}).then(res => {
|
|
|
+ console.log(res, '------------设备分布比例')
|
|
|
+ const data = res.data || []
|
|
|
+
|
|
|
+ data.forEach(item => {
|
|
|
+ item.name = item.LABEL_NAME
|
|
|
+ item.value = item.DEVCIE_NUM
|
|
|
+ })
|
|
|
+ const con3 = document.getElementById('con3')
|
|
|
+ const chart3 = echarts.init(con3)
|
|
|
+ const option3 = this.initPie(chart3, '设备分布比例', data, '个')
|
|
|
+ chart3.setOption(option3)
|
|
|
+ this.chart3 = chart3
|
|
|
+ this.chart3.resize()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 各机构投递量分布比例
|
|
|
+ getLabelWeightPercent () {
|
|
|
+ labelWeightPercent({}).then(res => {
|
|
|
+ console.log(res, '-------各机构投递量分布比例')
|
|
|
+ if (res.status == 200) {
|
|
|
+ const data = res.data || []
|
|
|
+ data.forEach(item => {
|
|
|
+ item.name = item.labelName
|
|
|
+ item.value = item.weight
|
|
|
+ })
|
|
|
+ const con6 = document.getElementById('con6')
|
|
|
+ const chart6 = echarts.init(con6)
|
|
|
+ const option6 = this.initPie(chart6, '各机构投递量分布比例', data, '吨')
|
|
|
+ chart6.setOption(option6)
|
|
|
+ this.chart6 = chart6
|
|
|
+ this.chart6.resize()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
// 垃圾产生量
|
|
|
getRubbishWeight () {
|
|
|
- // const params = {
|
|
|
- // 'findRubbishDataBeginDate': this.beginDate,
|
|
|
- // 'findRubbishDataEndDate': this.endDate,
|
|
|
- // 'provinceCode': this.queryParam.provinceCode,
|
|
|
- // 'cityCode': this.queryParam.cityCode,
|
|
|
- // 'districtCode': this.queryParam.districtCode
|
|
|
- // }
|
|
|
- const params = {
|
|
|
- 'findRubbishDataBeginDate': '',
|
|
|
- 'findRubbishDataEndDate': '',
|
|
|
- 'provinceCode': '',
|
|
|
- 'cityCode': '',
|
|
|
- 'districtCode': ''
|
|
|
- }
|
|
|
- querySumWeight(params).then(res => {
|
|
|
+ querySumWeight({}).then(res => {
|
|
|
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) / 1000
|
|
|
+ this.rubbishWeightData[item] = (res.data.list.find(key => key.rubbishType == item).rubbishWeight)
|
|
|
})
|
|
|
- this.rubbishWeightTotal = res.data.total / 1000
|
|
|
+ this.rubbishWeightTotal = res.data.total
|
|
|
} else {
|
|
|
this.rubbishWeightTotal = 0
|
|
|
this.rubbishWeightData = {
|
|
@@ -410,14 +437,7 @@ export default {
|
|
|
},
|
|
|
// 各分类垃圾量分布
|
|
|
getRubbishTypeChart () {
|
|
|
- const params = {
|
|
|
- 'findRubbishDataBeginDate': '',
|
|
|
- 'findRubbishDataEndDate': '',
|
|
|
- 'provinceCode': '',
|
|
|
- 'cityCode': '',
|
|
|
- 'districtCode': ''
|
|
|
- }
|
|
|
- getRubbishTypeTotal(params).then(res => {
|
|
|
+ getRubbishTypeTotal({}).then(res => {
|
|
|
console.log(res)
|
|
|
let data = []
|
|
|
if (res.status == 200 && res.data) {
|
|
@@ -498,8 +518,8 @@ export default {
|
|
|
styles: {
|
|
|
// 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
|
|
|
'myStyle': new TMap.MarkerStyle({
|
|
|
- 'width': 16, // 点标记样式宽度(像素)
|
|
|
- 'height': 20, // 点标记样式高度(像素)
|
|
|
+ 'width': 40, // 点标记样式宽度(像素)
|
|
|
+ 'height': 40, // 点标记样式高度(像素)
|
|
|
'src': '../ldt.png', // 图片路径
|
|
|
// 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
|
|
|
'anchor': {
|
|
@@ -533,9 +553,9 @@ export default {
|
|
|
min: 0, // 热力最弱阈值
|
|
|
height: 0, // 峰值高度
|
|
|
gradientColor: { // 渐变颜色
|
|
|
- 0.6: '#673198',
|
|
|
- 0.8: '#e53390',
|
|
|
- 0.9: '#ffc95a'
|
|
|
+ 0.2: '#0a8b4d',
|
|
|
+ 0.3: '#57e0a5',
|
|
|
+ 0.5: '#05a8a4'
|
|
|
},
|
|
|
radius: 30 // 最大辐射半径
|
|
|
}).addTo(this.map)
|
|
@@ -565,6 +585,7 @@ export default {
|
|
|
},
|
|
|
// 获取地图点坐标
|
|
|
getMapMark () {
|
|
|
+ this.getHeatMapData()
|
|
|
getMapStation({
|
|
|
'provinceCode': this.queryParam.provinceCode,
|
|
|
'cityCode': this.queryParam.cityCode,
|
|
@@ -589,7 +610,6 @@ export default {
|
|
|
// 增加点标记
|
|
|
this.markerLayer.add(data)
|
|
|
})
|
|
|
- this.getHeatMapData()
|
|
|
},
|
|
|
// 显示地图标记点名称
|
|
|
showMarkTitle (evt) {
|
|
@@ -603,8 +623,8 @@ export default {
|
|
|
this.getUser()
|
|
|
// 设备总数
|
|
|
this.getDevice()
|
|
|
- // 地图
|
|
|
- this.getLocationCode()
|
|
|
+ // 网点总数
|
|
|
+ this.getDwTotal()
|
|
|
// 新注册用户
|
|
|
this.getNewRegister()
|
|
|
// 分时投递
|
|
@@ -614,29 +634,9 @@ export default {
|
|
|
// 各分类垃圾量分布
|
|
|
this.getRubbishTypeChart()
|
|
|
// 设备分布比例
|
|
|
- const con3 = document.getElementById('con3')
|
|
|
- const chart3 = echarts.init(con3)
|
|
|
- const data = [{
|
|
|
- name: '居民小区',
|
|
|
- value: 49
|
|
|
- },
|
|
|
- {
|
|
|
- name: '学校',
|
|
|
- value: 14
|
|
|
- },
|
|
|
- {
|
|
|
- name: '公共机构',
|
|
|
- value: 32
|
|
|
- },
|
|
|
- {
|
|
|
- name: '企业',
|
|
|
- value: 5
|
|
|
- }
|
|
|
- ]
|
|
|
- const option3 = this.initPie(chart3, '设备分布比例', data)
|
|
|
- chart3.setOption(option3)
|
|
|
- this.chart3 = chart3
|
|
|
- this.chart3.resize()
|
|
|
+ this.getDevicePercent()
|
|
|
+ // 各机构投递量分布比例
|
|
|
+ this.getLabelWeightPercent()
|
|
|
// 网点投递量排名
|
|
|
this.getDeliveryTop()
|
|
|
},
|
|
@@ -860,8 +860,16 @@ export default {
|
|
|
this.chart1 = chart1
|
|
|
this.chart1.resize()
|
|
|
},
|
|
|
- // 初始化饼图
|
|
|
- initPie (chart, title, data) {
|
|
|
+ // 初始化饼图 title: 标题 data:数据 bit:单位
|
|
|
+ initPie (chart, title, data, bit) {
|
|
|
+ const legend = []
|
|
|
+ if (bit) {
|
|
|
+ data.map(item => {
|
|
|
+ const p = `${item.name}: ${item.value}${bit}`
|
|
|
+ legend.push(p)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(legend, 'legend--------')
|
|
|
const option = {
|
|
|
color: ['#f56548', '#ffb301', '#7561af', '#06beff', '#20ce7a' ],
|
|
|
title: {
|
|
@@ -877,6 +885,23 @@ export default {
|
|
|
trigger: 'item',
|
|
|
formatter: `{b} : {d}%`
|
|
|
},
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ left: 'center',
|
|
|
+ bottom: 'bottom',
|
|
|
+ padding: 5,
|
|
|
+ textStyle: {
|
|
|
+ color: '#abd7ff',
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ show: !!bit,
|
|
|
+ formatter: function (name) {
|
|
|
+ if (bit) {
|
|
|
+ const p = data.find(item => item.name == name)
|
|
|
+ return name + (p ? (':' + p.value + bit) : '')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
radius: ['30%', '50%'],
|
|
@@ -941,6 +966,8 @@ export default {
|
|
|
next(vm => {
|
|
|
setTimeout(() => {
|
|
|
vm.initChart()
|
|
|
+ // 默认定位在陕西省咸阳市
|
|
|
+ vm.initMap({ lat: 34.32932, lng: 108.70929 })
|
|
|
if (vm.queryParam.cityCode != '') {
|
|
|
vm.getAreaListRequest(vm.queryParam.cityCode)
|
|
|
}
|