From d76d140e1525dd3b68bbd065c3297ea208c66af8 Mon Sep 17 00:00:00 2001
From: CakeAL <1742507190@qq.com>
Date: Fri, 21 Jun 2024 18:52:11 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(UserLoginLog):=20=E7=AE=80?=
 =?UTF-8?q?=E5=8D=95=E5=B1=95=E7=A4=BA=E6=AF=8F=E6=97=A5=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts            |   2 +
 package.json               |   1 +
 pnpm-lock.yaml             |   8 +++
 src-tauri/src/commands.rs  |   2 +-
 src/App.vue                |   2 +
 src/components/Menu.vue    |  13 ++++
 src/pages/MonthPay.vue     |   2 +-
 src/pages/UserLoginLog.vue | 124 +++++++++++++++++++++++++++++++++++++
 8 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/UserLoginLog.vue

diff --git a/components.d.ts b/components.d.ts
index 8d10f2a..b515e12 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,11 +11,13 @@ declare module 'vue' {
     Menu: typeof import('./src/components/Menu.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
     NDataTable: typeof import('naive-ui')['NDataTable']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NIcon: typeof import('naive-ui')['NIcon']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NResult: typeof import('naive-ui')['NResult']
     NSelect: typeof import('naive-ui')['NSelect']
     NSplit: typeof import('naive-ui')['NSplit']
+    NTable: typeof import('naive-ui')['NTable']
   }
 }
diff --git a/package.json b/package.json
index cf7d52b..b3cdefa 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^1",
+    "dayjs": "^1.11.11",
     "vue": "^3.3.4"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8a04ac..97bb918 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@tauri-apps/api':
         specifier: ^1
         version: 1.5.6
+      dayjs:
+        specifier: ^1.11.11
+        version: 1.11.11
       vue:
         specifier: ^3.3.4
         version: 3.4.27(typescript@5.4.5)
@@ -531,6 +534,9 @@ packages:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
 
+  dayjs@1.11.11:
+    resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==}
+
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
@@ -1228,6 +1234,8 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.6
 
+  dayjs@1.11.11: {}
+
   de-indent@1.0.2: {}
 
   debug@4.3.4:
diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index 8d03f3f..8f72deb 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -156,7 +156,7 @@ pub async fn load_user_login_log(
     start_date: i64,
     end_date: i64,
 ) -> Result<String, String> {
-    if start_date >= end_date {
+    if start_date > end_date {
         return Err("起始日期比结束日期更大。。。".to_string());
     }
     let session_id = match app_state.jsessionid.read().unwrap().clone() {
diff --git a/src/App.vue b/src/App.vue
index cb5b311..0b11674 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@ import About from "./pages/About.vue";
 import NotFound from "./pages/NotFound.vue";
 import UserInfo from "./pages/UserInfo.vue";
 import MonthPay from "./pages/MonthPay.vue";
+import UserLoginLog from "./pages/UserLoginLog.vue"
 type RouteComponent = DefineComponent<{}, {}, any>;
 
 interface Routes {
@@ -18,6 +19,7 @@ const routes: Routes = {
   "/about": About,
   "/userinfo": UserInfo,
   "/monthpay": MonthPay,
+  "/userloginlog": UserLoginLog
 };
 
 // Ref for current path
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 7d0b9ed..6f62825 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -14,6 +14,7 @@ import {
   InformationCircleOutline,
   ListOutline,
   CashOutline,
+  BookOutline,
 } from "@vicons/ionicons5";
 
 function renderIcon(icon: Component) {
@@ -57,6 +58,18 @@ const menuOptions: MenuOption[] = [
     key: "monthpay",
     icon: renderIcon(CashOutline),
   },
+  {
+    label: () =>
+      h(
+        "a",
+        {
+          href: "#/userloginlog",
+        },
+        "每日使用详情"
+      ),
+    key: "userloginlog",
+    icon: renderIcon(BookOutline),
+  },
   {
     label: () =>
       h(
diff --git a/src/pages/MonthPay.vue b/src/pages/MonthPay.vue
index d2568f6..d0ebd92 100644
--- a/src/pages/MonthPay.vue
+++ b/src/pages/MonthPay.vue
@@ -91,7 +91,7 @@ const mb2gb = (mb: number | undefined) => {
       @update:value="load_month_pay"
     />
     <div v-if="month_pay !== undefined" class="show-data">
-      <p>这一年移一共花费 {{ month_pay?.year_cost }} 元。</p>
+      <p>这一年一共花费 {{ month_pay?.year_cost }} 元。</p>
       <p>
         总共使用时长 {{ month_pay?.year_used_duration }} 分钟，约合
         {{ min2hour(month_pay?.year_used_duration) }} 小时。
diff --git a/src/pages/UserLoginLog.vue b/src/pages/UserLoginLog.vue
new file mode 100644
index 0000000..f1b8f1a
--- /dev/null
+++ b/src/pages/UserLoginLog.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { invoke } from "@tauri-apps/api/tauri";
+import { useMessage } from "naive-ui";
+import dayjs from "dayjs";
+
+interface UserLoginLog {
+  ipv4_up: number;
+  ipv4_down: number;
+  ipv6_up: number;
+  ipv6_down: number;
+  used_flow: number; // 实际上就是 ipv4 下行
+  cost: number;
+  used_duration: number;
+  every_login_data: EveryLoginData[];
+}
+
+interface EveryLoginData {
+  online_time: number; // 时间戳，UTC
+  offline_time: number;
+  used_duration: number;
+  used_flow: number; // 实际上就是 ipv4 下行
+  cost: number;
+  ipv4_up: number;
+  ipv4_down: number;
+  ipv6_up: number;
+  ipv6_down: number;
+  ipv4_addr: string;
+  ipv6_addr: string;
+}
+
+const pop_message = useMessage();
+const date_range = ref<[number, number]>([Date.now(), Date.now()]);
+const user_login_log = ref<UserLoginLog | null>(null);
+
+const get_user_login_log = async () => {
+  let res = await invoke("load_user_login_log", {
+    startDate: Math.floor(date_range.value[0] / 1000),
+    endDate: Math.floor(date_range.value[1] / 1000),
+  }).catch((err) => pop_message.error(err));
+  // console.log(res as string);
+  user_login_log.value = JSON.parse(res as string);
+  if (user_login_log.value !== null) {
+  }
+};
+
+const unix_format = (unix: number) => {
+  return dayjs.unix(unix - 8 * 3600).format("YYYY-MM-DD HH:mm:ss");
+};
+</script>
+
+<template>
+  <div class="container">
+    <h2>每日使用详情</h2>
+    <p>选择一个时间段：</p>
+    <n-date-picker
+      v-model:value="date_range"
+      type="daterange"
+      clearable
+      @update:value="get_user_login_log"
+    />
+    <div v-if="user_login_log !== null" class="show-data">
+      <p>该段时间：</p>
+      <p>
+        ipv4 上行：{{ user_login_log?.ipv4_up }} MB；下行：{{
+          user_login_log?.ipv4_down
+        }}
+        MB。
+      </p>
+      <p>
+        ipv6 上行：{{ user_login_log?.ipv6_up }} MB；下行：{{
+          user_login_log?.ipv6_down
+        }}
+        MB。
+      </p>
+      <p>消耗校园网流量：{{ user_login_log?.used_flow }} MB。</p>
+      <p>花费金额：{{ user_login_log?.cost }} 元。</p>
+      <p>使用时长: {{ user_login_log?.used_duration }} 分钟。</p>
+
+      <n-table :bordered="false" :single-line="false">
+        <thead>
+          <tr>
+            <th>上线时间</th>
+            <th>下线时间</th>
+            <th>在线时长(分钟)</th>
+            <th>消耗流量(MB)</th>
+            <th>花费(元)</th>
+            <th>ipv4 上行(MB)</th>
+            <th>ipv4 下行(MB)</th>
+            <th>ipv6 上行(MB)</th>
+            <th>ipv6 下行(MB)</th>
+            <th>ipv4 地址</th>
+            <th>ipv6 地址</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(log_info, index) in user_login_log?.every_login_data"
+            :key="index"
+          >
+            <th>{{ unix_format(log_info.online_time) }}</th>
+            <th>{{ unix_format(log_info.offline_time) }}</th>
+            <th>{{ log_info.used_duration }}</th>
+            <th>{{ log_info.used_flow }}</th>
+            <th>{{ log_info.cost }}</th>
+            <th>{{ log_info.ipv4_up }}</th>
+            <th>{{ log_info.ipv4_down }}</th>
+            <th>{{ log_info.ipv6_up }}</th>
+            <th>{{ log_info.ipv6_down }}</th>
+            <th>{{ log_info.ipv4_addr }}</th>
+            <th>{{ log_info.ipv6_addr }}</th>
+          </tr>
+        </tbody>
+      </n-table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  height: 100vh;
+  overflow: auto;
+}
+</style>