From 3315f46a507d2e42e3dfdb1f144e9e40efed6257 Mon Sep 17 00:00:00 2001
From: wangzeyan <258785420@qq.com>
Date: Sun, 22 Jun 2025 14:58:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AF=AD=E6=B3=95=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                            |   8 +
 pages/market/data/index.vue           |  21 ++
 pages/market/data/statistics.vue      | 340 ++++++++++++++++++++++++++
 pages/market/reimbursement/detail.vue |   2 +-
 pages/market/reimbursement/list.vue   |   2 +-
 5 files changed, 371 insertions(+), 2 deletions(-)
 create mode 100644 pages/market/data/statistics.vue

diff --git a/pages.json b/pages.json
index 5ef9784..604cf58 100644
--- a/pages.json
+++ b/pages.json
@@ -618,6 +618,14 @@
 				"navigationBarBackgroundColor": "#292929",
 				"navigationBarTextStyle": "white"
 			}
+		},
+		{
+			"path": "pages/market/data/statistics",
+			"style": {
+				"navigationBarTitleText": "市场数据统计",
+				"navigationBarBackgroundColor": "#292929",
+				"navigationBarTextStyle": "white"
+			}
 		}
 
 
diff --git a/pages/market/data/index.vue b/pages/market/data/index.vue
index 0d79bbd..35a5299 100644
--- a/pages/market/data/index.vue
+++ b/pages/market/data/index.vue
@@ -4,6 +4,9 @@
     <!--自定义导航栏-->
     <view class="navbar_section">
       <view class="title">数据</view>
+      <view class="statistics-btn" @click="goToStatistics">
+        <text>统计表格</text>
+      </view>
     </view>
 
 <!--    市场人员展示-->
