功能调整

zhangyanpeng

2020-04-30 0f49a23a9d4dc7d3eb9a7309f8cd85a316cd4d97

 src/views/Mine.vue

@@ -1,48 +1,315 @@
<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: 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');
      },
		
      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;
@@ -53,4 +320,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: 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>