修改数据首页样式以及添加数据首页菜单

.env

@@ -3,6 +3,7 @@ VUE_APP_LIB_BASE_URL=/systemManageShell/
 VUE_APP_CUSTOMER_MENU_CODE=0001
 VUE_APP_BASE_MENU_CODE=0002
 VUE_APP_SYSTEM_MENU_CODE=0003
+VUE_APP_DASHBOARD_CODE=0079
 VUE_APP_WHITE_LIST=/login,/404,/401
 VUE_APP_LIB_MANAGER=http://ex-dev-dcxy-static.168cad.top
 VUE_APP_SYSTEM_SERVER_URL=http://ex-dev-dcxy-system-manage.168cad.top

src/containers/Dashboard/CustomerRecharge/CustomerRecharge.vue

@@ -30,7 +30,7 @@
         >本年</el-radio>
       </el-radio-group>
     </div>
-    <div class="Dashboard-title">充值视图
+    <div class="Dashboard-title">储值视图
       <div class="CustomerRechargeChart-tip">
         <span
           class="CustomerRecharge-tooltip"

src/containers/Dashboard/CustomerRecharge/chart.vue

@@ -5,6 +5,12 @@
       :style="`height: ${height}px;width: ${width?width+'px':'auto'}`"
     ></div>
     <!-- <div id='CustomerRechangeSlider'></div> -->
+    <CustomerRechangeSlider
+      class="CustomerRechangeSlider"
+      :data="data"
+      :span="4"
+      :onChange="wheelHandle"
+    />
   </div>
 </template>
 
@@ -14,6 +20,7 @@ import Slider from '@antv/g2-plugin-slider';
 import chartMixin from '../chartMixin';
 import DataSet from '@antv/data-set';
 import _ from 'lodash';
+import CustomerRechangeSlider from './slider';
 
 const Shape = G2.Shape;
 const Util = G2.Util;
