<template>
|
<div class="c-asseaa-report-income-detail colorfff mt30">
|
<div class="_line-length-box flex-1">
|
<div style="position: relative">
|
<img src="@/assets/driverappraise/pic_zhanbitu.png" class="_img"/>
|
<div class="_line-total">
|
<div class="_total">{{ info.totalIncome || 0 }}</div>
|
<div class="_main-color">日总收入(元)</div>
|
</div>
|
<commonEcharts
|
id="pie" class="__echart-pie" width="130px" height="130px" :option="setOption"
|
/>
|
</div>
|
<div class="_drive-detail mt30 mr10">
|
<div class="flex ml30" v-for="(item, index) in option.series[0].data" :key="index">
|
<div class="_icon" :style="{background: option.series[0].color[index]}"/>
|
<span class="flex-1 _main-color mr20" style="width: 70px">{{ item.name }}</span>
|
<span><span class="_num font16 mr5">{{ item.value }}</span>条</span>
|
</div>
|
</div>
|
</div>
|
<div style="position: relative" class="ml100">
|
<img src="@/assets/driverappraise/pic_zhanbitu.png" class="_img"/>
|
<div class="_line-total" style="top: 50px;">
|
<div class="_total _total-1">{{ info.thousandKilometerPerson }}</div>
|
<div class="_main-color">千公里人数 </div>
|
<div class="_main-color">(人/千公里)</div>
|
</div>
|
|
</div>
|
<div style="position: relative" class="ml100 mr40">
|
<img src="@/assets/driverappraise/pic_zhanbitu.png" class="_img"/>
|
<div class="_line-total" style="top: 50px;">
|
<div class="_total _total-2">{{ info.thousandKilometerIncome }}</div>
|
<div class="_main-color">千公里收入</div>
|
<div class="_main-color">(元/千公里)</div>
|
</div>
|
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import * as echarts from "echarts";
|
import moment from "moment";
|
import commonEcharts from "@/components/common/echart/echart.vue";
|
export default {
|
name: "driverappraise",
|
components: { commonEcharts },
|
props: {
|
info: {
|
type: Object,
|
default: () => {}
|
},
|
flag: {
|
type: [Number, String],
|
default: () => '1'
|
},
|
},
|
data() {
|
return {
|
type: {
|
1:'现金', 2: '微信', 3: '支付宝', 4: '交通卡', 5: '乘车码'
|
},
|
option: {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
show: false,
|
top: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: '线路长度',
|
type: 'pie',
|
radius: ['78%', '90%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emptyCircleStyle: {
|
|
},
|
color: ['#069EFE', '#F99854', '#13CBA8', '#F2FFFF', '#FFCD80'],
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '0',
|
fontWeight: 'bold',
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{ value: 1048, name: '现金支付' },
|
{ value: 735, name: '交通卡支付' },
|
{ value: 580, name: '微信支付' },
|
{ value: 484, name: '支付宝支付' },
|
{ value: 300, name: '乘车码支付' }
|
]
|
}
|
]
|
}
|
|
|
};
|
},
|
created() {
|
const arr = this.info.typeGroup || [];
|
this.option.series[0].data = arr.map(i => {
|
return {
|
value: i.income, name: this.type[+i.type]
|
}
|
|
})
|
|
},
|
activated() {
|
|
},
|
computed: {
|
|
},
|
mounted() {
|
},
|
methods: {
|
|
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.c-asseaa-report-income-detail {
|
padding-bottom: 40px;
|
display: flex;
|
._total{
|
font-family: 'Digital';
|
color: #069EFE;
|
font-size: 26px;
|
font-weight: 500
|
}
|
._total-1 {
|
color: #13CBA8;
|
}
|
._total-2 {
|
color: #F99854;
|
}
|
._drive-detail {
|
color: #fff;
|
margin-left: 10px;
|
flex: 1;
|
._icon {
|
width: 10px;
|
height: 10px;
|
margin-right: 10px;
|
}
|
._num {
|
color: #F2FFFF;
|
font-family: 'Digital';
|
font-size: 18px;
|
}
|
&>div{
|
align-items: center;
|
}
|
}
|
|
._line-length-box {
|
display: flex;
|
align-items: center;
|
position: relative;
|
height: '15vh';
|
.__echart-pie {
|
margin-left: 28px;
|
margin-top: 38px;
|
|
}
|
._img {
|
position:absolute;
|
top: 10px
|
}
|
|
}
|
.ml100 {
|
margin-left: 100px;
|
}
|
._line-total {
|
position: absolute;
|
width: 187px;
|
top: 70px;
|
text-align: center;
|
color: #fff;
|
}
|
|
|
}
|
|
</style>
|
