From b48c9e16dee2747c3d45d30abeadd3fb254d92b1 Mon Sep 17 00:00:00 2001
From: Shikong <919411476@qq.com>
Date: Thu, 18 May 2023 10:43:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=B2=E7=99=BB=E5=BD=95=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E5=88=A4=E6=96=AD=20+=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/matrix-middle-service-web/index.html |  2 +-
 .../src/views/record/AMapLocation.vue         | 90 ++++++++++---------
 .../src/views/record/logic/login.ts           | 59 ++++++++++++
 3 files changed, 107 insertions(+), 44 deletions(-)
 create mode 100644 frontend/matrix-middle-service-web/src/views/record/logic/login.ts
diff --git a/frontend/matrix-middle-service-web/index.html b/frontend/matrix-middle-service-web/index.html
index f6911f3..57e1c55 100644
--- a/frontend/matrix-middle-service-web/index.html
+++ b/frontend/matrix-middle-service-web/index.html
@@ -14,7 +14,7 @@
       </script>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" class="w-full" style="height: 100vh"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue b/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
index 2b1a7cb..2d451c7 100644
--- a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
+++ b/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
@@ -1,11 +1,21 @@
 <template>
+    <q-scroll-area :style="{height: '100vh'}"
+                   :thumb-style="scrollArea.thumbStyle"
+                   :bar-style="scrollArea.barStyle">
     <div class="flex justify-start flex-wrap items-center">
-        <q-input v-model="authModel.account"  class="mx-1" placeholder="账号" outlined dense></q-input>
-        <q-input v-model="authModel.password" class="mx-1" placeholder="密码" type="password" outlined dense></q-input>
-        <q-btn @click="login">登录</q-btn>
+        <div class="flex" v-if="!view.loginStatus">
+            <q-input v-model="authModel.account"  class="mx-1" label="账号" dense></q-input>
+            <q-input v-model="authModel.password" class="mx-1" label="密码" type="password" dense></q-input>
+            <q-btn @click="login">登录</q-btn>
+        </div>
+        <div class="flex" v-else>
+            <q-btn @click="logout">切换账号</q-btn>
+        </div>
 
-        <DateTimeSelector v-model="date" range></DateTimeSelector>
-        <q-btn @click="search">查询</q-btn>
+        <div class="flex items-center">
+            <DateTimeSelector v-model="date" range></DateTimeSelector>
+            <q-btn @click="search">查询</q-btn>
+        </div>
     </div>
     <div class="flex justify-end flex-wrap items-center p-1">
         <q-toggle
@@ -65,7 +75,7 @@
         />
     </div>
     <div id="container">
-        <div class="fixed bg-amber-50 rounded-br z-max text-center" style="width: 300px" v-if="view.filterData.length > 0">
+        <div class="absolute bg-amber-50 rounded-br z-max text-center" style="width: 300px" v-if="view.filterData.length > 0">
             <div class="flex">
                 <div class="w-1/4">最高速度</div>
                 <div>{{view.speed.max}} km/h</div>
@@ -76,31 +86,35 @@
             </div>
         </div>
 
-        <div class="fixed bg-amber-50 rounded-tl z-max text-left absolute-bottom-right pl-1.5" style="width: 350px" v-if="view.lines.length > 0">
+        <div class="absolute bg-amber-50 rounded-tl z-max text-left absolute-bottom-right pl-1.5" style="width: 350px" v-if="view.lines.length > 0">
             路径数量: {{view.lines.length}}
 
-                <q-scroll-area :style="{height: view.lines.length * 22 > 250 ?'250px':view.lines.length * 22 + 'px'}" class="overflow-auto"
-                                :thumb-style="scrollArea.thumbStyle"
-                                :bar-style="scrollArea.barStyle">
-                    <div v-for="(item,i) in view.lines" :key="i" >
-                        {{item[0].locationTime}} ~ {{item[item.length-1].locationTime}}
-                    </div>
-                </q-scroll-area>
-
+            <q-scroll-area :style="{height: view.lines.length * 22 > 250 ?'250px':view.lines.length * 22 + 'px'}" class="overflow-auto"
+                            :thumb-style="scrollArea.thumbStyle"
+                            :bar-style="scrollArea.barStyle">
+                <div v-for="(item,i) in view.lines" :key="i" >
+                    {{item[0].locationTime}} ~ {{item[item.length-1].locationTime}}
+                </div>
+            </q-scroll-area>
         </div>
     </div>
+    </q-scroll-area>
 </template>
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import {reactive, ref} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import DateTimeSelector from "matrix-middle-service-web/src/components/DateTimeSelector.vue";
 import {useQuasar} from "quasar";
 import moment from "moment";
