模块化数据首页

src/containers/Dashboard/CampusRank/CampusRank.vue

+<template>
+  <div class="Dashboard-DataCard">
+    <div class="Dashboard-SearchBar">
+      <search-item label="运营商">
+        <operator-select
+          v-model.trim="operatorFilters.operatorId"
+          @input="changeConsumeOperatorHandle"
+        />
+      </search-item>
+      <el-radio-group class="Dashboard-Radio">
+        <el-radio class="Dashboard-Radio-item">本日</el-radio>
+        <el-radio class="Dashboard-Radio-item">本月</el-radio>
+        <el-radio class="Dashboard-Radio-item">本年</el-radio>
+      </el-radio-group>
+    </div>
+    <CampusRankChart
+      :data="campusRankList"
+      :changeCampusHandle="changeCampusHandle"
+    />
+  </div>
+</template>
+
+<script>
+import CampusRankChart from './CampusRankChart';
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  name: 'CampusRank',
+  components: { CampusRankChart },
+  data() {
+    return {
+      operatorFilters: {
+        operatorId: undefined,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters('Dashboard', ['campusRankList']),
+  },
+  methods: {
+    ...mapActions('Dashboard', ['fetchConsumeList']),
+    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,
+      });
+    },
+    changeConsumeOperatorHandle(val) {
+      if (val && this.operatorFilters.year) {
+        let month = this.operatorFilters.month;
+        this.fetchConsumeList({
+          year: this.operatorFilters.year,
+          month: month ? month : null,
+          operateId: val,
+        });
+      }
+    },
+  },
+};
+</script>

src/containers/Dashboard/components/CampusRank.vue → src/containers/Dashboard/CampusRank/CampusRankChart.vue

 <template>
   <div class="CampusRank">
     <div id="CampusRank"></div>
-    <div class="CampusRank-title">截至到{{ today }}，前十校区消费汇总数据</div>
   </div>
 </template>
 
@@ -167,6 +166,7 @@ export default {
   .CampusRank-title {
     font-size: 16px;
     text-align: center;
+    padding-bottom: 12px;
   }
 }
 </style>

src/containers/Dashboard/CustomerConsumption/CustomerConsumption.vue

+<template>
+  <div class="Dashboard-DataCard">
+    <div class="Dashboard-SearchBar">
+      <search-item label="运营商">
+        <operator-select v-model.trim="customerFilter.operatorId" />
+      </search-item>
+      <search-item label="区域">
+        <area-select
+          v-model.trim="customerFilter.areaId"
+          type="user"
+        />
+      </search-item>
+      <el-radio-group class="Dashboard-Radio">
+        <el-radio class="Dashboard-Radio-item">本日</el-radio>
+        <el-radio class="Dashboard-Radio-item">本月</el-radio>
+        <el-radio class="Dashboard-Radio-item">本年</el-radio>
+      </el-radio-group>
+    </div>
+    <div class="Dashboard-title">会员消费数据</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomerConsumption',
+  data() {
+    return {
+      customerFilter: {},
+    };
+  },
+};
+</script>

src/containers/Dashboard/CustomerConsumption/chart.vue

+<template>
+  <div id='ActiveUserByMonth'></div>
+</template>
+
+<script>
+import G2 from '@antv/g2';
+import chartMixin from '../chartMixin';
+
+export default {
+  name: '',
+};
+</script>

src/containers/Dashboard/CustomerFeedback/CustomerFeedback.vue

