时间调整

zhangyanpeng

2020-02-11 fb897b38980a0d8e043c0415e84f3677e7e0cef0

 src/views/Mine.vue

@@ -2,7 +2,7 @@
   <div class="class_mine">
      <el-row :gutter="12">
        <el-col :span="15">
          <el-card class="box-card" shadow="hover" style="width: 100%; height: 30vh;">
          <el-card class="box-card" shadow="hover" style="width: 100%; height: 32vh;">
             <div slot="header" class="clearfix">
                <span>概览</span>
             </div>
@@ -12,6 +12,7 @@
                  <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>
@@ -23,7 +24,7 @@
          </el-card>
        </el-col>
        <el-col :span="9">
          <el-card class="box-card"  shadow="hover" style="width: 100%; height: 30vh;">
          <el-card class="box-card"  shadow="hover" style="width: 100%; height: 32vh;">
             <div slot="header" class="clearfix">
                <span>项目总览</span>
             </div>
@@ -33,8 +34,8 @@
                     <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 class="card2_div" style="margin-left:10%;width: 70%;">
                     <div id="typeChart"  :style="{width: '100%', height: '100%'}"></div>
                  </div>   
                  
             </div>
@@ -50,28 +51,29 @@
             <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>
                         :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;">
                        <el-col :span="10" style="font-size: 14px;">
                           <div style="height: 14vh; ">
                              <div>
                                 <i class="el-icon-success" style="color: #40FF9E;"></i>
                                 <span>昨日完成任务数：{{card3Count.complete1}}</span>
                                 <span>昨日完成任务数：{{card3Count.yesDeal}}</span>
                              </div>
                              <div>
                                 <el-progress :percentage="card3Count.rate1" style="margin: 5px;"></el-progress>
@@ -81,7 +83,7 @@
                           <div>
                              <div>
                                 <i class="el-icon-success" style="color: #40FF9E;"></i>
                                 <span>今日完成任务数：{{card3Count.complete2}}</span>
                                 <span>今日完成任务数：{{card3Count.nowDeal}}</span>
                              </div>
                              <div>
                                 <el-progress :percentage="card3Count.rate2" style="margin: 5px;"></el-progress>
@@ -91,13 +93,13 @@
                        
                        <el-col :span="6">
                           <div style="height: 14vh;">
                              <div><span>总任务：{{card3Count.sum1}}</span></div>
                              <div><span>未完成：{{card3Count.unfinished1}}</span></div>
                              <div><span>总任务：{{card3Count.yesTotal}}</span></div>
                              <div><span>已完成：{{card3Count.yesDeal}}</span></div>
                           </div>
                           
                           <div>
                              <div><span>总任务：{{card3Count.sum2}}</span></div>
                              <div><span>未完成：{{card3Count.unfinished2}}</span></div>
                              <div><span>总任务：{{card3Count.nowTotal}}</span></div>
                              <div><span>已完成：{{card3Count.nowDeal}}</span></div>
                           </div>
                        </el-col>
                     </el-row>
@@ -126,54 +128,82 @@
            overview1: [],
            tableData: [],
            activeTableData: {},
				
            card3Count: {}
            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_ => {
                  console.log(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.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.$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.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);
            // this.card3Count = {
            //    total: 345, //总任务
            //    deal: 200, //已完成
            //    yesTotal: 20,  //昨日总任务
            //    nowTotal: 16,
            //    unfinished1: 10,  //昨日未完成
            //    unfinished2: 6,
            //    yesDeal: 10,  //昨日已完成
            //    nowDeal: 10
            // };
            
      },
      
@@ -183,8 +213,96 @@
      
      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>
@@ -239,8 +357,8 @@
      color: #999;
   }
   .card2_body {
      height: 100px; 
      line-height: 100px; 
      height: 70px; 
      line-height: 70px; 
      font-size: 34px; 
      font-weight: bold; 
   }