<template>
|
<div class="daily-main" v-loading="loading">
|
<div class="daily-content" style="height:100%">
|
<p style="font-size: 16px;padding:19.5px 0px">每日业务统计</p>
|
<el-row :gutter="20">
|
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日任务接收</h4>
|
<span>{{ pageData.RECEIVE }}</span>
|
<div class="daily-head-left-info">
|
<img :src="`../../../static/img/daliy-${pageData.RECEIVE_RATIO<0?'down':'up'}.svg`" alt="">
|
<span :class="{active:pageData.RECEIVE_RATIO<0}" class="num" v-html="` ${handleData(pageData.RECEIVE_RATIO)}% `"></span>
|
<span style="font-size: 12px;">较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-0.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日任务完成</h4>
|
<span >{{ pageData.FINISHE }}</span>
|
<div class="daily-head-left-info">
|
<img :src="`../../../static/img/daliy-${pageData.FINISHE_RATIO<0?'down':'up'}.svg`" alt="">
|
<span :class="{active:pageData.FINISHE_RATIO<0}" class="num" v-html="` ${handleData(pageData.FINISHE_RATIO)}% `"></span>
|
<span style="font-size: 12px;">较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-1.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日任务剩余</h4>
|
<span >{{ pageData.SURPLUS }}</span>
|
<div class="daily-head-left-info">
|
<img :src="`../../../static/img/daliy-${pageData.SURPLUS_RATIO<0?'down':'up'}.svg`" alt="">
|
<span :class="{active:pageData.SURPLUS_RATIO<0}" class="num" v-html="` ${handleData(pageData.SURPLUS_RATIO)}% `"></span>
|
<span style="font-size: 12px;">较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-2.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日检测费用</h4>
|
<span>￥{{ pageData.PRICE }}</span>
|
<div class="daily-head-left-info">
|
<img :src="`../../../static/img/daliy-${pageData.PRICE_RATIO<0?'down':'up'}.svg`" alt="">
|
<span :class="{active:pageData.PRICE_RATIO}" class="num" v-html="` ${handleData(pageData.PRICE_RATIO)}% `"></span>
|
<span style="font-size: 12px;">较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-3.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日检测工时</h4>
|
<span>{{pageData.COST}}</span>
|
<div class="daily-head-left-info">
|
<img :src="`../../../static/img/daliy-${pageData.COST_RATIO<0?'down':'up'}.svg`" alt="">
|
<span :class="{active:pageData.COST_RATIO<0}" class="num" v-html="` ${handleData(pageData.COST_RATIO)}% `"></span>
|
<span style="font-size: 12px;">较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-4.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日检测人员</h4>
|
<span >{{ pageData.PERSON }}</span>
|
<div class="daily-head-left-info">
|
<img :src="`../../../static/img/daliy-${pageData.PERSON_RATIO<0?'down':'up'}.svg`" alt="">
|
<span :class="{active:pageData.PERSON_RATIO<0}" class="num" v-html="` ${handleData(pageData.PERSON_RATIO)}% `"></span>
|
<span style="font-size: 12px;">较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-5.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
|
<div class="daily-card chart-box">
|
<h4>近10日任务接收量</h4>
|
<echart-module :id="'daily-left'" :config="chartConfig0" :datas="chartData0"></echart-module>
|
</div>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
|
<div class="daily-card chart-box">
|
<h4>近10日实际完成任务与接收任务对比</h4>
|
<echart-module :id="'daily-right'" :config="chartConfig1" :datas="chartData1"></echart-module>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import EchartModule from '../tool/echart.vue'
|
export default {
|
components: {EchartModule},
|
data(){
|
return{
|
chartConfig0:{
|
height: '435px',
|
isLoading:false,
|
type:'line'
|
},
|
chartData0:{
|
xData:[],
|
yData:[
|
{
|
title:'任务接收量',
|
data:[]
|
}
|
]
|
},
|
chartConfig1:{
|
height: '435px',
|
isLoading:false,
|
type:'bar'
|
},
|
chartData1:{
|
xData:[],
|
yData:[
|
{
|
title:'今日接收',
|
data:[]
|
},
|
{
|
title:'今日完成',
|
data:[]
|
},
|
]
|
},
|
pageData:{},
|
loading:false,
|
}
|
},
|
mounted(){
|
this.init()
|
},
|
methods:{
|
init(){
|
this.chartConfig0.isLoading = false
|
this.chartConfig1.isLoading = false
|
this.loading = true;
|
this.$axios.get(this.$api.report.businessStatisticsByDay).then(res => {
|
if (res.code == 201) return
|
this.pageData = this.HaveJson(res.data)
|
let xData = res.data.DAYS.map(m=>{
|
return `${m[1]}-${m[2]}`
|
})
|
this.chartData0.xData = xData
|
this.chartData1.xData = xData
|
this.chartData0.yData[0].data = this.pageData.RECETENDAYS
|
this.chartData1.yData[0].data = this.pageData.RECETENDAYS
|
this.chartData1.yData[1].data = this.pageData.FINISHTENDAYS
|
this.loading = false;
|
this.chartConfig0.isLoading = true
|
this.chartConfig1.isLoading = true
|
})
|
},
|
handleData(val){
|
if(val){
|
return Math.abs(val)*100;
|
}else{
|
return '0'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.daily-main{
|
height: 100%;
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
.daily-card{
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 14px;
|
box-shadow: 6px 6px 54px 0px rgba(0,0,0,0.05);
|
}
|
|
.daily-head{
|
padding: 16px;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
}
|
|
.daily-head-left h4{
|
color: #202224;
|
font-size: 16px;
|
font-weight: 400;
|
margin-bottom: 20px;
|
opacity: 0.8;
|
}
|
|
.daily-head-left>span{
|
font-family: Nunito Sans-Bold;color: #202224;
|
font-weight: bold;
|
font-size: 28px;
|
display: inline-block;
|
margin-bottom: 30px;
|
}
|
|
.daily-head-left .daily-head-left-info{
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
color: #202224;
|
}
|
|
.daily-head-left .daily-head-left-info .num{
|
color: #00B69B;
|
}
|
.daily-head-left .daily-head-left-info .num.active{
|
color: #F93C65;
|
}
|
|
.chart-box{
|
padding: 30px 24px;
|
box-sizing: border-box;
|
}
|
|
.chart-box h4{
|
color: #202224;
|
font-family: PingFang SC-Regular;
|
font-weight: 400;
|
font-size: 24px;
|
margin-bottom: 16px;
|
}
|
|
.chart{
|
width: 100%;
|
height: 450px;
|
}
|
</style>
|
