ui home
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
7d1fdda32e
commit
14abaf35e2
2 changed files with 91 additions and 78 deletions
|
|
@ -1,49 +1,55 @@
|
|||
interface DataOption {
|
||||
id: string
|
||||
name: string
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface DateCards {
|
||||
label: string;
|
||||
img: string;
|
||||
page: string;
|
||||
}
|
||||
|
||||
interface DataDateMonthObject {
|
||||
month: number
|
||||
year: number
|
||||
month: number;
|
||||
year: number;
|
||||
}
|
||||
interface FormRef {
|
||||
date: object | null
|
||||
reason: object | null
|
||||
[key: string]: any
|
||||
date: object | null;
|
||||
reason: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
interface notiType {
|
||||
id: string
|
||||
sender: string
|
||||
body: string
|
||||
timereceive: Date
|
||||
isOpen: boolean
|
||||
id: string;
|
||||
sender: string;
|
||||
body: string;
|
||||
timereceive: Date;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
interface LocationObject {
|
||||
latitude: number
|
||||
longitude: number
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
}
|
||||
|
||||
interface Pagination {
|
||||
sortBy: string | null
|
||||
descending: boolean
|
||||
page: number
|
||||
rowsPerPage: number | undefined
|
||||
sortBy: string | null;
|
||||
descending: boolean;
|
||||
page: number;
|
||||
rowsPerPage: number | undefined;
|
||||
}
|
||||
interface DataCheckIn {
|
||||
checkInDate: string
|
||||
checkInDateTime: string
|
||||
checkInId: string
|
||||
checkInLocation: string
|
||||
checkInStatus: string
|
||||
checkInTime: string
|
||||
checkOutLocation: string
|
||||
checkOutStatus: string
|
||||
checkOutTime: string
|
||||
editReason: string
|
||||
editStatus: string
|
||||
isEdit: boolean
|
||||
checkInDate: string;
|
||||
checkInDateTime: string;
|
||||
checkInId: string;
|
||||
checkInLocation: string;
|
||||
checkInStatus: string;
|
||||
checkInTime: string;
|
||||
checkOutLocation: string;
|
||||
checkOutStatus: string;
|
||||
checkOutTime: string;
|
||||
editReason: string;
|
||||
editStatus: string;
|
||||
isEdit: boolean;
|
||||
}
|
||||
|
||||
export type {
|
||||
|
|
@ -54,4 +60,5 @@ export type {
|
|||
LocationObject,
|
||||
Pagination,
|
||||
DataCheckIn,
|
||||
}
|
||||
DateCards,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@ import axios from "axios";
|
|||
import config from "@/app.config";
|
||||
|
||||
import CustomComponent from "@/components/CustomDialog.vue";
|
||||
import screen1 from "@/assets/screen1.png";
|
||||
import screen2 from "@/assets/screen2.png";
|
||||
import screen3 from "@/assets/screen3.png";
|
||||
import screen4 from "@/assets/screen4.png";
|
||||
|
||||
import type { DateCards } from "@/interface/index/Main";
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
|
|
@ -15,6 +21,29 @@ const urlUser = import.meta.env.VITE_URL_USER ?? "";
|
|||
const urlMgt = import.meta.env.VITE_URL_MGT ?? "";
|
||||
const urlCheckin = import.meta.env.VITE_URL_CHECKIN ?? "";
|
||||
|
||||
const cards = ref<DateCards[]>([
|
||||
{
|
||||
label: "ระบบบริการเจ้าของข้อมูล",
|
||||
img: screen1,
|
||||
page: "user",
|
||||
},
|
||||
{
|
||||
label: "ระบบลงเวลาปฏิบัติราชการ",
|
||||
img: screen2,
|
||||
page: "checkin",
|
||||
},
|
||||
{
|
||||
label: "ระบบบริหารจัดการ",
|
||||
img: screen3,
|
||||
page: "mgt",
|
||||
},
|
||||
{
|
||||
label: "ระบบแอดมิน",
|
||||
img: screen4,
|
||||
page: "admin",
|
||||
},
|
||||
]);
|
||||
|
||||
const token = ref<any>("");
|
||||
const refreshToken = ref<any>("");
|
||||
const fullname = computed(() => {
|
||||
|
|
@ -121,33 +150,6 @@ onMounted(async () => {
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
const cards = ref<any[]>([
|
||||
{
|
||||
label: "ระบบบริการเจ้าของข้อมูล",
|
||||
img: "https://bma-sso.frappet.synology.me/images/screen1.png",
|
||||
page: "user",
|
||||
url: "urlUser",
|
||||
},
|
||||
{
|
||||
label: "ระบบลงเวลาปฏิบัติราชการ",
|
||||
img: "https://bma-sso.frappet.synology.me/images/screen2.png",
|
||||
page: "checkin",
|
||||
url: "urlCheckin",
|
||||
},
|
||||
{
|
||||
label: "ระบบบริหารจัดการ",
|
||||
img: "https://bma-sso.frappet.synology.me/images/screen3.png",
|
||||
page: "mgt",
|
||||
url: "urlMgt",
|
||||
},
|
||||
{
|
||||
label: "ระบบแอดมิน",
|
||||
img: "https://bma-sso.frappet.synology.me/images/screen4.png",
|
||||
page: "admin",
|
||||
url: "urlAdmin",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -161,14 +163,12 @@ const cards = ref<any[]>([
|
|||
</div>
|
||||
|
||||
<div class="row justify-center">
|
||||
<div class="col-9 q-pa-xl">
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<q-toolbar style="padding: 0px">
|
||||
<div class="row items-center q-py-sm">
|
||||
<q-img
|
||||
src="https://bma-sso.frappet.synology.me/images/sso.png"
|
||||
style="width: 80px"
|
||||
/>
|
||||
<div class="text-white q-ml-md" v-if="$q.screen.md">
|
||||
<q-img src="@/assets/sso.png" style="width: 80px" />
|
||||
|
||||
<div class="text-white q-ml-md" v-if="$q.screen.gt.md">
|
||||
<div class="text-grey-5 text-caption">
|
||||
Bangkok Metropolitan Administration
|
||||
</div>
|
||||
|
|
@ -177,18 +177,24 @@ const cards = ref<any[]>([
|
|||
</div>
|
||||
<q-space />
|
||||
<div class="row items-center q-col-gutter-md">
|
||||
<div class="text-white">{{ fullname }}</div>
|
||||
<div class="text-white">
|
||||
{{ fullname }}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn @click="logout()" class="btn_logout">
|
||||
ออกจากระบบ <i class="mdi mdi-logout"></i>
|
||||
<q-btn
|
||||
@click="logout()"
|
||||
class="btn_logout"
|
||||
icon="mdi-logout"
|
||||
:label="$q.screen.gt.md ? 'ออกจากระบบ' : ''"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
<!-- Title Section -->
|
||||
<div class="text-white text-center" style="margin-top: 30px">
|
||||
<div class="text-h5 text-bold">
|
||||
<div class="text-white text-center" style="margin-top: 80px">
|
||||
<div class="text-bold" :class="!$q.screen.gt.sm ? '' : 'text-h5'">
|
||||
ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
<div class="text-caption q-mt-sm">
|
||||
|
|
@ -196,11 +202,15 @@ const cards = ref<any[]>([
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Section justify-center-->
|
||||
<div class="q-mt-xl">
|
||||
<div class="row q-col-gutter-md">
|
||||
<!-- Card Section -->
|
||||
<div
|
||||
class="q-mt-xl"
|
||||
:class="!$q.screen.gt.md ? 'row justify-center' : ''"
|
||||
>
|
||||
<div class="q-col-gutter-md" :class="$q.screen.gt.md ? 'row' : ''">
|
||||
<div class="col" v-for="(card, index) in cards" :key="index">
|
||||
<q-card
|
||||
:style="!$q.screen.gt.md ? 'width: 300px' : ''"
|
||||
bordered
|
||||
class="my-card"
|
||||
:class="
|
||||
|
|
@ -248,14 +258,14 @@ const cards = ref<any[]>([
|
|||
</q-btn>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="col-4">
|
||||
<img src="@/assets/screen1.png" style="width: 100%" />
|
||||
<div class="h-100 py-3">
|
||||
<a @click="goPage('user', urlUser)" class="link">
|
||||
ระบบบริการเจ้าของข้อมูล
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<img src="@/assets/screen2.png" style="width: 100%" />
|
||||
|
|
@ -292,10 +302,6 @@ const cards = ref<any[]>([
|
|||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* เพิ่มเงาเมื่อ hover */
|
||||
}
|
||||
|
||||
.card-left {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.card-right {
|
||||
transform: translateY(30px); /* เลื่อนการ์ดลงเล็กน้อย */
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue