<template>
|
<div class="daily-main">
|
<div class="daily-content" style="height:100%">
|
<p style="font-size: 16px;padding:19.5px 0px">每日业务统计</p>
|
<el-row :gutter="35">
|
<el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日任务接收</h4>
|
<span >2453</span>
|
<div class="daily-head-left-info">
|
<img src="../../../static/img/daliy-up.svg" alt="">
|
<span :class="{active:false}" class="num"> 8.5% </span>
|
<span>较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-0.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日任务完成</h4>
|
<span >1687</span>
|
<div class="daily-head-left-info">
|
<img src="../../../static/img/daliy-up.svg" alt="">
|
<span :class="{active:false}" class="num"> 8.5% </span>
|
<span>较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-1.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日任务剩余</h4>
|
<span >766</span>
|
<div class="daily-head-left-info">
|
<img src="../../../static/img/daliy-up.svg" alt="">
|
<span :class="{active:false}" class="num"> 8.5% </span>
|
<span>较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-2.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日检测费用</h4>
|
<span >￥7359</span>
|
<div class="daily-head-left-info">
|
<img src="../../../static/img/daliy-up.svg" alt="">
|
<span :class="{active:false}" class="num"> 8.5% </span>
|
<span>较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-3.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日检测工时</h4>
|
<span >306</span>
|
<div class="daily-head-left-info">
|
<img src="../../../static/img/daliy-down.svg" alt="">
|
<span :class="{active:true}" class="num"> 8.5% </span>
|
<span>较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-4.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
|
<div class="daily-card daily-head">
|
<div class="daily-head-left">
|
<h4>今日检测人员</h4>
|
<span >109</span>
|
<div class="daily-head-left-info">
|
<img src="../../../static/img/daliy-up.svg" alt="">
|
<span :class="{active:false}" class="num"> 8.5% </span>
|
<span>较昨天</span>
|
</div>
|
</div>
|
<img src="../../../static/img/daliy-5.svg" alt="" srcset="">
|
</div>
|
</el-col>
|
</el-row>
|
<el-row :gutter="35">
|
<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:true,
|
type:'line'
|
},
|
chartData0:{
|
xData:['4-11','4-12','4-13','4-14','4-15','4-16','4-17','4-18','4-19','4-20'],
|
yData:[
|
{
|
title:'任务接收量',
|
data:[10,20,10,40,50,20,70,40,90,50]
|
}
|
]
|
},
|
chartConfig1:{
|
height: '435px',
|
isLoading:true,
|
type:'bar'
|
},
|
chartData1:{
|
xData:['4-11','4-12','4-13','4-14','4-15','4-16','4-17','4-18','4-19','4-20'],
|
yData:[
|
{
|
title:'今日接收',
|
data:[10,20,10,40,50,20,70,40,90,50]
|
},
|
{
|
title:'今日完成',
|
data:[15,10,6,33,66,44,56,77,44,55]
|
},
|
]
|
}
|
}
|
}
|
}
|
</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>
|
