| 
					
				 | 
			
			
				@@ -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> 
			 |