首页

zhangyanpeng

2020-01-23 7f2bc78a5101017c4470577003e4cf99c0ca7648

首页

 src/views/Mine.vue

@@ -1,48 +1,198 @@
<template>
    <div>
        <el-card class="box-card float-left"  shadow="hover">
            <div slot="header" class="clearfix">
                <span>概览</span>
            </div>
            <div>
                <el-row>
                  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                </el-row>
            </div>
        </el-card>
		
        <el-card class="box-card"  shadow="hover">
            <div slot="header" class="clearfix">
                <span>项目总览</span>
            </div>
            <div>
                <el-row>
                  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                </el-row>
            </div>
        </el-card>
    <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="250"
                                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;
@@ -53,4 +203,75 @@
    .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: 100px; 
        line-height: 100px; 
        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>

 src/views/Overview.vue

@@ -35,7 +35,15 @@
                </div>
            </div>
        </div>
        <div class="z_shadow" style="float: right; margin-right: 1%; width: 28%; height: 70vh; border: 1px solid #e4eef9;"></div>
        <div class="z_shadow" style="float: right; margin-right: 1%; padding: 10px; box-sizing: border-box; width: 28%; height: 70vh; border: 1px solid #e4eef9; overflow: auto;">
            <h3 style="margin: 0px;">项目概览</h3>
            <div v-for="(type_itm, k_) in task_itm" :key="k_">
                <h3>{{k_+1}}、{{type_itm.name}} <span style="font-size: 12px; color: #409EFF;">{{type_itm.state}} </span></h3> 
                <div>
                    <span>{{type_itm.desp}}</span>
                </div>
            </div>
        </div>
        
        
        
@@ -72,6 +80,19 @@
                dialog_1: false,
                fileLevel: 0,
                fileList: [],
				
                task_itm: [
                     {'id': "111_1", 'name': "立题服务", desp: "描述看到静安寺", 'state': "进行中"}, //
                     {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                     {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                     {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                     {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                     {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                     {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                     {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                     {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
					
                ]
            }
        },
        mounted() {