init dev-push code ui base design
This commit is contained in:
leonard
138
components/common/radiobutton/RadioCmCycle.vue
Normal file
138
components/common/radiobutton/RadioCmCycle.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? 'auto' : ''">
|
||||
<v-radio-group
|
||||
v-model="selected"
|
||||
required:rules="radioRules"
|
||||
row
|
||||
dense
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-radio
|
||||
label="월별"
|
||||
value="CYC_YEAR"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="일별"
|
||||
value="CYC_MONTH"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="시간별"
|
||||
value="CYC_DAY"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '주기',
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
// selected:"CYC_DAY"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
isDarkMode: 'isDarkMode',
|
||||
}),
|
||||
selected: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
set(value) {
|
||||
this.setDefaultDate(value);
|
||||
return this.setPageData({ cmCycle: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
// console.log("주기에 따른 오늘 기준 기본 날짜 세팅");
|
||||
const today = Utility.setFormatDate('today', 'YYYY-MM-DD');
|
||||
let srartDate = '';
|
||||
let endDate = '';
|
||||
// console.log(value);
|
||||
switch (value) {
|
||||
case 'CYC_YEAR':
|
||||
// endDate = today;
|
||||
srartDate = Utility.setFormatDate(today, 'YYYY');
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
// endDate = today;
|
||||
srartDate = Utility.setFormatDate(today, 'YYYY-MM');
|
||||
// endDate = today;
|
||||
// srartDate = Utility.setBeforetDate(
|
||||
// this.searchParam[this.parentPrgmId],
|
||||
// endDate,
|
||||
// "YYYYMMDD"
|
||||
// );
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
// endDate = today;
|
||||
srartDate = today;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.setPageData({ fromDt: srartDate });
|
||||
// console.log(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
// console.log(this.searchParam[this.parentPrgmId].dateRange);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
113
components/common/radiobutton/RadioStandard.vue
Normal file
113
components/common/radiobutton/RadioStandard.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-radio-group
|
||||
v-model="selected"
|
||||
required:rules="radioRules"
|
||||
row
|
||||
hide-details
|
||||
dense
|
||||
>
|
||||
<v-radio
|
||||
label="태그"
|
||||
value="tag"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="검침개소"
|
||||
value="readPlc"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="공정"
|
||||
value="ecc"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="설비"
|
||||
value="eqpm"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '기준',
|
||||
labelPrepend: true,
|
||||
// selected:"CYC_DAY"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
isDarkMode: 'isDarkMode',
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selected: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].rdbStandard;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ rdbStandard: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selected(value) {
|
||||
// 주기에 따른 오늘 기준 기본 날짜 세팅
|
||||
this.setDefaultDate(value);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
this.setPageData({ rdbStandard: value });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
99
components/common/radiobutton/RadioUseCost.vue
Normal file
99
components/common/radiobutton/RadioUseCost.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-radio-group
|
||||
v-model="selected"
|
||||
required:rules="radioRules"
|
||||
row
|
||||
hide-details
|
||||
dense
|
||||
>
|
||||
<v-radio
|
||||
label="사용량"
|
||||
value="use"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="비용"
|
||||
value="cost"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '구분',
|
||||
labelPrepend: true,
|
||||
// selected:"CYC_DAY"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
isDarkMode: 'isDarkMode',
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selected: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].rdbUseCost;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ rdbUseCost: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selected(value) {
|
||||
// 주기에 따른 오늘 기준 기본 날짜 세팅
|
||||
this.setDefaultDate(value);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
this.setPageData({ rdbUseCost: value });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
97
components/common/radiobutton/RadioView.vue
Normal file
97
components/common/radiobutton/RadioView.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-radio-group
|
||||
v-model="selectedView"
|
||||
required:rules="radioRules"
|
||||
row
|
||||
dense
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-radio
|
||||
label="전체"
|
||||
value="viewAll"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="차트"
|
||||
value="viewChart"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="그리드"
|
||||
value="viewGrid"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '',
|
||||
labelPrepend: true,
|
||||
// selected:"CYC_DAY"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
isDarkMode: 'isDarkMode',
|
||||
}),
|
||||
selectedView: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].viewCheck;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ viewCheck: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user