@@ -334,6 +337,13 @@ export default {
     this.init()
   },
   methods: {
+    // 跳转到统计页面
+    goToStatistics() {
+      uni.navigateTo({
+        url: '/pages/market/data/statistics'
+      });
+    },
+    
     async init(){
       await this.getUserInfo()
       await this.getPerformance()
@@ -604,6 +614,7 @@ export default {
   justify-content: center;
   align-items: center;
   background: #292929;
+  position: relative;
   .title{
     padding: 40rpx 0rpx;
 
@@ -615,6 +626,16 @@ export default {
     font-size: 30rpx;
     color: #fff;
   }
+  
+  .statistics-btn {
+    position: absolute;
+    right: 20rpx;
+    background-color: #29D3B4;
+    padding: 10rpx 20rpx;
+    border-radius: 30rpx;
+    font-size: 24rpx;
+    color: #fff;
+  }
 }
 
 
diff --git a/pages/market/data/statistics.vue b/pages/market/data/statistics.vue
new file mode 100644
index 0000000..b37b0e9
--- /dev/null
+++ b/pages/market/data/statistics.vue
@@ -0,0 +1,340 @@
+<!--市场数据统计页面-->
+<template>
+  <view class="main_box">
+    <!--自定义导航栏-->
+    <view class="navbar_section">
+      <view class="title">市场数据统计</view>
+    </view>
+
+    <!-- 顶部筛选 -->
+    <view class="filter-section">
+      <view class="filter-item">
+        <view class="label">统计时间：</view>
+        <picker mode="date" fields="month" :value="currentDate" @change="dateChange">
+          <view class="picker-value">{{currentDate}}</view>
+        </picker>
+      </view>
+    </view>
+
+    <!-- 市场人员资源量统计 -->
+    <view class="table-section">
+      <view class="table-title">市场人员资源量统计</view>
+      <view class="table-container">
+        <view class="table-header">
+          <view class="th th-person">人员</view>
+          <view class="th th-week">周数量</view>
+          <view class="th th-month">月数量</view>
+          <view class="th th-year">年数量</view>
+        </view>
+        <view class="table-body">
+          <view class="table-row" v-for="(item, index) in staffData" :key="index">
+            <view class="td td-person">{{item.name}}</view>
+            <view class="td td-week">{{item.weekCount}}</view>
+            <view class="td td-month">{{item.monthCount}}</view>
+            <view class="td td-year">{{item.yearCount}}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 校区人员资源渠道量 -->
+    <view class="table-section">
+      <view class="table-title">{{currentMonth}}月 - 年度校区人员资源渠道量</view>
+      <view class="table-container">
+        <view class="table-header">
+          <view class="th th-channel" style="width: 100px;">渠道</view>
+          <view class="th" v-for="(school, index) in schoolList" :key="index">{{school.name}}</view>
+          <view class="th th-total">渠道合计</view>
+        </view>
+        <view class="table-body">
+          <view class="table-row" v-for="(channel, index) in channelSchoolData" :key="index">
+            <view class="td td-channel" style="width: 100px;">{{channel.name}}</view>
+            <view class="td" v-for="(school, sIndex) in schoolList" :key="sIndex">
+              {{channel.schools[school.id] || 0}}
+            </view>
+            <view class="td td-total">{{channel.total}}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 市场人员资源渠道统计 -->
+    <view class="table-section">
+      <view class="table-title">{{currentMonth}}月 - 年度市场人员资源渠道统计</view>
+      <view class="table-container">
+        <view class="table-header">
+          <view class="th th-channel" style="width: 100px;">渠道</view>
+          <view class="th" v-for="(staff, index) in marketStaffList" :key="index">市场{{staff.name}}</view>
+          <view class="th th-total">资源合计</view>
+        </view>
+        <view class="table-body">
+          <view class="table-row" v-for="(channel, index) in channelStaffData" :key="index">
+            <view class="td td-channel" style="width: 100px;">{{channel.name}}</view>
+            <view class="td" v-for="(staff, sIndex) in marketStaffList" :key="sIndex">
+              {{channel.staffs[staff.id] || 0}}
+            </view>
+            <view class="td td-total">{{channel.total}}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import apiRoute from '@/api/apiRoute.js';
+
+export default {
+  data() {
+    return {
+      currentDate: this.formatDate(new Date()),
+      currentMonth: new Date().getMonth() + 1,
+      // 市场人员资源量统计
+      staffData: [
+        { name: 'A', weekCount: 0, monthCount: 0, yearCount: 0 },
+        { name: 'B', weekCount: 0, monthCount: 0, yearCount: 0 },
+        { name: 'C', weekCount: 0, monthCount: 0, yearCount: 0 },
+        { name: 'D', weekCount: 0, monthCount: 0, yearCount: 0 },
+        { name: 'E', weekCount: 0, monthCount: 0, yearCount: 0 }
+      ],
+      // 校区列表
+      schoolList: [
+        { id: 1, name: '校区1' },
+        { id: 2, name: '校区2' },
+        { id: 3, name: '校区3' },
+        { id: 4, name: '校区4' },
+        { id: 5, name: '校区5' }
+      ],
+      // 渠道列表
+      channelList: [
+        { id: 1, name: '地推' },
+        { id: 2, name: '转介绍' },
+        { id: 3, name: '美团/大众' },
+        { id: 4, name: '抖音' },
+        { id: 5, name: '小红书' },
+        { id: 6, name: '其他' }
+      ],
+      // 市场人员列表
+      marketStaffList: [
+        { id: 'A', name: 'A' },
+        { id: 'B', name: 'B' },
+        { id: 'C', name: 'C' },
+        { id: 'D', name: 'D' }
+      ],
+      // 校区渠道数据
+      channelSchoolData: [],
+      // 人员渠道数据
+      channelStaffData: []
+    }
+  },
+  onLoad() {
+    this.initData();
+  },
+  methods: {
+    // 格式化日期为 YYYY-MM
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      return `${year}-${month}`;
+    },
+    
+    // 日期选择器变更
+    dateChange(e) {
+      this.currentDate = e.detail.value;
+      const [year, month] = this.currentDate.split('-');
+      this.currentMonth = parseInt(month);
+      this.initData();
+    },
+    
+    // 初始化数据
+    initData() {
+      // 模拟获取数据，实际项目中应该调用API
+      this.getStaffStatistics();
+      this.getChannelSchoolStatistics();
+      this.getChannelStaffStatistics();
+    },
+    
+    // 获取人员资源量统计
+    getStaffStatistics() {
+      // 模拟数据，实际项目中应该调用API
+      // 示例：apiRoute.getStaffStatistics({date: this.currentDate}).then(res => {})
+      
+      // 模拟随机数据
+      this.staffData = this.staffData.map(staff => {
+        const monthCount = Math.floor(Math.random() * 100);
+        return {
+          ...staff,
+          weekCount: Math.floor(Math.random() * 30),
+          monthCount: monthCount,
+          yearCount: monthCount + Math.floor(Math.random() * 200)
+        }
+      });
+    },
+    
+    // 获取校区渠道统计
+    getChannelSchoolStatistics() {
+      // 模拟数据，实际项目中应该调用API
+      this.channelSchoolData = this.channelList.map(channel => {
+        const schools = {};
+        let total = 0;
+        
+        this.schoolList.forEach(school => {
+          const count = Math.floor(Math.random() * 50);
+          schools[school.id] = count;
+          total += count;
+        });
+        
+        return {
+          id: channel.id,
+          name: channel.name,
+          schools,
+          total
+        }
+      });
+    },
+    
+    // 获取人员渠道统计
+    getChannelStaffStatistics() {
+      // 模拟数据，实际项目中应该调用API
+      this.channelStaffData = this.channelList.map(channel => {
+        const staffs = {};
+        let total = 0;
+        
+        this.marketStaffList.forEach(staff => {
+          const count = Math.floor(Math.random() * 40);
+          staffs[staff.id] = count;
+          total += count;
+        });
+        
+        return {
+          id: channel.id,
+          name: channel.name,
+          staffs,
+          total
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main_box {
+  min-height: 100vh;
+  background-color: #1a1a1a;
+  color: #ffffff;
+  padding-bottom: 30rpx;
+}
+
+.navbar_section {
+  background-color: #1a1a1a;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+  }
+}
+
+.filter-section {
+  padding: 20rpx;
+  background-color: #222222;
+  margin: 20rpx;
+  border-radius: 10rpx;
+  
+  .filter-item {
+    display: flex;
+    align-items: center;
+    
+    .label {
+      font-size: 28rpx;
+      margin-right: 10rpx;
+    }
+    
+    .picker-value {
+      padding: 10rpx 20rpx;
+      background-color: #333333;
+      border-radius: 6rpx;
+      font-size: 28rpx;
+    }
+  }
+}
+
+.table-section {
+  margin: 30rpx 20rpx;
+  background-color: #222222;
+  border-radius: 10rpx;
+  overflow: hidden;
+  
+  .table-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    padding: 20rpx;
+    border-bottom: 1px solid #333333;
+  }
+  
+  .table-container {
+    width: 100%;
+    overflow-x: auto;
+  }
+  
+  .table-header {
+    display: flex;
+    background-color: #333333;
+    
+    .th {
+      padding: 15rpx 10rpx;
+      font-size: 26rpx;
+      text-align: center;
+      flex: 1;
+      min-width: 100rpx;
+      font-weight: bold;
+    }
+  }
+  
+  .table-body {
+    .table-row {
+      display: flex;
+      border-bottom: 1px solid #333333;
+      
+      &:last-child {
+        border-bottom: none;
+      }
+      
+      .td {
+        padding: 15rpx 10rpx;
+        font-size: 26rpx;
+        text-align: center;
+        flex: 1;
+        min-width: 100rpx;
+      }
+    }
+  }
+  
+  .th-person, .td-person {
+    min-width: 80rpx;
+    flex: 0.8;
+  }
+  
+  .th-week, .td-week,
+  .th-month, .td-month,
+  .th-year, .td-year {
+    flex: 1;
+  }
+  
+  .th-channel, .td-channel {
+    flex: 1.2;
+    text-align: left;
+    padding-left: 20rpx;
+  }
+  
+  .th-total, .td-total {
+    flex: 1.2;
+    font-weight: bold;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pages/market/reimbursement/detail.vue b/pages/market/reimbursement/detail.vue
index dcd28b7..62f14af 100644
--- a/pages/market/reimbursement/detail.vue
+++ b/pages/market/reimbursement/detail.vue
@@ -22,7 +22,7 @@
       </view>
       <view class="row">
         <view class="label">状态</view>
-        <view class="value status-{{detail.status}}">{{ statusMap[detail.status] || detail.status }}</view>
+        <view :class="['value', 'status-' + detail.status]">{{ statusMap[detail.status] || detail.status }}</view>
       </view>
       <view class="row">
         <view class="label">创建时间</view>
diff --git a/pages/market/reimbursement/list.vue b/pages/market/reimbursement/list.vue
index bec241c..bfc9628 100644
--- a/pages/market/reimbursement/list.vue
+++ b/pages/market/reimbursement/list.vue
@@ -32,7 +32,7 @@
       </view>
       <view class="row">
         <view class="label">状态：</view>
-        <view class="value status-{{item.status}}">{{ statusMap[item.status] || item.status }}</view>
+        <view :class="['value', 'status-' + item.status]">{{ statusMap[item.status] || item.status }}</view>
       </view>
       <view class="row">
         <view class="label">创建时间：</view>