修改首页数据展示

src/api/partner/merchant/index.ts

@@ -58,3 +58,11 @@ export const getListByPartnerName = (partnerName: string): AxiosPromise<PartnerM
     method: 'get'
   });
 };
+
+// 伙伴商管理首页数据
+export function partnerManageIndexData() {
+  return request({
+    url: '/customer/partnerInfo/partnerManageIndexData',
+    method: 'get'
+  });
+}

src/views/index.vue

@@ -9,10 +9,7 @@
             <el-tag type="primary" effect="light" size="small">实时</el-tag>
           </div>
           <div class="card-body">
-            <h2 class="num">1,250</h2>
-            <div class="bottom">
-              <span class="text-up">较上月 + 5% ↑</span>
-            </div>
+            <h2 class="num">{{ partnerTotal }}</h2>
           </div>
         </el-card>
       </el-col>
@@ -23,24 +20,18 @@
             <el-tag type="success" effect="light" size="small">月度</el-tag>
           </div>
           <div class="card-body">
-            <h2 class="num">120</h2>
-            <div class="bottom">
-              <span class="text-up">较上月 + 12% ↑</span>
-            </div>
+            <h2 class="num">{{ monthlyNew }}</h2>
           </div>
         </el-card>
       </el-col>
       <el-col :span="6" class="card-panel-col">
         <el-card shadow="hover" class="box-card">
           <div class="card-header">
-            <span>待处理审批</span>
-            <el-tag type="warning" effect="light" size="small">待办</el-tag>
+            <span>季度新增入驻</span>
+            <el-tag type="warning" effect="light" size="small">季度</el-tag>
           </div>
           <div class="card-body">
-            <h2 class="num" style="color: #e6a23c">15</h2>
-            <div class="bottom">
-              <span style="color: #909399">需及时处理审批事项</span>
-            </div>
+            <h2 class="num" style="color: #e6a23c">{{ quarterlyNew }}</h2>
           </div>
         </el-card>
       </el-col>
@@ -51,10 +42,7 @@
             <el-tag type="info" effect="light" size="small">业务</el-tag>
           </div>
           <div class="card-body">
-            <h2 class="num">340</h2>
-            <div class="bottom">
-              <span class="text-down">较上月 - 2% ↓</span>
-            </div>
+            <h2 class="num">{{ cooperationProjectCount }}</h2>
           </div>
         </el-card>
       </el-col>
@@ -76,7 +64,7 @@
         <el-card shadow="hover">
           <template #header>
             <div class="clearfix">
-              <span>伙伴商评级分布</span>
+              <span>伙伴合作型态分布</span>
             </div>
           </template>
           <div ref="pieChartRef" style="height: 350px"></div>
@@ -91,7 +79,7 @@
           <template #header>
             <div class="clearfix">
               <span>最新入驻伙伴商审批列表</span>
-              <el-button style="float: right; padding: 3px 0" type="primary" link>查看更多</el-button>
+              <el-button style="float: right; padding: 3px 0" type="primary" link @click="router.push('/partner/merchant')">查看更多</el-button>
             </div>
           </template>
           <el-table :data="partnerList" style="width: 100%" :header-cell-style="{ background: '#f8f8f9', color: '#606266' }">
@@ -99,20 +87,12 @@
             <el-table-column prop="companyName" label="伙伴商名称" min-width="200" show-overflow-tooltip />
             <el-table-column prop="contact" label="联系人" />
             <el-table-column prop="phone" label="联系电话" />
-            <el-table-column prop="level" label="申请评级" align="center">
+            <el-table-column prop="level" label="合作型态" align="center">
               <template #default="scope">
-                <el-tag :type="getLevelType(scope.row.level)">
-                  {{ scope.row.level }}
-                </el-tag>
+                <dict-tag :options="cooperate_type" :value="scope.row.partnerCooperateType" />
               </template>
             </el-table-column>
-
             <el-table-column prop="joinTime" label="申请时间" />
-            <el-table-column label="操作" width="150" align="center">
-              <template>
-                <el-button type="info" link size="small">查看</el-button>
-              </template>
-            </el-table-column>
           </el-table>
         </el-card>
       </el-col>
@@ -122,7 +102,12 @@
 
 <script setup name="Index" lang="ts">
 import { ref, onMounted, onBeforeUnmount, nextTick, markRaw } from 'vue';
+import { partnerManageIndexData } from '@/api/partner/merchant';
+import { useRouter } from 'vue-router';
 import * as echarts from 'echarts';
+const router = useRouter();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { cooperate_type } = toRefs<any>(proxy?.useDict('cooperate_type'));
 
 const lineChartRef = ref<HTMLElement | null>(null);
 const pieChartRef = ref<HTMLElement | null>(null);
@@ -130,82 +115,20 @@ const pieChartRef = ref<HTMLElement | null>(null);
 let lineChart: echarts.ECharts | null = null;
 let pieChart: echarts.ECharts | null = null;
 
