<template>
|
<div class="class_mine">
|
<el-row :gutter="12">
|
<el-col :span="15">
|
<el-card class="box-card" shadow="hover" style="width: 100%; height: 32vh;">
|
<div slot="header" class="clearfix">
|
<span>概览</span>
|
</div>
|
<div class="card1">
|
<el-row>
|
<el-col :span="5"><div class="grid-content" style="font-size: 14px; color: #72767B;">{{date_}}</div></el-col>
|
<el-col :span="12"><div class="grid-content" style="font-size: 14px;">今天剩余工作总计</div></el-col>
|
</el-row>
|
<div style="width: 100%; height: 110px; overflow: auto;">
|
|
<div class="card1_div" v-for="(card1_itm, k) in overview1" :key="k">
|
<div class="card1_header">{{card1_itm.name}}</div>
|
<div class="card1_body">{{card1_itm.count}}</div>
|
<div class="card1_footer">{{card1_itm.warning}}</div>
|
</div>
|
</div>
|
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="9">
|
<el-card class="box-card" shadow="hover" style="width: 100%; height: 32vh;">
|
<div slot="header" class="clearfix">
|
<span>项目总览</span>
|
</div>
|
<div class="card2">
|
<div class="card2_div" style="width: 19%;">
|
<div class="card2_header">所有项目</div>
|
<div class="card2_body">{{sum_count}}</div>
|
<el-button size="mini" type="primary" round @click="see_click">查看所有</el-button>
|
</div>
|
<div class="card2_div" style="margin-left:10%;width: 70%;">
|
<div id="typeChart" :style="{width: '100%', height: '100%'}"></div>
|
</div>
|
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="12" style="margin-top: 10px;">
|
<el-col :span="15">
|
<el-card class="box-card" shadow="hover" style="width: 100%; height: 46vh;">
|
<div slot="header" class="clearfix">
|
<span>项目统计</span>
|
</div>
|
<div class="card3">
|
<div class="card3_div" style="width: 40%; height: 34vh; overflow-y: auto; border-right: 1px solid #333333;">
|
<el-table
|
:data="tableData"
|
height="200"
|
highlight-current-row
|
@row-click="setActiveTableData"
|
style="width: 100%">
|
<el-table-column
|
prop="name"
|
label="项目名称"
|
>
|
</el-table-column>
|
</el-table>
|
|
</div>
|
<div class="card3_div" style="width: 58%;">
|
<el-row :gutter="12" style="margin-top: 10px;">
|
<el-col :span="8" style="text-align: center;">
|
<el-progress type="circle" :percentage="card3Count.rate"></el-progress>
|
</el-col>
|
<el-col :span="10" style="font-size: 14px;">
|
<div style="height: 14vh; ">
|
<div>
|
<i class="el-icon-success" style="color: #40FF9E;"></i>
|
<span>昨日完成任务数：{{card3Count.yesDeal}}</span>
|
</div>
|
<div>
|
<el-progress :percentage="card3Count.rate1" style="margin: 5px;"></el-progress>
|
</div>
|
</div>
|
|
<div>
|
<div>
|
<i class="el-icon-success" style="color: #40FF9E;"></i>
|
<span>今日完成任务数：{{card3Count.nowDeal}}</span>
|
</div>
|
<div>
|
<el-progress :percentage="card3Count.rate2" style="margin: 5px;"></el-progress>
|
</div>
|
</div>
|
</el-col>
|
|
<el-col :span="6">
|
<div style="height: 14vh;">
|
<div><span>总任务：{{card3Count.yesTotal}}</span></div>
|
<div><span>已完成：{{card3Count.yesDeal}}</span></div>
|
</div>
|
|
<div>
|
<div><span>总任务：{{card3Count.nowTotal}}</span></div>
|
<div><span>已完成：{{card3Count.nowDeal}}</span></div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="9">
|
<el-card class="box-card" shadow="hover" style="width: 100%; height: 46vh;">
|
<div slot="header" class="clearfix">
|
<span>今日待办</span>
|
</div>
|
<div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
date_: "",
|
overview1: [],
|
tableData: [],
|
activeTableData: {},
|
sum_count:0,
|
card3Count: {},
|
typeChart:undefined,
|
}
|
},
|
created() {
|
this.init();
|
},
|
mounted(){
|
this.typeChart = this.$echarts.init(document.getElementById('typeChart'));
|
},
|
methods: {
|
init() {
|
|
this.$axios.get("/api/scheme/all")
|
.then(data_ => {
|
if (data_.data.success) {
|
var datas = data_.data.data;
|
this.tableData = datas;
|
}
|
}).catch(error => {
|
// console.log(error);
|
});
|
this.$axios.get("/api/scheme/typesCnt")
|
.then(data_ => {
|
// console.log(data_);
|
if (data_.data.success) {
|
var datas = data_.data.data;
|
|
this.sum_count = datas.total;
|
this.initChart(datas.typeCnt);
|
}
|
}).catch(error => {
|
// console.log(error);
|
});
|
this.date_ = this.$moment(new Date).format('YYYY年MM月DD日');
|
this.$axios.get("/api/detail/dayTask")
|
.then(data_ => {
|
// console.log(data_);
|
if (data_.data.success) {
|
var datas = data_.data.data;
|
datas.map(el => {
|
if(el.delay > 0) {
|
el.warning="已逾期" + ell.delay;
|
}else {
|
el.warning = undefined;
|
}
|
el.count = el.total;
|
el.name = el.type;
|
return el;
|
});
|
this.overview1 = datas;
|
}
|
}).catch(error => {
|
// console.log(error);
|
})
|
// this.overview1 = [
|
// {name: "我的任务", count: 15, warning: "已逾期11"},
|
// {name: "立案与方案开发", count: 15, warning: "已逾期11"},
|
// {name: "文献检索与筛选", count: 15, warning: "已逾期11"},
|
// {name: "数据提取", count: 15, warning: "已逾期11"},
|
// {name: "数据分析", count: 15, warning: "已逾期11"},
|
// {name: "文稿撰写", count: 15, warning: "已逾期11"},
|
// ];
|
|
// this.card3Count = {
|
// total: 345, //总任务
|
// deal: 200, //已完成
|
// yesTotal: 20, //昨日总任务
|
// nowTotal: 16,
|
// unfinished1: 10, //昨日未完成
|
// unfinished2: 6,
|
// yesDeal: 10, //昨日已完成
|
// nowDeal: 10
|
// };
|
|
},
|
|
see_click() {
|
this.$router.push('/list').catch(err => {err});
|
},
|
|
setActiveTableData(currentRow, oldCurrentRow) {
|
this.activeTableData = currentRow;
|
this.$axios.get("/api/scheme/daywork/" + currentRow.id)
|
.then(data_ => {
|
// console.log(data_);
|
if (data_.data.success) {
|
var datas = data_.data.data;
|
this.card3Count = datas;
|
|
this.card3Count.rate = Math.round(this.card3Count.deal/(this.card3Count.total == 0 ? 1: this.card3Count.total) * 100);
|
this.card3Count.rate1 = Math.round(this.card3Count.yesDeal/(this.card3Count.yesTotal == 0 ? 1: this.card3Count.yesTotal) * 100);
|
this.card3Count.rate2 = Math.round(this.card3Count.nowDeal/(this.card3Count.nowTotal == 0 ? 1: this.card3Count.nowTotal) * 100);
|
|
}
|
}).catch(error => {
|
// console.log(error);
|
})
|
},
|
initChart(val) {
|
if(!val){
|
return;
|
}
|
this.typeChart.setOption({
|
|
backgroundColor: '#fff',
|
grid: {
|
top: '22%',
|
right: '2%',
|
left: '2%',
|
bottom: '18%'
|
},
|
xAxis: [{
|
type: 'category',
|
color: '#59588D',
|
data: ["未开始","进行中","已延期","已结束"],
|
axisLabel: {
|
margin: 8,
|
color: '#000',
|
textStyle: {
|
fontSize: 12
|
},
|
},
|
axisLine: {
|
show:false,
|
|
},
|
axisTick: {
|
show: false
|
},
|
}],
|
yAxis: [{
|
|
axisLabel: {
|
show:false,
|
|
},
|
axisLine: {
|
show:false,
|
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show:false,
|
|
}
|
}],
|
series: [{
|
type: 'bar',
|
data: val,
|
barWidth: '20px',
|
itemStyle: {
|
normal: {
|
color: "#409EFF",
|
barBorderRadius: [30, 30, 0, 0],
|
}
|
},
|
label: {
|
normal: {
|
show: true,
|
fontSize: 18,
|
fontWeight: 'bold',
|
color: '#333',
|
position: 'top',
|
}
|
}
|
}
|
]
|
|
});
|
}
|
},
|
}
|
</script>
|
|
<style>
|
.clearfix{
|
text-align: left;
|
}
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
.box-card{
|
width: 40%;
|
}
|
.float-left{
|
float: left;
|
}
|
.class_mine .el-card__body {
|
padding-top: 10px;
|
}
|
.card1 .grid-content {
|
min-height: 20px;
|
}
|
.card1_div {
|
float: left;
|
width: 16%;
|
text-align: center;
|
}
|
.card1_header {
|
font-size: 10px;
|
color: #999;
|
}
|
.card1_body {
|
height: 60px;
|
line-height: 60px;
|
font-size: 34px;
|
font-weight: bold;
|
border-right: 1px solid #72767B;
|
}
|
.card1_footer {
|
font-size: 10px;
|
color: #e86c6c;
|
}
|
|
.card2_div {
|
float: left;
|
text-align: center;
|
}
|
.card2_header {
|
font-size: 10px;
|
color: #999;
|
}
|
.card2_body {
|
height: 70px;
|
line-height: 70px;
|
font-size: 34px;
|
font-weight: bold;
|
}
|
.card2_footer {
|
font-size: 10px;
|
color: #e86c6c;
|
}
|
|
|
|
|
.card3_div {
|
float: left;
|
text-align: left;
|
}
|
.card3_header {
|
font-size: 10px;
|
color: #999;
|
}
|
.card3_body {
|
height: 100px;
|
line-height: 100px;
|
font-size: 34px;
|
font-weight: bold;
|
}
|
.card3_footer {
|
font-size: 10px;
|
color: #e86c6c;
|
}
|
.card3_div .el-progress-bar__outer {
|
}
|
.card3_div .el-progress-bar__inner {
|
}
|
</style>
|
