优化首页数据图表

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2570680_gkyjimtz1d.css">
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4934570_3lp73ojw2ti.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4934570_z6o9obhwtu.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title></title>
   </head>

src/router/modules/formworkErection.js

@@ -6,7 +6,7 @@ const route = [
         path: '/formworkErection',
         component: Layout,
         redirect: '/formworkErection/appAdmin/index',
-        meta: { title: '广告变现', icon: 'sfont system-zidingyi' },
+        meta: { title: '广告变现', icon: 'iconfont icon-guanggao' },
         children: [
             {
                 path: 'placementAdmin/index',

src/views/main/dashboard/components/charts/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
-    <lineChartModel :tableData="tableData" :lineListData="lineListData" title="收益" />
-    <lineChartModel :tableData="tableData" :lineListData="lineListData" :type="'ecpm'" title="ECPM趋势"  />
-  
+    <lineChartModel :tableData="tableData" :lineListData="lineListData" :totalProfit="totalProfit" title="收益" />
+    <lineChartModel :tableData="tableData" :lineListData="lineListData" :totalProfit="totalProfit" :type="'ecpm'"
+      title="ECPM趋势" />
+
     <userDataChart />
   </div>
 </template>
@@ -15,21 +16,42 @@ import userDataChart from './userDataChart.vue'
 
 
 const tableData = ref([])
+const totalProfit = ref({})
 const getIndexProfitData = async () => {
   const res = await getIndexProfit()
   tableData.value = res.data
+
+  const summary = res.data.reduce((acc, cur) => {
+    acc.today += parseFloat(cur.today)
+    acc.yesterday += parseFloat(cur.yesterday)
+    acc.month += parseFloat(cur.month)
+    acc.ecpmToday += parseFloat(cur.ecpmToday)
+    acc.ecpmYesterday += parseFloat(cur.ecpmYesterday)
+    acc.ecpmMonth += parseFloat(cur.ecpmMonth)
+    return acc
+  }, { today: 0, yesterday: 0, month: 0, ecpmToday: 0, ecpmYesterday: 0, ecpmMonth: 0 })
+
+  // 格式化为两位小数字符串
+  totalProfit.value = {
+    today: summary.today.toFixed(2),
+    yesterday: summary.yesterday.toFixed(2),
+    month: summary.month.toFixed(2),
+    ecpmToday: summary.ecpmToday.toFixed(2),
+    ecpmYesterday: summary.ecpmYesterday.toFixed(2),
+    ecpmMonth: summary.ecpmMonth.toFixed(2),
+  }
 }
 
 const lineListData = ref({})
 const getIndexHourReportData = async () => {
-    const res = await getIndexHourReport()
-
-    // 整理 lineListData
-    lineListData.value = res.data.reduce((acc, item) => {
-        const { channelName, estimatedRevenueList, estimatedRevenueEcpmList } = item;
-        acc[channelName] = { estimatedRevenueList, estimatedRevenueEcpmList };
-        return acc;
-    }, {});
+  const res = await getIndexHourReport()
+
+  // 整理 lineListData
+  lineListData.value = res.data.reduce((acc, item) => {
+    const { channelName, estimatedRevenueList, estimatedRevenueEcpmList } = item;
+    acc[channelName] = { estimatedRevenueList, estimatedRevenueEcpmList };
+    return acc;
+  }, {});
 }
 
 onBeforeMount(async () => {

src/views/main/dashboard/components/charts/lineChartModel.vue

@@ -6,16 +6,27 @@
                     <div class="line"></div>
                     <span>{{ title }}</span>
                 </div>
-                <div class="main" v-if="type === 'earn'">
-                    <el-row>
+                <div class="main" v-if="totalProfit">
+                    <el-row v-if="type === 'earn'">
                         <el-col :span="8">
-                            <el-statistic title="今日收益" :value="268.5" :precision="2" />
+                            <el-statistic title="今日收益" :value="totalProfit.today" :precision="2" />
                         </el-col>
                         <el-col :span="8">
-                            <el-statistic title="昨日收益" :value="2685" :precision="2" />
+                            <el-statistic title="昨日收益" :value="totalProfit.yesterday" :precision="2" />
                         </el-col>
                         <el-col :span="8">
-                            <el-statistic title="本月收益" :value="2685" :precision="2" />
+                            <el-statistic title="本月收益" :value="totalProfit.month" :precision="2" />
+                        </el-col>
+                    </el-row>
+                    <el-row v-else>
+                        <el-col :span="8">
+                            <el-statistic title="今日ECPM" :value="totalProfit.ecpmToday" :precision="2" />
+                        </el-col>
+                        <el-col :span="8">
+                            <el-statistic title="昨日ECPM" :value="totalProfit.ecpmYesterday" :precision="2" />
+                        </el-col>
+                        <el-col :span="8">
+                            <el-statistic title="本月ECPM" :value="totalProfit.ecpmMonth" :precision="2" />
                         </el-col>
                     </el-row>
                 </div>
@@ -25,8 +36,9 @@
                     :style="{ width: '100%' }">
                     <el-table-column prop="platform" label="统计" align="center" />
                     <el-table-column :prop="type === 'earn' ? 'today' : 'ecpmToday'" label="今日" align="center" />
-                    <el-table-column :prop="type === 'earn' ? 'yesterday' : 'ecpmYesterday'" label="今日" align="center" />
-                    <el-table-column :prop="type === 'earn' ? 'month' : 'ecpmMonth'" label="今日" align="center" />
+                    <el-table-column :prop="type === 'earn' ? 'yesterday' : 'ecpmYesterday'" label="昨日"
+                        align="center" />
+                    <el-table-column :prop="type === 'earn' ? 'month' : 'ecpmMonth'" label="本月" align="center" />
                 </el-table>
 
                 <Chart class="chart" :option="options" />
@@ -50,6 +62,11 @@ const props = defineProps({
         type: Object,
         default: {}
     },
+    // 汇总数据
+    totalProfit: {
+        type: Object,
+        default: {}
+    },
     // 类型 'earn'- 收益 | 'ecpm'
     type: {
         type: String,