Commit @d55ce07bb71d08902b32567e8dab33d229593666

이은진 2024-08-21

240821 이은진 사진 상세보기

@d55ce07bb71d08902b32567e8dab33d229593666

f7c4cd0

d55ce07

client/views/pages/main/AIDashboard.vue

--- client/views/pages/main/AIDashboard.vue

+++ client/views/pages/main/AIDashboard.vue


                         <div style="width: 100%;">
                             <div id="container" ref="container">
                                 <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
-                                    @canplay="onVideoLoaded" style="position: absolute;">
+                                    @canplay="onVideoLoaded" style="position: absolute; height: 100%;">
                                 </video>
                                 <img src="../../../resources/img/camera-rabbit.png" class="camera-rabbit"
                                     style="position: absolute; ">

 
 video {
     width: 100%;
-    height: auto;
+    height: 100%;
     background-color: #666;
 }
 

f7c4cd0

d55ce07

client/views/pages/main/Dashboard.vue

--- client/views/pages/main/Dashboard.vue

+++ client/views/pages/main/Dashboard.vue


             <article v-show="showCameraModal" class="popup-wrap">
                 <div class="popup-box" style="top: 500px; left:500px">
                     <div class="flex mb10 justify-between">
-                        <p class="popup-title">사진 촬영</p>ㄹ
+                        <p class="popup-title">사진 촬영</p>
                         <button type="button" class="popup-close-btn" @click="closeModal">
                             <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                         </button>

                         <div style="width: 100%;">
                             <div id="container" ref="container">
                                 <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
-                                    @canplay="onVideoLoaded" style="position: absolute;">
+                                    @canplay="onVideoLoaded" style="position: absolute; height: 100%;">
                                 </video>
                                 <img src="../../../resources/img/camera-rabbit.png" class="camera-rabbit"
                                     style="position: absolute; ">

             <article class="popup-wrap" v-show="searchOpen">
                 <div class="popup-box ">
                     <div class="flex mb10  justify-between">
-                        <p class="popup-title">알림</p>
                         <button type="button" class="popup-close-btn" @click="closeModal">
                             <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                         </button>
                     </div>
                     <div class="box">
-                        <div style="width: 910px;"><img src="../../../resources/img/img140_747s.png" alt=""></div>
+                        <div style="width: 910px;">
+                            <img :src="selectedImage.image" alt="Image" @error="onImageError" reloadable="true">
+                        </div>
                     </div>
                     <div class="flex justify-between mt20">
                         <div class="text  flex">
-                            <p class="title2 date ml30">2024-08-06</p>
-                            <span class=" title1 ml30">1단원을 마친 <em class="yellow">가나다</em>친구</span>
+                            <p class="title2 date ml30">{{ selectedImage.date }}</p>
+                            <span class=" title1 ml30">{{ selectedImage.unit }}을 마친 <em class="yellow">{{
+                                selectedImage.name }}</em>친구</span>
                         </div>
                         <div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart"
                                 style="color: #FFBA08;"></svg-icon>
-                            <p><em class="yellow">1</em></p>
+                            <p><em class="yellow">{{ selectedImage.heart }}</em></p>
                         </div>
                     </div>
                 </div>

 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
 import axios from 'axios';
+import { name } from 'file-loader';
 import { mapGetters } from 'vuex';
 import { mapActions } from "vuex";
 

             images: [],
             unit_id: "",
             book_id: "",
+
+            selectedImage: [
+                {
+                    image: '',
+                    unit: '',
+                    date: '',
+                    name: '',
+                    heart: ''
+                },
+            ],
         }
     },
     methods: {

         },
 
         //은진
