dd_pc/src789/views/ranking/manager_statistics.vue

<template>
  <div>
    <div class="all wlj">
      <el-tabs v-model="activeName" type="card"><!-- 奖扣完成情况 -->
        <el-tab-pane label="奖扣完成情况" name="second">
          <el-form :model="condition" :inline="true" ref="formData">

			    <!-- 部门 -->
            <el-form-item label="部门">
				<el-cascader
				    size="medium"
					class="date-picker-width"
					v-model="dept_name_xq_xq"
					:options="dept_tree"
					@change="get_last_dept_null"
					:props="{ checkStrictly: true,value:'id',label:'name',children:'_child'}"
					ref="dept"
					clearable
					filterable
					change-on-select
					placeholder="全公司"
				></el-cascader>
            </el-form-item>

			    <!-- 时间 -->
            <el-form-item label="时间">
              <el-date-picker
                class="date-picker-width"
                v-model="condition.month"
                clearable
				size="medium"
                width="100%"
                type="month"
                placeholder="请选择月份"
                value-format="yyyy-MM"
              ></el-date-picker>
            </el-form-item>

			    <!-- 搜索框 -->
            <el-form-item style="margin-top: 2px;">
              <el-input
                v-model="condition.keyword"
                placeholder="输入同事姓名"
                max="200"
				size="medium"
                @keyup.enter.native="keyWordSelect"
                class="persons_name"
              >
                <el-button slot="append" size="medium" icon="el-icon-search" @click='search_box'></el-button>
              </el-input>
            </el-form-item>

			    <!-- 达标选项 -->
            <br>
            <el-form-item>
              <el-checkbox v-model="allPass" size="medium" label="只看全部达标的"></el-checkbox>
            </el-form-item>

			    <!-- 导出报表 -->
            <el-form-item>
              <el-button type="primary" plain @click="exportExcel" size="medium" style="margin-left:20px">导出报表</el-button>
            </el-form-item>

          </el-form>

		    <el-table :data="last" style="width: 100%" v-loading="loading" >
            <el-table-column label="管理者">
              <template slot-scope="scope">
                <userImage
                  class="fl"
                  :id="scope.row.id"
                  :user_name="scope.row.name"
                  :img_url="scope.row.img_url"
                  width="50px"
                  height="50px"
                ></userImage>
                <span
                  style=" margin-left: 10px; line-height: 50px; display: inline-block;"
                >{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="奖分" prop="scope_count">
            <template slot-scope="scope">
              <b>{{scope.row.reward.point}}&nbsp;</b>
              <span :class="scope.row.reward.status == 1?'color_green':''">{{scope.row.reward.status==1?'达标':''}}</span><br/>
              <span class="span_h">奖分目标 {{scope.row.reward.target}}</span>
            </template>
            </el-table-column>
                <el-table-column label="扣分" prop="reward_count">
            <template slot-scope="scope">
              <b>{{scope.row.deduction.point}}&nbsp;</b>
              <span :class="scope.row.deduction.status == 1?'color_green':''">{{scope.row.deduction.status==1?'达标':''}}</span><br/>
              <span class="span_h">扣分目标 {{scope.row.deduction.target}}</span>
            </template>
			      </el-table-column>
              <el-table-column label="奖扣比例" prop="deduct_count">
				    <template slot-scope="scope">
              <div v-if="scope.row.ratio.enable == 1">
                <b>{{scope.row.ratio.reward_ratio}}&nbsp;:1 </b>
                <span :class="scope.row.ratio.status == 1?'color_green':''">{{scope.row.ratio.status==1?'达标':''}}</span><br/>
                <span class="span_h">比例目标 小于 {{scope.row.ratio.target}}<b>:</b>&nbsp;1</span>
              </div>
              <div v-else style="padding-left:21px"> —</div>
            </template>
            </el-table-column>
            <el-table-column label="人次目标" prop="deduct_count">
              <template slot-scope="scope">
                <b>{{scope.row.exec.count}}&nbsp;</b>
                <span :class="scope.row.exec.status == 1?'color_green':''">{{scope.row.exec.status==1?'达标':''}}</span><br/>
                <span class="span_h">人次目标 {{scope.row.exec.target}}人次</span>
              </template>
			      </el-table-column>
            <template slot="empty">
              <div class="nopoint_box">
                <div class="noimg noperson"></div>
                <span class="title">没有对应的数据</span>
              </div>
            </template>
          </el-table>

		  

          <center style="padding: 20px 0;">
            <el-pagination
              background
              @size-change="handleSizeChange_xq"
              @current-change="handleCurrentChange_xq"
              :current-page="condition.page"
              layout="total, sizes, prev, pager, next"
              :page-size="condition.page_size"
              :total="totals"
            ></el-pagination>
          </center>

        </el-tab-pane>
        <el-tab-pane label="奖扣执行对比" name="first">
          <el-form :model="formData" :inline="true" ref="formData">
            <el-form-item label="部门">
              <el-cascader
                v-model="dept_name_xq"
                :options="dept_tree"
                @change="dept_null"
				:props="{ checkStrictly: true,value:'id',label:'name',children:'_child'}"
                ref="depts"
                filterable
				size="medium"
                change-on-select
                placeholder="全公司"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker
                class="date-picker-width"
                v-model="formData.month"
                clearable
                width="100%"
                type="month"
				size="medium"
                placeholder="请选择月份"
                value-format="yyyy-MM"
              ></el-date-picker>
            </el-form-item>
          </el-form>

          <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="open_detail">
            <el-table-column label="管理者">
              <template slot-scope="scope">
                <userImage
                  class="fl"
                  :id="scope.row.id"
                  :user_name="scope.row.name"
                  :img_url="scope.row.img_url"
                  width="50px"
                  height="50px"
                ></userImage>
                <span
                  style=" margin-left: 10px; line-height: 50px; display: inline-block;"
                >{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="管理范围(人)" prop="scope_count"></el-table-column>
            <el-table-column label="人均奖分(次)" prop="reward_count"></el-table-column>
            <el-table-column label="人均扣分(次)" prop="deduct_count"></el-table-column>
            <template slot="empty">
              <div class="nopoint_box">
                <div class="noimg noperson"></div>
                <span class="title">没有对应的数据</span>
              </div>
            </template>
          </el-table>

          <center style="padding: 20px 0;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="formData.page"
              :page-sizes="[10, 20, 30, 40, 50, 100]"
              layout="total, sizes, prev, pager, next"
              :page-size="formData.page_size"
              :total="total"
            ></el-pagination>
          </center>

          <el-drawer size="500px" :visible.sync="detail_show" :with-header="false" direction="rtl">
            <el-button type="info" style="position: absolute; left: -100px;">test</el-button>
            <div class="drawer_title">
              {{item.name}}的奖扣统计
              <el-tooltip placement="top">
                <div slot="content" style="width: 300px">作为管理者，管理执行力是关键，每月按要求完成奖分和扣分任务。</div>
                <span class="tips">?</span>
              </el-tooltip>
            </div>
            <div class="chart_content">
              <el-row :gutter="20" v-if="personalData !== null" v-loading="personalData_loading">
                <el-col :span="4">
                  <div class="dataItem">
                    <p class="point">{{personalData.task.reward.point}}</p>
                    <p>奖分</p>
                    <p class="target">目标{{personalData.task.reward.target_point}}</p>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="dataItem">
                    <p class="point">{{personalData.task.deduction.point}}</p>
                    <p>扣分</p>
                    <p class="target">目标{{personalData.task.deduction.target_point}}</p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="dataItem">
                    <p class="point">{{personalData.task.ratio.ratio}}:1</p>
                    <p>奖扣比例</p>
                    <p class="target">目标>{{personalData.task.ratio.target_ratio}}:1</p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="dataItem">
                    <p class="point">{{personalData.task.exec.count}}</p>
                    <p>奖扣人次</p>
                    <p class="target">目标{{personalData.task.exec.target_count}}</p>
                  </div>
                </el-col>
              </el-row>

              <div class="chart-legend__wrap">
                <span class="fl">月奖扣执行情况</span>
                <span class="chart-legend__pink">奖分</span>
                <span class="chart-legend__green">扣分</span>
              </div>
              <div id="situationChart" v-loading="echart_loading" style="height: 300px;"></div>

              <div class="chart-legend__wrap">
                <div class="fl">月奖扣人次</div>
                <span class="chart-legend__pink">奖分人次</span>
                <span class="chart-legend__green">扣分人次</span>
              </div>
              <div id="passengersChart" v-loading="echart_loading" style="height: 300px;"></div>
            </div>
          </el-drawer>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import ECharts from "echarts";
export default {
  data() {
    return {
      last: [],
	    //完成情况
	    condition: {
        month: this.$moment().format("YYYY-MM"),//时间
        page: 1,//当前页
        page_size: 10,//每页数量
        dept_id: 0,//部门id
        keyword:'',//关键字
        complete:'',//是否达标 1是
      },
      activeName: "second",
      totals: null,
      dept_name_xq_xq: "",

	    //对比
      loading: false,
      choose_time: "",
      input: "",
      radio: "1",
      formData: {
        month: this.$moment().format("YYYY-MM"),
        page: 1,
        page_size: 10,
        dept_id: 0,
      },
      total: null,
      allPass: false,
      list: [],
      detail_show: false,
      echart_loading: false,
      item: {},
      dept_name_xq: "",
      dept_tree: [],
      personalData_loading: false,
      personalData: null,
    };
  },
  watch: {
	//对比
    "formData.month"(val, old_val) {
      this.formData.page = 1;
      this.get_list();
	},
	//情况
    "condition.month"(val, old_val) {
      this.condition.page = 1;
      this.get_last();
	},
	//查看全部达标
    'allPass'(val,old_val){
    	if(val){
    		this.condition.complete = '1'
    	}else{
    		this.condition.complete = '0'
      }
      this.condition.page = 1
    	this.get_last()
	},
	
  },
  methods: {
    //情况
	get_last() {
      this.loading = true;
      this.$axios("get","/api/integral/statistics/prize/list",this.condition,'v4').then((res) => {
          if (res.data.code == 1) {
            this.last = res.data.data.list;
            this.totals = res.data.data.total;
          } else {
            this.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          this.loading = false;
        });
	},
	//部门
	get_last_dept_null(val) {
      if (val.length == 0) {
        this.condition.dept_id = 0;
      } else {
		    this.condition.dept_id = val[0];
      }
      this.$nextTick(() => {
        this.condition.page = 1;
        this.$refs.dept.dropDownVisible = false; //监听值发生变化就关闭它
        this.get_last();
      });
	},
	//搜索框
	search_box(){
		this.get_last();
  },
  //导出报表
  exportExcel() {
      let data = "";
      //部门
        this.condition.dept_id>0?data+="&rule_id="+ this.condition.dept_id:data+="&rule_id=0"
      //时间
        data+="&month="+this.condition.month
      //搜索框
        this.condition.keyword==''?data+="&keyword=0":data+="&keyword="+this.condition.keyword
      //是否达标
        this.condition.complete!=0?data+="&complete="+this.condition.complete:data+="&complete=0"
      //当前页数
        data+="&page="+this.condition.page
      window.open(
        process.env.BASE_API +
          "/api/download/prize/list/v4?employee_id="+
          this.$store.getters.user_info.id +
          data,
        "_blank"
      );
      this.dialogVisible = false;
    },
    //分页选择显示多少条
    handleCurrentChange_xq(val) {
      this.condition.page = val;
      this.get_last();
    },
    //分页
    handleSizeChange_xq(val){
      this.condition.page_size = val;
      this.get_last();
    },
    handleSizeChange(val) {
      this.formData.page_size =val;
      this.get_list();
    },
    handleCurrentChange(val) {
      this.formData.page = val;
      this.get_list();
    },
    get_list() {
      this.loading = true;
      this.$axios("get","/api/integral/statistics/prize/list",this.formData,'v3').then((res) => {
          if (res.data.code == 1) {
            this.list = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    search() {
      this.get_list();
    },
    open_detail(row, column, event) {
      this.detail_show = true;
      this.item = row;
      this.$nextTick(() => {
        this.situationChart = ECharts.init(
          document.getElementById("situationChart")
        );
        this.passengersChart = ECharts.init(
          document.getElementById("passengersChart")
        );
      });
      this.getData(() => (this.echart_loading = false));
      this.getDataV1(() => (this.personalData_loading = false));
    },
    getChartOption(xAxisData, rewardData, deductionData) {
      return {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          containLabel: true,
          top: "4%",
          right: "4%",
          bottom: "5%",
          left: "7%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: { lineStyle: { color: "#eee" } },
          axisLabel: { color: "#333" },
          data: xAxisData,
        },
        yAxis: {
          position: "right",
          axisLine: { lineStyle: { color: "#eee" } },
          axisLabel: { color: "#333" },
          type: "value",
          splitLine: { lineStyle: { color: "#eee" } },
        },
        series: [
          {
            name: "奖分",
            type: "line",
            data: rewardData,
            lineStyle: { normal: { color: "#F56C6C" } },
          },
          {
            name: "扣分",
            type: "line",
            data: deductionData,
            lineStyle: { normal: { color: "#53B87F" } },
          },
        ],
      };
    },
    // v2
    getData(callBack) {
      this.echart_loading = true;
      const data = {
        employee_id: this.item.id || 0,
        month: this.formData.month,
      };
      this.$axios('get',"/api/integral/statistics/prize",data).then((res) => {
         if (res.data.code === 1) {
            const item = res.data.data;
            this.employeeName = item.name;
            const deduct = item.chart.deduct;
            const situationRewardData = [];
            const situationDeductionData = [];
            const passengersRewardData = [];
            const passengersDeductionData = [];
            const xAxisData = item.chart.reward.map((o, i) => {
              // 降分分数
              situationDeductionData.push(item.chart.reward[i].point);
              // 扣分分数
              passengersDeductionData.push(item.chart.deduct[i].point);
              // 奖分次数
              situationRewardData.push(item.chart.reward[i].count);
              // 扣分次数
              passengersRewardData.push(item.chart.deduct[i].count);
              return o.date;
            });
            this.situationChart.setOption(
              this.getChartOption(
                xAxisData,
                situationDeductionData,
                passengersDeductionData
              )
            ); //奖分数值、扣分数值
            this.passengersChart.setOption(
              this.getChartOption(
                xAxisData,
                situationRewardData,
                passengersRewardData
              )
            ); //月奖扣人次
          }
        }).finally(() => {
          this.echart_loading = false;
        });
    },
    // v1
    getDataV1(callBack) {
      this.personalData_loading = true;
      const data = {
        employee_id: this.item.id || 0,
        month: this.formData.month,
      };
      this.$axios("get","/api/integral/statistics",data,).then((res) => {
          if (res.data.code == 1) {
            this.personalData = res.data.data;
          } else {
            this.$message.error(res.data.data.msg);
          }
        }).finally(() => {
          this.personalData_loading = false;
        });
    },
    dept_null(val) {
      if (val.length == 0) {
        this.formData.dept_id = 0;
      } else {
        this.formData.dept_id = this.dept_name_xq[this.dept_name_xq.length - 1];
      }
      this.$nextTick(() => {
        this.formData.page = 1;
        this.$refs.depts.dropDownVisible = false;
        this.get_list();
      });
    },
	//获取部门
	getDepartment() {
		this.$axios('get','/api/department/tree').then(res => {
			this.dept_tree =this.getTreeData(res.data.data.list);
		});
	},
	// 递归判断列表，把最后的children设为undefined
	getTreeData(data) {
		for (var i = 0; i < data.length; i++) {
			data[i].obj={id:data[i].id,name:data[i].name};
			if (data[i]._child.length < 1) {
				// children若为空数组，则将children设为undefined
				data[i]._child = undefined;
			} else {
				// children若不为空数组，则继续 递归调用 本方法
				this.getTreeData(data[i]._child);
			}
		}
		return data;
	}
  },
  mounted() {
	  this.getDepartment();
	// this.get_list();
 //    this.get_last();
  },
};
</script>
<style scoped lang="scss">
.search_box {
  ::v-deep button:active {
    background: #26a2ff;
  }
 ::v-deep button:active .el-icon-search {
    color: #fff;
  }
}
.date-picker-width {
  width: 100% !important;
}
.color_green {
  color: #67c23a;
}
.nopoint_box {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}
.noimg {
  display: inline-block;
  width: 110px;
  height: 110px;
  margin: 22px auto 16px;
  background-size: 99%;
}
.noperson {
  display: inline-block;
  width: 110px;
  height: 110px;
  line-height: none;
  margin: 22px auto 16px;
  background: url("/static/images/noperson_default.png") no-repeat center;
  background-size: 99%;
}
.title {
  display: block;
  text-align: center;
  font-size: 12px !important;
  line-height: 30px;
  color: #909399 !important;
  padding: 0;
}
.nopoint_box a {
  color: #26a2ff;
}
.chart_content {
  height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  .chart-legend__wrap {
    text-align: right;
    padding: 20px;
    padding-right: 50px;
    & .chart-legend__pink {
      position: relative;
      padding-left: 12px;
      padding-right: 5px;
      &:after {
        content: "";
        position: absolute;
        margin-top: -2px;
        top: 35%;
        left: 0;
        width: 8px;
        height: 8px;
        background: #f56c6c;
        border-radius: 100%;
      }
    }

    & .chart-legend__green {
      position: relative;
      padding-left: 12px;
      &:after {
        content: "";
        position: absolute;
        margin-top: -2px;
        top: 35%;
        left: 0;
        width: 8px;
        height: 8px;
        background: #53b87f;
        border-radius: 100%;
      }
    }
  }
}

// 滚动条样式
.chart_content::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgb(255, 255, 255);
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
}
.chart_content::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(201, 201, 201, 0);
}
.chart_content::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
  background-color: rgb(168, 167, 167);
}

.dataItem {
  text-align: center;
  .point {
    font-size: 22px;
    color: #26a2ff;
    margin: 10px 0;
  }
  .target {
    font-size: 12px;
    color: #909399;
  }
}
.drawer_title {
  font-size: 18px;
  padding: 20px;
}
.manager_statistics_box {
  background-color: #ffffff;
  padding: 20px;
  min-height: calc(100vh - 160px);
  ::v-deep .el-row .el-checkbox .el-checkbox__label {
    line-height: 20px;
  }
}
.tips {
  background: #409eff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
}
.el-form-item__label {
  width: 0px !important;
}
.wlj{
	padding: 20px;
	& .color_green{
		color: #49d3a7;
	}
	& .color_red{
		color: #f04b56;
	}
}
b{
	font-size: 14px;
}
.span_h{
	font-size: 13px;
	color: #898c94;
}
</style>