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