+<template>
+  <div
+    class="CustomerFeedback"
+    @mousewheel.stop=""
+  >
+    <div class="Dashboard-SearchBar">
+      <div class="CustomerFeedbackTitle">
+        <span class="CustomerFeedback-icon"><img src="@/assets/images/dashboard/feedback.jpg"></span>
+        <span class="CustomerFeedback-text">反馈未处理-</span>
+        <span class="red">49条</span>
+      </div>
+    </div>
+    <div class="CustomerFeedback-List">
+      <div
+        class="CustomerFeedback-Item"
+        v-for="(item, index) in 10"
+        :key="index"
+      >
+        <span class="CustomerFeedback-ItemNum">12条</span>
+        <span class="CustomerFeedback-ItemName">成都师范学院</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomerFeedback',
+};
+</script>
+
+<style lang="scss">
+@import '@/assets/styles/variables.scss';
+
+.CustomerFeedback {
+  display: flex;
+  flex-direction: column;
+  .CustomerFeedbackTitle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    line-height: 34px;
+    font-size: 18px;
+    .CustomerFeedback-icon {
+      width: 27px;
+      height: 27px;
+    }
+    .CustomerFeedback-text {
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    .red {
+      color: #ff0000;
+    }
+  }
+  .CustomerFeedback-List {
+    flex: 1;
+    overflow-y: auto;
+  }
+  .CustomerFeedback-Item {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    font-size: 18px;
+    .CustomerFeedback-ItemNum {
+      width: 70px;
+      margin-right: 22px;
+      text-align: right;
+      color: #ff0000;
+    }
+    .CustomerFeedback-ItemName {
+      flex: 1;
+      padding-right: 20px;
+      line-height: 28px;
+    }
+  }
+}
+@media screen and (max-width: $bigScreenWidth) {
+  .CustomerFeedback {
+    .CustomerFeedback-Item {
+      height: 40px;
+      font-size: 14px;
+      .CustomerFeedback-ItemNum {
+        width: 70px;
+        margin-right: 22px;
+      }
+      .CustomerFeedback-ItemName {
+        padding-right: 20px;
+        line-height: 28px;
+      }
+    }
+  }
+}
+</style>
+

src/containers/Dashboard/CustomerFeedback/chart.vue

+<template>
+  <div id='ActiveUserByMonth'></div>
+</template>
+
+<script>
+import G2 from '@antv/g2';
+import chartMixin from '../chartMixin';
+
+export default {
+  name: '',
+};
+</script>

src/containers/Dashboard/CustomerRechange/CustomerRechange.vue

+<template>
+  <div class="Dashboard-DataCard">
+    <div class="Dashboard-SearchBar">
+      <search-item label="运营商">
+        <operator-select v-model.trim="customerFilter.operatorId" />
+      </search-item>
+      <el-radio-group class="Dashboard-Radio">
+        <el-radio class="Dashboard-Radio-item">本日</el-radio>
+        <el-radio class="Dashboard-Radio-item">本月</el-radio>
+        <el-radio class="Dashboard-Radio-item">本年</el-radio>
+      </el-radio-group>
+    </div>
+    <div class="Dashboard-title">会员充值数据</div>
+    <Chart />
+  </div>
+</template>
+
+<script>
+import Chart from './chart';
+
+export default {
+  name: 'CustomerRechange',
+  components: {
+    Chart,
+  },
+  data() {
+    return {
+      customerFilter: {},
+    };
+  },
+};
+</script>

src/containers/Dashboard/CustomerRechange/chart.vue

+<template>
+  <div id='CustomerRechangeChart'></div>
+</template>
+
+<script>
+import G2 from '@antv/g2';
+import chartMixin from '../chartMixin';
+
+export default {
+  name: 'CustomerRechangeChart',
+  mixins: [chartMixin],
+  data() {
+    let totle = this.data.reduce((count, item) => count + item.count, 0);
+    return {
+      totle: totle,
+      percentDom: null,
+      serviceNameDom: null,
+      SelectedDataIndex: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      this.totle = this.data.reduce((count, item) => count + item.count, 0);
+      this.chart = new G2.Chart({
+        container: 'CustomerRechangeChart',
+        forceFit: true,
+        height: this.height,
+        padding: [0, 130, 0, 0],
+      });
+      this.chart.source(this.data);
+      this.chart.coord('theta', {
+        radius: 0.75,
+        innerRadius: 0.6,
+      });
+      this.chart.tooltip(false);
+      // 图例
+      this.chart.legend({
+        position: 'right-center',
+        marker: 'square',
+        useHtml: true,
+        containerTpl: `
+         <div class="g2-legend">
+          <ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>
+         </div>`,
+        itemTpl: (value, color, checked, index) => {
+          const obj = this.data[index];
+          checked = checked ? 'checked' : 'unChecked';
+          return `
+            <li
+              class="g2-legend-list-item item-${index} ${checked}"
+              data-value="${value}"
+              data-color=${color}
+              style="cursor: pointer;font-size:14px;"
+            >
+              <i
+                class="g2-legend-marker"
+                style="display:inline-block;margin-right:10px;background-color:${color};"
+              ></i>
+              <span class="g2-legend-text">${value}： </span>
+              <span>${obj.count}</span>
+            </li>
+            `;
+        },
+        'g2-legend': {
+          width: '130px',
+          // left: '-20px',
+        },
+        'g2-legend-list-item': {
+          height: '22px',
+          color: '#333',
+        },
+        'g2-legend-marker': {
+          width: '10px',
+          height: '5px',
+          borderRadius: 'none',
+        },
+      });
+      // 坐标系及着色
+      this.chartGeom = this.chart
+        .intervalStack()
+        .position('count')
+        .color('serviceName', ['#4e82fb', '#fb774e', '#ffc934', '#41bf52']);
+
+      // 辅助元素
+      this.chart.guide().html({
+        position: ['50%', '50%'],
+        html: `<div style="color:#333;font-size:20px;text-align: center;">
+            <span class="SeviceRatio-percent">0.00</span>%<br>
+            <span class="SeviceRatio-serviceName" style="font-size:16px;"></span>
+        </div>`,
+        alignX: 'middle',
+        alignY: 'middle',
+      });
+      this.chart.render();
+      // this.chart.on('interval:click', this.clickHandle);
+    },
+  },
+};
+</script>

src/containers/Dashboard/CustomerRegister/CustomerRegister.vue

+<template>
+  <div class="Dashboard-Row Dashboard-DataCard">
+    <div class="Dashboard-SearchBar">
+      <search-item label="年份">
+        <el-date-picker
+          v-model.trim="campusFilters.year"
+          @change="changeReportYearHandle"
+          type="year"
+          value-format="yyyy"
+          placeholder="请选择"
+        >
+        </el-date-picker>
+      </search-item>
+      <search-item label="校区">
+        <area-select
+          v-model.trim="campusFilters.areaId"
+          @change="changeReportAreaHandle"
+          type="user"
+        />
+      </search-item>
+    </div>
+    <div class="Dashboard-CampusData">
+      <div class="Dashboard-CampusItem">
+        <div class="Dashboard-title">{{ reportYear }}年每月注册数据</div>
+        <RegisterByMonth :data="registePerMonth"></RegisterByMonth>
+      </div>
+      <div class="Dashboard-CampusItem">
+        <div class="Dashboard-title">
+          {{ reportYear }}年{{ reportMonth }}月注册数据
+        </div>
+        <RegisterByDay :data="registePerDay" />
+      </div>
+      <div class="Dashboard-CampusItem">
+        <div class="Dashboard-title">{{ reportYear }}年每月活跃数据</div>
+        <ActiveUserByMonth :data="activeUser" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import RegisterByMonth from './components/RegisterByMonth';
+import RegisterByDay from './components/RegisterByDay';
+import ActiveUserByMonth from './components/ActiveUserByMonth';
+
+export default {
+  name: 'CustomerRegister',
+  components: {
+    RegisterByMonth,
+    RegisterByDay,
+    ActiveUserByMonth,
+  },
+  data() {
+    return {
+      campusFilters: {},
+    };
+  },
+  computed: {
+    ...mapGetters('Dashboard', [
+      'reportYear',
+      'reportMonth',
+      'registePerDay',
+      'registePerMonth',
+      'activeUser',
+    ]),
+  },
+  methods: {
+    ...mapActions('Dashboard', ['fetchReportList']),
+    changeReportYearHandle(val) {
+      if (val) {
+        let areaId = this.campusFilters.areaId;
+        this.fetchReportList({
+          year: val,
+          areaId: areaId ? areaId : null,
+        });
+      }
+    },
+    changeReportAreaHandle(val) {
+      if (val && this.campusFilters.year) {
+        this.fetchReportList({
+          year: this.campusFilters.year,
+          areaId: val,
+        });
+      }
+    },
+  },
+};
+</script>

