<template>
|
<div class="inspection-main">
|
<div class="inspection-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="inspection-card inspection-head">
|
<div class="inspection-head-left">
|
<h4>今日项目接收</h4>
|
<span >2453</span>
|
<div class="inspection-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="inspection-card inspection-head">
|
<div class="inspection-head-left">
|
<h4>今日项目完成</h4>
|
<span >1687</span>
|
<div class="inspection-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="inspection-card inspection-head">
|
<div class="inspection-head-left">
|
<h4>今日项目剩余</h4>
|
<span >766</span>
|
<div class="inspection-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-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="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
|
<h4 style="margin-bottom: 5px;">今日项目合格率</h4>
|
<echart-module :id="'inspection-qualified'" :config="chartConfig2" :datas="chartData2" style="align-self: center;"></echart-module>
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
|
<div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
|
<h4 style="margin-bottom: 5px;">今日项目完成率</h4>
|
<echart-module :id="'inspection-complete'" :config="chartConfig3" :datas="chartData3" style="align-self: center;"></echart-module>
|
</div>
|
</el-col>
|
<el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
|
<div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
|
<h4 style="margin-bottom: 5px;">今日项目延期率</h4>
|
<echart-module :id="'inspection-extension'" :config="chartConfig4" :datas="chartData4" style="align-self: center;"></echart-module>
|
</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="inspection-card chart-box">
|
<h4>近10日项目接收量</h4>
|
<echart-module :id="'inspection-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="inspection-card chart-box">
|
<h4>近10日实际完成项目与接收项目对比</h4>
|
<echart-module :id="'inspection-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]
|
},
|
]
|
},
|
chartConfig2:{
|
height: '118px',
|
width:'140px',
|
isLoading:true,
|
type:'pie'
|
},
|
chartData2:{
|
title:'今日项目合格率',
|
percentage:'68%',
|
color:['#1CCAB8','#E1E4E8'],
|
data:[
|
{
|
name:'合格',
|
value:'68'
|
},
|
{
|
name:'不合格',
|
value:'32'
|
},
|
]
|
},
|
chartConfig3:{
|
height: '118px',
|
width:'140px',
|
isLoading:true,
|
type:'pie'
|
},
|
chartData3:{
|
title:'今日项目完成率',
|
percentage:'68%',
|
color:['#FBB647','#E1E4E8'],
|
data:[
|
{
|
name:'完成',
|
value:'68'
|
},
|
{
|
name:'未完成',
|
value:'32'
|
},
|
]
|
},
|
chartConfig4:{
|
height: '118px',
|
width:'140px',
|
isLoading:true,
|
type:'pie'
|
},
|
chartData4:{
|
title:'今日项延期率',
|
percentage:'68%',
|
color:['#FF3838','#E1E4E8'],
|
data:[
|
{
|
name:'延期',
|
value:'68'
|
},
|
{
|
name:'未延期',
|
value:'32'
|
},
|
]
|
},
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.inspection-main{
|
height: 100%;
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
.inspection-card{
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 14px;
|
box-shadow: 6px 6px 54px 0px rgba(0,0,0,0.05);
|
}
|
|
.inspection-head{
|
padding: 16px;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
}
|
|
.inspection-head h4{
|
color: #202224;
|
font-size: 16px;
|
font-weight: 400;
|
margin-bottom: 20px;
|
opacity: 0.8;
|
}
|
|
.inspection-head-left>span{
|
font-family: Nunito Sans-Bold;color: #202224;
|
font-weight: bold;
|
font-size: 28px;
|
display: inline-block;
|
margin-bottom: 30px;
|
}
|
|
.inspection-head-left .inspection-head-left-info{
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
color: #202224;
|
}
|
|
.inspection-head-left .inspection-head-left-info .num{
|
color: #00B69B;
|
}
|
|
.inspection-head-left .inspection-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>
|
