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
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content main ">
<div class="w1400">
<!-- 공지사항 및 배너 -->
<div class="community-zone flex mb30">
<div class="gd-4 pr30">
<div class="box-out-title flex justify-between align-center">
<p>메인비주얼</p>
<router-link to="/government/companyInfo/list.page" class=" flex align-center">
<p class="mr5">바로가기</p>
<svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
</router-link>
</div>
<div class="box">
<div class="visual-zone">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in slides" :key="index">
<img :src="item.img" :alt="item.alt" />
</div>
</div>
<!-- <button @click="startAutoplay" type="button" class="button play" data-control="play" style="display: none;"><span>분야별 정보 슬라이드 재생</span></button>
<button @click="stopAutoplay" type="button" class="button stop hidden" data-control="stop" style=""><span>분야별 정보 슬라이드 정지</span></button> -->
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev button"></div>
<div class="swiper-button-next button"></div>
</div>
</div>
</div>
<div class="gd-8 ">
<!-- 바로가기 -->
<div class="community-zone mb20">
<div class="box-out-title flex justify-between align-center">
<p>바로가기</p>
</div>
<ul class="quick-link">
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
<li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
</ul>
</div>
<div class="box-out-title flex justify-between align-center">
<p>공지사항(목록형)</p>
<router-link to="/government/BBS_MNG_000000000000027/list.page" class=" flex align-center">
<p class="mr5">바로가기</p>
<svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
</router-link>
</div>
<div class="box">
<div class="tab-nav mb15">
<ul class="flex align-center" style="gap: 30px;">
<li v-for="(item, idx) in codeList" :key="idx" :value="item.cd" :class="{
' ': true,
activeTab: activeTab === item.cd,
}" @click="showTab(item.cd)">
<p >{{ item.cdNm }}</p>
</li>
</ul>
</div>
<div class="tab-content">
<div>
<div class="list_news flex justify-between">
<ul>
<li class="leli">
<a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
<li class="leli">
<a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
<li class="leli">
<a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
</ul>
<ul>
<li class="leli">
<a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
<li class="leli">
<a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
<li class="leli">
<a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
<span>2025.01.08</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 검색창 -->
<div class="community-zone mb30">
<div class="box-out-title flex justify-between align-center">
<p>통합검색</p>
</div>
<div class="search-bar text-ct">
<div class="box">
<input type="text" class="search-input" placeholder="검색어를 입력하세요." v-model="search.searchText"
@keyup.enter="totalSearch" />
<button class="icon-button search-button" @click="totalSearch">
<svg-icon type="mdi" :path="this.$iconPath()" class="search-icon"></svg-icon>
</button>
</div>
</div>
</div>
<!-- 배너 -->
<div class="community-zone mb30">
<div class="best_service">
<h4><span>BEST1</span><strong>대제목</strong> 1</h4>
<div class="service_wrap">
<div class="left_cont best1">
<span class="label_tag etc_tag">키워드</span>
<h5>부제목</h5>
<div class="sub_info">배너내용</div>
<div class="point_info"><strong>배너내용 강조</strong></div>
<div class="btn_set">
<a href="" class="btn_small btn_bg_blue">신청하기</a>
</div>
<div class="simbol_img"></div>
</div>
<div class="right_cont">
<ul class="product_list">
<li>
<div class="pdt_info">
<strong class="pdt_name">제목</strong>
<span class="label_tag blue_tag">키워드</span>
<div class="pdt_simple_info">
내용
</div>
<a href="" class="btn_small btn_bg_green">바로가기</a>
</div>
</li>
<li>
<div class="pdt_info">
<strong class="pdt_name">제목</strong>
<span class="label_tag blue_tag">키워드</span>
<div class="pdt_simple_info">내용
</div>
<a href="" class="btn_small btn_bg_green">바로가기</a>
</div>
</li>
<li>
<div class="pdt_info">
<strong class="pdt_name">제목</strong><span class="label_tag green_tag">키워드</span><span class="label_tag blue_tag">키워드</span>
<div class="pdt_simple_info">내용</div>
<a href="" class="btn_small btn_bg_blue">신청하기</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 카드뉴스 -->
<div class="community-zone mb30">
<div class=" ">
<div class="box-out-title flex justify-between align-center">
<p>카드뉴스</p>
</div>
<ul class="search-list">
<li class="li box">
<a href="component/component_02_01.html">
<div class="img-wrap main_1"></div>
<div class="conts-wrap">
<h4 class="tit">컴포넌트</h4>
<p class="desc">디지털 정부서비스 UI를 구성하는 공통 요소 기반으로 일관성 있는 구현이 용이한 컴포넌트 가이드</p>
<div class="full-input flex justify-end">
<div class="btn-wrap flex align-center">
<p class="mr5">바로가기</p>
<svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
</div>
</div>
</div>
</a>
</li>
<li class="li box">
<a href="global/global_01.html">
<div class="img-wrap main_2"></div>
<div class="conts-wrap">
<h4 class="tit">기본 패턴</h4>
<p class="desc">핵심 서비스에서 공통으로 사용되는 과업을 기반으로 일관성있는 경험을 위한 기본 패턴 가이드</p>
<div class="full-input flex justify-end">
<div class="btn-wrap flex align-center">
<p class="mr5">바로가기</p>
<svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
</div>
</div>
</div>
</a>
</li>
<li class="li box">
<a href="service/service_01_01.html">
<div class="img-wrap main_3"></div>
<div class="conts-wrap">
<h4 class="tit">서비스 패턴</h4>
<p class="desc">공공웹·앱에서 제공하는 핵심서비스에 대한 사용자 플로우 와 사용자 경험 설계의 가이드</p>
<div class="full-input flex justify-end">
<div class="btn-wrap flex align-center">
<p class="mr5">바로가기</p>
<svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 배너존 -->
<div class="chart-zone mb30">
<div class="box-out-title flex justify-between align-center">
<p>배너</p>
</div>
<div class="banner-zone">
<div class="banner_txt">
<span>해당페이지</span>
<!-- 230808 문구 수정 -->
<span class="b_txt"><strong>해당페이지</strong>을 이용해 보세요.</span>
<!-- // 230808 문구 수정 -->
</div>
<a href="" class="btn_link" title="새창열림">바로 체험하기</a>
</div>
</div>
</div>
</div>
</template>
<script>
import ClusteredColumnChart from "../../../../component/chart/ClusteredColumnChart.vue";
import store from "../../../AppStore";
// 통합검색 관련
import queryParams from "../../../../../resources/js/queryParams";
import { defaultTotalSearchParams } from "../../../../../resources/js/defaultTotalSearchParams.js";
// API
import { governmentMainProc } from "../../../../../resources/api/main";
import { sysListByPageProc } from "../../../../../resources/api/popup";
import { findFiveNotice } from "../../../../../resources/api/bbsCn";
import Swiper from 'swiper';
export default {
name: 'SwiperComponent',
mixins: [queryParams],
components: {
ClusteredColumnChart: ClusteredColumnChart,
},
data() {
return {
slides: [
{ img: 'https://via.placeholder.com/600x300?text=Slide+1', alt: 'Slide 1' },
{ img: 'https://via.placeholder.com/600x300?text=Slide+2', alt: 'Slide 2' },
{ img: 'https://via.placeholder.com/600x300?text=Slide+3', alt: 'Slide 3' },
],
search: { ...defaultTotalSearchParams },
mbrId: store.state.mbrId || null, // 사용자 아이디
roles: store.state.roles.map((auth) => auth.authority) || [], // 사용자 권한
menuType: store.state.userType || null, // 메뉴 타입
// 공지사항 top5
noticeTop5: [],
// 검색조건
codeList: [],
activeTab: "categoryTab",
searchKeyword: "day",
// 통계
chartData: [],
popupList: [],
// 기업정보
companyInfoList: [],
};
},
created() {
// 쿠키 초기화
const today = new Date();
let tomorrow = new Date(today.setDate(today.getDate() + 1));
tomorrow.setHours(0, 0, 0, 0);
tomorrow = new Date(tomorrow);
if (this.$cookies.get("popup") == null) {
this.$cookies.set("popup", [], tomorrow);
}
this.fnPopupList();
this.fnCompanyInfo();
this.fnFiveNotice();
},
methods: {
showTab: function (tabName) {
this.activeTab = tabName;
this.searchKeyword = "day";
this.fnCompanyInfo();
},
// 통합검색
totalSearch() {
if (this.search.searchText === "") {
alert("검색어를 입력해주세요.");
return;
}
this.search.mbrId = this.mbrId;
this.search.roles = this.roles;
this.search.menuType = this.menuType;
this.saveQueryParams("totalSearchQueryParams", this.search); // 검색조건 저장
this.$router.push({
path: "/government/search.page",
});
},
// 통계 조회
async fnCompanyInfo() {
let data = {
activeTab: this.activeTab,
searchKeyword: this.searchKeyword,
};
try {
const response = await governmentMainProc(data);
this.codeList = response.data.data.codeList;
this.chartData = response.data.data.governmentStats;
this.companyInfoList = response.data.data.companyInfo;
} catch (error) {
alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
}
},
// 기업정보 상세 조회
fnCompanyInfoViewDetail(entId) {
this.$router.push({
path: "/government/companyInfo/view.page",
query: { pageId: entId },
});
},
// 팝업조회(상세)
async fnPopupList() {
let data = {
pageType: this.$store.state.userType,
};
try {
const response = await sysListByPageProc(data);
let popupList = response.data.data;
if (popupList != null && popupList.length > 0) {
this.fnShowPopup(popupList);
}
} catch (error) {
alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
}
},
// 팝업 표시
fnShowPopup(popupList) {
for (let popup of popupList) {
let count = false;
const popupCookies = this.$cookies.get("popup");
if (popupCookies.length > 0) {
for (let cookie of popupCookies) {
if (popup.popupId == cookie) {
count = true;
}
}
}
if (!count) {
let size = "width=" + popup.wdthLen + ", height=" + popup.vrtcLen;
window.open(
"/cmmn/popup.page?popupId=" + popup.popupId,
"_blank",
size + ", scrollbars=no, resizable=no, toolbars=no, menubar=no"
);
}
}
},
// 공지사항 최신 5개 조회
async fnFiveNotice() {
try {
const params = {
bbsMngId: "BBS_MNG_000000000000004",
};
const response = await findFiveNotice(params);
this.noticeTop5 = response.data.data;
} catch (error) {
alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
}
},
// 공지사항 상세페이지 이동
fnNoticeViewDetail(bbsId) {
this.$router.push({
path: "/government/BBS_MNG_000000000000004/view.page",
query: {
pageId: bbsId,
},
});
},
stopAutoplay() {
if (this.swiperInstance) {
this.swiperInstance.autoplay.stop();
}
},
// 자동 슬라이드 전환 시작하기
startAutoplay() {
if (this.swiperInstance) {
this.swiperInstance.autoplay.start();
this.swiperInstance.update();
}
},
},
mounted() {
// Swiper 인스턴스 초기화
this.swiperInstance = new Swiper('.swiper-container', {
loop: true, // 슬라이드 반복 여부
autoplay: {
delay: 2500, // 2.5초마다 자동으로 슬라이드 전환
disableOnInteraction: false, // 사용자가 슬라이드 조작 후에도 자동 전환 유지
},
pagination: {
el: '.swiper-pagination', // 페이지네이션 요소
clickable: true, // 페이지네이션 클릭 가능
},
navigation: {
nextEl: '.swiper-button-next', // 다음 버튼
prevEl: '.swiper-button-prev', // 이전 버튼
},
});
}
};
</script>