ylrz_saas_his_scrm_companyUI/src/views/crm/statistics/customerNum.vue

<template>
  <div class="app-container">
      <div class="app-content">
           <div class="title">
             客户总量统计
          </div>
         <el-form class="search-form" :inline="true" >
          <el-form-item >
            <el-select v-model="value" placeholder="请选择日期">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <treeselect :clearable="false"  v-model="deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
          </el-form-item>
          <el-form-item>
             <el-select v-model="userIds" multiple  placeholder="请选择员工">
                <el-option
                  v-for="item in users"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item>
              <el-button type="cyan" icon="el-icon-search"   @click="customer">搜索</el-button>
          </el-form-item>
        </el-form>
         <div class="data-box">
          <div class="echart-box">
            <div id="echart-customer"></div>
          </div>
          <div class="table-box">
            <el-button class="export" size="small"  @click="handleExport"   v-hasPermi="['statistics:customer:index']">导出</el-button>
            <el-table
            :data="list"
            border
            :summary-method="getSummaries"
            show-summary
            max-height="500"
            style="width: 100%;">
            <el-table-column
              prop="nickName"
              label="员工姓名">
            </el-table-column>
            <el-table-column
              prop="customerOkNum"
              label="成交客户数">
            </el-table-column>
            <el-table-column
              prop="customerNum"
              label="新增客户数">
            </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
import { customerNum,exportCustomerNum } from "@/api/crm/statistics";
import { getUserListByDeptId} from "@/api/company/companyUser";
import echarts from 'echarts'
import resize from '../../dashboard/mixins/resize'
import { treeselect } from "@/api/company/companyDept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
name: 'Index',
mixins: [resize],
components: { Treeselect },
watch: {
// 监听deptId
'deptId': 'currDeptChange'
},
data() {
return {
 deptOptions:[],
 deptId:undefined,
 userIds:undefined,
 users:[],
 dateRange:[],
 chart: null,
 options: [{
    value: '1',
    label: '今天'
  }, {
    value: '2',
    label: '昨天'
  }, {
    value: '3',
    label: '本周'
  }, {
    value: '4',
    label: '上周'
  }, {
    value: '5',
    label: '本月'
  }
  , {
    value: '6',
    label: '上月'
  }
  , {
    value: '7',
    label: '本季度'
  }
  , {
    value: '8',
    label: '上季度'
  }
  , {
    value: '9',
    label: '本年'
  }
  , {
    value: '10',
    label: '上年'
  }],
  value: '5',
  list:[],
  dates:[],
  customerNum:[],
  customerOkNum:[],

}
},
created() {
this.getTreeselect();
},
methods: {
currDeptChange(val){
console.log(val)
this.deptId=val;
 this.getUserListByDeptId();
},
/** 查询部门下拉树结构 */
getTreeselect() {
var that=this;
treeselect().then((response) => {
  this.deptOptions = response.data;
  console.log(this.deptOptions)
  if(response.data!=null&&response.data.length>0){
    this.deptId=response.data[0].id;
    that.customer()
  }
});
},
handleExport(){
  var data;
  if(this.userIds!=undefined){
      data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
  }
  else{
      data={type:this.value,deptId:this.deptId}
  }
  exportCustomerNum(data).then((response) => {
      console.log(response)
     this.download(response.msg);
  });

},
getUserListByDeptId() {
  this.userIds=undefined;
  var data={deptId:this.deptId};
  getUserListByDeptId(data).then(response => {
    this.users = response.data;

  });
},
customer(){
    var data;
    if(this.userIds!=undefined){
        data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
    }
    else{
        data={type:this.value,deptId:this.deptId}
    }
    customerNum(data).then((response) => {
     this.list=response.list;
     this.dates=response.dates;
     this.customerOkNum=response.customerOkNum;
     this.customerNum=response.customerNum;
      setTimeout(() => {
        this.initEchart();
      }, 500);
  });
},
initEchart(){
  var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['成交客户数', '新增客户数' ]
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: this.dates
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel:{
              formatter:'{value}'
            }
        }
    ],
    series: [
        {

            name: '成交客户数',
            type: 'line',
            emphasis: {
                focus: 'series'
            },
            data: this.customerOkNum
        },
        {

            name: '新增客户数',
            type: 'line',
            emphasis: {
                focus: 'series'
            },
            data: this.customerNum
        }

    ]
  };
  this.chart=echarts.init(document.getElementById("echart-customer"));
  this.chart.setOption(option,true);
},
 getSummaries(param) {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '总计';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      sums[index] += ' ';
    } else {
      sums[index] = '';
    }
  });

  return sums;
}
}
}
</script>

<style lang="scss" scoped>
.app-container{
border: 1px solid #e6e6e6;
padding: 12px;

.app-content{
background-color: white;
.title{
  padding: 20px 30px 0px 30px;
  font-size: 18px;
  font-weight: bold;
  color: black;

}
.search-form{
  margin: 20px 30px 0px 30px;
}
.data-box{
  padding: 30px;
  background-color:  rgb(255, 255, 255);
  height: 100%;

  .echart-box{
    margin: 0 auto;
    text-align: center;
  }
  .el-select{
    margin: 5px 10px;
  }
  .table-box{
    margin-top: 15px;
    .export{
      float: right;
      margin: 10px 0px;
    }
  }
}
}
}
#echart-customer{
width:100%;
height:320px
}
.vue-treeselect{
width: 217px;
height: 36px;
}

</style>
<style>
.vue-treeselect__control{
display: block;
}
</style>