SystemReconciliation.vue

<template>
  <div class="SystemReconciliation">
    <div class="searchBox">
      <a-select allowClear placeholder="请选择年" v-model="year" style="width: 120px">
        <a-select-option v-for="item in yearList" :key="item" :value="item">{{item}}年</a-select-option>
      </a-select>
      <a-select allowClear placeholder="请选择月" v-model="month" style="width: 120px;margin-left: 10px">
        <a-select-option v-for="item in 12" :key="item" :value="item">{{item}}月</a-select-option>
      </a-select>
      <a-button type="primary" @click="init">查询</a-button>
    </div>
    <div class="chart">
      <div id="rechargeLine" :style="{width: '100%', height: '300px'}"></div>
    </div>
    <div class="chart" style="width: 100%;position: relative;border: 1px solid #dddddd;margin-bottom: 20px">
      <div id="subsidyList" :style="{width: '100%', height: '300px'}"></div>
      <a-select placeholder="津贴类型" v-model="sceneType" style="width: 120px;position: absolute;right: 10%;top: 20px;" @change="changeSceneType">
        <a-select-option value="MEAL">餐补</a-select-option>
        <a-select-option value="TRAVEL">交通补贴</a-select-option>
      </a-select>
    </div>
    <div class="chart">
      <div id="consumeLine" :style="{width: '100%', height: '300px'}"></div>
    </div>
  </div>
</template>

