工作台接口联调完成

src/views/modules/home.vue

@@ -10,56 +10,56 @@
                 <img src="@/assets/img/home_activity1.png">
                 <span>活动总数</span>
               </div>
-              <div class="nums-pre-sz">{{ 458 }}</div>
-              <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 23 }}</div>
+              <div class="nums-pre-sz">{{ headData.activityTotal||0 }}</div>
+              <!-- <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 23 }}</div> -->
             </div>
             <div class="nums-pre adffc">
               <div class="nums-pre-title adfac">
                 <img src="@/assets/img/home_activity2.png">
                 <span>未开始活动</span>
               </div>
-              <div class="nums-pre-sz">{{ 158 }}</div>
-              <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 0 }}</div>
+              <div class="nums-pre-sz">{{ headData.activityNotStart||0 }}</div>
+              <!-- <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 0 }}</div> -->
             </div>
             <div class="nums-pre adffc">
               <div class="nums-pre-title adfac">
                 <img src="@/assets/img/home_activity3.png">
                 <span>进行中活动</span>
               </div>
-              <div class="nums-pre-sz">{{ 140 }}</div>
-              <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 23 }}</div>
+              <div class="nums-pre-sz">{{ headData.activityDoing||0 }}</div>
+              <!-- <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 23 }}</div> -->
             </div>
             <div class="nums-pre adffc">
               <div class="nums-pre-title adfac">
                 <img src="@/assets/img/home_activity4.png">
                 <span>已结束活动</span>
               </div>
-              <div class="nums-pre-sz">{{ 546 }}</div>
-              <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 2 }}</div>
+              <div class="nums-pre-sz">{{ headData.activityEnd||0 }}</div>
+              <!-- <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 2 }}</div> -->
             </div>
             <div class="nums-pre adffc">
               <div class="nums-pre-title adfac">
                 <img src="@/assets/img/home_activity5.png">
                 <span>累计报名人数</span>
               </div>
-              <div class="nums-pre-sz">{{ 5098 }}</div>
-              <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 280 }}</div>
+              <div class="nums-pre-sz">{{ headData.totalRecruited||0 }}</div>
+              <!-- <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 280 }}</div> -->
             </div>
-            <div class="nums-pre adffc">
+            <!-- <div class="nums-pre adffc">
               <div class="nums-pre-title adfac">
                 <img src="@/assets/img/home_activity6.png">
                 <span>活动参与率</span>
               </div>
-              <div class="nums-pre-sz">{{ 89 }}%</div>
+              <div class="nums-pre-sz">{{ headData.activityTotal||0 }}%</div>
               <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 100 }}</div>
-            </div>
+            </div> -->
             <div class="nums-pre adffc">
               <div class="nums-pre-title adfac">
                 <img src="@/assets/img/home_activity7.png">
                 <span>累计导入爱心值总额</span>
               </div>
-              <div class="nums-pre-sz">{{ 985000 }}</div>
-              <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 8000 }}</div>
+              <div class="nums-pre-sz">{{ headData.importLove||0 }}</div>
+              <!-- <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 8000 }}</div> -->
             </div>
           </div>
         </el-card>
@@ -97,15 +97,15 @@
           <div class="htitle">爱心值变化趋势</div>
           <div class="chartbox two">
             <div class="query adfac">
-              <el-select v-model="year" placeholder="年份" style="width: 82px;margin-left: 8px;">
+              <el-select v-model="year" placeholder="年份" style="width: 82px;margin-left: 8px;" @change="yearChange">
                 <el-option v-for="item in yearList" :label="item" :value="item" :key="item"></el-option>
               </el-select>
-              <el-select v-model="month" placeholder="月份" style="width: 82px;margin-left: 8px;">
+              <el-select v-model="month" placeholder="月份" style="width: 82px;margin-left: 8px;" :disabled="!year" clearable @change="monthChange">
                 <el-option v-for="item in 12" :label="item+'月'" :value="item" :key="item"></el-option>
               </el-select>
-              <el-select v-model="quarter" placeholder="季度" style="width: 82px;margin-left: 8px;">
+              <!-- <el-select v-model="quarter" placeholder="季度" style="width: 82px;margin-left: 8px;">
                 <el-option v-for="item in 4" :label="item+'季度'" :value="item" :key="item"></el-option>