src/containers/Dashboard/components/ActiveUserByMonth.vue → src/containers/Dashboard/CustomerRegister/components/ActiveUserByMonth.vue

@@ -4,7 +4,7 @@
 
 <script>
 import G2 from '@antv/g2';
-import chartMixin from '../chartMixin';
+import chartMixin from '../../chartMixin';
 
 export default {
   name: 'ActiveUserByMonth',

src/containers/Dashboard/components/RegisterByDay.vue → src/containers/Dashboard/CustomerRegister/components/RegisterByDay.vue

@@ -4,7 +4,7 @@
 
 <script>
 import G2 from '@antv/g2';
-import chartMixin from '../chartMixin';
+import chartMixin from '../../chartMixin';
 
 export default {
   name: 'RegisterByDay',

src/containers/Dashboard/components/RegisterByMonth.vue → src/containers/Dashboard/CustomerRegister/components/RegisterByMonth.vue

@@ -3,7 +3,7 @@
 </template>
 <script>
 import G2 from '@antv/g2';
-import chartMixin from '../chartMixin';
+import chartMixin from '../../chartMixin';
 
 export default {
   name: 'RegisterByMonth',

src/containers/Dashboard/EquipmentList/EquipmentList.vue

+<template>
+  <div class="Dashboard-DataCard">
+    <div class="Dashboard-title">
+      <div class="Dashboard-title-icon equipment">
+        <img src="@/assets/images/dashboard/icon_paiming@2x.png" />
+      </div>
+      <div class="Dashboard-title-text">各设备消费排名</div>
+      <el-radio-group v-model="showTopFive">
+        <el-radio-button :label="true">前五名</el-radio-button>
+        <el-radio-button :label="false">后五名</el-radio-button>
+      </el-radio-group>
+    </div>
+    <EquipmentListChart :data="consumeHardVos" />
+  </div>
+</template>
+
+<script>
+import EquipmentListChart from './EquipmentListChart';
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  name: 'EquipmentList',
+  components: {
+    EquipmentListChart,
+  },
+  data() {
+    return {
+      showTopFive: true,
+    };
+  },
+  computed: {
+    ...mapGetters('Dashboard', ['consumeHardVos']),
+  },
+  methods: {
+    ...mapActions('Dashboard', ['fetchConsumeList']),
+  },
+};
+</script>

src/containers/Dashboard/SeviceRatio/SeviceRatio.vue

+<template>
+  <div class="Dashboard-DataCard">
+    <div class="Dashboard-title">
+      <div class="Dashboard-title-icon service">
+        <img src="@/assets/images/dashboard/icon_zhanbi@2x.png" />
+      </div>
+      <div class="Dashboard-title-text">各服务消费占比</div>
+      <div class="Dashboard-title-top">TOP1</div>
+    </div>
+    <SeviceRatioChart
+      :data="seviceRatioList"
+      :changeServiceHandle="changeServiceHandle"
+    />
+  </div>
+</template>
+
+<script>
+import SeviceRatioChart from './SeviceRatioChart';
+import { mapActions, mapGetters } from 'vuex';
+export default {
+  name: 'SeviceRatio',
+  components: { SeviceRatioChart },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters('Dashboard', ['seviceRatioList']),
+  },
+  methods: {
+    ...mapActions('Dashboard', ['fetchConsumeList']),
+    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/SeviceRatio.vue → src/containers/Dashboard/SeviceRatio/SeviceRatioChart.vue

@@ -103,7 +103,7 @@ 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) {
@@ -148,5 +148,6 @@ export default {
 .SeviceRatio-title {
   font-size: 16px;
   text-align: center;
+  padding-bottom: 12px;
 }
 </style>

src/containers/Dashboard/chartMixin.js

@@ -21,7 +21,7 @@ export default {
     const innerWidth = window.innerWidth;
     const innerHeight = window.innerHeight;
     if (innerWidth < 1600) {
-      this.height = (innerHeight - 250) / 2;
+      this.height = (innerHeight - 270) / 2;
     }
     this.initData();
   },