gdy_qywx_pc/src/views/statistics_new/manager_statistics.vue

<template>
  <div>
    <div class="manager_statistics_box 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="部门">
              <deptData  deptStyle="height:24px;line-height:24px;margin-top:7px;" v-if="toPdept && toPdept!=0" :refsName="$refs.dept" :toPdept="toPdept"></deptData>
              <el-cascader
                v-model="dept_name_xq_xq"
                :options="dept_trees"
                @change="get_last_dept_null"
                :props="{ label: 'name', value: 'id'}"
                ref="dept"
                filterable
                change-on-select
                placeholder="全公司"
                clearable
              >
                <template slot-scope="{ node, data }">
                  <span>
                    <wwOpenDAta type="departmentName" :openid="data.name"></wwOpenDAta>
                  </span>
                  <!-- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> -->
                </template>
              </el-cascader>
            </el-form-item>

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

			    <!-- 搜索框 -->
            <el-form-item class="persons_names">
              <el-input
                v-model="condition.keyword"
                placeholder="输入同事姓名"
                max="200"
                @keyup.enter.native="keyWordSelect"
                class="persons_name"
              >
                <el-button slot="append" 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" 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;"
                ><wwOpenDAta type="userName" :openid="scope.row.name"></wwOpenDAta></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"
              :page-sizes="[10, 20, 50, 100]"
              :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="部门">
              <deptData deptStyle="height:24px;line-height:24px;margin-top:7px;" v-if="toPdepts && toPdepts!=0" :refsName="$refs.depts" :toPdept="toPdepts"></deptData>
              <el-cascader
                v-model="dept_name_xq"
                :options="dept_tree"
                @change="dept_null"
                :props="{ label: 'name', value: 'id'}"
                ref="depts"
                filterable
                change-on-select
                placeholder="全公司"
                clearable
              >
                <template slot-scope="{ node, data }">
                  <span>
                    <wwOpenDAta type="departmentName" :openid="data.name"></wwOpenDAta>
                  </span>
                  <!-- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> -->
                </template>
              </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"
                placeholder="请选择月份"
                value-format="yyyy-MM"
              ></el-date-picker>
            </el-form-item>
          </el-form>

            <!-- 
            <el-row :gutter="20" style="margin-bottom: 20px;">
              <el-col :span="5">
                <el-date-picker class="date-picker-width" v-model="formData.month" width="100%" type="month" placeholder="请选择月份" value-format="yyyy-MM"></el-date-picker>
              </el-col>
              <el-col :span="5">
                <el-checkbox v-model="allPass" size="medium" label="只看全部达标的" border></el-checkbox>
              </el-col>
              <el-col :offset="8" :span="6" class="search_box">
                <el-input v-model="formData.keyword" @keyup.enter.native="search" placeholder="输入管理者姓名">
                  <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
                </el-input>
              </el-col>
            </el-row> 
                -->

          <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;"
                ><wwOpenDAta type="userName" :openid="scope.row.name"></wwOpenDAta></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, 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">
              <wwOpenDAta type="userName" :openid="item.name"></wwOpenDAta>的奖扣统计
              <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 { getToken } from '@/utils/auth';
import ECharts from "echarts";
export default {
  data() {
    return {
      last: [],
      dept_trees: [],
	    //完成情况
	    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: {
        // employee_id:"",
        month: this.$moment().format("YYYY-MM"),
        page: 1,
        page_size: 10,
        dept_id: 0,
        // complete:'0',
      },
      total: null,
      allPass: false,
      list: [],
      detail_show: false,
      echart_loading: false,
      item: {},
      dept_name_xq: "",
      dept_tree: [],
      personalData_loading: false,
      personalData: null,
      toPdept:0,
      toPdepts:0,
    };
  },
  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() {
      let self = this;
      self.loading = true;
	  // const headers = { Accept: "application/vnd.test.v4+json" };
      self
        .$http("get","/api/integral/statistics/prize/list",self.condition,'v4')
        .then((res) => {
          if (res.data.code == 1) {
            self.last = res.data.data.list;
            self.totals = res.data.data.total;
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          self.loading = false;
        });
	},
	//部门
	get_last_dept_null(val) {
      this.toPdept = val[val.length-1]
      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+="&dept_id="+ this.condition.dept_id:data+="&dept_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
      console.log(data)
        let token = this.$getToken?this.$getToken:getToken()
      window.open(
        process.env.BASE_API +
          "/api/download/prize/list/v4?employee_id="+
          this.$store.getters.user_info.id +
          data+'&token='+token,
        "_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() {
      let self = this;
      self.loading = true;
	  // const headers = { Accept: "application/vnd.test.v3+json" };
      self
        .$http("get","/api/integral/statistics/prize/list",self.formData,'v3')
        .then((res) => {
          if (res.data.code == 1) {
            self.list = res.data.data.list;
            self.total = res.data.data.total;
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          self.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.$http('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) {
      let self = this;
      self.personalData_loading = true;
      const data = {
        employee_id: this.item.id || 0,
        month: this.formData.month,
      };
      self
        .$http("get","/api/integral/statistics",data,)
        .then((res) => {
          if (res.data.code == 1) {
            self.personalData = res.data.data;
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .catch((e) => {
          self.$message.error(res.data.data.msg);
        })
        .finally(() => {
          self.personalData_loading = false;
        });
    },
    dept_null(val) {
      this.toPdepts = val[val.length-1]
      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();
      });
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
  },
  mounted() {
    if (localStorage.getItem("dept_tree")) {
      this.dept_tree = this.getTreeData(
        JSON.parse(localStorage.getItem("dept_tree"))
      );
      this.dept_trees = this.getTreeData(
        JSON.parse(localStorage.getItem("dept_tree"))
      );
    }

	  this.get_list();
    this.get_last();
  },
};
</script>
<style scoped lang="scss">
.search_box {
  /deep/ button:active {
    background: #26a2ff;
  }
  /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:url("/static/images/nodata_default.png") no-repeat center; */
  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);
  /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;
}


// .persons_names{
// 	margin-left: 160px;
// }
.wlj{
	& .color_green{
		color: #49d3a7;
	}
	& .color_red{
		color: #f04b56;
	}
}
b{
	font-size: 14px;
}
.span_h{
	font-size: 13px;
	color: #898c94;
}
</style>