renkang_adminui/src/views/store/statistics/storePayment.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 label="公司名" prop="companyId">
              <el-select filterable 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 :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="storePayment">搜索</el-button>
          </el-form-item>
        </el-form>
         <div class="data-box">
            <div class="echart-box">
              <div id="echart-customer"></div>
            </div>
        </div>
      </div>

    </div>
</template>

<script>
import { storePayment } from "@/api/store/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:[],
  orderCount:[],
  payMoney:[]


}
},
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.storePayment()
  }
});
},
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;

  });
},
storePayment(){
    var data;
    if(this.userIds!=undefined){
        data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
    }
    else{
        data={type:this.value,deptId:this.deptId}
    }
    storePayment(data).then((response) => {
      this.dates=response.dates;
      this.orderCount=response.orderCount;
      this.payMoney=response.payMoney;
      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.orderCount
        },
        {

            name: '订单金额',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: this.payMoney
        }
    ]
  };
  this.chart=echarts.init(document.getElementById("echart-customer"));
  this.chart.setOption(option,true);
},
}
}
</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>