From 0fee0c24a0dc9a7bf6f2836bf5f617a2c569d3da Mon Sep 17 00:00:00 2001
From: ahanhanhan <leo zeng @leozeng>
Date: Mon, 4 Mar 2024 18:43:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/cai/static.js                       |   2 +-
 src/utils/index.js                          |   7 ++
 src/utils/pubsub.js                         |  33 +++++
 src/views/components/rankList/index.vue     |  63 ++++++----
 src/views/dashboard/LineChart.vue           | 127 +++++++++++++++-----
 src/views/dashboard/PanelGroup.vue          | 114 ++++--------------
 src/views/dashboard/mixins/echartsConfig.js |  68 ++++++++++-
 7 files changed, 271 insertions(+), 143 deletions(-)
 create mode 100644 src/utils/pubsub.js

diff --git a/src/api/cai/static.js b/src/api/cai/static.js
index 74965db..57c4856 100644
--- 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) {
diff --git a/src/utils/index.js b/src/utils/index.js
index df5db12..8a754a6 100644
--- 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);
+}
diff --git a/src/utils/pubsub.js b/src/utils/pubsub.js
new file mode 100644
index 0000000..fd37ab9
--- /dev/null
+++ 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;
diff --git a/src/views/components/rankList/index.vue b/src/views/components/rankList/index.vue
index 256f24d..a326862 100644
--- 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;
diff --git a/src/views/dashboard/LineChart.vue b/src/views/dashboard/LineChart.vue
index 3c5c6dc..aa5484b 100644
--- 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>
diff --git a/src/views/dashboard/PanelGroup.vue b/src/views/dashboard/PanelGroup.vue
index f9c14f3..4059d25 100644
--- 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 {
diff --git a/src/views/dashboard/mixins/echartsConfig.js b/src/views/dashboard/mixins/echartsConfig.js
index be424c9..423fa93 100644
--- 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'