rt_fhyx_adminUI/src/views/company/statistics/voiceLogs.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 style="width: 220px" 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 label="公司名" prop="companyId">
                    <el-select filterable style="width: 220px" v-model="companyId" @change="companyChange" placeholder="请选择公司名" clearable size="small">
                        <el-option
                          v-for="item in companys"
                          :key="item.companyId"
                          :label="item.companyName"
                          :value="item.companyId"
                        />
                  </el-select>
                </el-form-item>
                <el-form-item >
                  <treeselect style="width: 220px" :clearable="false"  v-model="deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
                </el-form-item>
                <el-form-item>
                  <el-select filterable v-model="userIds" placeholder="请选择员工" clearable size="small">
                      <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="getVoiceLogs">搜索</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="callCount"
                          label="拨打数">
                        </el-table-column>
                        <el-table-column
                          prop="callSuccessCount"
                          label="接通数">
                        </el-table-column>
                        <el-table-column
                          prop="callRate"
                          label="接通率(%)">
                        </el-table-column>
                        <el-table-column
                          prop="times"
                          label="通话时长(秒)">
                        </el-table-column>
                        <el-table-column
                          prop="billingTime"
                          label="消耗分钟(分)">
                        </el-table-column>
                      </el-table>
                  </div>
              </div>
            </div>

          </div>
</template>

<script>
import { voiceLogs,exportVoiceLogs } from "@/api/company/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";
import { getCompanyList } from "@/api/company/company";
export default {
  name: 'Index',
  mixins: [resize],
  components: { Treeselect },
  watch: {
    // 监听deptId
    'deptId': 'currDeptChange'
  },
  data() {
    return {
       companys:[],
       deptOptions:[],
       companyId:undefined,
       deptId:undefined,
       userIds:undefined,
       users:[],
       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:[],
        billingTime:[],
        callCount:[],
        callSuccessCount:[],
        times:[]

    }
  },
   created() {
       getCompanyList().then(response => {
        this.companys = response.data;
        if(this.companys!=null&&this.companys.length>0){
          this.companyId=this.companys[0].companyId;
          this.getTreeselect();
        }
      });
  },
  methods: {
    companyChange(val){
      console.log(val);
      this.companyId=val;
      this.getTreeselect();
    },
    currDeptChange(val){
      console.log(val)
      this.deptId=val;
       this.getUserListByDeptId();
    },
     /** 查询部门下拉树结构 */
    getTreeselect() {
      var that=this;
      var param={companyId:this.companyId}
      treeselect(param).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.getVoiceLogs()
        }
      });
    },
    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}
        }
        exportVoiceLogs(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;

        });
    },
     getVoiceLogs(){
          var data;
          if(this.userIds!=undefined){
              data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
          }
          else{
              data={type:this.value,deptId:this.deptId}
          }
          voiceLogs(data).then((response) => {
           this.list=response.list;
           this.dates=response.dates;
           this.callCount=response.callCount;
           this.callSuccessCount=response.callSuccessCount;
           this.billingTime=response.billingTime;
           this.times=response.times;
            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: 'bar',
                  emphasis: {
                      focus: 'series'
                  },
                  data: this.times
              },
              {

                  name: '消耗分钟',
                  type: 'bar',
                  emphasis: {
                      focus: 'series'
                  },
                  data: this.billingTime
              },
               {
                  name: '拨打数',
                  type: 'bar',
                  emphasis: {
                      focus: 'series'
                  },
                  data: this.callCount
              },
               {
                  name: '接通数',
                  type: 'bar',
                  emphasis: {
                      focus: 'series'
                  },
                  data: this.callSuccessCount
              }
          ]
        };
        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>