@@ -68,6 +75,7 @@ Shape.registerShape('interval', 'right', {
 
 export default {
   name: 'CustomerRechargeChart',
+  components: { CustomerRechangeSlider },
   mixins: [chartMixin],
   props: {
     rechargeCount: {
@@ -103,31 +111,31 @@ export default {
       });
       const dv = this.ds.createView().source(this.data);
       this.dv = dv;
-      // dv.transform({
-      //   type: 'filter',
-      //   callback: obj => {
-      //     if (
-      //       _.isNil(this.ds.state.startRadio) ||
-      //       _.isNil(this.ds.state.endRadio)
-      //     ) {
-      //       return true;
-      //     }
-      //     const dataIndex = _.findIndex(this.data, {
-      //       areaName: obj.areaName,
-      //     });
-      //     const currentRadio = dataIndex / this.data.length;
-      //     return (
-      //       currentRadio >= this.ds.state.startRadio &&
-      //       currentRadio <= this.ds.state.endRadio
-      //     );
-      //   },
-      // });
+      dv.transform({
+        type: 'filter',
+        callback: obj => {
+          if (
+            _.isNil(this.ds.state.startRadio) ||
+            _.isNil(this.ds.state.endRadio)
+          ) {
+            return true;
+          }
+          const dataIndex = _.findIndex(this.data, {
+            areaName: obj.areaName,
+          });
+          const currentRadio = dataIndex / this.data.length;
+          return (
+            currentRadio >= this.ds.state.startRadio &&
+            currentRadio <= this.ds.state.endRadio
+          );
+        },
+      });
 
       this.chart = new G2.Chart({
         container: 'CustomerRechargeChart',
         forceFit: true,
         height: this.height,
-        padding: [30, 50, 20, 120],
+        padding: [30, 70, 20, 120],
       });
 
       this.chart.source(dv, {
@@ -169,6 +177,23 @@ export default {
         .size(18);
 
       this.chart.legend(false);
+
+      this.chart.guide().text({
+        top: true,
+        position: ['100%', '0%'],
+        content: '(人)',
+        offsetX: 10,
+        offsetY: -8,
+      });
+
+      this.chart.guide().text({
+        top: true,
+        position: ['100%', '100%'],
+        content: '(元)',
+        offsetX: 10,
+        offsetY: 8,
+      });
+
       this.chart.render();
 
       // this.initSlider();
@@ -215,6 +240,7 @@ export default {
       let dom = this.sliderDom;
       dom.innerHTML = '';
       const arrLength = this.data.length;
+
       if (arrLength) {
         // let spanNum = 4 / arrLength;
         this.slider = new Slider({
@@ -247,10 +273,12 @@ export default {
       if (this.chart) {
         const arrLength = this.data.length;
         let spanNum = 4 / arrLength;
-        this.ds.setState('endRadio', spanNum);
+
+        this.ds.setState('startRadio', Math.abs(1 - spanNum));
+        this.ds.setState('endRadio', 1);
         this.dv.source(this.data);
-        let height = this.data.length * 50;
-        this.chart.changeHeight(height);
+        // let height = this.data.length * 50;
+        // this.chart.changeHeight(height);
         // this.updateSlider();
         this.updateData();
       } else {
@@ -258,6 +286,14 @@ export default {
         // this.initSlider();
       }
     },
+    wheelHandle({ startRadio, endRadio }) {
+      const tStartRadio = Math.abs(1 - endRadio);
+      const sEndRadio = Math.abs(1 - startRadio);
+      console.log(tStartRadio, sEndRadio);
+
+      this.ds.setState('startRadio', tStartRadio);
+      this.ds.setState('endRadio', sEndRadio);
+    },
   },
 };
 </script>
@@ -267,8 +303,16 @@ export default {
   position: relative;
   #CustomerRechargeChart {
     width: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
+    // overflow-x: hidden;
+    // overflow-y: auto;
+  }
+  .CustomerRechangeSlider {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 28px;
+    height: 100%;
+    background-color: #eee;
   }
   #CustomerRechangeSlider {
     margin-left: -30px;

src/containers/Dashboard/CustomerRecharge/slider.vue

+<template>
+  <div class="ks-Slider">
+    <div
+      class="ks-Slider-prev"
+      @click="clickPrev"
+    >
+
+      <img
+        v-if="pageNum === 1 || total === 0"
+        src="@/assets/images/dashboard/up_down_grey.png"
+      />
+      <img
+        v-else
+        src="@/assets/images/dashboard/up_down_light.png"
+      >
+    </div>
+    <div class="ks-Slider-inner"></div>
+    <div
+      class="ks-Slider-next"
+      @click="clickNext"
+    >
+      <img
+        v-if="pageNum === pages || total === 0"
+        src="@/assets/images/dashboard/up_down_grey.png"
+      />
+      <img
+        v-else
+        src="@/assets/images/dashboard/up_down_light.png"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomerRechangeSlider',
+  props: {
+    data: {
+      type: Array,
+    },
+    span: {
+      type: Number,
+      default: 4,
+    },
+    onChange: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      pageNum: 1,
+      pageSize: this.span,
+      pages: 0,
+      total: 0,
+      startRadio: 0,
+      endRadio: 1,
+    };
+  },
+  watch: {
+    data() {
+      this.refreshSlider();
+    },
+  },
+  mounted() {},
+  methods: {
+    refreshSlider() {
+      let total = this.data.length;
+      this.total = total;
+      if (total) {
+        this.pages = Math.ceil(total / this.pageSize);
+        this.pageNum = 1;
+        this.startRadio = 0;
+        this.endRadio = this.pageSize / total;
+      } else {
+        this.pageNum = 1;
+        this.pages = 0;
+        this.startRadio = 0;
+        this.endRadio = 1;
+      }
+    },
+    clickPrev() {
+      if (this.pageNum === 1) return;
+      let nextNum = this.pageNum - 1;
+      const pStartRadio = this.startRadio;
+      let endRadio = pStartRadio;
+      console.log(nextNum);
+
+      let startRadio =
+        nextNum === 1 ? 0 : ((nextNum - 1) * this.pageSize) / this.total;
+
+      this.onChange &&
+        this.onChange({
+          startRadio,
+          endRadio,
+        });
+      this.pageNum = nextNum;
+      this.startRadio = startRadio;
+      this.endRadio = endRadio;
+    },
+    clickNext() {
+      if (this.pageNum === this.pages) return;
+      let nextNum = this.pageNum + 1;
+      const pEndRadio = this.endRadio;
+      let startRadio = pEndRadio;
+      let endRadio =
+        nextNum === this.pages ? 1 : (nextNum * this.pageSize) / this.total;
+      this.onChange &&
+        this.onChange({
+          startRadio,
+          endRadio,
+        });
+      this.pageNum = nextNum;
+      this.startRadio = startRadio;
+      this.endRadio = endRadio;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.ks-Slider {
+  position: relative;
+  .ks-Slider-prev,
+  .ks-Slider-next {
+    position: absolute;
+    width: 28px;
+    height: 18px;
+    background-color: #666;
+    &.disabled {
+      background-color: #999;
+    }
+  }
+  .ks-Slider-prev {
+    top: 0;
+  }
+  .ks-Slider-next {
+    transform: rotate(180deg);
+    bottom: 0;
+  }
+  .ks-Slider-inner {
+    width: 100%;
+
+    background-color: #666;
+  }
+}
+</style>
+

src/containers/Dashboard/Dashboard.vue

@@ -11,7 +11,7 @@
         <SeviceRatio class="Dashboard-DataCard" />
         <EquipmentList class="Dashboard-DataCard" />
       </div>
-      <CustomerRegister class="Dashboard-Row Dashboard-DataCard" />
+      <!-- <CustomerRegister class="Dashboard-Row Dashboard-DataCard" /> -->
     </div>
   </div>
 </template>

src/containers/layout/IconMenu/IconMenu.vue

@@ -79,6 +79,7 @@
       </MenuItem>
     </div>
     <div
+      v-if="dashboardButtonVisiable"
       class="DashboardButton"
       @click="clickHandle"
     >
@@ -165,6 +166,12 @@ export default {
       );
       return item ? formatRouteLink([item]) : null;
     },
+    dashboardButtonVisiable() {
+      let item = this.routers.find(
+        menu => menu.menuCode === process.env.VUE_APP_DASHBOARD_CODE
+      );
+      return item ? true : false;
+    },
   },
   methods: {
     clickHandle() {