首页

src/views/HomeView.vue

@@ -22,7 +22,7 @@
                         </el-icon>
                         <div class="flex flex-col items-end">
                             <span class="text-[#999] text-base">今日新增</span>
-                            <span class="text-2xl font-bold mt-2">13 (人)</span>
+                            <span class="text-2xl font-bold mt-2">{{ userDatas.today }} (人)</span>
                         </div>
                     </div>
                 </el-card>
@@ -35,7 +35,7 @@
                         </el-icon>
                         <div class="flex flex-col items-end">
                             <span class="text-[#999] text-base">今日互动</span>
-                            <span class="text-2xl font-bold mt-2">20 (次)</span>
+                            <span class="text-2xl font-bold mt-2">{{ chatDatas.today }} (次)</span>
                         </div>
                     </div>
                 </el-card>
@@ -108,7 +108,25 @@ watch(activeName, () => {
     initChart()
 })
 
-function initChart() {
+async function initChart() {
+    if (activeName.value === 'user') {
+        await http
+            .get('/admin/users/getDatas', {
+                apiUserId: user.apiUserId
+            })
+            .then((res) => {
+                userDatas.value = res
+            })
+    } else {
+        await http
+            .get('/chat/getDatas', {
+                apiUserId: user.apiUserId
+            })
+            .then((res) => {
+                chatDatas.value = res
+            })
+    }
+
     if (myChart.value) {
         myChart.value.dispose()
         myChart.value = null
@@ -127,7 +145,10 @@ function initChart() {
             {
                 text: activeName.value === 'user' ? '全部用户' : '互动次数',
                 // subtext: userDatas.value.api + userDatas.value.user + '人',
-                subtext: activeName.value === 'user' ? 50 + '人' : 500 + '次',
+                subtext:
+                    activeName.value === 'user'
+                        ? userDatas.value.api + userDatas.value.user + '人'
+                        : chatDatas.value.api + chatDatas.value.user + '次',
                 textStyle: {
                     fontSize: 14,
                     color: isDark.value ? '#fff' : '#000',
@@ -188,19 +209,29 @@ function initChart() {
                 name: '注册用户',
                 type: 'bar',
                 stack: 'one',
-                data: activeName.value === 'user' ? [5, 3, 2, 1, 6, 7, 4] : [30, 20, 13, 50, 21, 12, 30]
-                // data: Object.keys(userDatas.value.week).map((key) => {
-                //     return userDatas.value.week[key].user
-                // })
+                // data: activeName.value === 'user' ? [5, 3, 2, 1, 6, 7, 4] : [30, 20, 13, 50, 21, 12, 30]
+                data:
+                    activeName.value === 'user'
+                        ? Object.keys(userDatas.value.week).map((key) => {
+                              return userDatas.value.week[key].user
+                          })
+                        : Object.keys(chatDatas.value.week).map((key) => {
+                              return chatDatas.value.week[key].user
+                          })
             },
             {
                 name: '内部用户',
                 type: 'bar',
                 stack: 'one',
-                data: activeName.value === 'user' ? [3, 4, 2, 4, 5, 6, 2] : [20, 12, 15, 16, 29, 39, 10]
-                // data: Object.keys(userDatas.value.week).map((key) => {
-                //     return userDatas.value.week[key].api
-                // })
+                // data: activeName.value === 'user' ? [3, 4, 2, 4, 5, 6, 2] : [20, 12, 15, 16, 29, 39, 10]
+                data:
+                    activeName.value === 'user'
+                        ? Object.keys(userDatas.value.week).map((key) => {
+                              return userDatas.value.week[key].api
+                          })
+                        : Object.keys(chatDatas.value.week).map((key) => {
+                              return chatDatas.value.week[key].api
+                          })
             },
             {
                 id: 'pie',
@@ -213,10 +244,11 @@ function initChart() {
                     borderRadius: 5
                 },
                 data: [
-                    // { value: userDatas.value.user, name: '注册用户' },
-                    // { value: userDatas.value.api, name: '内部用户' }
-                    { value: activeName.value === 'user' ? 35 : 100, name: '注册用户' },
-                    { value: activeName.value === 'user' ? 15 : 400, name: '内部用户' }
+                    {
+                        value: activeName.value === 'user' ? userDatas.value.user : chatDatas.value.user,
+                        name: '注册用户'
+                    },
+                    { value: activeName.value === 'user' ? userDatas.value.api : chatDatas.value.api, name: '内部用户' }
                 ]
             }
         ]
@@ -228,17 +260,16 @@ function initChart() {
 const userDatas = ref({
     today: 0
 })
+
+const chatDatas = ref({
+    today: 0
+})
 const role = ref('admin')
 onMounted(() => {
     http.get(`/auth/admin/getRole`).then((res) => {
         if (res === 'api') {
             role.value = 'api'
-            http.get('/admin/users/getDatas', {
-                apiUserId: user.apiUserId
-            }).then((res) => {
-                userDatas.value = res
-                initChart()
-            })
+            initChart()
         }
     })
 })