ระบบลงเวลา
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
73bca6f4e9
commit
20387a6b06
3 changed files with 182 additions and 60 deletions
|
|
@ -38,7 +38,7 @@
|
|||
<div
|
||||
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
|
||||
>
|
||||
{{ date2Thai(Thai) }}
|
||||
{{ Thai }}
|
||||
</div>
|
||||
<div class="row col-12 justify-center q-py-sm">
|
||||
<div class="colunm">
|
||||
|
|
@ -79,61 +79,29 @@
|
|||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-sm-4">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="cardImg col-12 bg-grey-2 items-center row cursor-pointer shadow-0"
|
||||
@click="photo()"
|
||||
:style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
|
||||
>
|
||||
<div class="column col-12" v-if="!camera">
|
||||
<q-card flat bordered class="card-container" @click="photo()">
|
||||
<div v-if="!camera" class="preview-placeholder">
|
||||
<div class="text-center">
|
||||
<q-icon
|
||||
name="photo_camera"
|
||||
color="blue-grey-3"
|
||||
size="100px"
|
||||
class="center-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="hasPhoto">
|
||||
<video
|
||||
ref="video"
|
||||
autoplay
|
||||
:style="{
|
||||
width: videoWidth + 'px',
|
||||
height: videoHeight + 'px',
|
||||
}"
|
||||
></video>
|
||||
<canvas
|
||||
ref="canvas"
|
||||
:width="videoWidth"
|
||||
:height="videoHeight"
|
||||
></canvas>
|
||||
<div v-if="hasPhoto" class="video-container">
|
||||
<video ref="video" autoplay class="video-element"></video>
|
||||
<canvas ref="canvas" class="canvas-element"></canvas>
|
||||
</div>
|
||||
|
||||
<div v-else class="q-mt-sm">
|
||||
<q-img
|
||||
:src="img"
|
||||
:style="{
|
||||
width: videoWidth + 'px',
|
||||
height: videoHeight + 'px',
|
||||
}"
|
||||
class="q-mt-lg"
|
||||
></q-img>
|
||||
<canvas
|
||||
ref="canvas"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
:style="{
|
||||
width: videoWidth + 'px',
|
||||
height: videoHeight + 'px',
|
||||
}"
|
||||
></canvas>
|
||||
<div v-else class="image-container">
|
||||
<q-img :src="img" class="image-element"></q-img>
|
||||
<canvas ref="canvas" class="canvas-element"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="absolute-bottom-right q-ma-md">
|
||||
<q-btn
|
||||
v-if="hasPhoto"
|
||||
round
|
||||
push
|
||||
icon="photo_camera"
|
||||
|
|
@ -141,6 +109,15 @@
|
|||
color="positive"
|
||||
@click="capturePhoto"
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
round
|
||||
push
|
||||
icon="refresh"
|
||||
size="md"
|
||||
color="negative"
|
||||
@click="refreshPhoto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -178,15 +155,36 @@
|
|||
label="นอกสถานที่"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-4">
|
||||
<div
|
||||
class="col-xs-12 col-sm-6 col-md-4"
|
||||
v-if="workplace == 'off-site'"
|
||||
>
|
||||
<q-select
|
||||
v-if="workplace == 'off-site'"
|
||||
ref="modelRef"
|
||||
dense
|
||||
class="q-ml-md"
|
||||
outlined
|
||||
v-model="model"
|
||||
:options="options"
|
||||
prefix="ระบุสถานที่ :"
|
||||
:rules="[(val) => !!val || 'กรุณาระบุสถานที่']"
|
||||
lazy-rules
|
||||
@update:model-value="selectLocation()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-12 col-sm-6 col-md-4"
|
||||
v-if="model == 'อื่นๆ'"
|
||||
>
|
||||
<q-input
|
||||
ref="useLocationRef"
|
||||
dense
|
||||
class="q-ml-md"
|
||||
outlined
|
||||
v-model="useLocation"
|
||||
label="ระบุสถานที่"
|
||||
:rules="[(val) => !!val || 'กรุณาระบุสถานที่']"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -194,18 +192,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-right" v-if="camera">
|
||||
<div class="col-12 text-right" v-if="camera && img">
|
||||
<div class="col-12">
|
||||
<q-separator />
|
||||
</div>
|
||||
<div class="col-12 q-pa-md">
|
||||
<p class="text-red text-caption">
|
||||
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
|
||||
</p>
|
||||
<q-btn
|
||||
:label="checkIn == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
|
||||
:color="checkIn == true ? 'primary' : 'red-9'"
|
||||
push
|
||||
size="14px"
|
||||
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
|
||||
@click="confirm"
|
||||
@click="validateForm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -259,23 +260,26 @@ import { ref, onMounted } from "vue";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRouter } from "vue-router";
|
||||
import moment, { Moment } from "moment";
|
||||
import type { FormRef } from "@/modules/checkin/interface/response/checkin";
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const router = useRouter();
|
||||
const dateNow = ref(new Date());
|
||||
const Thai = ref(dateNow.value);
|
||||
const dateNow = ref<Date>(new Date());
|
||||
const Thai = ref<string | null>(date2Thai(dateNow.value));
|
||||
const checkIn = ref(true); //เช็คการเช็คอิน ถ้าลงเวลาครั้งแรกเป็นเช็คอิน(สีเขียว) true แต่ถ้าครั้ง 2 เป็นเช็คเอ้าท์(สีแดง)
|
||||
|
||||
const location = ref("สำนักงาน ก.ก");
|
||||
const coordinates = ref("13° 43’ 45” N 100° 31’ 26” E");
|
||||
const workplace = ref("in-place");
|
||||
const model = ref(null);
|
||||
const options = ref([
|
||||
const location = ref<string>("สำนักงาน ก.ก");
|
||||
const coordinates = ref<string>("13° 43’ 45” N 100° 31’ 26” E");
|
||||
const workplace = ref<string>("in-place");
|
||||
const useLocation = ref<string | null>("");
|
||||
const model = ref<string | null>("");
|
||||
const options = ref<string[]>([
|
||||
"ปฏิบัติงานที่บ้าน",
|
||||
"ลืมลงเวลาปฏิบัติงาน",
|
||||
"ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่",
|
||||
"ขออนุญาตออกนอกสถานที่",
|
||||
"อื่นๆ",
|
||||
]);
|
||||
|
||||
const camera = ref(false);
|
||||
|
|
@ -285,12 +289,14 @@ const mediaStream = ref<MediaStream | null>(null);
|
|||
const video = ref<HTMLVideoElement | null>(null);
|
||||
const canvas = ref<HTMLCanvasElement | null>(null);
|
||||
const hasPhoto = ref<boolean>(true);
|
||||
const img = ref<any>();
|
||||
const img = ref<any>(null);
|
||||
|
||||
const videoWidth = ref<number>(335);
|
||||
const videoHeight = ref<number>(350);
|
||||
const canvasWidth = ref<number>(335);
|
||||
const canvasHeight = ref<number>(350);
|
||||
const useLocationRef = ref<Object | null>(null);
|
||||
const modelRef = ref<Object | null>(null);
|
||||
const objectRef: FormRef = {
|
||||
model: modelRef,
|
||||
useLocation: useLocationRef,
|
||||
};
|
||||
|
||||
const photo = () => {
|
||||
camera.value = true;
|
||||
|
|
@ -312,7 +318,49 @@ function capturePhoto() {
|
|||
console.error("Canvas context not available");
|
||||
return;
|
||||
}
|
||||
context.drawImage(videoElement, 0, 0, 335, 270);
|
||||
const desiredWidth = 150;
|
||||
const desiredHeight = 200;
|
||||
const zoomFactor = 10;
|
||||
|
||||
const videoAspectRatio = videoElement.videoWidth / videoElement.videoHeight;
|
||||
const canvasAspectRatio = desiredWidth / desiredHeight;
|
||||
|
||||
let drawWidth, drawHeight;
|
||||
|
||||
if (videoAspectRatio > canvasAspectRatio) {
|
||||
drawWidth = desiredWidth * zoomFactor;
|
||||
drawHeight = (desiredWidth * zoomFactor) / videoAspectRatio;
|
||||
} else {
|
||||
drawWidth = desiredHeight * zoomFactor * videoAspectRatio;
|
||||
drawHeight = desiredHeight * zoomFactor;
|
||||
}
|
||||
|
||||
canvasElement.width = drawWidth;
|
||||
canvasElement.height = drawHeight;
|
||||
if (context) {
|
||||
context.imageSmoothingEnabled = true;
|
||||
context.imageSmoothingQuality = "low";
|
||||
}
|
||||
|
||||
// context.drawImage(
|
||||
// videoElement,
|
||||
// 0,
|
||||
// 0,
|
||||
// canvasElement.width,
|
||||
// canvasElement.height
|
||||
// );
|
||||
context.drawImage(
|
||||
videoElement,
|
||||
0,
|
||||
0,
|
||||
videoElement.videoWidth,
|
||||
videoElement.videoHeight,
|
||||
0,
|
||||
0,
|
||||
drawWidth,
|
||||
drawHeight
|
||||
);
|
||||
|
||||
//ไฟล์รูป
|
||||
const dataURL = canvasElement.toDataURL(".image/.png");
|
||||
img.value = dataURL;
|
||||
|
|
@ -335,6 +383,10 @@ const setupCamera = async () => {
|
|||
console.error("Error accessing camera:", error);
|
||||
}
|
||||
};
|
||||
function refreshPhoto() {
|
||||
hasPhoto.value = true;
|
||||
img.value = "";
|
||||
}
|
||||
|
||||
// const time = new Date().toLocaleTimeString();
|
||||
const formattedS = ref();
|
||||
|
|
@ -356,6 +408,32 @@ function updateClock() {
|
|||
}
|
||||
setInterval(updateClock, 1000);
|
||||
|
||||
function selectLocation() {
|
||||
if (model.value === "อื่นๆ") {
|
||||
useLocation.value = "";
|
||||
} else {
|
||||
useLocation.value = model.value;
|
||||
}
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const hasError = [];
|
||||
for (const key in objectRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
|
||||
const property = objectRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
confirm();
|
||||
} else {
|
||||
console.log("ไม่ผ่าน ");
|
||||
}
|
||||
}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"bg-primary text-white col-12 row items-center q-px-md q-py-sm": val,
|
||||
|
|
@ -369,4 +447,38 @@ const getClass = (val: boolean) => {
|
|||
.q-card.cardImg:hover {
|
||||
border: 1px solid #02a998 !important;
|
||||
}
|
||||
|
||||
.center-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.card-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 350px; /* Adjust as needed */
|
||||
background: #f6f5f5;
|
||||
}
|
||||
|
||||
.video-container,
|
||||
.image-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-element,
|
||||
.image-element {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 5px; /* Adjust as needed */
|
||||
}
|
||||
|
||||
.canvas-element {
|
||||
display: none; /* Adjust as needed */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue