| | |
| | | <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> |
| | | <!-- <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;"> |
| | | <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> |
| | | <div class="daily-card daily-head"> |
| | | <div class="daily-head-left"> |
| | | <h4>今日任务接收</h4> |
| | |
| | | <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;"> |
| | | <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> |
| | | <div class="daily-card daily-head"> |
| | | <div class="daily-head-left"> |
| | | <h4>今日任务完成</h4> |
| | |
| | | <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;"> |
| | | <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> |
| | | <div class="daily-card daily-head"> |
| | | <div class="daily-head-left"> |
| | | <h4>今日任务剩余</h4> |
| | |
| | | <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;"> |
| | | <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> |
| | | <div class="daily-card daily-head"> |
| | | <div class="daily-head-left"> |
| | | <h4>今日检测费用</h4> |
| | |
| | | <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;"> |
| | | <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> |
| | | <div class="daily-card daily-head"> |
| | | <div class="daily-head-left"> |
| | | <h4>今日检测工时</h4> |
| | |
| | | <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;"> |
| | | <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> |
| | | <div class="daily-card daily-head"> |
| | | <div class="daily-head-left"> |
| | | <h4>今日检测人员</h4> |
| | |
| | | </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"> |
| | | <el-row :gutter="20" style="height: calc(100% - 170px);"> |
| | | <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;"> |
| | | <div class="daily-card chart-box" style="height: 100%;"> |
| | | <h4>近10日任务接收量</h4> |
| | | <echart-module :id="'daily-left'" :config="chartConfig0" :datas="chartData0"></echart-module> |
| | | <echart-module :id="'daily-left'" :config="chartConfig0" :datas="chartData0" style="height: calc(100% - 32px);"></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"> |
| | | <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;"> |
| | | <div class="daily-card chart-box" style="height: 100%;"> |
| | | <h4>近10日实际完成任务与接收任务对比</h4> |
| | | <echart-module :id="'daily-right'" :config="chartConfig1" :datas="chartData1"></echart-module> |
| | | <echart-module :id="'daily-right'" :config="chartConfig1" :datas="chartData1" style="height: calc(100% - 32px);"></echart-module> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | data(){ |
| | | return{ |
| | | chartConfig0:{ |
| | | height: '435px', |
| | | height: '', |
| | | isLoading:false, |
| | | type:'line' |
| | | }, |
| | |
| | | ] |
| | | }, |
| | | chartConfig1:{ |
| | | height: '435px', |
| | | height: '', |
| | | isLoading:false, |
| | | type:'bar' |
| | | }, |
| | |
| | | overflow-y: auto; |
| | | overflow-x: hidden; |
| | | } |
| | | .daily-content{ |
| | | padding: 20px 0; |
| | | box-sizing: border-box; |
| | | } |
| | | .daily-card{ |
| | | width: 100%; |
| | | background: #FFFFFF; |
| | |
| | | color: #202224; |
| | | font-size: 16px; |
| | | font-weight: 400; |
| | | margin-bottom: 20px; |
| | | margin-bottom: 16px; |
| | | opacity: 0.8; |
| | | } |
| | | |
| | |
| | | font-weight: bold; |
| | | font-size: 28px; |
| | | display: inline-block; |
| | | margin-bottom: 30px; |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .daily-head-left .daily-head-left-info{ |
| | |
| | | } |
| | | |
| | | .chart-box{ |
| | | padding: 30px 24px; |
| | | padding: 16px 24px; |
| | | box-sizing: border-box; |
| | | } |
| | | |