|
@@ -4,13 +4,20 @@
|
|
<dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']">
|
|
<dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']">
|
|
智享亿家投递大数据
|
|
智享亿家投递大数据
|
|
</dv-border-box-5>
|
|
</dv-border-box-5>
|
|
|
|
+ <dv-decoration-3 style="width:25%;height:30px;" />
|
|
<dv-border-box-5 :color="['rgba(46, 77, 255, 0.2)', 'rgba(0,125,255,0.2)']" :reverse="true">
|
|
<dv-border-box-5 :color="['rgba(46, 77, 255, 0.2)', 'rgba(0,125,255,0.2)']" :reverse="true">
|
|
- 区域
|
|
|
|
- <select>
|
|
|
|
- <option>全部</option>
|
|
|
|
- <option>西安</option>
|
|
|
|
- <option>渭南</option>
|
|
|
|
- <option>咸阳</option>
|
|
|
|
|
|
+ <div>区域</div>
|
|
|
|
+ <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
|
|
|
|
+ <option value="">省</option>
|
|
|
|
+ <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
|
|
|
|
+ </select> -->
|
|
|
|
+ <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
|
|
|
|
+ <option value="">选择市</option>
|
|
|
|
+ <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
|
|
|
|
+ </select>
|
|
|
|
+ <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
|
|
|
|
+ <option value="">选择区/县</option>
|
|
|
|
+ <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
|
|
</select>
|
|
</select>
|
|
<a-icon
|
|
<a-icon
|
|
@click="isFullscreenMap"
|
|
@click="isFullscreenMap"
|
|
@@ -33,12 +40,12 @@
|
|
</div>
|
|
</div>
|
|
<div class="b-middle">
|
|
<div class="b-middle">
|
|
<div>
|
|
<div>
|
|
- <dv-border-box-12 style="padding: 10px;">
|
|
|
|
|
|
+ <dv-border-box-8 style="padding: 10px;">
|
|
<div id="map" :style="{height: '100%'}"></div>
|
|
<div id="map" :style="{height: '100%'}"></div>
|
|
- </dv-border-box-12>
|
|
|
|
|
|
+ </dv-border-box-8>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <dv-border-box-8 title="dv-border-box-11">
|
|
|
|
|
|
+ <dv-border-box-12>
|
|
<div class="total-block">
|
|
<div class="total-block">
|
|
<div>
|
|
<div>
|
|
<dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
|
|
<dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
|
|
@@ -49,7 +56,7 @@
|
|
<div class="total-label">设备总数</div>
|
|
<div class="total-label">设备总数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </dv-border-box-8>
|
|
|
|
|
|
+ </dv-border-box-12>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="b-right">
|
|
<div class="b-right">
|
|
@@ -69,9 +76,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import Charts, {
|
|
|
|
- changeDefaultConfig
|
|
|
|
-} from '@jiaminghi/charts'
|
|
|
|
|
|
+import echarts from 'echarts'
|
|
import {
|
|
import {
|
|
getUserTotal,
|
|
getUserTotal,
|
|
getDeviceTotal,
|
|
getDeviceTotal,
|
|
@@ -80,14 +85,53 @@ import {
|
|
import {
|
|
import {
|
|
getNewRegister,
|
|
getNewRegister,
|
|
getTimeSharingLog,
|
|
getTimeSharingLog,
|
|
- getDeliveryTop
|
|
|
|
|
|
+ getDeliveryTop,
|
|
|
|
+ getHeatMapData,
|
|
|
|
+ getLocationCode
|
|
} from '@/api/borard.js'
|
|
} from '@/api/borard.js'
|
|
|
|
+import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
import getDate from '@/libs/getDate.js'
|
|
import getDate from '@/libs/getDate.js'
|
|
export default {
|
|
export default {
|
|
name: 'DataBoratd',
|
|
name: 'DataBoratd',
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
|
|
+ queryParam: {
|
|
|
|
+ provinceCode: '610000', // 省
|
|
|
|
+ cityCode: '610100', // 市
|
|
|
|
+ districtCode: '' // 区
|
|
|
|
+ },
|
|
|
|
+ addrProvinceList: [{
|
|
|
|
+ code: '610000',
|
|
|
|
+ id: '610000',
|
|
|
|
+ isOpen: '0',
|
|
|
|
+ name: '陕西省',
|
|
|
|
+ parentId: '100000',
|
|
|
|
+ parentIds: '100000',
|
|
|
|
+ sort: 27,
|
|
|
|
+ type: '2'
|
|
|
|
+ }], // 省下拉
|
|
|
|
+ addrCityList: [
|
|
|
|
+ {
|
|
|
|
+ 'id': '610100',
|
|
|
|
+ 'sort': 1,
|
|
|
|
+ 'parentId': '610000',
|
|
|
|
+ 'parentIds': '100000,610000',
|
|
|
|
+ 'isOpen': '0',
|
|
|
|
+ 'name': '西安市',
|
|
|
|
+ 'code': '610100'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ 'id': '610400',
|
|
|
|
+ 'sort': 4,
|
|
|
|
+ 'parentId': '610000',
|
|
|
|
+ 'parentIds': '100000,610000',
|
|
|
|
+ 'isOpen': '0',
|
|
|
|
+ 'name': '咸阳市',
|
|
|
|
+ 'code': '610400'
|
|
|
|
+ }
|
|
|
|
+ ], // 市下拉
|
|
|
|
+ addrDistrictList: [], // 区下拉
|
|
chart1: null,
|
|
chart1: null,
|
|
chart2: null,
|
|
chart2: null,
|
|
chart3: null,
|
|
chart3: null,
|
|
@@ -106,11 +150,60 @@ export default {
|
|
map: null, // 地图对象
|
|
map: null, // 地图对象
|
|
markerLayer: null, // 地图点标记对象
|
|
markerLayer: null, // 地图点标记对象
|
|
infoWindow: null, // 地图信息窗口对象
|
|
infoWindow: null, // 地图信息窗口对象
|
|
- beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
|
|
|
|
- endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59') // 查询结束时间
|
|
|
|
|
|
+ beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
|
|
|
|
+ endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59') // 查询结束时间
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ // 获取省列表'
|
|
|
|
+ getProvinceList () {
|
|
|
|
+ getProvince().then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ this.addrProvinceList = res.data || []
|
|
|
|
+ } else {
|
|
|
|
+ this.addrProvinceList = []
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 获取城市列表
|
|
|
|
+ getCityList (e) {
|
|
|
|
+ if (e.target.value == '') return
|
|
|
|
+ this.addrCityList = []
|
|
|
|
+ this.addrDistrictList = []
|
|
|
|
+ this.queryParam.cityCode = ''
|
|
|
|
+ this.queryParam.districtCode = ''
|
|
|
|
+ this.getCityListRequest(e.target.value)
|
|
|
|
+ },
|
|
|
|
+ getCityListRequest (val) {
|
|
|
|
+ getCityByPro({
|
|
|
|
+ id: val
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ this.addrCityList = res.data || []
|
|
|
|
+ } else {
|
|
|
|
+ this.addrCityList = []
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 获取区县列表
|
|
|
|
+ getAreaList (e) {
|
|
|
|
+ if (e.target.value == '') return
|
|
|
|
+ this.addrDistrictList = []
|
|
|
|
+ this.queryParam.districtCode = ''
|
|
|
|
+ this.initChart()
|
|
|
|
+ this.getAreaListRequest(e.target.value)
|
|
|
|
+ },
|
|
|
|
+ getAreaListRequest (val) {
|
|
|
|
+ getDistrictByCity({
|
|
|
|
+ id: val
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ this.addrDistrictList = res.data || []
|
|
|
|
+ } else {
|
|
|
|
+ this.addrDistrictList = []
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
// 全屏
|
|
// 全屏
|
|
fullScreen () {
|
|
fullScreen () {
|
|
var element = document.documentElement
|
|
var element = document.documentElement
|
|
@@ -157,7 +250,11 @@ export default {
|
|
},
|
|
},
|
|
// 获取用户总数
|
|
// 获取用户总数
|
|
getUser () {
|
|
getUser () {
|
|
- getUserTotal({}).then(res => {
|
|
|
|
|
|
+ getUserTotal({
|
|
|
|
+ 'provinceCode': this.queryParam.provinceCode,
|
|
|
|
+ 'cityCode': this.queryParam.cityCode,
|
|
|
|
+ 'districtCode': this.queryParam.districtCode
|
|
|
|
+ }).then(res => {
|
|
const data = res.data || 0
|
|
const data = res.data || 0
|
|
const arr = []
|
|
const arr = []
|
|
arr.push(data)
|
|
arr.push(data)
|
|
@@ -171,14 +268,18 @@ export default {
|
|
},
|
|
},
|
|
// 获取设备总数
|
|
// 获取设备总数
|
|
getDevice () {
|
|
getDevice () {
|
|
- getDeviceTotal({}).then(res => {
|
|
|
|
|
|
+ getDeviceTotal({
|
|
|
|
+ 'provinceCode': this.queryParam.provinceCode,
|
|
|
|
+ 'cityCode': this.queryParam.cityCode,
|
|
|
|
+ 'districtCode': this.queryParam.districtCode
|
|
|
|
+ }).then(res => {
|
|
const data = res.data || 0
|
|
const data = res.data || 0
|
|
const arr = []
|
|
const arr = []
|
|
arr.push(data)
|
|
arr.push(data)
|
|
this.devTotal = {
|
|
this.devTotal = {
|
|
- number: arr,
|
|
|
|
- content: '{nt}',
|
|
|
|
- formatter: this.formatter
|
|
|
|
|
|
+ number: arr,
|
|
|
|
+ content: '{nt}',
|
|
|
|
+ formatter: this.formatter
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
@@ -186,34 +287,82 @@ export default {
|
|
getNewRegister () {
|
|
getNewRegister () {
|
|
const params = {
|
|
const params = {
|
|
beginRegisterTime: this.beginDate,
|
|
beginRegisterTime: this.beginDate,
|
|
- endRegisterTime: this.endDate
|
|
|
|
|
|
+ endRegisterTime: this.endDate,
|
|
|
|
+ 'provinceCode': this.queryParam.provinceCode,
|
|
|
|
+ 'cityCode': this.queryParam.cityCode,
|
|
|
|
+ 'districtCode': this.queryParam.districtCode
|
|
}
|
|
}
|
|
- console.log(params, 'pppppp')
|
|
|
|
- getNewRegister(params).then(res => {
|
|
|
|
- console.log(res, 'rrrrrr')
|
|
|
|
- if (res.status == 200) {
|
|
|
|
- const xData = res.data.dateTime
|
|
|
|
- const yData = res.data.registerNum
|
|
|
|
- const arr = []
|
|
|
|
- yData.map(item => {
|
|
|
|
- arr.push(Number(item))
|
|
|
|
- console.log(item, 'iiiiiiii')
|
|
|
|
- })
|
|
|
|
- console.log(yData, arr, 'yData')
|
|
|
|
- this.initChart1(xData, arr)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ getNewRegister(params).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ const xData = res.data.dateTime
|
|
|
|
+ const yData = res.data.registerNum
|
|
|
|
+ const arr = []
|
|
|
|
+ yData.map(item => {
|
|
|
|
+ arr.push(Number(item))
|
|
|
|
+ })
|
|
|
|
+ this.initChart1(xData, arr)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 获取分时投递
|
|
|
|
+ getTimeSharingLog () {
|
|
|
|
+ const params = {
|
|
|
|
+ 'beginDeliveryDate': this.beginDate,
|
|
|
|
+ 'endDeliveryDate': this.endDate,
|
|
|
|
+ 'provinceCode': this.queryParam.provinceCode,
|
|
|
|
+ 'cityCode': this.queryParam.cityCode,
|
|
|
|
+ 'districtCode': this.queryParam.districtCode
|
|
|
|
+ }
|
|
|
|
+ getTimeSharingLog(params).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ this.initChart2(res.data)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 排行榜
|
|
|
|
+ getDeliveryTop () {
|
|
|
|
+ const params = {
|
|
|
|
+ 'beginDeliveryDate': this.beginDate,
|
|
|
|
+ 'endDeliveryDate': this.endDate,
|
|
|
|
+ 'provinceCode': this.queryParam.provinceCode,
|
|
|
|
+ 'cityCode': this.queryParam.cityCode,
|
|
|
|
+ 'districtCode': this.queryParam.districtCode
|
|
|
|
+ }
|
|
|
|
+ getDeliveryTop(params).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ this.initChart3(res.data)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getLocationCode () {
|
|
|
|
+ const cityCode = this.queryParam.cityCode
|
|
|
|
+ const districtCode = this.queryParam.districtCode
|
|
|
|
+ getLocationCode({
|
|
|
|
+ keyword: districtCode || cityCode
|
|
|
|
+ }).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ if (this.map) {
|
|
|
|
+ this.map.panTo(new TMap.LatLng(res.data.lat, res.data.lng))
|
|
|
|
+ } else {
|
|
|
|
+ this.initMap(res.data)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
},
|
|
},
|
|
// 初始化地图
|
|
// 初始化地图
|
|
- initMap () {
|
|
|
|
|
|
+ initMap (res) {
|
|
// 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
// 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
- var center = new TMap.LatLng(34.329828, 108.708344)
|
|
|
|
|
|
+ var center = new TMap.LatLng(res.lat, res.lng)
|
|
// 定义map变量,调用 TMap.Map() 构造函数创建地图
|
|
// 定义map变量,调用 TMap.Map() 构造函数创建地图
|
|
this.map = new TMap.Map(document.getElementById('map'), {
|
|
this.map = new TMap.Map(document.getElementById('map'), {
|
|
center: center, // 设置地图中心点坐标
|
|
center: center, // 设置地图中心点坐标
|
|
mapStyleId: 'style3',
|
|
mapStyleId: 'style3',
|
|
- zoom: 17.2, // 设置地图缩放级别
|
|
|
|
- pitch: 43.5, // 设置俯仰角
|
|
|
|
|
|
+ zoom: 13, // 设置地图缩放级别
|
|
|
|
+ pitch: 0, // 设置俯仰角
|
|
|
|
+ showControl: false,
|
|
rotation: 45 // 设置地图旋转角度
|
|
rotation: 45 // 设置地图旋转角度
|
|
})
|
|
})
|
|
// 创建并初始化MultiMarker 点标记
|
|
// 创建并初始化MultiMarker 点标记
|
|
@@ -223,13 +372,13 @@ export default {
|
|
styles: {
|
|
styles: {
|
|
// 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
|
|
// 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
|
|
'myStyle': new TMap.MarkerStyle({
|
|
'myStyle': new TMap.MarkerStyle({
|
|
- 'width': 30, // 点标记样式宽度(像素)
|
|
|
|
- 'height': 30, // 点标记样式高度(像素)
|
|
|
|
- 'src': '../mark.png', // 图片路径
|
|
|
|
|
|
+ 'width': 16, // 点标记样式宽度(像素)
|
|
|
|
+ 'height': 20, // 点标记样式高度(像素)
|
|
|
|
+ 'src': '../ldt.png', // 图片路径
|
|
// 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
|
|
// 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
|
|
'anchor': {
|
|
'anchor': {
|
|
- x: 16,
|
|
|
|
- y: 32
|
|
|
|
|
|
+ x: 8,
|
|
|
|
+ y: 15
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
@@ -250,9 +399,51 @@ export default {
|
|
// 监听地图加载完成
|
|
// 监听地图加载完成
|
|
this.map.on('tilesloaded', this.getMapMark)
|
|
this.map.on('tilesloaded', this.getMapMark)
|
|
},
|
|
},
|
|
|
|
+ // 获取热力图
|
|
|
|
+ getHeatMapData () {
|
|
|
|
+ // 初始化热力图并添加至map图层
|
|
|
|
+ const heat = new TMap.visualization.Heat({
|
|
|
|
+ max: 350, // 热力最强阈值
|
|
|
|
+ min: 0, // 热力最弱阈值
|
|
|
|
+ height: 0, // 峰值高度
|
|
|
|
+ gradientColor: { // 渐变颜色
|
|
|
|
+ 0.6: '#673198',
|
|
|
|
+ 0.8: '#e53390',
|
|
|
|
+ 0.9: '#ffc95a'
|
|
|
|
+ },
|
|
|
|
+ radius: 30 // 最大辐射半径
|
|
|
|
+ }).addTo(this.map)
|
|
|
|
+ const params = {
|
|
|
|
+ 'beginDeliveryDate': this.beginDate,
|
|
|
|
+ 'endDeliveryDate': this.endDate,
|
|
|
|
+ 'provinceCode': this.queryParam.provinceCode,
|
|
|
|
+ 'cityCode': this.queryParam.cityCode,
|
|
|
|
+ 'districtCode': this.queryParam.districtCode
|
|
|
|
+ }
|
|
|
|
+ getHeatMapData(params).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ const ret = []
|
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
|
+ if (res.data[i].lat <= 90) {
|
|
|
|
+ ret.push({
|
|
|
|
+ count: res.data[i].deliveryTimes,
|
|
|
|
+ lat: res.data[i].lat,
|
|
|
|
+ lng: res.data[i].lng
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // console.log(ret)
|
|
|
|
+ heat.setData(ret)// 设置数据
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
// 获取地图点坐标
|
|
// 获取地图点坐标
|
|
getMapMark () {
|
|
getMapMark () {
|
|
- getMapStation({}).then(res => {
|
|
|
|
|
|
+ getMapStation({
|
|
|
|
+ 'provinceCode': this.queryParam.provinceCode,
|
|
|
|
+ 'cityCode': this.queryParam.cityCode,
|
|
|
|
+ 'districtCode': this.queryParam.districtCode
|
|
|
|
+ }).then(res => {
|
|
const list = res.data || []
|
|
const list = res.data || []
|
|
const data = []
|
|
const data = []
|
|
list.map((item, index) => {
|
|
list.map((item, index) => {
|
|
@@ -272,6 +463,7 @@ export default {
|
|
// 增加点标记
|
|
// 增加点标记
|
|
this.markerLayer.add(data)
|
|
this.markerLayer.add(data)
|
|
})
|
|
})
|
|
|
|
+ this.getHeatMapData()
|
|
},
|
|
},
|
|
// 显示地图标记点名称
|
|
// 显示地图标记点名称
|
|
showMarkTitle (evt) {
|
|
showMarkTitle (evt) {
|
|
@@ -281,106 +473,67 @@ export default {
|
|
},
|
|
},
|
|
// 初始化图表
|
|
// 初始化图表
|
|
initChart () {
|
|
initChart () {
|
|
- // 图表配置
|
|
|
|
- changeDefaultConfig('color', ['#00ffff'])
|
|
|
|
- changeDefaultConfig('title', {
|
|
|
|
- offset: [0, -40],
|
|
|
|
- style: {
|
|
|
|
- fill: '#a2ebff',
|
|
|
|
- textAlign: 'center'
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- const xyOpts = {
|
|
|
|
- nameTextStyle: {
|
|
|
|
- fill: '#fff',
|
|
|
|
- fontSize: 10
|
|
|
|
- },
|
|
|
|
- axisLabel: {
|
|
|
|
- style: {
|
|
|
|
- fill: '#fff'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- axisLine: {
|
|
|
|
- show: false
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- changeDefaultConfig('xAxis', xyOpts)
|
|
|
|
- changeDefaultConfig('yAxis', xyOpts)
|
|
|
|
- changeDefaultConfig('grid', {
|
|
|
|
- right: 60,
|
|
|
|
- bottom: 50,
|
|
|
|
- top: 85,
|
|
|
|
- left: 50
|
|
|
|
- })
|
|
|
|
- // 新用户注册量
|
|
|
|
-
|
|
|
|
- // 分时投递量
|
|
|
|
- const con2 = document.getElementById('con2')
|
|
|
|
- const chart2 = new Charts(con2)
|
|
|
|
- const option2 = {
|
|
|
|
- title: {
|
|
|
|
- text: '分时投递量'
|
|
|
|
- },
|
|
|
|
- legend: {
|
|
|
|
- show: false
|
|
|
|
- },
|
|
|
|
- xAxis: {
|
|
|
|
- name: '时间段',
|
|
|
|
- data: ['08', '10', '12', '14', '16', '18', '20']
|
|
|
|
- },
|
|
|
|
- yAxis: {
|
|
|
|
- name: 'kg',
|
|
|
|
- data: 'value'
|
|
|
|
- },
|
|
|
|
- series: [{
|
|
|
|
- name: '系列A',
|
|
|
|
- data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
|
|
|
|
- type: 'line',
|
|
|
|
- stack: 'a',
|
|
|
|
- smooth: true,
|
|
|
|
- lineArea: {
|
|
|
|
- show: true,
|
|
|
|
- gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: '系列B',
|
|
|
|
- data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
|
|
|
|
- type: 'line',
|
|
|
|
- stack: 'a',
|
|
|
|
- smooth: true,
|
|
|
|
- lineArea: {
|
|
|
|
- show: true,
|
|
|
|
- gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: '系列C',
|
|
|
|
- data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
|
|
|
|
- type: 'line',
|
|
|
|
- stack: 'a',
|
|
|
|
- smooth: true,
|
|
|
|
- lineArea: {
|
|
|
|
- show: true,
|
|
|
|
- gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- }
|
|
|
|
- chart2.setOption(option2)
|
|
|
|
- this.chart2 = chart2
|
|
|
|
|
|
+ // 用户总数
|
|
|
|
+ this.getUser()
|
|
|
|
+ // 设备总数
|
|
|
|
+ this.getDevice()
|
|
|
|
+ // 地图
|
|
|
|
+ this.getLocationCode()
|
|
|
|
+ // 新注册用户
|
|
|
|
+ this.getNewRegister()
|
|
|
|
+ // 分时投递
|
|
|
|
+ this.getTimeSharingLog()
|
|
// 设备分布比例
|
|
// 设备分布比例
|
|
const con3 = document.getElementById('con3')
|
|
const con3 = document.getElementById('con3')
|
|
- const chart3 = new Charts(con3)
|
|
|
|
|
|
+ const chart3 = echarts.init(con3)
|
|
const option3 = {
|
|
const option3 = {
|
|
color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
|
|
color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
|
|
title: {
|
|
title: {
|
|
- text: '设备分布比例'
|
|
|
|
|
|
+ text: '设备分布比例',
|
|
|
|
+ top: 20,
|
|
|
|
+ left: 20,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: '#abd7ff'
|
|
|
|
+ },
|
|
|
|
+ textAlingn: 'left'
|
|
},
|
|
},
|
|
|
|
+ tooltip: {},
|
|
series: [{
|
|
series: [{
|
|
type: 'pie',
|
|
type: 'pie',
|
|
radius: ['30%', '50%'],
|
|
radius: ['30%', '50%'],
|
|
startAngle: -Math.PI / 8,
|
|
startAngle: -Math.PI / 8,
|
|
|
|
+ avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
|
|
|
|
+ label: {
|
|
|
|
+ normal: {
|
|
|
|
+ formatter: params => {
|
|
|
|
+ return (
|
|
|
|
+ '{name|' + params.name + '}{value|' +
|
|
|
|
+ params.value + '%' + '}'
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ padding: [0, -70, 25, -70],
|
|
|
|
+ rich: {
|
|
|
|
+ name: {
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ padding: [0, 10, 0, 4],
|
|
|
|
+ color: '#999'
|
|
|
|
+ },
|
|
|
|
+ value: {
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ color: '#999'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ labelLine: {
|
|
|
|
+ normal: {
|
|
|
|
+ length: 20,
|
|
|
|
+ length2: 60,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#e6e6e6'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
data: [{
|
|
data: [{
|
|
name: '居民小区',
|
|
name: '居民小区',
|
|
value: 49
|
|
value: 49
|
|
@@ -405,88 +558,253 @@ export default {
|
|
}
|
|
}
|
|
chart3.setOption(option3)
|
|
chart3.setOption(option3)
|
|
this.chart3 = chart3
|
|
this.chart3 = chart3
|
|
|
|
+ this.chart3.resize()
|
|
// 网点投递量排名
|
|
// 网点投递量排名
|
|
|
|
+ this.getDeliveryTop()
|
|
|
|
+ },
|
|
|
|
+ // 排行榜
|
|
|
|
+ initChart3 (res) {
|
|
const con4 = document.getElementById('con4')
|
|
const con4 = document.getElementById('con4')
|
|
- const chart4 = new Charts(con4)
|
|
|
|
|
|
+ const chart4 = echarts.init(con4)
|
|
const option4 = {
|
|
const option4 = {
|
|
title: {
|
|
title: {
|
|
- text: '网点投递量排名'
|
|
|
|
|
|
+ text: '网点投递量排名',
|
|
|
|
+ top: 20,
|
|
|
|
+ left: 20,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: '#abd7ff'
|
|
|
|
+ },
|
|
|
|
+ textAlingn: 'left'
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ formatter: '{b0}: {c0}kg'
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: 15,
|
|
|
|
+ right: 15,
|
|
|
|
+ bottom: 20,
|
|
|
|
+ top: 85,
|
|
|
|
+ containLabel: true
|
|
},
|
|
},
|
|
xAxis: {
|
|
xAxis: {
|
|
- name: '网点',
|
|
|
|
- data: ['科技路', '钟楼', '南门', '中登大厦', '海景国际', '十里锦绣', '绿地生态城']
|
|
|
|
|
|
+ data: res.stationName
|
|
},
|
|
},
|
|
yAxis: {
|
|
yAxis: {
|
|
name: 'kg',
|
|
name: 'kg',
|
|
- data: 'value'
|
|
|
|
|
|
+ type: 'value'
|
|
},
|
|
},
|
|
series: [{
|
|
series: [{
|
|
- data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
|
|
|
|
|
|
+ data: res.deliveryWeight,
|
|
type: 'bar',
|
|
type: 'bar',
|
|
- gradient: {
|
|
|
|
- color: ['#37a2da', '#67e0e3']
|
|
|
|
|
|
+ barWidth: 30,
|
|
|
|
+ label: {
|
|
|
|
+ normal: {
|
|
|
|
+ show: true,
|
|
|
|
+ position: 'top'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: '#37a2da',
|
|
|
|
+ shadowColor: '#246d91',
|
|
|
|
+ shadowOffsetX: 10,
|
|
|
|
+ shadowOffsetY: -1
|
|
}
|
|
}
|
|
}]
|
|
}]
|
|
}
|
|
}
|
|
chart4.setOption(option4)
|
|
chart4.setOption(option4)
|
|
this.chart4 = chart4
|
|
this.chart4 = chart4
|
|
|
|
+ this.chart4.resize()
|
|
|
|
+ },
|
|
|
|
+ // 分时投递记录
|
|
|
|
+ initChart2 (res) {
|
|
|
|
+ const con2 = document.getElementById('con2')
|
|
|
|
+ const chart2 = echarts.init(con2)
|
|
|
|
+ const series = []
|
|
|
|
+ const arr = res.dayKey.slice(res.dayKey.length - 3)
|
|
|
|
+ console.log(arr)
|
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
|
+ series.push({
|
|
|
|
+ name: arr[i],
|
|
|
|
+ data: res.value[arr[i]],
|
|
|
|
+ type: 'line',
|
|
|
|
+ stack: '投递量',
|
|
|
|
+ smooth: true,
|
|
|
|
+ barWidth: 10,
|
|
|
|
+ label: {
|
|
|
|
+ normal: {
|
|
|
|
+ show: true,
|
|
|
|
+ position: 'top'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ const option2 = {
|
|
|
|
+ title: {
|
|
|
|
+ text: '分时投递量',
|
|
|
|
+ top: 20,
|
|
|
|
+ left: 20,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: '#abd7ff'
|
|
|
|
+ },
|
|
|
|
+ textAlingn: 'left'
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ formatter: '{b0}时: {c0}kg'
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: 20,
|
|
|
|
+ right: 40,
|
|
|
|
+ bottom: 20,
|
|
|
|
+ top: 85,
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ data: arr,
|
|
|
|
+ orient: 'vertical',
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 10
|
|
|
|
+ },
|
|
|
|
+ top: 15,
|
|
|
|
+ left: 'right'
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ name: '时',
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: res.hourKey,
|
|
|
|
+ nameTextStyle: {
|
|
|
|
+ color: '#666'
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#666'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ name: 'kg',
|
|
|
|
+ type: 'value',
|
|
|
|
+ nameTextStyle: {
|
|
|
|
+ color: '#666'
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#666'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ series: series
|
|
|
|
+ }
|
|
|
|
+ chart2.setOption(option2)
|
|
|
|
+ this.chart2 = chart2
|
|
|
|
+ this.chart2.resize()
|
|
},
|
|
},
|
|
// 初始化新用户注册量
|
|
// 初始化新用户注册量
|
|
initChart1 (xData, yData) {
|
|
initChart1 (xData, yData) {
|
|
const con1 = document.getElementById('con1')
|
|
const con1 = document.getElementById('con1')
|
|
- const chart1 = new Charts(con1)
|
|
|
|
|
|
+ const chart1 = echarts.init(con1)
|
|
const option1 = {
|
|
const option1 = {
|
|
title: {
|
|
title: {
|
|
- text: '新用户注册量'
|
|
|
|
|
|
+ text: '新用户注册量',
|
|
|
|
+ top: 20,
|
|
|
|
+ left: 20,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: '#abd7ff'
|
|
|
|
+ },
|
|
|
|
+ textAlingn: 'left'
|
|
},
|
|
},
|
|
|
|
+ tooltip: {
|
|
|
|
+ formatter: '{b0}日: {c0}人'
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: 15,
|
|
|
|
+ right: 60,
|
|
|
|
+ bottom: 20,
|
|
|
|
+ top: 85,
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
xAxis: {
|
|
xAxis: {
|
|
- name: '日期',
|
|
|
|
- data: xData
|
|
|
|
|
|
+ name: '日期',
|
|
|
|
+ data: xData,
|
|
|
|
+ type: 'category',
|
|
|
|
+ nameTextStyle: {
|
|
|
|
+ color: '#666'
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#666'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
},
|
|
},
|
|
yAxis: {
|
|
yAxis: {
|
|
- name: '用户',
|
|
|
|
- data: 'value'
|
|
|
|
|
|
+ name: '用户',
|
|
|
|
+ type: 'value',
|
|
|
|
+ nameTextStyle: {
|
|
|
|
+ color: '#666'
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#666'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
},
|
|
},
|
|
series: [{
|
|
series: [{
|
|
data: yData,
|
|
data: yData,
|
|
type: 'line',
|
|
type: 'line',
|
|
smooth: true,
|
|
smooth: true,
|
|
- lineArea: {
|
|
|
|
- show: true,
|
|
|
|
- gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
|
|
|
|
|
|
+ label: {
|
|
|
|
+ normal: {
|
|
|
|
+ show: true,
|
|
|
|
+ position: 'top'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: 'rgba(55, 162, 218, 0.9)'
|
|
|
|
+ },
|
|
|
|
+ areaStyle: {
|
|
|
|
+ color: {
|
|
|
|
+ type: 'linear',
|
|
|
|
+ x: 0,
|
|
|
|
+ y: 0,
|
|
|
|
+ x2: 0,
|
|
|
|
+ y2: 1,
|
|
|
|
+ colorStops: [{
|
|
|
|
+ offset: 0, color: 'rgba(55, 162, 218, 0.5)' // 0% 处的颜色
|
|
|
|
+ }, {
|
|
|
|
+ offset: 1, color: 'rgba(55, 162, 218, 0.9)' // 100% 处的颜色
|
|
|
|
+ }]
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}]
|
|
}]
|
|
}
|
|
}
|
|
chart1.setOption(option1)
|
|
chart1.setOption(option1)
|
|
this.chart1 = chart1
|
|
this.chart1 = chart1
|
|
|
|
+ this.chart1.resize()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted () {
|
|
mounted () {
|
|
- this.initMap()
|
|
|
|
const that = this
|
|
const that = this
|
|
window.onresize = () => {
|
|
window.onresize = () => {
|
|
return (() => {
|
|
return (() => {
|
|
- // window.screenWidth = document.body.clientWidth
|
|
|
|
- // that.screenWidth = window.screenWidth
|
|
|
|
- this.chart1.resize()
|
|
|
|
- this.chart2.resize()
|
|
|
|
- this.chart3.resize()
|
|
|
|
- this.chart4.resize()
|
|
|
|
|
|
+ that.chart1.resize()
|
|
|
|
+ that.chart2.resize()
|
|
|
|
+ that.chart3.resize()
|
|
|
|
+ that.chart4.resize()
|
|
})()
|
|
})()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
beforeRouteEnter (to, from, next) {
|
|
beforeRouteEnter (to, from, next) {
|
|
next(vm => {
|
|
next(vm => {
|
|
- vm.getUser()
|
|
|
|
- vm.getDevice()
|
|
|
|
- vm.initChart()
|
|
|
|
- vm.getNewRegister()
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ vm.initChart()
|
|
|
|
+ vm.getAreaListRequest(vm.queryParam.cityCode)
|
|
|
|
+ }, 150)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
beforeRouterLeave (to, from, next) {
|
|
beforeRouterLeave (to, from, next) {
|
|
next(vm => {
|
|
next(vm => {
|
|
// 销毁地图
|
|
// 销毁地图
|
|
vm.map.destroy()
|
|
vm.map.destroy()
|
|
|
|
+ vm.map = null
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -513,8 +831,8 @@ export default {
|
|
|
|
|
|
&:first-child {
|
|
&:first-child {
|
|
width: 40%;
|
|
width: 40%;
|
|
- color: #79ccff;
|
|
|
|
-
|
|
|
|
|
|
+ color: #b3dcf5;
|
|
|
|
+ padding-right: 10%;
|
|
.border-box-content {
|
|
.border-box-content {
|
|
font-size: 30px;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -522,7 +840,7 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
&:last-child {
|
|
- width: 25%;
|
|
|
|
|
|
+ width: 35%;
|
|
color: #0ed3ff;
|
|
color: #0ed3ff;
|
|
|
|
|
|
.border-box-content {
|
|
.border-box-content {
|
|
@@ -536,7 +854,7 @@ export default {
|
|
select {
|
|
select {
|
|
background: #021931;
|
|
background: #021931;
|
|
border: 1px solid #3e566d;
|
|
border: 1px solid #3e566d;
|
|
- width: 35%;
|
|
|
|
|
|
+ min-width: 20%;
|
|
padding: 2px 10px;
|
|
padding: 2px 10px;
|
|
margin: 0 10px;
|
|
margin: 0 10px;
|
|
box-shadow: inset 0 0 2px #69b2ff;
|
|
box-shadow: inset 0 0 2px #69b2ff;
|
|
@@ -557,10 +875,10 @@ export default {
|
|
display: flex;
|
|
display: flex;
|
|
padding: 5px;
|
|
padding: 5px;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
-
|
|
|
|
- >div {
|
|
|
|
- height: 50%;
|
|
|
|
- }
|
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ > div{
|
|
|
|
+ height: 400px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.b-middle {
|
|
.b-middle {
|