gdy_pc_8/src/point/views/statistics/managerStatisticsV2.vue

<template>
  <div class="manager_statistics_box boxMinHeight">
    <el-tabs v-model="currentTag">
      <el-tab-pane v-for="(item,index) in tabs" :key="index" :label="item.label" :name="item.name" :disabled="loading"></el-tab-pane>
    </el-tabs>
    <el-container>
      <el-header height="100px">
<!--    搜索    -->
        <el-form :model="formData"  :inline="true" >
          <el-form-item label="部门">
            <el-cascader
              v-model="dept_name_xq_xq"
              :options="deptTrees"
              @change="getLastDeptNull"
              ref="dept"
              filterable
              change-on-select
              placeholder="全公司"
              clearable
            ></el-cascader>
          </el-form-item>
          <!--     关键字     -->
          <el-form-item class="persons_names">
            <el-input v-model="formData.keyword" :clearable="true" placeholder="搜索姓名" max="200" class="persons_name" @clear="keywordSearch" >
              <el-button slot="append" icon="el-icon-search" @click="keywordSearch"></el-button>
            </el-input>
          </el-form-item>
<!--    月份搜索      -->
          <el-form-item label="月份" v-if="currentTag === 'target'">
            <el-date-picker
              class="date-picker-width"
              v-model="formData.month"
              clearable
              width="100%"
              type="month"
              :clearable="false"
              placeholder="请选择月份"
              value-format="yyyy-MM"
            />
          </el-form-item>
<!--     时间区间搜索     -->
          <el-form-item label="时间区间" v-if="currentTag === 'search'">
            <el-date-picker
              v-model="timeScope"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              editable
              :clearable="false"
            />
          </el-form-item>
<!--     达标选项     -->
          <el-form-item v-if="currentTag === 'target'" label="只看全部达标的" >
            <el-checkbox v-model="formData.complete" size="medium" />
          </el-form-item>
          <el-form-item>
            <div class="flex-box">
              <downloadexcel
                v-if="currentTag === 'target' ? (target.total > 0) : (search.total > 0)"
                :fetch="getDownloadData"
                name="管理者奖扣列表.xls"
                :fields="downloadFields"
              >
                <el-button type="primary" plain size="medium" style="margin-right: 10px;">导出报表</el-button>
              </downloadexcel>
              <span class="blue cursor" style="padding-left: 20px;font-size: 14px;" @click="$openUrl(18)">什么是每月奖扣目标，如何使用？</span>
            </div>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main v-if="currentTag === 'target'">
        <el-table :data="target.list" style="width: 100%" v-loading="loading" @row-click="openDetailTarget">
          <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" />
              <span style="margin-left: 10px; line-height: 50px; display: inline-block;">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="奖分">
            <template slot-scope="scope">
              <b>{{scope.row.reward.point}}</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="扣分">
            <template slot-scope="scope">
              <b>{{scope.row.deduction.point}}</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="奖扣比例">
            <template slot-scope="scope">
              <div v-if="scope.row.ratio.enable === 1">
                <b>{{scope.row.ratio.reward_ratio}} : 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>
                  1
                </span>
              </div>
              <div v-else style="padding-left:21px">—</div>
            </template>
          </el-table-column>
          <el-table-column label="奖扣人次" >
            <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>
        </el-table>
        <center style="padding: 20px 0;">
          <el-pagination
            background
            @size-change="handleTargetSizeChange"
            @current-change="handleTargetPageChange"
            :current-page="target.page"
            layout="total, sizes, prev, pager, next"
            :page-size="target.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="target.total"
          />
        </center>

      </el-main>
      <el-main v-if="currentTag === 'search'">
        <el-table :data="search.list" style="width: 100%" v-loading="loading" @row-click="openDetailSearch">
          <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" />
              <span style="margin-left: 10px; line-height: 50px; display: inline-block;">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="奖分" prop="reward_point" />
          <el-table-column label="扣分" prop="deduction_point"/>
          <el-table-column label="奖扣比例" prop="ratio" :formatter="ratioFormatter"/>
          <el-table-column label="奖扣人次" prop="exec" />
        </el-table>
        <center style="padding: 20px 0;">
          <el-pagination
            background
            @size-change="handleSearchSizeChange"
            @current-change="handleSearchPageChange"
            :current-page="search.page"
            layout="total, sizes, prev, pager, next"
            :page-size="search.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="search.total"
          />
        </center>
      </el-main>

    </el-container>
  </div>
</template>


<script>