-// 表格数据
-const partnerList = ref([
-  {
-    companyName: '上海星瑞科技有限公司',
-    contact: '张伟',
-    phone: '138****8000',
-    level: '战略伙伴',
-    status: '待审批',
-    joinTime: '2023-11-05 10:23:00'
-  },
-  {
-    companyName: '北京云创集团有限公司',
-    contact: '李娜',
-    phone: '139****5678',
-    level: '核心伙伴',
-    status: '已通过',
-    joinTime: '2023-11-04 15:45:12'
-  },
-  { companyName: '深圳速达物流中心', contact: '王强', phone: '137****9999', level: '普通伙伴', status: '已通过', joinTime: '2023-11-02 09:12:30' },
-  {
-    companyName: '广州联智网络股份有限公司',
-    contact: '陈静',
-    phone: '136****6666',
-    level: '核心伙伴',
-    status: '已驳回',
-    joinTime: '2023-10-30 14:20:00'
-  },
-  {
-    companyName: '杭州数智信息技术有限公司',
-    contact: '刘洋',
-    phone: '135****8888',
-    level: '战略伙伴',
-    status: '已通过',
-    joinTime: '2023-10-28 11:10:45'
-  }
-]);
-
-const getLevelType = (level: string) => {
-  switch (level) {
-    case '战略伙伴':
-      return 'danger';
-    case '核心伙伴':
-      return 'warning';
-    case '普通伙伴':
-      return 'info';
-    default:
-      return 'primary';
-  }
-};
+const partnerTotal = ref(0);
+const monthlyNew = ref(0);
+const quarterlyNew = ref(0);
+const cooperationProjectCount = ref(0);
+const partnerList = ref<any[]>([]);
 
-const initLineChart = () => {
+const initLineChart = (trendData: { month: string; count: number }[]) => {
   if (lineChartRef.value) {
     lineChart = markRaw(echarts.init(lineChartRef.value));
     const option = {
-      tooltip: {
-        trigger: 'axis'
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: ['5月', '6月', '7月', '8月', '9月', '10月']
-      },
-      yAxis: {
-        type: 'value',
-        splitLine: {
-          lineStyle: {
-            type: 'dashed'
-          }
-        }
-      },
+      tooltip: { trigger: 'axis' },
+      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+      xAxis: { type: 'category', boundaryGap: false, data: trendData.map((d) => d.month) },
+      yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
       series: [
         {
           name: '新增伙伴商',
@@ -217,10 +140,8 @@ const initLineChart = () => {
               { offset: 1, color: 'rgba(64,158,255,0.1)' }
             ])
           },
-          itemStyle: {
-            color: '#409EFF'
-          },
-          data: [20, 32, 25, 45, 60, 55]
+          itemStyle: { color: '#409EFF' },
+          data: trendData.map((d) => d.count)
         }
       ]
     };
@@ -228,53 +149,25 @@ const initLineChart = () => {
   }
 };
 
-const initPieChart = () => {
+const initPieChart = (typeData: { name: string; value: number }[]) => {
   if (pieChartRef.value) {
     pieChart = markRaw(echarts.init(pieChartRef.value));
+    const colors = ['#67C23A', '#E6A23C', '#909399', '#409EFF', '#F56C6C'];
     const option = {
-      tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c}家 ({d}%)'
-      },
-      legend: {
-        bottom: '0%',
-        left: 'center',
-        itemWidth: 10,
-        itemHeight: 10
-      },
+      tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}家 ({d}%)' },
+      legend: { bottom: '0%', left: 'center', itemWidth: 10, itemHeight: 10 },
       series: [
         {
-          name: '伙伴商评级',
+          name: '合作型态',
           type: 'pie',
           radius: ['45%', '70%'],
           center: ['50%', '45%'],
           avoidLabelOverlap: false,
-          itemStyle: {
-            borderRadius: 8,
-            borderColor: '#fff',
-            borderWidth: 2
-          },
-          label: {
-            show: false,
-            position: 'center'
-          },
-          emphasis: {
-            label: {
-              show: true,
-              fontSize: '18',
-              fontWeight: 'bold'
-            }
-          },
-          labelLine: {
-            show: false
-          },
-          data: [
-            { value: 1048, name: '普通伙伴', itemStyle: { color: '#909399' } },
-            { value: 735, name: '核心伙伴', itemStyle: { color: '#E6A23C' } },
-            { value: 580, name: '战略伙伴', itemStyle: { color: '#F56C6C' } },
-            { value: 484, name: '认证伙伴', itemStyle: { color: '#409EFF' } },
-            { value: 300, name: '观察期伙伴', itemStyle: { color: '#C0C4CC' } }
-          ]
+          itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
+          label: { show: false, position: 'center' },
+          emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } },
+          labelLine: { show: false },
+          data: typeData.map((d, i) => ({ ...d, itemStyle: { color: colors[i % colors.length] } }))
         }
       ]
     };
@@ -291,12 +184,27 @@ const handleResize = () => {
   }
 };
 
+const loadIndexData = async () => {
+  try {
+    const res = await partnerManageIndexData();
+    const data = res.data;
+    partnerTotal.value = data.partnerTotal ?? 0;
+    monthlyNew.value = data.monthlyNew ?? 0;
+    quarterlyNew.value = data.quarterlyNew ?? 0;
+    cooperationProjectCount.value = data.cooperationProjectCount ?? 0;
+    partnerList.value = data.latestPartners || [];
+    nextTick(() => {
+      initLineChart(data.monthlyTrend || []);
+      initPieChart(data.typeDistribution || []);
+      window.addEventListener('resize', handleResize);
+    });
+  } catch (error) {
+    console.error('获取首页数据失败:', error);
+  }
+};
+
 onMounted(() => {
-  nextTick(() => {
-    initLineChart();
-    initPieChart();
-    window.addEventListener('resize', handleResize);
-  });
+  loadIndexData();
 });
 
 onBeforeUnmount(() => {