佣金排行旁

src/api/company/statistics.js

@@ -141,3 +141,17 @@ export function exportTokenStaticByTime(dateTime) {
   })
 }
 
+export function tuiMoney(query) {
+  return request({
+    url: '/company/statistics/tuiMoney',
+    method: 'get',
+    params: query
+  })
+}
+export function exportTuiMoney(query) {
+  return request({
+    url: '/company/statistics/exportTuiMoney',
+    method: 'get',
+    params: query
+  })
+}

src/views/company/statistics/tuiMoney.vue

@@ -0,0 +1,365 @@
+<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="tuiMoneyCount"
+                          label="佣金订单数">
+                        </el-table-column>
+                        <el-table-column
+                          prop="tuiMoney"
+                          label="佣金总金额">
+                        </el-table-column>
+                      </el-table>
+                  </div>
+              </div>
+            </div>
+
+          </div>
+</template>
+
+<script>
+import { tuiMoney,exportTuiMoney } 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:[],
+       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:[],
+        billingTime:[],
+        tuiMoneyCount:[],
+        tuiMoney:[],
+        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}
+        }
+        exportTuiMoney(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}
+          }
+          tuiMoney(data).then((response) => {
+           this.list=response.list;
+           this.tuiMoney=response.tuiMoney;
+           this.tuiMoneyCount=response.tuiMoneyCount;
+
+           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: 'line',
+                  emphasis: {
+                      focus: 'series'
+                  },
+                  data: this.tuiMoneyCount
+              },
+              {
+
+                  name: '佣金总金额',
+                  type: 'line',
+                  emphasis: {
+                      focus: 'series'
+                  },
+                  data: this.tuiMoney
+              }
+
+          ]
+        };
+        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>