sk_fems_ui commit
This commit is contained in:
unknown
572
pages/comm/base/IndvDashboardPage.vue
Normal file
572
pages/comm/base/IndvDashboardPage.vue
Normal file
@ -0,0 +1,572 @@
|
||||
<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">
|
||||
.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>
|
||||
Reference in New Issue
Block a user