File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="visual mb-50">
<swiper ref="swiper" :loop="true" :spaceBetween="30" :centeredSlides="true" :autoplay="{
delay: 2500,
disableOnInteraction: false,
}" :pagination="{
type: 'progressbar',
}" :navigation="true" :modules="modules" @slideChange="onSlideChange" class="mySwiper">
<swiper-slide v-for="(item, index) in slides" :key="index">
<img :src="item.img" :alt="item.alt" />
</swiper-slide>
<div class="pagination">
<div class="page-count">{{ currentSlide }} / {{ totalSlides }}</div>
<div class="btn-control">
<button @click="play">
<CaretRightOutlined />
</button>
<button @click="stop">
<PauseOutlined />
</button>
</div>
</div>
</swiper>
<div class="search-wrap">
<div class="search-area">
<select name="" id="">
<option value="all" selected>전체</option>
<option value="pic">사진</option>
<option value="video">영상</option>
<option value="media">미디어 영상</option>
<option value="bodo">보도자료</option>
</select>
<div class="line"></div>
<input type="text" placeholder="검색어를 입력하세요" v-model="searchText">
<button class="search-btn"><img :src="search" alt=""></button>
</div>
<div class="total-search">
<button class="total-btn" @click="fnMoveTo('TotalSearch')">상세검색</button>
</div>
</div>
</div>
<div class="current-status mb-60">
<div class="board w1500">
<ul>
<template v-for="(item, idx) of icons" :key="idx">
<li>
<div class="labeling"><img :src="item.url" :alt="item.name + '아이콘'"><span>{{ item.name }}</span></div>
<div :class="{ 'count': true, 'all': item.id === 'TOTAL' }">{{ item.rowCo }}</div>
</li>
<li class="line" v-if="idx < icons.length - 1"></li>
</template>
</ul>
<div class="current-btn"><button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
</div>
</div>
<div class="new-update w1500 mb-50">
<div class="tabs">
<ul class="">
<li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === tab.id }" @click="selectTab(tab.id)">
<img :src="selectedTab === tab.id ? tab.activeImage : tab.inactiveImage" :alt="tab.title" class="tab-icon" />
<p><b>{{ tab.title }}</b> 기록물</p>
</li>
</ul>
<div class="tab-content">
<template v-for="(tabContent, idx1) of tabContents" :key="idx1">
<div v-show="tabContent.id === selectedTab" class="content-wrap">
<router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
<div class="new-pic">
<div v-for="(item, idx2) in tabContent.list" :key="idx2" class="box-wrap">
<div class="box">
<img :src="item.hasOwnProperty('files') && item.files.length > 0 ? item.files[0].filePath : null" :alt="item.sj" class="tab-image" />
<div class="info">
<p>{{ item.sj }}</p>
<span>{{ item.rgsde.slice(0, -6) }}</span>
</div>
</div>
</div>
<!-- 게시물이 없는 경우 -->
<div v-for="i in Math.max(0, 3 - tabContent.list.length)" :key="`empty-${i}`" class="box-wrap">
<div class="box">
<img :src="noimg" class="tab-image" />
<div class="info">
<p>등록된 게시물이 없습니다.</p>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="new-update w1500 mb-50 flex-sp-bw">
<div class="new-media">
<div class="title mb-30">
<h4>신규 미디어 영상</h4>
<router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
</div>
<div class="media-wrap">
<div v-for="(mediaContent, index) in mediaContent" :key="index" class="media-box">
<img :src="mediaContent.url" :alt="mediaContent.title" class="media-image" />
<div class="info">
<p>{{ mediaContent.content }}</p>
<span>{{ mediaContent.date }}</span>
</div>
</div>
<!-- 게시글이 없는 경우 -->
<div v-for="i in Math.max(0, 2 - mediaContent.length)" :key="`empty-${i}`" class="media-box">
<img :src="nomedia" :alt="mediaContent.title" class="media-image" />
<div class="info">
<p>등록된 게시글이 없습니다.</p>
</div>
</div>
</div>
</div>
<div class="new-bodo">
<div class="title mb-30">
<h4>신규 보도 자료</h4>
<router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
</div>
<ul>
<li v-for="(bodoContent, index) in bodoContent" :key="index" class="info">
<p>{{ bodoContent.content }}</p>
<span>{{ bodoContent.date }}</span>
</li>
<!-- 게시글이 없는 경우 -->
<li v-if="bodoContent.length < 1" class="info">
<img :src="nobodo" alt="">
</li>
</ul>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
// Import Swiper Vue components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
// import required modules
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
// 메인화면 조회
import { findAllSttusesProc } from "../../../resources/api/main";
// 유투브 유틸
import { getYouTubeThumbnail } from '../../../resources/js/youtubeUtils';
export default {
components: {
Swiper,
SwiperSlide,
PauseOutlined,
CaretRightOutlined,
},
setup() {
return {
modules: [Autoplay, Pagination, Navigation],
};
},
data() {
return {
noimg: "client/resources/images/no_img.png",
nomedia: "client/resources/images/no_media.png",
nobodo: "client/resources/images/no_bodo.png",
direct: 'client/resources/images/direct-btn.png',
search: 'client/resources/images/search_btn.png',
selectedTab: "newPhoto", // Set initial tab index to 신규사진기록물 (first tab)
tabs: [
{
id: "newPhoto",
title: "신규 사진",
activeImage: "client/resources/images/mCont_ico1_on.png", // Active tab image
inactiveImage: "client/resources/images/mCont_ico1_off.png",
},
{
id: "newVideo",
title: "신규 영상",
activeImage: "client/resources/images/mCont_ico2_on.png", // Active tab image
inactiveImage: "client/resources/images/mCont_ico2_off.png",
},
],
tabContents: [], // 신규 사진, 영상 기록물
mediaContent: [], // 신규 미디어 영상
bodoContent: [], // 신규 보도자료
searchText: null, // 통합검색 Input 내용
icons: [
{
id: "TOTAL",
name: "전체",
url: 'client/resources/images/icon/icon1.png',
},
{
id: "dcry_photo",
name: "사진",
url: 'client/resources/images/icon/icon2.png',
},
{
id: "dcry_vido",
name: "영상",
url: 'client/resources/images/icon/icon3.png',
},
{
id: "media_vido",
name: "미디어",
url: 'client/resources/images/icon/icon4.png',
},
{
id: "nes_dta",
name: "보도자료",
url: 'client/resources/images/icon/icon5.png',
},
],
slides: [
{ img: 'client/resources/images/visual.png', alt: 'Slide 1' },
{ img: 'client/resources/images/visual.png', alt: 'Slide 2' },
{ img: 'client/resources/images/visual.png', alt: 'Slide 3' },
// Add more slides as needed
],
currentSlide: 1, // To track the current slide
totalSlides: 3,
navigation: true, // Enable navigation buttons (prev/next)
};
},
created() {
this.fnFindAllSttuses();
},
mounted() {
// Store the swiper instance when it's ready
this.totalSlides = this.slides.length;
},
methods: {
selectTab(index) {
this.selectedTab = index; // Update the selected tab index
},
play() {
const swiper = this.$refs.swiper.swiper;
if (swiper && swiper.autoplay) {
swiper.autoplay.start(); // Start autoplay
} else {
console.warn('Swiper instance or autoplay is not available');
}
},
// Method to stop autoplay
stop() {
const swiper = this.$refs.swiper.swiper;
if (swiper && swiper.autoplay) {
swiper.autoplay.stop(); // Stop autoplay
} else {
console.warn('Swiper instance or autoplay is not available');
}
},
// Method to update the current slide and total slides
onSlideChange() {
const swiper = this.$refs.swiper.swiper;
if (swiper) {
this.currentSlide = swiper.realIndex + 1; // Get current slide (1-based index)
}
},
// 메인화면 정보 조회
async fnFindAllSttuses() {
try {
const response = await findAllSttusesProc();
if (response.data.status == 200) {
let dcrySttuses = response.data.data.dcrySttuses;
dcrySttuses.forEach(item => {
const matchingIcon = this.icons.find(icon => icon.id === item.iemNm);
if (matchingIcon) matchingIcon.rowCo = item.rowCo;
});
let photoDcrys = response.data.data.photoDcrys;
this.tabContents.push({ id: 'newPhoto', list: photoDcrys });
let vidoDcrys = response.data.data.vidoDcrys;
this.tabContents.push({ id: 'newVideo', list: vidoDcrys });
let mediaVidos = response.data.data.mediaVidos;
this.mediaContent = this.onChangeList(mediaVidos);
let nesDtas = response.data.data.nesDtas;
this.bodoContent = this.onChangeList(nesDtas);
} else {
alert(response.data.message);
}
} catch (error) {
alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
}
},
// 목록 변환
onChangeList(list) {
let resultArr = [];
for (let item of list) {
let url = null;
if (item.hasOwnProperty('files')) {
if (item.files.length > 0) {
url = item.files[0].filePath
}
} else {
url = getYouTubeThumbnail(item.link);
}
resultArr.push({
content: item.sj,
date: item.rgsde.slice(0, -6),
url: url
});
}
return resultArr;
},
// 페이지 이동
fnMoveTo(page) {
let params = null;
if (page === 'TotalSearch') {
params = { searchText: this.searchText };
}
this.$router.push({
name: page,
query: params,
});
}
},
};
</script>
<style scoped></style>