首页

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 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>
             <div class="card1">
            <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-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-card class="box-card"  shadow="hover">
        </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>
            <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 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>