import Template from "../../../examine/components/Template.vue";
import downloadexcel from "vue-json-excel";
export default {
  name:'manager_statistics_v2',
  components: {Template,downloadexcel},
  data(){
    let startDate = new Date();
    startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 7);
    startDate = this.$moment(startDate).format('YYYY-MM-DD');
    let endDate = this.$moment().format('YYYY-MM-DD');
    return {
      tabs:[
        {label:'奖扣目标',name:'target'},
        {label: '奖扣查询',name: 'search'}
      ],
      currentTag:'target',
      loading:false,
      deptTrees: [],
      formData:{
        month: this.$moment().format('YYYY-MM'),
        startDate: startDate,
        endDate: endDate,
        deptId: 0,
        keyword: '',
        complete: false
      },
      timeScope:[
        startDate,
        endDate
      ],
      dept_name_xq_xq: '',
      target:{
        list:[],
        total:0,
        page:1,
        pageSize:10
      },
      search:{
        list:[],
        total:0,
        page:1,
        pageSize:10
      },
      downloadTargetFields:{
        '姓名':'name',
        '部门':'dept',
        '实际奖分':'rewardPoint',
        '奖分目标':'rewardTarget',
        '实际扣分':'deductionPoint',
        '扣分目标':'deductionTarget',
        '实际奖扣比例':'ratio',
        '比例目标':'ratioTarget',
        '实际奖扣人次':'exec',
        '人次目标':'execTarget',
        '月份':'timeScope',
      },
      downloadSearchFields:{
        '姓名':'name',
        '部门':'dept',
        '奖分':'rewardPoint',
        '扣分':'deductionPoint',
        '奖扣比例':'ratio',
        '奖扣人次':'exec',
        '周期':'timeScope',
      },
      downloadData:[]
    }
  },
  created() {
    this.currentTag = this.$route.query.tag || 'target';
    if (['target','search'].indexOf(this.currentTag) < 0) this.currentTag = 'target';
  },
  computed:{
    downloadFields: function (){
      return this.currentTag === 'target' ? this.downloadTargetFields : this.downloadSearchFields;
    }
  },
  mounted() {
    if (this.$getCache('dept_tree')) {
      this.deptTrees = this.getTreeData(this.$getCache('dept_tree'));
    }
    this.getList();
  },
  watch:{
    'formData.month'(val,oVal){
      if (val === oVal) return;
      this.target.page = 1;
      this.search.page = 1;
      this.getList();
    },
    'formData.startDate'(val,oVal){
      if (val === oVal) return;
      this.target.page = 1;
      this.search.page = 1;
      this.getList();
    },
    'formData.endDate'(val,oVal){
      if (val === oVal) return;
      this.target.page = 1;
      this.search.page = 1;
      this.getList();
    },
    'formData.deptId'(val,oVal){
      if (val === oVal) return;
      this.target.page = 1;
      this.search.page = 1;
      this.getList();
    },
    'formData.complete'(val,oVal){
      if (val === oVal) return;
      this.target.page = 1;
      this.search.page = 1;
      this.getList();
    },
    'target.page'(val,oVal){
      if (val === oVal) return;
      this.getList();
    },
    'target.pageSize'(val,oVal){
      if (val === oVal) return;
      this.getList();
    },
    'search.page'(val,oVal){
      if (val === oVal) return;
      this.getList();
    },
    'search.pageSize'(val,oVal){
      if (val === oVal) return;
      this.getList();
    },
    currentTag(val,oVal){
      if (val === oVal) return;
      this.getList();
      // this.$router.push({path: '/manager_statistics',query:{tag:val}})
    },
    timeScope(val,oVal){
      this.formData.startDate = val[0];
      this.formData.endDate = val[1];
    }
  },
  methods: {
    //部门
    getLastDeptNull(val) {
      if (val.length == 0) {
        this.formData.deptId = 0;
      } else {
        this.formData.deptId = val[val.length-1];
      }
      this.$nextTick(() => {
        this.$refs.dept.dropDownVisible = false; //监听值发生变化就关闭它
      });
    },
    // 递归判断列表，把最后的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;
    },
    getList(){
      if (this.currentTag === 'target'){
        this.getTargetList();
      }else {
        this.getSearchList();
      }
    },
    parseDownloadDataTarget(data){
      return {
        name:data.name,
        dept:data.dept,
        rewardPoint:data.reward.point,
        rewardTarget:data.reward.target,
        deductionPoint:data.deduction.point,
        deductionTarget:data.deduction.target,
        ratio:data.ratio.enable === 1 ? data.ratio.reward_ratio + '比1' : '-',
        ratioTarget:data.ratio.target+'比1',
        exec:data.exec.count,
        execTarget:data.exec.target,
      }
    },
    parseDownloadDataSearch(data){
      return {
        name:data.name,
        dept:data.dept,
        rewardPoint:data.reward_point,
        deductionPoint:data.deduction_point,
        ratio:data.ratio,
        exec:data.exec,
      }
    },
    getTargetList(){
      let msg = {
        type:'es',
        employee_id:this.$userInfo().id,
        page:this.target.page,
        page_size:this.target.pageSize,
        month:this.formData.month,
        dept_id:this.formData.deptId,
        complete:this.formData.complete ? 1 : 0,
        keyword:this.formData.keyword
      }
      let self = this;
      self.loading = true;
      //清空导出数据
      self.downloadData = [];
      this.$socketApiTow.sendData(msg,(res) => {
        if (res.type !== msg.type || res.code !== 1) return;
        self.target.list = res.result.list;
        self.target.total = res.result.total;
        //刷新导出数据
        if (msg.page === 0){
          self.downloadData = self.target.list.map((item) => {
            let i = self.parseDownloadDataTarget(item);
            i.timeScope = msg.month
            return i;
          });
          self.loading = false;
        }else {
          msg.page = 0;
          self.$socketApiTow.sendData(msg,(res) => {
            if (res.type !== msg.type || res.code !== 1) return;
            self.downloadData = res.result.list.map((item) => {
              let i = self.parseDownloadDataTarget(item);
              i.timeScope = msg.month
              return i;
            });
            self.loading = false;
          })
        }
      })
    },
    getSearchList(){
      let msg = {
        type:'ess',
        employee_id:this.$userInfo().id,
        start_date:this.formData.startDate,
        end_date:this.formData.endDate,
        dept_id:this.formData.deptId,
        keyword:this.formData.keyword,
        page:this.search.page,
        page_size:this.search.pageSize
      }
      let self = this;
      self.loading = true;
      //清空导出数据
      self.downloadData = [];
      this.$socketApiTow.sendData(msg,(res)=>{
        if (res.type !== msg.type || res.code !== 1) return;
        self.search.list = res.result.list;
        self.search.total = res.result.total;
        //刷新导出数据
        if (msg.page === 0){
          self.downloadData = self.search.list.map((item) => {
            let i = self.parseDownloadDataSearch(item);
            i.timeScope = msg.start_date + "至" + msg.end_date;
            return i;
          });
          self.loading = false;
        }else {
          msg.page = 0;
          self.$socketApiTow.sendData(msg,(res) => {
            if (res.type !== msg.type || res.code !== 1) return;
            self.downloadData = res.result.list.map((item) => {
              let i = self.parseDownloadDataSearch(item);
              i.timeScope = msg.start_date + "至" + msg.end_date;
              return i;
            });
            self.loading = false;
          })
        }
      })
    },
    handleTargetSizeChange(val){
      this.target.pageSize = val;
    },
    handleTargetPageChange(val){
      this.target.page = val;
    },
    handleSearchSizeChange(val){
      this.search.pageSize = val;
    },
    handleSearchPageChange(val){
      this.search.page = val;
    },
    keywordSearch(){
      this.target.page = 1;
      this.search.page = 1;
      this.getList();
    },
    getDownloadData(){
      return this.downloadData;
    },
    openDetailTarget(e){
      this.openDetail({
        date:this.formData.month,
        id:e.id,
        name:e.name,
        source:'target',
      });
    },
    openDetailSearch(e){
      this.openDetail({
        startDate:this.formData.startDate,
        endDate:this.formData.endDate,
        id:e.id,
        name:e.name,
        source:'search',
      });
    },
    openDetail(data){
      // this.$router.push({path:'/integral_event_two',query:{data:JSON.stringify(data)}})
      this.$router.replace({path:'/integral_event_two',query:{data:JSON.stringify(data)}});
    },
    ratioFormatter(row, column, cellValue, index){
      return cellValue ? cellValue : '--';
    },
  }
}

</script>


<style scoped lang="scss">
.search_box {
  /deep/ button:active {
    background: #409EFF;
  }
  /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;
}
.title {
  display: block;
  text-align: center;
  font-size: 12px !important;
  line-height: 30px;
  color: #909399 !important;
  padding: 0;
}
.nopoint_box a {
  color: #409EFF;
}
.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: #409EFF;
    margin: 10px 0;
  }
  .target {
    font-size: 12px;
    color: #909399;
  }
}
.drawer_title {
  font-size: 18px;
  padding: 20px;
}
.manager_statistics_box {
  background-color: #ffffff;
  padding: 20px;
  /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;
}
/deep/.el-table tbody tr{
  cursor: pointer;
}
</style>