-import {auth} from "matrix-middle-service-web/src/api/auth/index";
-import {locationRecord} from "matrix-middle-service-web/src/api/location/record/index";
+import {locationRecord} from "matrix-middle-service-web/src/api/location/record";
 import {createCanvasDir} from "matrix-middle-service-web/src/views/record/logic/icon";
 import {getAvgSpeed, getMaxSpeed} from "matrix-middle-service-web/src/views/record/logic/speed";
 import {randomColorList} from "matrix-middle-service-web/src/views/record/logic/color";
+import {
+    checkLoginStatus,
+    loginRequest,
+    logoutHandler
+} from "matrix-middle-service-web/src/views/record/logic/login";
 const $q = useQuasar();
 const scrollArea = reactive({
     thumbStyle: {
@@ -119,6 +133,16 @@ const scrollArea = reactive({
     }
 })
 let canvasDir = createCanvasDir();
+
+function login(){
+    loginRequest(authModel).finally(()=>{
+        view.loginStatus = checkLoginStatus()
+    })
+}
+function logout(){
+    logoutHandler()
+    view.loginStatus = checkLoginStatus()
+}
 const date = ref({
     from: moment().startOf('d').format("YYYY-MM-DD HH:mm:ss"),
     to: moment().format("YYYY-MM-DD HH:mm:ss"),
@@ -145,6 +169,10 @@ const view = reactive({
         avg: 0
     },
     lines: [],
+    loginStatus: false,
+})
+onMounted(()=>{
+    view.loginStatus = checkLoginStatus()
 })
 const layers = reactive({
     satellite: {
@@ -171,30 +199,6 @@ const authModel = reactive({
     password: "",
 })
 
-function login(){
-    console.log("$q", $q)
-    auth.login(authModel).then((resp)=>{
-        let res = resp.data
-        console.log("login", res)
-        if(res.code !== 200){
-            $q.notify({
-                position: "top",
-                color:"warning",
-                message: res.data || res.msg,
-                timeout: 500,
-            })
-        } else {
-            $q.notify({
-                position: "top",
-                color:"positive",
-                message: "登录成功",
-                timeout: 500,
-            })
-            localStorage.setItem("token",res.data.token)
-        }
-    })
-}
-
 function toggleAutoView(v){
     if(v){
         map.setFitView()
@@ -589,7 +593,7 @@ function fixedLocation() {
 
 <style scoped lang="scss">
 #container {
-    width: 100vw;
+    width: 100%;
     height: 80vh;
 }
 </style>
diff --git a/frontend/matrix-middle-service-web/src/views/record/logic/login.ts b/frontend/matrix-middle-service-web/src/views/record/logic/login.ts
new file mode 100644
index 0000000..b569a23
--- /dev/null
+++ b/frontend/matrix-middle-service-web/src/views/record/logic/login.ts
@@ -0,0 +1,59 @@
+import {auth} from "matrix-middle-service-web/src/api/auth";
+import {Notify} from "quasar";
+import moment from "moment";
+
+export function checkLoginStatus(){
+    let user = localStorage.getItem("user")
+    let lastLogin = localStorage.getItem("lastLogin")
+    let token = localStorage.getItem("token")
+
+    return !!user &&
+        !!lastLogin &&
+        !!token &&
+        moment().diff(moment(lastLogin),"h") < 24
+}
+
+export function logoutHandler(){
+    localStorage.removeItem("user")
+    localStorage.removeItem("lastLogin")
+    localStorage.removeItem("token")
+}
+
+export function loginRequest(authModel){
+    logoutHandler()
+
+    return new Promise((resolve)=>{
+        auth.login(authModel).then((resp)=>{
+            let res = resp.data
+            console.log("login", res)
+            if(res.code !== 200){
+                Notify.create({
+                    position: "top",
+                    color:"warning",
+                    message: res.data || res.msg,
+                    timeout: 500,
+                })
+                resolve(false)
+            } else {
+                Notify.create({
+                    position: "top",
+                    color:"positive",
+                    message: "登录成功",
+                    timeout: 500,
+                })
+                localStorage.setItem("user", authModel.account)
+                localStorage.setItem("lastLogin", moment().format("YYYY-MM-DD HH:mm:ss"))
+                localStorage.setItem("token",res.data.token)
+                resolve(true)
+            }
+        }).catch((e)=>{
+            console.error(e)
+            Notify.create({
+                color: "negative",
+                message: "登录失败",
+                timeout: 500,
+            })
+            resolve(false)
+        })
+    })
+}
