gdy_pc_8/src/performance/views/statement/analyse.vue

<template>
  <div v-loading="tableDataLoad" class="all">
    <template v-if="headValue.length > 0">
      <header class="flex-box flex-d-center">
        <div class="flex-box">
          <el-cascader v-model="headValue" :options="options" :props="props" :show-all-levels="false"></el-cascader>
          <!-- :props="{
            expandTrigger: 'hover',
            label: 'name',
            value: 'id',
            children: 'list'
          }" -->
        </div>
        <div>
          <el-button-group v-if="this.$isAuthoritys_jx(this.$11)">
            <el-button type="primary" icon="el-icon-document" @click="handleCommand('C')">导出明细报表</el-button>
            <el-button type="primary" icon="el-icon-document" @click="handleCommand('A')">导出结果报表</el-button>
          </el-button-group>

          <!-- <el-button type="primary">
            导出报表
          </el-button> -->
          <!-- 
          <el-dropdown>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="A">考核结果报表</el-dropdown-item>
              <el-dropdown-item command="B">多次考核结果对比表</el-dropdown-item>
              <el-dropdown-item command="C">单次考核对比表</el-dropdown-item>
              <el-dropdown-item command="D">自定义导出</el-dropdown-item> 
            </el-dropdown-menu>
            </el-dropdown>
          -->
        </div>
      </header>
      <div class="main">
        <div class="main-herader flex-box-ce">
          <div class="flex-1 fontColorB item" @click="amfTabLckick(0)">
            <div>{{ flow.all }}</div>
            <div>参与人数</div>
            <div class="bian"></div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(1)">
            <div>{{ flow.target }}</div>
            <div>目标制定</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(2)">
            <div>{{ flow.confirm }}</div>
            <div>目标确认</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(3)">
            <div>{{ flow.execution }}</div>
            <div>执行中</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(4)">
            <div>{{ flow.result_value }}</div>
            <div>结果值录入</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(5)">
            <div>{{ flow.score }}</div>
            <div>评分</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(9)">
            <div>{{ flow.review }}</div>
            <div>审批</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(11)">
            <div>{{ flow.done }}</div>
            <div>考核结束</div>
          </div>
        </div>
        <div class="main-main">
          <div class="main-title">
            结果分析
            <el-tooltip effect="dark" placement="top-start">
              <div slot="content">
                <div style="margin-bottom: 10px;">“-”代表什么？</div>
                <div style="padding-left: 20px;">
                  1、员工的绩效考评未结束时，显示“-”
                  <br />
                  2、绩效考评已结束，但员工的考核结果还没有公布时，也会显示“-
                </div>
              </div>
              <i class="el-icon-warning fontColorC"></i>
            </el-tooltip>
          </div>
          <div class="flex-box">
            <div class="flex-3" style="border-right: 1px solid #ebebeb;">
              <div class="main-title2">等级分布</div>
              <template v-if="headValue.length > 0">
                <div ref="echarts2" class="echarts"></div>
              </template>
              <NoData v-else></NoData>
            </div>
            <div class="flex-3" style="overflow-x:hidden; padding-left: 20px;">
              <el-table :data="tableData" :header-cell-style="{ background: '#ECF5FF' }">
                <el-table-column prop="name" label="绩效等级" align="center">
                  <template slot="header" slot-scope="scope">
                    <el-tooltip effect="dark" placement="top-start">
                      <div slot="content">
                        <div style="margin-bottom: 10px;">“-”代表什么？</div>
                        <div style="padding-left: 20px;">
                          1、员工的绩效考评未结束时，显示“-”
                          <br />
                          2、绩效考评已结束，但员工的考核结果还没有公布时，也会显示“-
                        </div>
                      </div>
                      <span>
                        <span>绩效等级</span>
                        <i class="el-icon-warning fontColorC"></i>
                      </span>
                    </el-tooltip>
                  </template>
                </el-table-column>

                <el-table-column prop="value" label="实际分布" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="main-footer">
          <div class="main-title">绩效排名</div>
          <div class="flex-box-ce search">
            <div class="flex-box-ce">
              <div class="label">部门</div>
              <el-select v-model="deptName" clearable multiple placeholder="请选择部门" style="width: 300px;">
                <el-option v-for="(item, index) in deptList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="flex-box-ce">
              <div class="label">等级</div>
              <el-select v-model="rank" clearable placeholder="请选择等级">
                <el-option v-for="(item, index) in tableData" :key="index" :label="item.name"
                  :value="item.name"></el-option>
              </el-select>
            </div>
          </div>
          <div class="table-box" style="padding: 20px;">
            <el-table :data="getEmployees()" :header-cell-style="{ background: '#ECF5FF' }">
              <el-table-column type="index" label="序号" align="center"></el-table-column>
              <el-table-column prop="name" label="姓名" align="center"></el-table-column>
              <el-table-column prop="dept_name" label="部门" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.departments&&scope.row.departments.length>0">
                    <span v-for="(item,key) in scope.row.departments">{{item.dept_name}},</span>
                  </span>
                  <span v-else>{{scope.row.dept_name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="final_point" label="考核结果" align="center"></el-table-column>
              <el-table-column prop="final_level" label="绩效等级" align="center">
                <template slot="header" slot-scope="scope">
                  <el-tooltip effect="dark" placement="top-start">
                    <div slot="content">
                      <div style="margin-bottom: 10px;">“-”代表什么？</div>
                      <div style="padding-left: 20px;">
                        1、员工的绩效考评未结束时，显示“-”
                        <br />
                        2、绩效考评已结束，但员工的考核结果还没有公布时，也会显示“-
                      </div>
                    </div>
                    <span>
                      <span>绩效等级</span>
                      <i class="el-icon-warning fontColorC"></i>
                    </span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="rank" label="绩效排名" align="center"></el-table-column>
              <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="openDetail(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </template>
    <div class="flex-box-v flex-center-center" v-else
      style="padding: 26px 35px;background-color: #fff;border: 1px solid #e8e8e8;border-radius: 4px;height: 400px;">
      <img src="static/images/invite_new_company.png" style="width: 200px;height: 200px;margin-bottom: 10px;" />
      <div class="fontColorB">您没有参与任何考核</div>
    </div>
  </div>
</template>

<script>
import ECharts from 'echarts';
let that;
export default {
  data() {
    return {
      tableDataLoad: false, //列表load
      options: [], //
      props: {
        lazy: true,
        label: 'name',
        value: 'id',
        children: 'list',
        lazyLoad (node, resolve) {
          const { level } = node;
          that.getAssessTree(node,resolve);
          // setTimeout(() => {
          //   const nodes = Array.from({ length: level + 1 }).map(item => ({
          //       value: ++id,
          //       label: `选项${id}`,
          //       leaf: level >= 2
          //   }));
          //   // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          //   resolve(nodes);
          // }, 1000);
        }
      },
      headValue: [],
      amhlList: [
        { value: 0, label: '全部' },
        { value: 2, label: '月度' },
        { value: 3, label: '季度' },
        { value: 4, label: '半年度' },
        { value: 5, label: '年度' },
        { value: 1, label: '日' },
        { value: 6, label: '自定义' }
      ],
      flow: {},
      tableData: [],
      package_id: '',
      employees: [],
      deptList: [],
      deptName: [], //部门名称
      rank: '' ,//级别
      cycle_type:0,
    };
  },
  components: {},
  watch: {
    deptName(val) {
      console.log(val)
      // this.getEmployees();
    },
    rank(val) {
      // this.getEmployees();
    },
    headValue(val) {
      this.tableData = [];
      this.deptList = [];
      this.cycle_type = val[0];
      this.package_id = val[val.length - 1];
      this.getData();
    }
  },
  created() {
    that=this;
  },
  mounted() {
    this.assessTree();
  },
  methods: {
    //点击表格某一行
    amfTabLckick(index) {
      let data={
        navcli:index,
        cycle_type:this.cycle_type,
        id:this.package_id,
      }
      this.$router.push({ path: '/assessDetails', query: { amfTabLckick: JSON.stringify(data) } });
    },
    getEmployees() {
      var employees = this.employees;
      var arr = [];
      if (this.deptName.length > 0) {
        employees.forEach(item => {
          if(item.departments){
              item.departments.some(dep=>{
                let is=false;
                this.deptName.some(name=>{
                  if(dep.dept_name==name){
                    arr.push(item)
                    is=true
                    return true
                  }
                })
                if(is){
                  return true
                }
              })
          }else if(item.dept_name==this.deptName){
             arr.push(item)
          }
        });
      } else {
        arr = employees;
      }


      if (this.rank) {
        arr = arr.filter(item => {
          return item.final_level == this.rank;
        });
      }
      return arr;
    },
    getData() {
      if(!this.package_id){
        return false;
      }
      this.tableDataLoad = true;
      this.$axiosUser('get', '/api/pro/per/statistics', { package_id: this.package_id })
        .then(res => {
          this.flow = res.data.data.flow;
          this.setTableData(res.data.data.employees);
          this.employees = res.data.data.employees;
          this.getEmployees();
        })
        .finally(() => {
          this.tableDataLoad = false;
        });
    },
    setTableData(employees) {
      var obj = {};
      let deptList = new Set();
      this.deptList = [];
      employees.forEach(item => {
        var count = 0;
        if(item.departments){
          item.departments.forEach(dep=>{
            deptList.add(dep.dept_name)
          })
        }else if(item.dept_name){
          deptList.add(item.dept_name)
        }
        employees.forEach(item2 => {
          if (item.final_level == item2.final_level) {
            count++;
          }
        });
        obj[item.final_level] = count;
      });

      let deptArr=[...deptList]
      this.getResult(Object.keys(obj), Object.values(obj));
      let tableData = [];
      for (let key in obj) {
        tableData.push({ name: key, value: obj[key] });
      }
      deptArr.forEach(item=>{
        this.deptList.push({ label: item, value:item });
      })
      this.tableData = tableData;
    },

    //结果分析
    getResult(keys, values) {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: keys
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            data: values,
            type: 'bar',
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#409EFF', '#4ECB73', '#36CBCB', '#F2637B', '#FBD437', '#749f83', '#ca8622'];
                  var index;
                  //给大于颜色数量的柱体添加循环颜色的判断
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                    return colorList[index];
                  }
                  return colorList[params.dataIndex];
                }
              }
            },
            barMaxWidth: 30
          }
        ]
      };
      var myChart = ECharts.init(this.$refs.echarts2);
      option && myChart.setOption(option);
    },

    //考核人数
    getAssessNum() {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200
                // itemStyle: {
                //   color: '#409EFF'
                // }
              }
            ],
            type: 'bar',
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                  var index;
                  //给大于颜色数量的柱体添加循环颜色的判断
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                    return colorList[index];
                  }
                  return colorList[params.dataIndex];
                }
              }
            },
            barMaxWidth: 30
          }
        ]
      };
      var myChart = ECharts.init(this.$refs.echarts1);
      option && myChart.setOption(option);
    },

    getAssessTree(node,resolve){
      if(this.options.length==0){
        return
      }
      this.tableDataLoad = true;
      this.$axiosUser('get', 'api/pro/per/package/list', { page: 0, is_manage_scope: 1,cycle_type:node.value}).then(res => {
            let data = res.data.data.list;
            data.forEach(item=>{
              item.leaf=true;
            })
            resolve(data)
      }).finally(() => {
          this.tableDataLoad = false;
      });
    },
    //请求绩效树
    assessTree() {
      this.tableDataLoad = true;
      this.$axiosUser('get', 'api/pro/per/package/list', { page: 0, is_manage_scope: 1 }).then(res => {
          if (res.data.code == 1) {
            let data = res.data.data.list;
            data.forEach(item=>{
              item.leaf=true;
            })
            let arr = [
              { name: '月度', id: 2, list: [] },
              { name: '日', id: 1, list: [] },
              { name: '季度', id: 3, list: [] },
              { name: '半年度', id: 4, list: [] },
              { name: '年度', id: 5, list: [] },
              { name: '自定义', id: 6, list: [] }
            ];
            let arr2 = [
              { name: '月度', id: 2, list: [] },
              { name: '日', id: 1, list: [] },
              { name: '季度', id: 3, list: [] },
              { name: '半年度', id: 4, list: [] },
              { name: '年度', id: 5, list: [] },
              { name: '自定义', id: 6, list: [] }
            ];
            data.forEach(item => {
             arr.forEach(item2 => {
                if (item2.id == item.cycle_type) {
                  item2.list.push(item);
                }
              });
            });
            let headValue = [];
            arr.some((item,index) => {
              if (item.list.length > 0) {
                arr2[index].list=item.list;
                headValue.push(item.id);
                headValue.push(item.list[0].id);
                return true;
              }
            });
            this.options=arr2;
            if (headValue.length > 0) {
              this.$nextTick(()=>{
                this.headValue = headValue;
                window.addEventListener('resize', this.selfAdaption);
              })
            }
          }
      }).finally(() => {
          this.tableDataLoad = false;
      });
    },
    //echarts自适应
    openDetail(item) {
      if (item.per_id) {
        this.$router.push({
          path: '/staffAssDet',
          query: { assID: this.package_id, employeeID: item.per_id, employeeIDs: item.id }
        });
      }
    },
    selfAdaption() {
      // var echarts1 = ECharts.init(this.$refs.echarts1);
      var echarts2 = ECharts.init(this.$refs.echarts2);
      // echarts1.resize();
      echarts2.resize();
    },
    handleCommand(val) {
      switch (val) {
        case 'A': //导出结果
          this.$axiosUser('get', '/api/pro/per/package/export/result', { package_id: this.package_id }).then(res => {
            this.$alert('系统正在处理中，处理完将在首页以“消息”形式通知您，请留意消息通知', '提示', {
              confirmButtonText: '我知道了',
              callback: action => {}
            });
          });
          break;
        case 'C': //导出明细
          this.$axiosUser('get', '/api/pro/per/package/export/detail', { package_id: this.package_id }).then(res => {
            this.$alert('系统正在处理中，处理完将在工作台以“消息”形式通知您，请留意消息通知', '提示', {
              confirmButtonText: '我知道了',
              callback: action => { }
            });
          });
          break;
        case 'g': //管理
          this.isManagement = true;
          break;
      }
    },
    filtrationStr(str) {
      let name = '';
      switch (str) {
        case 'all':
          name = '参与人数';
          break;
        case 'done':
          name = '流程完成节点人数';
          break;
        case 'review':
          name = '审批节点节点人数';
          break;
        case 'target':
          name = '目标制定节点人数';
          break;
        case 'confirm':
          name = '目标确认节点人数';
          break;
        case 'execution':
          name = '执行中节点人数';
          break;
        case 'score_self':
          name = '自评节点人数';
          break;
        case 'result_value':
          name = '结果值录入节点人数';
          break;
        case 'score_mutual':
          name = '互评节点人数';
          break;
        case 'special_scorer':
          name = '指定评分人节点人数';
          break;
        case 'score_supervisor':
          name = '上级评分节点人数';
          break;
        case 'score':
          name = '所有评分节点人数';
          break;
      }
      return name;
    }
  },
  beforeDestroy() {
    //离开路由
    window.removeEventListener('resize', this.selfAdaption); //取消echarts自适应
  }
};
</script>

