2020-11-13

bob

2020-11-25 84326b11401f217cd483d13bc72cec4ffd5da7ce

 src/views/Mine.vue

@@ -1,63 +1,843 @@
<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" v-if="isRootUser">
          <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="15" v-else>
          <el-card class="box-card" shadow="hover" style="width: 100%; height: 32vh;">
            <div v-loading="loading_tab" class="card1">
               <el-button-group style="float: right;">
                   <el-button :type="islist ? 'primary' : ''" size="mini" @click="setIsList(true)">列表</el-button>
                   <el-button :type="islist ? '' : 'primary'" size="mini" @click="setIsList(false)">图表</el-button>
               </el-button-group>
               <el-tabs v-model="tab_activeName" type="card" @tab-click="handleClick">
                  <el-tab-pane label="整体" name="all" class="z_tab_div">
                     <div v-show="islist">
                        <el-table  highlight-current-row
                           v-if="refresh"
                           ref="data_table"
                           size="mini"
                           :data="tableData_all" 
                           border
                           :header-cell-style="{'width': '100%', 'text-align': 'center'}" 
                        >
                           <el-table-column prop="range" label="范围" width="100" align="left"></el-table-column>
                           <el-table-column prop="finishAmt" label="完成金额"  align="right"></el-table-column>
                           <el-table-column prop="target" label="指标" align="right"></el-table-column>
                           <el-table-column prop="endRate" label="完成率" align="center"></el-table-column>
                           <el-table-column prop="chain" label="环比" ></el-table-column>
                        </el-table>
                     </div>
                     <div v-show="!islist" style="height: 100%;">
                        <div class="z_shadow" style="width: 100%; height: 100%;">
                           <div id="myChart_all"  style="width: 43vw; height: 24vh"></div>
                        </div>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane label="团队" name="team" class="z_tab_div">
                     <div v-show="islist">
                        <el-table  highlight-current-row
                           v-if="refresh"
                           ref="data_table"
                           size="mini"
                           :data="tableData_team" 
                           border
                           :header-cell-style="{'width': '100%', 'text-align': 'center'}" 
                        >
                           <el-table-column prop="range" label="团队" width="100"  align="left"></el-table-column>
                           <el-table-column label="上半年">
                              <el-table-column prop="finishAmt_t" label="完成金额" align="right"></el-table-column>
                              <el-table-column prop="target_t" label="指标" align="right"></el-table-column>
                              <el-table-column prop="endRate_t" label="完成率" align="center"></el-table-column>
                              <el-table-column prop="chain_t" label="环比" ></el-table-column>
                           </el-table-column>
                           <el-table-column label="下半年">
                              <el-table-column prop="finishAmt_b" label="完成金额" align="right"></el-table-column>
                              <el-table-column prop="target_b" label="指标" align="right"></el-table-column>
                              <el-table-column prop="endRate_b" label="完成率" align="center"></el-table-column>
                              <el-table-column prop="chain_b" label="环比" ></el-table-column>
                           </el-table-column>
                        </el-table>
                     </div>
                     <div v-show="!islist" style="height: 100%;">
                        <div class="z_shadow" style="width: 100%; height: 100%;">
                           <div id="myChart_team"  style="width: 43vw; height: 24vh"></div>
                        </div>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane label="成员" name="member" class="z_tab_div">
                     <div v-show="islist">
                        <el-table  highlight-current-row
                           v-if="refresh"
                           ref="data_table"
                           size="mini"
                           :data="tableData_member" 
                           border
                           :header-cell-style="{'width': '100%', 'text-align': 'center'}" 
                        >
                           <el-table-column prop="range" label="成员" width="80"  align="left"></el-table-column>
                           <el-table-column label="上半年">
                              <el-table-column prop="finishAmt_t" label="完成金额" align="right"></el-table-column>
                              <el-table-column prop="target_t" label="指标" align="right"></el-table-column>
                              <el-table-column prop="endRate_t" label="完成率" align="center"></el-table-column>
                              <el-table-column prop="chain_t" label="环比" ></el-table-column>
                           </el-table-column>
                           <el-table-column label="下半年">
                              <el-table-column prop="finishAmt_b" label="完成金额"  align="right"></el-table-column>
                              <el-table-column prop="target_b" label="指标" align="right"></el-table-column>
                              <el-table-column prop="endRate_b" label="完成率" align="center"></el-table-column>
                              <el-table-column prop="chain_b" label="环比" ></el-table-column>
                           </el-table-column>
                        </el-table>
                     </div>
                     <div v-show="!islist" style="height: 100%;">
                        <div class="z_shadow" style="width: 100%; height: 100%;">
                           <div id="myChart_member" style="width: 43vw; height: 24vh"></div>
                        </div>
                     </div>
                  </el-tab-pane>
               </el-tabs>
            </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 {
            refresh: true,
            islist: false,
            isRootUser: false,
            tab_activeName: "all",
            loading_tab: false,
            tableData_all: [],
            tableData_team: [],
            tableData_member: [],
				
            myChart_all: null,
            myChart_team: null,
            myChart_member: null,
				
            date_: "",
            overview1: [],
            tableData: [],
            activeTableData: {},
            sum_count:0,
            card3Count: {},
            typeChart:undefined,
         }
      },
      created() {
         this.init();
      },
      methods: {
         init() {
            let url = "/api/scheme/addOrUpdate";
            this.axios.get(url,{
                 params: {
                   reseachType: "1",
                   name: "2",
                   startTime: "2020-01-01",
                   endTime: "2020-01-12",
                   id: null
                 }
               }).then(data_ => {
                 console.log(data_);
				   
                this.add_Step = 1;
               }).catch(error =>{
                   console.log(error);
               })
      mounted(){
         let me = this;
         //获取用户角色
         let roleName = this.$cookies.get('roleName');
         if(roleName != "创始人") {
            this.isRootUser = true;
         }
         this.typeChart = this.$echarts.init(document.getElementById('typeChart'));
         if(!this.isRootUser) {
            this.myChart_all = this.$echarts.init(document.getElementById('myChart_all'));
            this.myChart_team = this.$echarts.init(document.getElementById('myChart_team'));
            this.myChart_member = this.$echarts.init(document.getElementById('myChart_member'));
				
            this.tocharts();
         }
			
      },
   },
      methods: {
         handleClick(tab, event) {
            if(this.tab_activeName == "all") {
               if(this.islist) {
                  this.tolist();
               }
               else {
                  this.tocharts();
               }
               //this.tableData_all = [];
            }
            else if(this.tab_activeName == "team") {
               if(this.islist) {
                  this.tolist();
               }
               else {
                  this.tocharts();
               } 
               //this.tableData_team = [];
            }
            else if(this.tab_activeName == "member") {
               if(this.islist) {
                  this.tolist();
               }
               else {
                  this.tocharts();
               } 
               //this.tableData_member = [];
            }
         },
			
         setIsList(islist_) {
            if(islist_) {
               this.tolist();
            }
            else {
               this.tocharts();
            }
         },
         tolist() {//列表
            this.islist = true;
            this.refresh = false;
            if(this.tab_activeName == "all") {
               this.tableData_all = [
                  {range: "上半年", finishAmt: 180, target: 195, endRate: "92%", chain: ""},
                  {range: "下半年", finishAmt: 300, target: 355, endRate: "92%", chain: ""},
                  {range: "全年", finishAmt: 480, target: 550, endRate: "92%", chain: ""}
               ];
            }
            else if(this.tab_activeName == "team") {
               this.tableData_team = [
                  {range: "Team1(Sai)", finishAmt_t: 70, target_t: 95, endRate_t: "92%", chain_t: "", finishAmt_b: 100, target_b: 160, endRate_b: "92%", chain_b: ""},
                  {range: "Team2(Fang)", finishAmt_t: 80, target_t: 100, endRate_t: "92%", chain_t: "", finishAmt_b: 100, target_b: 140, endRate_b: "92%", chain_b: ""},
                  {range: "夏君", finishAmt_t: 0, target_t: 0, endRate_t: "92%", chain_t: "", finishAmt_b: 30, target_b: 55, endRate_b: "92%", chain_b: ""}
               ];
            }
            else if(this.tab_activeName == "member") {
               this.tableData_member = [
                  {range: "迟文劼", finishAmt_t: 12, target_t: 20, endRate_t: "62%", chain_t: "", finishAmt_b: 20, target_b: 40, endRate_b: "52%", chain_b: ""},
                  {range: "董思彤", finishAmt_t: 12, target_t: 20, endRate_t: "62%", chain_t: "", finishAmt_b: 20, target_b: 40, endRate_b: "52%", chain_b: ""},
                  {range: "张阳", finishAmt_t: 12, target_t: 20, endRate_t: "62%", chain_t: "", finishAmt_b: 20, target_b: 40, endRate_b: "52%", chain_b: ""}
               ];
            }
            this.refresh = true;
         },
         tocharts() {//图表
            this.islist = false;
            if(this.tab_activeName == "all") {
               this.initChart_all();
            }
            else if(this.tab_activeName == "team") {
               this.initChart_team();
            }
            else if(this.tab_activeName == "member") {
               this.initChart_member();
            }
         },
         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').catch(err => {err});
         },
			
         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',
                        }
                     }
                  }
               ]
            });
         },
			
         initChart_all(val) {
            /* if(!val){
               return;
            } */
            this.myChart_all.setOption({
					
               grid: {
                  top: '10%',
                  left: '7%',
                  right: '2%',
                  bottom: '10%'
               },
               tooltip: {
                  formatter: '{a} <br/>{b} : {c}%'
               },
               toolbox: {
                  show: false,
                  feature: {
                     restore: {},
                     saveAsImage: {}
                  }
               },
               series: [
                  {
                     center: ['77%', '70%'],
                     radius: '70px',
                     startAngle: 180,
                     endAngle:0,
                     axisLine:{
                        lineStyle: {
                           width: 10
                        }
                     },
                     splitLine:{
                        length:'10%'
                     },
                     axisLabel:{
                        fontSize: 12
                     },
                     pointer:{
                        width: 5
                     },
                     title: {
                        fontSize: 12
                     }, 
							
                     name: '业务指标',
                     type: 'gauge',
                     detail: {
                        formatter: '{value}%',
                        fontSize: 20
                     },
                     data: [{value: 60, name: '下半年'}]
                  },
						
                  {
                     center: ['23%', '70%'],
                     radius: '70px',
                     startAngle: 180,
                     endAngle:0,
                     axisLine:{
                        lineStyle: {
                           width: 10
                        }
                     },
                     splitLine:{
                        length:'10%'
                     },
                     axisLabel:{
                        fontSize: 12
                     },
                     pointer:{
                        width: 5
                     },
                     title: {
                        fontSize: 12
                     }, 
							
                     name: '业务指标',
                     type: 'gauge',
                     detail: {
                        formatter: '{value}%',
                        fontSize: 20
                     },
                     data: [{value: 80, name: '上半年'}]
                  },
						
                  {
                     radius: '70px',
                     axisLine:{
                        lineStyle: {
                           width: 10
                        }
                     },
                     splitLine:{
                        length:'10%'
                     },
                     axisLabel:{
                        fontSize: 12
                     },
                     pointer:{
                        width: 5
                     },
                     title: {
                        fontSize: 12
                     }, 
							
                     name: '业务指标',
                     type: 'gauge',
                     detail: {
                        formatter: '{value}%',
                        fontSize: 20
                     },
                     data: [{value: 60, name: '全年'}]
                  }
               ]
            });
         },
         initChart_team(val) {
            /* if(!val){
               return;
            } */
            var labelOption = {
                show: true,
                position: 'insideBottom',
                distance: 15,
                align: 'left',
                verticalAlign: 'middle',
                rotate: 90,
                formatter: '{c}',
                fontSize: 12,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            };
				
            this.myChart_team.setOption({
					
                  grid: {
                     top: '10%',
                     left: '7%',
                     right: '2%',
                     bottom: '10%'
                  },
                  color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                  tooltip: {
                     trigger: 'axis',
                     axisPointer: {
                        type: 'shadow'
                     }
                  },
                  legend: {
                     data: ['上半年金额', '上半年指标', '下半年金额', '下半年指标']
                  },
                  toolbox: {
                     show: false,
                     orient: 'vertical',
                     left: 'right',
                     top: 'center',
                     feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                     }
                  },
                  xAxis: [
                     {
                        type: 'category',
                        axisTick: {show: false},
                        data: ['Team1(Sai)', 'Team2(Fang)', '夏君']
                     }
                  ],
                  yAxis: [
                     {
                        type: 'value'
                     }
                  ],
                  series: [
                     {
                        name: '上半年金额',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        data: [50, 50, 0]
                     },
                     {
                        name: '上半年指标',
                        type: 'bar',
                        label: labelOption,
                        data: [95, 100, 0]
                     },
                     {
                        name: '下半年金额',
                        type: 'bar',
                        label: labelOption,
                        data: [100, 100, 30]
                     },
                     {
                        name: '下半年指标',
                        type: 'bar',
                        label: labelOption,
                        data: [160, 140, 55]
                     }
                  ]
					
               /* 
               grid: {
                  top: '10%',
                  left: '7%',
                  right: '2%',
                  bottom: '10%'
               },
               xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
               },
               yAxis: {
                  type: 'value'
               },
               series: [{
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar',
                  showBackground: true,
                  backgroundStyle: {
                     color: 'rgba(220, 220, 220, 0.8)'
                  }
               }]
             */});
         },
         initChart_member(val) {
            /* if(!val){
               return;
            } */
            var labelOption = {
                show: true,
                position: 'insideBottom',
                distance: 15,
                align: 'left',
                verticalAlign: 'middle',
                rotate: 90,
                formatter: '{c}', /*   {name|{a}}*/
                fontSize:12,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            };
				
            this.myChart_member.setOption({
               grid: {
                  top: '10%',
                  left: '7%',
                  right: '2%',
                  bottom: '10%'
               },
               color: ['#003366', '#006699', '#4cabce', '#e5323e'],
               tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                     type: 'shadow'
                  }
               },
               legend: {
                  data: ['上半年金额', '上半年指标', '下半年金额', '下半年指标']
               },
               toolbox: {
                  show: false,
                  orient: 'vertical',
                  left: 'right',
                  top: 'center',
                  feature: {
                     mark: {show: true},
                     dataView: {show: true, readOnly: false},
                     magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                     restore: {show: true},
                     saveAsImage: {show: true}
                  }
               },
               xAxis: [
                  {
                     type: 'category',
                     axisTick: {show: false},
                     data: ['迟文劼', '董思彤', '张阳']
                  }
               ],
               yAxis: [
                  {
                     type: 'value'
                  }
               ],
               series: [
                  {
                     name: '上半年金额',
                     type: 'bar',
                     barGap: 0,
                     label: labelOption,
                     data: [12, 12, 12]
                  },
                  {
                     name: '上半年指标',
                     type: 'bar',
                     label: labelOption,
                     data: [20, 20, 20]
                  },
                  {
                     name: '下半年金额',
                     type: 'bar',
                     label: labelOption,
                     data: [28, 28, 28]
                  },
                  {
                     name: '下半年指标',
                     type: 'bar',
                     label: labelOption,
                     data: [40, 40, 40]
                  }
               ]
            });
         }
			
			
			
			
      },
   }
</script>

<style>
   .clearfix{
      text-align: left;
   }
   .grid-content {
       border-radius: 4px;
       min-height: 36px;
@@ -68,4 +848,93 @@
   .float-left{
      float: left;
   }
   .class_mine .el-card__body {
      padding-top: 10px;
   }
	
   .card1 .el-tabs__item {
      height: 30px;
      line-height: 30px;
   }
   .card1 .el-tabs__header {
      margin: 0 0 5px;
      width: 75%;
   }
   .card1 .el-table thead.is-group th {
       background: #fff;
   }
	
   .card1 .z_tab_div {
      border: 1px solid #E4E7ED;
      height: 25vh;
      overflow-y: auto;
   }
   .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>