fixbug ui 20 21

This commit is contained in:
Vu Trung Kien/(Vu Trung Kien)/현장대리인/SK
2025-07-31 16:18:33 +09:00
parent f9643f46a0
commit 34d5a1eeb7
8 changed files with 142 additions and 124 deletions

View File

@ -9,7 +9,7 @@
</label> </label>
</v-col> </v-col>
<v-col :cols="label ? textCols : ''"> <v-col :cols="label ? textCols : ''">
<div class="datepicker-container"> <div :class="['datepicker-container', customClass]" >
<v-text-field <v-text-field
id="startpicker" id="startpicker"
ref="startpicker" ref="startpicker"
@ -79,6 +79,10 @@ export default {
require: false, require: false,
default: 8, default: 8,
}, },
customClass: {
type: String,
require: false,
},
}, },
data() { data() {
return { return {

View File

@ -107,8 +107,7 @@ export default {
header: { header: {
height: 38, height: 38,
}, },
rowHeight: 22,
minRowHeight: 22,
selectionUnit: 'row', selectionUnit: 'row',
editingEvent: 'click', editingEvent: 'click',
}; };
@ -269,7 +268,7 @@ export default {
{ {
header: 'Data 구분', header: 'Data 구분',
name: 'addInfoDataKind', name: 'addInfoDataKind',
align: 'center', align: 'left',
formatter({ value }) { formatter({ value }) {
let retVal = ''; let retVal = '';
const newValue = addInfoDataKindList.filter( const newValue = addInfoDataKindList.filter(

View File

@ -359,7 +359,7 @@ const myDetail = [
label: '설비종류 ID', label: '설비종류 ID',
valueNm: 'eqpmKindId', valueNm: 'eqpmKindId',
cols: 6, cols: 6,
class: 'py-2 pr-4', class: 'py-2 pr-4 pt-1',
iconShow: true, iconShow: true,
required: false, required: false,
readonly: true, readonly: true,
@ -373,7 +373,7 @@ const myDetail = [
valueNm: 'eqpmKindNm', valueNm: 'eqpmKindNm',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2 pl-4', class: 'py-2 pl-4 pt-1',
iconShow: true, iconShow: true,
required: true, required: true,
labelCols: 12, labelCols: 12,

View File

@ -461,7 +461,7 @@ const myDetail = [
valueNm: 'eqpmGrpId', valueNm: 'eqpmGrpId',
disabled: true, disabled: true,
cols: 6, cols: 6,
class: 'py-2 pr-4', class: 'py-2 pr-4 pt-1',
required: false, required: false,
iconShow: true, iconShow: true,
labelCols: 12, labelCols: 12,
@ -474,7 +474,7 @@ const myDetail = [
valueNm: 'eqpmGrpNm', valueNm: 'eqpmGrpNm',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2 pl-4', class: 'py-2 pl-4 pt-1',
required: true, required: true,
iconShow: true, iconShow: true,
labelCols: 12, labelCols: 12,

View File

@ -16,7 +16,8 @@
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<!-- 대상일 --> <!-- 대상일 -->
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'" :textCols="12" /> <component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'" :textCols="12"
customClass="datepicker-large" />
</v-col> </v-col>
<v-col :cols="3" class="d-flex align-end justify-end text-right"> <v-col :cols="3" class="d-flex align-end justify-end text-right">
<BtnExcelDownload class="mr-1" :parentPrgmId="myPrgmId" :gridName="gridName" type="primary" <BtnExcelDownload class="mr-1" :parentPrgmId="myPrgmId" :gridName="gridName" type="primary"
@ -391,6 +392,7 @@ export default {
resKey: 'pastRslPageTotal', resKey: 'pastRslPageTotal',
sendParam: sendParams sendParam: sendParams
}); });
this.totalCount = res2[0].totalcount; this.totalCount = res2[0].totalcount;
this.setGridData({ this.setGridData({

View File

@ -1,61 +1,43 @@
<template> <template>
<div class="l-layout"> <div class="l-layout">
<CommonPageTitle/>
<v-row ref="searchFilter"> <v-row ref="searchFilter">
<v-col :cols="12"> <v-col :cols="12">
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="center" no-gutters> <v-row align="center" no-gutters>
<v-col :cols="3"> <v-col :cols="3">
<!-- 사업장 --> <!-- 사업장 -->
<component <component :is="'SelectBlocMstr'" ref="SelectBlocMstr" :parentPrgmId="myPrgmId"
:is="'SelectBlocMstr'" :textCols="12" customClass="select-large" />
ref="SelectBlocMstr"
:parentPrgmId="myPrgmId"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<component <component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'측정 Data 유형'"
:is="'selectCodeList'" dataKey="searchReadDataType" :sendParam="{ commGrpCd: 'EM_READ_DATA_TYPE', useFg: '1' }"
:parentPrgmId="myPrgmId" :addAll="true" :textCols="12" customClass="select-large" />
:label="'측정 Data 유형'"
dataKey="searchReadDataType"
:sendParam="{ commGrpCd: 'EM_READ_DATA_TYPE', useFg: '1' }"
:addAll="true"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<component <component :is="'SelectReadObj'" :parentPrgmId="myPrgmId" :label="'측정대상'"
:is="'SelectReadObj'" dataKey="searchReadObj" :sendParam="{ useFg: '1' }" :labelCols="12" :textCols="12"
:parentPrgmId="myPrgmId" :addAll="true" customClass="select-large" />
:label="'측정대상'"
dataKey="searchReadObj"
:sendParam="{ useFg: '1' }"
:addAll="true"
/>
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
</v-col> </v-col>
</v-row> </v-row>
<v-row align="center" no-gutters> <v-row align="end" no-gutters>
<v-col :cols="3"> <v-col :cols="3">
<component <component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'" dataKey="useFg"
:is="'selectCodeList'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true" :textCols="12"
:parentPrgmId="myPrgmId" customClass="select-large" />
:label="'사용여부'"
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
/>
</v-col> </v-col>
<v-col :cols="6"> <v-col :cols="3">
<InputText <InputText :parentPrgmId="myPrgmId" label="TAG ID" valueNm="tagId" :labelCols="12"
:parentPrgmId="myPrgmId" :textCols="12" :searchOption="true" customClass="input-large" />
label="TAG명" </v-col>
valueNm="tagNm" <v-col :cols="3">
:labelCols="2" <InputText :parentPrgmId="myPrgmId" label="TAG명" valueNm="tagNm" :labelCols="12"
:textCols="9" :textCols="12" :searchOption="true" customClass="input-large" />
:searchOption="true" </v-col>
/> <v-col :cols="3" class="d-flex align-end justify-end text-right">
<BtnSearch @click="search" size="large" />
</v-col> </v-col>
</v-row> </v-row>
</v-card> </v-card>
@ -66,63 +48,33 @@
<v-card class="pb-5"> <v-card class="pb-5">
<v-card-title class="d-flex justify-space-between align-end"> <v-card-title class="d-flex justify-space-between align-end">
<span class="tit ft-size_20 ft-weight_600">TAG 정보</span> <span class="tit ft-size_20 ft-weight_600">TAG 정보</span>
<Buttons <Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:parentPrgmId="myPrgmId" :btnActionsFnc="btnActions" />
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
</v-card-title> </v-card-title>
<v-card-actions> <v-card-actions>
<div <div ref="gridParent" class="w100" style="height: calc(100vh - 400px)">
ref="gridParent" <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
class="w100" :parentPrgmId="myPrgmId" @getRowsData="getRowData"
style="height: calc(100vh - 360px)" @sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true" />
>
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true"
/>
</div> </div>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-col> </v-col>
<v-col :cols="7" class="h100"> <v-col :cols="7" class="">
<v-card class="pb-5"> <v-card class="pb-5">
<v-card-title>TAG 상세</v-card-title> <v-card-title>TAG 상세</v-card-title>
<div class="px-5" style="height:calc(100% - 70px)"> <div class="px-5" style="height:calc(100% - 70px)">
<v-tabs v-model="tab"> <v-tabs v-model="tab">
<v-tab <v-tab v-for="item in items" :key="item.id" :disabled="item.disabledFlag">
v-for="item in items"
:key="item.id"
:disabled="item.disabledFlag"
>
{{ item.name }} {{ item.name }}
</v-tab> </v-tab>
</v-tabs> </v-tabs>
<v-tabs-items <v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="py-6">
v-model="tab"
style="height: calc(100% - 65px);"
class="py-6"
>
<v-tab-item v-for="(item, idx) in items" :key="item.id"> <v-tab-item v-for="(item, idx) in items" :key="item.id">
<component <component v-if="item.id == 'tagBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
v-if="item.id == 'tagBaseInfoTab'" :detailList="detailList" @gridEditingFinish="gridEditingFinish" />
:is="'Form'" <TagAddInfoTab v-if="item.id == 'tagAddInfoTab'" :parentPrgmId="myPrgmId"
:parentPrgmId="myPrgmId" :innerTabGridInfo="{ tab, idx }" />
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
<TagAddInfoTab
v-if="item.id == 'tagAddInfoTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
</v-tab-item> </v-tab-item>
</v-tabs-items> </v-tabs-items>
</div> </div>
@ -134,6 +86,7 @@
<script> <script>
import { mapState, mapMutations, mapActions } from 'vuex'; import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js'; import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import BtnSearch from '~/components/common/button/BtnSearch'; import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons'; import Buttons from '~/components/common/button/Buttons';
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr'; import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
@ -149,7 +102,7 @@ let myTitle;
// const myPrgmId = "PRG0051"; // const myPrgmId = "PRG0051";
let myPrgmId; let myPrgmId;
export default { export default {
mixins: [mixinGlobal], mixins: [mixinGlobal, resize],
async asyncData(context) { async asyncData(context) {
const myState = context.store.state; const myState = context.store.state;
// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]); // context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
@ -219,15 +172,19 @@ export default {
}, },
chkBlocId() { chkBlocId() {
this.setPageData({ isFind: true }); this.setPageData({ isFind: true });
// this.search();
}, },
chkReadDataType() { chkReadDataType() {
this.setPageData({ isFind: true }); this.setPageData({ isFind: true });
// this.search();
}, },
chkReadObj() { chkReadObj() {
this.setPageData({ isFind: true }); this.setPageData({ isFind: true });
// this.search();
}, },
chkUseFg() { chkUseFg() {
this.setPageData({ isFind: true }); this.setPageData({ isFind: true });
// this.search();
}, },
}, },
async beforeCreate() { async beforeCreate() {
@ -297,12 +254,16 @@ export default {
this.gridInit(); this.gridInit();
}, },
gridInit() { gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30; const gridHeight = this.$refs.gridParent.offsetHeight - 16;
const myOptions = { const myOptions = {
columnOptions: { columnOptions: {
resizable: true, resizable: true,
}, },
scrollX: true,
header: {
height: 38,
},
}; };
this.setGridOption({ this.setGridOption({
gridKey: this.gridName, gridKey: this.gridName,
@ -316,21 +277,21 @@ export default {
header: 'TAG ID', header: 'TAG ID',
name: 'tagId', name: 'tagId',
width: 'auto', width: 'auto',
minWidth: 280, minWidth: 340,
align: 'left', align: 'left',
}, },
{ {
header: 'TAG 명', header: 'TAG 명',
name: 'tagNm', name: 'tagNm',
width: 'auto', width: 'auto',
minWidth: 140, minWidth: 220,
align: 'left', align: 'left',
}, },
{ {
header: '측정 값 유형', header: '측정 값 유형',
name: 'readDataTypeCd', name: 'readDataTypeCd',
width: 100, width: 90,
align: 'center', align: 'left',
formatter({ value }) { formatter({ value }) {
let retVal = ''; let retVal = '';
const newValue = _this.pageData.readDataTypeCdList.filter( const newValue = _this.pageData.readDataTypeCdList.filter(
@ -346,7 +307,7 @@ export default {
header: '측정대상', header: '측정대상',
name: 'readObjId', name: 'readObjId',
width: 100, width: 100,
align: 'center', align: 'left',
formatter({ value }) { formatter({ value }) {
let retVal = ''; let retVal = '';
const newValue = _this.pageData.readObjList.filter( const newValue = _this.pageData.readObjList.filter(
@ -363,7 +324,7 @@ export default {
header: '단위', header: '단위',
name: 'unitCd', name: 'unitCd',
width: 80, width: 80,
align: 'center', align: 'left',
formatter({ value }) { formatter({ value }) {
let retVal = ''; let retVal = '';
const newValue = _this.pageData.unitCdList.filter( const newValue = _this.pageData.unitCdList.filter(
@ -493,6 +454,7 @@ export default {
readObjId: this.pageData.searchReadObj, readObjId: this.pageData.searchReadObj,
useFg: this.pageData.useFg, useFg: this.pageData.useFg,
tagNmLike: this.pageData.tagNm, tagNmLike: this.pageData.tagNm,
tagIdLike: this.pageData.tagId,
}, },
}); });
} else { } else {
@ -751,7 +713,8 @@ export default {
}); });
this.$nextTick(() => { this.$nextTick(() => {
this.setPageData({ isFind: true }); // this.setPageData({ isFind: true });
this.search();
}); });
} }
} else { } else {
@ -818,6 +781,7 @@ function isValidAlrmVal(obj) {
const defaultData = { const defaultData = {
/* 검색옵션 */ /* 검색옵션 */
tagId: '',
tagNm: '', tagNm: '',
blocId: '', blocId: '',
blocMstrList: [], blocMstrList: [],
@ -907,30 +871,39 @@ const myDetail = [
label: 'TAG ID', label: 'TAG ID',
valueNm: 'tagId', valueNm: 'tagId',
disabled: false, disabled: false,
iconShow: true,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pr-4',
required: false, required: false,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'InputText', type: 'InputText',
label: 'TAG 명', label: 'TAG 명',
valueNm: 'tagNm', valueNm: 'tagNm',
disabled: false, disabled: false,
iconShow: true,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pl-4',
required: false, required: false,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'SelectBox', type: 'SelectBox',
label: '측정 값 유형', label: '측정 값 유형',
valueNm: 'readDataTypeCd', valueNm: 'readDataTypeCd',
disabled: false, disabled: false,
iconShow: true,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pr-4 pt-5',
list: 'readDataTypeCdList', list: 'readDataTypeCdList',
itemText: 'commCdNm', itemText: 'commCdNm',
itemValue: 'commCd', itemValue: 'commCd',
required: true, required: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'SelectBox', type: 'SelectBox',
@ -938,11 +911,14 @@ const myDetail = [
valueNm: 'readObjId', valueNm: 'readObjId',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pl-4 pt-5',
list: 'readObjList', list: 'readObjList',
itemText: 'readObjNm', itemText: 'readObjNm',
itemValue: 'readObjId', itemValue: 'readObjId',
required: true, required: true,
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'InputText', type: 'InputText',
@ -950,8 +926,11 @@ const myDetail = [
valueNm: 'mgnf', valueNm: 'mgnf',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pr-4 pt-5',
required: true, required: true,
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'SelectBox', type: 'SelectBox',
@ -959,10 +938,13 @@ const myDetail = [
valueNm: 'unitCd', valueNm: 'unitCd',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pl-4 pt-5',
list: 'unitCdList', list: 'unitCdList',
itemText: 'commCdNm', itemText: 'commCdNm',
itemValue: 'commCd', itemValue: 'commCd',
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'InputText', type: 'InputText',
@ -970,7 +952,10 @@ const myDetail = [
valueNm: 'rangMin', valueNm: 'rangMin',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pr-4 pt-5',
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'InputText', type: 'InputText',
@ -978,7 +963,10 @@ const myDetail = [
valueNm: 'rangMax', valueNm: 'rangMax',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pl-4 pt-5',
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'InputText', type: 'InputText',
@ -986,7 +974,10 @@ const myDetail = [
valueNm: 'alrmHihi', valueNm: 'alrmHihi',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pr-4 pt-5',
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'InputText', type: 'InputText',
@ -994,7 +985,10 @@ const myDetail = [
valueNm: 'alrmHi', valueNm: 'alrmHi',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pl-4 pt-5',
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'InputText', type: 'InputText',
@ -1002,7 +996,10 @@ const myDetail = [
valueNm: 'alrmLo', valueNm: 'alrmLo',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pr-4 pt-5',
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'InputText', type: 'InputText',
@ -1010,7 +1007,10 @@ const myDetail = [
valueNm: 'alrmLolo', valueNm: 'alrmLolo',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pl-4 pt-5',
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'CheckBox', type: 'CheckBox',
@ -1018,8 +1018,11 @@ const myDetail = [
valueNm: 'totFg', valueNm: 'totFg',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pr-4 pt-5',
value: { '1': true, '0': false }, value: { '1': true, '0': false },
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'CheckBox', type: 'CheckBox',
@ -1027,9 +1030,12 @@ const myDetail = [
valueNm: 'useFg', valueNm: 'useFg',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pl-4 pt-5',
value: { '1': true, '0': false }, value: { '1': true, '0': false },
required: false, required: false,
iconShow: true,
labelCols: 12,
textCols: 12,
}, },
{ {
type: 'SelectBox', type: 'SelectBox',
@ -1056,4 +1062,4 @@ const myDetail = [
class: 'py-2', class: 'py-2',
}, },
]; ];
</script> </script>

View File

@ -69,7 +69,7 @@
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
<v-col :cols="7" class="h100"> <v-col :cols="7" class="">
<v-card class="pb-5"> <v-card class="pb-5">
<v-card-title>TAG 상세</v-card-title> <v-card-title>TAG 상세</v-card-title>
<div class="px-5" style="height:calc(100% - 70px)"> <div class="px-5" style="height:calc(100% - 70px)">

View File

@ -253,8 +253,9 @@ export class NewCustomRenderer {
} else { } else {
el.type = 'text'; el.type = 'text';
$(el).addClass('tui-grid-cell-content'); $(el).addClass('tui-grid-cell-content w100');
$(el).css('text-align', 'center'); $(el).css('text-align', 'center');
$(el).css('border', '0');
} }
this.render(props); this.render(props);
if(!this.disabled){ if(!this.disabled){
@ -314,6 +315,8 @@ export class NewCustomEditor {
this.rowKey = rowKey; this.rowKey = rowKey;
this.columnInfo = columnInfo; this.columnInfo = columnInfo;
this.grid = grid; this.grid = grid;
const divEl = document.createElement('div');
$(divEl).css('text-align', 'center');
const el = document.createElement('input'); const el = document.createElement('input');
if ( if (
props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG' props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG'
@ -363,16 +366,20 @@ export class NewCustomEditor {
} }
$(el).addClass('tui-grid-content-text'); $(el).addClass('tui-grid-content-text');
} }
divEl.append(el);
// console.log('props: %o', props); // console.log('props: %o', props);
// console.log('el: %o', el); // console.log('el: %o', el);
this.el = el; this.el = el;
this.divEl = divEl;
this.render(props); this.render(props);
} }
getElement() { getElement() {
return this.el; return this.divEl;
} }
getValue() { getValue() {
@ -389,9 +396,9 @@ export class NewCustomEditor {
} }
mounted() { mounted() {
if (this.el.type == 'checkbox') { // if (this.el.type == 'checkbox') {
$(this.el.parentElement).css('text-align', 'center'); // $(this.el.parentElement).css('text-align', 'center');
} // }
this.el.select(); this.el.select();
} }
} }