<style scoped="scoped" lang="scss">
.all {
  background-color: #fff;
  padding: 20px;
  min-height: calc(100vh - 210px);
}
header {
  height: 42px;
}
.main {
  background-color: #fff;
}
.main-herader {
  margin: 10px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  // box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
}
.item {
  text-align: center;
  padding: 20px;
  position: relative;
  cursor: pointer;
}
.item div:nth-child(1) {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #409EFF;
}
.bian {
  position: absolute;
  width: 1px;
  height: 30px;
  background-color: #e8e8e8;
  right: 0;
  top: 50%;
  margin-top: -15px;
}
.echarts {
  height: 350px;
  width: 100%;
}
.main-title {
  font-weight: 600;
  // padding: 20px 0px;
  font-size: 16px;
  position: relative;
  margin: 20px 0 20px 20px;
  &::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 18px;
    background-color: #409EFF;
    left: -10px;
    top: 2px;
  }
}
.main-title2 {
  padding-left: 40px;
  font-size: 14px;
  font-weight: 600;
}
.departments {
  width: 46%;
  margin-bottom: 10px;
}
.departments span {
  background-color: #e6a23c;
  color: #fff;
  width: 18px;
  height: 18px;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  display: inline-block;
}
.department-name {
  padding: 0 10px;
}
.label {
  width: 50px;
  text-align: right;
  margin-right: 10px;
}
.search {
  padding: 20px;
  padding-bottom: 0;
}
</style>