图表

package.json

@@ -14,6 +14,7 @@
     "ant-design-vue": "^1.3.8",
     "core-js": "^2.6.5",
     "dingtalk-jsapi": "^2.6.44",
+    "echarts": "^4.5.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"

src/components/common/Home.vue

@@ -14,7 +14,7 @@
         <!-- <a-menu-item key="1">应用管理</a-menu-item> -->
         <a-menu-item key="accountManagement">支付管理</a-menu-item>
         <a-menu-item key="classificationOfDishes">食堂管理</a-menu-item>
-        <a-menu-item key="historicalVisitors">访客管理</a-menu-item>
+        <!-- <a-menu-item key="historicalVisitors">访客管理</a-menu-item> -->
         <!-- <a-menu-item key="5">权限管理</a-menu-item> -->
       </a-menu>
     </a-layout-header>

src/components/pages/PaymentManagement/SystemReconciliation.vue

 <template>
   <div class="SystemReconciliation">
     <div class="searchBox">
-      <a-date-picker
-        :disabledDate="disabledStartDate"
-        format="YYYY-MM-DD"
-        v-model="startValue"
-        placeholder="开始日期"
-        @change="onChangeStartValue"
-        @openChange="handleStartOpenChange"
-      />
-      ～
-      <a-date-picker
-        :disabledDate="disabledEndDate"
-        format="YYYY-MM-DD"
-        placeholder="结束日期"
-        @change="onChangeEndValue"
-        v-model="endValue"
-        :open="endOpen"
-        @openChange="handleEndOpenChange"
-      />
-      <a-button type="primary" @click="getAccountCheck">查询</a-button>
+      <a-select placeholder="请选择年" v-model="year" style="width: 120px" @change="handleChange">
+        <a-select-option v-for="item in yearList" :key="item" :value="item">{{item}}年</a-select-option>
+      </a-select>
+      <a-select placeholder="请选择月" v-model="month" style="width: 120px;margin-left: 10px" @change="handleChange">
+        <a-select-option v-for="item in 12" :key="item" :value="item">{{item}}月</a-select-option>
+      </a-select>
+      <a-button type="primary">查询</a-button>
     </div>
     <div class="title">账单汇总</div>
-    <div class="SystemReconciliationContent">
-      <div class="contentItem">
-        <div class="title">
-          充值金额
-        </div>
-        <div>
-          <p><label>现金：</label>¥{{systemReconciliationDetails.internalRechargeAmount || '0.00'}}</p>
-          <p><label>支付宝：</label>¥{{systemReconciliationDetails.externalRechargeAmount || '0.00'}}</p>
-        </div>
-        <div><p>共计：<span>¥{{ returnRechargeAmount() }}</span></p></div>
-      </div>
-      <div class="contentItem">
-        <div class="title">
-          发放津贴
-        </div>
-        <div>
-          <p v-for=" item in systemReconciliationDetails.subsidyCheck" :key="item.sceneType"><label>{{ item.sceneType === 'TRAVEL' ? '交通补助' : '餐补' }}：</label>¥{{ item.amount || '0.00' }}</p>
-        </div>
-        <div><p>共计：<span>¥{{ returnSubsidyCheckTotal() }}</span></p></div>
-      </div>
-      <div class="contentItem">
-        <div class="title">
-          消费金额
-        </div>
-        <div class="recordsBox">
-          <div v-for="item in systemReconciliationDetails.consumeCheck" :key="item.sceneType">
-            <div>{{ item.sceneType === 'TRAVEL' ? '交通消费' : '用餐消费' }}：</div>
-            <div>
-              <p>现金：¥{{ item.realityAmount || '0.00' }}</p>
-              <p>津贴：¥{{ item.subsidyAmount || '0.00' }}</p>
-            </div>
-          </div>
-        </div>
-        <div>
-          <p>共计：<span>¥{{ returnConsumeCheck('total') }}</span></p>
-          <p>津贴总消费：<span>¥{{ returnConsumeCheck('subsidyAmount') }}</span></p>
-          <p>现金总消费：<span>¥{{ returnConsumeCheck('realityAmount') }}</span></p>
-        </div>
-      </div>
-    </div>
+    <div id="rechargeLine" :style="{width: '900px', height: '300px'}"></div>
+    <div id="subsidyList" :style="{width: '900px', height: '300px'}"></div>
+    <div id="consumeLine" :style="{width: '900px', height: '300px'}"></div>
   </div>
 </template>
 
 <script>
 import { $http } from './../../../api/axios.js'
