2020-11-13

bob

2020-11-25 84326b11401f217cd483d13bc72cec4ffd5da7ce

 src/views/Mine.vue

@@ -1,7 +1,7 @@
<template>
   <div class="class_mine">
      <el-row :gutter="12">
        <el-col :span="15">
        <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>
@@ -19,10 +19,109 @@
                        <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">
@@ -124,6 +223,19 @@
   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: [],
@@ -137,11 +249,100 @@
         this.init();
      },
      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: {
         init() {
         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) {
@@ -233,7 +434,6 @@
            return;
         }
         this.typeChart.setOption({
				
                backgroundColor: '#fff',
                grid: {
                    top: '22%',
@@ -299,9 +499,337 @@
                    }
                }
            ]
            });
         },

         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>
@@ -323,6 +851,24 @@
   .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;
   }