|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div class="dataView-content">
|
|
<div class="dataView-content">
|
|
<div class="data-header">
|
|
<div class="data-header">
|
|
- <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-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">
|
|
@@ -12,7 +12,10 @@
|
|
<option>渭南</option>
|
|
<option>渭南</option>
|
|
<option>咸阳</option>
|
|
<option>咸阳</option>
|
|
</select>
|
|
</select>
|
|
- <a-icon @click="isFullscreenMap" :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}" :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
|
|
|
|
|
|
+ <a-icon
|
|
|
|
+ @click="isFullscreenMap"
|
|
|
|
+ :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
|
|
|
|
+ :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
|
|
</dv-border-box-5>
|
|
</dv-border-box-5>
|
|
</div>
|
|
</div>
|
|
<div class="data-body">
|
|
<div class="data-body">
|
|
@@ -38,15 +41,11 @@
|
|
<dv-border-box-8 title="dv-border-box-11">
|
|
<dv-border-box-8 title="dv-border-box-11">
|
|
<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;" />
|
|
<div class="total-label">用户总数</div>
|
|
<div class="total-label">用户总数</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <dv-digital-flop
|
|
|
|
- :config="devTotal"
|
|
|
|
- style="width:100%;height:50px;" />
|
|
|
|
|
|
+ <dv-digital-flop :config="devTotal" style="width:100%;height:50px;" />
|
|
<div class="total-label">设备总数</div>
|
|
<div class="total-label">设备总数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -70,12 +69,21 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import Charts, { changeDefaultConfig } from '@jiaminghi/charts'
|
|
|
|
|
|
+import Charts, {
|
|
|
|
+ changeDefaultConfig
|
|
|
|
+} from '@jiaminghi/charts'
|
|
import {
|
|
import {
|
|
getUserTotal,
|
|
getUserTotal,
|
|
getDeviceTotal,
|
|
getDeviceTotal,
|
|
getMapStation
|
|
getMapStation
|
|
} from '@/api/nodeMap.js'
|
|
} from '@/api/nodeMap.js'
|
|
|
|
+import {
|
|
|
|
+ getNewRegister,
|
|
|
|
+ getTimeSharingLog,
|
|
|
|
+ getDeliveryTop
|
|
|
|
+} from '@/api/borard.js'
|
|
|
|
+import moment from 'moment'
|
|
|
|
+import getDate from '@/libs/getDate.js'
|
|
export default {
|
|
export default {
|
|
name: 'DataBoratd',
|
|
name: 'DataBoratd',
|
|
data () {
|
|
data () {
|
|
@@ -85,19 +93,21 @@ export default {
|
|
chart3: null,
|
|
chart3: null,
|
|
chart4: null,
|
|
chart4: null,
|
|
userTotal: {
|
|
userTotal: {
|
|
- number: [253461],
|
|
|
|
|
|
+ number: [],
|
|
content: '{nt}',
|
|
content: '{nt}',
|
|
formatter: this.formatter
|
|
formatter: this.formatter
|
|
},
|
|
},
|
|
devTotal: {
|
|
devTotal: {
|
|
- number: [1250],
|
|
|
|
|
|
+ number: [],
|
|
content: '{nt}',
|
|
content: '{nt}',
|
|
formatter: this.formatter
|
|
formatter: this.formatter
|
|
},
|
|
},
|
|
isMapFull: false,
|
|
isMapFull: false,
|
|
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') // 查询结束时间
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -145,6 +155,55 @@ export default {
|
|
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
|
|
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
|
|
return segs.join(',').split('').reverse().join('')
|
|
return segs.join(',').split('').reverse().join('')
|
|
},
|
|
},
|
|
|
|
+ // 获取用户总数
|
|
|
|
+ getUser () {
|
|
|
|
+ getUserTotal({}).then(res => {
|
|
|
|
+ const data = res.data || 0
|
|
|
|
+ const arr = []
|
|
|
|
+ arr.push(data)
|
|
|
|
+ this.userTotal = {
|
|
|
|
+ number: arr,
|
|
|
|
+ content: '{nt}',
|
|
|
|
+ formatter: this.formatter
|
|
|
|
+ }
|
|
|
|
+ console.log(this.userTotal, data, '获取用户总数')
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 获取设备总数
|
|
|
|
+ getDevice () {
|
|
|
|
+ getDeviceTotal({}).then(res => {
|
|
|
|
+ const data = res.data || 0
|
|
|
|
+ const arr = []
|
|
|
|
+ arr.push(data)
|
|
|
|
+ this.devTotal = {
|
|
|
|
+ number: arr,
|
|
|
|
+ content: '{nt}',
|
|
|
|
+ formatter: this.formatter
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 获取新用户注册量
|
|
|
|
+ getNewRegister () {
|
|
|
|
+ const params = {
|
|
|
|
+ beginRegisterTime: this.beginDate,
|
|
|
|
+ endRegisterTime: this.endDate
|
|
|
|
+ }
|
|
|
|
+ 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)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
// 初始化地图
|
|
// 初始化地图
|
|
initMap () {
|
|
initMap () {
|
|
// 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
// 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
@@ -201,7 +260,8 @@ export default {
|
|
const p = {
|
|
const p = {
|
|
'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
|
|
'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
|
|
'styleId': 'myStyle', // 指定样式id
|
|
'styleId': 'myStyle', // 指定样式id
|
|
- 'position': new TMap.LatLng(Number(item.lat), Number(item.lng)), // 点标记坐标位置
|
|
|
|
|
|
+ 'position': new TMap.LatLng(Number(item.lat), Number(item
|
|
|
|
+ .lng)), // 点标记坐标位置
|
|
'properties': { // 自定义属性
|
|
'properties': { // 自定义属性
|
|
'title': item.name
|
|
'title': item.name
|
|
}
|
|
}
|
|
@@ -253,34 +313,7 @@ export default {
|
|
left: 50
|
|
left: 50
|
|
})
|
|
})
|
|
// 新用户注册量
|
|
// 新用户注册量
|
|
- const con1 = document.getElementById('con1')
|
|
|
|
- const chart1 = new Charts(con1)
|
|
|
|
- const option1 = {
|
|
|
|
- title: {
|
|
|
|
- text: '新用户注册量'
|
|
|
|
- },
|
|
|
|
- xAxis: {
|
|
|
|
- name: '日期',
|
|
|
|
- data: ['03-25', '03-26', '03-27', '03-28', '03-29', '03-30', '03-31']
|
|
|
|
- },
|
|
|
|
- yAxis: {
|
|
|
|
- name: '用户',
|
|
|
|
- data: 'value'
|
|
|
|
- },
|
|
|
|
- series: [
|
|
|
|
- {
|
|
|
|
- data: [120, 98, 100, 125, 110, 87, 160],
|
|
|
|
- type: 'line',
|
|
|
|
- smooth: true,
|
|
|
|
- lineArea: {
|
|
|
|
- show: true,
|
|
|
|
- gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- }
|
|
|
|
- chart1.setOption(option1)
|
|
|
|
- this.chart1 = chart1
|
|
|
|
|
|
+
|
|
// 分时投递量
|
|
// 分时投递量
|
|
const con2 = document.getElementById('con2')
|
|
const con2 = document.getElementById('con2')
|
|
const chart2 = new Charts(con2)
|
|
const chart2 = new Charts(con2)
|
|
@@ -299,40 +332,39 @@ export default {
|
|
name: 'kg',
|
|
name: 'kg',
|
|
data: 'value'
|
|
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)']
|
|
|
|
- }
|
|
|
|
|
|
+ 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)
|
|
chart2.setOption(option2)
|
|
@@ -341,25 +373,35 @@ export default {
|
|
const con3 = document.getElementById('con3')
|
|
const con3 = document.getElementById('con3')
|
|
const chart3 = new Charts(con3)
|
|
const chart3 = new Charts(con3)
|
|
const option3 = {
|
|
const option3 = {
|
|
|
|
+ color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
|
|
title: {
|
|
title: {
|
|
text: '设备分布比例'
|
|
text: '设备分布比例'
|
|
},
|
|
},
|
|
- series: [
|
|
|
|
|
|
+ series: [{
|
|
|
|
+ type: 'pie',
|
|
|
|
+ radius: ['30%', '50%'],
|
|
|
|
+ startAngle: -Math.PI / 8,
|
|
|
|
+ data: [{
|
|
|
|
+ name: '居民小区',
|
|
|
|
+ value: 49
|
|
|
|
+ },
|
|
{
|
|
{
|
|
- type: 'pie',
|
|
|
|
- radius: '40%',
|
|
|
|
- startAngle: -Math.PI / 8,
|
|
|
|
- data: [
|
|
|
|
- { name: '企业', value: 5 },
|
|
|
|
- { name: '学校', value: 14 },
|
|
|
|
- { name: '公共机构', value: 32 },
|
|
|
|
- { name: '居民小区', value: 49 }
|
|
|
|
- ],
|
|
|
|
- insideLabel: {
|
|
|
|
- show: true
|
|
|
|
- }
|
|
|
|
|
|
+ name: '公共机构',
|
|
|
|
+ value: 32
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '学校',
|
|
|
|
+ value: 14
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '企业',
|
|
|
|
+ value: 5
|
|
}
|
|
}
|
|
- ]
|
|
|
|
|
|
+ ],
|
|
|
|
+ insideLabel: {
|
|
|
|
+ show: true
|
|
|
|
+ }
|
|
|
|
+ }]
|
|
}
|
|
}
|
|
chart3.setOption(option3)
|
|
chart3.setOption(option3)
|
|
this.chart3 = chart3
|
|
this.chart3 = chart3
|
|
@@ -378,113 +420,181 @@ export default {
|
|
name: 'kg',
|
|
name: 'kg',
|
|
data: 'value'
|
|
data: 'value'
|
|
},
|
|
},
|
|
- series: [
|
|
|
|
- {
|
|
|
|
- data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
|
|
|
|
- type: 'bar',
|
|
|
|
- gradient: {
|
|
|
|
- color: ['#37a2da', '#67e0e3']
|
|
|
|
- }
|
|
|
|
|
|
+ series: [{
|
|
|
|
+ data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
|
|
|
|
+ type: 'bar',
|
|
|
|
+ gradient: {
|
|
|
|
+ color: ['#37a2da', '#67e0e3']
|
|
}
|
|
}
|
|
- ]
|
|
|
|
|
|
+ }]
|
|
}
|
|
}
|
|
chart4.setOption(option4)
|
|
chart4.setOption(option4)
|
|
this.chart4 = chart4
|
|
this.chart4 = chart4
|
|
|
|
+ },
|
|
|
|
+ // 初始化新用户注册量
|
|
|
|
+ initChart1 (xData, yData) {
|
|
|
|
+ const con1 = document.getElementById('con1')
|
|
|
|
+ const chart1 = new Charts(con1)
|
|
|
|
+ const option1 = {
|
|
|
|
+ title: {
|
|
|
|
+ text: '新用户注册量'
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ name: '日期',
|
|
|
|
+ data: xData
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ name: '用户',
|
|
|
|
+ data: 'value'
|
|
|
|
+ },
|
|
|
|
+ series: [{
|
|
|
|
+ data: yData,
|
|
|
|
+ type: 'line',
|
|
|
|
+ smooth: true,
|
|
|
|
+ lineArea: {
|
|
|
|
+ show: true,
|
|
|
|
+ gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
|
|
|
|
+ }
|
|
|
|
+ }]
|
|
|
|
+ }
|
|
|
|
+ chart1.setOption(option1)
|
|
|
|
+ this.chart1 = chart1
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted () {
|
|
mounted () {
|
|
- this.initChart()
|
|
|
|
this.initMap()
|
|
this.initMap()
|
|
|
|
+ const that = this
|
|
|
|
+ window.onresize = () => {
|
|
|
|
+ return (() => {
|
|
|
|
+ // window.screenWidth = document.body.clientWidth
|
|
|
|
+ // that.screenWidth = window.screenWidth
|
|
|
|
+ this.chart1.resize()
|
|
|
|
+ this.chart2.resize()
|
|
|
|
+ this.chart3.resize()
|
|
|
|
+ this.chart4.resize()
|
|
|
|
+ })()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ beforeRouteEnter (to, from, next) {
|
|
|
|
+ next(vm => {
|
|
|
|
+ vm.getUser()
|
|
|
|
+ vm.getDevice()
|
|
|
|
+ vm.initChart()
|
|
|
|
+ vm.getNewRegister()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ beforeRouterLeave (to, from, next) {
|
|
|
|
+ next(vm => {
|
|
|
|
+ // 销毁地图
|
|
|
|
+ vm.map.destroy()
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
<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;
|
|
|
|
- > div{
|
|
|
|
- height: 80px;
|
|
|
|
- line-height: 80px;
|
|
|
|
- &:first-child{
|
|
|
|
- width: 40%;
|
|
|
|
- color: #79ccff;
|
|
|
|
- .border-box-content{
|
|
|
|
- font-size: 30px;
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- &: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;
|
|
|
|
- width: 35%;
|
|
|
|
- padding: 2px 10px;
|
|
|
|
- margin: 0 10px;
|
|
|
|
- box-shadow: inset 0 0 2px #69b2ff;
|
|
|
|
- border-radius: 6px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .data-body{
|
|
|
|
- flex-grow: 1;
|
|
|
|
- display: flex;
|
|
|
|
- .b-left,.b-right{
|
|
|
|
- width: 25%;
|
|
|
|
- display: flex;
|
|
|
|
- padding: 5px;
|
|
|
|
- flex-direction: column;
|
|
|
|
- >div{
|
|
|
|
- height: 50%;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .b-middle{
|
|
|
|
- width: 50%;
|
|
|
|
- padding: 5px;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- >div{
|
|
|
|
- &:first-child{
|
|
|
|
- height: 80%;
|
|
|
|
- }
|
|
|
|
- &:last-child{
|
|
|
|
- height: 20%;
|
|
|
|
- .total-block{
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- height: 100%;
|
|
|
|
- > div{
|
|
|
|
- width: 40%;
|
|
|
|
- }
|
|
|
|
- .total-label{
|
|
|
|
- color: #fff;
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ .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;
|
|
|
|
+
|
|
|
|
+ >div {
|
|
|
|
+ height: 80px;
|
|
|
|
+ line-height: 80px;
|
|
|
|
+
|
|
|
|
+ &:first-child {
|
|
|
|
+ width: 40%;
|
|
|
|
+ color: #79ccff;
|
|
|
|
+
|
|
|
|
+ .border-box-content {
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &: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;
|
|
|
|
+ width: 35%;
|
|
|
|
+ padding: 2px 10px;
|
|
|
|
+ margin: 0 10px;
|
|
|
|
+ box-shadow: inset 0 0 2px #69b2ff;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .data-body {
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ display: flex;
|
|
|
|
+
|
|
|
|
+ .b-left,
|
|
|
|
+ .b-right {
|
|
|
|
+ width: 25%;
|
|
|
|
+ display: flex;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+
|
|
|
|
+ >div {
|
|
|
|
+ height: 50%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .b-middle {
|
|
|
|
+ width: 50%;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+
|
|
|
|
+ >div {
|
|
|
|
+ &:first-child {
|
|
|
|
+ height: 80%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:last-child {
|
|
|
|
+ height: 20%;
|
|
|
|
+
|
|
|
|
+ .total-block {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ height: 100%;
|
|
|
|
+
|
|
|
|
+ >div {
|
|
|
|
+ width: 40%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .total-label {
|
|
|
|
+ color: #fff;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|