ylrz_his_scrm_companyUI/src/views/hisStore/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 >
            <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 label="筛选日期" prop="createTime">
                  <el-date-picker clearable size="small" style="width: 205.4px"
                    v-model="dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期" end-placeholder="结束日期"
                    >
                  </el-date-picker>
                </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 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="orderCount"
                    label="订单数">
                  </el-table-column>
                  <el-table-column
                    prop="payMoney"
                    label="订单金额">
                  </el-table-column>

                </el-table>
            </div>
        </div>
      </div>

    </div>
</template>

<script>
import { storePayment,exportStorePayment } from "@/api/hisStore/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";

export default {
name: 'Index',
mixins: [resize],
components: { Treeselect },
watch: {
// 监听deptId
'deptId': 'currDeptChange'
},
data() {
return {
 deptOptions:[],
 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:[],
  orderCount:[],
  payMoney:[],

}
},
created() {
this.getTreeselect();
},
methods: {
  currDeptChange(val){
  this.deptId=val;
  this.getUserListByDeptId();
},
/** 查询部门下拉树结构 */
getTreeselect() {
  var that=this;
  treeselect().then((response) => {
    this.deptOptions = response.data;
    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}
  }
  exportStorePayment(data).then((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.list=response.list;
     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);
},
 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>