Shikong/sk-matrix-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

已登录状态判断 + 样式调整

Browse Source
This commit is contained in:
Shikong 2023-05-18 10:43:41 +08:00
parent 3693b75706
commit b48c9e16de
3 changed files with 107 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/matrix-middle-service-web/index.html
View File

@ -14,7 +14,7 @@
</script> </script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app" class="w-full" style="height: 100vh"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

70
frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
View File

@ -1,12 +1,22 @@
<template> <template>
<q-scroll-area :style="{height: '100vh'}"
:thumb-style="scrollArea.thumbStyle"
:bar-style="scrollArea.barStyle">
<div class="flex justify-start flex-wrap items-center"> <div class="flex justify-start flex-wrap items-center">
<q-input v-model="authModel.account" class="mx-1" placeholder="账号" outlined dense></q-input> <div class="flex" v-if="!view.loginStatus">
<q-input v-model="authModel.password" class="mx-1" placeholder="密码" type="password" outlined dense></q-input> <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> <q-btn @click="login">登录</q-btn>
</div>
<div class="flex" v-else>
<q-btn @click="logout">切换账号</q-btn>
</div>
<div class="flex items-center">
<DateTimeSelector v-model="date" range></DateTimeSelector> <DateTimeSelector v-model="date" range></DateTimeSelector>
<q-btn @click="search">查询</q-btn> <q-btn @click="search">查询</q-btn>
</div> </div>
</div>
<div class="flex justify-end flex-wrap items-center p-1"> <div class="flex justify-end flex-wrap items-center p-1">
<q-toggle <q-toggle
label="显示所有路径点" label="显示所有路径点"
@ -65,7 +75,7 @@
/> />
</div> </div>
<div id="container"> <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="flex">
<div class="w-1/4">最高速度</div> <div class="w-1/4">最高速度</div>
<div>{{view.speed.max}} km/h</div> <div>{{view.speed.max}} km/h</div>
@ -76,7 +86,7 @@
</div> </div>
</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}} 路径数量: {{view.lines.length}}
<q-scroll-area :style="{height: view.lines.length * 22 > 250 ?'250px':view.lines.length * 22 + 'px'}" class="overflow-auto" <q-scroll-area :style="{height: view.lines.length * 22 > 250 ?'250px':view.lines.length * 22 + 'px'}" class="overflow-auto"
@ -86,21 +96,25 @@
{{item[0].locationTime}} ~ {{item[item.length-1].locationTime}} {{item[0].locationTime}} ~ {{item[item.length-1].locationTime}}
</div> </div>
</q-scroll-area> </q-scroll-area>
</div> </div>
</div> </div>
</q-scroll-area>
</template> </template>
<script setup> <script setup>
import AMapLoader from '@amap/amap-jsapi-loader'; 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 DateTimeSelector from "matrix-middle-service-web/src/components/DateTimeSelector.vue";
import {useQuasar} from "quasar"; import {useQuasar} from "quasar";
import moment from "moment"; 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";
import {locationRecord} from "matrix-middle-service-web/src/api/location/record/index";
import {createCanvasDir} from "matrix-middle-service-web/src/views/record/logic/icon"; 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 {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 {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 $q = useQuasar();
const scrollArea = reactive({ const scrollArea = reactive({
thumbStyle: { thumbStyle: {
@ -119,6 +133,16 @@ const scrollArea = reactive({
} }
}) })
let canvasDir = createCanvasDir(); let canvasDir = createCanvasDir();
function login(){
loginRequest(authModel).finally(()=>{
view.loginStatus = checkLoginStatus()
})
}
function logout(){
logoutHandler()
view.loginStatus = checkLoginStatus()
}
const date = ref({ const date = ref({
from: moment().startOf('d').format("YYYY-MM-DD HH:mm:ss"), from: moment().startOf('d').format("YYYY-MM-DD HH:mm:ss"),
to: moment().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 avg: 0
}, },
lines: [], lines: [],
loginStatus: false,
})
onMounted(()=>{
view.loginStatus = checkLoginStatus()
}) })
const layers = reactive({ const layers = reactive({
satellite: { satellite: {
@ -171,30 +199,6 @@ const authModel = reactive({
password: "", 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){ function toggleAutoView(v){
if(v){ if(v){
map.setFitView() map.setFitView()
@ -589,7 +593,7 @@ function fixedLocation() {
<style scoped lang="scss"> <style scoped lang="scss">
#container { #container {
width: 100vw; width: 100%;
height: 80vh; height: 80vh;
} }
</style> </style>

59
frontend/matrix-middle-service-web/src/views/record/logic/login.ts Normal file
View File

@ -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)
})
})
}