首页新增统计数据

src/api/dashboard.js

@@ -25,4 +25,13 @@ export function getIndexUserStatistic(data) {
         method: 'post',
         data
     })
+}
+
+// 获取首页顶部数据
+export function getTopCount(params) {
+    return request({
+        url: '/agent-service/index/getTopCount',
+        method: 'get',
+        params
+    })
 }

src/router/modules/userModule.js

@@ -4,16 +4,16 @@ import { createNameComponent } from '../createNode'
 const route = [
     {
         path: '/userModule',
-        redirect: '/userModule/onlineList/index',
+        redirect: '/userModule/userList/index',
         component: Layout,
         meta: { title: '用户模块', icon: 'iconfont icon-user' },
         children: [
-            {
+            /* {
                 path: 'onlineList/index',
                 name: 'OnlineList',
                 component: createNameComponent(() => import('@/views/main/userModule/onlineList.vue')),
                 meta: { title: '在线列表' },
-            },
+            }, */
             {
                 path: 'userList/index',
                 name: 'UserList',

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

@@ -4,32 +4,43 @@
   </div>
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue'
+<script lang="js" setup>
+import { ref, onBeforeMount } from 'vue'
 import Row from './row.vue'
-export default defineComponent({
-  components: {
-    Row
-  },
-  setup() {
-    const list = [
-      { id: 1, name: '总广告数', data: '1057', color: '#4e73df', icon: 'sfont system-yonghu' },
-      { id: 2, name: '封禁人数', data: '55', color: '#1cc88a', icon: 'sfont system-xiaoxi' },
-      { id: 3, name: '提现笔数', data: '827', color: '#36b9cc', icon: 'sfont system-shuliang_mianxing' },
-      { id: 4, name: '提现金额', data: '64581', color: '#f6c23e', icon: 'sfont system-jindutiaoshouyidaozhang' }
+import { getTopCount } from '@/api/dashboard.js'
+
+const list = ref([
+  { id: 1, name: '用户数', data: '31258', color: '#4e73df', icon: 'sfont system-yonghu' },
+  { id: 2, name: '封禁人数', data: '5542', color: '#1cc88a', icon: 'sfont system-xiaoxi' },
+  { id: 3, name: '激励视频数', data: '108827', color: '#36b9cc', icon: 'sfont system-shuliang_mianxing' },
+  { id: 4, name: '预估收益', data: '64581.04', color: '#f6c23e', icon: 'sfont system-jindutiaoshouyidaozhang' }
+])
+
+const getTopCountData = async () => {
+  try {
+    const res = await getTopCount()
+    const { adCount, userCount, riskCount, revenue } = res.data
+    list.value = [
+      { id: 1, name: '用户数', data: userCount || 0, color: '#4e73df', icon: 'sfont system-yonghu' },
+      { id: 2, name: '封禁人数', data: riskCount || 0, color: '#1cc88a', icon: 'sfont system-xiaoxi' },
+      { id: 3, name: '激励视频数', data: adCount || 0, color: '#36b9cc', icon: 'sfont system-shuliang_mianxing' },
+      { id: 4, name: '预估收益', data: parseFloat(revenue || 0).toFixed(2), color: '#f6c23e', icon: 'sfont system-jindutiaoshouyidaozhang' }
     ]
-    return {
-      list
-    }
+  } catch (e) {
+    console.log('错误', e)
   }
+}
+
+onBeforeMount(() => {
+  getTopCountData()
 })
 </script>
 
 <style lang="scss" scoped>
-  .card-list {
-    width: calc(100% + 20px);
-    margin-left: -10px;
-    display: flex;
-    flex-wrap: wrap;
-  }
+.card-list {
+  width: calc(100% + 20px);
+  margin-left: -10px;
+  display: flex;
+  flex-wrap: wrap;
+}
 </style>