-import moment from 'moment'
 export default {
   name: 'systemReconciliation',
   data () {
     return {
-      startTime: '',
-      endTime: '',
-      startValue: null,
-      endValue: null,
-      endOpen: false,
-      systemReconciliationDetails: {}
+      year: '',
+      month: '',
+      SubsidyListDataList: [],
+      ConsumeDataList: [],
+      RechargeDataList: [],
+      yearList: []
     }
   },
   created () {
-    let date = new Date()
-    let year = date.getFullYear()
-    let month = date.getMonth() + 1
-    let day = (new Date(year, month, 0).getDate().toString()).length > 1 ? new Date(year, month, 0).getDate() : '0' + new Date(year, month, 0).getDate()
-    this.startTime = `${year}-${month.toString().length > 1 ? month : '0' + month}-01`
-    this.endTime = `${year}-${month.toString().length > 1 ? month : '0' + month}-${day}`
-    this.startValue = this.moment(`${year}-${month.toString().length > 1 ? month : '0' + month}-01`, 'YYYY-MM-DD')
-    this.endValue = this.moment(`${year}-${month.toString().length > 1 ? month : '0' + month}-${day}`, 'YYYY-MM-DD')
-    this.getAccountCheck()
-  },
-  methods: {
-    moment,
-    disabledStartDate (startValue) {
-      const endValue = this.endValue
-      if (!startValue || !endValue) {
-        return false
+    let thisYear = new Date().getFullYear()
+    for (let i = 2018; i <= thisYear; i++) {
+      this.yearList.push(i)
     }
-      return startValue.valueOf() > endValue.valueOf() || startValue.valueOf() >= moment().endOf('day').valueOf()
+    this.year = new Date().getFullYear()
+    this.month = new Date().getMonth() + 1
+    this.getStatisticsSubsidyData()
+    this.getStatisticsConsumeData()
+    this.getStatisticsRechargeData()
   },
-    disabledEndDate (endValue) {
-      const startValue = this.startValue
-      if (!endValue || !startValue) {
-        return false
-      }
-      return startValue.valueOf() > endValue.valueOf() || endValue.valueOf() > moment().endOf('day').valueOf()
+  mounted () {
+    // this.drawLine()
   },
-    handleStartOpenChange (open) {
-      if (!open) {
-        this.endOpen = true
+  methods: {
+    drawSubsidyListDataLine () {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('subsidyList'))
+      // 绘制图表
+      let xAxisData = []
+      let data1 = []
+      let data2 = []
+      this.SubsidyListDataList.map(item => {
+        xAxisData.push(item.abscissaKey)
+        debugger
+        if (item.sceneTypeTotalAmountMap !== null) {
+          data1.push(item.sceneTypeTotalAmountMap.MEAl)
+          data2.push(item.sceneTypeTotalAmountMap.TRAVEL)
+        } else {
+          data1.push('')
+          data2.push('')
         }
+      })
+      myChart.setOption({
+        title: { text: '发放津贴金额' },
+        tooltip: {},
+        xAxis: {
+          data: xAxisData
         },
-    handleEndOpenChange (open) {
-      this.endOpen = open
-    },
-    onChangeStartValue (date, dateString) {
-      this.startTime = dateString
+        yAxis: {},
+        series: [{
+          name: '餐补津贴',
+          type: 'bar',
+          data: data1
+        }, {
+          name: '交通津贴',
+          type: 'bar',
+          data: data2
+        }]
+      })
     },
-    onChangeEndValue (date, dateString) {
-      this.endTime = dateString
+    drawRechargeListDataLine () {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('rechargeLine'))
+      // 绘制图表
+      let xAxisData = []
+      let data1 = []
+      let data2 = []
+      this.SubsidyListDataList.map(item => {
+        xAxisData.push(item.abscissaKey)
+        data1.push(item.internalRechargeAmount)
+        data2.push(item.externalRechargeAmount)
+      })
+      myChart.setOption({
+        title: { text: '充值金额' },
+        tooltip: {},
+        xAxis: {
+          data: xAxisData
         },
-    returnConsumeCheck (str) {
-      let totalNum = 0
-      if (this.systemReconciliationDetails.consumeCheck) {
-        if (str === 'realityAmount') {
-          this.systemReconciliationDetails.consumeCheck.map(item => {
-            let realityAmountNum = item.realityAmount ? item.realityAmount : 0
-            totalNum = totalNum + parseFloat(realityAmountNum)
+        yAxis: {},
+        series: [{
+          name: '支付宝充值',
+          type: 'bar',
+          data: data1
+        }, {
+          name: '现金充值',
+          type: 'bar',
+          data: data2
+        }]
       })
-          return totalNum.toFixed(2)
-        } else if (str === 'subsidyAmount') {
-          this.systemReconciliationDetails.consumeCheck.map(item => {
-            let subsidyAmountNum = item.subsidyAmount ? item.subsidyAmount : 0
-            totalNum = totalNum + parseFloat(subsidyAmountNum)
+    },
+    drawConsumeListDataLine () {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('consumeLine'))
+      // 绘制图表
+      let xAxisData = []
+      let data1 = []
+      let data2 = []
+      let data3 = []
+      this.SubsidyListDataList.map(item => {
+        xAxisData.push(item.abscissaKey)
+        data1.push(item.internalConsumeRealityAmount)
+        data2.push(item.internalConsumeSubsidyAmount)
+        data3.push(item.externalConsumeRealityAmount)
       })
-          return totalNum.toFixed(2)
-        } else if (str === 'total') {
-          this.systemReconciliationDetails.consumeCheck.map(item => {
-            let orderAmountNum = item.orderAmount ? item.orderAmount : 0
-            totalNum = totalNum + parseFloat(orderAmountNum)
+      // internalConsumeRealityAmount 员工现金
+      // internalConsumeSubsidyAmount 津贴
+      // externalConsumeRealityAmount 访客消费
+      myChart.setOption({
+        title: { text: '消费金额' },
+        tooltip: {},
+        xAxis: {
+          data: xAxisData
+        },
+        yAxis: {},
+        series: [{
+          name: '员工现金消费',
+          type: 'bar',
+          data: data1
+        }, {
+          name: '员工津贴消费',
+          type: 'bar',
+          data: data2
+        }, {
+          name: '访客消费',
+          type: 'bar',
+          data: data3
+        }]
       })
-          return totalNum.toFixed(2)
+    },
+    handleChange (value) {
+      console.log(`selected ${value}`)
+    },
+    getStatisticsSubsidyData () {
+      let that = this
+      let SubsidyListData = {
+        year: this.year,
+        month: this.month
       }
+      $http.get(`/mingpay/v1/isv/account/statisticsSubsidy`, SubsidyListData).then((res) => {
+        if (res.data.resultCode === 0) {
+          that.SubsidyListDataList = res.data.data
+          that.drawSubsidyListDataLine()
         } else {
-        return '0.00'
+          this.$message.error(res.data.message)
         }
-    },
-    returnSubsidyCheckTotal () {
-      let totalNum = 0
-      if (this.systemReconciliationDetails.subsidyCheck) {
-        this.systemReconciliationDetails.subsidyCheck.map(item => {
-          let amountNum = item.amount ? item.amount : 0
-          totalNum = totalNum + parseFloat(amountNum)
       })
-        return totalNum.toFixed(2)
+    },
+    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 {
-        return '0.00'
+          this.$message.error(res.data.message)
         }
+      })
     },
-    returnRechargeAmount () {
-      let internalRechargeAmount = this.systemReconciliationDetails.internalRechargeAmount || 0
-      let externalRechargeAmount = this.systemReconciliationDetails.externalRechargeAmount || 0
-      let totalNum = parseFloat(internalRechargeAmount) + parseFloat(externalRechargeAmount)
-      return totalNum.toFixed(2)
-    },
-    getAccountCheck () {
-      let SubsidyListData = {
-        startTime: this.startTime,
-        endTime: this.endTime
+    getStatisticsRechargeData () {
+      let that = this
+      let RechargeData = {
+        year: this.year,
+        month: this.month
       }
-      $http.get(`/mingpay/v1/isv/account/accountCheck`, SubsidyListData).then((res) => {
+      $http.get(`/mingpay/v1/isv/account/statisticsRecharge`, RechargeData).then((res) => {
         console.log(res.data.data)
         if (res.data.resultCode === 0) {
-          this.systemReconciliationDetails = res.data.data
+          that.RechargeDataList = res.data.data
+          that.drawRechargeListDataLine()
         } else {
           this.$message.error(res.data.message)
         }

src/main.js

@@ -6,6 +6,7 @@ import { Upload, Menu, Layout, Checkbox, Breadcrumb, Popover, Icon, Button, Date
 import 'ant-design-vue/dist/antd.css'
 import { config } from './api/config'
 import './assets/css/global.css'
+import echarts from 'echarts'
 
 Vue.use(Layout)
 Vue.use(Upload)
@@ -32,8 +33,10 @@ Vue.use(Input.TextArea)
 Vue.use(message)
 Vue.use(Pagination)
 Vue.config.productionTip = false
+
 Vue.prototype.$confirm = Modal.confirm
 Vue.prototype.$message = message
+Vue.prototype.$echarts = echarts
 
 router.beforeEach(function (to, from, next) {
   // 项目初始化进行鉴权