init dev-push code ui base design
This commit is contained in:
leonard
@ -170,7 +170,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.btn-pager {
|
||||
margin: 4px;
|
||||
input {
|
||||
@ -200,9 +200,9 @@ export default {
|
||||
// .grey--text {
|
||||
// margin-left: 16px;
|
||||
// }
|
||||
.mr-4 {
|
||||
margin-left: 14px;
|
||||
}
|
||||
// .mr-4 {
|
||||
// margin-left: 14px;
|
||||
// }
|
||||
.v-btn__content {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@ -1,19 +1,23 @@
|
||||
<template>
|
||||
<v-menu offset-y nudge-bottom="8" :left="true">
|
||||
<v-menu offset-y nudge-bottom="8" :right="true">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
depressed
|
||||
:ripple="false"
|
||||
:class="{ miniVariant }"
|
||||
:style="btnStyle"
|
||||
>
|
||||
<v-icon size="32" :class="{ 'mr-2': !miniVariant }"
|
||||
icon
|
||||
fab
|
||||
small
|
||||
>
|
||||
<!-- depressed
|
||||
:ripple="false" -->
|
||||
<!-- :style="btnStyle" -->
|
||||
|
||||
<v-icon size="32" color="#fff"
|
||||
>$icoAdminMenu</v-icon
|
||||
>
|
||||
<span class="body-1 mr-1">{{ userNm }}</span>
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
<!-- <span class="body-1 mr-1">{{ userNm }}</span> -->
|
||||
<!-- <v-icon>mdi-chevron-down</v-icon> -->
|
||||
</v-btn>
|
||||
<!-- <AlertPopup
|
||||
ref="alertPop"
|
||||
@ -155,12 +159,15 @@ export default {
|
||||
min-width: auto !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px !important;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 !important;
|
||||
// margin-bottom: 12px;
|
||||
|
||||
&,
|
||||
&:before {
|
||||
background-color: transparent !important;
|
||||
// background-color: transparent !important;
|
||||
}
|
||||
&.v-btn--fab{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
|
||||
@ -59,7 +59,6 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
isDarkMode: 'isDarkMode',
|
||||
|
||||
chartOption(state) {
|
||||
var dark_Col = [
|
||||
'#01AE6A',
|
||||
@ -352,10 +351,14 @@ export default {
|
||||
tmpChrtOp.color = light_Col;
|
||||
}
|
||||
}
|
||||
console.log('ops11:',tmpChrtOp)
|
||||
return tmpChrtOp;
|
||||
},
|
||||
}),
|
||||
},
|
||||
created() {
|
||||
console.log('wd data:',this.widgetData)
|
||||
},
|
||||
methods: {
|
||||
onClick(event, instance, ECharts) {
|
||||
console.log('onClick : ', event);
|
||||
|
||||
@ -1,102 +1,110 @@
|
||||
<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="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
@change="modifyValue"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
|
||||
<a-checkbox
|
||||
v-model:checked="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
@change="modifyValue"
|
||||
>
|
||||
</a-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
isDarkMode: {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
isDarkMode: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
default: true
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chkValue: false,
|
||||
testData: false,
|
||||
disabledFlag: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chkValue: false,
|
||||
testData: false,
|
||||
disabledFlag: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
myBindingDara(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
myBindingDara: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.chkValue = val;
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
modifyValue(e) {
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: (state) => state.pageData,
|
||||
myBindingDara(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
myBindingDara: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.chkValue = val;
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
modifyValue(e) {
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,144 +1,141 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="location == 'front'" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="textCols" @click="modifyValue">
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
@change="modifyValue"
|
||||
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
<v-col v-if="location == 'rear'" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="location == 'front'" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="textCols" @click="modifyValue">
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
@change="modifyValue"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
<v-col v-if="location == 'rear'" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
isDarkMode: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
icon: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: 'front'
|
||||
},
|
||||
disabledCheckOption: {
|
||||
type: String,
|
||||
require: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chkValue: false,
|
||||
testData: false,
|
||||
disabledFlag: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
isDarkMode: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
icon: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "front",
|
||||
},
|
||||
disabledCheckOption: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chkValue: false,
|
||||
testData: false,
|
||||
disabledFlag: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
myBindingData(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
bindingDisabledCheckOption(state) {
|
||||
if(state.pageData[this.parentPrgmId][this.disabledCheckOption]!=undefined){
|
||||
return state.pageData[this.parentPrgmId][this.disabledCheckOption];
|
||||
}
|
||||
|
||||
}
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
myBindingData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.chkValue = val;
|
||||
},
|
||||
},
|
||||
bindingDisabledCheckOption(val) {
|
||||
this.disabledFlag = val;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
if(this.searchParam[this.parentPrgmId][this.disabledCheckOption]!=undefined){
|
||||
this.disabledFlag = this.searchParam[this.parentPrgmId][this.disabledCheckOption]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
modifyValue(e) {
|
||||
if(this.disabledFlag==true&&e.target != undefined){
|
||||
alert('기간이 한 시간 이내일 경우만 선택할 수 있습니다.')
|
||||
}else{
|
||||
if(e.target == undefined){
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: (state) => state.pageData,
|
||||
myBindingData(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
bindingDisabledCheckOption(state) {
|
||||
if (state.pageData[this.parentPrgmId][this.disabledCheckOption] != undefined) {
|
||||
return state.pageData[this.parentPrgmId][this.disabledCheckOption];
|
||||
}
|
||||
},
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
myBindingData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.chkValue = val;
|
||||
},
|
||||
},
|
||||
bindingDisabledCheckOption(val) {
|
||||
this.disabledFlag = val;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
if (this.searchParam[this.parentPrgmId][this.disabledCheckOption] != undefined) {
|
||||
this.disabledFlag = this.searchParam[this.parentPrgmId][this.disabledCheckOption];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
modifyValue(e) {
|
||||
if (this.disabledFlag == true && e.target != undefined) {
|
||||
alert("기간이 한 시간 이내일 경우만 선택할 수 있습니다.");
|
||||
} else {
|
||||
if (e.target == undefined) {
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
84
components/common/ColumnChart.vue
Normal file
84
components/common/ColumnChart.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<v-chart class="chart" :option="option" autoresize style="width: 400px; height: 300px;" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components';
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { defineComponent } from '@vue/composition-api';
|
||||
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
PieChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
]);
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ColumnChart',
|
||||
components: {
|
||||
VChart,
|
||||
},
|
||||
provide: {
|
||||
[THEME_KEY]: 'dark',
|
||||
},
|
||||
setup() {
|
||||
const option = ref({
|
||||
title: {
|
||||
text: 'Traffic Sources',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Traffic Sources',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 335, name: 'Direct' },
|
||||
{ value: 310, name: 'Email' },
|
||||
{ value: 234, name: 'Ad Networks' },
|
||||
{ value: 135, name: 'Video Ads' },
|
||||
{ value: 1548, name: 'Search Engines' },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
return { option };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@ -2,14 +2,14 @@
|
||||
<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="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="iconShow" small color="primary"
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<div class="datepicker-container">
|
||||
<div class="datepicker-container" >
|
||||
<v-text-field
|
||||
id="startpicker"
|
||||
ref="startpicker"
|
||||
@ -19,16 +19,18 @@
|
||||
readonly
|
||||
outlined
|
||||
>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
<template #append >
|
||||
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container" id="startpicker-container"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
|
||||
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
|
||||
<img :src="arrowIcon" alt="">
|
||||
</div>
|
||||
<v-text-field
|
||||
v-show="isRange"
|
||||
v-if="isRange"
|
||||
id="endpicker"
|
||||
ref="endpicker"
|
||||
v-model="toDtValue"
|
||||
@ -45,6 +47,9 @@
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
<!-- test -->
|
||||
<!-- <a-button @click="onOpenDatepicker()">Open</a-button> -->
|
||||
<!-- end test -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -70,18 +75,23 @@ export default {
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
default: 12,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
default: 12,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
isRangeOption:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
@ -103,6 +113,7 @@ export default {
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
isDarkMode: "isDarkMode",
|
||||
}),
|
||||
myCmCycle() {
|
||||
return this.searchParam.cmCycle;
|
||||
@ -194,6 +205,12 @@ export default {
|
||||
this.defaultRange === 'no limite'
|
||||
);
|
||||
},
|
||||
arrowIcon() {
|
||||
if(this.isDarkMode){
|
||||
return require('@/assets/images/arrow_datepicker_dm.png');
|
||||
}
|
||||
return require('@/assets/images/arrow_datepicker.png');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
myCmCycle() {
|
||||
@ -259,8 +276,10 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
const startContainer = document.getElementById('startpicker-container');
|
||||
// const startContainer = document.getElementById('datepicker-container');
|
||||
const startTarget = document.getElementById('startpicker');
|
||||
const endContainer = document.getElementById('endpicker-container');
|
||||
// const endContainer = document.getElementById('datepicker-container');
|
||||
const endTarget = document.getElementById('endpicker');
|
||||
|
||||
// datepicker 생성
|
||||
@ -304,6 +323,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
onOpenDatepicker() {
|
||||
this.startDatepickerInstance.open();
|
||||
this.endDatepickerInstance.open();
|
||||
},
|
||||
getStartDt() {
|
||||
const dt = this.startDatepickerInstance.getDate();
|
||||
this.setPageData({
|
||||
@ -401,34 +424,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
@import "@/assets/scss/datepicker.scss";
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,9 +2,15 @@
|
||||
<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="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
> -->
|
||||
<v-icon
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>
|
||||
$icoBulletPoint
|
||||
</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -19,14 +25,17 @@
|
||||
readonly
|
||||
outlined
|
||||
>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
<template #append >
|
||||
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container" id="startpicker-container"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
|
||||
<!-- <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> -->
|
||||
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
|
||||
<img :src="arrowIcon" alt="">
|
||||
</div>
|
||||
<v-text-field
|
||||
v-show="isRange"
|
||||
id="endpicker"
|
||||
@ -104,6 +113,7 @@ export default {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
isDarkMode: "isDarkMode",
|
||||
myCmCycle() {
|
||||
return this.searchParam.cmCycle;
|
||||
},
|
||||
@ -194,6 +204,12 @@ export default {
|
||||
this.defaultRange === 'no limite'
|
||||
);
|
||||
},
|
||||
arrowIcon() {
|
||||
if(this.isDarkMode){
|
||||
return require('@/assets/images/arrow_datepicker_dm.png');
|
||||
}
|
||||
return require('@/assets/images/arrow_datepicker.png');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
myCmCycle() {
|
||||
@ -401,34 +417,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
@import "@/assets/scss/datepicker.scss";
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -260px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
|
||||
@ -355,34 +355,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
@import "@/assets/scss/datepicker.scss";
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
|
||||
@ -107,13 +107,16 @@ export default {
|
||||
},
|
||||
chkGridOptions() {
|
||||
const options = {
|
||||
// bodyHeight: 'fitToContent',
|
||||
scrollX: false,
|
||||
scrollY: false,
|
||||
...this.gridData.option,
|
||||
useIcon: false,
|
||||
};
|
||||
options.treeColumnOptions = {
|
||||
useIcon: false,
|
||||
...options.treeColumnOptions,
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
defaultRow() {
|
||||
@ -160,7 +163,7 @@ export default {
|
||||
},
|
||||
created() {},
|
||||
async mounted() {
|
||||
// console.log(this.dataPath);
|
||||
console.log('--------------DEBUG----gridData: ', this.gridData);
|
||||
if (this.gridName) {
|
||||
this.gridInstance = this.$refs['tuigrid' + this.gridName];
|
||||
|
||||
@ -700,6 +703,11 @@ export default {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .tui-grid-container {
|
||||
|
||||
// .tui-grid-body-area {
|
||||
// overflow: hidden !important;
|
||||
// }
|
||||
|
||||
.tui-grid-content-area {
|
||||
.tui-grid-cell-content {
|
||||
input[type='number'] {
|
||||
|
||||
47
components/common/MockChart.vue
Normal file
47
components/common/MockChart.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<client-only>
|
||||
<VChart
|
||||
:option="chartOption"
|
||||
ref="chart"
|
||||
style="width:400px; height:300px;"
|
||||
/>
|
||||
</client-only>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Echarts from 'vue-echarts';
|
||||
// import 'echarts'
|
||||
|
||||
export default {
|
||||
// name: 'Vchart',
|
||||
// components: {
|
||||
// 'v-charts': Echarts,
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
chartOption: {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
progress: {
|
||||
show:true
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}%'
|
||||
},
|
||||
data:[{
|
||||
value: 65,
|
||||
name: 'Progress'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log('test chart:')
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
20
components/common/PageTitle.vue
Normal file
20
components/common/PageTitle.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<h1 class="h1-title">
|
||||
<v-avatar size="12" :style="{ backgroundColor: 'currentColor' }"></v-avatar>
|
||||
{{ text }}
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PageTitle",
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -313,34 +313,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
@import "@/assets/scss/datepicker.scss";
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
|
||||
@ -41,6 +41,7 @@ export default {
|
||||
.v-input__control,
|
||||
.v-input__slot {
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
.v-input--selection-controls__input {
|
||||
width: 100%;
|
||||
@ -80,7 +81,7 @@ export default {
|
||||
background-color: #383f5d;
|
||||
}
|
||||
.v-input--switch__thumb {
|
||||
transform: translate(38px, 0);
|
||||
// transform: translate(38px, 0);
|
||||
background-image: url(../../assets/images/icon/ico-theme-dark.png);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
<template>
|
||||
<div class="d-flex flex-column justify-center align-center">
|
||||
<v-btn icon tile :ripple="false" @click="btnActionsFnc('addLeftToRight')">
|
||||
<!--<v-btn icon tile :ripple="false" @click="btnActionsFnc('addLeftToRight')">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
</v-btn> -->
|
||||
<a-button type="default" @click="btnActionsFnc('addLeftToRight')">
|
||||
<RightOutlines/>
|
||||
</a-button>
|
||||
|
||||
<!--<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@ -11,7 +15,10 @@
|
||||
@click="btnActionsFnc('removeRightToLeft')"
|
||||
>
|
||||
<v-icon>mdi-chevron-left</v-icon>
|
||||
</v-btn>
|
||||
</v-btn> -->
|
||||
<a-button class="mt-2" type="default" @click="btnActionsFnc('removeRightToLeft')">
|
||||
<LeftOutlines/>
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="btnActionsFnc('add')">추가</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="btnActionsFnc('add')">추가</v-btn> -->
|
||||
<a-button type="primary" @click="btnActionsFnc('add')" class="v-btn-add-text" icon="plus">
|
||||
추가
|
||||
</a-button>
|
||||
</template>
|
||||
<style>
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="downloadExcelFile">액셀</v-btn>
|
||||
<!--<v-btn :ripple="false" @click="downloadExcelFile">액셀</v-btn>-->
|
||||
<a-button
|
||||
@click="downloadExcelFile"
|
||||
v-bind="$attrs"
|
||||
type="default"
|
||||
class="btn-default"
|
||||
icon="file-excel"
|
||||
:size="size"
|
||||
>액셀</a-button>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -33,6 +42,11 @@ export default {
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "middle", // small, middle, large
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -134,3 +148,5 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div id="btnExeclUpload">
|
||||
<v-btn class="v-btn__round v-btn__excel" @click="uploadExcelFile">
|
||||
<!-- <v-btn class="v-btn__round v-btn__excel" @click="uploadExcelFile">
|
||||
<v-icon>mdi-file-excel</v-icon>
|
||||
엑셀 로드
|
||||
</v-btn>
|
||||
</v-btn> -->
|
||||
<a-button class="v-btn__round v-btn__excel" type="default" @click="uploadExcelFile">엑셀 로드</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="btnActionsFnc('remove')">삭제</v-btn>
|
||||
<!--<v-btn :ripple="false" @click="btnActionsFnc('remove')">삭제</v-btn>-->
|
||||
<a-button type="danger" @click="btnActionsFnc('remove')" ghost danger icon="delete">삭제</a-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -1,16 +1,25 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="btnActionsFnc('save')">저장</v-btn>
|
||||
<!--<v-btn :ripple="false" @click="btnActionsFnc('save')">저장</v-btn>-->
|
||||
<!-- style="color: #1890ff; border-color: #1890ff" -->
|
||||
<a-button
|
||||
type="default"
|
||||
class="btn-default"
|
||||
@click="btnActionsFnc('save')"
|
||||
icon="save"
|
||||
>
|
||||
저장</a-button
|
||||
>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
myGrid: {
|
||||
require: true,
|
||||
},
|
||||
btnActionsFnc: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
props: {
|
||||
myGrid: {
|
||||
require: true,
|
||||
},
|
||||
btnActionsFnc: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="getSearch('prev')">조회</v-btn>
|
||||
<a-button icon="search" type="primary" @click="getSearch('prev')" class="search-button" :size="size">조회</a-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "middle", // small, middle, large
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
getSearch() {
|
||||
@ -14,4 +22,6 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" scoped></style>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="setTotal()">전체</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="setTotal()">전체</v-btn> -->
|
||||
<a-button type="default" @click="setTotal()">전체</a-button>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { mapMutations } from 'vuex';
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="d-flex" style="gap:8px">
|
||||
<component
|
||||
:is="buttonAuth.add ? 'BtnAddRow' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.remove ? 'BtnRemoveRow' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.save ? 'BtnSave' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.excel ? 'BtnExcelDownload' : null"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:gridName="bindingData"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.save ? 'BtnSave' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.remove ? 'BtnRemoveRow' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
34
components/common/card/AntCard.vue
Normal file
34
components/common/card/AntCard.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="custom-card">
|
||||
<a-card
|
||||
:class="['themed-card', cardClass]"
|
||||
:title="title"
|
||||
bordered
|
||||
ref="cardRef"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<slot />
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'AntCard',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
cardClass: {
|
||||
type: [String, Array, Object],
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.custom-card {
|
||||
border-top: 4px solid #1890ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
143
components/common/chartoptions/GaugeChart.js
Normal file
143
components/common/chartoptions/GaugeChart.js
Normal file
@ -0,0 +1,143 @@
|
||||
// Gauge chart options
|
||||
export default function getGaugeChartOption({ title, value, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
|
||||
const colorRanges = isDarkMode
|
||||
? [
|
||||
[0.375, '#49AA19'], // Dark Green
|
||||
// [0.5, '#B8860B'], // Dark Yellow
|
||||
[0.625, '#D89614'], // Dark Orange
|
||||
[1, '#D32029'], // Dark Red
|
||||
]
|
||||
: [
|
||||
[0.375, '#52C41A'], // Light Green
|
||||
// [0.5, '#FFD700'], // Light Yellow
|
||||
[0.625, '#FAAD14'], // Light Orange
|
||||
[1, '#F5222D'], // Light Red
|
||||
];
|
||||
// Old color range
|
||||
// const gaugeColors = [
|
||||
// [0, "#ed1c24"],
|
||||
// [0.6, "#ed1c24"],
|
||||
// [0.8, "#f7931e"],
|
||||
// [1.0, "#009245"],
|
||||
// ];
|
||||
// const gaugeColors2 = [
|
||||
// [0, "#009245"],
|
||||
// [0.6, "#009245"],
|
||||
// [0.8, "#f7931e"],
|
||||
// [1.0, "#ed1c24"],
|
||||
// ];
|
||||
return {
|
||||
grid: {
|
||||
// top: '-10%',
|
||||
bottom: 0,
|
||||
},
|
||||
title: {},
|
||||
graphic: [
|
||||
{
|
||||
type: "circle",
|
||||
left: "center",
|
||||
top: "center",
|
||||
shape: {
|
||||
r: backgroundRadius, // radius of the background circle
|
||||
},
|
||||
style: {
|
||||
fill: isDarkMode ? "#141415" : "#F5F5F5", // Light grey color
|
||||
opacity: 0.3, // Semi-transparent
|
||||
},
|
||||
z: 0, // make sure it's behind the gauge
|
||||
},
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "90%",
|
||||
startAngle: 225,
|
||||
endAngle: -45,
|
||||
min: min,
|
||||
max: max,
|
||||
// progress: {
|
||||
// show: true,
|
||||
// width: 15,
|
||||
// },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
// color: [
|
||||
// [0.375, "#3CB371"], // Green (0–60)
|
||||
// [0.5, "#FFD700"], // Yellow (60–80)
|
||||
// [0.625, "#FFA500"], // Orange (80–100)
|
||||
// [1, "#FF4500"], // Red (100–160)
|
||||
// ],
|
||||
color: colorRanges
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
distance: -12,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
color: "#000000",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
distance: -12,
|
||||
length: 8,
|
||||
lineStyle: {
|
||||
color: "#000000",
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDarkMode ? "#fff" : "#333333",
|
||||
distance: 23,
|
||||
fontSize: 9,
|
||||
},
|
||||
pointer: {
|
||||
show: true,
|
||||
length: "70%",
|
||||
width: 6,
|
||||
itemStyle: {
|
||||
color: "#FA8C16", // Set your desired pointer color here
|
||||
},
|
||||
},
|
||||
title: {
|
||||
show: false,
|
||||
offsetCenter: [0, "40%"],
|
||||
fontSize: 18,
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
|
||||
fontFamily: "Oxanium, sans-serif", // or any custom font
|
||||
fontSize: 30,
|
||||
lineHeight: 25,
|
||||
offsetCenter: [0, "60%"],
|
||||
color: isDarkMode ? "#fff" : "#333333",
|
||||
formatter: function (value) {
|
||||
return `{valueStyle|${value}}\n{percentStyle|${unit}}`;
|
||||
},
|
||||
rich: {
|
||||
// valueStyle: {
|
||||
// fontSize: 25,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
percentStyle: {
|
||||
fontSize: 10,
|
||||
color: isDarkMode ? "#fff" : "#333333",
|
||||
// fontWeight: "normal",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 16,
|
||||
name: "에너지사용효율", // "Energy Usage Efficiency"
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
78
components/common/chartoptions/LineChart.js
Normal file
78
components/common/chartoptions/LineChart.js
Normal file
@ -0,0 +1,78 @@
|
||||
|
||||
export default function getLineChartOption({
|
||||
xAxisData = [],
|
||||
seriesData = [],
|
||||
legendData = [],
|
||||
isDarkMode = false,
|
||||
}) {
|
||||
|
||||
// const defaultColors = isDarkMode
|
||||
// ? ['#D32029', '#31B47B', '#D89614'] : ['#F5222D', '#31B47B', '#FAAD14'];
|
||||
|
||||
const defaultColors = isDarkMode
|
||||
? ['#31B47B', '#D89614', '#D32029'] : ['#31B47B', '#FAAD14', '#F5222D'];
|
||||
|
||||
const styledSeries = seriesData.map((item, index) => {
|
||||
const color = item.color || defaultColors[index % defaultColors.length];
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '5%',
|
||||
top: '25%',
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: legendData,
|
||||
icon: 'circle',
|
||||
top: '0%',
|
||||
right: '5%',
|
||||
orient: 'horizontal',
|
||||
textStyle: {
|
||||
color: isDarkMode ? '#676A7B' : '#676A7B',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode ? '#AAAAAA' : '#333333',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDarkMode ? '#676A7B' : '#676A7B',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode ? '#AAAAAA' : '#333333',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDarkMode ? '#676A7B' : '#676A7B',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode ? '#444444' : '#EEEEEE',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: styledSeries,
|
||||
};
|
||||
}
|
||||
119
components/common/checkbox/CheckBox.vue
Normal file
119
components/common/checkbox/CheckBox.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<v-row class="search-box" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<!-- <v-checkbox
|
||||
v-model="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
@change="modifyValue"
|
||||
></v-checkbox> -->
|
||||
<a-checkbox
|
||||
v-model:checked="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
@change="modifyValue"
|
||||
>
|
||||
</a-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
isDarkMode: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chkValue: false,
|
||||
testData: false,
|
||||
disabledFlag: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: (state) => state.pageData,
|
||||
myBindingDara(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
myBindingDara: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.chkValue = val;
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
modifyValue(e) {
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
146
components/common/checkbox/CheckBoxLabelChange.vue
Normal file
146
components/common/checkbox/CheckBoxLabelChange.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="location == 'front'" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="textCols" @click="modifyValue">
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
:false-value="false"
|
||||
@change="modifyValue"
|
||||
:class="isDarkMode ? 'checkbox-dark' : 'checkbox-light'"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
<v-col
|
||||
style="margin-left: 5px; margin-top: 5px"
|
||||
v-if="location == 'rear'"
|
||||
:cols="labelCols"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
isDarkMode: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
icon: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "front",
|
||||
},
|
||||
disabledCheckOption: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chkValue: false,
|
||||
testData: false,
|
||||
disabledFlag: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: (state) => state.pageData,
|
||||
myBindingData(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
bindingDisabledCheckOption(state) {
|
||||
if (state.pageData[this.parentPrgmId][this.disabledCheckOption] != undefined) {
|
||||
return state.pageData[this.parentPrgmId][this.disabledCheckOption];
|
||||
}
|
||||
},
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
myBindingData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.chkValue = val;
|
||||
},
|
||||
},
|
||||
bindingDisabledCheckOption(val) {
|
||||
this.disabledFlag = val;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
if (this.searchParam[this.parentPrgmId][this.disabledCheckOption] != undefined) {
|
||||
this.disabledFlag = this.searchParam[this.parentPrgmId][this.disabledCheckOption];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
modifyValue(e) {
|
||||
if (this.disabledFlag == true && e.target != undefined) {
|
||||
alert("기간이 한 시간 이내일 경우만 선택할 수 있습니다.");
|
||||
} else {
|
||||
if (e.target == undefined) {
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,25 +1,24 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" cols="4">
|
||||
<v-row class="search-box" align="center" >
|
||||
<v-col v-if="item.label" cols="4" >
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? 7 : ''">
|
||||
<v-col :cols="item.label ? 7 : ''" >
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
style= "height: 36px; align-items: center;"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="item.readonly || false"
|
||||
:required="item.required || false"
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
:color="isDarkMode ? '#fff' : '#1890ff'"
|
||||
@change="modifyValue"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-row no-gutters>
|
||||
<v-row class="form-row">
|
||||
<template v-for="(item, index) in detailList">
|
||||
<v-col
|
||||
v-if="!item.showValue"
|
||||
@ -44,6 +44,7 @@ import EgrpPysclQtyPop from '../modal/EgrpPysclQtyPop';
|
||||
import EqpmCalcPop from '../modal/EqpmCalcPop';
|
||||
import EqpmBaseInfoPop from '../modal/EqpmBaseInfoPop';
|
||||
import InputTextReg from './InputTextReg';
|
||||
import CustomInput from '../../form/CustomInput.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -87,7 +88,8 @@ export default {
|
||||
EgrpPysclQtyPop,
|
||||
EqpmCalcPop,
|
||||
EqpmBaseInfoPop,
|
||||
InputTextReg
|
||||
InputTextReg,
|
||||
CustomInput
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,18 +1,22 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.cols == 12 ? 2 : 4">
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col v-if="item.label"
|
||||
:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4"
|
||||
class="py-0"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? 7 : ''">
|
||||
<v-col v-if="!item.hideText"
|
||||
:cols="item.textCols !== undefined ? item.textCols : item.label ? 8 : ''" class="py-0">
|
||||
<!-- v-model="InputValue" -->
|
||||
<v-text-field
|
||||
v-model="textValue"
|
||||
|
||||
@ -1,56 +1,39 @@
|
||||
<template>
|
||||
<v-row v-if="!item.showValue" class="search-box" align="center" no-gutters>
|
||||
<v-row v-if="!item.showValue" class="search-box" align="center">
|
||||
<v-col
|
||||
v-if="item.label"
|
||||
:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
>
|
||||
class="py-0"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col
|
||||
v-if="!item.hideText"
|
||||
:cols="item.textCols !== undefined ? item.textCols : item.label ? 7 : ''"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="InputValue"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:type="item.inputType || 'text'"
|
||||
:min="item.min || ''"
|
||||
:max="item.max || ''"
|
||||
:onkeyup="item.onkeyup || ''"
|
||||
:onkeydown="item.onkeydown || ''"
|
||||
:hide-details="true"
|
||||
:disabled="
|
||||
item.disabled ||
|
||||
(item.elseDisabled &&
|
||||
myBindingData &&
|
||||
item.elseDisabled !== myBindingData.rowStat) ||
|
||||
disabledCondition ||
|
||||
false
|
||||
"
|
||||
:readonly="
|
||||
item.readonly ||
|
||||
(item.elseReadonly &&
|
||||
myBindingData &&
|
||||
item.elseReadonly !== myBindingData.rowStat) ||
|
||||
readonlyCondition ||
|
||||
false
|
||||
"
|
||||
:required="item.required || false"
|
||||
:placeholder="item.placeholder"
|
||||
@input="modifyValue($event, item.valueNm)"
|
||||
@click="onClick($event, item, item.valueNm)"
|
||||
></v-text-field>
|
||||
<v-col class="py-0" v-if="!item.hideText" :cols="item.textCols !== undefined ? item.textCols : item.label ? 8 : ''" :style="item.noText ? 'padding-top:0px' : ''">
|
||||
<v-text-field v-model="InputValue" class="v-input__custom" outlined :type="item.inputType || 'text'"
|
||||
:min="item.min || ''" :max="item.max || ''" :onkeyup="item.onkeyup || ''"
|
||||
:onkeydown="item.onkeydown || ''" :hide-details="true" :disabled="item.disabled ||
|
||||
(item.elseDisabled &&
|
||||
myBindingData &&
|
||||
item.elseDisabled !== myBindingData.rowStat) ||
|
||||
disabledCondition ||
|
||||
false
|
||||
" :readonly="item.readonly ||
|
||||
(item.elseReadonly &&
|
||||
myBindingData &&
|
||||
item.elseReadonly !== myBindingData.rowStat) ||
|
||||
readonlyCondition ||
|
||||
false
|
||||
" :required="item.required || false" :placeholder="item.placeholder" @input="modifyValue($event, item.valueNm)"
|
||||
@click="onClick($event, item, item.valueNm)"></v-text-field>
|
||||
</v-col>
|
||||
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
|
||||
<label for="" class="search-box-label px-1">
|
||||
|
||||
@ -1,28 +1,22 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.labelCols">
|
||||
<v-row class="search-box" align="center" >
|
||||
<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="item.iconShow" x-small :color="item.required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>
|
||||
$icoBulletPoint
|
||||
</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? item.textCols : ''">
|
||||
<v-text-field
|
||||
ref="formRef"
|
||||
:value="InputValue"
|
||||
class="v-input__custom"
|
||||
:disabled="item.disabled"
|
||||
:readonly="item.readonly"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
@keyup.enter="search"
|
||||
@keydown="keydownEvent"
|
||||
@keyup="keyupEvent"
|
||||
@input="inputEvent($event, item.valueNm)"
|
||||
:placeholder="item.placeholder"
|
||||
></v-text-field>
|
||||
<v-col :cols="item.label ? item.textCols : ''" class="py-0">
|
||||
<v-text-field ref="formRef" :value="InputValue" class="v-input__custom" :disabled="item.disabled"
|
||||
:readonly="item.readonly" outlined :hide-details="true" @keyup.enter="search" @keydown="keydownEvent"
|
||||
@keyup="keyupEvent" @input="inputEvent($event, item.valueNm)" :placeholder="item.placeholder"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -74,7 +68,7 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
search() {
|
||||
@ -82,22 +76,22 @@ export default {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
inputEvent(str,n){
|
||||
inputEvent(str, n) {
|
||||
var temp = str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣\s]*/i)[0];
|
||||
var regExp = /[^a-z]*/;
|
||||
temp = temp.match(regExp)[0];
|
||||
var regExp = /[^a-z]*/;
|
||||
temp = temp.match(regExp)[0];
|
||||
this.$refs.formRef.lazyValue = temp;
|
||||
const dt = {
|
||||
columnName : n,
|
||||
value : this.newValue(this.$refs.formRef.lazyValue)
|
||||
columnName: n,
|
||||
value: this.newValue(this.$refs.formRef.lazyValue)
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
},
|
||||
keydownEvent($event){
|
||||
keydownEvent($event) {
|
||||
|
||||
},
|
||||
keyupEvent($event){
|
||||
|
||||
keyupEvent($event) {
|
||||
|
||||
},
|
||||
newValue(value) {
|
||||
let returnVal = value.trim();
|
||||
|
||||
@ -1,35 +1,31 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col
|
||||
v-if="item.label"
|
||||
cols="4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
>
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col v-if="item.label" :cols="item.label ? (item.textCols ? item.textCols : 4) : ''"
|
||||
:style="item.padding ? 'padding-left:10px' : ''" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? (item.textCols ? item.textCols : 7) : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="typeof item.list != 'string' ? item.list : myListData"
|
||||
<v-col :cols="item.label ? (item.textCols ? item.textCols : 8) : ''" class="py-0">
|
||||
<v-select v-model="selectValue" :items="typeof item.list != 'string' ? item.list : myListData"
|
||||
:item-text="typeof item.list != 'string' ? 'text' : item.itemText"
|
||||
:item-value="typeof item.list != 'string' ? 'value' : item.itemValue"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:disabled="item.disabled || false"
|
||||
:readonly="item.readonly || false"
|
||||
:required="item.required || false"
|
||||
@change="modifyValue($event, item.valueNm)"
|
||||
></v-select>
|
||||
:item-value="typeof item.list != 'string' ? 'value' : item.itemValue" outlined :hide-details="true"
|
||||
class="v-select__custom" :disabled="item.disabled || false" :readonly="item.readonly || false"
|
||||
:required="item.required || false" @change="modifyValue($event, item.valueNm)" append-icon="">
|
||||
|
||||
<template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
|
||||
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -60,21 +56,25 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
myListData(state) {
|
||||
let list = [...state.pageData[this.parentPrgmId][this.item.list]];
|
||||
list.forEach((item, idx) => {
|
||||
if (item.commCdNm && item.commCdNm == '전체') {
|
||||
list.splice(idx, 1);
|
||||
}
|
||||
if (this.item.addNull && idx == 0) {
|
||||
list.unshift({
|
||||
commCd: '',
|
||||
commCdNm: '',
|
||||
commCdAbbrnm: '',
|
||||
commGrpCd: 'EM_ECC_KIND',
|
||||
});
|
||||
}
|
||||
});
|
||||
return list;
|
||||
try{
|
||||
let list = [...state.pageData[this.parentPrgmId][this.item.list]];
|
||||
list.forEach((item, idx) => {
|
||||
if (item.commCdNm && item.commCdNm == '전체') {
|
||||
list.splice(idx, 1);
|
||||
}
|
||||
if (this.item.addNull && idx == 0) {
|
||||
list.unshift({
|
||||
commCd: '',
|
||||
commCdNm: '',
|
||||
commCdAbbrnm: '',
|
||||
commGrpCd: 'EM_ECC_KIND',
|
||||
});
|
||||
}
|
||||
});
|
||||
return list;
|
||||
}catch(err) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
myBindingData(state) {
|
||||
if (!this.bindingData) {
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
methods: {
|
||||
...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
|
||||
modifyValue(v, n) {
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
v-if="item.label"
|
||||
:cols="item.cols == 12 ? 2 : 4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
class="mb-2"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
@ -41,6 +41,7 @@
|
||||
:required="item.required || false"
|
||||
:maxlength="item.maxlength"
|
||||
@input="modifyValue($event, item.valueNm)"
|
||||
outlined
|
||||
></v-textarea>
|
||||
</v-col>
|
||||
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-row class="search-box" align="end" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
@ -12,6 +15,7 @@
|
||||
<v-text-field
|
||||
v-model="InputValue"
|
||||
class="v-input__custom"
|
||||
:class="customClass"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
outlined
|
||||
@ -21,6 +25,9 @@
|
||||
@keyup="keyupEvent"
|
||||
:placeholder="placeholder"
|
||||
></v-text-field>
|
||||
<!-- <a-input v-model:value="InputValue" class="v-input__custom" :disabled="disabled" :readonly="readonly"
|
||||
:placeholder="placeholder" @pressEnter="search" @keydown="keydownEvent" @keyup="keyupEvent" :size="size" /> -->
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -58,12 +65,12 @@ export default {
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
default: 12,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
default: 12,
|
||||
},
|
||||
searchOption: {
|
||||
type: Boolean,
|
||||
@ -74,19 +81,28 @@ export default {
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
iconShow:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:true
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
replaceList:{
|
||||
type:Array,
|
||||
require:false,
|
||||
default:null
|
||||
replaceList: {
|
||||
type: Array,
|
||||
require: false,
|
||||
default: null
|
||||
},
|
||||
placeholder:{
|
||||
type:String,
|
||||
require:false
|
||||
placeholder: {
|
||||
type: String,
|
||||
require: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "middle",
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -103,8 +119,8 @@ export default {
|
||||
},
|
||||
set(value) {
|
||||
if (!this.diffModel) {
|
||||
if(this.replaceList){
|
||||
for(var i=0; i<this.replaceList; i++){
|
||||
if (this.replaceList) {
|
||||
for (var i = 0; i < this.replaceList; i++) {
|
||||
value.replaceAll(this.replaceList[i]);
|
||||
}
|
||||
}
|
||||
@ -113,7 +129,7 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
search() {
|
||||
@ -121,11 +137,11 @@ export default {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
keydownEvent($event){
|
||||
keydownEvent($event) {
|
||||
},
|
||||
keyupEvent($event){
|
||||
if(this.replaceList){
|
||||
for(var i=0; i<this.replaceList.length; i++){
|
||||
keyupEvent($event) {
|
||||
if (this.replaceList) {
|
||||
for (var i = 0; i < this.replaceList.length; i++) {
|
||||
this.InputValue = this.InputValue.replaceAll(this.replaceList[i], '');
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,11 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
@ -1,119 +1,84 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="item.iconShow" small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<v-text-field
|
||||
:readonly="item.readonly || false"
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="item.required || false"
|
||||
:disabled="item.disabled || false"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols" class="py-0">
|
||||
<v-text-field :readonly="item.readonly || false" v-model="selectValue" append-icon=""
|
||||
class="v-input__custom" @click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true"
|
||||
:required="item.required || false" :disabled="item.disabled || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="540px">
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-dialog v-model="dialog" scrollable width="800px">
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ option.modalTitle }}</span>
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
|
||||
</v-card-title>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:labelCols="2"
|
||||
:textCols="6"
|
||||
:disabled="option.eqpmGrpDisableFlag"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'설비그룹'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
:readonly="
|
||||
item.selectBoxReadonly != undefined
|
||||
? item.selectBoxReadonly
|
||||
: false
|
||||
"
|
||||
/>
|
||||
<div class="px-6 py-4 pt-0">
|
||||
<v-row align="center">
|
||||
<v-col :cols="5">
|
||||
<component :is="'SelectBox'" ref="SelectBox1" :labelCols="12" :textCols="12"
|
||||
:disabled="option.eqpmGrpDisableFlag" :propsValue="selectValue01" :iconShow="true"
|
||||
:itemList="selectValueList01" :label="'설비그룹'"
|
||||
@update:propsValue="selectValue01 = $event" :readonly="item.selectBoxReadonly != undefined
|
||||
? item.selectBoxReadonly
|
||||
: false
|
||||
" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
물리량명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
<v-col :cols="7">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon small :class="['mr-1 icon-blue']">$icoBulletPoint</v-icon>
|
||||
물리량명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="9">
|
||||
<v-text-field append-icon="" class="v-input__custom" outlined :hide-details="true"
|
||||
v-model="searchWord" @keyup.enter="search"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="3" class="text-right">
|
||||
<a-button icon="search" type="primary" @click="search()"
|
||||
class="search-button">조회</a-button>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div :style="'height: 429px;'">
|
||||
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
|
||||
<div ref="modalGridParent" class="h100 w100">
|
||||
<component
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="grid_01"
|
||||
:dataPath="searchParam.pyscModalData.egrpPysclQtyPop"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)"
|
||||
/>
|
||||
|
||||
<div :style="'height: calc(50vh)'">
|
||||
<div ref="modalGridParent" class="h100 px-6 py-4">
|
||||
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
|
||||
:dataPath="searchParam.pyscModalData.egrpPysclQtyPop" :parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData" @dblClick="setUpdate($event)" />
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<v-btn
|
||||
v-if="item.closeBtnFg || false"
|
||||
:ripple="false"
|
||||
@click="deleteBtnAction($event)"
|
||||
>삭제</v-btn
|
||||
>
|
||||
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
|
||||
<!-- <v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)">닫기</v-btn> -->
|
||||
<!-- <v-btn v-if="item.closeBtnFg || false" :ripple="false" @click="deleteBtnAction($event)">삭제</v-btn> -->
|
||||
<a-button :ripple="false" @click="setUpdate($event)" class="mr-2">확인</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="dialogOpenCloseEvent(dialog)"
|
||||
class="mr-2">닫기</a-button>
|
||||
<a-button v-if="item.closeBtnFg || false" :ripple="false" icon="delete" type="danger" ghost danger
|
||||
@click="deleteBtnAction($event)">삭제</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -165,7 +130,7 @@ export default {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
eqpmGrpDisableFlag:{
|
||||
eqpmGrpDisableFlag: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
@ -185,7 +150,23 @@ export default {
|
||||
return {
|
||||
dialog: false,
|
||||
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
dataPathPopExample: {
|
||||
"rowGrid": {
|
||||
data: [
|
||||
{
|
||||
'calcProc': 'AVG_CNT2',
|
||||
'argCnt': '2',
|
||||
'calcDesc': '두개 변수에 대한 평균'
|
||||
|
||||
}
|
||||
],
|
||||
column: [
|
||||
{ header: '계산코드', name: 'calcProc', width: 150 },
|
||||
{ header: '아규먼트갯수', name: 'argCnt', align: 'center', width: 100 },
|
||||
]
|
||||
}
|
||||
},
|
||||
grid_01: 'grid_01',
|
||||
myModalKey: 'egrpPysclQtyPop',
|
||||
modalDataKey: 'pyscModalData',
|
||||
@ -300,7 +281,7 @@ export default {
|
||||
await this.setSelectValueList01();
|
||||
this.init();
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
@ -317,39 +298,46 @@ export default {
|
||||
},
|
||||
async setSelectValueList01() {
|
||||
// form으로 popup 사용할 때 인자로 eqpmKindId, eqpmGrpId 보내줘야한다.
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmGrpCodeList',
|
||||
resKey: 'eqpmGrpCodeLists',
|
||||
sendParam: {
|
||||
eqpmKindId:
|
||||
this.item.eqpmKindId != undefined
|
||||
? this.item.eqpmKindId
|
||||
: this.searchParam.eqpmKindId,
|
||||
},
|
||||
// form을 통해 popup을 사용할 경우 -> this.item.eqpmKindId 사용
|
||||
// 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
|
||||
});
|
||||
if (res.length > 0) {
|
||||
this.selectValueList01 = await res.map(obj => {
|
||||
return {
|
||||
text: obj.eqpmGrpNm,
|
||||
value: obj.eqpmGrpId,
|
||||
};
|
||||
});
|
||||
// form을 통해 popup을 사용할 경우 -> this.item.eqpmGrpId 사용
|
||||
// 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
|
||||
// console.log('this.item.eqpmGrpId : ', this.item.eqpmGrpId);
|
||||
// console.log('this.searchParam.eqpmGrpId : ', this.searchParam.eqpmGrpId);
|
||||
this.selectValue01 =
|
||||
this.item.eqpmGrpId != undefined
|
||||
? this.item.eqpmGrpId
|
||||
: this.searchParam.eqpmGrpId != undefined
|
||||
? this.searchParam.eqpmGrpId
|
||||
: this.selectValueList01[0].value;
|
||||
} else {
|
||||
this.selectValueList01 = [];
|
||||
this.selectValue01 = null;
|
||||
}
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: 'selectEqpmGrpCodeList',
|
||||
// resKey: 'eqpmGrpCodeLists',
|
||||
// sendParam: {
|
||||
// eqpmKindId:
|
||||
// this.item.eqpmKindId != undefined
|
||||
// ? this.item.eqpmKindId
|
||||
// : this.searchParam.eqpmKindId,
|
||||
// },
|
||||
// // form을 통해 popup을 사용할 경우 -> this.item.eqpmKindId 사용
|
||||
// // 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
|
||||
// });
|
||||
// if (res.length > 0) {
|
||||
// this.selectValueList01 = await res.map(obj => {
|
||||
// return {
|
||||
// text: obj.eqpmGrpNm,
|
||||
// value: obj.eqpmGrpId,
|
||||
// };
|
||||
// });
|
||||
// // form을 통해 popup을 사용할 경우 -> this.item.eqpmGrpId 사용
|
||||
// // 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
|
||||
// // console.log('this.item.eqpmGrpId : ', this.item.eqpmGrpId);
|
||||
// // console.log('this.searchParam.eqpmGrpId : ', this.searchParam.eqpmGrpId);
|
||||
// this.selectValue01 =
|
||||
// this.item.eqpmGrpId != undefined
|
||||
// ? this.item.eqpmGrpId
|
||||
// : this.searchParam.eqpmGrpId != undefined
|
||||
// ? this.searchParam.eqpmGrpId
|
||||
// : this.selectValueList01[0].value;
|
||||
// } else {
|
||||
// this.selectValueList01 = [];
|
||||
// this.selectValue01 = null;
|
||||
// }
|
||||
|
||||
this.selectValueList01 = [
|
||||
{ label: '냉동기고온', value: '냉동기고온' },
|
||||
{ label: '냉동기저온', value: '냉동기저온' },
|
||||
{ label: '공조기', value: '공조기' },
|
||||
{ label: '보일러', value: '보일러' }
|
||||
];
|
||||
},
|
||||
search() {
|
||||
this.getGridData();
|
||||
@ -359,6 +347,7 @@ export default {
|
||||
this.getGridData();
|
||||
},
|
||||
gridInit() {
|
||||
// const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
const myOptions = {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
@ -370,7 +359,7 @@ export default {
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: Object.assign(
|
||||
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
|
||||
Utility.defaultGridOption(400, myOptions),
|
||||
// Utility.defaultGridOption(100, myOptions),
|
||||
myOptions,
|
||||
),
|
||||
});
|
||||
@ -399,44 +388,44 @@ export default {
|
||||
this.loadGrid = false;
|
||||
|
||||
let res = [];
|
||||
res = await this.postApiReturn({
|
||||
apiKey: 'selectEgrpPysclQtyPop',
|
||||
resKey: 'egrpPysclQtyData',
|
||||
sendParam: {
|
||||
searchWord: this.searchWord,
|
||||
eqpmGrpId: this.selectValue01,
|
||||
openMode: this.item.openMode,
|
||||
},
|
||||
});
|
||||
let newRes = [];
|
||||
let tempTagList = this.pyscPopVal.split('/*wq2a/');
|
||||
let tagList = tempTagList.filter(item => item != '');
|
||||
if (tagList.length > 0) {
|
||||
newRes = res.filter(item => {
|
||||
return !tagList.includes(item.pysclQtyId);
|
||||
});
|
||||
res = newRes;
|
||||
}
|
||||
|
||||
//이미 선택된 값들 제거(배열)
|
||||
if (this.item.dataList) {
|
||||
if (this.item.dataList.length > 0) {
|
||||
newRes = res.filter(item => {
|
||||
return !this.item.dataList.includes(item.pysclQtyId);
|
||||
});
|
||||
res = newRes;
|
||||
}
|
||||
}
|
||||
|
||||
// res = [
|
||||
// {
|
||||
// 'pysclQtyId' : 'PYSCL00001',
|
||||
// 'pysclQtyCd' : 'AMP_1A',
|
||||
// 'pysclQtyNm' : '회로1 전류A',
|
||||
// 'pysclQtyTpNm' : 'TAG'
|
||||
// res = await this.postApiReturn({
|
||||
// apiKey: 'selectEgrpPysclQtyPop',
|
||||
// resKey: 'egrpPysclQtyData',
|
||||
// sendParam: {
|
||||
// searchWord: this.searchWord,
|
||||
// eqpmGrpId: this.selectValue01,
|
||||
// openMode: this.item.openMode,
|
||||
// },
|
||||
// });
|
||||
// let newRes = [];
|
||||
// let tempTagList = this.pyscPopVal.split('/*wq2a/');
|
||||
// let tagList = tempTagList.filter(item => item != '');
|
||||
// if (tagList.length > 0) {
|
||||
// newRes = res.filter(item => {
|
||||
// return !tagList.includes(item.pysclQtyId);
|
||||
// });
|
||||
// res = newRes;
|
||||
// }
|
||||
|
||||
// //이미 선택된 값들 제거(배열)
|
||||
// if (this.item.dataList) {
|
||||
// if (this.item.dataList.length > 0) {
|
||||
// newRes = res.filter(item => {
|
||||
// return !this.item.dataList.includes(item.pysclQtyId);
|
||||
// });
|
||||
// res = newRes;
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
|
||||
res = [
|
||||
{
|
||||
'pysclQtyId': 'PYSCL00001',
|
||||
'pysclQtyCd': 'AMP_1A',
|
||||
'pysclQtyNm': '회로1 전류A',
|
||||
'pysclQtyTpNm': 'TAG'
|
||||
|
||||
}
|
||||
]
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.grid_01,
|
||||
@ -491,10 +480,10 @@ export default {
|
||||
this.dialog = flag;
|
||||
},
|
||||
async dialogOpenCloseEvent(val) {
|
||||
await this.setSelectValueList01();
|
||||
if (!this.myBindingData) {
|
||||
return alert('그리드를 먼저 선택해주세요.');
|
||||
}
|
||||
// await this.setSelectValueList01();
|
||||
// if (!this.myBindingData) {
|
||||
// return alert('그리드를 먼저 선택해주세요.');
|
||||
// }
|
||||
this.dialog = !val;
|
||||
},
|
||||
deleteBtnAction(v) {
|
||||
@ -562,33 +551,12 @@ var egrpPysclQtyPop = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-btn-icon-only {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<!-- <v-col v-if="label" cols="2"> -->
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-col v-if="label" :cols="item.labelCols">
|
||||
<!-- <label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
@ -10,9 +10,14 @@
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label> -->
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="item.iconShow" small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-col :cols="label ? item.textCols : ''">
|
||||
<!-- <v-col :cols="label ? 9 : ''"> -->
|
||||
<!-- :value="textfield" -->
|
||||
<v-text-field
|
||||
@ -644,8 +649,7 @@ const myColumns = [
|
||||
// 전력량 요금(원/kWh)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// @import '@/assets/scss/common.scss';
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/scss/var.scss';
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters >
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<!-- <v-col v-if="label" cols="2"> -->
|
||||
<!-- <v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
@ -27,18 +27,15 @@
|
||||
</v-col> -->
|
||||
|
||||
<!-- <v-row justify="center"> -->
|
||||
<v-dialog
|
||||
ref="popModal"
|
||||
v-model="dialog"
|
||||
width="1400"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
scrollable
|
||||
>
|
||||
<v-dialog ref="popModal" v-model="dialog" width="1200" overlay-color="#000" overlay-opacity="0.8" scrollable>
|
||||
<!-- <template v-slot:activator="{ on, attrs }">
|
||||
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
|
||||
</template> -->
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">가이드 알람이력</span>
|
||||
<a-button icon="close" type="text" @click="closePop()"></a-button>
|
||||
</v-card-title>
|
||||
<!-- <v-card-title
|
||||
class="v-card__title d-flex align-center justify-space-between"
|
||||
>
|
||||
@ -50,105 +47,66 @@
|
||||
<!-- <v-card-actions> -->
|
||||
<div class="pa-5">
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<div class="d-flex align-center justify-space-between pb-5">
|
||||
<v-card-title class="pa-0">가이드 알람이력</v-card-title>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="8" class="text-right">
|
||||
<v-btn icon tile :ripple="false" @click="closePop()">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- <v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<div class="d-flex align-center justify-space-between pb-5">
|
||||
<v-card-title class="pa-0">가이드 알람이력</v-card-title>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="8" class="text-right">
|
||||
<v-btn icon tile :ripple="false" @click="closePop()">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="1">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
설비
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['eqpmId']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon small :class="['mr-1','icon-blue']">$icoBulletPoint</v-icon>
|
||||
설비
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['eqpmNm']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-col :cols="6" class="pr-2 py-0">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['eqpmId']" class="v-input__custom"
|
||||
:readonly="true" outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<v-col :cols="6" class="pl-2 py-0">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['eqpmNm']" class="v-input__custom"
|
||||
:readonly="true" outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
가이드지표
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['gdIdxId']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters class="mt-4">
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon small :class="['mr-1','icon-blue']">$icoBulletPoint</v-icon>
|
||||
가이드지표
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['gdIdxNm']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-col :cols="6" class="pr-2 py-0">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['gdIdxId']" class="v-input__custom"
|
||||
:readonly="true" outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="pl-2 py-0">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['gdIdxNm']" class="v-input__custom"
|
||||
:readonly="true" outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div class="d-flex align-center justify-space-between pa-4">
|
||||
<v-card-title class="pa-0 custom-title-4">◇ 설비 가이드 정보</v-card-title>
|
||||
<v-card-title class="py-0 px-2 custom-title-4">설비 가이드 정보</v-card-title>
|
||||
</div>
|
||||
<div class="px-5" style="height:calc(100% - 76px)">
|
||||
<div ref="modalGridParent" class="w100 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid? 'Grid' : null"
|
||||
:dataPath="searchParam.modalData.eqpmDetlPop"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
|
||||
<div class="px-5" style="height:calc(100% - 76px)">
|
||||
<div ref="modalGridParent" class="w100 h100">
|
||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
|
||||
:dataPath="searchParam.modalData.eqpmDetlPop" :gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
|
||||
<component
|
||||
:ref="'gridName' + parentPrgmId"
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
@ -160,11 +118,10 @@
|
||||
@dblClick="setUpdate()"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" dark @click="closePop()">확인</v-btn>
|
||||
<a-button color="primary" type="primary" @click="closePop()">확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -223,19 +180,19 @@ export default {
|
||||
components: {
|
||||
Grid,
|
||||
selectCodeList,
|
||||
dateUtility,
|
||||
dateUtility,
|
||||
InputText
|
||||
// Tree
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
modalDataKey:'modalData',
|
||||
modalDataKey: 'modalData',
|
||||
myModalKey: 'eqpmDetlPop',
|
||||
gridName: 'eqpmDetlGrid',
|
||||
loadGrid: false,
|
||||
setGrid:false,
|
||||
popCheck:false,
|
||||
loadGrid: true,
|
||||
setGrid: false,
|
||||
popCheck: false,
|
||||
dialog: false,
|
||||
activeRowData: {},
|
||||
checkedRowDataList: [],
|
||||
@ -258,32 +215,38 @@ export default {
|
||||
}
|
||||
},
|
||||
}),
|
||||
InputValue: {
|
||||
InputValue: {
|
||||
get() {
|
||||
return this.myBindingData;
|
||||
// return this.myBindingData;
|
||||
return [{
|
||||
"eqpmId": "EQ001",
|
||||
"eqpmNm": "Etcher A12",
|
||||
"gdIdxId": "GD001",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
}]
|
||||
}
|
||||
},
|
||||
chkDialog(){
|
||||
chkDialog() {
|
||||
return this.dialog
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async chkDialog(val){
|
||||
if(!val){
|
||||
this.closePop();
|
||||
}else{
|
||||
// await this.getRowGridData();
|
||||
|
||||
}
|
||||
async chkDialog(val) {
|
||||
if (!val) {
|
||||
this.closePop();
|
||||
} else {
|
||||
// await this.getRowGridData();
|
||||
|
||||
}
|
||||
},
|
||||
async popCheck(val){
|
||||
if(val){
|
||||
await this.getRowGridData();
|
||||
this.dialog= true;
|
||||
}else{
|
||||
this.dialog=false;
|
||||
}
|
||||
}
|
||||
async popCheck(val) {
|
||||
if (val) {
|
||||
// await this.getRowGridData();
|
||||
this.dialog = true;
|
||||
} else {
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
@ -297,7 +260,7 @@ export default {
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setModalGridData: 'setModalGridData',
|
||||
setModalGridData: 'setModalGridData',
|
||||
setModalGridColumn: 'setModalGridColumn',
|
||||
setModalGridOption: 'setModalGridOption',
|
||||
}),
|
||||
@ -306,28 +269,32 @@ export default {
|
||||
}),
|
||||
init() {
|
||||
|
||||
this.gridInit();
|
||||
this.gridInit();
|
||||
},
|
||||
closePop(){
|
||||
this.popCheck= false;
|
||||
closePop() {
|
||||
this.popCheck = false;
|
||||
},
|
||||
search() {
|
||||
// this.getData();
|
||||
},
|
||||
gridInit(){
|
||||
// const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
gridInit() {
|
||||
// const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
|
||||
const myOptions = {
|
||||
rowHeaders: ['rowNum'],
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
minWidth:100
|
||||
},
|
||||
setScroll: true,
|
||||
};
|
||||
const myOptions = {
|
||||
rowHeaders: ['rowNum'],
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
minWidth: 100
|
||||
},
|
||||
// setScroll: true,
|
||||
header: {
|
||||
height: 37,
|
||||
},
|
||||
rowHeight: 'auto',
|
||||
};
|
||||
|
||||
|
||||
this.setModalGridOption({
|
||||
this.setModalGridOption({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridName,
|
||||
modalDataKey: this.modalDataKey,
|
||||
@ -338,55 +305,55 @@ export default {
|
||||
),
|
||||
});
|
||||
|
||||
const myColumns= [
|
||||
{
|
||||
header : '발생일',
|
||||
name : 'totDttmDay',
|
||||
align:'center'
|
||||
},
|
||||
{
|
||||
header : '발생시간대',
|
||||
name : 'totDttmTime',
|
||||
align:'center'
|
||||
},
|
||||
{
|
||||
header : '가이드지표명',
|
||||
minWidth:200,
|
||||
name : 'gdIdxNm',
|
||||
},
|
||||
{
|
||||
header : '주의',
|
||||
width:100,
|
||||
name : 'careStndVal',
|
||||
align:'center'
|
||||
},
|
||||
{
|
||||
header : '경고',
|
||||
width:100,
|
||||
name : 'warnStndVal',
|
||||
align:'center'
|
||||
},
|
||||
{
|
||||
header : '가이드값',
|
||||
width:100,
|
||||
name : 'totVal',
|
||||
align:'center'
|
||||
},
|
||||
{
|
||||
header : '알람내용',
|
||||
minWidth:300,
|
||||
width:'auto',
|
||||
name : 'alrmMsg',
|
||||
},
|
||||
{
|
||||
header : '알람종류',
|
||||
name : 'alrmKind',
|
||||
hidden:true
|
||||
},
|
||||
const myColumns = [
|
||||
{
|
||||
header: '발생일',
|
||||
name: 'totDttmDay',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
header: '발생시간대',
|
||||
name: 'totDttmTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
header: '가이드지표명',
|
||||
minWidth: 200,
|
||||
name: 'gdIdxNm',
|
||||
},
|
||||
{
|
||||
header: '주의',
|
||||
width: 100,
|
||||
name: 'careStndVal',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
header: '경고',
|
||||
width: 100,
|
||||
name: 'warnStndVal',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
header: '가이드값',
|
||||
width: 100,
|
||||
name: 'totVal',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
header: '알람내용',
|
||||
minWidth: 300,
|
||||
width: 'auto',
|
||||
name: 'alrmMsg',
|
||||
},
|
||||
{
|
||||
header: '알람종류',
|
||||
name: 'alrmKind',
|
||||
hidden: true
|
||||
},
|
||||
|
||||
]
|
||||
]
|
||||
|
||||
this.setModalGridColumn({
|
||||
this.setModalGridColumn({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridName,
|
||||
modalDataKey: this.modalDataKey,
|
||||
@ -394,59 +361,90 @@ export default {
|
||||
});
|
||||
|
||||
|
||||
// this.getRowGridData();
|
||||
},
|
||||
async getRowGridData(){
|
||||
this.loadGrid =false;
|
||||
var res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmDetailPop',
|
||||
resKey: 'eqpmDetlPopData',
|
||||
sendParam: {
|
||||
gdIdxId : this.myBindingData.gdIdxId,
|
||||
eqpmId : this.myBindingData.eqpmId,
|
||||
fromDt : this.myBindingData.fromDt,
|
||||
toDt : this.myBindingData.toDt
|
||||
},
|
||||
});
|
||||
const dayjs = require('dayjs');
|
||||
var newRes = res.map(item=>
|
||||
item = {
|
||||
...item,
|
||||
totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
|
||||
totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH'),
|
||||
}
|
||||
);
|
||||
this.getRowGridData();
|
||||
},
|
||||
async getRowGridData() {
|
||||
this.loadGrid = false;
|
||||
// var res = await this.postApiReturn({
|
||||
// apiKey: 'selectEqpmDetailPop',
|
||||
// resKey: 'eqpmDetlPopData',
|
||||
// sendParam: {
|
||||
// gdIdxId : this.myBindingData.gdIdxId,
|
||||
// eqpmId : this.myBindingData.eqpmId,
|
||||
// fromDt : this.myBindingData.fromDt,
|
||||
// toDt : this.myBindingData.toDt
|
||||
// },
|
||||
// });
|
||||
// const dayjs = require('dayjs');
|
||||
// var newRes = res.map(item=>
|
||||
// item = {
|
||||
// ...item,
|
||||
// totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
|
||||
// totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH'),
|
||||
// }
|
||||
// );
|
||||
|
||||
this.setModalGridData({
|
||||
const newRes = [
|
||||
{
|
||||
"totDttmDay": "2025-07-10",
|
||||
"totDttmTime": "14:00~15:00",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
"careStndVal": 500,
|
||||
"warnStndVal": 700,
|
||||
"totVal": 720,
|
||||
"alrmMsg": "Chamber pressure exceeded warning threshold. Immediate inspection required.",
|
||||
"alrmKind": "경고"
|
||||
},
|
||||
{
|
||||
"totDttmDay": "2025-07-10",
|
||||
"totDttmTime": "09:00~10:00",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
"careStndVal": 60,
|
||||
"warnStndVal": 80,
|
||||
"totVal": 75,
|
||||
"alrmMsg": "Temperature nearing warning threshold. Monitor closely.",
|
||||
"alrmKind": "주의"
|
||||
},
|
||||
{
|
||||
"totDttmDay": "2025-07-09",
|
||||
"totDttmTime": "22:00~23:00",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
"careStndVal": 300,
|
||||
"warnStndVal": 400,
|
||||
"totVal": 290,
|
||||
"alrmMsg": "Gas flow rate below caution level. Check for leaks or blockages.",
|
||||
"alrmKind": "주의"
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridName,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: newRes,
|
||||
});
|
||||
|
||||
|
||||
this.loadGrid=true;
|
||||
|
||||
this.setGrid = true;
|
||||
}
|
||||
this.loadGrid = true;
|
||||
|
||||
this.setGrid = true;
|
||||
}
|
||||
},
|
||||
};
|
||||
var eqpmDetlPop ={
|
||||
eqpmDetlGrid:{
|
||||
data:[],
|
||||
column:[],
|
||||
option:{}
|
||||
}
|
||||
var eqpmDetlPop = {
|
||||
eqpmDetlGrid: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {}
|
||||
}
|
||||
}
|
||||
|
||||
// 전력량 요금(원/kWh)
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
// @import '@/assets/scss/common/grid.scss';
|
||||
.tui-grid-scrollbar-left-bottom {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
115
components/common/modal/EnrgEffcEqpmDetailPop_bk.vue
Normal file
115
components/common/modal/EnrgEffcEqpmDetailPop_bk.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Detail Modal -->
|
||||
<a-modal v-model="showDetailModal" title="가이드 알람이력" width="1200px" :footer="null"
|
||||
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
|
||||
<!-- Top Input Fields -->
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 16px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">설비</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="설비명" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-input value="가이드지표" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 16px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">가이드지표</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="설비명" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-input value="가이드지표" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider />
|
||||
<!-- Table -->
|
||||
<h3 style=" margin-bottom: 16px">설비 가이드 정보</h3>
|
||||
<a-table :columns="modalTableColumns" :dataSource="modalTableData" rowKey="No" size="small" bordered
|
||||
:pagination="false" />
|
||||
|
||||
<!-- Footer Buttons -->
|
||||
<div style="text-align: right; margin-top: 16px;">
|
||||
<a-button @click="showDetailModal = false">닫기</a-button>
|
||||
<a-button type="primary" style="margin-left: 8px; color:#fff" @click="confirmModal">확인</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showDetailModal: false,
|
||||
selectedRecord: null,
|
||||
modalTableColumns: [
|
||||
{ title: 'No.', dataIndex: 'No', key: 'No', align: 'center' },
|
||||
{ title: '발생일', dataIndex: '발생일', key: '발생일' },
|
||||
{ title: '발생시간대', dataIndex: '발생시간대', key: '발생시간대' },
|
||||
{ title: '가이드지표명', dataIndex: '가이드지표명', key: '가이드지표명' },
|
||||
{ title: '주의', dataIndex: '주의', key: '주의' },
|
||||
{ title: '경고', dataIndex: '경고', key: '경고' },
|
||||
{ title: '가이드값', dataIndex: '가이드값', key: '가이드값' },
|
||||
{ title: '알랑내용', dataIndex: '알랑내용', key: '알랑내용' },
|
||||
],
|
||||
modalTableData: [
|
||||
{
|
||||
No: 1,
|
||||
발생일: '2025-06-01',
|
||||
발생시간대: '02-03',
|
||||
가이드지표명: '냉수 출구 온도 평균 편차',
|
||||
주의: 3,
|
||||
경고: 2,
|
||||
가이드값: -1.23,
|
||||
알랑내용: '[심각]냉수3과 온도차가 7.72°C로 낮음(평균 15.44*C 대비 7.72°C 낮음) - UT_HT_CH1C',
|
||||
},
|
||||
{
|
||||
No: 2,
|
||||
발생일: '2025-06-02',
|
||||
발생시간대: '02-03',
|
||||
가이드지표명: '냉수 출구 온도 평균 편차',
|
||||
주의: 2,
|
||||
경고: 1,
|
||||
가이드값: -1.45,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleNgCntClick(record) {
|
||||
this.selectedRecord = record;
|
||||
this.showDetailModal = true;
|
||||
},
|
||||
confirmModal() {
|
||||
this.showDetailModal = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.ant-modal-header {
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-modal-title,
|
||||
h3 {
|
||||
font-weight: 600
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters >
|
||||
<!-- <v-col v-if="label" cols="2"> -->
|
||||
<!-- <v-col v-if="label" :cols="labelCols">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<!-- <v-col v-if="label" cols="2"> -->
|
||||
<!-- <v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
@ -12,7 +12,7 @@
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col> -->
|
||||
<!-- <v-col :cols="label ? textCols : ''">
|
||||
<!-- <v-col :cols="label ? textCols : ''">
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
@ -26,20 +26,13 @@
|
||||
></v-text-field>
|
||||
</v-col> -->
|
||||
|
||||
<!-- <v-row justify="center"> -->
|
||||
<v-dialog
|
||||
ref="popModal"
|
||||
v-model="dialog"
|
||||
width="1400"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
scrollable
|
||||
>
|
||||
<!-- <template v-slot:activator="{ on, attrs }">
|
||||
<!-- <v-row justify="center"> -->
|
||||
<v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
|
||||
<!-- <template v-slot:activator="{ on, attrs }">
|
||||
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
|
||||
</template> -->
|
||||
<v-card style="height: 100%">
|
||||
<!-- <v-card-title
|
||||
<v-card style="height: 100%">
|
||||
<!-- <v-card-title
|
||||
class="v-card__title d-flex align-center justify-space-between"
|
||||
>
|
||||
<span class="custom-title-4">{{ '' }}</span>
|
||||
@ -47,10 +40,13 @@
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title> -->
|
||||
<!-- <v-card-actions> -->
|
||||
<div class="pa-5">
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<!-- <v-card-actions> -->
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">가이드 정보</span>
|
||||
<a-button icon="close" type="text" @click="closePop()"></a-button>
|
||||
</v-card-title>
|
||||
<!-- <v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<div class="d-flex align-center justify-space-between pb-5">
|
||||
<v-card-title class="pa-0">가이드 정보</v-card-title>
|
||||
@ -61,208 +57,92 @@
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
</v-row> -->
|
||||
<div class="px-5 pb-3">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
가이드지표
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['gdIdxId']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-col :cols="6" class="pr-2">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['gdIdxId']" class="v-input__custom" :readonly="true"
|
||||
outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['gdIdxNm']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="pl-2">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['gdIdxNm']" class="v-input__custom" :readonly="true"
|
||||
outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div class="d-flex align-center justify-space-between pa-4">
|
||||
<v-card-title class="pa-0 custom-title-4">가이드 정보</v-card-title>
|
||||
</div>
|
||||
<div class="px-5">
|
||||
<v-row>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="계산코드"
|
||||
valueNm="calcProc"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider class="mt-5 mb-2"></v-divider>
|
||||
</div>
|
||||
|
||||
<div class="px-5 pb-4">
|
||||
<v-row align="center">
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="계산코드" valueNm="calcProc"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="계산설명"
|
||||
valueNm="calcDesc"
|
||||
:iconShow="true"
|
||||
:labelCols="2"
|
||||
:textCols="9"
|
||||
:readonly="true"
|
||||
/>
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="계산설명" valueNm="calcDesc"
|
||||
:iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="물리량1"
|
||||
valueNm="pysclQtyId1"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량1" valueNm="pysclQtyId1"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="물리량2"
|
||||
valueNm="pysclQtyId2"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pl-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량2" valueNm="pysclQtyId2"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="물리량3"
|
||||
valueNm="pysclQtyId3"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량3" valueNm="pysclQtyId3"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="물리량4"
|
||||
valueNm="pysclQtyId4"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pl-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량4" valueNm="pysclQtyId4"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="카테고리1"
|
||||
valueNm="ctgr1"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="카테고리1" valueNm="ctgr1"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="카테고리2"
|
||||
valueNm="ctgr2"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pl-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="카테고리2" valueNm="ctgr2"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="주의기준값"
|
||||
valueNm="careStndVal"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="주의기준값" valueNm="careStndVal"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="경고기준값"
|
||||
valueNm="warnStndVal"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="경고기준값" valueNm="warnStndVal"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="알람메세지"
|
||||
valueNm="alrmMsg"
|
||||
:iconShow="true"
|
||||
:labelCols="2"
|
||||
:textCols="9"
|
||||
:readonly="true"
|
||||
/>
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="알람메세지" valueNm="alrmMsg"
|
||||
:iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="가이드방법"
|
||||
valueNm="gdMeth"
|
||||
:iconShow="true"
|
||||
:labelCols="2"
|
||||
:textCols="9"
|
||||
:readonly="true"
|
||||
/>
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="가이드방법" valueNm="gdMeth"
|
||||
:iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<div style="height:20px;"></div>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" dark @click="closePop()">확인</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<a-button color="primary" type="primary" @click="closePop()">확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -274,175 +154,181 @@ import InputText from '~/components/common/input/InputText';
|
||||
import dateUtility from '~/plugins/dateUtility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: '비교대상 최대(20개)',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 정보',
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 목록',
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
selectCodeList,
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: '비교대상 최대(20개)',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 정보',
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 목록',
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
selectCodeList,
|
||||
dateUtility,
|
||||
InputText
|
||||
// Tree
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
modalDataKey:'modalData2',
|
||||
myModalKey: 'gdIdxDetPop',
|
||||
gridName: 'gdIdxDetPop',
|
||||
loadGrid: false,
|
||||
setGrid:false,
|
||||
popCheck:false,
|
||||
dialog: false,
|
||||
activeRowData: {},
|
||||
checkedRowDataList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
// searchParam: state => state.pageData,
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
myBindingData(state) {
|
||||
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
}),
|
||||
InputText
|
||||
// Tree
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
modalDataKey: 'modalData2',
|
||||
myModalKey: 'gdIdxDetPop',
|
||||
gridName: 'gdIdxDetPop',
|
||||
loadGrid: false,
|
||||
setGrid: false,
|
||||
popCheck: false,
|
||||
dialog: false,
|
||||
activeRowData: {},
|
||||
checkedRowDataList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
// searchParam: state => state.pageData,
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
myBindingData(state) {
|
||||
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
}),
|
||||
InputValue: {
|
||||
get() {
|
||||
return this.myBindingData;
|
||||
}
|
||||
},
|
||||
chkDialog(){
|
||||
return this.dialog
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async chkDialog(val){
|
||||
if(!val){
|
||||
this.closePop();
|
||||
}else{
|
||||
// await this.getRowGridData();
|
||||
|
||||
get() {
|
||||
return [{
|
||||
"eqpmId": "EQ001",
|
||||
"eqpmNm": "Etcher A12",
|
||||
"gdIdxId": "GD001",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
}]
|
||||
// return this.myBindingData;
|
||||
}
|
||||
},
|
||||
async popCheck(val){
|
||||
if(val){
|
||||
await this.getData();
|
||||
this.dialog= true;
|
||||
}else{
|
||||
this.dialog=false;
|
||||
},
|
||||
chkDialog() {
|
||||
return this.dialog
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async chkDialog(val) {
|
||||
if (!val) {
|
||||
this.closePop();
|
||||
} else {
|
||||
// await this.getRowGridData();
|
||||
|
||||
}
|
||||
},
|
||||
async popCheck(val) {
|
||||
if (val) {
|
||||
// await this.getData();
|
||||
this.dialog = true;
|
||||
} else {
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
this.$store.commit('setPageData', {
|
||||
modalData2: { gdIdxDetPop },
|
||||
});
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
beforeCreate() {
|
||||
this.$store.commit('setPageData', {
|
||||
modalData2: { gdIdxDetPop },
|
||||
});
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setModalGridData: 'setModalGridData',
|
||||
setModalGridColumn: 'setModalGridColumn',
|
||||
setModalGridOption: 'setModalGridOption',
|
||||
}),
|
||||
...mapActions({
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
}),
|
||||
init() {
|
||||
|
||||
setModalGridColumn: 'setModalGridColumn',
|
||||
setModalGridOption: 'setModalGridOption',
|
||||
}),
|
||||
...mapActions({
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
}),
|
||||
init() {
|
||||
|
||||
// this.gridInit();
|
||||
},
|
||||
closePop(){
|
||||
this.popCheck= false;
|
||||
},
|
||||
search() {
|
||||
// this.getData();
|
||||
},
|
||||
async getData(){
|
||||
},
|
||||
closePop() {
|
||||
this.popCheck = false;
|
||||
},
|
||||
search() {
|
||||
// this.getData();
|
||||
},
|
||||
async getData() {
|
||||
var res = await this.postApiReturn({
|
||||
apiKey: 'selectEnrgEffcGdIdxDetPop',
|
||||
resKey: 'gdIdxDetPopData',
|
||||
sendParam: {
|
||||
gdIdxId : this.myBindingData.gdIdxId,
|
||||
eqpmId : this.myBindingData.eqpmId,
|
||||
},
|
||||
});
|
||||
apiKey: 'selectEnrgEffcGdIdxDetPop',
|
||||
resKey: 'gdIdxDetPopData',
|
||||
sendParam: {
|
||||
gdIdxId: this.myBindingData.gdIdxId,
|
||||
eqpmId: this.myBindingData.eqpmId,
|
||||
},
|
||||
});
|
||||
|
||||
this.setPageData({
|
||||
calcProc : res[0].calcProc,
|
||||
calcDesc : res[0].calcDesc,
|
||||
pysclQtyId1 : res[0].pysclQtyId1Nm,
|
||||
pysclQtyId2 : res[0].pysclQtyId2Nm,
|
||||
pysclQtyId3 : res[0].pysclQtyId3Nm,
|
||||
pysclQtyId4 : res[0].pysclQtyId4Nm,
|
||||
ctgr1 : res[0].ctgr1,
|
||||
ctgr2 : res[0].ctgr2,
|
||||
warnStndVal : res[0].warnStndVal,
|
||||
careStndVal : res[0].careStndVal,
|
||||
alrmMsg : res[0].alrmMsg,
|
||||
gdMeth : res[0].gdMeth
|
||||
calcProc: res[0].calcProc,
|
||||
calcDesc: res[0].calcDesc,
|
||||
pysclQtyId1: res[0].pysclQtyId1Nm,
|
||||
pysclQtyId2: res[0].pysclQtyId2Nm,
|
||||
pysclQtyId3: res[0].pysclQtyId3Nm,
|
||||
pysclQtyId4: res[0].pysclQtyId4Nm,
|
||||
ctgr1: res[0].ctgr1,
|
||||
ctgr2: res[0].ctgr2,
|
||||
warnStndVal: res[0].warnStndVal,
|
||||
careStndVal: res[0].careStndVal,
|
||||
alrmMsg: res[0].alrmMsg,
|
||||
gdMeth: res[0].gdMeth
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
var gdIdxDetPop ={
|
||||
gdIdxDetGrid:{
|
||||
data:[],
|
||||
column:[],
|
||||
option:{}
|
||||
var gdIdxDetPop = {
|
||||
gdIdxDetGrid: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {}
|
||||
}
|
||||
}
|
||||
|
||||
@ -451,13 +337,14 @@ var gdIdxDetPop ={
|
||||
<style lang="scss" scoped>
|
||||
// @import '@/assets/scss/common/grid.scss';
|
||||
.tui-grid-scrollbar-left-bottom {
|
||||
display: none !important;
|
||||
}
|
||||
#gdIdx_InputText::v-deep .v-input__custom{
|
||||
margin-left:-60px;
|
||||
}
|
||||
.v-input__custom{
|
||||
margin-left:-60px;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// #gdIdx_InputText::v-deep .v-input__custom {
|
||||
// margin-left: -60px;
|
||||
// }
|
||||
|
||||
// .v-input__custom {
|
||||
// margin-left: -60px;
|
||||
// }
|
||||
</style>
|
||||
220
components/common/modal/EnrgEffcGdIdxDetPop_bk.vue
Normal file
220
components/common/modal/EnrgEffcGdIdxDetPop_bk.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Detail Modal -->
|
||||
<a-modal v-model="showDetailModal" title="가이드 정보" width="800px" :footer="null"
|
||||
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
|
||||
<!-- Top Input Fields -->
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">가이드지표</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="GD00111" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-input value="냉각수 온도차 평균 편차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">계산코드</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="BEF_AVG_DEV_GT" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">계산설명</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑1</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑2</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑3</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑4</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">카테고리1</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">카테고리2</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">주의기준간</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="3" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">경고기준값</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="5" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">열람메세지</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차가 @V1C로 낮음(청균@AVG 대비 @RSLTC 낮음]-@EOPM" :style="{ borderRadius: '6px', height: '34px' }"
|
||||
disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">가이드방법</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="대비 @RSLTC 낮음]-@EOPM" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
<!-- Footer Buttons -->
|
||||
<div style="text-align: right; margin-top: 16px;">
|
||||
<a-button @click="showDetailModal = false">닫기</a-button>
|
||||
<a-button type="primary" style="margin-left: 8px; color:#fff" @click="confirmModal">확인</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showDetailModal: false,
|
||||
selectedRecord: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleGdIdxNmClick(record) {
|
||||
this.selectedRecord = record;
|
||||
this.showDetailModal = true;
|
||||
},
|
||||
confirmModal() {
|
||||
this.showDetailModal = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.ant-modal-header {
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-modal-title,
|
||||
h3 {
|
||||
font-weight: 600
|
||||
}
|
||||
</style>
|
||||
@ -9,10 +9,15 @@
|
||||
scrollable
|
||||
>
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 pb-0 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">사용량 계획</span>
|
||||
<v-icon @click="closePop()">mdi-close</v-icon>
|
||||
</v-card-title>
|
||||
|
||||
<div class="pa-5">
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<v-col :cols="4.5">
|
||||
<InputText
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:label="'설비명'"
|
||||
@ -20,18 +25,43 @@
|
||||
:readonly="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
</v-row>
|
||||
<v-row align="end" no-gutters class="mt-4 d-flex justify-center">
|
||||
<v-col :cols="5.5" class="mr-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:labelCols='12'
|
||||
:textCols='12'
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'대상월'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
</v-col>
|
||||
<v-col :cols="3" class="text-right">
|
||||
<v-btn icon tile :ripple="false" @click="closePop()">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<v-col :cols="5.5" class="mr-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox2"
|
||||
:labelCols='12'
|
||||
:textCols='12'
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'전년대비절감율'"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<a-button color="primary" dark @click="search()" icon="clock-circle" >
|
||||
<!-- <template #icon>
|
||||
<ClockCircleOutlined />
|
||||
</template> -->
|
||||
적용
|
||||
</a-button>
|
||||
<!-- <v-col :cols="2" class="text-right">
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<!-- <v-divider></v-divider> -->
|
||||
|
||||
<!-- <div id="chartParent" ref="chartParent" style="height: 100px"> -->
|
||||
<div :style="'height: calc(50vh)'">
|
||||
@ -50,37 +80,8 @@
|
||||
:ref="chartName"
|
||||
/>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div style="height: 20%; margin: auto; width: 90%; display: flex; align-items: center;">
|
||||
<v-row align="center" no-gutters class="pa-5 d-flex align-center justify-center;">
|
||||
<v-col :cols="5">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:labelCols='3'
|
||||
:textCols='6'
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'대상월'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="5">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox2"
|
||||
:labelCols='5'
|
||||
:textCols='6'
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'전년대비절감율'"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2" class="text-right">
|
||||
<v-btn color="primary" dark @click="search()">적용</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- <v-divider></v-divider> -->
|
||||
<!-- <div style="height: 20%; margin: auto; width: 90%; display: flex; align-items: center;"> -->
|
||||
<!-- <div style="height: 70%; width:10%; float: left; border: 1px solid blue; background-color: #A2A2A2">
|
||||
설정
|
||||
</div>
|
||||
@ -97,8 +98,6 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- <v-row align="center" no-gutters>
|
||||
<v-row
|
||||
:cols="12"
|
||||
@ -115,7 +114,7 @@
|
||||
<v-btn color="primary" dark @click="setChart()">적용</v-btn>
|
||||
</v-col>
|
||||
</v-row> -->
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
|
||||
@ -132,9 +131,9 @@
|
||||
</div> -->
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn color="primary" dark @click="setUpdate()">확정</v-btn>
|
||||
<v-btn color="primary" dark @click="closePop()">취소</v-btn>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-end">
|
||||
<a-button color="primary" type="default" class="mr-2" dark @click="closePop()">취소</a-button>
|
||||
<a-button color="primary" type="primary" dark @click="setUpdate()">확정</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -196,7 +195,7 @@ export default {
|
||||
selectCodeList,
|
||||
InputText,
|
||||
Chart,
|
||||
SelectBox
|
||||
SelectBox,
|
||||
// Tree
|
||||
},
|
||||
data() {
|
||||
@ -318,6 +317,9 @@ export default {
|
||||
// });
|
||||
// }
|
||||
},
|
||||
mounted(){
|
||||
this.initTest(); return;
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
@ -329,6 +331,7 @@ export default {
|
||||
...mapActions({
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
}),
|
||||
|
||||
init() {
|
||||
this.setChart();
|
||||
},
|
||||
@ -406,7 +409,79 @@ export default {
|
||||
this.nowSeriesData = [];
|
||||
this.nowModalChartData = [];
|
||||
},
|
||||
async initTestChart(){
|
||||
this.loadChart = false;
|
||||
let xAxisData = [];
|
||||
let seriesData = [];
|
||||
let data = [];
|
||||
let targetMonthList = [];
|
||||
let _this = this;
|
||||
|
||||
const dataItemLine = []; // { gubun: '2PLAN' };
|
||||
const dataItemBar = []; //{ gubun: '1PLAN' };
|
||||
|
||||
const getRanNum = (n) => Math.floor(Math.random()*n + 1);
|
||||
|
||||
for(var i=1; i<=12; i++){
|
||||
let qty = 'qty' + i.toString().padStart(2, '0');
|
||||
targetMonthList.push(qty);
|
||||
xAxisData.push(i);
|
||||
dataItemLine.push(getRanNum(100));
|
||||
dataItemBar.push(getRanNum(100));
|
||||
}
|
||||
data = [
|
||||
{gubun: '1PLAN'}, {gubun: '2PLAN'},
|
||||
];
|
||||
|
||||
seriesData = data.map(item => ({
|
||||
name: item.gubun == '2PLAN' ? '계획' : '전년실적',
|
||||
type: item.gubun == '2PLAN' ? 'line' : 'bar',
|
||||
data: item.gubun == '2PLAN' ? dataItemLine : dataItemBar
|
||||
}));
|
||||
this.nowSeriesData = seriesData;
|
||||
let option = {
|
||||
grid: {
|
||||
top: "3%",
|
||||
},
|
||||
xAxis:{
|
||||
type: 'category',
|
||||
data: xAxisData
|
||||
},
|
||||
yAxis:{
|
||||
type:'value',
|
||||
nameLocation : 'middle',
|
||||
nameGap :45
|
||||
},
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
},
|
||||
series: seriesData,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
await this.$nextTick(() => { });
|
||||
|
||||
this.setModalChartOption({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
chartKey: this.chartName,
|
||||
modalId: this.modalId,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: option,
|
||||
});
|
||||
this.loadChart = true;
|
||||
// this.$nextTick(() => {
|
||||
// })
|
||||
},
|
||||
async setChart(){
|
||||
// test
|
||||
this.initTestChart(); return;
|
||||
// end test
|
||||
|
||||
this.loadChart = false;
|
||||
let xAxisData = [];
|
||||
let seriesData = [];
|
||||
|
||||
@ -1,115 +1,84 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="item.required || false"
|
||||
:disabled="item.disabled || false"
|
||||
></v-text-field>
|
||||
<v-col :cols="option.textCols" class="py-0">
|
||||
<v-text-field readonly v-model="selectValue" append-icon="" class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="item.required || false"
|
||||
:disabled="item.disabled || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="540px">
|
||||
<v-dialog v-model="dialog" scrollable width="800px">
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ option.modalTitle }}</span>
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
|
||||
</v-card-title>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:labelCols="2"
|
||||
:textCols="6"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'설비그룹'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
:readonly="
|
||||
item.openMode == undefined
|
||||
? openMode
|
||||
: item.openMode == 'ALL'
|
||||
<div class="pa-6 pt-0">
|
||||
<v-row align="center">
|
||||
<v-col :cols="5">
|
||||
<component :is="'SelectBox'" ref="SelectBox1" :labelCols="12" :textCols="12" :iconShow="true"
|
||||
:propsValue="selectValue01" :itemList="selectValueList01" :label="'설비그룹'"
|
||||
@update:propsValue="selectValue01 = $event" :readonly="item.openMode == undefined
|
||||
? openMode
|
||||
: item.openMode == 'ALL'
|
||||
? false
|
||||
: true
|
||||
"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
설비명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
" />
|
||||
</v-col>
|
||||
<v-col :cols="7">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon small :class="['mr-1 icon-blue']">$icoBulletPoint</v-icon>
|
||||
물리량명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="9"> <v-text-field append-icon="" class="v-input__custom"
|
||||
outlined :hide-details="true" v-model="searchWord"
|
||||
@keyup.enter="search"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
|
||||
</template></v-text-field></v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="3" class="text-right">
|
||||
<a-button icon="search" type="primary" @click="search()"
|
||||
class="search-button">조회</a-button>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<!-- <div :style="'height: calc(50vh)'"> -->
|
||||
<div :style="'height: 429px;'">
|
||||
<div :style="'height: 429px;'">
|
||||
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
|
||||
<div ref="modalGridParent" class="h100 py-3">
|
||||
<component
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
<div ref="modalGridParent" class="h100 px-6 py-4">
|
||||
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="gridName"
|
||||
:dataPath="searchParam.modalDataEqpmBaseInfoPop.eqpmBaseInfoPop"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)"
|
||||
/>
|
||||
:parentPrgmId="parentPrgmId" @getRowsData="getRowData" @dblClick="setUpdate($event)" />
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
|
||||
<a-button :ripple="false" @click="setUpdate($event)" class="mr-2">확인</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="dialogOpenCloseEvent(dialog)"
|
||||
class="mr-2">닫기</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -166,6 +135,11 @@ export default {
|
||||
require: false,
|
||||
default: true, // 'ALL'도 있음
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
// bindingFlag:{
|
||||
// type:Boolean,
|
||||
// require: false,
|
||||
@ -181,7 +155,7 @@ export default {
|
||||
return {
|
||||
dialog: false,
|
||||
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'gridEqpmBaseInfoPop',
|
||||
myModalKey: 'eqpmBaseInfoPop',
|
||||
modalDataKey: 'modalDataEqpmBaseInfoPop',
|
||||
@ -283,7 +257,7 @@ export default {
|
||||
async created() {
|
||||
await this.init();
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
@ -300,29 +274,36 @@ export default {
|
||||
this.gridInit();
|
||||
},
|
||||
async setSelectValueList01() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmGrpCodeList',
|
||||
resKey: 'eqpmGrpCodeLists',
|
||||
sendParam: { eqpmKindId: this.searchParam.eqpmKindId },
|
||||
// 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
|
||||
});
|
||||
if (res.length > 0) {
|
||||
this.selectValueList01 = await res.map(obj => {
|
||||
return {
|
||||
text: obj.eqpmGrpNm,
|
||||
value: obj.eqpmGrpId,
|
||||
};
|
||||
});
|
||||
// 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
|
||||
this.selectValue01 =
|
||||
this.searchParam.eqpmGrpId != undefined
|
||||
? this.searchParam.eqpmGrpId
|
||||
: this.selectValueList01[0].value;
|
||||
// this.selectValue01 = this.selectValueList01[0].value;
|
||||
} else {
|
||||
this.selectValueList01 = [];
|
||||
this.selectValue01 = null;
|
||||
}
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: 'selectEqpmGrpCodeList',
|
||||
// resKey: 'eqpmGrpCodeLists',
|
||||
// sendParam: { eqpmKindId: this.searchParam.eqpmKindId },
|
||||
// // 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
|
||||
// });
|
||||
// if (res.length > 0) {
|
||||
// this.selectValueList01 = await res.map(obj => {
|
||||
// return {
|
||||
// text: obj.eqpmGrpNm,
|
||||
// value: obj.eqpmGrpId,
|
||||
// };
|
||||
// });
|
||||
// // 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
|
||||
// this.selectValue01 =
|
||||
// this.searchParam.eqpmGrpId != undefined
|
||||
// ? this.searchParam.eqpmGrpId
|
||||
// : this.selectValueList01[0].value;
|
||||
// // this.selectValue01 = this.selectValueList01[0].value;
|
||||
// } else {
|
||||
// this.selectValueList01 = [];
|
||||
// this.selectValue01 = null;
|
||||
// }
|
||||
|
||||
this.selectValueList01 = [
|
||||
{ label: '냉동기고온', value: '냉동기고온' },
|
||||
{ label: '냉동기저온', value: '냉동기저온' },
|
||||
{ label: '공조기', value: '공조기' },
|
||||
{ label: '보일러', value: '보일러' }
|
||||
];
|
||||
},
|
||||
search() {
|
||||
this.getGridData();
|
||||
@ -360,26 +341,34 @@ export default {
|
||||
},
|
||||
async getGridData() {
|
||||
this.loadGrid = false;
|
||||
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmBaseInfoPop',
|
||||
resKey: 'epqmBaseInfoData',
|
||||
sendParam: {
|
||||
eqpmGrpId: this.selectValue01,
|
||||
searchWord: this.searchWord,
|
||||
// openMode : this.item.openMode == undefined ? this.openMode : this.item.openMode
|
||||
},
|
||||
});
|
||||
// grid와 popup eqpmId 값 중복되는 것 제거하는 로직 - 시작
|
||||
let newRes = [];
|
||||
if (this.bindingGridEqpmIdList.length > 0) {
|
||||
newRes = res.filter(item => {
|
||||
return !this.bindingGridEqpmIdList.includes(item.eqpmId);
|
||||
});
|
||||
res = newRes;
|
||||
}
|
||||
// let res = [];
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: 'selectEqpmBaseInfoPop',
|
||||
// resKey: 'epqmBaseInfoData',
|
||||
// sendParam: {
|
||||
// eqpmGrpId: this.selectValue01,
|
||||
// searchWord: this.searchWord,
|
||||
// // openMode : this.item.openMode == undefined ? this.openMode : this.item.openMode
|
||||
// },
|
||||
// });
|
||||
// // grid와 popup eqpmId 값 중복되는 것 제거하는 로직 - 시작
|
||||
// let newRes = [];
|
||||
// if (this.bindingGridEqpmIdList.length > 0) {
|
||||
// newRes = res.filter(item => {
|
||||
// return !this.bindingGridEqpmIdList.includes(item.eqpmId);
|
||||
// });
|
||||
// res = newRes;
|
||||
// }
|
||||
// grid와 popup eqpmId 값 중복되는 것 제거하는 로직 - 끝
|
||||
|
||||
const res = [
|
||||
{
|
||||
'eqpmId': 'PYSCL00001',
|
||||
'eqpmNm': 'AMP_1A',
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridName,
|
||||
@ -452,9 +441,9 @@ export default {
|
||||
// this.dialog = false;
|
||||
// return;
|
||||
// }
|
||||
if (this.myBindingData.length <= 0) {
|
||||
return alert('설비상세 리스트를 먼저 선택해주세요.');
|
||||
}
|
||||
// if (this.myBindingData.length <= 0) {
|
||||
// return alert('설비상세 리스트를 먼저 선택해주세요.');
|
||||
// }
|
||||
this.dialog = !val;
|
||||
},
|
||||
},
|
||||
@ -482,33 +471,29 @@ var eqpmBaseInfoPop = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .v-application.#{$theme}-mode {
|
||||
// .v-dialog {
|
||||
// .v-card {
|
||||
// &__title {
|
||||
|
||||
|
||||
// @if $theme ==dark {
|
||||
// background-color: #2d3355;
|
||||
|
||||
// .v-btn {
|
||||
// background-color: #2d3355;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,96 +1,76 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<v-text-field
|
||||
:readonly="item.readonly || false"
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="item.required || false"
|
||||
:disabled="item.disabled || false"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-text-field :readonly="item.readonly || false" v-model="selectValue" append-icon=""
|
||||
class="v-input__custom" @click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true"
|
||||
:required="item.required || false" :disabled="item.disabled || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="540px">
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-dialog v-model="dialog" scrollable width="800px">
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ option.modalTitle }}</span>
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
|
||||
|
||||
</v-card-title>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<div class="pa-6 pt-0">
|
||||
<v-row align="center">
|
||||
<v-col :cols="12" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
계산설명
|
||||
<v-icon small :class="['mr-1 icon-blue']">$icoBulletPoint</v-icon>
|
||||
계산설명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
<v-col :cols="10" class="mr-4 py-0" >
|
||||
<v-text-field append-icon="" class="v-input__custom" outlined
|
||||
:hide-details="true" v-model="searchWord" @keyup.enter="search"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<v-col cols="1" class="py-0">
|
||||
<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<!-- <v-divider></v-divider> -->
|
||||
<div :style="'height: calc(50vh)'">
|
||||
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
|
||||
<div ref="modalGridParent" class="h100 py-3">
|
||||
<component
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="grid_01"
|
||||
:dataPath="searchParam.modalData2.eqpmCalcPop"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)"
|
||||
/>
|
||||
<div ref="modalGridParent" class="h100 px-6 py-4">
|
||||
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
|
||||
:dataPath="searchParam.modalData2.eqpmCalcPop" :parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData" @dblClick="setUpdate($event)" />
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-end">
|
||||
<!-- <v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)">닫기</v-btn> -->
|
||||
<a-button :ripple="false" @click="setUpdate($event)" class="mr-2">확인</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="dialogOpenCloseEvent(dialog)">닫기</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@ -138,10 +118,20 @@ export default {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
openMode:{
|
||||
type:String,
|
||||
openMode: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
iconShow:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
}
|
||||
default:true
|
||||
},
|
||||
// bindingFlag:{
|
||||
// type:Boolean,
|
||||
// require: false,
|
||||
@ -156,7 +146,23 @@ export default {
|
||||
return {
|
||||
dialog: false,
|
||||
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
dataPathPopExample: {
|
||||
"rowGrid": {
|
||||
data: [
|
||||
{
|
||||
'calcProc': 'AVG_CNT2',
|
||||
'argCnt': '2',
|
||||
'calcDesc': '두개 변수에 대한 평균'
|
||||
|
||||
}
|
||||
],
|
||||
column: [
|
||||
{ header: '계산코드', name: 'calcProc', width: 150 },
|
||||
{ header: '아규먼트갯수', name: 'argCnt', align: 'center', width: 100 },
|
||||
]
|
||||
}
|
||||
},
|
||||
grid_01: 'grid_01',
|
||||
myModalKey: 'eqpmCalcPop',
|
||||
modalDataKey: 'modalData2',
|
||||
@ -247,7 +253,7 @@ export default {
|
||||
async created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
@ -282,7 +288,7 @@ export default {
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: Object.assign(
|
||||
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
|
||||
Utility.defaultGridOption(400, myOptions),
|
||||
// Utility.defaultGridOption(400, myOptions),
|
||||
myOptions,
|
||||
),
|
||||
});
|
||||
@ -292,39 +298,46 @@ export default {
|
||||
gridKey: this.grid_01,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: [
|
||||
{ header: '계산코드', name: 'calcProc', width: 150},
|
||||
{ header: '아규먼트갯수', name: 'argCnt', align:'center', width: 100},
|
||||
// { header: '계산설명', name : 'calcDesc', width: 286},
|
||||
{ header: '계산설명', name : 'calcDesc', align:'left'},
|
||||
{ header: '계산코드', name: 'calcProc', width: 150 },
|
||||
{ header: '아규먼트갯수', name: 'argCnt', align: 'center', width: 100 },
|
||||
{ header: '계산설명', name: 'calcDesc', align: 'left' },
|
||||
],
|
||||
});
|
||||
},
|
||||
async getGridData() {
|
||||
this.loadGrid = false;
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmCalcPop',
|
||||
resKey: 'eqpmCalcPopData',
|
||||
sendParam: {
|
||||
calcDescLike: this.searchWord,
|
||||
openMode:this.item.openMode != undefined ? this.item.openMode : this.openMode
|
||||
},
|
||||
});
|
||||
if(this.myBindingData['calcProc']!= '' || this.myBindingData['calcProc']!= null || this.myBindingData['calcProc']!=undefined){
|
||||
let newRes = [];
|
||||
newRes = res.filter(item => {
|
||||
return item.calcProc != this.myBindingData['calcProc']
|
||||
});
|
||||
res = newRes;
|
||||
}
|
||||
|
||||
// const res = [
|
||||
// {
|
||||
// 'calcProc' : 'AVG_CNT2',
|
||||
// 'argCnt' : '2',
|
||||
// 'calcDesc' : '두개 변수에 대한 평균'
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: 'selectEqpmCalcPop',
|
||||
// resKey: 'eqpmCalcPopData',
|
||||
// sendParam: {
|
||||
// calcDescLike: this.searchWord,
|
||||
// openMode: this.item.openMode != undefined ? this.item.openMode : this.openMode
|
||||
// },
|
||||
// });
|
||||
// if (this.myBindingData['calcProc'] != '' || this.myBindingData['calcProc'] != null || this.myBindingData['calcProc'] != undefined) {
|
||||
// let newRes = [];
|
||||
// newRes = res.filter(item => {
|
||||
// return item.calcProc != this.myBindingData['calcProc']
|
||||
// });
|
||||
// res = newRes;
|
||||
// }
|
||||
|
||||
// }
|
||||
// ]
|
||||
const res = [
|
||||
{
|
||||
'calcProc': 'AVG_CNT2',
|
||||
'argCnt': '2',
|
||||
'calcDesc': '두개 변수에 대한 평균'
|
||||
|
||||
},
|
||||
|
||||
{ 'calcProc': 'PROC001', argCnt: 2, 'calcDesc': '덧셈 연산' },
|
||||
{ 'calcProc': 'PROC002', argCnt: 1, 'calcDesc': '제곱 연산' },
|
||||
{ 'calcProc': 'PROC003', argCnt: 2, 'calcDesc': '곱셈 연산' },
|
||||
{ 'calcProc': 'PROC004', argCnt: 1, 'calcDesc': '루트 연산' },
|
||||
{ 'calcProc': 'PROC005', argCnt: 3, 'calcDesc': '최대값 계산' },
|
||||
{ 'calcProc': 'PROC006', argCnt: 3, 'calcDesc': '최소값 계산' },
|
||||
|
||||
]
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.grid_01,
|
||||
@ -352,14 +365,14 @@ export default {
|
||||
value: this.selectedData.calcProc,
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
this.setPageData({ [this.item.valueNm] : this.selectedData.calcProc});
|
||||
this.setPageData({ [this.item.valueNm]: this.selectedData.calcProc });
|
||||
if (this.item.valueNm2 !== undefined) {
|
||||
const dt = {
|
||||
columnName: this.item.valueNm2,
|
||||
value: this.selectedData[this.item.valueNm2],
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
this.setPageData({[this.item.valueNm2] : this.selectedData.argCnt});
|
||||
this.setPageData({ [this.item.valueNm2]: this.selectedData.argCnt });
|
||||
}
|
||||
if (this.item.bindNm !== undefined) {
|
||||
const dt = {
|
||||
@ -367,7 +380,7 @@ export default {
|
||||
value: this.selectedData.argCnt,
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
this.setPageData({ [this.item.bindNm] : this.selectedData.argCnt});
|
||||
this.setPageData({ [this.item.bindNm]: this.selectedData.argCnt });
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -403,33 +416,10 @@ var eqpmCalcPop = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,123 +1,97 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters >
|
||||
<v-col :cols="labelCols">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow"
|
||||
x-small
|
||||
:color="required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="iconShow" small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="textCols">
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="required || false"
|
||||
:disabled="disabled || false"
|
||||
></v-text-field>
|
||||
<v-text-field readonly append-icon="" :class="['v-input__custom', customClass]"
|
||||
@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="required || false"
|
||||
:disabled="disabled || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-dialog
|
||||
ref="popModal"
|
||||
v-model="dialog"
|
||||
width="1400"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
scrollable
|
||||
>
|
||||
<v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
|
||||
<v-card style="height: 100%">
|
||||
<v-divider></v-divider>
|
||||
<div class="d-flex align-center justify-space-between pa-4">
|
||||
<v-card-title class="pa-0 custom-title-4">◇ 설비 선택</v-card-title>
|
||||
</div>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비그룹 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'설비그룹'"
|
||||
:disabled="eqpmGrpDisabled"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" style="padding:0px 10px;">
|
||||
<!-- FAB -->
|
||||
<component
|
||||
:is="'SelectBoxMulti'"
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'FAB'"
|
||||
:labelCols="2"
|
||||
:multiple="true"
|
||||
:disabled="fabDisabled"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="3" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters style="margin-top: 14px;">
|
||||
<v-col :cols="1">
|
||||
<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">설비 선택</span>
|
||||
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
|
||||
</v-card-title>
|
||||
<div class="pa-2 pt-0">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="end">
|
||||
<v-col :cols="3.5">
|
||||
<!-- 설비그룹 -->
|
||||
<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
|
||||
:label="'설비그룹'" :disabled="eqpmGrpDisabled"
|
||||
@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
|
||||
:iconShow="true" />
|
||||
</v-col>
|
||||
<v-col :cols="3.5">
|
||||
<!-- FAB -->
|
||||
<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
|
||||
:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
|
||||
:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
|
||||
:iconShow="true" />
|
||||
</v-col>
|
||||
<v-col :cols="3.5">
|
||||
<v-row>
|
||||
<v-col :cols="12" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
설비명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="pt-0">
|
||||
<v-text-field append-icon="" class="v-input__custom" outlined
|
||||
:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
|
||||
v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-col>
|
||||
<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<!-- <v-row align="center" no-gutters style="margin-top: 14px;">
|
||||
<v-col :cols="1">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
설비명
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
설비명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
<v-text-field append-icon="mdi-magnify" class="v-input__custom" outlined
|
||||
:hide-details="true" v-model="searchWord" @keyup.enter="search"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row> -->
|
||||
</div>
|
||||
<div class="px-5" style="height:429px;">
|
||||
<div ref="modalGridParent" class="w100 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid? 'Grid' : null"
|
||||
:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<div class="px-5" style="height:429px;">
|
||||
<div ref="modalGridParent" class="w100 h100">
|
||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
|
||||
:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
|
||||
<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@ -171,66 +145,71 @@ export default {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
required:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
fabDisabled:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
fabDisabled: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
eqpmGrpDisabled:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
eqpmGrpDisabled: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:true
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
isMulti:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
}
|
||||
isMulti: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
selectCodeList,
|
||||
dateUtility,
|
||||
dateUtility,
|
||||
InputText,
|
||||
SelectBox,
|
||||
SelectBoxMulti
|
||||
SelectBox,
|
||||
SelectBoxMulti
|
||||
// Tree
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
modalDataKey:'eqpmSelectPopData',
|
||||
modalDataKey: 'eqpmSelectPopData',
|
||||
myModalKey: 'eqpmSelectPop',
|
||||
gridName: 'eqpmSelectGrid',
|
||||
loadGrid: false,
|
||||
setGrid:false,
|
||||
popCheck:false,
|
||||
loadGrid: true,
|
||||
setGrid: false,
|
||||
popCheck: false,
|
||||
dialog: false,
|
||||
activeRowData: {},
|
||||
checkedRowDataList: [],
|
||||
selectValue01:null,
|
||||
selectValue02:[],
|
||||
selectValueList01:[],
|
||||
selectValueList02:[],
|
||||
searchWord:'',
|
||||
activeRowData:{},
|
||||
textFieldData:'',
|
||||
selectRow:{}
|
||||
selectValue01: null,
|
||||
selectValue02: [],
|
||||
selectValueList01: [],
|
||||
selectValueList02: [],
|
||||
searchWord: '',
|
||||
activeRowData: {},
|
||||
textFieldData: '',
|
||||
selectRow: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -240,28 +219,28 @@ export default {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
myBindingData(state) {
|
||||
var data = state.pageData[this.parentPrgmId];
|
||||
if(data.fabId == ''){
|
||||
data.fabId = null
|
||||
}else if(typeof(data.fabId)=='string'){
|
||||
data.fabId = [data.fabId]
|
||||
}
|
||||
return {
|
||||
fabId : data.fabId,
|
||||
eqpmGrpId : data.eqpmGrpId,
|
||||
eqpmId:data.eqpmId,
|
||||
eqpmNm:data.eqpmNm,
|
||||
eqpmIdList:data.eqpmIdList,
|
||||
eqpmKindId:data.eqpmKindId,
|
||||
}
|
||||
var data = state.pageData[this.parentPrgmId];
|
||||
if (data.fabId == '') {
|
||||
data.fabId = null
|
||||
} else if (typeof (data.fabId) == 'string') {
|
||||
data.fabId = [data.fabId]
|
||||
}
|
||||
return {
|
||||
fabId: data.fabId,
|
||||
eqpmGrpId: data.eqpmGrpId,
|
||||
eqpmId: data.eqpmId,
|
||||
eqpmNm: data.eqpmNm,
|
||||
eqpmIdList: data.eqpmIdList,
|
||||
eqpmKindId: data.eqpmKindId,
|
||||
}
|
||||
},
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
// return this.searchParam[this.item.valueNm];
|
||||
return this.myBindingData
|
||||
? this.myBindingData[this.valueNm]
|
||||
: this.textFieldData;
|
||||
return this.myBindingData
|
||||
? this.myBindingData[this.valueNm]
|
||||
: this.textFieldData;
|
||||
},
|
||||
set(value) {
|
||||
// if(this.item && this.item.disableContent){
|
||||
@ -270,44 +249,44 @@ export default {
|
||||
return value;
|
||||
},
|
||||
},
|
||||
chkDialog(){
|
||||
if(this.isMulti){
|
||||
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{type : 'checkbox'}];
|
||||
}else{
|
||||
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [];
|
||||
}
|
||||
chkDialog() {
|
||||
if (this.isMulti) {
|
||||
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{ type: 'checkbox' }];
|
||||
} else {
|
||||
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [];
|
||||
}
|
||||
return this.dialog
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
async chkDialog(val){
|
||||
// console.log("val : ", val);
|
||||
if(val){
|
||||
this.selectValue01 = this.myBindingData.eqpmGrpId;
|
||||
this.selectValue02 = this.myBindingData.fabId;
|
||||
await this.search();
|
||||
// if(this.isMulti){
|
||||
// }else{
|
||||
// // 단일 focus용
|
||||
// if(this.$refs[this.gridName]){
|
||||
// this.selectRow = this.$refs[this.gridName].getData().filter(item=>{
|
||||
// return item.eqpmId == this.myBindingData.eqpmId
|
||||
// });
|
||||
// this.$refs[this.gridName].focus({
|
||||
// rowKey : this.selectRow[0].rowKey,
|
||||
// setScroll: true
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
}else{
|
||||
this.dialog = false;
|
||||
}
|
||||
// this.selectValue01 = this.myBindingData.eqpmGrpId;
|
||||
// this.selectValue02 = this.myBindingData.fabId;
|
||||
// await this.search();
|
||||
// this.getChecked();
|
||||
// }
|
||||
async chkDialog(val) {
|
||||
// console.log("val : ", val);
|
||||
if (val) {
|
||||
this.selectValue01 = this.myBindingData.eqpmGrpId;
|
||||
this.selectValue02 = this.myBindingData.fabId;
|
||||
await this.search();
|
||||
// if(this.isMulti){
|
||||
// }else{
|
||||
// // 단일 focus용
|
||||
// if(this.$refs[this.gridName]){
|
||||
// this.selectRow = this.$refs[this.gridName].getData().filter(item=>{
|
||||
// return item.eqpmId == this.myBindingData.eqpmId
|
||||
// });
|
||||
// this.$refs[this.gridName].focus({
|
||||
// rowKey : this.selectRow[0].rowKey,
|
||||
// setScroll: true
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
} else {
|
||||
this.dialog = false;
|
||||
}
|
||||
// this.selectValue01 = this.myBindingData.eqpmGrpId;
|
||||
// this.selectValue02 = this.myBindingData.fabId;
|
||||
// await this.search();
|
||||
// this.getChecked();
|
||||
// }
|
||||
},
|
||||
},
|
||||
|
||||
@ -317,14 +296,14 @@ export default {
|
||||
});
|
||||
},
|
||||
async created() {
|
||||
await this.getFab();
|
||||
await this.getEqpmGrp();
|
||||
await this.getFab();
|
||||
await this.getEqpmGrp();
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setModalGridData: 'setModalGridData',
|
||||
setModalGridData: 'setModalGridData',
|
||||
setModalGridColumn: 'setModalGridColumn',
|
||||
setModalGridOption: 'setModalGridOption',
|
||||
}),
|
||||
@ -332,90 +311,93 @@ export default {
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
}),
|
||||
init() {
|
||||
this.activeRowData = {};
|
||||
this.gridInit();
|
||||
this.activeRowData = {};
|
||||
this.gridInit();
|
||||
},
|
||||
dialogOpenCloseEvent(val){
|
||||
dialogOpenCloseEvent(val) {
|
||||
|
||||
// this.checkPop = !val;
|
||||
this.dialog=!val;
|
||||
// this.checkPop = !val;
|
||||
this.dialog = !val;
|
||||
},
|
||||
search() {
|
||||
this.getRowGridData();
|
||||
},
|
||||
async getFab() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectFabCodeList',
|
||||
resKey: 'fabCodeLists',
|
||||
sendParam: {},
|
||||
});
|
||||
if (res.length > 0) {
|
||||
this.selectValueList02 = await res.map(item => {
|
||||
return {
|
||||
text: item.eccNm,
|
||||
value: item.eccId,
|
||||
};
|
||||
});
|
||||
this.selectValueList02.unshift({
|
||||
text:"전체",
|
||||
value:null
|
||||
});
|
||||
// if(this.pageData.eccId != null && this.pageData.eccId != ''){
|
||||
// this.selectValue02 = this.pageData.eccId;
|
||||
// }else if(this.pageData.eccId == null || this.pageData.eccId == ''){
|
||||
this.selectValue02.push(this.selectValueList02[0].value);
|
||||
// }
|
||||
} else {
|
||||
this.selectValueList02 = [];
|
||||
this.selectValue02 = [];
|
||||
}
|
||||
async getFab() {
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: 'selectFabCodeList',
|
||||
// resKey: 'fabCodeLists',
|
||||
// sendParam: {},
|
||||
// });
|
||||
// if (res.length > 0) {
|
||||
// this.selectValueList02 = await res.map(item => {
|
||||
// return {
|
||||
// text: item.eccNm,
|
||||
// value: item.eccId,
|
||||
// };
|
||||
// });
|
||||
// this.selectValueList02.unshift({
|
||||
// text:"전체",
|
||||
// value:null
|
||||
// });
|
||||
// // if(this.pageData.eccId != null && this.pageData.eccId != ''){
|
||||
// // this.selectValue02 = this.pageData.eccId;
|
||||
// // }else if(this.pageData.eccId == null || this.pageData.eccId == ''){
|
||||
// this.selectValue02.push(this.selectValueList02[0].value);
|
||||
// // }
|
||||
// } else {
|
||||
// this.selectValueList02 = [];
|
||||
// this.selectValue02 = [];
|
||||
// }
|
||||
},
|
||||
async getEqpmGrp() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmGrpCodeList',
|
||||
resKey: 'eqpmGrpCodeLists',
|
||||
sendParam: { },
|
||||
});
|
||||
if (res.length > 0) {
|
||||
this.selectValueList01 = await res.map(item => {
|
||||
return {
|
||||
text: item.eqpmGrpNm,
|
||||
value: item.eqpmGrpId,
|
||||
};
|
||||
});
|
||||
this.selectValueList01.unshift({
|
||||
text:"전체",
|
||||
value:null
|
||||
});
|
||||
// if(this.pageData.eqpmGrpId != null && this.pageData.eqpmGrpId != ''){
|
||||
// this.selectValue02 = this.pageData.eqpmGrpId;
|
||||
// }else if(this.pageData.eqpmGrpId == null || this.pageData.eqpmGrpId == ''){
|
||||
this.selectValue01 = this.selectValueList01[0].value;
|
||||
// }
|
||||
} else {
|
||||
this.selectValueList01 = [];
|
||||
this.selectValue01 = null;
|
||||
}
|
||||
async getEqpmGrp() {
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: 'selectEqpmGrpCodeList',
|
||||
// resKey: 'eqpmGrpCodeLists',
|
||||
// sendParam: { },
|
||||
// });
|
||||
// if (res.length > 0) {
|
||||
// this.selectValueList01 = await res.map(item => {
|
||||
// return {
|
||||
// text: item.eqpmGrpNm,
|
||||
// value: item.eqpmGrpId,
|
||||
// };
|
||||
// });
|
||||
// this.selectValueList01.unshift({
|
||||
// text:"전체",
|
||||
// value:null
|
||||
// });
|
||||
// // if(this.pageData.eqpmGrpId != null && this.pageData.eqpmGrpId != ''){
|
||||
// // this.selectValue02 = this.pageData.eqpmGrpId;
|
||||
// // }else if(this.pageData.eqpmGrpId == null || this.pageData.eqpmGrpId == ''){
|
||||
// this.selectValue01 = this.selectValueList01[0].value;
|
||||
// // }
|
||||
// } else {
|
||||
// this.selectValueList01 = [];
|
||||
// this.selectValue01 = null;
|
||||
// }
|
||||
},
|
||||
gridInit(){
|
||||
// console.log("modalGridParent : ",this.$refs)
|
||||
// const gridWidth = this.$refs.modalGridParent.offsetWidth/4;
|
||||
gridInit() {
|
||||
// console.log("modalGridParent : ",this.$refs)
|
||||
// const gridWidth = this.$refs.modalGridParent.offsetWidth/4;
|
||||
|
||||
let myOptions = {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
// rowHeaders:[{ type: 'checkbox' }],
|
||||
// rowHeight:'auto'
|
||||
};
|
||||
if(this.isMulti){
|
||||
myOptions['rowHeaders'] = [{type : 'checkbox'}];
|
||||
myOptions['rowHeight'] = 'auto';
|
||||
}
|
||||
let myOptions = {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
header: {
|
||||
height: 'auto',
|
||||
},
|
||||
// rowHeaders:[{ type: 'checkbox' }],
|
||||
rowHeight: 'auto',
|
||||
};
|
||||
if (this.isMulti) {
|
||||
// myOptions['rowHeaders'] = [{ type: 'checkbox' }];
|
||||
// myOptions['rowHeight'] = 'auto';
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.setModalGridOption({
|
||||
this.setModalGridOption({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridName,
|
||||
modalDataKey: this.modalDataKey,
|
||||
@ -426,46 +408,46 @@ export default {
|
||||
),
|
||||
});
|
||||
|
||||
const myColumns= [
|
||||
{
|
||||
header : 'FAB',
|
||||
name : 'fabId',
|
||||
align:'center',
|
||||
hidden:true
|
||||
},
|
||||
{
|
||||
header : 'FAB',
|
||||
name : 'fabNm',
|
||||
align:'center'
|
||||
},
|
||||
{
|
||||
header : '설비ID',
|
||||
name : 'eqpmId',
|
||||
align:'center',
|
||||
// hidden:true
|
||||
},
|
||||
{
|
||||
header : '설비명',
|
||||
name : 'eqpmNm',
|
||||
align:'center'
|
||||
},
|
||||
{
|
||||
header : 'eccId',
|
||||
name : 'eccId',
|
||||
align:'center',
|
||||
hidden:true
|
||||
},
|
||||
{
|
||||
header : 'eccNm',
|
||||
name : 'eccNm',
|
||||
align:'center',
|
||||
hidden:true
|
||||
},
|
||||
const myColumns = [
|
||||
{
|
||||
header: 'FAB',
|
||||
name: 'fabId',
|
||||
align: 'center',
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
header: 'FAB',
|
||||
name: 'fabNm',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
header: '설비ID',
|
||||
name: 'eqpmId',
|
||||
align: 'center',
|
||||
// hidden:true
|
||||
},
|
||||
{
|
||||
header: '설비명',
|
||||
name: 'eqpmNm',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
header: 'eccId',
|
||||
name: 'eccId',
|
||||
align: 'center',
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
header: 'eccNm',
|
||||
name: 'eccNm',
|
||||
align: 'center',
|
||||
hidden: true
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
]
|
||||
|
||||
this.setModalGridColumn({
|
||||
this.setModalGridColumn({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridName,
|
||||
modalDataKey: this.modalDataKey,
|
||||
@ -473,91 +455,117 @@ export default {
|
||||
});
|
||||
|
||||
|
||||
// this.getRowGridData();
|
||||
},
|
||||
async getRowGridData(){
|
||||
this.loadGrid =false;
|
||||
var res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmPop',
|
||||
resKey: 'eqpmPopData',
|
||||
sendParam: {
|
||||
fabId:this.selectValue02,
|
||||
eqpmGrpId:this.selectValue01,
|
||||
searchWord:this.searchWord,
|
||||
eqpmKindId:this.myBindingData.eqpmKindId,
|
||||
},
|
||||
});
|
||||
// const dayjs = require('dayjs');
|
||||
// var newRes = res.map(item=>
|
||||
// item = {
|
||||
// ...item,
|
||||
// totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
|
||||
// totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH')
|
||||
// }
|
||||
// );
|
||||
|
||||
this.setModalGridData({
|
||||
// this.getRowGridData();
|
||||
},
|
||||
async getRowGridData() {
|
||||
this.loadGrid = false;
|
||||
// var res = await this.postApiReturn({
|
||||
// apiKey: 'selectEqpmPop',
|
||||
// resKey: 'eqpmPopData',
|
||||
// sendParam: {
|
||||
// fabId:this.selectValue02,
|
||||
// eqpmGrpId:this.selectValue01,
|
||||
// searchWord:this.searchWord,
|
||||
// eqpmKindId:this.myBindingData.eqpmKindId,
|
||||
// },
|
||||
// });
|
||||
// const dayjs = require('dayjs');
|
||||
// var newRes = res.map(item=>
|
||||
// item = {
|
||||
// ...item,
|
||||
// totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
|
||||
// totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH')
|
||||
// }
|
||||
// );
|
||||
const res =
|
||||
[
|
||||
{
|
||||
"fabId": "FAB001",
|
||||
"fabNm": "Gumi FAB",
|
||||
"eqpmId": "EQ001",
|
||||
"eqpmNm": "Etcher A12",
|
||||
"eccId": "ECC001",
|
||||
"eccNm": "Etch Control Center"
|
||||
},
|
||||
{
|
||||
"fabId": "FAB002",
|
||||
"fabNm": "Pyeongtaek FAB",
|
||||
"eqpmId": "EQ002",
|
||||
"eqpmNm": "Deposition B34",
|
||||
"eccId": "ECC002",
|
||||
"eccNm": "Deposition Control Center"
|
||||
},
|
||||
{
|
||||
"fabId": "FAB003",
|
||||
"fabNm": "Hwaseong FAB",
|
||||
"eqpmId": "EQ003",
|
||||
"eqpmNm": "CMP C56",
|
||||
"eccId": "ECC003",
|
||||
"eccNm": "CMP Control Center"
|
||||
}
|
||||
];
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridName,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: res
|
||||
});
|
||||
|
||||
|
||||
this.loadGrid=true;
|
||||
this.$nextTick(()=>{
|
||||
if(this.isMulti){
|
||||
this.getChecked();
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
setUpdate() {
|
||||
if(this.isMulti){
|
||||
var data = this.$refs[this.gridName].getCheckedRowsEvt();
|
||||
this.dialog = false;
|
||||
this.setPageData({
|
||||
checkedRows: data,
|
||||
eqpmId : data.map(item=>{
|
||||
return item.eqpmId;
|
||||
}),
|
||||
eqpmNm : data.map(item=>{
|
||||
return item.eqpmNm;
|
||||
}),
|
||||
eqpmIdList:data,
|
||||
isFind2:true
|
||||
});
|
||||
}else{
|
||||
this.dialog = false;
|
||||
this.setPageData({eqpmInfo : this.activeRowData, eqpmNm : this.activeRowData.eqpmNm})
|
||||
}
|
||||
this.loadGrid = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.isMulti) {
|
||||
this.getChecked();
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
getRowData(data){
|
||||
if(this.isMulti){
|
||||
if(data._attributes.checked){
|
||||
this.$refs[this.gridName].uncheckEvt(data, this.$refs[this.gridName]);
|
||||
}else{
|
||||
this.$refs[this.gridName].checkEvt(data, this.$refs[this.gridName]);
|
||||
}
|
||||
}else{
|
||||
this.activeRowData = data;
|
||||
}
|
||||
},
|
||||
getChecked(){
|
||||
if(this.myBindingData.eqpmIdList.length>0){
|
||||
this.myBindingData.eqpmIdList.map(item=>{
|
||||
this.$refs[this.gridName].checkEvt(item, this.$refs[this.gridName]);
|
||||
});
|
||||
}
|
||||
}
|
||||
setUpdate() {
|
||||
if (this.isMulti) {
|
||||
var data = this.$refs[this.gridName].getCheckedRowsEvt();
|
||||
this.dialog = false;
|
||||
this.setPageData({
|
||||
checkedRows: data,
|
||||
eqpmId: data.map(item => {
|
||||
return item.eqpmId;
|
||||
}),
|
||||
eqpmNm: data.map(item => {
|
||||
return item.eqpmNm;
|
||||
}),
|
||||
eqpmIdList: data,
|
||||
isFind2: true
|
||||
});
|
||||
} else {
|
||||
this.dialog = false;
|
||||
this.setPageData({ eqpmInfo: this.activeRowData, eqpmNm: this.activeRowData.eqpmNm })
|
||||
}
|
||||
},
|
||||
getRowData(data) {
|
||||
if (this.isMulti) {
|
||||
if (data._attributes.checked) {
|
||||
this.$refs[this.gridName].uncheckEvt(data, this.$refs[this.gridName]);
|
||||
} else {
|
||||
this.$refs[this.gridName].checkEvt(data, this.$refs[this.gridName]);
|
||||
}
|
||||
} else {
|
||||
this.activeRowData = data;
|
||||
}
|
||||
},
|
||||
getChecked() {
|
||||
if (this.myBindingData.eqpmIdList.length > 0) {
|
||||
this.myBindingData.eqpmIdList.map(item => {
|
||||
this.$refs[this.gridName].checkEvt(item, this.$refs[this.gridName]);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
var eqpmSelectPop ={
|
||||
eqpmSelectGrid:{
|
||||
data:[],
|
||||
column:[],
|
||||
option:{}
|
||||
}
|
||||
var eqpmSelectPop = {
|
||||
eqpmSelectGrid: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
375
components/common/modal/EqpmSelectPop_bk.vue
Normal file
375
components/common/modal/EqpmSelectPop_bk.vue
Normal file
@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="textCols">
|
||||
<!-- <a-input :size="size" @click="showDetailModal = true" class="custom-input" suffix-icon placeholder="Search..." v-model="selectValue">
|
||||
<template #suffix>
|
||||
<a-icon type="search" />
|
||||
</template>
|
||||
</a-input> -->
|
||||
|
||||
<!-- append-icon="search" -->
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
class="v-input__custom"
|
||||
@click="showDetailModal = true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="required || false"
|
||||
>
|
||||
<!-- :disabled="disabled || false" -->
|
||||
<template #append >
|
||||
<a-icon type="search" />
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
</v-col>
|
||||
<a-modal v-model="showDetailModal" title="가이드 알람이력" class="text-left" width="800px" :footer="null"
|
||||
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
|
||||
<!-- Top Input Fields -->
|
||||
<v-row :gutters="32" align="end" style="margin-bottom: 16px;">
|
||||
<!-- Label on the left -->
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<v-col :cols="3">
|
||||
<component :is="'SelectBox'" :label="'실비그룹'" :labelCols="12" :textCols="12"
|
||||
:propsValue="eqpmGrpSelected" :itemList="eqpmGrpList"
|
||||
@update:propsValue="eqpmGrpSelected = $event" :disabled="disabled" :iconShow="false" />
|
||||
</v-col>
|
||||
|
||||
<v-col :cols="4" style="text-align: left;">
|
||||
<component :is="'SelectBox'" :label="'FAB'" :labelCols="12" :textCols="12"
|
||||
:propsValue="localFabSelected" :itemList="fabList"
|
||||
@update:propsValue="localFabSelected = $event" :disabled="disabled" :iconShow="false" />
|
||||
</v-col>
|
||||
<v-col :cols="5" >
|
||||
<v-row>
|
||||
<v-col :cols="12" style="text-align: left;">
|
||||
<div>실비명</div>
|
||||
</v-col>
|
||||
|
||||
<v-col :cols="8">
|
||||
<a-input class="custom-input" suffix-icon placeholder="Search..."
|
||||
:style="{ borderRadius: '6px', }" >
|
||||
<template #suffix>
|
||||
<a-icon type="search" />
|
||||
</template>
|
||||
|
||||
</a-input>
|
||||
</v-col>
|
||||
<v-col :cols="3" class="text-right">
|
||||
<!-- 조회버튼 -->
|
||||
<BtnSearch @click="searchFab()" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
<a-divider />
|
||||
<!-- Table -->
|
||||
<a-table :columns="columns" :dataSource="filteredData" rowKey="id" :rowSelection="rowSelection" bordered />
|
||||
|
||||
<!-- Footer Buttons -->
|
||||
<div style="text-align: right; margin-top: 16px;">
|
||||
<a-button @click="showDetailModal = false">닫기</a-button>
|
||||
<a-button type="primary" style="margin-left: 8px; color:#fff"
|
||||
@click="showDetailModal = false">확인</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</v-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Utility from '~/plugins/utility';
|
||||
import selectCodeList from '@/components/common/select/selectCodeList';
|
||||
import InputText from '~/components/common/input/InputText';
|
||||
import dateUtility from '~/plugins/dateUtility';
|
||||
import SelectBox from '@/components/common/select/SelectBox';
|
||||
import SelectBoxMulti from '@/components/common/select/SelectBoxMulti';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: '비교대상 최대(20개)',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 정보',
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 목록',
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 12,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 12,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
fabDisabled: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
eqpmGrpDisabled: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
isMulti: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
fabSelected: {
|
||||
type: String, // or Array, depending on your data
|
||||
required: false
|
||||
},
|
||||
eqpmGrpSelected: {
|
||||
type: String, // or Array, depending on your data
|
||||
required: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "middle",
|
||||
}
|
||||
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
selectCodeList,
|
||||
dateUtility,
|
||||
InputText,
|
||||
SelectBox,
|
||||
SelectBoxMulti,
|
||||
BtnSearch
|
||||
// Tree
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
modalDataKey: 'eqpmSelectPopData',
|
||||
myModalKey: 'eqpmSelectPop',
|
||||
gridName: 'eqpmSelectGrid',
|
||||
loadGrid: false,
|
||||
setGrid: false,
|
||||
popCheck: false,
|
||||
dialog: false,
|
||||
activeRowData: {},
|
||||
checkedRowDataList: [],
|
||||
|
||||
localFabSelected: this.fabSelected,
|
||||
localEqpmGrpSelected: this.eqpmGrpSelected,
|
||||
|
||||
fabList: [],
|
||||
eqpmGrpList: [],
|
||||
searchWord: '',
|
||||
activeRowData: {},
|
||||
textFieldData: '',
|
||||
selectRow: {},
|
||||
showDetailModal: false,
|
||||
columns: [
|
||||
{
|
||||
title: 'FAB',
|
||||
dataIndex: 'fab',
|
||||
key: 'fab',
|
||||
},
|
||||
{
|
||||
title: '설비ID',
|
||||
dataIndex: 'equipmentId',
|
||||
key: 'equipmentId',
|
||||
},
|
||||
{
|
||||
title: '설비명',
|
||||
dataIndex: 'equipmentName',
|
||||
key: 'equipmentName',
|
||||
},
|
||||
],
|
||||
// Table data
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
fab: 'FAB001',
|
||||
equipmentId: 'EQ001',
|
||||
equipmentName: '냉각기 A',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
fab: 'FAB002',
|
||||
equipmentId: 'EQ002',
|
||||
equipmentName: '펌프 B',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
fab: 'FAB003',
|
||||
equipmentId: 'EQ003',
|
||||
equipmentName: '히터 C',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
fab: 'FAB001',
|
||||
equipmentId: 'EQ004',
|
||||
equipmentName: '냉각기 D',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
fab: 'FAB002',
|
||||
equipmentId: 'EQ005',
|
||||
equipmentName: '펌프 E',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
fab: 'FAB003',
|
||||
equipmentId: 'EQ006',
|
||||
equipmentName: '히터 F',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
fab: 'FAB001',
|
||||
equipmentId: 'EQ007',
|
||||
equipmentName: '냉각기 G',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
fab: 'FAB002',
|
||||
equipmentId: 'EQ008',
|
||||
equipmentName: '펌프 H',
|
||||
},
|
||||
],
|
||||
filteredData: [],
|
||||
// Row selection config
|
||||
rowSelection: {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log('Selected Row Keys:', selectedRowKeys);
|
||||
console.log('Selected Rows:', selectedRows);
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
fabSelected(newVal) {
|
||||
this.localFabSelected = newVal;
|
||||
},
|
||||
eqpmGrpSelected(newVal) {
|
||||
this.localEqpmGrpSelected = newVal;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.$store.commit('setPageData', {
|
||||
eqpmSelectPopData: { eqpmSelectPop },
|
||||
});
|
||||
},
|
||||
async created() {
|
||||
await this.getFab();
|
||||
await this.getEqpmGrp();
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// ...mapMutations({
|
||||
// setPageData: 'setPageData',
|
||||
// setModalGridData: 'setModalGridData',
|
||||
// setModalGridColumn: 'setModalGridColumn',
|
||||
// setModalGridOption: 'setModalGridOption',
|
||||
// }),
|
||||
// ...mapActions({
|
||||
// postApiReturn: 'modules/list/postApiReturn',
|
||||
// }),
|
||||
init() {
|
||||
this.filteredData = this.data;
|
||||
// this.activeRowData = {};
|
||||
// this.gridInit();
|
||||
},
|
||||
// search() {
|
||||
// this.getRowGridData();
|
||||
// },
|
||||
searchFab() {
|
||||
console.log('tttttttttttt')
|
||||
// this.filteredData = this.data.filter(item => {
|
||||
// const matchGrp = this.eqpmGrpSelected ? item.group === this.eqpmGrpSelected : true;
|
||||
// const matchFab = this.localFabSelected ? item.fab === this.localFabSelected : true;
|
||||
// return matchGrp && matchFab;
|
||||
// });
|
||||
},
|
||||
async getFab() {
|
||||
|
||||
this.fabList = [
|
||||
{ label: 'FAB001', value: 'FAB001' },
|
||||
{ label: 'FAB002', value: 'FAB002' },
|
||||
{ label: 'FAB003', value: 'FAB003' },
|
||||
];
|
||||
|
||||
// this.fabSelected = 'FAB001';
|
||||
|
||||
},
|
||||
async getEqpmGrp() {
|
||||
this.eqpmGrpList = [
|
||||
{ label: 'EQ 1', value: 'EQ001' },
|
||||
{ label: 'EQ 2', value: 'EQ002' },
|
||||
{ label: 'EQ 3', value: 'EQ003' },
|
||||
];
|
||||
|
||||
// this.eqpmGrpSelected = 'EQ001';
|
||||
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
var eqpmSelectPop = {
|
||||
eqpmSelectGrid: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,95 +1,61 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="item.iconShow" small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="item.required || false"
|
||||
:disabled="item.disabled || false"
|
||||
></v-text-field>
|
||||
<v-text-field readonly v-model="selectValue" append-icon="mdi-magnify"
|
||||
:class="['v-select__custom', customClass]"
|
||||
@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true"
|
||||
:required="item.required || false"></v-text-field>
|
||||
<!-- :disabled="item.disabled || false" -->
|
||||
</v-col>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="1000px">
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ option.modalTitle }}</span>
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<v-icon @click="dialogOpenCloseEvent(dialog)">mdi-close</v-icon>
|
||||
</v-card-title>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
검색
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<v-row align="end" class="pa-5" no-gutters>
|
||||
<v-col :cols="2.5" class="mr-2">
|
||||
<v-row>
|
||||
<v-col :cols="2">
|
||||
<label for="" class="search-box-label">
|
||||
<!-- <v-icon small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon> -->
|
||||
검색
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="12">
|
||||
<v-text-field append-icon="mdi-magnify" class="v-input__custom" outlined :hide-details="true"
|
||||
v-model="searchWord" @keyup.enter="search"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<a-button type="primary" :ripple="false" @click="search()">
|
||||
조회
|
||||
</a-button>
|
||||
</v-row>
|
||||
<!-- <div :style="'height: calc(65vh)'"> -->
|
||||
<div :style="'height: 600px'">
|
||||
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
|
||||
<div ref="modalGridParent" class="h100 py-3">
|
||||
<component
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="grid_01"
|
||||
:dataPath="searchParam.modalData2.evtObjPop"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)"
|
||||
/>
|
||||
<!-- :is="loadGrid && dialog ? 'Grid' : null" -->
|
||||
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
|
||||
:dataPath="searchParam.modalData2.evtObjPop" :parentPrgmId="parentPrgmId" @getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)" />
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate('init')">초기화</v-btn>
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-end">
|
||||
<a-button type="default" class="mr-2" :ripple="false" @click="dialogOpenCloseEvent(dialog)">닫기</a-button>
|
||||
<a-button type="primary" class="mr-2" :ripple="false" @click="setUpdate('init')">초기화</a-button>
|
||||
<a-button type="primary" :ripple="false" @click="setUpdate($event)">확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -139,7 +105,11 @@ export default {
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
}
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
// bindingFlag:{
|
||||
// type:Boolean,
|
||||
// require: false,
|
||||
@ -154,7 +124,7 @@ export default {
|
||||
return {
|
||||
dialog: false,
|
||||
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
grid_01: 'grid_01',
|
||||
myModalKey: 'evtObjPop',
|
||||
modalDataKey: 'modalData2',
|
||||
@ -195,6 +165,35 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state) {
|
||||
const myOptions = {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
treeColumnOptions: {
|
||||
name: 'readPlcNm', // Showing tree table
|
||||
useIcon: false, // Not using icon
|
||||
indentWidth: 10,
|
||||
},
|
||||
};
|
||||
const dataPathMock = {
|
||||
'grid_01': {
|
||||
column: [
|
||||
{ header: '검침개소명', name: 'readPlcNm', align: 'left', minWidth: 400, },
|
||||
{ header: '검침개소', name: 'plcKind', minWidth: 100, align: 'center', },
|
||||
// {
|
||||
// header: '사용 여부', name: 'useFg', minWidth: 100, align: 'center',
|
||||
// },
|
||||
],
|
||||
data: sampleData,
|
||||
option: myOptions
|
||||
}
|
||||
};
|
||||
return {
|
||||
modalData2: {
|
||||
evtObjPop: dataPathMock
|
||||
}
|
||||
}
|
||||
// end test
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
myBindingData(state) {
|
||||
@ -209,7 +208,7 @@ export default {
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
if(this.formFlag){
|
||||
if (this.formFlag) {
|
||||
if (!this.item) {
|
||||
return this.textFieldData;
|
||||
}
|
||||
@ -217,12 +216,12 @@ export default {
|
||||
// return "NONE";
|
||||
// }
|
||||
else {
|
||||
|
||||
return this.myBindingData
|
||||
|
||||
return this.myBindingData
|
||||
? this.myBindingData[this.item.valueNm]
|
||||
: this.textFieldData;
|
||||
: this.textFieldData;
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
// grid와 바인딩 안했을 때
|
||||
return this.textFieldData;
|
||||
}
|
||||
@ -251,7 +250,7 @@ export default {
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
@ -301,7 +300,7 @@ export default {
|
||||
});
|
||||
},
|
||||
async getGridData() {
|
||||
this.loadGrid = false;
|
||||
// this.loadGrid = false;
|
||||
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectTagBaseInfo',
|
||||
@ -325,7 +324,7 @@ export default {
|
||||
},
|
||||
setUpdate(v) {
|
||||
// 초기화
|
||||
if(v == 'init'){
|
||||
if (v == 'init') {
|
||||
this.selectedData.tagId = null;
|
||||
this.selectedData.tagNm = null;
|
||||
}
|
||||
@ -334,9 +333,9 @@ export default {
|
||||
this.textFieldData = this.selectedData.tagId;
|
||||
} else {
|
||||
// let formFg = this.item.formFg != undefined ? this.item.formFg : this.formFg;
|
||||
if(this.formFlag){
|
||||
if (this.formFlag) {
|
||||
if (this.item.bindNm) {
|
||||
this.myBindingData[this.item.bindNm] = this.selectedData.tagNm;
|
||||
this.myBindingData[this.item.bindNm] = this.selectedData.tagNm;
|
||||
} else {
|
||||
this.myBindingData.tagNm = this.selectedData.tagNm;
|
||||
}
|
||||
@ -360,16 +359,16 @@ export default {
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
// grid와 binding 안되어있는 경우
|
||||
this.textFieldData = this.selectedData.tagNm;
|
||||
this.setPageData({
|
||||
tagId: this.selectedData.tagId,
|
||||
// [this.item.tagNm]: this.selectedData.tagNm
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
dialogOpenCloseEvent(val) {
|
||||
@ -377,6 +376,7 @@ export default {
|
||||
// this.dialog = false;
|
||||
// return;
|
||||
// }
|
||||
console.log("this.dialog: ", this.dialog);
|
||||
this.dialog = !val;
|
||||
},
|
||||
},
|
||||
@ -389,6 +389,50 @@ var evtObjPop = {
|
||||
option: {},
|
||||
},
|
||||
};
|
||||
|
||||
const sampleData = [
|
||||
{
|
||||
readPlcNm: '서울 본사',
|
||||
plcKind: '본사',
|
||||
useFg: '사용',
|
||||
_children: [
|
||||
{
|
||||
readPlcNm: '서울 본사 - 1층',
|
||||
plcKind: '층',
|
||||
useFg: '사용',
|
||||
},
|
||||
{
|
||||
readPlcNm: '서울 본사 - 2층',
|
||||
plcKind: '층',
|
||||
useFg: '미사용',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
readPlcNm: '부산 지사',
|
||||
plcKind: '지사',
|
||||
useFg: '사용',
|
||||
_children: [
|
||||
{
|
||||
readPlcNm: '부산 지사 - A동',
|
||||
plcKind: '건물',
|
||||
useFg: '사용',
|
||||
_children: [
|
||||
{
|
||||
readPlcNm: '부산 지사 - A동 1층',
|
||||
plcKind: '층',
|
||||
useFg: '사용',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
readPlcNm: '대전 창고',
|
||||
plcKind: '창고',
|
||||
useFg: '미사용',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -404,33 +448,8 @@ var evtObjPop = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,26 +1,32 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-row class="search-box " align="center" no-gutters >
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
v-if="iconShow"
|
||||
small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<!-- append-icon="mdi-magnify" -->
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
></v-text-field>
|
||||
>
|
||||
<template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="700px">
|
||||
@ -137,6 +143,11 @@ export default {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
@ -146,7 +157,7 @@ export default {
|
||||
return {
|
||||
dialog: false,
|
||||
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
grid_01: 'grid_01',
|
||||
myModalKey: 'FtnPlcFormPop',
|
||||
modalDataKey: 'modalData3',
|
||||
@ -285,27 +296,48 @@ export default {
|
||||
});
|
||||
},
|
||||
async getGridData() {
|
||||
this.loadGrid = false;
|
||||
// this.loadGrid = false;
|
||||
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectEccBaseInfo',
|
||||
resKey: 'eccBaseInfoData',
|
||||
sendParam: {
|
||||
blocId: this.myBindingData.blocId,
|
||||
eqpmYn: '0',
|
||||
search: this.searchWord,
|
||||
},
|
||||
});
|
||||
// const res = await this.postApiReturn({
|
||||
// apiKey: 'selectEccBaseInfo',
|
||||
// resKey: 'eccBaseInfoData',
|
||||
// sendParam: {
|
||||
// blocId: this.myBindingData.blocId,
|
||||
// eqpmYn: '0',
|
||||
// search: this.searchWord,
|
||||
// },
|
||||
// });
|
||||
|
||||
const setTreeData = await this.setTree({
|
||||
gridKey: this.gridNameTree,
|
||||
treeKey: 'ECC_ID',
|
||||
value: res.map(item => ({
|
||||
// const setTreeData = await this.setTree({
|
||||
// gridKey: this.gridNameTree,
|
||||
// treeKey: 'ECC_ID',
|
||||
// value: res.map(item => ({
|
||||
// ...item,
|
||||
// eccNm: item.eccNm,
|
||||
// })),
|
||||
// });
|
||||
|
||||
//mockdata eccNm
|
||||
|
||||
|
||||
let res = [
|
||||
{ ECC_ID: 'ECC001', eccNm: '서울 본사', iconShow: false, align: 'center' },
|
||||
{ ECC_ID: 'ECC002', eccNm: '부산 지사', useIcon: false, align: 'center' },
|
||||
{ ECC_ID: 'ECC003', eccNm: '대구 센터', useIcon: false, align: 'center' },
|
||||
{ ECC_ID: 'ECC004', eccNm: '광주 사무소' , useIcon: false, align: 'center'},
|
||||
{ ECC_ID: 'ECC005', eccNm: '인천 물류창고' , useIcon: false, align: 'center'},
|
||||
];
|
||||
|
||||
|
||||
const setTreeData = {
|
||||
ROOT: res.map(item => ({
|
||||
...item,
|
||||
eccNm: item.eccNm,
|
||||
})),
|
||||
});
|
||||
}))
|
||||
};
|
||||
|
||||
console.log(res);
|
||||
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.grid_01,
|
||||
|
||||
@ -1,85 +1,63 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-row class="search-box" align="center" >
|
||||
<!-- <v-col v-if="label" cols="2"> -->
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="item.iconShow" small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-col :cols="item.label ? item.textCols : ''" class="py-0">
|
||||
<!-- <v-col :cols="label ? 9 : ''"> -->
|
||||
<!-- :value="textfield" -->
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialog = !dialog"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:disabled="item.disabled || false"
|
||||
:required="item.required || false"
|
||||
></v-text-field>
|
||||
<v-text-field readonly v-model="selectValue" append-icon="" class="v-input__custom"
|
||||
@click="dialog = !dialog" outlined :hide-details="true" :disabled="item.disabled || false"
|
||||
:required="item.required || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- <v-row justify="center"> -->
|
||||
<v-dialog
|
||||
ref="popModal"
|
||||
v-model="dialog"
|
||||
width="600"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
scrollable
|
||||
>
|
||||
<v-dialog v-model="dialog" width="800px" scrollable>
|
||||
<!-- <template v-slot:activator="{ on, attrs }">
|
||||
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
|
||||
</template> -->
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title
|
||||
class="v-card__title d-flex align-center justify-space-between"
|
||||
>
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ item.label }}</span>
|
||||
<v-btn icon tile :ripple="false" @click="dialog = !dialog">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<a-button icon="close" type="text" @click="dialog = false"></a-button>
|
||||
</v-card-title>
|
||||
<!-- <v-card-actions> -->
|
||||
<div class="pa-5">
|
||||
<div class="pa-6 pt-0">
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col v-if="label" cols="3">
|
||||
<v-row align="center">
|
||||
<v-col v-if="label" cols="12" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small
|
||||
:class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? 6 : ''">
|
||||
<v-col :cols="label ? 6 : ''" class="py-0">
|
||||
<!-- :value="textfield" -->
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="typeEnterKey"
|
||||
></v-text-field>
|
||||
<v-text-field append-icon="" class="v-input__custom" outlined :hide-details="true"
|
||||
v-model="searchWord" @keyup.enter="typeEnterKey"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="3" class="text-right">
|
||||
<v-btn :ripple="false" icon tile @click="btnTreeExpand()">
|
||||
<!-- {{ treeExpand }} -->
|
||||
<v-icon
|
||||
size="30"
|
||||
v-text="treeExpandAll ? 'mdi-chevron-up' : 'mdi-chevron-down'"
|
||||
></v-icon>
|
||||
<v-icon size="30"
|
||||
v-text="treeExpandAll ? 'mdi-chevron-up' : 'mdi-chevron-down'"></v-icon>
|
||||
</v-btn>
|
||||
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
|
||||
<!-- <v-btn color="primary" dark>접기</v-btn> -->
|
||||
@ -98,20 +76,13 @@
|
||||
<!-- <v-btn color="primary" dark>초기화</v-btn> -->
|
||||
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
|
||||
</div>
|
||||
<!-- </v-card-actions> -->
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-text>
|
||||
<div ref="treeGridParent" style="height: 500px">
|
||||
<component
|
||||
:ref="'treeGrid' + parentPrgmId"
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="gridNameTree"
|
||||
:dataPath="searchParam.modalData.selectReadObjListTree"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="bindingData"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate()"
|
||||
/>
|
||||
<component :ref="'treeGrid' + parentPrgmId" :is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="gridNameTree" :dataPath="searchParam.modalData.selectReadObjListTree"
|
||||
:parentPrgmId="parentPrgmId" :bindingData="bindingData" @getRowsData="getRowData"
|
||||
@dblClick="setUpdate()" />
|
||||
</div>
|
||||
<!-- <component
|
||||
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
|
||||
@ -119,24 +90,9 @@
|
||||
/> -->
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" dark @click="setUpdate()">확인</v-btn>
|
||||
<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
|
||||
<!-- <v-btn
|
||||
color="green darken-1"
|
||||
text
|
||||
@click="dialog = false"
|
||||
>
|
||||
Disagree
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="green darken-1"
|
||||
text
|
||||
@click="dialog = false"
|
||||
>
|
||||
Agree
|
||||
</v-btn> -->
|
||||
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
|
||||
<a-button :ripple="false" @click="setUpdate()" class="mr-2">확인</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="dialog = false" class="mr-2">닫기</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -199,7 +155,7 @@ export default {
|
||||
|
||||
myModalKey: 'selectReadObjListTree',
|
||||
gridNameTree: 'treeGrid',
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
|
||||
dialog: false,
|
||||
treeData: [], // 리턴받은 원본 트리 데이터
|
||||
@ -308,6 +264,17 @@ export default {
|
||||
gridKey: this.gridNameTree,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: [
|
||||
{
|
||||
header: '',
|
||||
name: '',
|
||||
align: 'center',
|
||||
width: 50,
|
||||
formatter: (props) => {
|
||||
return `<label class="custom-radio">
|
||||
<span class="radio-mark"></span>
|
||||
</label>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
header: '검침개소명',
|
||||
name: 'readPlcNm',
|
||||
@ -322,23 +289,69 @@ export default {
|
||||
async getTreeData() {
|
||||
this.loadGrid = false;
|
||||
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectReadPlcBaseInfo',
|
||||
resKey: 'readPlcBaseInfoData',
|
||||
sendParam: {
|
||||
blocId:
|
||||
this.searchParam.blocMstrList.length > 0
|
||||
? this.searchParam.blocMstrList[this.searchParam.blocId].blocId
|
||||
: this.searchParam.blocId, //"BL0001",
|
||||
// readObjId: this.searchParam.readObj, // "MTT00001" // 전력 코드 고정
|
||||
readObjId: this.searchParam.searchReadObj, // "MTT00001" // 전력 코드 고정
|
||||
// const res = await this.postApiReturn({
|
||||
// apiKey: 'selectReadPlcBaseInfo',
|
||||
// resKey: 'readPlcBaseInfoData',
|
||||
// sendParam: {
|
||||
// blocId:
|
||||
// this.searchParam.blocMstrList.length > 0
|
||||
// ? this.searchParam.blocMstrList[this.searchParam.blocId].blocId
|
||||
// : this.searchParam.blocId, //"BL0001",
|
||||
// // readObjId: this.searchParam.readObj, // "MTT00001" // 전력 코드 고정
|
||||
// readObjId: this.searchParam.searchReadObj, // "MTT00001" // 전력 코드 고정
|
||||
|
||||
useFg: '1',
|
||||
readPlcNmLike: this.searchWord,
|
||||
// useFg: '1',
|
||||
// readPlcNmLike: this.searchWord,
|
||||
// },
|
||||
// });
|
||||
|
||||
const treeData = [
|
||||
{
|
||||
readPlcNm: '서울 본사',
|
||||
name: '본사',
|
||||
_children: [
|
||||
{
|
||||
readPlcNm: '서울 본사 - 1층',
|
||||
name: '1층',
|
||||
},
|
||||
{
|
||||
readPlcNm: '서울 본사 - 2층',
|
||||
name: '2층',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
{
|
||||
readPlcNm: '부산 지사',
|
||||
name: '지사',
|
||||
_children: [
|
||||
{
|
||||
readPlcNm: '부산 지사 - A동',
|
||||
name: 'A동',
|
||||
_children: [
|
||||
{
|
||||
readPlcNm: '부산 지사 - A동 1층',
|
||||
name: '1층',
|
||||
},
|
||||
{
|
||||
readPlcNm: '부산 지사 - A동 2층',
|
||||
name: '2층',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
readPlcNm: '부산 지사 - B동',
|
||||
name: 'B동',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
readPlcNm: '대전 창고',
|
||||
name: '창고',
|
||||
},
|
||||
];
|
||||
|
||||
// console.log("treeData", res)
|
||||
|
||||
// // console.log("treeData", res)
|
||||
let myOptionsTree = {
|
||||
treeColumnOptions: {
|
||||
name: 'readPlcNm',
|
||||
@ -360,32 +373,34 @@ export default {
|
||||
|
||||
// this.treeData = res;
|
||||
// const ROOT = res[0].plcCd;
|
||||
const setTreeData = await this.setTree({
|
||||
gridKey: this.gridNameTree,
|
||||
treeKey: 'READ_PLC_ID',
|
||||
value: res.map(item => ({
|
||||
...item,
|
||||
rowStat: null,
|
||||
readPlcId: item.readPlcId,
|
||||
readPlcIdNm: item.readPlcId,
|
||||
upReadPlcId:
|
||||
item.upReadPlcId == null || item.upReadPlcId == ''
|
||||
? ''
|
||||
: item.upReadPlcId,
|
||||
upReadPlcNm:
|
||||
item.upReadPlcNm == null || item.upReadPlcNm == ''
|
||||
? ''
|
||||
: item.upReadPlcNm,
|
||||
blocId: item.blocId,
|
||||
useFg: item.useFg === '1' ? true : false,
|
||||
})),
|
||||
});
|
||||
// const setTreeData = await this.setTree({
|
||||
// gridKey: this.gridNameTree,
|
||||
// treeKey: 'READ_PLC_ID',
|
||||
// value: res.map(item => ({
|
||||
// ...item,
|
||||
// rowStat: null,
|
||||
// readPlcId: item.readPlcId,
|
||||
// readPlcIdNm: item.readPlcId,
|
||||
// upReadPlcId:
|
||||
// item.upReadPlcId == null || item.upReadPlcId == ''
|
||||
// ? ''
|
||||
// : item.upReadPlcId,
|
||||
// upReadPlcNm:
|
||||
// item.upReadPlcNm == null || item.upReadPlcNm == ''
|
||||
// ? ''
|
||||
// : item.upReadPlcNm,
|
||||
// blocId: item.blocId,
|
||||
// useFg: item.useFg === '1' ? true : false,
|
||||
// })),
|
||||
// });
|
||||
// this.treeData = setTreeData;
|
||||
|
||||
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridNameTree,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: setTreeData.ROOT || [],
|
||||
value: treeData,
|
||||
});
|
||||
this.loadGrid = true;
|
||||
|
||||
@ -520,9 +535,7 @@ const selectReadObjListTree = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
@ -532,17 +545,13 @@ const selectReadObjListTree = {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
|
||||
@if $theme ==dark {
|
||||
background-color: #2d3355;
|
||||
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
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>
|
||||
@ -7,7 +7,12 @@
|
||||
>
|
||||
<v-col v-if="item.label" :cols="labelCol">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
<!-- <v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon> -->
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
|
||||
@ -3,8 +3,12 @@
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<!-- <v-icon x-small :color="'#fb8200'" class="mr-1" -->
|
||||
<v-icon x-small :color="'#4777d9'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:color="'#4777d9'"
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
@ -18,7 +22,7 @@
|
||||
solo
|
||||
outlined
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:class="['v-select__custom', customClass]"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -61,12 +65,21 @@ export default {
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
default: 12,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
default: 12,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -2,22 +2,23 @@
|
||||
<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>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].blocMstrList"
|
||||
label="사업장을 선택하세요"
|
||||
item-text="blocNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
outlined
|
||||
></v-select>
|
||||
<v-select v-model="selectValue" :items="searchParam[parentPrgmId].blocMstrList" label="사업장을 선택하세요"
|
||||
item-text="blocNm" item-value="idx" append-icon="" class="v-select__custom" outlined
|
||||
:hide-details="true" :class="['v-select__custom', customClass]">
|
||||
<template v-slot:append>
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -56,6 +57,21 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -2,26 +2,24 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" x-small
|
||||
:color="required ? '#fb8200' : 'primary'"
|
||||
class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="innerValue"
|
||||
:items="itemList"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
></v-select>
|
||||
<v-select v-model="innerValue" :items="itemList" item-text="text" item-value="value" solo outlined
|
||||
:hide-details="true" append-icon="" :class="['v-select__custom', customClass]" :disabled="disabled"
|
||||
:readonly="readonly"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
|
||||
|
||||
</template></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -44,12 +42,12 @@ export default {
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
default: 12,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
default: 12,
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
@ -61,25 +59,29 @@ export default {
|
||||
require: true,
|
||||
default: null,
|
||||
},
|
||||
required:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:true
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:propsValue'],
|
||||
|
||||
@ -2,9 +2,12 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" x-small
|
||||
:color="required ? '#fb8200' : 'primary'"
|
||||
class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -14,16 +17,16 @@
|
||||
:items="itemList"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:multiple="multiple"
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
append-icon=""
|
||||
:class="['v-select__custom', customClass]"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
><template v-slot:append>
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
</template></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -87,6 +90,10 @@ export default {
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:propsValue'],
|
||||
data() {
|
||||
|
||||
@ -1,160 +1,171 @@
|
||||
<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 v-if="iconShow" x-small
|
||||
:color="required ? '#fb8200' : 'primary'"
|
||||
class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? timeCols : ''">
|
||||
<v-select
|
||||
v-model="timeInnerValue"
|
||||
:items="itemList"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:menu-props="{auto:true, offsetY: true}"
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
:class="'v-select__custom'"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@click="setDatepickerHide"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
x-small
|
||||
:color="required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? timeCols : ''">
|
||||
<v-select
|
||||
v-model="timeInnerValue"
|
||||
:items="itemList"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:menu-props="{ auto: true, offsetY: true }"
|
||||
:hide-details="true"
|
||||
:class="'v-select__custom select-large'"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@click="setDatepickerHide"
|
||||
style="width: 170px; border-radius: 6px !important"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<a-icon
|
||||
class="v-icon"
|
||||
type="clock-circle"
|
||||
style="width: 14px; height: 14px; color: #00000073"
|
||||
/>
|
||||
</template>
|
||||
</v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
timeCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 1,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: () => [],
|
||||
},
|
||||
propsValue: {
|
||||
type: String,
|
||||
require: true,
|
||||
//데이터 형태: '00 : 00'
|
||||
},
|
||||
required:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
iconShow:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:true
|
||||
},
|
||||
disabled: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
readonly: {
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
minInterval: {
|
||||
type:Number,
|
||||
require:false,
|
||||
default:1
|
||||
}
|
||||
},
|
||||
emits: ['update:propsValue'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
timeInnerValue: {
|
||||
get() {
|
||||
return this.propsValue;
|
||||
},
|
||||
set(value) {
|
||||
// console.log('value[setValue] : ', value)
|
||||
this.$emit('update:propsValue', value);
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTimeList();
|
||||
// console.log('created SelectBox')
|
||||
// console.log('timeList : ', this.timeList);
|
||||
// console.log('propsValue : ', this.propsValue);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
getTimeList(){
|
||||
for(var i=0; i<24; i++){
|
||||
let hour = i.toString().padStart(2, '0');
|
||||
for(var j=0; j<60; j++){
|
||||
if(j%this.minInterval===0){
|
||||
let min = j.toString().padStart(2, '0');
|
||||
this.itemList.push(
|
||||
{
|
||||
'text' : hour + ' : ' + min,
|
||||
'value': hour + ' : ' + min
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.propsValue = this.itemList[0].value;
|
||||
},
|
||||
setDatepickerHide(e){
|
||||
// datepicker 선택 중 시간 selectBox를 고를 경우 datepicker를 hidden 시키는 기능
|
||||
if(document.querySelector("#startpicker-container > div") != undefined){
|
||||
let datepicker1 = document.querySelector("#startpicker-container > div");
|
||||
datepicker1.classList.add('tui-hidden');
|
||||
}
|
||||
if(document.querySelector("#endpicker-container > div") != undefined){
|
||||
let datepicker2 = document.querySelector("#endpicker-container > div");
|
||||
datepicker2.classList.add('tui-hidden');
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
timeCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 1,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: () => [],
|
||||
},
|
||||
propsValue: {
|
||||
type: String,
|
||||
require: true,
|
||||
//데이터 형태: '00 : 00'
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
minInterval: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 1,
|
||||
},
|
||||
},
|
||||
emits: ["update:propsValue"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: (state) => state.pageData,
|
||||
}),
|
||||
timeInnerValue: {
|
||||
get() {
|
||||
return this.propsValue;
|
||||
},
|
||||
set(value) {
|
||||
// console.log('value[setValue] : ', value)
|
||||
this.$emit("update:propsValue", value);
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getTimeList();
|
||||
// console.log('created SelectBox')
|
||||
// console.log('timeList : ', this.timeList);
|
||||
// console.log('propsValue : ', this.propsValue);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
...mapActions({}),
|
||||
getTimeList() {
|
||||
for (var i = 0; i < 24; i++) {
|
||||
let hour = i.toString().padStart(2, "0");
|
||||
for (var j = 0; j < 60; j++) {
|
||||
if (j % this.minInterval === 0) {
|
||||
let min = j.toString().padStart(2, "0");
|
||||
this.itemList.push({
|
||||
text: hour + " : " + min,
|
||||
value: hour + " : " + min,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
this.propsValue = this.itemList[0].value;
|
||||
},
|
||||
setDatepickerHide(e) {
|
||||
// datepicker 선택 중 시간 selectBox를 고를 경우 datepicker를 hidden 시키는 기능
|
||||
if (document.querySelector("#startpicker-container > div") != undefined) {
|
||||
let datepicker1 = document.querySelector("#startpicker-container > div");
|
||||
datepicker1.classList.add("tui-hidden");
|
||||
}
|
||||
if (document.querySelector("#endpicker-container > div") != undefined) {
|
||||
let datepicker2 = document.querySelector("#endpicker-container > div");
|
||||
datepicker2.classList.add("tui-hidden");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .v-select__custom {
|
||||
// .v-select__custom {
|
||||
// &.time {
|
||||
// width: calc(50%);
|
||||
// }
|
||||
|
||||
@ -1,151 +1,170 @@
|
||||
<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-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].cmCycleList"
|
||||
label="주기를 선택하세요"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].cmCycleList"
|
||||
label="주기를 선택하세요"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
:class="['v-select__custom', customClass]"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import Utility from "~/plugins/utility";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
pickerMode: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
label:{
|
||||
type: String,
|
||||
require: false,
|
||||
default: '주기'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: '주기',
|
||||
labelPrepend: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ cmCycle: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectValue(value) {
|
||||
// 주기에 따른 오늘 기준 기본 날짜 세팅
|
||||
this.setDefaultDate(value);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
// console.log("주기에 따른 오늘 기준 기본 날짜 세팅");
|
||||
if(this.searchParam[this.parentPrgmId].dateInitedFlag){
|
||||
return;
|
||||
}
|
||||
const today = Utility.setFormatDate('today', 'YYYYMMDD');
|
||||
let srartDate = '';
|
||||
let endDate = '';
|
||||
// console.log(value);
|
||||
switch (value) {
|
||||
case 'CYC_YEAR':
|
||||
endDate = Utility.setFormatDate(today, 'YYYY');
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYY',
|
||||
);
|
||||
break;
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
pickerMode: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "주기",
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: '주기',
|
||||
labelPrepend: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: (state) => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ cmCycle: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectValue(value) {
|
||||
// 주기에 따른 오늘 기준 기본 날짜 세팅
|
||||
this.setDefaultDate(value);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
// console.log("주기에 따른 오늘 기준 기본 날짜 세팅");
|
||||
if (this.searchParam[this.parentPrgmId].dateInitedFlag) {
|
||||
return;
|
||||
}
|
||||
const today = Utility.setFormatDate("today", "YYYYMMDD");
|
||||
let srartDate = "";
|
||||
let endDate = "";
|
||||
// console.log(value);
|
||||
switch (value) {
|
||||
case "CYC_YEAR":
|
||||
endDate = Utility.setFormatDate(today, "YYYY");
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
"YYYY"
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
endDate = Utility.setFormatDate(today, 'YYYYMM');
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYYMM',
|
||||
);
|
||||
break;
|
||||
case "CYC_MONTH":
|
||||
endDate = Utility.setFormatDate(today, "YYYYMM");
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
"YYYYMM"
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
endDate = today;
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYYMMDD',
|
||||
);
|
||||
break;
|
||||
case "CYC_DAY":
|
||||
endDate = today;
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
"YYYYMMDD"
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_HOUR':
|
||||
endDate = today;
|
||||
srartDate = today;
|
||||
break;
|
||||
case "CYC_HOUR":
|
||||
endDate = today;
|
||||
srartDate = today;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (
|
||||
this.pickerMode == undefined ||
|
||||
this.pickerMode == null ||
|
||||
this.pickerMode == ''
|
||||
) {
|
||||
this.setPageData({ fromDt: srartDate, toDt: endDate });
|
||||
} else if (this.pickerMode == 'single') {
|
||||
this.setPageData({ fromDt: endDate, toDt: srartDate });
|
||||
} else {
|
||||
this.setPageData({ fromDt: srartDate, toDt: endDate });
|
||||
}
|
||||
// console.log(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
// console.log(this.searchParam[this.parentPrgmId].dateRange);
|
||||
},
|
||||
},
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (
|
||||
this.pickerMode == undefined ||
|
||||
this.pickerMode == null ||
|
||||
this.pickerMode == ""
|
||||
) {
|
||||
this.setPageData({ fromDt: srartDate, toDt: endDate });
|
||||
} else if (this.pickerMode == "single") {
|
||||
this.setPageData({ fromDt: endDate, toDt: srartDate });
|
||||
} else {
|
||||
this.setPageData({ fromDt: srartDate, toDt: endDate });
|
||||
}
|
||||
// console.log(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
// console.log(this.searchParam[this.parentPrgmId].dateRange);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
<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>
|
||||
<v-icon v-if="iconShow" small color="primary"
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -15,7 +17,7 @@
|
||||
solo
|
||||
outlined
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:class="['v-select__custom', customClass]"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -65,6 +67,20 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,118 +1,136 @@
|
||||
<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 small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<!-- <label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId][dataKey + 'List']"
|
||||
item-text="mttNm"
|
||||
item-value="mttCd"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
outlined
|
||||
hide-details
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</label> -->
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId][dataKey + 'List']"
|
||||
item-text="mttNm"
|
||||
item-value="mttCd"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
:class="['v-select__custom', customClass]"
|
||||
outlined
|
||||
hide-details
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
mySendMttParam() {
|
||||
return this.searchParam[this.parentPrgmId]['sendMttParam'];
|
||||
},
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId][this.dataKey];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.dataKey]: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
mySendMttParam() {
|
||||
this.getMttList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.searchParam[this.parentPrgmId]['sendMttParam'],
|
||||
});
|
||||
// this.selectValue(this.searchParam[this.parentPrgmId].mttCdList[0].mttCd);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.searchParam[this.parentPrgmId]['sendMttParam'].mttTp!=""){
|
||||
this.getMttList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.searchParam[this.parentPrgmId]['sendMttParam'],
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({
|
||||
getMttList: 'modules/search/getMttList',
|
||||
}),
|
||||
},
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
sendParam: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
addAll: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// label: "검침대상유형",
|
||||
// labelPrepend: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: (state) => state.pageData,
|
||||
}),
|
||||
mySendMttParam() {
|
||||
return this.searchParam[this.parentPrgmId]["sendMttParam"];
|
||||
},
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId][this.dataKey];
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ [this.dataKey]: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
mySendMttParam() {
|
||||
this.getMttList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.searchParam[this.parentPrgmId]["sendMttParam"],
|
||||
});
|
||||
// this.selectValue(this.searchParam[this.parentPrgmId].mttCdList[0].mttCd);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.searchParam[this.parentPrgmId]["sendMttParam"].mttTp != "") {
|
||||
this.getMttList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.searchParam[this.parentPrgmId]["sendMttParam"],
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
...mapActions({
|
||||
getMttList: "modules/search/getMttList",
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,7 +2,12 @@
|
||||
<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>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -14,9 +19,11 @@
|
||||
item-value="readObjId"
|
||||
solo
|
||||
outlined
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
append-icon=""
|
||||
:class="['v-select__custom', customClass]"
|
||||
><template v-slot:append>
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
</template></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -65,6 +72,21 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -146,5 +146,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
@ -2,7 +2,12 @@
|
||||
<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>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -13,9 +18,12 @@
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
outlined
|
||||
append-icon=""
|
||||
:class="['v-select__custom', customClass]"
|
||||
><template v-slot:append>
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
</template></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -47,6 +55,16 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -2,7 +2,12 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -15,9 +20,11 @@
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
append-icon=""
|
||||
:class="['v-select__custom', customClass]"
|
||||
><template v-slot:append>
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
</template></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -54,6 +61,16 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -2,22 +2,18 @@
|
||||
<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>
|
||||
<v-icon v-if="iconShow" small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
|
||||
$icoBulletPoint
|
||||
</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId][dataKey + 'List']"
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
<v-select v-model="selectValue" :items="searchParam[parentPrgmId][dataKey + 'List']" item-text="commCdNm"
|
||||
item-value="commCd" outlined :hide-details="true" append-icon=""
|
||||
:class="['v-select__custom', customClass]"><template v-slot:append>
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
</template></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -60,18 +56,33 @@ export default {
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
default: 12,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
default: 12,
|
||||
},
|
||||
mttGrpCd: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
572
components/form/CustomInput.vue
Normal file
572
components/form/CustomInput.vue
Normal file
@ -0,0 +1,572 @@
|
||||
<template>
|
||||
<v-row v-if="!item.showValue" class="search-box" align="center">
|
||||
<v-col
|
||||
:cols="option.labelCols"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols" class="d-flex flex-column" style="gap: 4px">
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="InputValue"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:type="item.inputType || 'text'"
|
||||
:min="item.min || ''"
|
||||
:max="item.max || ''"
|
||||
:onkeyup="item.onkeyup || ''"
|
||||
:onkeydown="item.onkeydown || ''"
|
||||
:hide-details="true"
|
||||
:disabled="
|
||||
item.disabled ||
|
||||
(item.elseDisabled &&
|
||||
myBindingData &&
|
||||
item.elseDisabled !== myBindingData.rowStat) ||
|
||||
disabledCondition ||
|
||||
false
|
||||
"
|
||||
:readonly="
|
||||
item.readonly ||
|
||||
(item.elseReadonly &&
|
||||
myBindingData &&
|
||||
item.elseReadonly !== myBindingData.rowStat) ||
|
||||
readonlyCondition ||
|
||||
false
|
||||
"
|
||||
:required="item.required || false"
|
||||
:placeholder="item.placeholder"
|
||||
@input="modifyValue($event, item.valueNm)"
|
||||
@click="onClick($event, item, item.valueNm)"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="700px">
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ option.modalTitle }}</span>
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
검색
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="5">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<!-- <div :style="'height: calc(65vh)'"> -->
|
||||
<div :style="'height: 429px;'">
|
||||
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
|
||||
<div ref="modalGridParent" class="h100 w100 py-3">
|
||||
<!-- <component
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="grid_01"
|
||||
:dataPath="searchParam.modalData3.FtnPlcFormPop"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)"
|
||||
/> -->
|
||||
<a-table :columns="columns" :dataSource="filteredData" rowKey="id" :rowSelection="rowSelection" bordered />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
labelContent: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '공정',
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
modalTitle: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '공정',
|
||||
},
|
||||
modalContent: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '검색',
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: false,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
Utility,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: true,
|
||||
loadGrid: true,
|
||||
grid_01: 'grid_01',
|
||||
myModalKey: 'FtnPlcFormPop',
|
||||
modalDataKey: 'modalData3',
|
||||
|
||||
searchWord: '',
|
||||
selectedData: {},
|
||||
textFieldData: '',
|
||||
|
||||
option: {
|
||||
labelCols:
|
||||
this.item !== undefined
|
||||
? this.item.labelCols !== undefined
|
||||
? this.item.labelCols
|
||||
: this.labelCols
|
||||
: this.labelCols,
|
||||
labelContent:
|
||||
this.item !== undefined
|
||||
? this.item.labelContent !== undefined
|
||||
? this.item.labelContent
|
||||
: this.labelContent
|
||||
: this.labelContent,
|
||||
textCols:
|
||||
this.item !== undefined
|
||||
? this.item.textCols !== undefined
|
||||
? this.item.textCols
|
||||
: this.textCols
|
||||
: this.textCols,
|
||||
modalTitle:
|
||||
this.item !== undefined
|
||||
? this.item.modalTitle !== undefined
|
||||
? this.item.modalTitle
|
||||
: this.modalTitle
|
||||
: this.modalTitle,
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: 'FAB',
|
||||
dataIndex: 'fab',
|
||||
key: 'fab',
|
||||
},
|
||||
{
|
||||
title: '설비명',
|
||||
dataIndex: 'equipmentName',
|
||||
key: 'equipmentName',
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
fab: 'FAB001',
|
||||
equipmentId: 'EQ001',
|
||||
equipmentName: '냉각기 A',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
fab: 'FAB002',
|
||||
equipmentId: 'EQ002',
|
||||
equipmentName: '펌프 B',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
fab: 'FAB003',
|
||||
equipmentId: 'EQ003',
|
||||
equipmentName: '히터 C',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
fab: 'FAB001',
|
||||
equipmentId: 'EQ004',
|
||||
equipmentName: '냉각기 D',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
fab: 'FAB002',
|
||||
equipmentId: 'EQ005',
|
||||
equipmentName: '펌프 E',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
fab: 'FAB003',
|
||||
equipmentId: 'EQ006',
|
||||
equipmentName: '히터 F',
|
||||
},
|
||||
],
|
||||
filteredData: [],
|
||||
rowSelection: {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log('Selected Row Keys:', selectedRowKeys);
|
||||
console.log('Selected Rows:', selectedRows);
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
myBindingData(state) {
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
}),
|
||||
InputValue: {
|
||||
get() {
|
||||
// console.log(this.myBindingData);
|
||||
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('getValue', {
|
||||
key: this.item.valueNm,
|
||||
value: value,
|
||||
});
|
||||
return this.newValue(value);
|
||||
},
|
||||
},
|
||||
disabledCondition() {
|
||||
if (this.myBindingData && this.item.disabledCondition) {
|
||||
let isDisabled = false;
|
||||
this.item.disabledCondition.forEach(condition => {
|
||||
if (this.myBindingData[condition.dataKey] == condition.value) {
|
||||
isDisabled = true;
|
||||
}
|
||||
});
|
||||
return isDisabled;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
readonlyCondition() {
|
||||
if (this.myBindingData && this.item.readonlyCondition) {
|
||||
let isReadonly = false;
|
||||
this.item.readonlyCondition.forEach(condition => {
|
||||
if (this.myBindingData[condition.dataKey] == condition.value) {
|
||||
isReadonly = true;
|
||||
}
|
||||
});
|
||||
return isReadonly;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
selectValue: {
|
||||
get() {
|
||||
if (!this.item) {
|
||||
return this.textFieldData;
|
||||
}
|
||||
// else if(this.item.disableContent){
|
||||
// return "NONE";
|
||||
// }
|
||||
else {
|
||||
return this.myBindingData
|
||||
? this.myBindingData[this.item.valueNm]
|
||||
: this.textFieldData;
|
||||
}
|
||||
},
|
||||
set(value) {
|
||||
// if(this.item && this.item.disableContent){
|
||||
// return "NONE";
|
||||
// }
|
||||
return value;
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async dialog(val) {
|
||||
if (val) {
|
||||
await this.getGridData();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.$store.commit('setPageData', {
|
||||
modalData3: { FtnPlcFormPop },
|
||||
});
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setModalGridData: 'setModalGridData',
|
||||
setModalGridColumn: 'setModalGridColumn',
|
||||
setModalGridOption: 'setModalGridOption',
|
||||
}),
|
||||
...mapActions({
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
}),
|
||||
init() {
|
||||
this.gridInit();
|
||||
this.filteredData = this.data;
|
||||
},
|
||||
search() {
|
||||
this.getGridData();
|
||||
},
|
||||
initSearch() {
|
||||
this.searchWord = '';
|
||||
this.getGridData();
|
||||
},
|
||||
gridInit() {
|
||||
let myOptions = {
|
||||
treeColumnOptions: {
|
||||
name: 'eccNm',
|
||||
useIcon: true,
|
||||
},
|
||||
scrollX: false,
|
||||
};
|
||||
this.setModalGridOption({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.grid_01,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: Object.assign(
|
||||
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
|
||||
Utility.defaultGridOption(390, myOptions),
|
||||
myOptions,
|
||||
),
|
||||
});
|
||||
|
||||
this.setModalGridColumn({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.grid_01,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: [{ header: '위치정보', name: 'eccNm' }],
|
||||
});
|
||||
},
|
||||
async getGridData() {
|
||||
this.loadGrid = false;
|
||||
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectEccBaseInfo',
|
||||
resKey: 'eccBaseInfoData',
|
||||
sendParam: {
|
||||
blocId: this.myBindingData.blocId,
|
||||
eqpmYn: '0',
|
||||
search: this.searchWord,
|
||||
},
|
||||
});
|
||||
|
||||
const setTreeData = await this.setTree({
|
||||
gridKey: this.gridNameTree,
|
||||
treeKey: 'ECC_ID',
|
||||
value: res.map(item => ({
|
||||
...item,
|
||||
eccNm: item.eccNm,
|
||||
})),
|
||||
});
|
||||
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.grid_01,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: setTreeData.ROOT,
|
||||
});
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
getRowData(data) {
|
||||
this.selectedData = { ...data };
|
||||
},
|
||||
setUpdate(v) {
|
||||
this.dialog = false;
|
||||
|
||||
const dt = {
|
||||
columnName: this.item.valueNm,
|
||||
value: this.selectedData['eccId'],
|
||||
};
|
||||
|
||||
const dt2 = {
|
||||
columnName: this.item.valueNm2,
|
||||
value: this.selectedData['eccNm'],
|
||||
};
|
||||
if (!this.item.eccFgYn) {
|
||||
this.myBindingData.upEccNm = this.selectedData.eccNm;
|
||||
this.myBindingData.upEccId = this.selectedData.eccId;
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
this.$emit('gridEditingFinish', dt2);
|
||||
} else {
|
||||
if (this.selectedData.eccFg == '1') {
|
||||
this.myBindingData.upEccNm = this.selectedData.eccNm;
|
||||
this.myBindingData.upEccId = this.selectedData.eccId;
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
this.$emit('gridEditingFinish', dt2);
|
||||
} else {
|
||||
alert('공정(ECC)을 선택해주세요.');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
dialogOpenCloseEvent(val) {
|
||||
this.dialog = !val;
|
||||
},
|
||||
modifyValue(v, n) {
|
||||
// console.log(this.newValue(v));
|
||||
|
||||
const dt = {
|
||||
columnName: n,
|
||||
// value: v.trim()
|
||||
value: this.newValue(v),
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
},
|
||||
newValue(value) {
|
||||
let returnVal = value.trim();
|
||||
if (this.item.decimalPlaces) {
|
||||
const x = returnVal.replace('.', '');
|
||||
const y = 10 ** -this.item.decimalPlaces;
|
||||
let z = x * y;
|
||||
// console.log(x * y);
|
||||
if (z === 0) {
|
||||
z = 10 ** -(this.item.decimalPlaces + 1);
|
||||
}
|
||||
// console.log(Utility.setFormatDecimal(z, this.item.decimalPlaces));
|
||||
returnVal = Utility.setFormatDecimal(z, this.item.decimalPlaces);
|
||||
}
|
||||
return returnVal;
|
||||
},
|
||||
onClick(event, item, valueNm) {
|
||||
this.$emit('inputClick', event, item, valueNm);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var FtnPlcFormPop = {
|
||||
grid_01: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
.v-dialog {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.tui-grid-table-container {
|
||||
.tui-grid-table {
|
||||
border-right-style: solid !important;
|
||||
border-right-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.tui-grid-tree-icon {
|
||||
margin-left: -21px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
5
components/icons/icoBulletPoint.vue
Normal file
5
components/icons/icoBulletPoint.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="v-icon" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM4 8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8Z" />
|
||||
</svg>
|
||||
</template>
|
||||
17
components/icons/icoChevronDown.vue
Normal file
17
components/icons/icoChevronDown.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<!-- Custom SVG icon -->
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
class="custom-chevron-down v-icon">
|
||||
<g clip-path="url(#clip0_2993_42572)">
|
||||
<path
|
||||
d="M12.086 3.5H11.0606C10.9909 3.5 10.9252 3.53418 10.8842 3.59023L7.00005 8.94414L3.11587 3.59023C3.07486 3.53418 3.00923 3.5 2.9395 3.5H1.91411C1.82525 3.5 1.77329 3.60117 1.82525 3.67363L6.64595 10.3195C6.82095 10.5602 7.17915 10.5602 7.35279 10.3195L12.1735 3.67363C12.2268 3.60117 12.1749 3.5 12.086 3.5Z"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2993_42572">
|
||||
<rect width="14" height="14" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
</template>
|
||||
16
components/icons/icoSearch.vue
Normal file
16
components/icons/icoSearch.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<!-- Custom SVG icon -->
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
class="custom-search-icon v-icon">
|
||||
<g clip-path="url(#clip0_3037_310)">
|
||||
<path
|
||||
d="M13.2125 12.3516L9.15469 8.29375C9.78438 7.47969 10.125 6.48438 10.125 5.4375C10.125 4.18438 9.63594 3.00937 8.75156 2.12344C7.86719 1.2375 6.68906 0.75 5.4375 0.75C4.18594 0.75 3.00781 1.23906 2.12344 2.12344C1.2375 3.00781 0.75 4.18438 0.75 5.4375C0.75 6.68906 1.23906 7.86719 2.12344 8.75156C3.00781 9.6375 4.18438 10.125 5.4375 10.125C6.48438 10.125 7.47813 9.78438 8.29219 9.15625L12.35 13.2125C12.3619 13.2244 12.376 13.2338 12.3916 13.2403C12.4071 13.2467 12.4238 13.2501 12.4406 13.2501C12.4575 13.2501 12.4741 13.2467 12.4897 13.2403C12.5052 13.2338 12.5194 13.2244 12.5312 13.2125L13.2125 12.5328C13.2244 12.5209 13.2338 12.5068 13.2403 12.4912C13.2467 12.4757 13.2501 12.459 13.2501 12.4422C13.2501 12.4254 13.2467 12.4087 13.2403 12.3931C13.2338 12.3776 13.2244 12.3635 13.2125 12.3516ZM7.9125 7.9125C7.25 8.57344 6.37187 8.9375 5.4375 8.9375C4.50312 8.9375 3.625 8.57344 2.9625 7.9125C2.30156 7.25 1.9375 6.37187 1.9375 5.4375C1.9375 4.50312 2.30156 3.62344 2.9625 2.9625C3.625 2.30156 4.50312 1.9375 5.4375 1.9375C6.37187 1.9375 7.25156 2.3 7.9125 2.9625C8.57344 3.625 8.9375 4.50312 8.9375 5.4375C8.9375 6.37187 8.57344 7.25156 7.9125 7.9125Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3037_310">
|
||||
<rect width="14" height="14" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
</template>
|
||||
5
components/icons/icoSend.vue
Normal file
5
components/icons/icoSend.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.4899 7.76897L0.552358 0.279682C0.491643 0.249325 0.422 0.242182 0.355929 0.258253C0.282599 0.276381 0.219441 0.322828 0.180282 0.387423C0.141124 0.452017 0.129156 0.529497 0.147 0.602896L1.68629 6.89218C1.7095 6.98682 1.77914 7.06361 1.872 7.09397L4.5095 7.99932L1.87379 8.90468C1.78093 8.93682 1.71129 9.01182 1.68986 9.10647L0.147 15.4047C0.130929 15.4708 0.138072 15.5404 0.168429 15.5993C0.238072 15.7404 0.4095 15.7975 0.552358 15.7279L15.4899 8.28147C15.5452 8.25468 15.5899 8.20825 15.6184 8.15468C15.6881 8.01182 15.6309 7.8404 15.4899 7.76897ZM1.90771 13.6154L2.80593 9.94397L8.07736 8.13504C8.11843 8.12075 8.15236 8.08861 8.16664 8.04575C8.19164 7.97075 8.15236 7.8904 8.07736 7.86361L2.80593 6.05647L1.91129 2.39932L13.1256 8.02254L1.90771 13.6154Z" fill="white"/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,71 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
>
|
||||
<span class="txt">Data Set TAG 연결 정보</span>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailDataSetTagList"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
</div>
|
||||
<div ref="gridParent" style="height: calc((100vh - 520px) /2);">
|
||||
<Grid
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
/>
|
||||
</div>
|
||||
<div ref="formParent" style="height: calc((100vh - 520px) /2);">
|
||||
<component
|
||||
:is="'Form'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailDataSetTagList"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
</div>
|
||||
<div ref="formParent" style="height: 100px);" class="w100 h100">
|
||||
<v-row ref="contents" class="w100">
|
||||
<v-card class="searchFilter w100">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="7">
|
||||
<component
|
||||
:is="'Datepicker'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:label="'검색기간'"
|
||||
:labelCols="2"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<component
|
||||
:is="'selectCodeList'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:label="'주기'"
|
||||
dataKey="mdlDataTerm"
|
||||
:sendParam="{ commGrpCd: 'MDL_DATA_TERM', useFg: '1' }"
|
||||
:addAll="false"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2" class="text-right">
|
||||
<v-btn
|
||||
@click="jamoviProcClickEvent('view1')"
|
||||
:ripple="false"
|
||||
class="mr-1"
|
||||
>데이터 분석</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex justify-space-between align-center" style="min-height: 80px;">
|
||||
<span class="txt custom-title-4-new">Data Set TAG 연결 정보</span>
|
||||
<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailDataSetTagList"
|
||||
:btnActionsFnc="btnActions" />
|
||||
</div>
|
||||
<div ref="gridParent">
|
||||
<Grid :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData" :innerTabGridInfo="innerTabGridInfo" :dataPath="dataPathMock" />
|
||||
</div>
|
||||
<div ref="formParent" class="mt-4">
|
||||
<component :is="'Form'" :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailDataSetTagList"
|
||||
@gridEditingFinish="gridEditingFinish" />
|
||||
</div>
|
||||
|
||||
<div ref="formParent" style="min-height: 100px;" class="w100 h100">
|
||||
<v-row ref="contents" class="w100">
|
||||
<v-col :cols="6">
|
||||
<component :is="'Datepicker'" :parentPrgmId="parentPrgmId" :label="'검색기간'" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<component :is="'selectCodeList'" :parentPrgmId="parentPrgmId" :label="'주기'" dataKey="mdlDataTerm"
|
||||
:sendParam="{ commGrpCd: 'MDL_DATA_TERM', useFg: '1' }" :addAll="false" :labelCols="12" :textCols="12" :iconShow="true" />
|
||||
</v-col>
|
||||
<v-col class="text-right align-self-end">
|
||||
<a-button @click="jamoviProcClickEvent('view1')" type="primary" :ripple="false" class="mr-1">데이터 분석</a-button>
|
||||
</v-col>
|
||||
<!-- <v-card class="searchFilter w100">
|
||||
<v-row align="center" no-gutters>
|
||||
</v-row>
|
||||
</v-card> -->
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
@ -79,315 +46,357 @@ import Utility from '~/plugins/utility';
|
||||
import Datepicker from '~/components/common/DatepickerTopView';
|
||||
import selectCodeList from '@/components/common/select/selectCodeList';
|
||||
export default {
|
||||
mixins: [mixinGlobal],
|
||||
components: {
|
||||
Buttons,
|
||||
Grid,
|
||||
Form,
|
||||
Datepicker,
|
||||
selectCodeList,
|
||||
},
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
innerTabGridInfo: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
gridName: 'rowDataSetTagRelGrid',
|
||||
detailDataSetTagList: myDataSetTagDetail,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
selectedCommCd() {
|
||||
return this.pageData[this.gridName].data;
|
||||
},
|
||||
myUseFgList() {
|
||||
return this.pageData.useFgList;
|
||||
},
|
||||
selectedComId() {
|
||||
return this.pageData.rowGridSelectData.comId;
|
||||
},
|
||||
selectedDataSetId() {
|
||||
return this.pageData.rowGridSelectData.dataSetId;
|
||||
},
|
||||
},
|
||||
mixins: [mixinGlobal],
|
||||
components: {
|
||||
Buttons,
|
||||
Grid,
|
||||
Form,
|
||||
Datepicker,
|
||||
selectCodeList,
|
||||
},
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
innerTabGridInfo: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: true,
|
||||
gridName: 'rowDataSetTagRelGrid',
|
||||
detailDataSetTagList: myDataSetTagDetail,
|
||||
dataPathMock: {
|
||||
"rowDataSetTagRelGrid": {
|
||||
column: [
|
||||
{ header: 'TAG ID', name: 'id', headerAlign: 'left' },
|
||||
{ header: 'TAG 명', name: 'name', headerAlign: 'left' },
|
||||
{ header: '모델 Data 구분', name: 'type', headerAlign: 'left' }
|
||||
],
|
||||
data: dataPathDataExample,
|
||||
defaultRow: dataPathDataExample,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
selectedCommCd() {
|
||||
return this.pageData[this.gridName].data;
|
||||
},
|
||||
myUseFgList() {
|
||||
return this.pageData.useFgList;
|
||||
},
|
||||
selectedComId() {
|
||||
return this.pageData.rowGridSelectData.comId;
|
||||
},
|
||||
selectedDataSetId() {
|
||||
return this.pageData.rowGridSelectData.dataSetId;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setGridData: 'setGridData',
|
||||
setGridColumn: 'setGridColumn',
|
||||
setGridOption: 'setGridOption',
|
||||
}),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
getCodeList: 'modules/search/getCodeList',
|
||||
}),
|
||||
init() {
|
||||
this.gridInit();
|
||||
},
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs['gridParent'].offsetHeight - 36;
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setGridData: 'setGridData',
|
||||
setGridColumn: 'setGridColumn',
|
||||
setGridOption: 'setGridOption',
|
||||
}),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postUpdateApi: 'modules/list/postUpdateApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
setTree: 'modules/list/setTree',
|
||||
chkOpenTabList: 'chkOpenTabList',
|
||||
getCodeList: 'modules/search/getCodeList',
|
||||
}),
|
||||
init() {
|
||||
this.gridInit();
|
||||
},
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs['gridParent'].offsetHeight - 36;
|
||||
|
||||
const myOptions = {
|
||||
// bodyHeight: gridHeight,
|
||||
// minBodyHeight: gridHeight,
|
||||
header: {
|
||||
height: 28,
|
||||
},
|
||||
rowHeight: 29,
|
||||
minRowHeight: 29,
|
||||
selectionUnit: 'row',
|
||||
editingEvent: 'click',
|
||||
// columnOptions: {
|
||||
// resizable: true,
|
||||
// minWidth: 100
|
||||
// }
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
// value: myOptions
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
const myOptions = {
|
||||
// bodyHeight: gridHeight,
|
||||
// minBodyHeight: gridHeight,
|
||||
header: {
|
||||
height: 28,
|
||||
},
|
||||
rowHeight: 29,
|
||||
minRowHeight: 29,
|
||||
selectionUnit: 'row',
|
||||
editingEvent: 'click',
|
||||
// columnOptions: {
|
||||
// resizable: true,
|
||||
// minWidth: 100
|
||||
// }
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
// value: myOptions
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
|
||||
const _this = this;
|
||||
let useFgSelectList = [];
|
||||
this.pageData.useFgList.forEach(item => {
|
||||
const it = { text: item.commCdNm, value: item.commCd };
|
||||
useFgSelectList.push(it);
|
||||
});
|
||||
const myColumns = [
|
||||
{ header: '회사 ID', name: 'comId', hidden: true },
|
||||
{ header: 'DataSet ID', name: 'dataSetId', hidden: true },
|
||||
{ header: 'DataSet 명', name: 'dataSetNm', hidden: true },
|
||||
{ header: 'TAG ID', name: 'tagId', align: 'left', width: 440 },
|
||||
{ header: 'TAG 명', name: 'tagNm', align: 'left', width: 320 },
|
||||
{
|
||||
header: '모델 Data 구분',
|
||||
name: 'mdlDataTypeCd',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
formatter({ value }) {
|
||||
var retVal = '';
|
||||
const _this = this;
|
||||
let useFgSelectList = [];
|
||||
this.pageData.useFgList.forEach(item => {
|
||||
const it = { text: item.commCdNm, value: item.commCd };
|
||||
useFgSelectList.push(it);
|
||||
});
|
||||
const myColumns = [
|
||||
{ header: '회사 ID', name: 'comId', hidden: true },
|
||||
{ header: 'DataSet ID', name: 'dataSetId', hidden: true },
|
||||
{ header: 'DataSet 명', name: 'dataSetNm', hidden: true },
|
||||
{ header: 'TAG ID', name: 'tagId', align: 'left', width: 440 },
|
||||
{ header: 'TAG 명', name: 'tagNm', align: 'left', width: 320 },
|
||||
{
|
||||
header: '모델 Data 구분',
|
||||
name: 'mdlDataTypeCd',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
formatter({ value }) {
|
||||
var retVal = '';
|
||||
|
||||
for (var i = 0; i < _this.pageData.mdlDataTypeCdList.length; i++) {
|
||||
if (_this.pageData.mdlDataTypeCdList[i].commCd === value) {
|
||||
retVal = _this.pageData.mdlDataTypeCdList[i].commCdNm;
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < _this.pageData.mdlDataTypeCdList.length; i++) {
|
||||
if (_this.pageData.mdlDataTypeCdList[i].commCd === value) {
|
||||
retVal = _this.pageData.mdlDataTypeCdList[i].commCdNm;
|
||||
}
|
||||
}
|
||||
|
||||
return retVal;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
formatter({ value }) {
|
||||
value = value === true ? '1' : '0';
|
||||
const newValue = _this.pageData.useFgList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
return newValue[0].commCdNm;
|
||||
},
|
||||
// editor: {
|
||||
// type: "select",
|
||||
// options: {
|
||||
// listItems: useFgSelectList
|
||||
// }
|
||||
// }
|
||||
},
|
||||
{ header: '비고', name: 'rmrk', align: 'center' },
|
||||
];
|
||||
return retVal;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
formatter({ value }) {
|
||||
value = value === true ? '1' : '0';
|
||||
const newValue = _this.pageData.useFgList.filter(
|
||||
item => item.commCd == value,
|
||||
);
|
||||
return newValue[0].commCdNm;
|
||||
},
|
||||
// editor: {
|
||||
// type: "select",
|
||||
// options: {
|
||||
// listItems: useFgSelectList
|
||||
// }
|
||||
// }
|
||||
},
|
||||
{ header: '비고', name: 'rmrk', align: 'center' },
|
||||
];
|
||||
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async getRowData(data, gridName) {
|
||||
// if (data.rowStat === 'I') {
|
||||
// this.detailDataSetTagList[0].disabled = false;
|
||||
// this.detailDataSetTagList[1].disabled = false;
|
||||
// } else {
|
||||
// this.detailDataSetTagList[0].disabled = true;
|
||||
// this.detailDataSetTagList[1].disabled = true;
|
||||
// }
|
||||
this.setGridSelectData({
|
||||
gridKey: gridName,
|
||||
gridSelect: true,
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: Object.assign({}, data),
|
||||
});
|
||||
},
|
||||
async btnActions(action) {
|
||||
let dataArr = [];
|
||||
switch (action) {
|
||||
case 'add':
|
||||
console.log('add this.pageData : '); // , this.pageData);
|
||||
const defaultRow = {
|
||||
dataSetId: this.pageData.dataSetId,
|
||||
dataSetNm: this.pageData.dataSetNm,
|
||||
mdlDataTypeCd: 'SUM',
|
||||
tagId: '',
|
||||
tagNm: '',
|
||||
rmrk: null,
|
||||
useFg: true,
|
||||
};
|
||||
this.$refs[this.gridName].addRow(defaultRow);
|
||||
this.detailDataSetTagList[0].disabled = false;
|
||||
this.detailDataSetTagList[1].disabled = false;
|
||||
break;
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async getRowData(data, gridName) {
|
||||
// if (data.rowStat === 'I') {
|
||||
// this.detailDataSetTagList[0].disabled = false;
|
||||
// this.detailDataSetTagList[1].disabled = false;
|
||||
// } else {
|
||||
// this.detailDataSetTagList[0].disabled = true;
|
||||
// this.detailDataSetTagList[1].disabled = true;
|
||||
// }
|
||||
this.setGridSelectData({
|
||||
gridKey: gridName,
|
||||
gridSelect: true,
|
||||
rowGridSelectKey: data.rowKey,
|
||||
rowGridSelectData: Object.assign({}, data),
|
||||
});
|
||||
},
|
||||
async btnActions(action) {
|
||||
let dataArr = [];
|
||||
switch (action) {
|
||||
case 'add':
|
||||
console.log('add this.pageData : '); // , this.pageData);
|
||||
const defaultRow = {
|
||||
dataSetId: this.pageData.dataSetId,
|
||||
dataSetNm: this.pageData.dataSetNm,
|
||||
mdlDataTypeCd: 'SUM',
|
||||
tagId: '',
|
||||
tagNm: '',
|
||||
rmrk: null,
|
||||
useFg: true,
|
||||
};
|
||||
this.$refs[this.gridName].addRow(defaultRow);
|
||||
this.detailDataSetTagList[0].disabled = false;
|
||||
this.detailDataSetTagList[1].disabled = false;
|
||||
break;
|
||||
|
||||
case 'remove':
|
||||
this.$refs[this.gridName].removeRow();
|
||||
this.detailDataSetTagList[0].disabled = true;
|
||||
this.detailDataSetTagList[1].disabled = true;
|
||||
break;
|
||||
case 'remove':
|
||||
this.$refs[this.gridName].removeRow();
|
||||
this.detailDataSetTagList[0].disabled = true;
|
||||
this.detailDataSetTagList[1].disabled = true;
|
||||
break;
|
||||
|
||||
case 'save':
|
||||
dataArr = this.$refs[this.gridName].save();
|
||||
// this.loadGrid = false;
|
||||
const newDataArr = dataArr.map(item => {
|
||||
const newData = {
|
||||
...item,
|
||||
comId: this.selectedComId,
|
||||
dataSetId: this.selectedDataSetId,
|
||||
};
|
||||
newData.reprTagFg = newData.reprTagFg == true ? '1' : '0';
|
||||
newData.useFg = newData.useFg == true ? '1' : '0';
|
||||
return newData;
|
||||
});
|
||||
if (dataArr.length > 0) {
|
||||
var validCheck = true;
|
||||
dataArr.filter(item => {
|
||||
if (item.rowStat === 'I') {
|
||||
if (item.tagId == '' || item.distRt == '' || item.ercId == '') {
|
||||
alert('필수 입력값을 입력해주세요.');
|
||||
validCheck = false;
|
||||
}
|
||||
} else if (item.rowStat === 'U') {
|
||||
if (item.distRt == '' || item.ercId == '') {
|
||||
alert('필수 입력값을 입력해주세요.');
|
||||
validCheck = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
case 'save':
|
||||
dataArr = this.$refs[this.gridName].save();
|
||||
// this.loadGrid = false;
|
||||
const newDataArr = dataArr.map(item => {
|
||||
const newData = {
|
||||
...item,
|
||||
comId: this.selectedComId,
|
||||
dataSetId: this.selectedDataSetId,
|
||||
};
|
||||
newData.reprTagFg = newData.reprTagFg == true ? '1' : '0';
|
||||
newData.useFg = newData.useFg == true ? '1' : '0';
|
||||
return newData;
|
||||
});
|
||||
if (dataArr.length > 0) {
|
||||
var validCheck = true;
|
||||
dataArr.filter(item => {
|
||||
if (item.rowStat === 'I') {
|
||||
if (item.tagId == '' || item.distRt == '' || item.ercId == '') {
|
||||
alert('필수 입력값을 입력해주세요.');
|
||||
validCheck = false;
|
||||
}
|
||||
} else if (item.rowStat === 'U') {
|
||||
if (item.distRt == '' || item.ercId == '') {
|
||||
alert('필수 입력값을 입력해주세요.');
|
||||
validCheck = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (validCheck) {
|
||||
const sendParam = {
|
||||
datas: {
|
||||
dsMdlDataSetTagRel: newDataArr,
|
||||
},
|
||||
params: {},
|
||||
};
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'saveMdlDataSetTagRel',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
// this.loadGrid = true;
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
} else {
|
||||
alert('저장할 내용이 없습니다.');
|
||||
}
|
||||
break;
|
||||
if (validCheck) {
|
||||
const sendParam = {
|
||||
datas: {
|
||||
dsMdlDataSetTagRel: newDataArr,
|
||||
},
|
||||
params: {},
|
||||
};
|
||||
await this.postUpdateApi({
|
||||
apiKey: 'saveMdlDataSetTagRel',
|
||||
sendParam: sendParam,
|
||||
});
|
||||
// this.loadGrid = true;
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
} else {
|
||||
alert('저장할 내용이 없습니다.');
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
gridEditingFinish(data, bindingData) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
emits: ['jamoviClickEvent'],
|
||||
search() {},
|
||||
jamoviProcClickEvent() {
|
||||
let data = {
|
||||
comId: this.selectedComId,
|
||||
dataSetId: this.selectedDataSetId,
|
||||
};
|
||||
console.log('data : ', data);
|
||||
this.$emit('jamoviClickEvent', 'view1', data);
|
||||
},
|
||||
},
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
gridEditingFinish(data, bindingData) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
emits: ['jamoviClickEvent'],
|
||||
search() { },
|
||||
jamoviProcClickEvent() {
|
||||
let data = {
|
||||
comId: this.selectedComId,
|
||||
dataSetId: this.selectedDataSetId,
|
||||
};
|
||||
console.log('data : ', data);
|
||||
this.$emit('jamoviClickEvent', 'view1', data);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const myDataSetTagDetail = [
|
||||
{
|
||||
type: 'EvtObjPop',
|
||||
labelContent: 'TAG',
|
||||
modalTitle: 'TAG 리스트',
|
||||
valueNm: 'tagId',
|
||||
valueNm2: 'tagNm',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: 'TAG 명',
|
||||
valueNm: 'tagNm',
|
||||
disabled: false,
|
||||
cols: 5,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '모델 Data 구분',
|
||||
valueNm: 'mdlDataTypeCd',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
list: 'mdlDataTypeCdList',
|
||||
itemText: 'commCdNm',
|
||||
itemValue: 'commCd',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
label: '사용여부',
|
||||
valueNm: 'useFg',
|
||||
disabled: false,
|
||||
cols: 5,
|
||||
class: 'py-2',
|
||||
value: { '1': true, '0': false },
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'TextArea',
|
||||
label: '비고',
|
||||
valueNm: 'rmrk',
|
||||
disabled: false,
|
||||
cols: 12,
|
||||
textCols: 9,
|
||||
rows: 2,
|
||||
class: 'py-2',
|
||||
required: false,
|
||||
},
|
||||
{
|
||||
type: 'EvtObjPop',
|
||||
labelContent: 'TAG',
|
||||
modalTitle: 'TAG 리스트',
|
||||
valueNm: 'tagId',
|
||||
valueNm2: 'tagNm',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-1 mt-2',
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
label: 'TAG 명',
|
||||
valueNm: 'tagNm',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2 mt-2',
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '모델 Data 구분',
|
||||
valueNm: 'mdlDataTypeCd',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2 mt-2',
|
||||
list: 'mdlDataTypeCdList',
|
||||
itemText: 'commCdNm',
|
||||
itemValue: 'commCd',
|
||||
required: true,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
label: '사용여부',
|
||||
valueNm: 'useFg',
|
||||
disabled: false,
|
||||
cols: 5,
|
||||
class: 'py-2 mt-2',
|
||||
value: { '1': true, '0': false },
|
||||
required: true,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
// class: "d-flex align-end"
|
||||
},
|
||||
{
|
||||
type: 'TextArea',
|
||||
label: '비고',
|
||||
valueNm: 'rmrk',
|
||||
disabled: false,
|
||||
cols: 12,
|
||||
textCols: 12,
|
||||
rows: 2,
|
||||
class: 'py-2 mt-2',
|
||||
required: false,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const dataPathDataExample = [
|
||||
{
|
||||
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
|
||||
name: 'INCHEON 고온 냉동기 101호기 - 호로1',
|
||||
type: '합계'
|
||||
},
|
||||
{
|
||||
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
|
||||
name: 'INCHEON 고온 냉동기 101호기 - 호로1',
|
||||
type: '합계'
|
||||
},
|
||||
{
|
||||
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
|
||||
name: 'INCHEON 고온 냉동기 101호기 - 호로1',
|
||||
type: '합계'
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
>
|
||||
<span class="txt">공정 추가 정보</span>
|
||||
<span class="txt custom-title-4-new">공정 추가 정보</span>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
@ -20,6 +20,7 @@
|
||||
:editorGrid="true"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
@getRowsData="getRowData"
|
||||
:dataPath="dataPathMock"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,10 +54,22 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowDetailGrid',
|
||||
rowKey: null,
|
||||
edtingFinishFlag: 'Y',
|
||||
dataPathMock: {
|
||||
"rowDetailGrid": {
|
||||
column: [
|
||||
{ header: '추가 정보', name: 'readObjId', align: 'left' },
|
||||
{ header: 'Data 구분', name: 'readObjNm', align: 'left' },
|
||||
{ header: '추가 정보 값', name: 'readObjKind', align: 'left' },
|
||||
],
|
||||
data: dataPathDataExample,
|
||||
defaultRow: dataPathDataExample,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -431,4 +444,22 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const dataPathDataExample = [
|
||||
{
|
||||
readObjId: 'OBJ001',
|
||||
readObjNm: '서울 본사',
|
||||
readObjKind: 'TYPE01',
|
||||
},
|
||||
{
|
||||
readObjId: 'OBJ002',
|
||||
readObjNm: '부산 지사',
|
||||
readObjKind: 'TYPE02',
|
||||
},
|
||||
{
|
||||
readObjId: 'OBJ003',
|
||||
readObjNm: '대전 공장',
|
||||
readObjKind: 'TYPE03',
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
>
|
||||
<span class="txt">공정 입출력 정보</span>
|
||||
<span class="txt custom-title-4-new">공정 입출력 정보</span>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
@ -19,6 +19,7 @@
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
:dataPath="dataPathMock"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@ -59,11 +60,24 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowEccIaoGrid',
|
||||
inputList_emMapDiv: [],
|
||||
inputList_cmInOut: [],
|
||||
detailList: myDetail,
|
||||
dataPathMock: {
|
||||
"rowEccIaoGrid": {
|
||||
column: [
|
||||
{ header: '검침 대상 ID', name: 'readObjId', align: 'left' },
|
||||
{ header: '검침 대상 명', name: 'readObjNm', align: 'left' },
|
||||
{ header: '검침 대상 유형', name: 'readObjKind', align: 'left' },
|
||||
{ header: '그룹', name: 'grpCd', align: 'left' },
|
||||
],
|
||||
data: dataPathDataExample,
|
||||
defaultRow: dataPathDataExample,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -374,38 +388,49 @@ const myDetail = [
|
||||
label: '대상 유형',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-2 pr-4',
|
||||
list: 'emMapDivList',
|
||||
valueNm: 'objKind',
|
||||
itemText: 'commCdNm',
|
||||
itemValue: 'commCd',
|
||||
required: true,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
// 공백 처리
|
||||
type: 'Label',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
disabled: false,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'ReadPlcPop',
|
||||
label: '대상 항목',
|
||||
valueNm: 'objId',
|
||||
disabled: true,
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'pt-2 pb-0 mb-0 pl-4',
|
||||
required: true,
|
||||
bindNm: 'objNm',
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
noText: true,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
// 공백 처리
|
||||
type: 'Label',
|
||||
cols: 6,
|
||||
class: 'py-2 pr-4',
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
valueNm: 'objNm',
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
cols: 5,
|
||||
class: 'py-2',
|
||||
cols: 6,
|
||||
class: 'pl-4',
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'EvtObjPop',
|
||||
@ -417,53 +442,66 @@ const myDetail = [
|
||||
disabled: true,
|
||||
required: true,
|
||||
cols: 6,
|
||||
class: 'py-2 d-none',
|
||||
labelCols: 4,
|
||||
textCols: 7,
|
||||
class: 'd-none pr-4',
|
||||
disableContent: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
cols: 5,
|
||||
class: 'py-2 d-none',
|
||||
cols: 6,
|
||||
class: 'd-none pt-0 pl-4',
|
||||
valueNm: 'objNm',
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '에너지원',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-2 pr-4',
|
||||
list: 'ercNmList',
|
||||
valueNm: 'ercId',
|
||||
itemText: 'text',
|
||||
itemValue: 'value',
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '투입생산유형',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-2 pl-4',
|
||||
list: 'cmInoutList',
|
||||
valueNm: 'inProdKind',
|
||||
itemText: 'commCdNm',
|
||||
itemValue: 'commCd',
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-2 pr-4',
|
||||
label: '계산 여부',
|
||||
valueNm: 'calcFg',
|
||||
disabled: false,
|
||||
value: { '1': true, '0': false },
|
||||
required: true,
|
||||
disabledFg: 'objKind',
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
@ -471,8 +509,19 @@ const myDetail = [
|
||||
valueNm: 'distRt',
|
||||
readonly: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-2 pl-4',
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
];
|
||||
const dataPathDataExample = [
|
||||
{
|
||||
readObjId: 'OBJ001',
|
||||
readObjNm: '서울 본사',
|
||||
readObjKind: 'TYPE01',
|
||||
grpCd: 'GRP01',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
@ -1,75 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
ref="effcIdxId"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="효율지표 ID"
|
||||
valueNm="effcIdxId"
|
||||
:required="false"
|
||||
:readonly="true"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-4">
|
||||
<InputText ref="effcIdxId" :parentPrgmId="parentPrgmId" label="효율지표 ID" valueNm="effcIdxId"
|
||||
:required="false" :readonly="true" :textCols="12" :labelCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6"> </v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
ref="effcIdxNm"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="효율지표 명"
|
||||
valueNm="effcIdxNm"
|
||||
:readonly="true"
|
||||
:required="false"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pl-4">
|
||||
<InputText ref="effcIdxNm" :parentPrgmId="parentPrgmId" label="효율지표 명" valueNm="effcIdxNm"
|
||||
:readonly="true" :required="false" :textCols="12" :labelCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6"> </v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'지표종류'"
|
||||
:textCols="7"
|
||||
:required="false"
|
||||
:readonly="true"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-4">
|
||||
<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01" :label="'지표종류'"
|
||||
:textCols="12" :labelCols="12" :required="false" :readonly="true"
|
||||
@update:propsValue="selectValue01 = $event" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0 custom-title-4">지표연결정보</v-card-title>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
<component
|
||||
v-show="false"
|
||||
ref="EgrpPysclQtyPop"
|
||||
:is="'EgrpPysclQtyPop'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:item="EgrpPysclQtyPopItem"
|
||||
:labelContent="'물리량'"
|
||||
/>
|
||||
<component
|
||||
v-show="false"
|
||||
ref="GdIdxPop"
|
||||
:is="'GdIdxPop'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:item="GdIdxPopItem"
|
||||
:labelContent="'가이드지표'"
|
||||
/>
|
||||
<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
|
||||
<component v-show="false" ref="EgrpPysclQtyPop" :is="'EgrpPysclQtyPop'" :parentPrgmId="parentPrgmId"
|
||||
:item="EgrpPysclQtyPopItem" :labelContent="'물리량'" />
|
||||
<component v-show="false" ref="GdIdxPop" :is="'GdIdxPop'" :parentPrgmId="parentPrgmId" :item="GdIdxPopItem"
|
||||
:labelContent="'가이드지표'" />
|
||||
</div>
|
||||
<div class="px-5" style="height:calc(100% - 76px)">
|
||||
<div style="height:calc(100% - 76px)">
|
||||
<div ref="gridParent" style="height: calc(35vh);">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
/>
|
||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId" @getRowsData="getRowData" :innerTabGridInfo="innerTabGridInfo"
|
||||
:dataPath="sampleDataPath" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,8 +67,58 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'effcInfoGrid',
|
||||
sampleDataPath: {
|
||||
"effcInfoGrid": {
|
||||
data:
|
||||
[
|
||||
{
|
||||
"eqpmKindId": "펌프",
|
||||
"eqpmGrpId": "냉각수 시스템",
|
||||
"totMethNm": "평균값"
|
||||
},
|
||||
{
|
||||
"eqpmKindId": "모터",
|
||||
"eqpmGrpId": "공기압 시스템",
|
||||
"totMethNm": "최대값"
|
||||
},
|
||||
{
|
||||
"eqpmKindId": "밸브",
|
||||
"eqpmGrpId": "스팀 공급",
|
||||
"totMethNm": "합계"
|
||||
},
|
||||
{
|
||||
"eqpmKindId": "센서",
|
||||
"eqpmGrpId": "온도 제어",
|
||||
"totMethNm": "최소값"
|
||||
},
|
||||
{
|
||||
"eqpmKindId": "컴프레서",
|
||||
"eqpmGrpId": "에어 시스템",
|
||||
"totMethNm": "중앙값"
|
||||
}
|
||||
]
|
||||
|
||||
,
|
||||
column: [
|
||||
|
||||
{
|
||||
header: '대상설비종류',
|
||||
name: 'eqpmKindId',
|
||||
|
||||
},
|
||||
{
|
||||
header: '대상설비그룹',
|
||||
name: 'eqpmGrpId',
|
||||
},
|
||||
|
||||
{ header: '집계방법', name: 'totMethNm', align: 'center' },
|
||||
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
itemList: [],
|
||||
tagTpList: [],
|
||||
// detailList: myDetail,
|
||||
@ -355,7 +363,7 @@ export default {
|
||||
await this.setSelectValueList01();
|
||||
await this.gridInit();
|
||||
},
|
||||
search() {},
|
||||
search() { },
|
||||
async setSelectValueList01() {
|
||||
this.selectValueList01 = [
|
||||
{
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
>
|
||||
<span class="txt">설비 추가 정보</span>
|
||||
<span class="txt custom-title-4-new">설비 추가 정보</span>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
@ -20,6 +20,7 @@
|
||||
:editorGrid="true"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
@getRowsData="getRowData"
|
||||
:dataPath="dataPathMock"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,10 +52,24 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowDetailGrid',
|
||||
rowKey: null,
|
||||
edtingFinishFlag: 'Y',
|
||||
dataPathMock: {
|
||||
'rowDetailGrid' : {
|
||||
column: [
|
||||
{ header: '추가 정보', name: 'id', headerAlign: 'left' },
|
||||
{ header: 'Data 구분', name: 'lable', headerAlign: 'left' },
|
||||
{ header: '추가 정보 값', name: 'type', headerAlign: 'left' },
|
||||
// { header: '비고', name: 'note', headerAlign: 'left' }
|
||||
],
|
||||
data: dataPathDataExample,
|
||||
defaultRow: dataPathDataExample,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -393,4 +408,11 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
import { getPathDataExample } from '@/const/const'
|
||||
const dataPathDataExample = getPathDataExample({
|
||||
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
|
||||
lable: 'INCHEON 고온 냉동기 101호기 - 호로1',
|
||||
type: '사용', note: '-'
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,34 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
>
|
||||
<span class="txt">설비 상수 정보</span>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
<div class="d-flex justify-space-between align-center" style="height: 80px;">
|
||||
<span class="txt custom-title-4-new">설비 상수 정보</span>
|
||||
<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
|
||||
</div>
|
||||
<div ref="gridParent" style="height: calc(100vh - 800px);">
|
||||
<Grid
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
/>
|
||||
<div ref="gridParent" style="min-height: calc(100vh - 800px);">
|
||||
<Grid :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData" :innerTabGridInfo="innerTabGridInfo" :dataPath="dataPathMock" />
|
||||
</div>
|
||||
<div style="height: calc(100vh - 900px);">
|
||||
<component
|
||||
:is="'Form'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailList"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
<div style="min-height: calc(100vh - 900px);" class="mt-4">
|
||||
<component :is="'Form'" :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailList"
|
||||
@gridEditingFinish="gridEditingFinish" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -59,12 +41,28 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowEqpmConstGrid',
|
||||
detailList: myEqpmConstDetail,
|
||||
|
||||
inputList_emMapDiv: [],
|
||||
inputList_cmInOut: [],
|
||||
dataPathMock: {
|
||||
'rowEqpmConstGrid': {
|
||||
column: [
|
||||
{ header: '대상항목', name: 'id', headerAlign: 'left' },
|
||||
{ header: '에너지원 명', name: 'lable', headerAlign: 'left' },
|
||||
{ header: '대상 유형', name: 'type', headerAlign: 'left' },
|
||||
{ header: '물리량', name: 'note', headerAlign: 'left' },
|
||||
{ header: '계산여부', name: 'field1', headerAlign: 'left' },
|
||||
{ header: '분배율', name: 'field2', headerAlign: 'left' }
|
||||
],
|
||||
data: dataPathDataExample,
|
||||
defaultRow: dataPathDataExample,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -101,7 +99,7 @@ export default {
|
||||
this.detailList[2].eqpmKindId = val;
|
||||
}
|
||||
},
|
||||
selectedEqpmGrpId(val){
|
||||
selectedEqpmGrpId(val) {
|
||||
// if(!val){
|
||||
// this.detailList[2].eqpmGrpId = '';
|
||||
// }else{
|
||||
@ -332,7 +330,7 @@ export default {
|
||||
gridEditingFinish(data, bindingData) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
search() {},
|
||||
search() { },
|
||||
},
|
||||
};
|
||||
|
||||
@ -360,20 +358,16 @@ const myEqpmConstDetail = [
|
||||
label: '대상 유형',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pr-4',
|
||||
list: 'emMapDivList2',
|
||||
valueNm: 'objKind',
|
||||
itemText: 'commCdNm',
|
||||
itemValue: 'commCd',
|
||||
required: true,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
// 공백 처리
|
||||
type: 'Label',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
disabled: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'EgrpPysclQtyPop',
|
||||
@ -390,19 +384,32 @@ const myEqpmConstDetail = [
|
||||
required: true,
|
||||
openMode: 'CONST',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
eqpmGrpDisableFlag:true,
|
||||
// eqpmGrpId:''
|
||||
class: 'py-3 pl-4',
|
||||
eqpmGrpDisableFlag: true,
|
||||
// eqpmGrpId:'',
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
// 공백 처리
|
||||
type: 'Label',
|
||||
cols: 6,
|
||||
class: 'py-3',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
valueNm: 'pysclQtyNm',
|
||||
disabled: true,
|
||||
readonly: true,
|
||||
cols: 5,
|
||||
class: 'py-2',
|
||||
cols: 6,
|
||||
class: 'py-3 pt-1 pl-4',
|
||||
align: 'right',
|
||||
// class: 'py-2 d-none',
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
@ -410,12 +417,24 @@ const myEqpmConstDetail = [
|
||||
valueNm: 'pysclQtyVal',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pr-4',
|
||||
align: 'right',
|
||||
inputType: 'number',
|
||||
min: 0,
|
||||
max: 100,
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
];
|
||||
|
||||
import { getPathDataExample } from '@/const/const'
|
||||
const dataPathDataExample = getPathDataExample({
|
||||
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
|
||||
lable: 'INCHEON 고온 냉동기 101호기 - 호로1',
|
||||
type: '사용', note: '-',
|
||||
field1: '1111',
|
||||
field2: '2222',
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -4,24 +4,25 @@
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
>
|
||||
<span class="txt">설비 입출력 정보</span>
|
||||
<span class="txt custom-title-4-new">설비 입출력 정보</span>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
</div>
|
||||
<div ref="gridParent" style="height: calc(100vh - 800px);">
|
||||
<div ref="gridParent" style="min-height: calc(100vh - 800px);" >
|
||||
<!-- :is="loadGrid ? 'Grid' : null" -->
|
||||
<Grid
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
:dataPath="dataPathMock"
|
||||
/>
|
||||
</div>
|
||||
<div style="height: calc(100vh - 900px);">
|
||||
<div style="min-height: calc(100vh - 900px);" class="mt-4">
|
||||
<component
|
||||
:is="'Form'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@ -59,12 +60,28 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowEqpmIaoGrid',
|
||||
detailList: myEqpmIaoDetail,
|
||||
|
||||
inputList_emMapDiv: [],
|
||||
inputList_cmInOut: [],
|
||||
dataPathMock: {
|
||||
'rowEqpmIaoGrid' : {
|
||||
column: [
|
||||
{ header: '대상항목', name: 'id', headerAlign: 'left' },
|
||||
{ header: '에너지원 명', name: 'lable', headerAlign: 'left' },
|
||||
{ header: '대상 유형', name: 'type', headerAlign: 'left' },
|
||||
{ header: '물리량', name: 'note', headerAlign: 'left' },
|
||||
{ header: '계산여부', name: 'field1', headerAlign: 'left' },
|
||||
{ header: '분배율', name: 'field2', headerAlign: 'left' }
|
||||
],
|
||||
data: dataPathDataExample,
|
||||
defaultRow: dataPathDataExample,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -155,7 +172,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
// this.init();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
@ -421,22 +438,18 @@ const myEqpmIaoDetail = [
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '대상 유형',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pr-4',
|
||||
list: 'emMapDivList',
|
||||
// list: 'ercNmList',
|
||||
valueNm: 'objKind',
|
||||
itemText: 'commCdNm',
|
||||
itemValue: 'commCd',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
// 공백 처리
|
||||
type: 'Label',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
disabled: true,
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'ReadPlcPop',
|
||||
@ -444,63 +457,88 @@ const myEqpmIaoDetail = [
|
||||
valueNm: 'objId',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pl-4',
|
||||
required: true,
|
||||
bindNm: 'objNm',
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true,
|
||||
},
|
||||
{
|
||||
// 공백 처리
|
||||
type: 'Label',
|
||||
cols: 6,
|
||||
class: 'py-3',
|
||||
disabled: true,
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
valueNm: 'objNm',
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
cols: 5,
|
||||
class: 'py-2',
|
||||
cols: 6,
|
||||
class: 'py-3 pl-4 pt-1',
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'EvtObjPop',
|
||||
labelContent: '대상 항목',
|
||||
labelContent: '대상 항목 111',
|
||||
valueNm: 'objId',
|
||||
valueNm2: 'objNm',
|
||||
bindNm: 'objNm',
|
||||
disabled: true,
|
||||
required: true,
|
||||
cols: 6,
|
||||
class: 'py-2 d-none',
|
||||
labelCols: 4,
|
||||
textCols: 7,
|
||||
class: 'py-3 d-none',
|
||||
disableContent: true,
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
cols: 5,
|
||||
class: 'py-2 d-none',
|
||||
class: 'py-3 d-none',
|
||||
valueNm: 'objNm',
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '에너지원',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pr-4',
|
||||
list: 'ercNmList',
|
||||
valueNm: 'ercId',
|
||||
itemText: 'text',
|
||||
itemValue: 'value',
|
||||
required: false,
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '투입생산유형',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pl-4',
|
||||
list: 'cmInoutList',
|
||||
valueNm: 'inProdKind',
|
||||
itemText: 'commCdNm',
|
||||
itemValue: 'commCd',
|
||||
required: false,
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
@ -508,12 +546,15 @@ const myEqpmIaoDetail = [
|
||||
valueNm: 'distRt',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pr-4',
|
||||
align: 'right',
|
||||
inputType: 'number',
|
||||
min: 0,
|
||||
max: 100,
|
||||
required: false,
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
@ -521,9 +562,12 @@ const myEqpmIaoDetail = [
|
||||
valueNm: 'calcFg',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pl-4',
|
||||
value: { '1': true, '0': false },
|
||||
required: false,
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'EgrpPysclQtyPop',
|
||||
@ -541,19 +585,42 @@ const myEqpmIaoDetail = [
|
||||
required: false,
|
||||
openMode: 'TAG',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pr-4',
|
||||
eqpmGrpDisableFlag: true,
|
||||
// eqpmGrpId: '',
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
// 공백 처리
|
||||
type: 'Label',
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
disabled: true,
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
valueNm: 'pysclQtyNm',
|
||||
disabled: true,
|
||||
readonly: true,
|
||||
cols: 5,
|
||||
class: 'py-2',
|
||||
cols: 6,
|
||||
class: 'py-3 pt-0 pr-4',
|
||||
align: 'right',
|
||||
// class: 'py-2 d-none',
|
||||
textCols: 12,
|
||||
labelCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
];
|
||||
|
||||
import { getPathDataExample } from '@/const/const'
|
||||
const dataPathDataExample = getPathDataExample({
|
||||
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
|
||||
lable: 'INCHEON 고온 냉동기 101호기 - 호로1',
|
||||
type: '사용', note: '-',
|
||||
field1: '1111',
|
||||
field2: '2222',
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -4,12 +4,13 @@
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row>
|
||||
<v-col :cols="8">
|
||||
<v-col :cols="8" style="padding:0px">
|
||||
<!-- 조회기간 -->
|
||||
<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" />
|
||||
</v-col>
|
||||
<v-col cols="4" class="d-flex justify-end align-center">
|
||||
<Buttons
|
||||
style="margin-top: 25px;"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:btnActionsFnc="btnActions"
|
||||
@ -22,8 +23,10 @@
|
||||
<v-row class="search-box" align="center" no-gutters style="height: 44px;">
|
||||
<v-col :cols="4">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
small
|
||||
:class="['mr-1','icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
월별 요금 정보
|
||||
</label>
|
||||
@ -51,8 +54,13 @@
|
||||
<v-row class="search-box" align="center" no-gutters style="height: 44px;">
|
||||
<v-col :cols="4">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
<!-- <v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
> -->
|
||||
<v-icon
|
||||
small
|
||||
:class="['mr-1','icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
월별 요금 정보
|
||||
</label>
|
||||
@ -189,7 +197,7 @@ export default {
|
||||
bodyHeight: gridHeight,
|
||||
minBodyHeight: gridHeight,
|
||||
header: {
|
||||
height: 28,
|
||||
height: 38,
|
||||
},
|
||||
rowHeight: 29,
|
||||
minRowHeight: 29,
|
||||
@ -263,6 +271,63 @@ export default {
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
const res = [
|
||||
{
|
||||
"comId": "COM001",
|
||||
"ercId": "ERC001",
|
||||
"objMm": "202507",
|
||||
"objYm": "2025-07",
|
||||
"unitPrce": 120.5,
|
||||
"peakPow": 450,
|
||||
"baseChrg": 30000,
|
||||
"notiChrg": 32500,
|
||||
"rmrk": "Standard summer rate",
|
||||
"blocId": "BLOC001",
|
||||
"regUserNo": "USER001",
|
||||
"regDttm": "2025-07-01T09:00:00",
|
||||
"procUserNo": "USER002",
|
||||
"procDttm": "2025-07-15T14:30:00"
|
||||
},
|
||||
{
|
||||
"comId": "COM002",
|
||||
"ercId": "ERC002",
|
||||
"objMm": "202507",
|
||||
"objYm": "2025-07",
|
||||
"unitPrce": 98.75,
|
||||
"peakPow": 300,
|
||||
"baseChrg": 25000,
|
||||
"notiChrg": 27000,
|
||||
"rmrk": "Reduced rate for solar",
|
||||
"blocId": "BLOC002",
|
||||
"regUserNo": "USER003",
|
||||
"regDttm": "2025-07-02T10:15:00",
|
||||
"procUserNo": "USER004",
|
||||
"procDttm": "2025-07-16T11:45:00"
|
||||
},
|
||||
{
|
||||
"comId": "COM003",
|
||||
"ercId": "ERC003",
|
||||
"objMm": "202507",
|
||||
"objYm": "2025-07",
|
||||
"unitPrce": 110.0,
|
||||
"peakPow": 400,
|
||||
"baseChrg": 28000,
|
||||
"notiChrg": 29500,
|
||||
"rmrk": "Geothermal adjustment",
|
||||
"blocId": "BLOC003",
|
||||
"regUserNo": "USER005",
|
||||
"regDttm": "2025-07-03T08:45:00",
|
||||
"procUserNo": "USER006",
|
||||
"procDttm": "2025-07-17T13:20:00"
|
||||
}
|
||||
]
|
||||
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: res,
|
||||
});
|
||||
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async btnActions(action) {
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
:editorGrid="true"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
@getRowsData="getRowData"
|
||||
:selectedRowDataWatchFlag="true"
|
||||
:dataPath="dataPathMock"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,10 +55,23 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowDetailGrid',
|
||||
rowKey: null,
|
||||
edtingFinishFlag: 'Y',
|
||||
dataPathMock: {
|
||||
"rowDetailGrid": {
|
||||
column: [
|
||||
{ header: '검침 대상 ID', name: 'readObjId', align: 'left' },
|
||||
{ header: '검침 대상 명', name: 'readObjNm', align: 'left' },
|
||||
{ header: '검침 대상 유형', name: 'readObjKind', align: 'left' },
|
||||
{ header: '그룹', name: 'grpCd', align: 'left' },
|
||||
],
|
||||
data: dataPathDataExample,
|
||||
defaultRow: dataPathDataExample,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -261,7 +276,7 @@ export default {
|
||||
{ header: '검침 대상 ID', name: 'readObjId', hidden: true },
|
||||
{
|
||||
header: '추가 정보',
|
||||
name: 'addInfoId',
|
||||
name: 'addInfoId',
|
||||
align: 'left',
|
||||
formatter({ value }) {
|
||||
let retVal = '';
|
||||
@ -446,4 +461,25 @@ export default {
|
||||
search() {},
|
||||
},
|
||||
};
|
||||
const dataPathDataExample = [
|
||||
{
|
||||
readObjId: 'OBJ001',
|
||||
readObjNm: '서울 본사',
|
||||
readObjKind: 'TYPE01',
|
||||
grpCd: 'GRP01',
|
||||
},
|
||||
{
|
||||
readObjId: 'OBJ002',
|
||||
readObjNm: '부산 지사',
|
||||
readObjKind: 'TYPE02',
|
||||
grpCd: 'GRP02',
|
||||
},
|
||||
{
|
||||
readObjId: 'OBJ003',
|
||||
readObjNm: '대전 공장',
|
||||
readObjKind: 'TYPE03',
|
||||
grpCd: 'GRP01',
|
||||
}
|
||||
];
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
class="d-flex justify-space-between"
|
||||
|
||||
>
|
||||
<span class="txt">검침개소 추가 정보</span>
|
||||
<v-card-title class="px-0 pt-0 custom-title-4">검침개소 추가 정보</v-card-title>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
</div>
|
||||
<div ref="gridParent" style="height: calc(100vh - 520px);">
|
||||
<div ref="gridParent">
|
||||
<Grid
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:editorGrid="true"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
@getRowsData="getRowData"
|
||||
:dataPath="addInfoTabData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,10 +53,65 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowDetailGrid',
|
||||
rowKey: null,
|
||||
edtingFinishFlag: 'Y',
|
||||
addInfoTabData: {
|
||||
"rowDetailGrid": {
|
||||
data: [
|
||||
|
||||
|
||||
|
||||
{
|
||||
readPlcNm: '서울 본사',
|
||||
plcKind: '전기',
|
||||
useFg: '1',
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
column: [
|
||||
// { header: '회사 ID', name: 'comId', hidden: true },
|
||||
{
|
||||
header: '검침개소명',
|
||||
name: 'readPlcNm',
|
||||
align: 'left',
|
||||
minWidth: 400,
|
||||
},
|
||||
{
|
||||
header: '개소 종류',
|
||||
name: 'plcKind',
|
||||
minWidth: 100,
|
||||
align: 'center',
|
||||
// formatter({ value }) {
|
||||
// let retVal = '';
|
||||
// const newValue = _this.pageData.plcKindList.filter(
|
||||
// item => item.commCd == value,
|
||||
// );
|
||||
// if (newValue.length > 0) {
|
||||
// retVal = newValue[0].commCdNm;
|
||||
// }
|
||||
// return retVal;
|
||||
// },
|
||||
},
|
||||
{
|
||||
header: '사용 여부',
|
||||
name: 'useFg',
|
||||
minWidth: 100,
|
||||
align: 'center',
|
||||
// formatter({ value }) {
|
||||
// value = value === true ? '1' : '0';
|
||||
// const newValue = _this.pageData.useFgList.filter(
|
||||
// item => item.commCd == value,
|
||||
// );
|
||||
// return newValue[0].commCdNm;
|
||||
// },
|
||||
},
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -123,88 +178,88 @@ export default {
|
||||
value: myOptions,
|
||||
});
|
||||
|
||||
const _this = this;
|
||||
let useFgSelectList = [];
|
||||
this.pageData.useFgList.forEach(item => {
|
||||
const it = { text: item.commCdNm, value: item.commCd };
|
||||
useFgSelectList.push(it);
|
||||
});
|
||||
let addInfoList = [];
|
||||
this.pageData.addInfoList.forEach(item => {
|
||||
const it = { text: item.addInfoNm, value: item.addInfoId };
|
||||
addInfoList.push(it);
|
||||
});
|
||||
let addInfoDataKindList = [];
|
||||
this.pageData.addInfoDataKindList.forEach(item => {
|
||||
const it = { text: item.commCdNm, value: item.commCd };
|
||||
addInfoDataKindList.push(it);
|
||||
});
|
||||
// const _this = this;
|
||||
// let useFgSelectList = [];
|
||||
// this.pageData.useFgList.forEach(item => {
|
||||
// const it = { text: item.commCdNm, value: item.commCd };
|
||||
// useFgSelectList.push(it);
|
||||
// });
|
||||
// let addInfoList = [];
|
||||
// this.pageData.addInfoList.forEach(item => {
|
||||
// const it = { text: item.addInfoNm, value: item.addInfoId };
|
||||
// addInfoList.push(it);
|
||||
// });
|
||||
// let addInfoDataKindList = [];
|
||||
// this.pageData.addInfoDataKindList.forEach(item => {
|
||||
// const it = { text: item.commCdNm, value: item.commCd };
|
||||
// addInfoDataKindList.push(it);
|
||||
// });
|
||||
|
||||
const myColumns = [
|
||||
{ header: '회사 ID', name: 'comId', hidden: true },
|
||||
{ header: '검침개소 번호', name: 'readPlcId', hidden: true },
|
||||
{
|
||||
header: '추가 정보',
|
||||
name: 'addInfoId',
|
||||
align: 'left',
|
||||
formatter({ value }) {
|
||||
let retVal = '';
|
||||
const newValue = addInfoList.filter(item => item.value == value);
|
||||
if (newValue.length > 0) {
|
||||
retVal = newValue[0].text;
|
||||
}
|
||||
return retVal;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Data 구분',
|
||||
name: 'addInfoDataKind',
|
||||
align: 'center',
|
||||
formatter({ value }) {
|
||||
let retVal = '';
|
||||
const newValue = addInfoDataKindList.filter(
|
||||
item => item.value == value,
|
||||
);
|
||||
if (newValue.length > 0) {
|
||||
retVal = newValue[0].text;
|
||||
}
|
||||
return retVal;
|
||||
},
|
||||
// editor: {
|
||||
// type: "select",
|
||||
// options: {
|
||||
// listItems: addInfoDataKindList
|
||||
// }
|
||||
// }
|
||||
},
|
||||
{
|
||||
header: '숫자 값',
|
||||
name: 'addInfoNumVal',
|
||||
align: 'right',
|
||||
editor: 'text',
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
header: '문자 값',
|
||||
name: 'addInfoTxtVal',
|
||||
align: 'left',
|
||||
editor: 'text',
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
header: '추가 정보 값',
|
||||
name: 'addInfoVal',
|
||||
align: 'center',
|
||||
renderer: {
|
||||
type: NewCustomRenderer,
|
||||
},
|
||||
editor: {
|
||||
type: NewCustomEditor,
|
||||
},
|
||||
formatter(data) {
|
||||
return data.row.addInfoDataKind;
|
||||
},
|
||||
},
|
||||
// const myColumns = [
|
||||
// { header: '회사 ID', name: 'comId', hidden: true },
|
||||
// { header: '검침개소 번호', name: 'readPlcId', hidden: true },
|
||||
// {
|
||||
// header: '추가 정보',
|
||||
// name: 'addInfoId',
|
||||
// align: 'left',
|
||||
// formatter({ value }) {
|
||||
// let retVal = '';
|
||||
// const newValue = addInfoList.filter(item => item.value == value);
|
||||
// if (newValue.length > 0) {
|
||||
// retVal = newValue[0].text;
|
||||
// }
|
||||
// return retVal;
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// header: 'Data 구분',
|
||||
// name: 'addInfoDataKind',
|
||||
// align: 'center',
|
||||
// formatter({ value }) {
|
||||
// let retVal = '';
|
||||
// const newValue = addInfoDataKindList.filter(
|
||||
// item => item.value == value,
|
||||
// );
|
||||
// if (newValue.length > 0) {
|
||||
// retVal = newValue[0].text;
|
||||
// }
|
||||
// return retVal;
|
||||
// },
|
||||
// // editor: {
|
||||
// // type: "select",
|
||||
// // options: {
|
||||
// // listItems: addInfoDataKindList
|
||||
// // }
|
||||
// // }
|
||||
// },
|
||||
// {
|
||||
// header: '숫자 값',
|
||||
// name: 'addInfoNumVal',
|
||||
// align: 'right',
|
||||
// editor: 'text',
|
||||
// hidden: true,
|
||||
// },
|
||||
// {
|
||||
// header: '문자 값',
|
||||
// name: 'addInfoTxtVal',
|
||||
// align: 'left',
|
||||
// editor: 'text',
|
||||
// hidden: true,
|
||||
// },
|
||||
// {
|
||||
// header: '추가 정보 값',
|
||||
// name: 'addInfoVal',
|
||||
// align: 'center',
|
||||
// renderer: {
|
||||
// type: NewCustomRenderer,
|
||||
// },
|
||||
// editor: {
|
||||
// type: NewCustomEditor,
|
||||
// },
|
||||
// formatter(data) {
|
||||
// return data.row.addInfoDataKind;
|
||||
// },
|
||||
// },
|
||||
//{ header: "추가 정보 값", name: "addInfoVal", align: "center" , editor: "text",
|
||||
// formatter({ value, row , column}) {
|
||||
// console.log("addInfoVal row : ", row);
|
||||
@ -235,16 +290,16 @@ export default {
|
||||
}
|
||||
}
|
||||
},*/
|
||||
{ header: '등록 사용자', name: 'regUserNo', hidden: true },
|
||||
{ header: '등록 일자', name: 'regDttm', hidden: true },
|
||||
{ header: '수정 사용자', name: 'procUserNo', hidden: true },
|
||||
{ header: '수정 일자', name: 'procDttm', hidden: true },
|
||||
];
|
||||
// { header: '등록 사용자', name: 'regUserNo', hidden: true },
|
||||
// { header: '등록 일자', name: 'regDttm', hidden: true },
|
||||
// { header: '수정 사용자', name: 'procUserNo', hidden: true },
|
||||
// { header: '수정 일자', name: 'procDttm', hidden: true },
|
||||
// ];
|
||||
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
// this.setGridColumn({
|
||||
// gridKey: this.gridName,
|
||||
// value: myColumns,
|
||||
// });
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
|
||||
@ -1,36 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
>
|
||||
<span class="txt">가상 검침 정보</span>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailReadPlcImgList"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
<div class="d-flex justify-space-between">
|
||||
<v-card-title class="px-0 pt-0 custom-title-4">가상 검침 정보</v-card-title>
|
||||
<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailReadPlcImgList"
|
||||
:btnActionsFnc="btnActions" />
|
||||
</div>
|
||||
|
||||
<div ref="gridParent" style="height: calc((100vh - 520px) /2);">
|
||||
<Grid
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
/>
|
||||
<Grid :ref="gridName" :gridName="gridName" :parentPrgmId="parentPrgmId" @getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo" :dataPath="imgInfoTabData" />
|
||||
</div>
|
||||
<div ref="formParent" style="height: calc((100vh - 520px) /2);">
|
||||
<component
|
||||
:is="'Form'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailReadPlcImgList"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
<div ref="formParent">
|
||||
<component :is="'Form'" :parentPrgmId="parentPrgmId" :bindingData="gridName"
|
||||
:detailList="detailReadPlcImgList" @gridEditingFinish="gridEditingFinish" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -62,9 +44,26 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowReadPlcImgGrid',
|
||||
detailReadPlcImgList: myReadPlcImgDetail,
|
||||
imgInfoTabData: {
|
||||
"rowReadPlcImgGrid": {
|
||||
data:
|
||||
[
|
||||
{ "objReadPlcId": "1001", "objReadPlcNm": "서울역", "distRt": 12 },
|
||||
{ "objReadPlcId": "1002", "objReadPlcNm": "강남역", "distRt": 8 },
|
||||
{ "objReadPlcId": "1003", "objReadPlcNm": "잠실역", "distRt": 15 },
|
||||
]
|
||||
,
|
||||
column: [
|
||||
{ header: '대상 검침개소 번호', name: 'objReadPlcId', align: 'center' },
|
||||
{ header: '대상 검침개소명', name: 'objReadPlcNm', align: 'left' },
|
||||
{ header: '분배율(1~100)', name: 'distRt', align: 'right' },
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -223,7 +222,7 @@ export default {
|
||||
gridEditingFinish(data, bindingData) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
search() {},
|
||||
search() { },
|
||||
},
|
||||
};
|
||||
|
||||
@ -235,15 +234,11 @@ const myReadPlcImgDetail = [
|
||||
valueNm: 'objReadPlcId',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
class: 'py-3 pr-4 pb-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
valueNm: 'objReadPlcNm',
|
||||
readonly: true,
|
||||
cols: 5,
|
||||
class: 'py-2',
|
||||
iconShow:true
|
||||
},
|
||||
{
|
||||
type: 'InputNumber',
|
||||
@ -251,11 +246,25 @@ const myReadPlcImgDetail = [
|
||||
valueNm: 'distRt',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pl-4',
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
inputType: 'number',
|
||||
min: 1,
|
||||
max: 100,
|
||||
required: true,
|
||||
iconShow:true
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
valueNm: 'objReadPlcNm',
|
||||
readonly: true,
|
||||
cols: 6,
|
||||
textCols: 12,
|
||||
class: 'pt-1 py-3 pr-4',
|
||||
},
|
||||
{
|
||||
showValue: false
|
||||
},
|
||||
{
|
||||
type: 'SelectBox',
|
||||
@ -263,11 +272,14 @@ const myReadPlcImgDetail = [
|
||||
valueNm: 'ddctKind',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
class: 'py-3 pr-4',
|
||||
list: 'ddctKindList',
|
||||
itemText: 'commCdNm',
|
||||
itemValue: 'commCd',
|
||||
required: true,
|
||||
iconShow: true
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
@ -1,35 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
>
|
||||
<span class="txt">검침개소 TAG 연결 정보</span>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailReadPlcTagList"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
<div class="d-flex justify-space-between" >
|
||||
<v-card-title class="px-0 pt-0 custom-title-4">검침개소 TAG 연결 정보</v-card-title>
|
||||
<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailReadPlcTagList"
|
||||
:btnActionsFnc="btnActions" />
|
||||
</div>
|
||||
<div ref="gridParent" style="height: calc((100vh - 520px) /2);">
|
||||
<Grid
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
/>
|
||||
<Grid :ref="gridName" :gridName="gridName" :parentPrgmId="parentPrgmId" @getRowsData="getRowData"
|
||||
:innerTabGridInfo="innerTabGridInfo" :dataPath="tagRelTabData" />
|
||||
</div>
|
||||
<div ref="formParent" style="height: calc((100vh - 520px) /2);">
|
||||
<component
|
||||
:is="'Form'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:detailList="detailReadPlcTagList"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
<div ref="formParent" >
|
||||
<component :is="'Form'" :parentPrgmId="parentPrgmId" :bindingData="gridName"
|
||||
:detailList="detailReadPlcTagList" @gridEditingFinish="gridEditingFinish" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -64,6 +46,78 @@ export default {
|
||||
loadGrid: false,
|
||||
gridName: 'rowReadPlcTagRelGrid',
|
||||
detailReadPlcTagList: myReadPlcTagDetail,
|
||||
tagRelTabData: {
|
||||
"rowReadPlcTagRelGrid": {
|
||||
data:
|
||||
[
|
||||
|
||||
{
|
||||
"tagNm": "TAG_001",
|
||||
"ercId": "전기",
|
||||
"distRt": 10,
|
||||
"reprTagFg": "1",
|
||||
"useFg": "Y",
|
||||
"rmrk": "기본 설정",
|
||||
"tagId": "TAG_001"
|
||||
},
|
||||
{
|
||||
"tagNm": "TAG_002",
|
||||
"ercId": "가스",
|
||||
"distRt": 15,
|
||||
"reprTagFg": "0",
|
||||
"useFg": "Y",
|
||||
"rmrk": "",
|
||||
"tagId": "TAG_002"
|
||||
},
|
||||
{
|
||||
"tagNm": "TAG_003",
|
||||
"ercId": "수도",
|
||||
"distRt": 8,
|
||||
"reprTagFg": "0",
|
||||
"useFg": "N",
|
||||
"rmrk": "테스트용",
|
||||
"tagId": "TAG_003"
|
||||
},
|
||||
|
||||
]
|
||||
,
|
||||
column: [
|
||||
{ header: 'TAG 명', name: 'tagNm', align: 'left' },
|
||||
{
|
||||
header: '에너지원',
|
||||
name: 'ercId',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
header: '분배율(1~100)',
|
||||
name: 'distRt',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
header: '대표 TAG 여부',
|
||||
name: 'reprTagFg',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
formatter({ value }) {
|
||||
return value == '1' ? '예' : '아니오';
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '사용여부',
|
||||
name: 'useFg',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
|
||||
},
|
||||
{ header: '비고', name: 'rmrk', align: 'left', width: 100 },
|
||||
{ header: 'TAG ID', name: 'tagId', align: 'center', hidden: true },
|
||||
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -328,7 +382,7 @@ export default {
|
||||
gridEditingFinish(data, bindingData) {
|
||||
this.$refs[this.gridName].editingFinish(data);
|
||||
},
|
||||
search() {},
|
||||
search() { },
|
||||
},
|
||||
};
|
||||
|
||||
@ -341,60 +395,81 @@ const myReadPlcTagDetail = [
|
||||
valueNm2: 'tagNm',
|
||||
disabled: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
valueNm: 'tagNm',
|
||||
readonly: true,
|
||||
cols: 5,
|
||||
class: 'py-2',
|
||||
class: 'pr-4 pb-2 py-3',
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
|
||||
{
|
||||
type: 'SelectBox',
|
||||
label: '에너지원',
|
||||
valueNm: 'ercId',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'pl-4 py-3',
|
||||
list: 'ercNmList',
|
||||
itemText: 'text',
|
||||
itemValue: 'value',
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
label: '대표 TAG 여부',
|
||||
valueNm: 'reprTagFg',
|
||||
disabled: false,
|
||||
type: 'InputText',
|
||||
valueNm: 'tagNm',
|
||||
readonly: true,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
value: { '1': true, '0': false },
|
||||
textCols: 12,
|
||||
class: 'pt-1 py-3 pr-4',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
showValue: false,
|
||||
},
|
||||
{
|
||||
type: 'InputNumber',
|
||||
label: '분배율(1~100)',
|
||||
valueNm: 'distRt',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pr-4',
|
||||
inputType: 'number',
|
||||
min: 1,
|
||||
max: 100,
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'CheckBox',
|
||||
label: '대표 TAG 여부',
|
||||
valueNm: 'reprTagFg',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-3 pl-4',
|
||||
value: { '1': true, '0': false },
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
|
||||
{
|
||||
type: 'CheckBox',
|
||||
label: '사용여부',
|
||||
valueNm: 'useFg',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pr-4',
|
||||
value: { '1': true, '0': false },
|
||||
required: true,
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
{
|
||||
type: 'InputText',
|
||||
@ -402,8 +477,11 @@ const myReadPlcTagDetail = [
|
||||
valueNm: 'rmrk',
|
||||
disabled: false,
|
||||
cols: 6,
|
||||
class: 'py-2',
|
||||
class: 'py-3 pl-4',
|
||||
inputType: 'string',
|
||||
labelCols: 12,
|
||||
textCols: 12,
|
||||
iconShow: true
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
@ -1,28 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex justify-space-between align-center"
|
||||
style="height: 80px;"
|
||||
>
|
||||
<span class="txt">TAG 추가 정보</span>
|
||||
<v-card class="pb-5">
|
||||
<v-card-title class="d-flex justify-space-between align-end">
|
||||
<span class="tit ft-size_20 ft-weight_600">TAG 추가 정보</span>
|
||||
<Buttons
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="gridName"
|
||||
:btnActionsFnc="btnActions"
|
||||
/>
|
||||
</div>
|
||||
<div ref="gridParent" style="height: calc(100vh - 520px);">
|
||||
<Grid
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:editorGrid="true"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
@getRowsData="getRowData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<div
|
||||
ref="gridParent"
|
||||
class="w100"
|
||||
style="height: calc(100vh - 520px);"
|
||||
>
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:editorGrid="true"
|
||||
:innerTabGridInfo="innerTabGridInfo"
|
||||
@getRowsData="getRowData"
|
||||
:dataPath="dataPathMock"
|
||||
/>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
@ -47,10 +51,22 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowDetailGrid',
|
||||
rowKey: null,
|
||||
edtingFinishFlag: 'Y',
|
||||
dataPathMock: {
|
||||
"rowDetailGrid": {
|
||||
column: [
|
||||
{header: '추가 정보',name: 'addInfoId'},
|
||||
{header: 'Data 구분',name: 'addInfoDataKind',align: 'center'},
|
||||
{header: '추가 정보 값',name: 'addInfoVal',align: 'center', renderer: {type: NewCustomRenderer},editor: {type: NewCustomEditor},formatter(data) {return data.row.addInfoDataKind;},}
|
||||
],
|
||||
data: dataPathDataExample,
|
||||
option: {
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -102,10 +118,10 @@ export default {
|
||||
bodyHeight: gridHeight,
|
||||
minBodyHeight: gridHeight,
|
||||
header: {
|
||||
height: 28,
|
||||
height: 38,
|
||||
},
|
||||
rowHeight: 29,
|
||||
minRowHeight: 29,
|
||||
rowHeight: 22,
|
||||
minRowHeight: 22,
|
||||
selectionUnit: 'row',
|
||||
editingEvent: 'click',
|
||||
};
|
||||
@ -428,4 +444,37 @@ export default {
|
||||
search() {},
|
||||
},
|
||||
};
|
||||
const dataPathDataExample =
|
||||
[
|
||||
{
|
||||
addInfoId:"경보 여부",
|
||||
addInfoDataKind:"FG",
|
||||
addInfoVal:"1"
|
||||
},
|
||||
{
|
||||
addInfoId:"예상 피크전력 여부",
|
||||
addInfoDataKind:"FG",
|
||||
addInfoVal:"0"
|
||||
},
|
||||
{
|
||||
addInfoId:"피크전력 여부",
|
||||
addInfoDataKind:"FG",
|
||||
addInfoVal:"1"
|
||||
},
|
||||
{
|
||||
addInfoId:"TAG 채널",
|
||||
addInfoDataKind:"숫자",
|
||||
addInfoVal:"채널"
|
||||
},
|
||||
{
|
||||
addInfoId:"PLC IP",
|
||||
addInfoDataKind:"문자",
|
||||
addInfoVal:"채널"
|
||||
},
|
||||
{
|
||||
addInfoId:"PLC 포트",
|
||||
addInfoDataKind:"숫자",
|
||||
addInfoVal:"채널"
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
@ -65,7 +65,7 @@ export default {
|
||||
const blankWidgetData = {};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -229,7 +229,7 @@ export default {
|
||||
const caldWidgetData = {};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped >
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -347,7 +347,7 @@ const peakWidgetData = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -339,7 +339,7 @@ const ComcUseReptWidgetData = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -328,7 +328,7 @@ const ElecQualWidget = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -338,7 +338,7 @@ const ElecReadReptWidgetData = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -401,7 +401,7 @@ const ElecUseReptWidgetData = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -656,7 +656,7 @@ const EnrgUseRsltWidgetData = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -463,7 +463,7 @@ const EnrgUseReptWidgetData = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -696,7 +696,7 @@ const EnrgUseRsltWidgetData = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
@ -338,7 +338,7 @@ const gasReadReptWidgetData = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user