用户数据模块

src/components/UserStatistics/UserStatisticsSearch.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="search-area">
+    <!-- 题目类型 -->
+    <div class="search-item">
+      <label>题目类型</label>
+      <select v-model="filters.type">
+        <option value="">全部</option>
+        <option value="股票知识">股票知识</option>
+        <option value="基金知识">基金知识</option>
+        <option value="投资策略">投资策略</option>
+      </select>
+    </div>
+
+    <!-- 时间选择 -->
+    <div class="search-item">
+      <label>时间选择</label>
+      <input type="date" v-model="filters.startDate" />
+      <span style="margin: 0 10px;">至</span>
+      <input type="date" v-model="filters.endDate" />
+    </div>
+
+    <!-- 用户名称 -->
+    <div class="search-item">
+      <label>用户名称</label>
+      <input type="text" v-model="filters.userName" placeholder="请输入用户名称" />
+    </div>
+
+    <!-- 精网号 -->
+    <div class="search-item">
+      <label>精网号</label>
+      <input type="text" v-model="filters.jingwangId" placeholder="请输入精网号" />
+    </div>
+
+    <!-- 身份 -->
+    <div class="search-item">
+      <label>身份</label>
+      <select v-model="filters.role">
+        <option value="">全部</option>
+        <option value="学员">学员</option>
+        <option value="讲师">讲师</option>
+        <option value="管理员">管理员</option>
+      </select>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="btn-group">
+      <button class="btn-red" @click="searchUserStatistics">查找</button>
+      <button class="btn-red" @click="exportToExcel">Excel导出</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserStatisticsSearch',
+  data() {
+    return {
+      filters: {
+        type: '',
+        startDate: '',
+        endDate: '',
+        userName: '',
+        jingwangId: '',
+        role: ''
+      }
+    }
+  },
+  methods: {
+    async searchUserStatistics() {
+      // 实现搜索逻辑
+      console.log('搜索条件:', this.filters)
+      // 这里可以调用API获取数据
+    },
+    exportToExcel() {
+      // 实现Excel导出逻辑
+      console.log('导出Excel')
+    }
+  }
+}
+</script>

src/components/UserStatistics/UserStatisticsTable.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="table-container">
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>用户名称</th>
+          <th>用户身份</th>
+          <th>精网号</th>
+          <th>题目类型</th>
+          <th>得分</th>
+          <th>提交时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="user in users" :key="user.id">
+          <td>{{ user.id }}</td>
+          <td>{{ user.userName }}</td>
+          <td>{{ user.role }}</td>
+          <td>{{ user.jingwangId }}</td>
+          <td>{{ user.questionType }}</td>
+          <td>{{ user.score }}</td>
+          <td>{{ user.submitTime }}</td>
+          <td>
+            <button class="btn-red small" @click="viewUser(user)">查看</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserStatisticsTable',
+  props: {
+    users: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    viewUser(user) {
+      // 查看用户详情逻辑
+      console.log('查看用户:', user)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-container {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: white;
+}
+
+th,
+td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  background-color: #f2f2f2;
+  font-weight: normal;
+  color: #333;
+}
+
+tr:hover {
+  background-color: #f9f9f9;
+}
+</style>

src/views/UserStatistics.vue

@@ -1,18 +1,62 @@
 <template>
+  <!-- 用户统计数据页面容器 -->
   <div class="user-statistics">
-    <p>用户统计数据模块</p>
-    <p>当前模块内容暂未开发</p>
+    <!-- 用户统计数据搜索组件 -->
+    <UserStatisticsSearch />
+    <!-- 用户统计数据表格组件，传递用户数据 -->
+    <UserStatisticsTable :users="userStatistics" />
   </div>
 </template>
 
 <script>
+// 导入用户统计数据搜索组件
+import UserStatisticsSearch from '@/components/UserStatistics/UserStatisticsSearch.vue'
+// 导入用户统计数据表格组件
+import UserStatisticsTable from '@/components/UserStatistics/UserStatisticsTable.vue'
+
 export default {
-  name: 'UserStatistics'
+  // 组件名称：用户统计数据
+  name: 'UserStatistics',
+  // 注册子组件
+  components: {
+    UserStatisticsSearch,
+    UserStatisticsTable
+  },
+  // 组件数据
+  data() {
+    return {
+      // 用户统计数据数组
+      userStatistics: [
+        {
+          id: 1,                    // 用户ID
+          userName: '张三',          // 用户名
+          role: '学员',             // 用户角色
+          jingwangId: '90048184',   // 京网ID
+          questionType: '股票知识',  // 题目类型
+          score: 50,                // 分数
+          submitTime: '2025-11-04 10:00:00' // 提交时间
+        }
+      ]
+    }
+  },
+  // 组件方法
+  methods: {
+    // 获取用户统计数据的方法
+    fetchUserStatistics() {
+      // 实现从后端获取数据的逻辑
+    }
+  },
+  // 生命周期钩子：组件挂载完成后执行
+  mounted() {
+    // 页面加载时获取数据
+    this.fetchUserStatistics()
+  }
 }
 </script>
 
 <style scoped>
+/* 用户统计数据页面样式 */
 .user-statistics {
-  padding: 20px;
+  padding: 20px;  /* 内边距20px */
 }
 </style>