|
@@ -27,7 +27,8 @@
|
|
|
</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>
|
|
|
+ <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>
|
|
@@ -48,25 +49,25 @@
|
|
|
<div class="laji-title">垃圾产生量</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor1">可回收垃圾</div>
|
|
|
- <div>1000 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.RECYCLING }} 吨</div>
|
|
|
</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor2">其它垃圾</div>
|
|
|
- <div>1000 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.GATHER_OTHER }} 吨</div>
|
|
|
</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor3">厨余垃圾</div>
|
|
|
- <div>1000 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.GATHER_KITCHEN }} 吨</div>
|
|
|
</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor4">建筑垃圾</div>
|
|
|
- <div>1000 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.GATHER_BUILDING }} 吨</div>
|
|
|
</div>
|
|
|
<div class="laji-item">
|
|
|
<div class="cor5">有害垃圾</div>
|
|
|
- <div>1000 吨</div>
|
|
|
+ <div>{{ rubbishWeightData.HARM }} 吨</div>
|
|
|
</div>
|
|
|
- <div class="laji-total">共计<span>5000</span>吨</div>
|
|
|
+ <div class="laji-total">共计<span>{{ rubbishWeightTotal }}</span>吨</div>
|
|
|
</div>
|
|
|
<div id="map" :style="{height: '100%'}"></div>
|
|
|
</dv-border-box-8>
|
|
@@ -90,19 +91,22 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="b-right">
|
|
|
+ <!-- 设备比例分布 -->
|
|
|
<div>
|
|
|
<dv-border-box-13>
|
|
|
<div id="con3" style="width: 100%;height: 100%;"></div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
+ <!-- 各分类垃圾量分布 -->
|
|
|
<div>
|
|
|
<dv-border-box-13>
|
|
|
<div id="con5" style="width: 100%;height: 100%;"></div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
+ <!-- 各机构投递量分布比例 -->
|
|
|
<div>
|
|
|
<dv-border-box-13>
|
|
|
- <div id="con5" style="width: 100%;height: 100%;"></div>
|
|
|
+ <div id="con6" style="width: 100%;height: 100%;"></div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -122,9 +126,15 @@ import {
|
|
|
getTimeSharingLog,
|
|
|
getDeliveryTop,
|
|
|
getHeatMapData,
|
|
|
- getLocationCode
|
|
|
+ getLocationCode,
|
|
|
+ getRubbishTypeTotal,
|
|
|
+ querySumWeight
|
|
|
} from '@/api/borard.js'
|
|
|
-import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
|
|
|
+import {
|
|
|
+ getProvince,
|
|
|
+ getCityByPro,
|
|
|
+ getDistrictByCity
|
|
|
+} from '@/api/station'
|
|
|
import moment from 'moment'
|
|
|
import getDate from '@/libs/getDate.js'
|
|
|
export default {
|
|
@@ -146,31 +156,32 @@ export default {
|
|
|
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'
|
|
|
- }
|
|
|
+ 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,
|
|
@@ -178,8 +189,16 @@ export default {
|
|
|
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') // 查询结束时间
|
|
|
+ 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: {
|
|
@@ -341,8 +360,8 @@ export default {
|
|
|
// 排行榜
|
|
|
getDeliveryTop () {
|
|
|
const params = {
|
|
|
- 'beginDeliveryDate': this.beginDate,
|
|
|
- 'endDeliveryDate': this.endDate,
|
|
|
+ 'findRubbishDataBeginDate': this.beginDate,
|
|
|
+ 'findRubbishDataEndDate': this.endDate,
|
|
|
'provinceCode': this.queryParam.provinceCode,
|
|
|
'cityCode': this.queryParam.cityCode,
|
|
|
'districtCode': this.queryParam.districtCode
|
|
@@ -354,6 +373,73 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ // 垃圾产生量
|
|
|
+ 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 => {
|
|
|
+ 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.rubbishWeightTotal = res.data.total / 1000
|
|
|
+ } else {
|
|
|
+ this.rubbishWeightTotal = 0
|
|
|
+ this.rubbishWeightData = {
|
|
|
+ 'GATHER_OTHER': 0, // 其它垃圾
|
|
|
+ 'GATHER_KITCHEN': 0, // 厨余垃圾
|
|
|
+ 'GATHER_BUILDING': 0, // 建筑垃圾
|
|
|
+ 'HARM': 0, // 有害垃圾
|
|
|
+ 'RECYCLING': 0 // 可回收垃圾
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 各分类垃圾量分布
|
|
|
+ getRubbishTypeChart () {
|
|
|
+ const params = {
|
|
|
+ 'findRubbishDataBeginDate': '',
|
|
|
+ 'findRubbishDataEndDate': '',
|
|
|
+ 'provinceCode': '',
|
|
|
+ 'cityCode': '',
|
|
|
+ 'districtCode': ''
|
|
|
+ }
|
|
|
+ getRubbishTypeTotal(params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ const data = []
|
|
|
+ if (res.status == 200) {
|
|
|
+ // 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
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ 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
|
|
@@ -451,7 +537,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
// console.log(ret)
|
|
|
- heat.setData(ret)// 设置数据
|
|
|
+ heat.setData(ret) // 设置数据
|
|
|
}
|
|
|
})
|
|
|
},
|
|
@@ -501,6 +587,10 @@ export default {
|
|
|
this.getNewRegister()
|
|
|
// 分时投递
|
|
|
this.getTimeSharingLog()
|
|
|
+ // 垃圾产生量
|
|
|
+ this.getRubbishWeight()
|
|
|
+ // 各分类垃圾量分布
|
|
|
+ this.getRubbishTypeChart()
|
|
|
// 设备分布比例
|
|
|
const con3 = document.getElementById('con3')
|
|
|
const chart3 = echarts.init(con3)
|
|
@@ -515,7 +605,10 @@ export default {
|
|
|
},
|
|
|
textAlingn: 'left'
|
|
|
},
|
|
|
- tooltip: {},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: `{b} : {d}%`
|
|
|
+ },
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
radius: ['30%', '50%'],
|
|
@@ -525,9 +618,10 @@ export default {
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: params => {
|
|
|
+ // console.log(params, 'ppppppp')
|
|
|
return (
|
|
|
'{name|' + params.name + '}{value|' +
|
|
|
- params.value + '%' + '}'
|
|
|
+ params.percent + '%' + '}'
|
|
|
)
|
|
|
},
|
|
|
padding: [0, -70, 25, -70],
|
|
@@ -553,23 +647,22 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: '居民小区',
|
|
|
- value: 49
|
|
|
- },
|
|
|
- {
|
|
|
- name: '学校',
|
|
|
- value: 14
|
|
|
- },
|
|
|
- {
|
|
|
- name: '公共机构',
|
|
|
- value: 32
|
|
|
- },
|
|
|
- {
|
|
|
- name: '企业',
|
|
|
- value: 5
|
|
|
- }
|
|
|
+ data: [{
|
|
|
+ name: '居民小区',
|
|
|
+ value: 49
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '学校',
|
|
|
+ value: 14
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '公共机构',
|
|
|
+ value: 32
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '企业',
|
|
|
+ value: 5
|
|
|
+ }
|
|
|
],
|
|
|
insideLabel: {
|
|
|
show: true
|
|
@@ -723,15 +816,15 @@ export default {
|
|
|
const con1 = document.getElementById('con1')
|
|
|
const chart1 = echarts.init(con1)
|
|
|
const option1 = {
|
|
|
- title: {
|
|
|
- text: '新用户注册量',
|
|
|
+ title: {
|
|
|
+ text: '新用户注册量',
|
|
|
top: 20,
|
|
|
left: 20,
|
|
|
textStyle: {
|
|
|
color: '#abd7ff'
|
|
|
},
|
|
|
textAlingn: 'left'
|
|
|
- },
|
|
|
+ },
|
|
|
tooltip: {
|
|
|
formatter: '{b0}日: {c0}人'
|
|
|
},
|
|
@@ -742,9 +835,9 @@ export default {
|
|
|
top: 85,
|
|
|
containLabel: true
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- name: '日期',
|
|
|
- data: xData,
|
|
|
+ xAxis: {
|
|
|
+ name: '日期',
|
|
|
+ data: xData,
|
|
|
type: 'category',
|
|
|
nameTextStyle: {
|
|
|
color: '#666'
|
|
@@ -754,9 +847,9 @@ export default {
|
|
|
color: '#666'
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- name: '用户',
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: '用户',
|
|
|
type: 'value',
|
|
|
nameTextStyle: {
|
|
|
color: '#666'
|
|
@@ -766,11 +859,11 @@ export default {
|
|
|
color: '#666'
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- series: [{
|
|
|
- data: yData,
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: yData,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
@@ -780,25 +873,90 @@ export default {
|
|
|
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% 处的颜色
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
- }]
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+ // 初始化饼图
|
|
|
+ initPie (chart, title, data) {
|
|
|
+ const option = {
|
|
|
+ color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
|
|
|
+ title: {
|
|
|
+ text: title,
|
|
|
+ top: 20,
|
|
|
+ left: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#abd7ff'
|
|
|
+ },
|
|
|
+ textAlingn: 'left'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: `{b} : {d}%`
|
|
|
+ },
|
|
|
+ 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 () {
|
|
@@ -846,60 +1004,73 @@ export default {
|
|
|
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;
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
&:last-child {
|
|
|
width: 25%;
|
|
|
color: #0ed3ff;
|
|
|
+
|
|
|
.border-box-content {
|
|
|
font-size: 18px;
|
|
|
text-align: center;
|
|
@@ -925,16 +1096,18 @@ export default {
|
|
|
.data-body {
|
|
|
flex-grow: 1;
|
|
|
display: flex;
|
|
|
- padding: 0 15px 15px;
|
|
|
+ padding: 0 15px 15px;
|
|
|
+
|
|
|
.b-right {
|
|
|
width: 25%;
|
|
|
display: flex;
|
|
|
padding: 5px;
|
|
|
flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- > div{
|
|
|
- height: 33%;
|
|
|
- }
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ height: 33%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.b-middle {
|
|
@@ -942,66 +1115,76 @@ export default {
|
|
|
padding: 5px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ .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;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ width: 33.3%;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|