+        buttonSearch(image) {
+            this.selectedImage.name = image.stdId;
+            this.selectedImage.image = image.url;
+            this.selectedImage.unit = this.titleUnitName;
+            this.selectedImage.date = image.fileRegDate.split(" ")[0];
+            this.selectedImage.heart = image.likeData;
+            this.searchOpen = true;
+        },
+        fetchImage(unit_id) {
+            axios({
+                url: "/photo/photoUnitList.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    unitId: unit_id,
+                    sclsId: "1"
+                }
+            })
+                .then(response => {
+                    this.file = response.data;
+
+                    const findFilePromises = this.file.map(f =>
+                        this.findFile(f.file_mng_id)
+                    );
+
+                    return Promise.all(findFilePromises);
+                })
+                .then(fileResults => {
+                    // Assuming this.file and fileResults are of the same length
+                    this.images = this.file.map((file, index) => {
+                        const result = fileResults[index];
+                        if (result) {
+                            return {
+                                url: "http://localhost:9080/" + `${result.fileRpath}`,
+                                fileId: result.fileId,
+                                fileNm: result.fileNm,
+                                fileRegDate: result.regDt,
+                                likeData: file.like_data,  // Add like_data from this.file
+                                stdId: file.user_nm         // Add std_id from this.file
+                            };
+                        }
+                        return null;
+                    }).filter(image => image !== null);
+                })
+                .catch(error => {
+                    console.error("Error fetching images:", error);
+                });
+        },
         async findFile(file_mng_id) {
             try {
                 const res = await axios({

                 console.log("result - error : ", error);
                 return null;
             }
-        },
-        fetchImage(unit_id) {
-            axios({
-                url: "/photo/photoUnitList.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    unitId: unit_id,
-                    sclsId: "1"
-                }
-            })
-                .then(response => {
-                    this.file_mng_id = response.data;
-
-                    const findFilePromises = this.file_mng_id.map(id =>
-                        this.findFile(id.file_mng_id)
-                    );
-
-                    return Promise.all(findFilePromises);
-                })
-                .then(fileResults => {
-                    // Format file results to include image URL
-                    this.images = fileResults.map(file => {
-                        if (file) {
-                            return {
-                                url: "http://localhost:9080/" + `${file.fileRpath}`,
-                                fileId: file.fileId,
-                                fileNm: file.fileNm,
-                                // Add any other properties you need here
-                            };
-                        }
-                        return null;
-                    }).filter(image => image !== null);
-                })
-                .catch(error => {
-                    console.error("Error fetching images:", error);
-                });
         },
         goToPageImg(page) {
             const canvas = document.querySelector('canvas');

                 })
                 .catch(error => {
                     console.log("error>>>>>>>>", error);
+                    alert("웹캠이 필요한 기능입니다!");
+                    this.closeModal(); // 모달창을 닫음
                 });
         },
         closeModal() {  //웹캠 및 모든 팝업 닫기

             };
         },
 
-
-
-        buttonSearch() {
-            this.searchOpen = true;
-        },
         buttonSearch2() {
             this.searchOpen2 = true;
         },

f7c4cd0

d55ce07

client/views/pages/main/PhotoEdit.vue

--- client/views/pages/main/PhotoEdit.vue

+++ client/views/pages/main/PhotoEdit.vue


     <div class="flex justify-center">
       <div>
         <div class="frame title-box">
-          <div class="photo">
-            <img :src="imageSrc" alt="">
+          <div class="photo" style="height: 100%;">
+            <img :src="imageSrc" alt="" style="height: 100%;">
           </div>
-          <p class="title mt20" style="color: #fff;">2024.07.01 1단원 완료!</p>
-
+          <p class="title mt20" style="color: #fff;">{{ today }} 1단원 완료!</p>
         </div>
         <div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
           <button class="login-btn" @click="recapture()">

       fileId: '',
       unit_id: '',
       book_id: '',
+      today: '',
     }
   },
   methods: {
     recapture() {
-      // this.$router.push({ name: 'Dashboard', query: { reCapture: 'true', unit_id, book_id } }); 
       this.$router.push({ name: 'Dashboard', query: { reCapture: 'true', unit_id: this.unit_id, book_id: this.book_id } });
     },
     async fetchImageAsFile(imageUrl, filename = "image.jpg") {

           data: {
             "photoMngId": "PHOTO_MNG_000000000000001", // 사진첩아이디 교체
             "likeData": "0",
-            "unitId": "UNIT_000000000000001", // 유닛아이디 교체
+            "unitId": this.unit_id,
             "stdId": "1", //학생아이디 교체
             "fileMngId": this.fileId
           }

   computed: {
 
   },
+  created() {
+    const date = new Date();
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1 필요
+    const day = String(date.getDate()).padStart(2, '0');
+    this.today = `${year}.${month}.${day}`;
+  },
   components: {
   },
   mounted() {

Add a comment

Open 0
Closed 0

List

...	...	@@ -139,7 +139,7 @@
139	139	<div style="width: 100%;">
140	140	<div id="container" ref="container">
141	141	<video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
142		- @canplay="onVideoLoaded" style="position: absolute;">
	142	+ @canplay="onVideoLoaded" style="position: absolute; height: 100%;">
143	143	</video>
144	144	<img src="../../../resources/img/camera-rabbit.png" class="camera-rabbit"
145	145	style="position: absolute; ">
...	...	@@ -430,7 +430,7 @@
430	430
431	431	video {
432	432	width: 100%;
433		- height: auto;
	433	+ height: 100%;
434	434	background-color: #666;
435	435	}
436	436

...	...	@@ -171,7 +171,7 @@
171	171	<article v-show="showCameraModal" class="popup-wrap">
172	172	<div class="popup-box" style="top: 500px; left:500px">
173	173	<div class="flex mb10 justify-between">
174		- <p class="popup-title">사진 촬영</p>ㄹ
	174	+ <p class="popup-title">사진 촬영</p>
175	175	<button type="button" class="popup-close-btn" @click="closeModal">
176	176	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
177	177	</button>
...	...	@@ -180,7 +180,7 @@
180	180	<div style="width: 100%;">
181	181	<div id="container" ref="container">
182	182	<video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
183		- @canplay="onVideoLoaded" style="position: absolute;">
	183	+ @canplay="onVideoLoaded" style="position: absolute; height: 100%;">
184	184	</video>
185	185	<img src="../../../resources/img/camera-rabbit.png" class="camera-rabbit"
186	186	style="position: absolute; ">
...	...	@@ -217,22 +217,24 @@
217	217	<article class="popup-wrap" v-show="searchOpen">
218	218	<div class="popup-box ">
219	219	<div class="flex mb10 justify-between">
220		- <p class="popup-title">알림</p>
221	220	<button type="button" class="popup-close-btn" @click="closeModal">
222	221	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
223	222	</button>
224	223	</div>
225	224	<div class="box">
226		- <div style="width: 910px;"><img src="../../../resources/img/img140_747s.png" alt=""></div>
	225	+ <div style="width: 910px;">
	226	+ <img :src="selectedImage.image" alt="Image" @error="onImageError" reloadable="true">
	227	+ </div>
227	228	</div>
228	229	<div class="flex justify-between mt20">
229	230	<div class="text flex">
230		- <p class="title2 date ml30">2024-08-06</p>
231		- <span class=" title1 ml30">1단원을 마친 <em class="yellow">가나다</em>친구</span>
	231	+ <p class="title2 date ml30">{{ selectedImage.date }}</p>
	232	+ <span class=" title1 ml30">{{ selectedImage.unit }}을 마친 <em class="yellow">{{
	233	+ selectedImage.name }}</em>친구</span>
232	234	</div>
233	235	<div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart"
234	236	style="color: #FFBA08;"></svg-icon>
235		- <p><em class="yellow">1</em></p>
	237	+ <p><em class="yellow">{{ selectedImage.heart }}</em></p>
236	238	</div>
237	239	</div>
238	240	</div>
...	...	@@ -245,6 +247,7 @@
245	247	import SvgIcon from '@jamescoyle/vue-icon';
246	248	import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
247	249	import axios from 'axios';
	250	+import { name } from 'file-loader';
248	251	import { mapGetters } from 'vuex';
249	252	import { mapActions } from "vuex";
250	253
...	...	@@ -295,6 +298,16 @@
295	298	images: [],
296	299	unit_id: "",
297	300	book_id: "",
	301	+
	302	+ selectedImage: [
	303	+ {
	304	+ image: '',
	305	+ unit: '',
	306	+ date: '',
	307	+ name: '',
	308	+ heart: ''
	309	+ },
	310	+ ],
298	311	}
299	312	},
300	313	methods: {
...	...	@@ -322,6 +335,56 @@
322	335	},
323	336
324	337	//은진
	338	+ buttonSearch(image) {
	339	+ this.selectedImage.name = image.stdId;
	340	+ this.selectedImage.image = image.url;
	341	+ this.selectedImage.unit = this.titleUnitName;
	342	+ this.selectedImage.date = image.fileRegDate.split(" ")[0];
	343	+ this.selectedImage.heart = image.likeData;
	344	+ this.searchOpen = true;
	345	+ },
	346	+ fetchImage(unit_id) {
	347	+ axios({
	348	+ url: "/photo/photoUnitList.json",
	349	+ method: "post",
	350	+ headers: {
	351	+ "Content-Type": "application/json; charset=UTF-8",
	352	+ },
	353	+ data: {
	354	+ unitId: unit_id,
	355	+ sclsId: "1"
	356	+ }
	357	+ })
	358	+ .then(response => {
	359	+ this.file = response.data;
	360	+
	361	+ const findFilePromises = this.file.map(f =>
	362	+ this.findFile(f.file_mng_id)
	363	+ );
	364	+
	365	+ return Promise.all(findFilePromises);
	366	+ })
	367	+ .then(fileResults => {
	368	+ // Assuming this.file and fileResults are of the same length
	369	+ this.images = this.file.map((file, index) => {
	370	+ const result = fileResults[index];
	371	+ if (result) {
	372	+ return {
	373	+ url: "http://localhost:9080/" + `${result.fileRpath}`,
	374	+ fileId: result.fileId,
	375	+ fileNm: result.fileNm,
	376	+ fileRegDate: result.regDt,
	377	+ likeData: file.like_data, // Add like_data from this.file
	378	+ stdId: file.user_nm // Add std_id from this.file
	379	+ };
	380	+ }
	381	+ return null;
	382	+ }).filter(image => image !== null);
	383	+ })
	384	+ .catch(error => {
	385	+ console.error("Error fetching images:", error);
	386	+ });
	387	+ },
325	388	async findFile(file_mng_id) {
326	389	try {
327	390	const res = await axios({
...	...	@@ -339,45 +402,6 @@
339	402	console.log("result - error : ", error);
340	403	return null;
341	404	}
342		- },
343		- fetchImage(unit_id) {
344		- axios({
345		- url: "/photo/photoUnitList.json",
346		- method: "post",
347		- headers: {
348		- "Content-Type": "application/json; charset=UTF-8",
349		- },
350		- data: {
351		- unitId: unit_id,
352		- sclsId: "1"
353		- }
354		- })
355		- .then(response => {
356		- this.file_mng_id = response.data;
357		-
358		- const findFilePromises = this.file_mng_id.map(id =>
359		- this.findFile(id.file_mng_id)
360		- );
361		-
362		- return Promise.all(findFilePromises);
363		- })
364		- .then(fileResults => {
365		- // Format file results to include image URL
366		- this.images = fileResults.map(file => {
367		- if (file) {
368		- return {
369		- url: "http://localhost:9080/" + `${file.fileRpath}`,
370		- fileId: file.fileId,
371		- fileNm: file.fileNm,
372		- // Add any other properties you need here
373		- };
374		- }
375		- return null;
376		- }).filter(image => image !== null);
377		- })
378		- .catch(error => {
379		- console.error("Error fetching images:", error);
380		- });
381	405	},
382	406	goToPageImg(page) {
383	407	const canvas = document.querySelector('canvas');
...	...	@@ -527,6 +551,8 @@
527	551	})
528	552	.catch(error => {
529	553	console.log("error>>>>>>>>", error);
	554	+ alert("웹캠이 필요한 기능입니다!");
	555	+ this.closeModal(); // 모달창을 닫음
530	556	});
531	557	},
532	558	closeModal() { //웹캠 및 모든 팝업 닫기
...	...	@@ -582,11 +608,6 @@
582	608	};
583	609	},
584	610
585		-
586		-
587		- buttonSearch() {
588		- this.searchOpen = true;
589		- },
590	611	buttonSearch2() {
591	612	this.searchOpen2 = true;
592	613	},

