图表津贴修改

src/components/pages/PaymentManagement/SystemReconciliation.vue

 <template>
   <div class="SystemReconciliation">
     <div class="searchBox">
-      <a-select allowClear placeholder="请选择年" v-model="year" style="width: 120px" @change="handleChange">
+      <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" @change="handleChange">
+      <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="title">账单汇总</div>
-    <div style="width: 100%;overflow-x:scroll">
+    <div style="width: 100%;">
       <div id="rechargeLine" :style="{width: '100%', height: '300px'}"></div>
     </div>
-    <div style="width: 100%;overflow-x:scroll">
+    <div style="width: 100%;scroll;position: relative;">
       <div id="subsidyList" :style="{width: '100%', height: '300px'}"></div>
+      <a-select allowClear placeholder="津贴类型" v-model="sceneType" style="width: 120px;position: absolute;right: 5px;top: 0;" @change="changeSceneType">
+        <a-select-option value="MEAL">餐补</a-select-option>
+        <a-select-option value="TRAVEL">交通补贴</a-select-option>
+      </a-select>
     </div>
     <div style="width: 100%;overflow-x:scroll">
       <div id="consumeLine" :style="{width: '100%', height: '300px'}"></div>
@@ -34,7 +38,8 @@ export default {
       ConsumeDataList: [],
       RechargeDataList: [],
       yearList: [],
-      lineWidth: []
+      lineWidth: [],
+      sceneType: 'MEAL'
     }
   },
   created () {
@@ -64,17 +69,10 @@ export default {
       let myChart = this.$echarts.init(document.getElementById('subsidyList'))
       // 绘制图表
       let xAxisData = []
-      let data1 = []
-      let data2 = []
+      let data = []
       this.SubsidyListDataList.map(item => {
         xAxisData.push(parseInt(item.abscissaKey))
-        if (item.sceneTypeTotalAmountMap !== null) {
-          data1.push(item.sceneTypeTotalAmountMap.MEAl ? item.sceneTypeTotalAmountMap.MEAl : 0)
-          data2.push(item.sceneTypeTotalAmountMap.TRAVEL ? item.sceneTypeTotalAmountMap.TRAVEL : 0)
-        } else {
-          data1.push(0)
-          data2.push(0)
-        }
+        data.push(item.subsidyTotalAmount)
       })
       myChart.setOption({
         title: { text: '发放津贴金额' },
@@ -85,20 +83,16 @@ export default {
           }
         },
         legend: {
-          data: ['餐补津贴', '交通津贴']
+          data: [`${this.sceneType === 'MEAL' ? '餐补' : '交通补贴'}`]
         },
         xAxis: {
           data: xAxisData
         },
         yAxis: {},
         series: [{
-          name: '餐补津贴',
+          name: `${this.sceneType === 'MEAL' ? '餐补' : '交通补贴'}`,
           type: 'bar',
-          data: data1
-        }, {
-          name: '交通津贴',
-          type: 'bar',
-          data: data2
+          data: data
         }]
       })
     },
@@ -190,14 +184,19 @@ export default {
         }]
       })
     },
-    handleChange (value) {
-      console.log(`selected ${value}`)
+    // handleChange (value) {
+    //   console.log(`selected ${value}`)
+    // },
+    changeSceneType (value) {
+      this.sceneType = value
+      this.getStatisticsSubsidyData()
     },
     getStatisticsSubsidyData () {
       let that = this
       let SubsidyListData = {
         year: this.year,
-        month: this.month
+        month: this.month,
+        sceneType: this.sceneType
       }
       $http.get(`/mingpay/v1/isv/account/statisticsSubsidy`, SubsidyListData).then((res) => {
         if (res.data.resultCode === 0) {