选择不同区块查询新数据

src/containers/Dashboard/Dashboard.js

@@ -7,6 +7,8 @@ import {
 const GET_CONSUME_DATA = 'GET_CONSUME_DATA';
 const GET_REPORT_DATA = 'GET_REPORT_DATA';
 const GET_TITLE_DATA = 'GET_TITLE_DATA';
+const GET_PERCENT_DATA = 'GET_PERCENT_DATA';
+const GET_EUIPMENT_DATA = 'GET_EUIPMENT_DATA';
 
 const state = () => ({
   consume: {
@@ -48,6 +50,14 @@ const actions = {
       },
     }).then(res => {
       let list = res.data;
+      if (entity && entity.updatePercentList) {
+        commit(GET_PERCENT_DATA, list);
+        return;
+      }
+      if (entity && entity.updateEuipmentList) {
+        commit(GET_EUIPMENT_DATA, list);
+        return;
+      }
       commit(GET_CONSUME_DATA, list);
     });
   },
@@ -75,6 +85,12 @@ const mutations = {
     state.consume.list = data.list;
     state.consume.percentList = data.percentList;
   },
+  [GET_PERCENT_DATA]: (state, data) => {
+    state.consume.percentList = data.percentList;
+  },
+  [GET_EUIPMENT_DATA]: (state, data) => {
+    state.consume.consumeHardVos = data.consumeHardVos;
+  },
   [GET_REPORT_DATA]: (state, data) => {
     state.report.year = data.year;
     state.report.month = data.month;

src/containers/Dashboard/Dashboard.vue

@@ -67,7 +67,10 @@
             />
           </search-item>
         </div>
-        <CampusRank :data="campusRankList" />
+        <CampusRank
+          :data="campusRankList"
+          :changeCampusHandle="changeCampusHandle"
+        />
       </div>
       <div class="Dashboard-DataCard">
         <div class="Dashboard-title">
@@ -77,7 +80,10 @@
           <div class="Dashboard-title-text">各服务消费占比</div>
           <div class="Dashboard-title-top">TOP1</div>
         </div>
-        <SeviceRatio :data="seviceRatioList" />
+        <SeviceRatio
+          :data="seviceRatioList"
+          :changeServiceHandle="changeServiceHandle"
+        />
       </div>
       <div class="Dashboard-DataCard">
         <div class="Dashboard-title">
@@ -207,6 +213,30 @@ export default {
         });
       }
     },
+    changeCampusHandle(data) {
+      let operateId = this.operatorFilters.operateId;
+      let year = this.operatorFilters.year;
+      let month = this.operatorFilters.month;
+      this.fetchConsumeList({
+        year: year ? year : null,
+        month: month ? month : null,
+        operateId: operateId ? operateId : null,
+        areaId: data.areaId,
+        updatePercentList: true,
+      });
+    },
+    changeServiceHandle(data) {
+      let operateId = this.operatorFilters.operateId;
+      let year = this.operatorFilters.year;
+      let month = this.operatorFilters.month;
+      this.fetchConsumeList({
+        year: year ? year : null,
+        month: month ? month : null,
+        operateId: operateId ? operateId : null,
+        serviceId: data.serviceId,
+        updateEuipmentList: true,
+      });
+    },
   },
 };
 </script>

src/containers/Dashboard/components/CampusRank.vue

@@ -11,6 +11,11 @@ import chartMixin from '../chartMixin';
 export default {
   name: 'CampusRank',
   mixins: [chartMixin],
+  props: {
+    changeCampusHandle: {
+      type: Function,
+    },
+  },
   data() {
     let totle = this.data.reduce((count, item) => count + item.count, 0);
     return {
@@ -19,6 +24,7 @@ export default {
       totle: totle,
       percentDom: null,
       areaNameDom: null,
+      SelectedDataIndex: null,
     };
   },
   mounted() {
@@ -116,19 +122,28 @@ export default {
         alignY: 'middle',
       });
       this.chart.render();
-      this.chart.on('plotclick', this.clickHandle);
+      this.chart.on('interval:click', this.clickHandle);
     },
     updateData() {
       if (this.data.length) {
         this.totle = this.data.reduce((count, item) => count + item.count, 0);
+        let data = this.SelectedDataIndex;
+        if (data) {
+          this.changeSelected(data);
+          this.chartGeom.setSelected(data);
+        } else {
           this.chartGeom.setSelected(this.data[0]);
           this.changeSelected(this.data[0]);
+          this.SelectedDataIndex = this.data[0];
+        }
       }
     },
     clickHandle(ev) {
-      if (ev.data) {
       let data = ev.data._origin;
+      if (this.SelectedDataIndex.areaId !== data.areaId) {
+        this.SelectedDataIndex = data;
         this.changeSelected(data);
+        this.changeCampusHandle(data);
       }
     },
     changeSelected(data) {

src/containers/Dashboard/components/SeviceRatio.vue

@@ -12,12 +12,18 @@ import chartMixin from '../chartMixin';
 export default {
   name: 'SeviceRatio',
   mixins: [chartMixin],
+  props: {
+    changeServiceHandle: {
+      type: Function,
+    },
+  },
   data() {
     let totle = this.data.reduce((count, item) => count + item.count, 0);
     return {
       totle: totle,
       percentDom: null,
       serviceNameDom: null,
+      SelectedDataIndex: null,
     };
   },
   mounted() {
@@ -102,14 +108,23 @@ export default {
     updateData() {
       if (this.data.length) {
         this.totle = this.data.reduce((count, item) => count + item.count, 0);
+        let data = this.SelectedDataIndex;
+        if (data) {
+          this.changeSelected(data);
+          this.chartGeom.setSelected(data);
+        } else {
           this.chartGeom.setSelected(this.data[0]);
           this.changeSelected(this.data[0]);
+          this.SelectedDataIndex = this.data[0];
+        }
       }
     },
     clickHandle(ev) {
-      if (ev.data) {
+      let data = ev.data._origin;
+      if (this.SelectedDataIndex.serviceId !== data.serviceId) {
         let data = ev.data._origin;
         this.changeSelected(data);
+        this.changeServiceHandle(data);
       }
     },
     changeSelected(data) {