<template>
|
<div class="class_mine">
|
<el-row :gutter="12">
|
<el-col :span="15">
|
<el-card class="box-card" shadow="hover" style="width: 100%; height: 30vh;">
|
<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: 30vh;">
|
<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="width: 80%;">
|
|
</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">
|
<div style="height: 14vh;">
|
<div>
|
<i class="el-icon-success" style="color: #40FF9E;"></i>
|
<span>昨日完成任务数：{{card3Count.complete1}}</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.complete2}}</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.sum1}}</span></div>
|
<div><span>未完成：{{card3Count.unfinished1}}</span></div>
|
</div>
|
|
<div>
|
<div><span>总任务：{{card3Count.sum2}}</span></div>
|
<div><span>未完成：{{card3Count.unfinished2}}</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: {},
|
|
card3Count: {}
|
}
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.date_ = this.$moment(new Date).format('YYYY年MM月DD日');
|
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.sum_count = 345;
|
|
this.tableData = [
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
{id: "1111111", name: "检查搜索肯德基传送"},
|
];
|
|
|
this.card3Count = {
|
sum: 345, //总任务
|
complete: 200, //已完成
|
sum1: 20, //昨日总任务
|
sum2: 16,
|
unfinished1: 10, //昨日未完成
|
unfinished2: 6,
|
complete1: 10, //昨日已完成
|
complete2: 10
|
};
|
this.card3Count.rate = Math.round(this.card3Count.complete/this.card3Count.sum * 100);
|
this.card3Count.rate1 = Math.round(this.card3Count.complete1/this.card3Count.sum1 * 100);
|
this.card3Count.rate2 = Math.round(this.card3Count.complete2/this.card3Count.sum2 * 100);
|
|
},
|
|
see_click() {
|
this.$router.push('/list');
|
},
|
|
setActiveTableData(currentRow, oldCurrentRow) {
|
this.activeTableData = currentRow;
|
},
|
|
},
|
}
|
</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>
|