...	...	@@ -3,11 +3,10 @@
3	3	<div class="flex justify-center">
4	4	<div>
5	5	<div class="frame title-box">
6		- <div class="photo">
7		- <img :src="imageSrc" alt="">
	6	+ <div class="photo" style="height: 100%;">
	7	+ <img :src="imageSrc" alt="" style="height: 100%;">
8	8	</div>
9		- <p class="title mt20" style="color: #fff;">2024.07.01 1단원 완료!</p>
10		-
	9	+ <p class="title mt20" style="color: #fff;">{{ today }} 1단원 완료!</p>
11	10	</div>
12	11	<div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
13	12	<button class="login-btn" @click="recapture()">
...	...	@@ -43,11 +42,11 @@
43	42	fileId: '',
44	43	unit_id: '',
45	44	book_id: '',
	45	+ today: '',
46	46	}
47	47	},
48	48	methods: {
49	49	recapture() {
50		- // this.$router.push({ name: 'Dashboard', query: { reCapture: 'true', unit_id, book_id } });
51	50	this.$router.push({ name: 'Dashboard', query: { reCapture: 'true', unit_id: this.unit_id, book_id: this.book_id } });
52	51	},
53	52	async fetchImageAsFile(imageUrl, filename = "image.jpg") {
...	...	@@ -106,7 +105,7 @@
106	105	data: {
107	106	"photoMngId": "PHOTO_MNG_000000000000001", // 사진첩아이디 교체
108	107	"likeData": "0",
109		- "unitId": "UNIT_000000000000001", // 유닛아이디 교체
	108	+ "unitId": this.unit_id,
110	109	"stdId": "1", //학생아이디 교체
111	110	"fileMngId": this.fileId
112	111	}
...	...	@@ -129,6 +128,13 @@
129	128	computed: {
130	129
131	130	},
	131	+ created() {
	132	+ const date = new Date();
	133	+ const year = date.getFullYear();
	134	+ const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1 필요
	135	+ const day = String(date.getDate()).padStart(2, '0');
	136	+ this.today = `${year}.${month}.${day}`;
	137	+ },
132	138	components: {
133	139	},
134	140	mounted() {

Delete comment