gdy_qywx_pc/src/views/statistics_new/individual_statistics.vue

<template>
  <div>
    <el-row
      :span="24"
      style="padding: 20px;background: #fff;border:1px #e1e4e7 solid;box-shadow: 0 2px 4px rgba(140,140,140,0.1);"
    >
        <el-col :span="5" style="position: relative;"  v-if="supAuthority!='employee'">
          <div v-if="selectAperson.currentLabel && selectAperson.currentLabel != '' || select_employee_id" class="selectApersonName" @click="takePartIn">
            <WWOpenData type="userName" :openid="selectAperson.currentLabel?selectAperson.currentLabel:select_employee_id"></WWOpenData>
          </div>
          <el-select v-model="select_employee_id" ref="selectApersons" filterable  placeholder="请输入或选择人员">
              <el-option
              v-for="item in employee_map"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              >
                <span style="float: left"><WWOpenData type="userName" :openid="item.name"></WWOpenData></span>
              </el-option>
          </el-select>
        </el-col>
        
        <el-col style="margin-left:20px;" :span="8">
          <el-col :span="8">
            <el-select v-model="time_type" placeholder="请选择分类" style="width: 100px;">
              <el-option
                v-for="item in time_types"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option> 
            </el-select>
          </el-col>

          <el-col :span="16">
            <el-date-picker
              v-show="time_type == '2'"
              v-model="export_from.year"
              class="date-picker-width"
              type="year"
              value-format="yyyy"
              :clearable="false"
              :editable="false"
              placeholder="选择年份排名"
            ></el-date-picker>
            <el-date-picker
              v-show="time_type == '1' || time_type == '月份'"
              v-model="export_from.month"
              class="date-picker-width"
              type="month"
              value-format="yyyy-MM"
              :clearable="false"
              :editable="false"
              placeholder="选择月份排名"
            ></el-date-picker>
          </el-col>
        </el-col>
      <!-- <el-col style="margin-left:20px;" :span="5">
        <el-date-picker
          v-model="formData.month"
          type="month"
          placeholder="请选择月份"
          value-format="yyyy-MM"
        ></el-date-picker>
      </el-col> -->
    </el-row>
    
    <!-- <el-col  style="display:flex;justify-content: space-between;"> -->
      <el-row :span="24" class="top_user_info" style="margin:20px 0 0 0;padding:0;">
        <el-col :span="7" class="userinfo_box">
          <el-row :gutter="40" style="margin:0;padding:0;">
            <el-col :span="24" class="user_info" v-loading="personnelMessage">
              <div class="headimg fl" style=" margin: 0 10px 0 50px;">
                <userImage :id="personnel.id" :img_url="personnel.img_url" :user_name="personnel.name" width="50px" height="50px"></userImage>
              </div>
              <div class="greetings">
                <div><WWOpenData type="userName" :openid="personnel.name"></WWOpenData></div>
              </div>
              <!-- <div style="padding-left:10px;display:flex;flex-wrap:wrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
                <el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
                  <div style="font-size:14px;color:#828282;" v-for="(item,index) in dept_data" :key="index"><WWOpenData type="departmentName" :openid="item"></WWOpenData></div>
                  <div slot="reference" class="name-wrapper"><span style="font-size:14px;color:#828282;"><WWOpenData type="departmentName" :openid="item"></WWOpenData></span></div>
                </el-popover>
              </div> -->
              <div style="display:flex;flex-wrap:wrap;padding-left:10px;">
                  <div style="font-size:14px;color:#828282;" v-for="(item,index) in dept_data" :key="index"><WWOpenData type="departmentName" :openid="item"></WWOpenData><span v-if="(dept_data.length-index)>1">,</span></div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <div>
          <!-- <el-col :span="8" style="margin-top:34px;padding:0;border-right: 1px #cecccc solid;height:58px;" v-loading="authorityManagerHeaderLoad"> -->
          <el-col :span="16" style="margin-top:34px;padding:0;height:58px;" v-loading="authorityManagerHeaderLoad">
            <el-col :gutter="50" style="margin:0;padding:0;" class="quick_button_box">
              <div style="display:flex;justify-content: space-around;">
                <p style="text-align:center;cursor:pointer;margin: 0;"><b style="color:#26A2FF;font-size:27px;">{{authorityManagerHeaders.b?authorityManagerHeaders.b:'0'}}</b><br><span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">{{yearhORmontStr}}度B分</span></p>
                <p style="text-align:center;cursor:pointer;margin: 0;"><b style="color:#26A2FF;font-size:27px;">{{authorityManagerHeaders.a?authorityManagerHeaders.a:'0'}}</b><br><span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">{{yearhORmontStr}}度A分</span></p>
              </div>
            </el-col>
          </el-col>
          <!-- <el-col :span="8" style="margin:0;padding:0;">
            <el-col :gutter="50" style="margin:0;padding:34px 0 0 0;" class="quick_button_box">
              <div style="display:flex;justify-content: space-around;" v-loading="authorityManagerHeaderLoad">
                <p style="text-align:center;cursor:pointer;margin: 0;"><b style="color:#26A2FF;font-size:27px;">{{authorityManagerHeaders.performance?authorityManagerHeaders.performance.review_point:'0'}}</b><br><span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">绩效分</span></p>
                <p style="text-align:center;cursor:pointer;margin: 0;"><b style="color:#26A2FF;font-size:27px;">{{authorityManagerHeaders.performance?authorityManagerHeaders.performance.complete_count + '/' + authorityManagerHeaders.performance.total_count : '0/0'}}</b><br><span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">任务进度</span></p>
              </div>

            </el-col>
          </el-col> -->
        </div>
      </el-row>
    <!-- </el-col> -->

    <el-col :span="24">
      <el-row class="raiders_box">
        <el-row style="position: relative;">
          <el-col :span="24">
            <b class="title" style="margin-bottom:15px;display:block"
              >{{yearhORmontStr}}积分构成</b
            >
          </el-col>
          <div v-loading="IntegralFormChartLoad">
            <div
              class="nopoint_box"
              style="height:300px;"
              v-show="IntegralFormnone"
            >
              <div
                class="noimg"
                style="width: 150px;height: 150px;margin-top:80px;"
              ></div>
              <span class="title1"
                >暂无积分数据，<span  v-if="supAuthority!='employee'"
                  @click="$router.push({ path: '/award_punish' })"
                  style="color:#409EFF;cursor:pointer;"
                  >去奖扣积分></span
                ></span
              >
            </div>
            <div v-show="!IntegralFormnone">
              <div
                ref="IntegralFormChart"
                :style="{ width: '900px', height: '350px' }"
              ></div>
            </div>
          </div>
        </el-row>
      </el-row>
    </el-col>

    <el-col :span="24" style="">
      <el-row class="raiders_box">
        <el-row style="position: relative;">
          <el-col :span="24" style="display:flex">
            <b class="title" style="margin:0 20px 15px 0;display:block"
              >{{yearhORmontStr}}积分情况</b
            >
            <el-checkbox v-model="exclusiveMonthChecked"
              >不包含自动积分加分项</el-checkbox
            >
          </el-col>
          <div v-loading="monthlyIntegralloading">
            <div
              class="nopoint_box"
              style="height:450px;"
              v-if="monthlyIntegralnone"
            >
              <div
                class="noimg"
                style="width: 150px;height: 150px;margin-top:110px;"
              ></div>
              <span class="title1">暂无积分数据</span>
            </div>

            <div v-show="!monthlyIntegralnone">
              <div
                ref="monthlyIntegralChart"
                :style="{ width: '930px', height: '400px' }"
              ></div>
              <div
                style="width:100%;display:flex;justify-content: space-around;margin-top:30px;padding-left:40px"
              >
                <p
                  v-for="(item, index) in monthORyear=='2'?monthlyIntegralList:yearlyIntegralList"
                  :key="index"
                  style="text-align:center"
                >
                  <b
                    style="display:block;color:#303133;font-size:18px;"
                    v-if="index < 3"
                    >{{
                      index == 0
                        ? item.total_point
                        : index == 1
                        ? item.reward_point
                        : index == 2
                        ? item.deduction_point
                        : ""
                    }}</b
                  >
                  <b
                    style="display:block;color:#303133;font-size:18px;"
                    v-else-if="index == 3"
                    >{{ item.ratio == -1 ? "—" : item.ratio + ":1" }}</b
                  >
                  <b style="display:block;color:#303133;font-size:18px;" v-else
                    >{{ item.toRatio.ratio + "%" }}
                    <svg-icon
                      :icon-class="
                        item.toRatio.type == 1
                          ? 'litrearrows'
                          : item.toRatio.type == 2
                          ? 'droparrows'
                          : ''
                      "
                      style="font-size:10px;margin-bottom:2px"
                    />
                  </b>
                  <span
                    style="color:rgb(48, 49, 51);font-size:14px;margin-top:5px;display:block;"
                    >{{ item.name }}</span
                  >
                </p>
              </div>
            </div>
          </div>
        </el-row>
      </el-row>
    </el-col>
    
    <el-col :span="24" style="margin-bottom:20px;display:flex;justify-content: space-between;padding:0;">
      <el-col style="width:49%;">
        <el-row class="raiders_box" v-loading="awardDeductRanking">
          <el-row style="">
            <el-col :span="24" style="display:flex">
              <b class="title" style="margin:0 20px 15px 0;display:block"
                >{{yearhORmontStr}}奖分最多</b
              >
            </el-col>
            <el-col :span="24" style="margin-bottom:10px;">
              <el-col style="">
                <div class="nopoint_box" v-if="IntegralEventO.length == 0">
                  <div class="noimg" style="margin: 48px auto 16px;"></div>
                  <span class="title1" style="padding-bottom:20px;">暂无积分数据</span>
                </div>

                <el-table :data="IntegralEventO" fit :show-header="false" height="220px" style="border:0px solid #fff;" v-else>
                  <el-table-column prop="remark_data" label="规则">
                    <template slot-scope="scope">
                      <div style="padding-left:10px;display:flex;flex-wrap:wrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
                        <el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
                          <div style="font-size:14px;color:#828282;">{{scope.row.remark.customize || scope.row.remark.rule}}</div>
                          <div slot="reference" class="name-wrapper"><span style="font-size:14px;color:#828282;">{{scope.row.remark.customize || scope.row.remark.rule}}</span></div>
                        </el-popover>
                      </div>
                      <!-- <span>{{scope.row.remark.customize || scope.row.remark.rule}}</span> -->
                    </template>
                  </el-table-column>
                  <!-- <el-table-column align="center" prop="create_time" label="创建时间" width="140"></el-table-column> -->
                  <el-table-column align="center" prop="point" label="积分" width="110">
                    <template slot-scope="scope">
                      <span>{{scope.row.point>0?'+':''}}{{scope.row.point}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
      <el-col style="width:49%;">
        <el-row class="raiders_box" v-loading="awardDeductRanking">
          <el-row style="">
            <el-col :span="24" style="display:flex">
              <b class="title" style="margin:0 20px 15px 0;display:block"
                >{{yearhORmontStr}}扣分最多</b
              >
            </el-col>
            <el-col :span="24" style="margin-bottom:10px;">
              <el-col style="">
                <div class="nopoint_box" v-if="IntegralEventT.length == 0">
                  <div class="noimg" style="margin: 48px auto 16px;"></div>
                  <span class="title1" style="padding-bottom:20px;">暂无积分数据</span>
                </div>
                <el-table :data="IntegralEventT" fit :show-header="false" height="220" v-else>
                  <el-table-column prop="remark_data" label="规则">
                    <template slot-scope="scope">
                      <div style="padding-left:10px;display:flex;flex-wrap:wrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
                        <el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
                          <div style="font-size:14px;color:#828282;">{{scope.row.remark.customize || scope.row.remark.rule}}</div>
                          <div slot="reference" class="name-wrapper"><span style="font-size:14px;color:#828282;">{{scope.row.remark.customize || scope.row.remark.rule}}</span></div>
                        </el-popover>
                      </div>
                      <!-- <span>{{scope.row.remark.customize || scope.row.remark.rule}}</span> -->
                    </template>
                  </el-table-column>
                  <!-- <el-table-column align="center" prop="create_time" label="创建时间" width="140"></el-table-column> -->
                  <el-table-column align="center" prop="point_mark" label="积分" width="110">
                    <template slot-scope="scope">
                      <span>{{scope.row.point}}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column align="center" prop="remark_data.rule" show-overflow-tooltip label="规则" width="180"></el-table-column> -->
                  
                  
                  <!-- <el-table-column align="center" label="规则" prop="remark_data.rule"  width="180">
                    <template slot-scope="scope">
                      <el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
                        <span>{{scope.row.remark_data.rule || scope.row.remark_data.customize}}</span>
                        <div slot="reference" class="name-wrapper"  style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"><span>{{scope.row.remark_data.rule || scope.row.remark_data.customize}}</span></div>
                      </el-popover>
                    </template>
                  </el-table-column> -->

                </el-table>
              </el-col>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
    </el-col>


  </div>
</template>
<script>
import ECharts from "echarts";
export default {
  data() {
    return {
      //筛选项
      formData: {
        employee_id: this.$store.getters.user_info.id
      },
      //时间
      time_type: "月份",
      time_types: [
        { label: "月份", value: "1" },
        { label: "年份", value: "2" }
      ],
      export_from: {
        year: this.$moment().format('YYYY'),
        month: this.$moment().format('YYYY-MM'),
      },
      yearhORmontStr:'月',
      monthORyear:'2',

      //选择人员
      select_employee_id: this.$store.getters.user_info.name,
      employee_map:'',//获取人员列表

      dept_list:'',
      dept_data: [],
     //人员详情
      personnel:{},
      authorityManagerHeaderLoad:false,//人员loading
      authorityManagerHeaders:{},//人员数据
      personnelMessage:false,//人员信息loading
    
      //饼图
      IntegralFormChartLoad: false, //积分构成loading
      IntegralFormnone: false, //积分构成为空或报错，展示的开关

      //本月积分情况
      exclusiveMonthChecked: true, //不包含自动积分加分项
      monthlyIntegralList: [//本月积分情况数据
        {total_point:'0',name:'月总积分'},
        {reward_point:'0',name:'月总奖分'},
        {deduction_point:'0',name:'月总扣分'},
        {ratio:'0',name:'奖扣分比例'},
        {toRatio:{ratio:'0',type:0},name:'对比上月总分'},
        {toRatio:{ratio:'0',type:0},name:'对比上月奖分'},
        {toRatio:{ratio:'0',type:0},name:'对比上月扣分'},
      ],
      yearlyIntegralList:[//年积分情况数据
        {total_point:'0',name:'年总积分'},
        {reward_point:'0',name:'年总奖分'},
        {deduction_point:'0',name:'年总扣分'},
        {ratio:'0',name:'奖扣分比例'},
        {toRatio:{ratio:'0',type:0},name:'对比去年总分'},
        {toRatio:{ratio:'0',type:0},name:'对比去年奖分'},
        {toRatio:{ratio:'0',type:0},name:'对比去年扣分'},
      ],
      monthlyIntegralloading: false, //本月积分情况loading
      monthlyIntegralnone: false, //本月积分情况为空或报错，展示的开关
      exclusiveMonthBranch: 0, //本月积分情况--部门

      IntegralEventO:[],//个人奖分数据
      IntegralEventT:[],//个人扣分数据

      awardDeductRanking:false,//个人奖扣分loading
      selectAperson:[],
      supAuthority:this.$supremeAuthority(),
    };
  },
  watch: {
    time_type(val){
      if(val == '1'){//月
        this.monthORyear = '2'
        this.formData.year = null
        this.formData.month = this.$moment().format("YYYY-MM")
        this.export_from.month = this.$moment().format("YYYY-MM")
        this.yearhORmontStr = '月'
      }else if(val == '2'){//年
        this.monthORyear = '3'
        this.formData.month = null
        this.formData.year = this.$moment().format("YYYY")
        this.export_from.year = this.$moment().format("YYYY")
        this.yearhORmontStr = '年'
      }
      this.executiveFunction()
    },
    'export_from.month'(val,old_val){
      this.formData.month = val
      this.executiveFunction()
    },
    'export_from.year'(val,old_val){
      this.formData.year = val
      this.executiveFunction()
    },
    // "formData.month"(val, old_val) {
    //   this.executiveFunction();
    //   console.log(this.formData);
    // },
    //不包含自动积分加分项
    exclusiveMonthChecked() {
      this.monthlyIntegral();
    },
    
    select_employee_id(val) {
      console.log(val)
        this.formData.employee_id = val
        this.executiveFunction(true);
        
      this.$nextTick(()=>{
        console.log(this.$refs['selectApersons'].selected)
        this.selectAperson = this.$refs['selectApersons'].selected
      })
    },
  },
  mounted() {
    this.$http("get", "/api/employee/index", { is_official: 1,page_size: 2000,page: 0,	})
      .then(res => {
        if (res.data.code == 1) {
          this.employee_map = res.data.data.list;
        }
      })
    if(!this.employee_map){
      this.employee_map = JSON.parse(localStorage.getItem("SET_EMPLOYEE_MAP"))
    }
    // if(JSON.parse(localStorage.getItem("SET_EMPLOYEE_MAP"))){
    //   this.employee_map = JSON.parse(localStorage.getItem("SET_EMPLOYEE_MAP"))
    // }else{
    //   this.$store.dispatch('get_employee_map').then((res) => {
    //     this.$nextTick(() => {
    //       this.employee_map = JSON.parse(localStorage.getItem("SET_EMPLOYEE_MAP"))
    //     })
    //   })
    // }
    if(this.$store.getters.user_info){
      this.personnel = this.$store.getters.user_info
      let dept_li = this.personnel.employee_detail.dept_list
      console.log(this.personnel.employee_detail)
      let dept_ = ''
      let dept_lists = []
      for(let i in dept_li){
        dept_ += dept_li[i].depart_name+' '
        dept_lists.push(dept_li[i].depart_name)
      }
      this.dept_list = dept_
      this.dept_data = dept_lists
    }else{
      this.personnelDetails()//获取人员详情
    }
    this.formData.month = this.$moment().format("YYYY-MM")
    this.executiveFunction();
  },
  methods: {
    takePartIn(){
      this.$refs['selectApersons'].visible = true
    },
    //需要执行的所有函数
    executiveFunction(item) {
      //切换角色才请求--人员详情--。
      if(item){
        this.personnelDetails()//获取人员详情
        this.authorityManagerHeader()//本月 A B 绩效分 比例
        this.integralForm(); //饼图
        this.monthlyIntegral(); //本月积分情况
        this.integralEvents()//积分事件列表
      }else{
        this.authorityManagerHeader()//本月 A B 绩效分 比例
        this.integralForm(); //饼图
        this.monthlyIntegral(); //本月积分情况
        this.integralEvents()//积分事件列表
      }
    },

    //获取人员详情
    personnelDetails(){
        this.personnelMessage = true
        let params = {
            id:this.formData.employee_id
        }
        this.$http("get", "/api/employee/info", params)
        .then(res => {
            this.personnel = res.data.data
            let dept_li = this.personnel.employee_detail.dept_list
            let dept_ = ''
            let dept_lists = []
            for(let i in dept_li){
              dept_ += dept_li[i].depart_name+' '
              dept_lists.push(dept_li[i].depart_name)
            }
            this.dept_list = dept_
            this.dept_data = dept_lists
        }).finally(()=>{
            this.personnelMessage = false
        })
    },
    //本月 A B 绩效分 比例
      authorityManagerHeader(){
        this.authorityManagerHeaderLoad = true
        let params = {}
        params.employee_id=this.formData.employee_id
        if(this.monthORyear == '2'){//月
          params.month = this.formData.month
        }else if(this.monthORyear == '3'){//年
          params.year = this.formData.year
        }
        this.$http('get','/api/integral/statistics/',params,'v2').then((res)=>{
          if(res.data.code == 1){
            this.authorityManagerHeaders = res.data.data
          }
        }).finally(()=>{
          this.authorityManagerHeaderLoad = false
        })
      },

    //饼图
    //分为两列展示，多传legendDataTwo
    drawLine(legendDataOne, legendDataTwo, dadalist) {
      // drawLine(legendDataOne,dadalist){
      const chart = this.$refs.IntegralFormChart;
      //此处可给固定颜色，不给就所有颜色随机
      let colors = [
        'rgb(38, 162, 255)',
        "#f36f2a",
        "#fecb09",
        "#00b6bd",
        "#e85d53",
        "#fecb09",
        "#725197",
        "#fcb814",
        "#41a08d",
        "#425a95",
        "#ea8b84",
        "#9d1d62",
        "#fcb814"
      ];
      // let colors = [];
      let legendDataLeng = legendDataOne.length + legendDataTwo.length;
      if (legendDataLeng > colors.length) {
        //当列表大于固定颜色时，给随机颜色
        let colorsLeng = colors.length;
        for (let i = 0; i <= legendDataLeng - colorsLeng; i++) {
          // colors.push('#' + Math.random().toString(16).substr(2, 6).toUpperCase());//也是随机色
          colors.push(
            "rgb(" +
              Math.round(Math.random() * 255) +
              "," +
              Math.round(Math.random() * 255) +
              "," +
              Math.round(Math.random() * 255) +
              ")"
          );
        }
      }
      //只显示 N 条标题，多余隐藏，但是饼图不会隐藏
      let DataLengths = [];
      for (let i in legendDataTwo) {
        if (i < 8) {
          DataLengths.push(legendDataTwo[i]);
        }
      }
      let left1 = "45%";
      let left2 = "45%";
      let leftBT = "25%";
      if (legendDataTwo.length != 0) {
        left1 = "36%";
        leftBT = "18%";
      }
      if (chart) {
        const myChart = ECharts.init(chart);
        var legendData1 = legendDataOne;
        var legendData2 = DataLengths;
        const option = {
          tooltip: { trigger: "item", formatter: "{b}" },
          legend: [
            {
              type: "scroll",
              orient: "vertical",
              icon: "square",
              left: left1,
              align: "left",
              top: "10%",
              itemGap: 20,
              textStyle: { fontSize: 14, color: "rgb(48, 49, 51)" },
              data: legendData1
            },
            //分为两列展示
            {
              type: "scroll",
              orient: "vertical",
              icon: "square",
              left: "70%",
              align: "left",
              top: "10%",
              itemGap: 20,
              textStyle: { fontSize: 14, color: "rgb(48, 49, 51)" },
              data: legendData2
            }
          ],
          color: colors,
          grid: { x: 25, y: 45, x2: 5, y2: 20, borderWidth: 1 },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              magicType: { show: true, type: ["pie", "funnel"] }
            }
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: [20, 110],
              center: [leftBT, "40%"],
              roseType: "radius",
              label: { show: false },
              emphasis: { label: { show: false } },
              data: dadalist
            }
          ]
        };
        myChart.setOption(option);
      }
    },
    integralForm() {
      this.IntegralFormChartLoad = true;
      let listslength = [];
      let params = {};
      params.employee_id = this.formData.employee_id;
      if(this.monthORyear == '2'){//月
        params.month = this.formData.month
      }else if(this.monthORyear == '3'){//年
        params.year = this.formData.year
      }
      this.$http("get", "/api/integral/statistics/pie/b", params, "v2")
        .then(res => {
          let lists = res.data.data.list;
          listslength = lists;
          let legendData1 = [];
          let legendData2 = [];
          let dadalist = [];
          //分为两列展示
          // let listLeng = Math.ceil((lists.length)/2)

          for (let i in lists) {
            if(lists[i].name.length>10){
              lists[i].name = lists[i].name.slice(0,10)+'...'
            }
            //分为两列展示
            // if(i<listLeng){
            //   legendData1.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
            // }else{
            //   legendData2.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
            // }
            if (i < 8) {
              legendData1.push(
                lists[i].name +
                  " " +
                  "奖" +
                  lists[i].reward +
                  " " +
                  "扣" +
                  lists[i].deduction +
                  " " +
                  lists[i].ratio +
                  "%"
              );
            } else {
              legendData2.push(
                lists[i].name +
                  " " +
                  "奖" +
                  lists[i].reward +
                  " " +
                  "扣" +
                  lists[i].deduction +
                  " " +
                  lists[i].ratio +
                  "%"
              );
            }
            // console.log(lists.length/2)

            let dataListDx = {};
            if (lists[i].ratio < 0) {
              dataListDx.value = 0;
            } else {
              dataListDx.value = lists[i].ratio;
            }
            dataListDx.name =
              lists[i].name +
              " " +
              "奖" +
              lists[i].reward +
              " " +
              "扣" +
              lists[i].deduction +
              " " +
              lists[i].ratio +
              "%";
            // dataListDx.name = lists[i].name
            dadalist.push(dataListDx);
          }
          //分为两列展示，多传legendData2
          this.drawLine(legendData1, legendData2, dadalist); //图表
          // this.drawLine(legendData1,dadalist)//图表
        })
        .finally(() => {
          if (listslength.length == 0) {
            this.IntegralFormnone = true;
          } else {
            this.IntegralFormnone = false;
          }
          this.IntegralFormChartLoad = false;
        });
    },

    //月度积分
    monthlyIntegralRanking(date, total, reward, deduction) {
      const chart = this.$refs.monthlyIntegralChart;
      if (chart) {
        const myChart = ECharts.init(chart);
        const option = {
          tooltip: {
            trigger: "axis"
          },
          color: ["#F56C6C", "#26A2FF", "#FFC100"],
          legend: {
            right: "0%",
            data: ["总积分", "奖分", "扣分"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            feature: {}
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: "总积分",
              type: "line",
              data: total
            },
            {
              name: "奖分",
              type: "line",
              data: reward
            },
            {
              name: "扣分",
              type: "line",
              data: deduction
            }
          ]
        };
        myChart.setOption(option);
      }
    },
    //月度积分
    // monthlyIntegralchange(val){
    //   console.log(val)
    //   if(val.length == 0){
    //     this.exclusiveMonthBranch = 0
    //   }else{
    //     let valItem = 0
    //     for(let i in val){
    //       valItem = val[i]
    //     }
    //     this.exclusiveMonthBranch = valItem
    //   }
    //   this.monthlyIntegral()
    // 	this.$nextTick(()=>{
    // 		this.$refs.dept2.dropDownVisible = false;
    // 	})
    // },
    monthlyIntegral() {
      this.monthlyIntegralloading = true;
      let params = {};
      let listslength = [];
      params.employee_id = this.formData.employee_id;
      if(this.monthORyear == '2'){//月
        params.month = this.formData.month
      }else if(this.monthORyear == '3'){//年
        params.year = this.formData.year
      }
      if (this.exclusiveMonthChecked) {
        params.include_fixed = 1;
      } else {
        params.include_fixed = 0;
      }
      this.$http("get", "/api/integral/statistics/curve", params)
        .then(res => {
          if (res.data.code == 1) {
            let lists = res.data.data;
            listslength = lists;
            if(this.monthORyear == '2'){
              this.monthlyIntegralList[0].total_point = lists.total_point
              this.monthlyIntegralList[1].reward_point = lists.reward_point
              this.monthlyIntegralList[2].deduction_point = lists.deduction_point
              this.monthlyIntegralList[3].ratio = lists.ratio
              this.monthlyIntegralList[4].toRatio = lists.contrast_total
              this.monthlyIntegralList[5].toRatio = lists.contrast_reward
              this.monthlyIntegralList[6].toRatio = lists.contrast_deduction
            }else if(this.monthORyear == '3'){
              this.yearlyIntegralList[0].total_point = lists.total_point
              this.yearlyIntegralList[1].reward_point = lists.reward_point
              this.yearlyIntegralList[2].deduction_point = lists.deduction_point
              this.yearlyIntegralList[3].ratio = lists.ratio
              this.yearlyIntegralList[4].toRatio = lists.contrast_total
              this.yearlyIntegralList[5].toRatio = lists.contrast_reward
              this.yearlyIntegralList[6].toRatio = lists.contrast_deduction
            }
            let dates = []; //日期
            let totals = []; //总积分
            let rewards = []; //奖分
            let deductions = []; //扣分
            for (let i in lists.total) {
              dates.push(lists.total[i].date);
              totals.push(lists.total[i].point);
            }
            for (let i in lists.reward) {
              rewards.push(lists.reward[i].point);
            }
            for (let i in lists.deduction) {
              deductions.push(lists.deduction[i].point);
            }
            this.monthlyIntegralRanking(dates, totals, rewards, deductions);
          }
        })
        .finally(() => {
          if (!listslength.total) {
            this.monthlyIntegralnone = true;
          } else {
            this.monthlyIntegralnone = false;
          }
          this.monthlyIntegralloading = false;
        });
    },

    //积分事件列表
    integralEvents(){
      this.awardDeductRanking = true
      let params = {
        page:1,
        page_size:5,
        pt_id : '3',
        time_type : '2'
      }
      params.employee_id = this.formData.employee_id
      if(this.monthORyear == '2'){//月
        params.month = this.formData.month
        params.time_type = '2'
      }else if(this.monthORyear == '3'){//年
        params.year = this.formData.year
        params.time_type = '3'
      }
      this.$http('get','/api/integral/statistics/prize/buckle/ranking',params).then((res)=>{
        console.log(res)
        this.IntegralEventO = res.data.data.prize
        this.IntegralEventT = res.data.data.buckle
      }).finally(()=>{
        this.awardDeductRanking = false
      })
    },
  }
};
</script>
<style>
.el-table::before {
  height: 0px;
}
.raiders_box {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border: 1px #e1e4e7 solid;
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
}
.raiders_box .title {
  font-family: Microsoft Yahei;
  padding-left: 10px;
  font-size: 16px;
  font-weight: normal;
  border-left: 2px solid #409eff;
}
.rightexamineAndApproveList {
  text-align: left;
  width: 100%;
  border-bottom: 1px solid #efefef;
}
.nopoint_box {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}

.nopoint_box .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%;
}

.nopoint_box .noperson {
  display: inline-block;
  width: 110px;
  height: 110px;
  margin: 22px auto 16px;
  background: url("/static/images/noperson_default.png") no-repeat center;
  background-size: 99%;
}

.nopoint_box .title1 {
  display: block;
  text-align: center;
  font-size: 12px !important;
  color: #909399 !important;
  padding: 0;
}

.nopoint_box a {
  color: #26a2ff;
}


  .top_user_info {
    position: relative;
    padding-top: 0;
    background: #fff;
    border:1px #e1e4e7 solid;
    box-shadow: 0 2px 4px rgba(140,140,140,0.1);
  }

  .top_user_info .userinfo_box {
    border-right: 1px #cecccc solid;
    margin: 34px 0;
  }

  .top_user_info .user_box {
    padding-left: 0 !important;
    border-right: 1px #333 solid;

  }

  .top_user_info .headimg_box {
    padding-left: 0 !important;
  }

  .top_user_info .headimg_box .headimg {
    width: 50px;
    height: 50px;
    background: #909399;
    border-radius: 50px;
  }

  .top_user_info .user_info {
    padding: 0 !important;
    line-height: 25px;
  }
  .top_user_info .user_info .greetings{
    margin: 4px 0px 0 120px;
    font-size: 16px;
    font-weight:bold;
  }
  .top_user_info .user_info .greetings div{
    max-width: 130px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
  }
  .top_user_info .user_info .greetings span{
    font-size:14px;
    color:#666;
    display: inline-block;
    vertical-align: top;
  }

  .top_user_info .user_info span:nth-child(1) {
    display: block;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .top_user_info .person {
    display: block;
    font-size: 14px;
    padding: 32px 0 18px 0;
    color: #606266;
  }
/*
padding: 18px 0 16px 0;
color: #606266;
height: 32px;
box-sizing: content-box;
*/

  .top_user_info .time {
    font-size: 14px;
    padding-right: 10px;
    position: relative;
  }

  
  .pointsevent_box {
    display: block;
    text-align: center;
    margin: 20px 0 0 0px;
    padding-right: 0 !important;
    border:1px #e1e4e7 solid;
    box-shadow: 0 2px 4px rgba(140,140,140,0.1);
  }

  .pointsevent_box .title {
    font-family: Microsoft Yahei;
    display: block;
    text-align: left;
    margin-bottom: 20px;
    padding: 0 0 0 10px;
    font-size:16px;
    font-weight: normal;
    border-left: 2px solid #409EFF;
  }
  
   .popperSPBOX{
    max-width: calc(100vh - 400px);
    background-color: rgb(255, 255, 255);
  }
  
.selectApersonName {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  margin: 1px 0 0 1px;
  padding-left: 14px;
  background-color: #ffffff;
  color: #1d1d1d;
  width: 170px;
  overflow: hidden;
  cursor: pointer;
  height:34px;
  line-height:34px;
  border-radius: 5px;
}
</style>