<script>
import { $http } from './../../../api/axios.js'
export default {
  name: 'systemReconciliation',
  data () {
    return {
      year: '',
      month: '',
      SubsidyListDataList: [],
      ConsumeDataList: [],
      RechargeDataList: [],
      yearList: [],
      lineWidth: [],
      sceneType: 'MEAL'
    }
  },
  created () {
    let thisYear = new Date().getFullYear()
    for (let i = 2018; i <= thisYear; i++) {
      this.yearList.push(i)
    }
    this.year = new Date().getFullYear()
    this.month = new Date().getMonth() + 1
    this.init()
  },
  mounted () {
    // this.drawLine()
    window.addEventListener('resize', () => {
      this.$echarts.init(document.getElementById('subsidyList')).resize()
      this.$echarts.init(document.getElementById('rechargeLine')).resize()
      this.$echarts.init(document.getElementById('consumeLine')).resize()
    })
  },
  methods: {
    init () {
      if (!this.year) {
        this.$message.success('请选择年份')
        return
      }
      this.getStatisticsSubsidyData()
      this.getStatisticsConsumeData()
      this.getStatisticsRechargeData()
    },
    drawSubsidyListDataLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('subsidyList'))
      // 绘制图表
      let xAxisData = []
      let data = []
      let dataAmount = 0
      this.SubsidyListDataList.map(item => {
        xAxisData.push(parseInt(item.abscissaKey))
        data.push(item.subsidyTotalAmount ? item.subsidyTotalAmount : 0)
        dataAmount = (dataAmount * 100 + item.subsidyTotalAmount * 100) / 100
      })
      let unit = this.month === undefined ? '月' : '日'
      let color = this.sceneType === 'MEAL' ? ['#00CC66'] : [`#FADF33`]
      myChart.setOption({
        color: color,
        title: {
          text: '发放津贴金额',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          },
          left: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var res = `<div><p>时间：${params[0].name}${unit}</p></div>`
            for (var i = 0; i < params.length; i++) {
              res += '<p>' + params[i].seriesName + '：¥ ' + params[i].data.toFixed(2) + '</p>'
            }
            return res
          }
        },
        legend: {
          data: [`${this.sceneType === 'MEAL' ? '餐补' : '交通补贴'}`],
          formatter: function (name) {
            return `${name} ${dataAmount}元`
          },
          itemGap: 40
        },
        xAxis: [
          {
            name: `(${this.month === undefined ? '月' : '日'})`, // 给X轴加单位
            // nameLocation: 'middle',
            type: 'category',
            data: xAxisData
          }
        ],
        yAxis: {
          name: '(元)',
          type: 'value'
        },
        series: [{
          name: `${this.sceneType === 'MEAL' ? '餐补' : '交通补贴'}`,
          type: 'bar',
          data: data
        }]
      })
    },
    drawRechargeListDataLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('rechargeLine'))
      // 绘制图表
      let xAxisData = []
      let data1 = []
      let data2 = []
      let data1Amount = 0
      let data2Amount = 0
      this.RechargeDataList.map(item => {
        xAxisData.push(parseInt(item.abscissaKey))
        data1.push(item.externalRechargeAmount ? item.externalRechargeAmount : 0)
        data1Amount = (data1Amount * 100 + item.externalRechargeAmount * 100) / 100
        data2.push(item.internalRechargeAmount ? item.internalRechargeAmount : 0)
        data2Amount = (item.internalRechargeAmount * 100 + data2Amount * 100) / 100
      })
      let unit = this.month === undefined ? '月' : '日'
      myChart.setOption({
        color: ['#3F9EFE', '#FF4A7A'],
        title: {
          text: '充值金额',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          },
          left: '5%'
        },
        legend: {
          data: ['支付宝充值', '现金充值'],
          formatter: function (name) {
            if (name === '支付宝充值') {
              return `${name} ${data1Amount}元`
            } else {
              return `${name} ${data2Amount}元`
            }
          },
          itemGap: 40
        },
        grid: {
          left: '10%',
          right: '10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var res = `<div><p>时间：${params[0].name}${unit}</p></div>`
            for (var i = 0; i < params.length; i++) {
              res += '<p>' + params[i].seriesName + '：¥ ' + params[i].data.toFixed(2) + '</p>'
            }
            return res
          }
        },
        xAxis: [
          {
            name: `(${unit})`, // 给X轴加单位
            type: 'category',
            data: xAxisData
          }
        ],
        yAxis: {
          name: '(元)',
          type: 'value'
        },
        series: [{
          name: '支付宝充值',
          type: 'bar',
          data: data1
        }, {
          name: '现金充值',
          type: 'bar',
          data: data2
        }]
      })
    },
    drawConsumeListDataLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('consumeLine'))
      // 绘制图表
      let xAxisData = []
      let data1 = []
      let data2 = []
      let data3 = []
      let data1Amount = 0
      let data2Amount = 0
      let data3Amount = 0
      // internalConsumeRealityAmount 员工现金
      // internalConsumeSubsidyAmount 津贴
      // externalConsumeRealityAmount 访客消费
      // .toFixed(2) + '元'
      let unit = this.month === undefined ? '月' : '日'
      this.ConsumeDataList.map(item => {
        xAxisData.push(parseInt(item.abscissaKey))
        data1.push(item.internalConsumeRealityAmount ? item.internalConsumeRealityAmount : 0.00)
        data1Amount = (data1Amount * 100 + item.internalConsumeRealityAmount * 100) / 100
        data2.push(item.internalConsumeSubsidyAmount ? item.internalConsumeSubsidyAmount : 0.00)
        data2Amount = (data2Amount * 100 + item.internalConsumeSubsidyAmount * 100) / 100
        data3.push(item.externalConsumeRealityAmount ? item.externalConsumeRealityAmount : 0.00)
        data3Amount = (data3Amount * 100 + item.externalConsumeRealityAmount * 100) / 100
      })
      myChart.setOption({
        color: ['#B87EE5', '#0066CC', '#EB597B'],
        title: {
          text: '消费金额',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          },
          left: '5%'
        },
        legend: {
          data: [`员工现金消费`, `员工津贴消费`, `访客消费`],
          formatter: function (name) {
            if (name === '员工现金消费') {
              return `${name} ${data1Amount}元`
            } else if (name === '员工津贴消费') {
              return `${name} ${data2Amount}元`
            } else {
              return `${name} ${data3Amount}元`
            }
          },
          itemGap: 40
        },
        grid: {
          left: '10%',
          right: '10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var res = `<div><p>时间：${params[0].name}${unit}</p></div>`
            for (var i = 0; i < params.length; i++) {
              res += '<p>' + params[i].seriesName + '：¥ ' + params[i].data.toFixed(2) + '</p>'
            }
            return res
          }
        },
        xAxis: {
          name: `(${this.month === undefined ? '月' : '日'})`, // 给X轴加单位
          // nameLocation: 'middle',
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          name: '(元)',
          type: 'value'
          // axisLabel: {
          //   formatter: '{value}元'
          // }
        },
        series: [{
          name: '员工现金消费',
          type: 'bar',
          data: data1
        }, {
          name: '员工津贴消费',
          type: 'bar',
          data: data2
        }, {
          name: '访客消费',
          type: 'bar',
          data: data3
        }]
      })
    },
    changeSceneType (value) {
      this.sceneType = value
      this.getStatisticsSubsidyData()
    },
    getStatisticsSubsidyData () {
      let that = this
      let SubsidyListData = {
        year: this.year,
        month: this.month,
        sceneType: this.sceneType
      }
      $http.get(`/mingpay/v1/isv/account/statisticsSubsidy`, SubsidyListData).then((res) => {
        if (res.data.resultCode === 0) {
          that.SubsidyListDataList = res.data.data
          that.drawSubsidyListDataLine()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getStatisticsConsumeData () {
      let that = this
      let ConsumeData = {
        year: this.year,
        month: this.month
      }
      $http.get(`/mingpay/v1/isv/account/statisticsConsume`, ConsumeData).then((res) => {
        console.log(res.data.data)
        if (res.data.resultCode === 0) {
          that.ConsumeDataList = res.data.data
          that.drawConsumeListDataLine()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getStatisticsRechargeData () {
      let that = this
      let RechargeData = {
        year: this.year,
        month: this.month
      }
      $http.get(`/mingpay/v1/isv/account/statisticsRecharge`, RechargeData).then((res) => {
        console.log(res.data.data)
        if (res.data.resultCode === 0) {
          that.RechargeDataList = res.data.data
          that.drawRechargeListDataLine()
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}
.searchBox button{
  margin-left: 10px;
  margin-bottom: 20px
}
.SystemReconciliationContent{
  border: 1px solid #f6f6f6;
  width: 100%;
}
.contentItem{
  width: 100%;
  display: flex;
  padding: 20px;
  overflow: hidden;
  border-bottom: 1px solid #f6f6f6;
}
.contentItem>div{
  display: flex;
  flex-direction: column;
}
.contentItem>div:nth-of-type(2){
  flex: 1;
  padding-left: 72px;
  box-sizing: border-box;
}
.contentItem>div:nth-of-type(3){
  width: 300px;
  flex-direction: column-reverse;
}
.contentItem>div:nth-of-type(1){
  font-weight: bold;
  justify-content: center;
  width: 150px;
}
.recordsBox>div{
  display: flex;
}
.contentItem>.recordsBox{
  padding-left: 0 !important;
}
.recordsBox>div>div:nth-of-type(1){
  width: 80px;
  text-align: right;
  margin-right: 20px;
}
.contentItem span {
  color: #1890ff;
}
.contentItem label{
  width: 70px;
  display: inline-block;
  text-align: right;
}
.chart{
  width: 100%;
  border: 1px solid #dddddd;
  margin-bottom: 20px;
  padding-top: 20px;
  box-sizing: border-box;
}
</style>