更新代码

2024-03-04 18:43:27 +08:00
parent d40c59c37e
commit 0fee0c24a0
7 changed files with 271 additions and 143 deletions
--- a/src/api/cai/static.js
+++ b/src/api/cai/static.js
@@ -56,7 +56,7 @@ export function staticRank(rankType,rankTime) {
 *     private List<Number> modifyCoinAddData = new ArrayList<>();
 *     @Schema(description = "手工减少收益数")
 *     private List<Number> modifyIncomeSubData = new ArrayList<>();
- *     @Schema(description = "手工新增余额数")
+ *     @Schema(description = "手工新增收益数")
 *     private List<Number> modifyIncomeAddData = new ArrayList<>();
 */
 export function staticAmountLine(beginDate,endDate) {
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -388,3 +388,10 @@ export function isNumberStr(str) {
  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
 }

+
+export const formatDate1 = (date, format = 'yyyy-MM-dd')=> {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return format.replace('yyyy', year).replace('MM', month).replace('dd', day);
+}
--- a/src/utils/pubsub.js
+++ b/src/utils/pubsub.js
@@ -0,0 +1,33 @@
+class Publisher {
+  constructor() {
+    this.subscribers = new Map();
+  }
+
+  subscribe(type, fn) {
+    if (!this.subscribers.has(type)) {
+      this.subscribers.set(type, []);
+    }
+    this.subscribers.get(type).push(fn);
+  }
+
+  unsubscribe(type, fn) {
+    const subscribers = this.subscribers.get(type);
+    if (subscribers) {
+      const index = subscribers.indexOf(fn);
+      if (index !== -1) {
+        subscribers.splice(index, 1);
+      }
+    }
+  }
+
+  publish(type, ...data) {
+    const subscribers = this.subscribers.get(type);
+    if (subscribers) {
+      subscribers.forEach(fn => fn(...data));
+    }
+  }
+}
+
+// 创建单例对象
+const publisherInstance = new Publisher();
+export default publisherInstance;
--- a/src/views/components/rankList/index.vue
+++ b/src/views/components/rankList/index.vue
@@ -3,7 +3,7 @@
    <div class="header">
      <div class="title">{{ title }}</div>
      <div class="operation">
-        <div :class="['btn', index === activeIndex ? 'active' : '']"
+        <div :class="['btn', prop === activeTime ? 'active' : '']"
             v-for="({ prop, label }, index) in operation"
             :key="prop || index"
             @click="handleSwitch(label, prop, index)">{{ label }}</div>
@@ -11,28 +11,34 @@
    </div>

    <div class="list-content">
-      <div class="list-item" v-for="(item, index) in 6">
-        <div class="numerical">{{ index + 1 }}</div>
-        <div class="detail">
-          <div class="head_portrait">
-            <img :src="require('../../../assets/icons/head_portrait.png')" alt="">
+      <template v-if="data.length">
+        <div class="list-item" v-for="(item, index) in data">
+          <div class="numerical">{{ index + 1 }}</div>
+          <div class="detail">
+            <div class="head_portrait">
+              <img :src="require('../../../assets/icons/head_portrait.png')" alt="">
+            </div>
+            <div class="user-info">
+              <div class="user-name">{{ item.nickname }}</div>
+              <div class="user-id">{{ item.usercode }}</div>
+            </div>
          </div>
-          <div class="user-info">
-            <div class="user-name">向天再借五百年</div>
-            <div class="user-id">767D85</div>
+          <div class="count">
+            <slot v-if="$scopedSlots.default" :data="item" :$index="index"></slot>
+            <count-to v-else :start-val="0" :end-val="item.value" :duration="2600" class="card-panel-num" />
          </div>
        </div>
-        <div class="count">
-          <slot v-if="$scopedSlots.default" :data="item" :$index="index"></slot>
-          <count-to v-else :start-val="0" :end-val="900" :duration="2600" class="card-panel-num" />
-        </div>
-      </div>
+      </template>
+      <el-empty v-else :image-size="100" description="暂无数据"></el-empty>
+
    </div>
  </div>
 </template>

 <script>
 import CountTo from 'vue-count-to';
+import { staticRank } from '@/api/cai/static'
+import publisherInstance from '@/utils/pubsub'
 export default {
  name: 'index',
  components: {
@@ -43,13 +49,10 @@ export default {
      type: String,
      default: ''
    },
-    data: {
-      type: Array,
-      default: ()=> []
-    },
+    type: [Number, String],
    operation: {
      type: Array,
-      default: ()=> ([{ label: '总', prop: '' }, { label: '日', prop: '' }])
+      default: ()=> ([{ label: '总', prop: 'Total' }, { label: '日', prop: 'Day' }])
    },
    url: {
      type: String,
@@ -59,13 +62,25 @@ export default {

  data() {
    return {
-      activeIndex: 0
+      activeTime: 'Total',
+      data: []
    }
  },
+  created() {
+    publisherInstance.subscribe('refresh', this.getRankList);
+    this.getRankList();
+  },
  methods: {
+    async getRankList() {
+      const { code, data, msg } = await staticRank(this.type, this.activeTime);
+      if (code === 200) {
+        return (this.data = data);
+      }
+    },
+
    handleSwitch(label, prop, index) {
-      console.log(label, prop)
-      this.activeIndex = index;
+      this.activeTime = prop;
+      this.getRankList();
      this.$emit('switch-change', { label, prop, index });
    }
  }
@@ -116,7 +131,9 @@ export default {

  .list-content {
    width: 100%;
-    overflow: hidden;
+    height: 323px;
+    overflow: auto;
+    padding-right: 17px;
    .list-item {
      height: 37px;
      line-height: 37px;
--- a/src/views/dashboard/LineChart.vue
+++ b/src/views/dashboard/LineChart.vue
@@ -1,21 +1,74 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div class="wrapper">
+    <div ref="chart" :class="className" :style="{height:height,width:width}" />
+    <div class="select-time">
+      <el-date-picker
+        v-model="chartTime"
+        :picker-options="pickerOptions"
+        align="right"
+        value-format="yyyy-MM-dd"
+        end-placeholder="结束日期"
+        @change="staticAmountLine"
+        range-separator="至"
+        start-placeholder="开始日期"
+        type="daterange"
+        unlink-panels
+      >
+      </el-date-picker>
+    </div>
+  </div>
 </template>

 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize';
-import { echartsConfig, generateRandomNumbers, legendData, seriesData } from '@/views/dashboard/mixins/echartsConfig'
+import {
+  echartsConfig,
+  generateRandomNumbers,
+  legendData,
+  legendMap,
+  seriesData
+} from '@/views/dashboard/mixins/echartsConfig'
+import { staticAmountLine } from '@/api/cai/static'
+import { formatDate1 } from '@/utils'
+import publisherInstance from '@/utils/pubsub'

 legendData.forEach((name, index)=> {
  if (!echartsConfig.legend.selected) {
    echartsConfig.legend.selected = {};
  }
  echartsConfig.legend.selected[name] = index === 0;
-  echartsConfig.series.push({ ...seriesData, name, data: generateRandomNumbers() });
 });

+const pickerOptions = {
+  shortcuts: [{
+    text: '最近一周',
+    onClick(picker) {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+      picker.$emit('pick', [start, end])
+    }
+  }, {
+    text: '最近一个月',
+    onClick(picker) {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+      picker.$emit('pick', [start, end])
+    }
+  }, {
+    text: '最近三个月',
+    onClick(picker) {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+      picker.$emit('pick', [start, end])
+    }
+  }]
+}
+
 export default {
  mixins: [resize],
  props: {
@@ -34,46 +87,66 @@ export default {
    autoResize: {
      type: Boolean,
      default: true
-    },
-    chartData: {
-      type: Object,
-      required: true
    }
  },
  data() {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    return {
-      chart: null
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
+      chart: null,
+      pickerOptions,
+      chartTime: [formatDate1(start), formatDate1(end)],
    }
  },
  mounted() {
+    publisherInstance.subscribe('refresh', this.staticAmountLine);
    this.$nextTick(() => {
-      this.initChart()
+      this.staticAmountLine();
    })
  },
+  methods: {
+     async staticAmountLine() {
+       const [beginDate, endDate] = this.chartTime;
+       const { code, data } = await staticAmountLine(beginDate, endDate);
+       if (code === 200) {
+         const { x } = data;
+         echartsConfig.xAxis.data = x;
+         for (const key in legendMap) {
+           const name = legendMap[key];
+           echartsConfig.series.push({
+             name,
+             yAxisIndex: key === 'orderCountData' ? 1 : 0,
+             data: data[key],
+             type: "line",
+           })
+         }
+         this.initChart(echartsConfig)
+       }
+    },
+    initChart(chartData) {
+      this.chart = echarts.init(this.$refs.chart, 'macarons')
+      this.chart.setOption(chartData);
+    },
+  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      console.log(echartsConfig)
-      this.chart.setOption(echartsConfig)
-    }
  }
 }
 </script>
+
+<style scoped lang="scss">
+.select-time {
+  width: 250px;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  .el-date-editor {
+    width: 100%;
+  }
+}
+</style>
--- a/src/views/dashboard/PanelGroup.vue
+++ b/src/views/dashboard/PanelGroup.vue
@@ -30,30 +30,12 @@

    <div class="chart-content">
      <line-chart/>
-      <div class="select-time">
-        <el-date-picker
-          v-model="chartTime"
-          :picker-options="pickerOptions"
-          align="right"
-          value-format="yyyy-MM-dd"
-          end-placeholder="结束日期"
-          @change="handleDatePickerChange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          type="daterange"
-          unlink-panels
-        >
-        </el-date-picker>
-        <!--        <el-select v-model="chartTime" @change="handleChartTimeChange">
-                  <el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.key"></el-option>
-                </el-select>-->
-      </div>
    </div>

    <div class="rank-info">
      <el-row :gutter="16" class="panel-group">
        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-          <RankList title="充值排行榜">
+          <RankList title="充值排行榜" :type="3">
            <template :scope="scope">
              <count-to :duration="2600" :end-val="900" :start-val="0" class="card-panel-num" prefix="￥"/>
            </template>
@@ -61,7 +43,7 @@
        </el-col>

        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-          <RankList title="提现排行榜">
+          <RankList title="提现排行榜" :type="4">
            <template :scope="scope">
              <count-to :duration="2600" :end-val="900" :start-val="0" class="card-panel-num" prefix="￥"/>
            </template>
@@ -69,11 +51,11 @@
        </el-col>

        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-          <RankList :operation="operation" title="女神收入榜" @switch-change=""/>
+          <RankList :type="1" :operation="operation" title="女神收入榜" @switch-change=""/>
        </el-col>

        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-          <RankList :operation="operation" title="用户邀请榜"/>
+          <RankList :operation="operation" :type="2" title="用户邀请榜"/>
        </el-col>
      </el-row>
    </div>
@@ -82,7 +64,7 @@
      <span>自动刷新</span>
      <el-switch v-model="autoRefreshSwitch"></el-switch>
      <el-dropdown @command="handleDropdownClick">
-        <div class="dropdown">{{ refreshTimeModel }}<i class="el-icon-arrow-down el-icon--right"></i></div>
+        <div class="dropdown">{{ refreshTimeLabel }}<i class="el-icon-arrow-down el-icon--right"></i></div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="({ label, key }) in refreshTimeSelect"
@@ -101,7 +83,9 @@
 import CountTo from 'vue-count-to'
 import RankList from '@/views/components/rankList'
 import LineChart from '../dashboard/LineChart'
-import { staticIndex } from '@/api/cai/static'
+import { staticAmountLine, staticIndex, staticRank } from '@/api/cai/static'
+import { formatDate1 } from '@/utils'
+import publisherInstance from '@/utils/pubsub'

 const chartSelect = [
  { label: '最近一周', key: '1' },
@@ -116,39 +100,12 @@ const refreshTimeSelect = [
 ]

 const operation = [
-  { label: '总', prop: '' },
-  { label: '月', prop: '' },
-  { label: '周', prop: '' },
-  { label: '日', prop: '' }
+  { label: '总', prop: 'Total' },
+  { label: '月', prop: 'Month' },
+  { label: '周', prop: 'Week' },
+  { label: '日', prop: 'Day' }
 ]

-const pickerOptions = {
-  shortcuts: [{
-    text: '最近一周',
-    onClick(picker) {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-      picker.$emit('pick', [start, end])
-    }
-  }, {
-    text: '最近一个月',
-    onClick(picker) {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-      picker.$emit('pick', [start, end])
-    }
-  }, {
-    text: '最近三个月',
-    onClick(picker) {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-      picker.$emit('pick', [start, end])
-    }
-  }]
-}

 export default {
  components: {
@@ -183,11 +140,11 @@ export default {
        trendNum: 8.5
      },
      chartSelect,
-      chartTime: '1',
      refreshTimeSelect,
-      refreshTimeModel: '30s',
+      refreshTimeLabel: '30s',
+      refreshTimeValue: 30,
      autoRefreshSwitch: true,
-      pickerOptions,
+      autoRefreshTimer: null
    }
  },
  created() {
@@ -205,20 +162,23 @@ export default {
        model: this.anchorModel
      }
    ]
-    this.getTodayStatistics()
+    this.getTodayStatistics();
+    this.refreshFunc();
+    publisherInstance.subscribe('refresh', this.getTodayStatistics);
  },
  methods: {
-    handleDatePickerChange(value) {
-      console.log('----value:', value);
-    },
-    handleChartTimeChange(val) {
-      // todo
+    refreshFunc() {
+      if (this.autoRefreshSwitch) {
+        clearInterval(this.autoRefreshTimer);
+        this.autoRefreshTimer = setInterval(()=> publisherInstance.publish('refresh'), this.refreshTimeValue * 1000)
+      }
    },
    handleDropdownClick({ label, key }) {
-      this.refreshTimeModel = label
+      this.refreshTimeLabel = label;
+      this.refreshTimeValue = key;
+      this.refreshFunc();
    },
    getTodayStatistics() {
-      // todo fetch
      staticIndex().then(response => {
        const {
          todayLoginNum,
@@ -231,18 +191,6 @@ export default {
          todayWithdrawNum,
          todayWithdrawAmountDiffLast
        } = response.data
-        /* {
-          todayLoginNum: 100,
-          todayLoginDiffLast: 8.6,
-          anchorNum: 58,
-          todayRechargeAmountNum: 200,
-          todayRechargeNum: 10,
-          todayRechargeAmountDiffLast: 5.6,
-          todayWithdrawAmount: 500,
-          todayWithdrawNum: 1,
-          todayWithdrawAmountDiffLast: 5.9
-        } */
-
        this.loginModel.count = todayLoginNum
        this.loginModel.trendDirection = 1 // 增加还是减少
        this.loginModel.trendNum = todayLoginDiffLast
@@ -348,16 +296,6 @@ export default {
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
-
-    .select-time {
-      width: 250px;
-      position: absolute;
-      right: 16px;
-      top: 16px;
-      .el-date-editor {
-        width: 100%;
-      }
-    }
  }

  .rank-info {
--- a/src/views/dashboard/mixins/echartsConfig.js
+++ b/src/views/dashboard/mixins/echartsConfig.js
@@ -1,4 +1,15 @@
-export const legendData = ["充值金额", "充值笔数", '打款金额', '打款笔数', '手动加余额', '手动减余额', '手动加收益', '手动减收益'];
+export const legendMap = {
+  expInMoneyData: '充值金额',
+  orderCountData: '充值笔数',
+  outMoneyData: '提现金额',
+  cashCountData: '提现数量',
+  modifyCoinSubData: '手工减少余额数',
+  modifyCoinAddData: '手工新增余额数',
+  modifyIncomeSubData: '手工减少收益数',
+  modifyIncomeAddData: '手工新增收益数'
+};
+
+export const legendData = Object.values(legendMap);

 export const seriesData = {
  name: '',
@@ -18,7 +29,7 @@ export const seriesData = {

 export const echartsConfig = {
  xAxis: {
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    data: [],
    boundaryGap: false,
    axisTick: {
      show: false
@@ -38,11 +49,60 @@ export const echartsConfig = {
    },
    padding: [5, 10]
  },
-  yAxis: {
+  yAxis: [
+    {
+      type: "value",
+      // splitNumber: 4, //设置坐标轴的分割段数
+      splitLine: {
+        //去除网格线
+        show: false,
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: true,
+        lineStyle: {
+          color: "#BDBDBD",
+          width: 1,
+          type: "solid",
+        },
+      },
+      axisLabel: {
+        // 设置y轴的文字的样式
+        textStyle: {
+          show: true,
+          color: "#BDBDBD",
+          fontSize: "12",
+        },
+      },
+    },
+    {
+      type: "value",
+      splitLine: {
+        //去除网格线
+        show: false,
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: true,
+        lineStyle: {
+          color: "#BDBDBD",
+          width: 1,
+          type: "solid",
+        },
+      },
+      // splitNumber: 6, //设置坐标轴的分割段数
+      axisLabel: {
+        formatter: function (v) {
+          return v.toFixed(1); //0表示保留小数为0位，1表示1位，2表示2位
+        },
+      },
+    },
+  ],
+  /* yAxis: {
    axisTick: {
      show: false
    }
-  },
+  }, */
  legend: {
    data: legendData,
    top: '0px'