已登录状态判断 + 样式调整
This commit is contained in:
parent
3693b75706
commit
b48c9e16de
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
})
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user