-              </el-select>
+              </el-select> -->
             </div>
             <div ref="bhqsRef" style="width: 100%;height: 100%;"></div>
           </div>
@@ -122,13 +122,13 @@
               <div class="th-pre tp4">参与次数</div>
             </div>
             <div class="list">
-              <div class="list-item adf" v-for="(item,index) in 8" :key="index">
+              <div class="list-item adf" v-for="(item,index) in activityPHBList" :key="index">
                 <div class="list-item-pre lip1 adfacjc">
                   <div :class="{'red':index===0,'yellow':index===1,'green':index===2}">{{ index + 1 }}</div>
                 </div>
-                <div class="list-item-pre lip2">{{ '周晓瑾' }}</div>
-                <div class="list-item-pre lip3">{{ '建设银行' }}</div>
-                <div class="list-item-pre lip4">{{ '999次' }}</div>
+                <div class="list-item-pre lip2">{{ item.realName||'' }}</div>
+                <div class="list-item-pre lip3">{{ item.channelName||'' }}</div>
+                <div class="list-item-pre lip4">{{ item.partCount||0 }}次</div>
               </div>
             </div>
           </div>
@@ -166,47 +166,46 @@ import * as echarts from 'echarts'
 export default {
   data () {
     return {
-      year: '',
+      year: new Date().getFullYear(),
       yearList: [new Date().getFullYear(), new Date().getFullYear() - 1, new Date().getFullYear() - 2, new Date().getFullYear() - 3, new Date().getFullYear() - 4],
-      month: '',
-      quarter: ''
+      month: new Date().getMonth() + 1,
+      quarter: '',
+      headData: {},
+      activityPHBList: []
     }
   },
   mounted () {
-    this.initYhlyChart()
-    this.initNnblChart()
-    this.initNlfbChart()
-    this.initBhqsChart()
+    this.getHeadData()
+    this.initYhlyChartFn()
+    this.initNnblChartFn()
+    this.initNlfbChartFn()
+    this.initBhqsChartFn()
+    this.getActivityPHBList()
   },
   methods: {
-    initYhlyChart () {
-      let myChart = echarts.init(this.$refs.yhlyRef)
-      let echartData = [
-        {
-          value: 899,
-          name: '中国银行'
-        },
-        {
-          value: 899,
-          name: '平安银行'
-        },
-        {
-          value: 1889,
-          name: '招商银行'
-        },
-        {
-          value: 1199,
-          name: '建设银行'
-        },
-        {
-          value: 599,
-          name: '工商银行'
-        },
-        {
-          value: 399,
-          name: '浦发银行'
+    getHeadData () {
+      this.$http.get('/core/workbench/activitySummary').then(res => {
+        if (res.data.code === 0) {
+          this.headData = res.data.data
+        }
+      })
+    },
+    initYhlyChartFn () {
+      this.$http.get('/core/workbench/sourceOfUser').then(res => {
+        if (res.data.code === 0) {
+          let echartData = res.data.data.map(d => {
+            return {
+              value: d.totalUser,
+              name: d.channelName
+            }
+          })
+          let sum = echartData.reduce((a, b) => a + b.value, 0)
+          this.initYhlyChart(echartData, sum)
         }
-      ]
+      })
+    },
+    initYhlyChart (echartData, sum) {
+      let myChart = echarts.init(this.$refs.yhlyRef)
       let seriesData = echartData.map((item, index) => {
         return {
           ...item,
@@ -219,7 +218,7 @@ export default {
             textStyle: {
               fontSize: 10
             },
-            formatter: '{white|{b}}\n{three|  {d}人}',
+            formatter: '{white|{b}}\n{three|  {c}人}',
             rich: {
               test: {},
               white: {
@@ -245,7 +244,7 @@ export default {
           itemGap: 10,
           x: 'center',
           y: '130',
-          subtext: '3897',
+          subtext: sum,
           textStyle: {
             fontSize: 14,
             color: '#989998'
@@ -291,9 +290,16 @@ export default {
       myChart.setOption(option)
       this.resizeEcharts(this.$refs.yhlyRef)
     },
-    initNnblChart () {
+    initNnblChartFn () {
+      this.$http.get('/core/workbench/genderRatio').then(res => {
+        if (res.data.code === 0) {
+          const echartsData = [{ value: res.data.data.womenNum || 0, name: '女性' }, { value: res.data.data.menNum || 0, name: '男性' }]
+          this.initNnblChart(echartsData)
+        }
+      })
+    },
+    initNnblChart (echartsData) {
       let myChart = echarts.init(this.$refs.nnblRef)
-      let echartsData = [{ value: 45, name: '女性' }, { value: 55, name: '男性' }]
       let colorList = ['#F4657A', '#49DECA']
       let option = {
         backgroundColor: '#FFF',
@@ -343,7 +349,8 @@ export default {
             position: 'outside',
             fontSize: 16,
             formatter: (params) => {
-              return `{a|${params.name}${params.value}%}`
+              const sum = echartsData.reduce((total, item) => total + item.value, 0)
+              return `{a|${params.name}${((params.value / sum) * 100).toFixed(0)}%}`
             },
             rich: {
               a: {
@@ -370,9 +377,17 @@ export default {
       myChart.setOption(option)
       this.resizeEcharts(this.$refs.nnblRef)
     },
-    initNlfbChart () {
+    initNlfbChartFn () {
+      this.$http.get('/core/workbench/userAgeDistribution').then(res => {
+        if (res.data.code === 0) {
+          const { under10, tenTo20, twentyTo40, fortyTo60, sixtyAndAbove } = res.data.data
+          const dataValues = [under10, tenTo20, twentyTo40, fortyTo60, sixtyAndAbove]
+          this.initNlfbChart(dataValues)
+        }
+      })
+    },
+    initNlfbChart (dataValues) {
       let myChart = echarts.init(this.$refs.nlfbRef)
-      const dataValues = [24, 34, 16, 20, 6]
       const totalSum = dataValues.reduce((a, b) => a + b, 0)
       let option = {
         color: ['#05A9FE'],
@@ -380,6 +395,9 @@ export default {
           type: 'category',
           data: ['10岁以下', '10-20岁', '20-40岁', '40-60岁', '60岁以上']
         },
+        tooltip: {
+          trigger: 'item'
+        },
         yAxis: {
           type: 'value'
         },
@@ -410,14 +428,34 @@ export default {
       myChart.setOption(option)
       this.resizeEcharts(this.$refs.nlfbRef)
     },
-    initBhqsChart () {
+    initBhqsChartFn () {
+      let yearDate = this.year
+      let monthDate = ''
+      if (this.month) {
+        yearDate = ''
+        monthDate = this.year + '-' + (this.month || 0).toString().padStart(2, '0')
+      }
+      this.$http.get('/core/workbench/loveValueChange', { params: {
+        monthDate,
+        yearDate
+      } }).then(res => {
+        if (res.data.code === 0) {
+          const resData = this.processAndCompleteData(res.data.data, monthDate || yearDate)
+          const xdata = resData.map(item => item.dateDay.length > 7 ? item.dateDay.substr(5, 5) : item.dateDay)
+          const ljdrData = resData.map(item => item.totalImport)
+          const ljjzData = resData.map(item => item.totalDonation)
+          this.initBhqsChart(xdata, ljdrData, ljjzData)
+        }
+      })
+    },
+    initBhqsChart (xdata, ljdrData, ljjzData) {
       let myChart = echarts.init(this.$refs.bhqsRef)
       let option = {
         color: ['#74E1F9', '#7C75FF'],
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
+          data: xdata
         },
         yAxis: {
           type: 'value'
@@ -446,7 +484,7 @@ export default {
         series: [
           {
             name: '累计导入',
-            data: [30, 170, 30, 80, 50, 160, 20],
+            data: ljdrData,
             type: 'line',
             smooth: true,
             lineStyle: {
@@ -469,7 +507,7 @@ export default {
           },
           {
             name: '累计捐赠',
-            data: [200, 90, 130, 90, 220, 60, 80],
+            data: ljjzData,
             type: 'line',
             smooth: true,
             lineStyle: {
@@ -502,6 +540,118 @@ export default {
         ele.style.transform = `scale(${1 / rate})`
         ele.style.transformOrigin = 'top left'
       }
+    },
+    yearChange (e) {
+      this.year = e
+      let myChart = echarts.init(this.$refs.bhqsRef)
+      myChart.clear()
+      this.initBhqsChartFn()
+    },
+    monthChange (e) {
+      this.month = e
+      let myChart = echarts.init(this.$refs.bhqsRef)
+      myChart.clear()
+      this.initBhqsChartFn()
+    },
+    getActivityPHBList () {
+      this.$http.get('/core/workbench/activityPartRanking').then(res => {
+        if (res.data.code === 0) {
+          this.activityPHBList = res.data.data.sort((a, b) => b.partCount - a.partCount)
+        }
+      })
+    },
+    /**
+     * 根据指定的周期（年或月）处理和补全接口数据
+     * @param {Array<Object>} apiData - 从接口获取的原始数据数组
+     * @param {string} period - 周期字符串。年份格式为 'YYYY' (例如 '2025')，月份格式为 'YYYY-MM' (例如 '2025-11')
+     * @returns {Array<Object>} 处理和补全后的数据数组
+     */
+    processAndCompleteData (apiData, period) {
+      // --- 模式判断：根据 period 格式判断是处理年份还是月份 ---
+      // 1. 按年份处理
+      if (/^\d{4}$/.test(period)) {
+        const year = parseInt(period, 10)
+        const result = []
+
+        // 为了高效查找，先将 apiData 按月份聚合
+        const monthlyDataMap = new Map()
+        for (const item of apiData) {
+          const itemMonth = item.dateDay.substring(0, 7) // 'YYYY-MM'
+          if (!item.dateDay.startsWith(period)) continue // 只处理指定年份的数据
+
+          const existing = monthlyDataMap.get(itemMonth) || { totalImport: 0, totalDonation: 0 }
+          existing.totalImport += parseFloat(item.totalImport)
+          existing.totalDonation += item.totalDonation
+          monthlyDataMap.set(itemMonth, existing)
+        }
+
+        // 获取当前日期，用于判断是否超过当前月份
+        const now = new Date()
+        const currentYear = now.getFullYear()
+        const currentMonth = now.getMonth() + 1 // getMonth() 是 0-11
+
+        // 循环12个月，生成完整数据
+        for (let m = 1; m <= 12; m++) {
+          // 规则1：月份不可超过当前年当前月
+          if (year === currentYear && m > currentMonth) {
+            break
+          }
+
+          const monthStr = `${year}-${String(m).padStart(2, '0')}`
+          const data = monthlyDataMap.get(monthStr) || { totalImport: 0, totalDonation: 0 }
+          result.push({
+            dateDay: monthStr,
+            totalImport: data.totalImport,
+            totalDonation: data.totalDonation
+          })
+        }
+        return result
+      }
+
+      // 2. 按月份处理
+      if (/^\d{4}-\d{2}$/.test(period)) {
+        const [year, month] = period.split('-').map(Number)
+        const result = []
+
+        // 为了高效查找，将 apiData 按日期存入 Map
+        const dailyDataMap = new Map(
+          apiData
+            .filter(item => item.dateDay.startsWith(period)) // 只处理指定月份的数据
+            .map(item => [item.dateDay, {
+              totalImport: parseFloat(item.totalImport),
+              totalDonation: item.totalDonation
+            }])
+        )
+
+        // 获取当前日期，用于判断是否超过当天
+        const now = new Date()
+        const currentYearMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+        const currentDay = now.getDate()
+
+        // 获取指定年月的总天数
+        const daysInMonth = new Date(year, month, 0).getDate()
+
+        // 循环当月所有天数，生成完整数据
+        for (let d = 1; d <= daysInMonth; d++) {
+          // 规则2：日期不可超过当前月的当天
+          if (period === currentYearMonth && d > currentDay) {
+            break
+          }
+
+          const dateStr = `${period}-${String(d).padStart(2, '0')}`
+          const data = dailyDataMap.get(dateStr) || { totalImport: 0, totalDonation: 0 }
+
+          result.push({
+            dateDay: dateStr,
+            ...data // 使用展开运算符简化代码
+          })
+        }
+        return result
+      }
+
+      // 如果 period 格式不正确，可以抛出错误或返回空数组
+      console.error("输入的 period 格式不正确，请使用 'YYYY' 或 'YYYY-MM' 格式。")
+      return []
     }
   }
 }
@@ -519,7 +669,7 @@ export default {
 .nums{
   margin-top: 26px;
   &-pre{
-    width: calc(100% / 7);
+    width: calc(100% / 6);
     border-left: 1px solid #ECEEF5;
     padding-left: 16px;
     box-sizing: border-box;