573 lines
17 KiB
Vue
573 lines
17 KiB
Vue
<template>
|
|
<swiper class="swiper" :options="swiperOption">
|
|
<swiper-slide>
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 1"
|
|
:is="card0Loader"
|
|
:widgetPrgmId="prgmId0"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId0"
|
|
:widgetReflashMm="widgetReflashMm0"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 2"
|
|
:is="card1Loader"
|
|
:widgetPrgmId="prgmId1"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId1"
|
|
:widgetReflashMm="widgetReflashMm1"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col xs="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 3"
|
|
:is="card2Loader"
|
|
:widgetPrgmId="prgmId2"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId2"
|
|
:widgetReflashMm="widgetReflashMm2"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 4"
|
|
:is="card3Loader"
|
|
:widgetPrgmId="prgmId3"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId3"
|
|
:widgetReflashMm="widgetReflashMm3"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 5"
|
|
:is="card4Loader"
|
|
:widgetPrgmId="prgmId4"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId4"
|
|
:widgetReflashMm="widgetReflashMm4"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 6"
|
|
:is="card5Loader"
|
|
:widgetPrgmId="prgmId5"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId5"
|
|
:widgetReflashMm="widgetReflashMm5"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
</v-row>
|
|
</swiper-slide>
|
|
<swiper-slide v-if="widgetCnt > 6">
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 7"
|
|
:is="card6Loader"
|
|
:widgetPrgmId="prgmId6"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId6"
|
|
:widgetReflashMm="widgetReflashMm6"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 8"
|
|
:is="card7Loader"
|
|
:widgetPrgmId="prgmId7"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId7"
|
|
:widgetReflashMm="widgetReflashMm7"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 9"
|
|
:is="card8Loader"
|
|
:widgetPrgmId="prgmId8"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId8"
|
|
:widgetReflashMm="widgetReflashMm8"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 10"
|
|
:is="card9Loader"
|
|
:widgetPrgmId="prgmId9"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId9"
|
|
:widgetReflashMm="widgetReflashMm9"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 11"
|
|
:is="card10Loader"
|
|
:widgetPrgmId="prgmId10"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId10"
|
|
:widgetReflashMm="widgetReflashMm10"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 12"
|
|
:is="card11Loader"
|
|
:widgetPrgmId="prgmId11"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId11"
|
|
:widgetReflashMm="widgetReflashMm11"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
</v-row>
|
|
</swiper-slide>
|
|
<swiper-slide v-if="widgetCnt > 12">
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 13"
|
|
:is="card12Loader"
|
|
:widgetPrgmId="prgmId12"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId12"
|
|
:widgetReflashMm="widgetReflashMm12"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 14"
|
|
:is="card13Loader"
|
|
:widgetPrgmId="prgmId13"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId13"
|
|
:widgetReflashMm="widgetReflashMm13"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 15"
|
|
:is="card14Loader"
|
|
:widgetPrgmId="prgmId14"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId14"
|
|
:widgetReflashMm="widgetReflashMm14"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 16"
|
|
:is="card15Loader"
|
|
:widgetPrgmId="prgmId15"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId15"
|
|
:widgetReflashMm="widgetReflashMm15"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 17"
|
|
:is="card16Loader"
|
|
:widgetPrgmId="prgmId16"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId16"
|
|
:widgetReflashMm="widgetReflashMm16"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="6">
|
|
<component
|
|
v-if="widgetCnt >= 18"
|
|
:is="card17Loader"
|
|
:widgetPrgmId="prgmId17"
|
|
:widgetPopFg="true"
|
|
:widgetId="widgetId17"
|
|
:widgetReflashMm="widgetReflashMm17"
|
|
:parentPrgmId="myPrgmId"/>
|
|
</v-col>
|
|
</v-row>
|
|
</swiper-slide>
|
|
<div class="swiper-pagination swiper-pagination-horizontal swiper-position" slot="pagination"></div>
|
|
</swiper>
|
|
</template>
|
|
<script>
|
|
import { mapState, mapMutations, mapActions } from "vuex";
|
|
import Utility from "~/plugins/utility";
|
|
import Grid from "~/components/common/Grid";
|
|
import Chart from "~/components/common/Chart";
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
import 'swiper/dist/css/swiper.min.css'
|
|
|
|
|
|
let myTitle;
|
|
// const myPrgmId = "PRG4107";
|
|
let myPrgmId;
|
|
export default {
|
|
async asyncData(context) {
|
|
const myState = context.store.state;
|
|
// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
|
|
// myTitle = myState.activeMenuInfo.menuNm;
|
|
myPrgmId = context.route.query.prgmId;
|
|
await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
|
|
myTitle = await myState.activeMenuInfo.menuNm;
|
|
},
|
|
meta: {
|
|
title: () => {
|
|
return myTitle;
|
|
},
|
|
prgmId: myPrgmId,
|
|
closable: true
|
|
},
|
|
components: {
|
|
Utility,
|
|
Grid,
|
|
Chart,
|
|
swiper,
|
|
swiperSlide
|
|
},
|
|
data() {
|
|
return {
|
|
myPrgmId: myPrgmId,
|
|
widgetCnt: 0,
|
|
card0: null,
|
|
card1: null,
|
|
card2: null,
|
|
card3: null,
|
|
card4: null,
|
|
card5: null,
|
|
card6: null,
|
|
card7: null,
|
|
card8: null,
|
|
card9: null,
|
|
card10: null,
|
|
card11: null,
|
|
card12: null,
|
|
card13: null,
|
|
card14: null,
|
|
card14: null,
|
|
card16: null,
|
|
card17: null,
|
|
prgmId0:null,
|
|
prgmId1:null,
|
|
prgmId2:null,
|
|
prgmId3:null,
|
|
prgmId4:null,
|
|
prgmId5:null,
|
|
prgmId6:null,
|
|
prgmId7:null,
|
|
prgmId8:null,
|
|
prgmId9:null,
|
|
prgmId10:null,
|
|
prgmId11:null,
|
|
prgmId12:null,
|
|
prgmId13:null,
|
|
prgmId14:null,
|
|
prgmId15:null,
|
|
prgmId16:null,
|
|
prgmId17:null,
|
|
widgetId0:null,
|
|
widgetId1:null,
|
|
widgetId2:null,
|
|
widgetId3:null,
|
|
widgetId4:null,
|
|
widgetId5:null,
|
|
widgetId6:null,
|
|
widgetId7:null,
|
|
widgetId8:null,
|
|
widgetId9:null,
|
|
widgetId10:null,
|
|
widgetId11:null,
|
|
widgetId12:null,
|
|
widgetId13:null,
|
|
widgetId14:null,
|
|
widgetId15:null,
|
|
widgetId16:null,
|
|
widgetId17:null,
|
|
|
|
widgetReflashMm0:15*60000,
|
|
widgetReflashMm1:15*60000,
|
|
widgetReflashMm2:15*60000,
|
|
widgetReflashMm3:15*60000,
|
|
widgetReflashMm4:15*60000,
|
|
widgetReflashMm5:15*60000,
|
|
|
|
widgetReflashMm6:15*60000,
|
|
widgetReflashMm7:15*60000,
|
|
widgetReflashMm8:15*60000,
|
|
widgetReflashMm9:15*60000,
|
|
widgetReflashMm10:15*60000,
|
|
widgetReflashMm11:15*60000,
|
|
|
|
widgetReflashMm12:15*60000,
|
|
widgetReflashMm13:15*60000,
|
|
widgetReflashMm14:15*60000,
|
|
widgetReflashMm15:15*60000,
|
|
widgetReflashMm16:15*60000,
|
|
widgetReflashMm17:15*60000,
|
|
swiperOption: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 20,
|
|
loop: false,
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true
|
|
},
|
|
keyboard: {
|
|
enabled: true
|
|
},
|
|
allowTouchMove : false, //(false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능
|
|
watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
|
|
},
|
|
widgetPrgmUrlList: [],
|
|
widgetList: []
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
pageData: state => state.pageData[myPrgmId]
|
|
}),
|
|
card0Loader(){
|
|
const tab0 = this.card0 == null ? 'BlankWidget' : this.card0
|
|
//const tab0 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab0}`)
|
|
},
|
|
card1Loader(){
|
|
const tab1 = this.card1 == null ? 'BlankWidget' : this.card1
|
|
//const tab1 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab1}`)
|
|
},
|
|
card2Loader(){
|
|
const tab2 = this.card2 == null ? 'BlankWidget' : this.card2
|
|
//const tab2 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab2}`)
|
|
},
|
|
card3Loader(){
|
|
const tab3 = this.card3 == null ? 'BlankWidget' : this.card3
|
|
//const tab3 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab3}`)
|
|
},
|
|
card4Loader(){
|
|
const tab4 = this.card4 == null ? 'BlankWidget' : this.card4
|
|
//const tab4 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab4}`)
|
|
},
|
|
card5Loader(){
|
|
const tab5 = this.card5 == null ? 'BlankWidget' : this.card5
|
|
//const tab5 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab5}`)
|
|
},
|
|
|
|
card6Loader(){
|
|
const tab6 = this.card6 == null ? 'BlankWidget' : this.card6
|
|
//const tab0 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab6}`)
|
|
},
|
|
card7Loader(){
|
|
const tab7 = this.card7 == null ? 'BlankWidget' : this.card7
|
|
//const tab1 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab7}`)
|
|
},
|
|
card8Loader(){
|
|
const tab8 = this.card8 == null ? 'BlankWidget' : this.card8
|
|
//const tab2 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab8}`)
|
|
},
|
|
card9Loader(){
|
|
const tab9 = this.card9 == null ? 'BlankWidget' : this.card9
|
|
//const tab3 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab9}`)
|
|
},
|
|
card10Loader(){
|
|
const tab10 = this.card10 == null ? 'BlankWidget' : this.card10
|
|
//const tab4 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab10}`)
|
|
},
|
|
card11Loader(){
|
|
const tab11 = this.card11 == null ? 'BlankWidget' : this.card11
|
|
//const tab5 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab11}`)
|
|
},
|
|
|
|
card12Loader(){
|
|
const tab12 = this.card12 == null ? 'BlankWidget' : this.card12
|
|
//const tab0 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab12}`)
|
|
},
|
|
card13Loader(){
|
|
const tab13 = this.card13 == null ? 'BlankWidget' : this.card13
|
|
//const tab1 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab13}`)
|
|
},
|
|
card14Loader(){
|
|
const tab14 = this.card14 == null ? 'BlankWidget' : this.card14
|
|
//const tab2 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab14}`)
|
|
},
|
|
card15Loader(){
|
|
const tab15 = this.card15 == null ? 'BlankWidget' : this.card15
|
|
//const tab3 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab15}`)
|
|
},
|
|
card16Loader(){
|
|
const tab16 = this.card16 == null ? 'BlankWidget' : this.card16
|
|
//const tab4 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab16}`)
|
|
},
|
|
card17Loader(){
|
|
const tab17 = this.card17 == null ? 'BlankWidget' : this.card17
|
|
//const tab5 = 'BlankWidget'
|
|
return () => import(`@/components/widget/${tab17}`)
|
|
},
|
|
},
|
|
watch: {
|
|
},
|
|
async beforeCreate() {
|
|
myPrgmId = this.$route.query.prgmId;
|
|
await this.$store.dispatch("chkOpenTabList", {
|
|
key: "create",
|
|
prgmId: myPrgmId,
|
|
defaultData: defaultData
|
|
});
|
|
},
|
|
async created(){
|
|
|
|
},
|
|
async mounted(){
|
|
await this.selectIndvWidgetList();
|
|
await this.selectWidgetPrgmUrlList();
|
|
},
|
|
beforeDestroy() {
|
|
this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
setPageData: "setPageData",
|
|
setGridData: "setGridData",
|
|
setGridColumn: "setGridColumn",
|
|
setGridOption: "setGridOption",
|
|
setChartOption: "setChartOption"
|
|
}),
|
|
...mapActions({
|
|
postApi: "modules/list/postApi",
|
|
postUpdateApi: "modules/list/postUpdateApi",
|
|
postApiReturn: "modules/list/postApiReturn",
|
|
chkOpenTabList: "chkOpenTabList"
|
|
}),
|
|
|
|
async selectIndvWidgetList(){
|
|
const _this = this;
|
|
const res = await this.postApiReturn({
|
|
apiKey: "selectIndvWidgetList",
|
|
resKey: "widgetData",
|
|
sendParam: {}
|
|
});
|
|
|
|
const res2 = await this.postApiReturn({
|
|
apiKey: "selectWidgetPrgmUrl",
|
|
resKey: "widgetData",
|
|
sendParam: {}
|
|
});
|
|
this.widgetPrgmUrlList = res2;
|
|
this.widgetList = res;
|
|
this.widgetCnt = res.length;
|
|
for(var i=0; i<this.widgetList.length; i++){
|
|
for(var j=0; j<this.widgetPrgmUrlList.length; j++){
|
|
if(this.widgetList[i].widgetId == this.widgetPrgmUrlList[j].widgetId){
|
|
eval('_this.prgmId' + i + "= true");
|
|
}
|
|
}
|
|
eval('_this.card' + i + "= res["+i+"].widgetId");
|
|
eval('_this.widgetId' + i + "= res["+i+"].widgetId");
|
|
if(res[i].widgetReflashMm == null){
|
|
eval('_this.widgetReflashMm' + i + "= 15*60000");
|
|
}else{
|
|
eval('_this.widgetReflashMm' + i + "= res["+i+"].widgetReflashMm*60000");
|
|
}
|
|
|
|
}
|
|
// for(var i=0; i<res.length; i++){
|
|
// eval('_this.card' + i + "= res["+i+"].widgetId");
|
|
// }
|
|
},
|
|
async selectWidgetPrgmUrlList(){
|
|
// const _this = this;
|
|
// const res = await this.postApiReturn({
|
|
// apiKey: "selectWidgetPrgmUrl",
|
|
// resKey: "widgetData",
|
|
// sendParam: {}
|
|
// });
|
|
// this.widgetPrgmUrlList = res;
|
|
// for(var i=0; i<this.widgetList.length; i++){
|
|
// for(var j=0; j<this.widgetPrgmUrlList.length; j++){
|
|
// if(this.widgetList[i].widgetId == this.widgetPrgmUrlList[j].widgetId){
|
|
// eval('_this.prgmId' + i + "= true");
|
|
// }
|
|
// }
|
|
// }
|
|
},
|
|
openWidgetPrgm(widgetId){
|
|
var prgmUrl;
|
|
for(var i=0; i<this.widgetPrgmUrlList.length; i++){
|
|
if(this.widgetPrgmUrlList[i].widgetId == widgetId){
|
|
prgmUrl = this.widgetPrgmUrlList[i].prgmUrl
|
|
}
|
|
}
|
|
this.$router.push({
|
|
path: prgmUrl
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const defaultData = {
|
|
isFind: false,
|
|
};
|
|
|
|
const myDetail = [
|
|
|
|
];
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.swiper-wrapper{
|
|
box-sizing: inherit !important;
|
|
}
|
|
|
|
.swiper-pagination-horizontal{
|
|
bottom: 10px;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
.swiper-pagination-bullet{
|
|
width: 15px;
|
|
height: 15px;
|
|
margin: 0 var(--swiper-pagination-bullet-horizontal-gap,5px);
|
|
background: #fff;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
opacity: 1;
|
|
background: #196dcb;
|
|
}
|
|
// .swiper-position{
|
|
// position: fixed;
|
|
// }
|
|
</style>
|