|
@@ -0,0 +1,1219 @@
|
|
|
+<template>
|
|
|
+ <div class="dataView-content">
|
|
|
+ <!-- <dv-loading>Loading...</dv-loading> -->
|
|
|
+ <div class="data-header">
|
|
|
+ <div class="total-block">
|
|
|
+ <div>
|
|
|
+ <div class="total-label"><i class="cor1" v-for="item in 3" :key="item">|</i>用户总数</div>
|
|
|
+ <div class="total-value cor1">{{ userTotal }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="total-label"><i class="cor2" v-for="item in 3" :key="item">|</i>试点单位数</div>
|
|
|
+ <div class="total-value cor2">{{ dwTotal }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="total-label"><i class="cor3" v-for="item in 3" :key="item">|</i>设备总数</div>
|
|
|
+ <div class="total-value cor3">{{ devTotal }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page-title">
|
|
|
+ <!-- 智享亿家投递大数据 -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="border-box-content">
|
|
|
+ <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> -->
|
|
|
+ <a-icon
|
|
|
+ @click="isFullscreenMap"
|
|
|
+ :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
|
|
|
+ :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="data-body">
|
|
|
+ <div class="b-middle">
|
|
|
+ <div>
|
|
|
+ <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 }} kg</div>
|
|
|
+ </div>
|
|
|
+ <div class="laji-item">
|
|
|
+ <div class="cor2">其它垃圾</div>
|
|
|
+ <div>{{ rubbishWeightData.GATHER_OTHER }} kg</div>
|
|
|
+ </div>
|
|
|
+ <div class="laji-item">
|
|
|
+ <div class="cor3">厨余垃圾</div>
|
|
|
+ <div>{{ rubbishWeightData.GATHER_KITCHEN }} kg</div>
|
|
|
+ </div>
|
|
|
+ <div class="laji-item">
|
|
|
+ <div class="cor4">建筑垃圾</div>
|
|
|
+ <div>{{ rubbishWeightData.GATHER_BUILDING }} kg</div>
|
|
|
+ </div>
|
|
|
+ <div class="laji-item">
|
|
|
+ <div class="cor5">有害垃圾</div>
|
|
|
+ <div>{{ rubbishWeightData.HARM }} kg</div>
|
|
|
+ </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 ref="con1">
|
|
|
+ <div id="con1" style="width: 100%;height: 100%;"></div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <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 ref="con4">
|
|
|
+ <div id="con4" style="width: 100%;height: 100%;"></div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="b-right">
|
|
|
+ <!-- 设备比例分布 -->
|
|
|
+ <div>
|
|
|
+ <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 ref="con5">
|
|
|
+ <div id="con5" style="width: 100%;height: 100%;"></div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ <!-- 各机构投递量分布比例 -->
|
|
|
+ <div>
|
|
|
+ <dv-border-box-13 ref="con6">
|
|
|
+ <div id="con6" style="width: 100%;height: 100%;"></div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import echarts from 'echarts'
|
|
|
+import {
|
|
|
+ getUserTotal,
|
|
|
+ getDeviceTotal,
|
|
|
+ getMapStation
|
|
|
+} from '@/api/nodeMap.js'
|
|
|
+import {
|
|
|
+ getNewRegister,
|
|
|
+ getTimeSharingLog,
|
|
|
+ getDeliveryTop,
|
|
|
+ getHeatMapData,
|
|
|
+ getLocationCode,
|
|
|
+ getRubbishTypeTotal,
|
|
|
+ querySumWeight,
|
|
|
+ labelWeightPercent,
|
|
|
+ devicePercent,
|
|
|
+ getDwTotal
|
|
|
+} from '@/api/borard.js'
|
|
|
+import {
|
|
|
+ getProvince,
|
|
|
+ getCityByPro,
|
|
|
+ getDistrictByCity
|
|
|
+} from '@/api/station'
|
|
|
+import moment from 'moment'
|
|
|
+import getDate from '@/libs/getDate.js'
|
|
|
+export default {
|
|
|
+ name: 'DataBoratd',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ queryParam: {
|
|
|
+ provinceCode: '610000', // 省
|
|
|
+ cityCode: '', // 市
|
|
|
+ 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,
|
|
|
+ chart2: null,
|
|
|
+ chart3: null,
|
|
|
+ chart4: null,
|
|
|
+ chart5: null,
|
|
|
+ chart6: null,
|
|
|
+ userTotal: 0,
|
|
|
+ devTotal: 0,
|
|
|
+ dwTotal: 0,
|
|
|
+ isMapFull: false,
|
|
|
+ map: null, // 地图对象
|
|
|
+ markerLayer: 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'), // 查询结束时间
|
|
|
+ rubbishWeightData: {
|
|
|
+ 'GATHER_OTHER': 0, // 其它垃圾
|
|
|
+ 'GATHER_KITCHEN': 0, // 厨余垃圾
|
|
|
+ 'GATHER_BUILDING': 0, // 建筑垃圾
|
|
|
+ 'HARM': 0, // 有害垃圾
|
|
|
+ 'RECYCLING': 0 // 可回收垃圾
|
|
|
+ }, // 垃圾产生量数据
|
|
|
+ rubbishWeightTotal: 0 // 垃圾产生量数据总计
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 == '') {
|
|
|
+ this.initChart()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.addrDistrictList = []
|
|
|
+ this.queryParam.districtCode = ''
|
|
|
+ // 地图经纬度
|
|
|
+ this.getLocationCode()
|
|
|
+ this.getAreaListRequest(e.target.value)
|
|
|
+ this.initChart()
|
|
|
+ },
|
|
|
+ getAreaListRequest (val) {
|
|
|
+ getDistrictByCity({
|
|
|
+ id: val
|
|
|
+ }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.addrDistrictList = res.data || []
|
|
|
+ } else {
|
|
|
+ this.addrDistrictList = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 全屏
|
|
|
+ fullScreen () {
|
|
|
+ var element = document.documentElement
|
|
|
+ if (element.requestFullscreen) {
|
|
|
+ element.requestFullscreen()
|
|
|
+ } else if (element.msRequestFullscreen) {
|
|
|
+ element.msRequestFullscreen()
|
|
|
+ } else if (element.mozRequestFullScreen) {
|
|
|
+ element.mozRequestFullScreen()
|
|
|
+ } else if (element.webkitRequestFullscreen) {
|
|
|
+ element.webkitRequestFullscreen()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 退出全屏
|
|
|
+ exitFullscreen () {
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen()
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen()
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen()
|
|
|
+ } else if (document.webkitExitFullscreen) {
|
|
|
+ document.webkitExitFullscreen()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 地图是否全屏展示
|
|
|
+ isFullscreenMap () {
|
|
|
+ this.isMapFull = !this.isMapFull
|
|
|
+ if (this.isMapFull) {
|
|
|
+ this.fullScreen()
|
|
|
+ } else {
|
|
|
+ this.exitFullscreen()
|
|
|
+ }
|
|
|
+ this.chart1.resize()
|
|
|
+ this.chart2.resize()
|
|
|
+ this.chart3.resize()
|
|
|
+ this.chart4.resize()
|
|
|
+ },
|
|
|
+ formatter (number) {
|
|
|
+ const numbers = number.toString().split('').reverse()
|
|
|
+ const segs = []
|
|
|
+ while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
|
|
|
+ return segs.join(',').split('').reverse().join('')
|
|
|
+ },
|
|
|
+ // 获取用户总数
|
|
|
+ getUser () {
|
|
|
+ getUserTotal({}).then(res => {
|
|
|
+ const data = res.data || 0
|
|
|
+ this.userTotal = data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取设备总数
|
|
|
+ getDevice () {
|
|
|
+ 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 = {
|
|
|
+ beginRegisterTime: this.beginDate,
|
|
|
+ endRegisterTime: this.endDate,
|
|
|
+ 'provinceCode': this.queryParam.provinceCode,
|
|
|
+ 'cityCode': this.queryParam.cityCode,
|
|
|
+ 'districtCode': this.queryParam.districtCode
|
|
|
+ }
|
|
|
+ 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 = {
|
|
|
+ 'findRubbishDataBeginDate': this.beginDate,
|
|
|
+ 'findRubbishDataEndDate': 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 && res.data) {
|
|
|
+ // res.data.deliveryWeight.forEach(item => {
|
|
|
+ // item = Math.round(item / 1000)
|
|
|
+ // })
|
|
|
+ console.log(res.data, 'res.data')
|
|
|
+ this.initChart3(res.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 设备分布比例
|
|
|
+ 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 = Math.round(item.weight / 1000000)
|
|
|
+ })
|
|
|
+ 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 () {
|
|
|
+ querySumWeight({}).then(res => {
|
|
|
+ console.log(res, '垃圾产生量')
|
|
|
+ if (res.status == 200) {
|
|
|
+ Object.keys(this.rubbishWeightData).map(item => {
|
|
|
+ this.rubbishWeightData[item] = this.formatter(Math.round((res.data.list.find(key => key.rubbishType == item).rubbishWeight) / 1000))
|
|
|
+ })
|
|
|
+ this.rubbishWeightTotal = this.formatter(Math.round(res.data.total / 1000))
|
|
|
+ } else {
|
|
|
+ this.rubbishWeightTotal = 0
|
|
|
+ this.rubbishWeightData = {
|
|
|
+ 'GATHER_OTHER': 0, // 其它垃圾
|
|
|
+ 'GATHER_KITCHEN': 0, // 厨余垃圾
|
|
|
+ 'GATHER_BUILDING': 0, // 建筑垃圾
|
|
|
+ 'HARM': 0, // 有害垃圾
|
|
|
+ 'RECYCLING': 0 // 可回收垃圾
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 各分类垃圾量分布
|
|
|
+ getRubbishTypeChart () {
|
|
|
+ getRubbishTypeTotal({}).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ let data = []
|
|
|
+ if (res.status == 200 && res.data) {
|
|
|
+ // this.initChart3(res.data)
|
|
|
+ Object.keys(this.rubbishWeightData).map(item => {
|
|
|
+ const p = res.data.find(key => key.rubbishType == item)
|
|
|
+ if (p) {
|
|
|
+ data.push({
|
|
|
+ name: p.rubbishTypeDict,
|
|
|
+ value: p.rubbishWeight
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ data = [{
|
|
|
+ name: '可回收垃圾',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他垃圾',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '厨余垃圾',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '建筑垃圾',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '有害垃圾',
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ const con5 = document.getElementById('con5')
|
|
|
+ const chart5 = echarts.init(con5)
|
|
|
+ const option = this.initPie(chart5, '各分类垃圾量分布', data)
|
|
|
+ chart5.setOption(option)
|
|
|
+ this.chart5 = chart5
|
|
|
+ this.chart5.resize()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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 (res) {
|
|
|
+ // 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
|
+ var center = new TMap.LatLng(res.lat, res.lng)
|
|
|
+ // 定义map变量,调用 TMap.Map() 构造函数创建地图
|
|
|
+ this.map = new TMap.Map(document.getElementById('map'), {
|
|
|
+ center: center, // 设置地图中心点坐标
|
|
|
+ mapStyleId: 'style3',
|
|
|
+ zoom: 13, // 设置地图缩放级别
|
|
|
+ pitch: 0, // 设置俯仰角
|
|
|
+ showControl: false,
|
|
|
+ rotation: 45 // 设置地图旋转角度
|
|
|
+ })
|
|
|
+ // 创建并初始化MultiMarker 点标记
|
|
|
+ this.markerLayer = new TMap.MultiMarker({
|
|
|
+ map: this.map, // 指定地图容器
|
|
|
+ // 样式定义
|
|
|
+ styles: {
|
|
|
+ // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
|
|
|
+ 'myStyle': new TMap.MarkerStyle({
|
|
|
+ 'width': 40, // 点标记样式宽度(像素)
|
|
|
+ 'height': 40, // 点标记样式高度(像素)
|
|
|
+ 'src': '../ldt.png', // 图片路径
|
|
|
+ // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
|
|
|
+ 'anchor': {
|
|
|
+ x: 8,
|
|
|
+ y: 15
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点标记数据数组
|
|
|
+ geometries: []
|
|
|
+ })
|
|
|
+ // 初始化infoWindow
|
|
|
+ this.infoWindow = new TMap.InfoWindow({
|
|
|
+ map: this.map,
|
|
|
+ position: new TMap.LatLng(39.984104, 116.307503),
|
|
|
+ offset: {
|
|
|
+ x: 0,
|
|
|
+ y: -32
|
|
|
+ } // 设置信息窗相对position偏移像素
|
|
|
+ })
|
|
|
+ this.infoWindow.close() // 初始关闭信息窗关闭
|
|
|
+ this.markerLayer.on('mousemove', this.showMarkTitle)
|
|
|
+ // 监听地图加载完成
|
|
|
+ // this.map.on('tilesloaded', this.getMapMark)
|
|
|
+ },
|
|
|
+ // 获取热力图
|
|
|
+ getHeatMapData () {
|
|
|
+ // 初始化热力图并添加至map图层
|
|
|
+ const heat = new TMap.visualization.Heat({
|
|
|
+ max: 180, // 热力最强阈值
|
|
|
+ min: 0, // 热力最弱阈值
|
|
|
+ height: 40, // 峰值高度
|
|
|
+ gradientColor: { // 渐变颜色
|
|
|
+ 0.2: '#0a8b4d',
|
|
|
+ 0.3: '#57e0a5',
|
|
|
+ 0.5: '#05a8a4'
|
|
|
+ },
|
|
|
+ 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 () {
|
|
|
+ this.getHeatMapData()
|
|
|
+ getMapStation({
|
|
|
+ 'provinceCode': this.queryParam.provinceCode,
|
|
|
+ 'cityCode': this.queryParam.cityCode,
|
|
|
+ 'districtCode': this.queryParam.districtCode
|
|
|
+ }).then(res => {
|
|
|
+ const list = res.data || []
|
|
|
+ const data = []
|
|
|
+ list.map((item, index) => {
|
|
|
+ if (item.lat <= 85.051128 && item.lat >= -85.051128) {
|
|
|
+ const p = {
|
|
|
+ 'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
|
|
|
+ 'styleId': 'myStyle', // 指定样式id
|
|
|
+ 'position': new TMap.LatLng(Number(item.lat), Number(item
|
|
|
+ .lng)), // 点标记坐标位置
|
|
|
+ 'properties': { // 自定义属性
|
|
|
+ 'title': item.name
|
|
|
+ }
|
|
|
+ }
|
|
|
+ data.push(p)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 增加点标记
|
|
|
+ this.markerLayer.add(data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 显示地图标记点名称
|
|
|
+ showMarkTitle (evt) {
|
|
|
+ this.infoWindow.open() // 打开信息窗
|
|
|
+ this.infoWindow.setPosition(evt.geometry.position) // 设置信息窗位置
|
|
|
+ this.infoWindow.setContent(evt.geometry.properties.title) // 设置信息窗内容
|
|
|
+ },
|
|
|
+ // 初始化图表
|
|
|
+ initChart () {
|
|
|
+ // 用户总数
|
|
|
+ this.getUser()
|
|
|
+ // 设备总数
|
|
|
+ this.getDevice()
|
|
|
+ // 网点总数
|
|
|
+ this.getDwTotal()
|
|
|
+ // 新注册用户
|
|
|
+ this.getNewRegister()
|
|
|
+ // 分时投递
|
|
|
+ this.getTimeSharingLog()
|
|
|
+ // 垃圾产生量
|
|
|
+ this.getRubbishWeight()
|
|
|
+ // 各分类垃圾量分布
|
|
|
+ this.getRubbishTypeChart()
|
|
|
+ // 设备分布比例
|
|
|
+ this.getDevicePercent()
|
|
|
+ // 各机构投递量分布比例
|
|
|
+ this.getLabelWeightPercent()
|
|
|
+ // 网点投递量排名
|
|
|
+ this.getDeliveryTop()
|
|
|
+ },
|
|
|
+ // 排行榜
|
|
|
+ initChart3 (res) {
|
|
|
+ const con4 = document.getElementById('con4')
|
|
|
+ const chart4 = echarts.init(con4)
|
|
|
+ const seriesData = res.deliveryWeight.map(item => {
|
|
|
+ return Math.round(Number(item) / 1000)
|
|
|
+ })
|
|
|
+ // console.log(seriesData, 'seriesData')
|
|
|
+ const option4 = {
|
|
|
+ title: {
|
|
|
+ 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: {
|
|
|
+ data: res.stationName,
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: 'kg',
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: seriesData,
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 30,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'top'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#37a2da',
|
|
|
+ shadowColor: '#246d91',
|
|
|
+ shadowOffsetX: 8,
|
|
|
+ shadowOffsetY: 0
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ chart4.setOption(option4)
|
|
|
+ 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,
|
|
|
+ color: '#abd7ff'
|
|
|
+ },
|
|
|
+ top: 15,
|
|
|
+ left: 'right'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ name: '时',
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false, // 两边是否留白
|
|
|
+ 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) {
|
|
|
+ const con1 = document.getElementById('con1')
|
|
|
+ const chart1 = echarts.init(con1)
|
|
|
+ const option1 = {
|
|
|
+ title: {
|
|
|
+ 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: {
|
|
|
+ name: '日期',
|
|
|
+ data: xData,
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false, // 两边是否留白
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#666'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#666'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: '个',
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#666'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#666'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: yData,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ 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)
|
|
|
+ this.chart1 = chart1
|
|
|
+ this.chart1.resize()
|
|
|
+ },
|
|
|
+ // 初始化饼图 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)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const option = {
|
|
|
+ color: ['#f56548', '#ffb301', '#7561af', '#06beff', '#20ce7a' ],
|
|
|
+ title: {
|
|
|
+ text: title,
|
|
|
+ top: 20,
|
|
|
+ left: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#abd7ff'
|
|
|
+ },
|
|
|
+ textAlingn: 'left'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: `{b} : {d}%`
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ left: 'center',
|
|
|
+ bottom: '5',
|
|
|
+ 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%'],
|
|
|
+ startAngle: 75,
|
|
|
+ top: 50,
|
|
|
+ avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: params => {
|
|
|
+ // console.log(params, 'ppppppp')
|
|
|
+ return (
|
|
|
+ '{name|' + params.name + '}{value|' +
|
|
|
+ params.percent + '%' + '}'
|
|
|
+ )
|
|
|
+ },
|
|
|
+ padding: [0, -70, 25, -70],
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ fontSize: 12,
|
|
|
+ padding: [0, 4, 0, 4],
|
|
|
+ color: '#999'
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ length: 20,
|
|
|
+ length2: 70,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e6e6e6'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data,
|
|
|
+ insideLabel: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ return option
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ const that = this
|
|
|
+ // 默认定位在陕西省咸阳市
|
|
|
+ this.initMap({ lat: 34.32932, lng: 108.70929 })
|
|
|
+ window.onresize = () => {
|
|
|
+ return (() => {
|
|
|
+ that.chart1.resize()
|
|
|
+ that.chart2.resize()
|
|
|
+ that.chart3.resize()
|
|
|
+ that.chart4.resize()
|
|
|
+ that.chart5.resize()
|
|
|
+ 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.$refs.map.initWH()
|
|
|
+ vm.$refs.con1.initWH()
|
|
|
+ vm.$refs.con2.initWH()
|
|
|
+ vm.$refs.con3.initWH()
|
|
|
+ vm.$refs.con4.initWH()
|
|
|
+ vm.$refs.con5.initWH()
|
|
|
+ vm.$refs.con6.initWH()
|
|
|
+ if (vm.queryParam.cityCode != '') {
|
|
|
+ vm.getAreaListRequest(vm.queryParam.cityCode)
|
|
|
+ }
|
|
|
+ }, 150)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ beforeRouterLeave (to, from, next) {
|
|
|
+ next(vm => {
|
|
|
+ // 销毁地图
|
|
|
+ vm.map.destroy()
|
|
|
+ vm.map = null
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .dataView-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 600px;
|
|
|
+ background-image: url(../../assets/dataViewBg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .data-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-image: url(../../assets/headBg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ background-size: auto 80%;
|
|
|
+ padding: 10px 0 0;
|
|
|
+
|
|
|
+ .total-block {
|
|
|
+ width: 35%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ width: 30%;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-label {
|
|
|
+ color: #fff;
|
|
|
+ text-align: left;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ i {
|
|
|
+ transform: rotate(330deg);
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0 1px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-value {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cor1 {
|
|
|
+ color: #00ff84;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cor2 {
|
|
|
+ color: #d7ff00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cor3 {
|
|
|
+ color: #00c0ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ width: 50%;
|
|
|
+ flex-grow: 1;
|
|
|
+ color: #00aaff;
|
|
|
+ font-size: 32px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div {
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ width: 25%;
|
|
|
+ color: #0ed3ff;
|
|
|
+
|
|
|
+ .border-box-content {
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding-left: 50px;
|
|
|
+
|
|
|
+ select {
|
|
|
+ background: #021931;
|
|
|
+ border: 1px solid #3e566d;
|
|
|
+ min-width: 30%;
|
|
|
+ padding: 2px 20px;
|
|
|
+ margin: 0 10px;
|
|
|
+ box-shadow: inset 0 0 2px #69b2ff;
|
|
|
+ border-radius: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-body {
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 15px 15px;
|
|
|
+
|
|
|
+ .b-right {
|
|
|
+ width: 25%;
|
|
|
+ display: flex;
|
|
|
+ padding: 5px;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ height: 33%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .b-middle {
|
|
|
+ width: 75%;
|
|
|
+ padding: 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ &:first-child {
|
|
|
+ height: 66%;
|
|
|
+
|
|
|
+ .lajiliang {
|
|
|
+ width: 23%;
|
|
|
+ position: absolute;
|
|
|
+ padding: 15px;
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ border-radius: 6px;
|
|
|
+ left: 20px;
|
|
|
+ top: 20px;
|
|
|
+ z-index: 1000;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .laji-title {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .laji-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 15px 0;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ &:first-child {
|
|
|
+ border-radius: 30px;
|
|
|
+ padding: 2px 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cor1 {
|
|
|
+ background-color: #c2523f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cor2 {
|
|
|
+ background-color: #c59b16;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cor3 {
|
|
|
+ background-color: #7561af;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cor4 {
|
|
|
+ background-color: #418ec6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cor5 {
|
|
|
+ background-color: #20ce7a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ height: 33%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ width: 33.3%;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|