gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

updatenew-code-new

Browse Source
This commit is contained in:
Nguyen Van Luan/(Nguyen Van Luan)/현장대리인/SK
2025-07-29 12:04:09 +09:00
parent 7e2383efda 665a178f82
commit d66a03626b
49 changed files with 1839 additions and 4235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
assets/scss/common.scss
View File

@ -12,8 +12,7 @@
html,
body {
overflow: auto;
// overflow: auto;
}
a {
@ -119,7 +118,7 @@ a {
.v-main,
.v-main__wrap,
.container {
height: 100%;
// height: 100%;
}
.v-main__wrap>.container {
@ -144,7 +143,9 @@ a {
}
& .router-tab__container {
min-height: calc(100% - 72px);
overflow-y: auto;
min-height: calc(100vh - 105px);
max-height: calc(100vh - 105px);
padding: 20px;
}
@ -484,6 +485,10 @@ a {
.container--fluid {
background-color: map-deep-get($config, #{$theme}, "container-fluid");
.menu-container {
max-height:calc(100vh - 60px);
overflow-y: auto;
}
}
.v-icon {
@ -529,8 +534,6 @@ a {
}
}
.router-tab {
.router-tab__header {
background-color: map-deep-get($config, #{$theme}, "router-header");

24
assets/scss/common/button.scss
View File

@ -92,9 +92,12 @@
background: map-deep-get($config, #{$theme}, "basic-button-background");
}
.searchFilter{
.search-button {
height: 40px;
color: map-deep-get($config, #{$theme}, "search-btn-color");
}
}
.v-dialog {
.ant-btn-icon-only {
@ -118,6 +121,9 @@
background: map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
border-color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
color:map-deep-get($config, #{$theme}, "ant-btn-primary-color");
&.ant-btn-background-ghost{
color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
}
}
&.ant-btn-default {
@ -132,6 +138,15 @@
background: map-deep-get($config, #{$theme}, "ant-btn-danger-bg") !important;
}
}
&.expand-btn {
.v-icon {
color: map-deep-get($config, #{$theme}, "basic-button-color");
svg {
fill: map-deep-get($config, #{$theme}, "basic-button-color");
}
}
}
}
}
}
@ -159,3 +174,12 @@
background:none;
}
}
.ant-btn {
&.expand-btn {
.v-icon {
span {
margin-right: 8px;
}
}
}
}

11
assets/scss/common/grid.scss
View File

@ -98,6 +98,17 @@
@include theme($theme);
.v-application.#{$theme}-mode {
.grid-title {
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
color: map-deep-get($config,
#{$theme},
"tui-grid-title-color"
);
}
.tui-grid {
&-table {
border: 1px solid;

2
assets/scss/var.scss
View File

@ -102,6 +102,7 @@ $config: (
v-calendar-day-color: #fff,
v-calendar-day-in-not-month-color: rgba(255, 255, 255, 0.05),
v-calendar-is-today-background-color: #2d4571,
tui-grid-title-color: #FFFFFFD9,
tui-grid-header-backgroundColor: #2a2b2d,
tui-grid-header-color: #FFFFFFD9,
tui-grid-border-horziontal-color: #212224,
@ -239,6 +240,7 @@ $config: (
v-calendar-day-color: #111,
v-calendar-day-in-not-month-color: #f8f8f8,
v-calendar-is-today-background-color: #e3eaf3,
tui-grid-title-color: #000000E0,
tui-grid-header-backgroundColor: #fafafa, //#e0e0e0,
tui-grid-header-color: rgba(0, 0, 0, 0.88),
tui-grid-border-horziontal-color: #e0e0e0,

10
components/common/Chart.vue
View File

@ -351,25 +351,25 @@ export default {
tmpChrtOp.color = light_Col;
}
}
console.log('ops11:',tmpChrtOp)
// console.log('ops11:',tmpChrtOp)
return tmpChrtOp;
},
}),
},
created() {
console.log('wd data:',this.widgetData)
// console.log('wd data:',this.widgetData)
},
methods: {
onClick(event, instance, ECharts) {
console.log('onClick : ', event);
// console.log('onClick : ', event);
this.$emit('click', event);
},
onDblClick(event, instance, ECharts) {
console.log('onDblClick : ', event);
// console.log('onDblClick : ', event);
this.$emit('dblclick', event);
},
onRightClick(event, instance, ECharts) {
console.log('onRightClick : ', event);
// console.log('onRightClick : ', event);
this.$emit('rclick', event);
},
onLegendSelect(params) {

5
components/common/Datepicker.vue
View File

@ -30,7 +30,7 @@
<img :src="arrowIcon" alt="">
</div>
<v-text-field
v-if="isRange"
v-show="isRange"
id="endpicker"
ref="endpicker"
v-model="toDtValue"
@ -47,9 +47,6 @@
</template>
</v-text-field>
</div>
<!-- test -->
<!-- <a-button @click="onOpenDatepicker()">Open</a-button> -->
<!-- end test -->
</v-col>
</v-row>
</template>

4
components/common/Grid.vue
View File

@ -163,7 +163,7 @@ export default {
},
created() {},
async mounted() {
console.log('--------------DEBUG----gridData: ', this.gridData);
// console.log('--------------DEBUG----gridData: ', this.gridData);
if (this.gridName) {
this.gridInstance = this.$refs['tuigrid' + this.gridName];
@ -666,6 +666,8 @@ export default {
store.dimension.offsetLeft = offsetLeft;
},
setHeight(_a,height){
return; // setting auto height
// console.log("setHeight");
var dimension = _a.dimension;
var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;

6
components/common/button/ActionButtons.vue
View File

@ -3,8 +3,7 @@
<!--<v-btn icon tile :ripple="false" @click="btnActionsFnc('addLeftToRight')">
<v-icon>mdi-chevron-right</v-icon>
</v-btn> -->
<a-button type="default" @click="btnActionsFnc('addLeftToRight')">
<RightOutlines/>
<a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost icon="right" >
</a-button>
<!--<v-btn
@ -16,8 +15,7 @@
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn> -->
<a-button class="mt-2" type="default" @click="btnActionsFnc('removeRightToLeft')">
<LeftOutlines/>
<a-button class="mt-2" @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost icon="left">
</a-button>
</div>
</template>

2
components/common/chartoptions/GaugeChart.js
View File

@ -1,5 +1,5 @@
// Gauge chart options
export default function getGaugeChartOption({ title, value, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
const colorRanges = isDarkMode
? [
[0.375, '#49AA19'], // Dark Green

4
components/common/chartoptions/LineChart.js
View File

@ -2,7 +2,7 @@
export default function getLineChartOption({
xAxisData = [],
seriesData = [],
legendData = [],
// legendData = [],
isDarkMode = false,
}) {
@ -31,7 +31,7 @@ export default function getLineChartOption({
},
legend: {
data: legendData,
// data: legendData,
icon: 'circle',
top: '0%',
right: '5%',

6
components/common/modal/EnrgUsePlanModiPop.vue
View File

@ -318,7 +318,7 @@ export default {
// }
},
mounted(){
this.initTest(); return;
// this.initTest(); return;
},
methods: {
...mapMutations({
@ -478,10 +478,6 @@ export default {
// })
},
async setChart(){
// test
this.initTestChart(); return;
// end test
this.loadChart = false;
let xAxisData = [];
let seriesData = [];

41
components/common/modal/EvtObjPop.vue
View File

@ -7,12 +7,15 @@
{{ option.labelContent }}
</label>
</v-col>
<v-col :cols="option.textCols">
<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 :cols="option.textCols" class="py-0">
<v-text-field readonly append-icon="" class="v-input__custom" outlined :hide-details="true"
v-model="searchWord" @keyup.enter="typeEnterKey" @click="dialogOpenCloseEvent(dialog)"
:required="item.required || 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="1000px">
@ -21,10 +24,10 @@
<span class="custom-title-4">{{ option.modalTitle }}</span>
<v-icon @click="dialogOpenCloseEvent(dialog)">mdi-close</v-icon>
</v-card-title>
<v-row align="end" class="pa-5" no-gutters>
<v-row align="end" class="px-5 pb-3" no-gutters>
<v-col :cols="2.5" class="mr-2">
<v-row>
<v-col :cols="2">
<v-col :cols="12" class="py-0">
<label for="" class="search-box-label">
<!-- <v-icon small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
@ -32,28 +35,30 @@
검색
</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 :cols="11" class="py-0 pr-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-col>
<a-button icon="search" :ripple="false" type="primary" @click="search()"
class="search-button">조회</a-button>
</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: 600px'" class="px-5">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 py-3">
<!-- :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)" />
:dataPath="searchParam.modalData2.evtObjPop" :parentPrgmId="parentPrgmId"
@getRowsData="getRowData" @dblClick="setUpdate($event)" />
</div>
</div>
<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="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>

174
components/common/modal/ReadPlcPop.vue
View File

@ -1,5 +1,5 @@
<template>
<v-row class="search-box" align="center" >
<v-row class="search-box" align="center">
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
<label for="" class="search-box-label">
@ -37,12 +37,11 @@
<v-row align="center">
<v-col v-if="label" cols="12" class="py-0">
<label for="" class="search-box-label">
<v-icon small
:class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? 6 : ''" class="py-0">
<v-col :cols="label ? 8 : ''" class="py-0">
<!-- :value="textfield" -->
<v-text-field append-icon="" class="v-input__custom" outlined :hide-details="true"
v-model="searchWord" @keyup.enter="typeEnterKey"><template v-slot:append>
@ -52,13 +51,10 @@
</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-btn>
<!-- <v-spacer></v-spacer> -->
<v-col cols="2" class="text-right">
<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
<!-- <v-btn :ripple="false">초기화</v-btn> -->
@ -66,6 +62,10 @@
<v-btn v-if="!searchParam.isMulti" :ripple="false" @click="search()">검색</v-btn> -->
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</v-col>
<v-col cols="2" class="text-right"><a-button class="expand-btn" :ripple="false" @click="btnTreeExpand()">
<v-icon small>$icoExpandAlt</v-icon>
Expand All
</a-button></v-col>
</v-row>
<!-- <v-btn color="primary" dark @click="btnTreeExpand()">{{
@ -78,7 +78,7 @@
</div>
<v-card-text>
<div ref="treeGridParent" style="height: 500px">
<div ref="treeGridParent" style="height: 450px">
<component :ref="'treeGrid' + parentPrgmId" :is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridNameTree" :dataPath="searchParam.modalData.selectReadObjListTree"
:parentPrgmId="parentPrgmId" :bindingData="bindingData" @getRowsData="getRowData"
@ -89,10 +89,10 @@
:tree-data="ftnPlcListTreeData"
/> -->
</v-card-text>
<v-divider></v-divider>
<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>
<a-button :ripple="false" @click="dialog = false" class="mr-2">닫기</a-button>
<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -155,7 +155,7 @@ export default {
myModalKey: 'selectReadObjListTree',
gridNameTree: 'treeGrid',
loadGrid: true,
loadGrid: false,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
@ -278,7 +278,7 @@ export default {
{
header: '검침개소명',
name: 'readPlcNm',
width: 370,
width: 300,
align: 'left',
},
{ header: '검침개소', name: 'name', align: 'center' },
@ -289,73 +289,31 @@ 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',
},
header: {
height: 37,
},
rowHeight: 'auto',
};
if (this.searchParam.isMulti) {
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
@ -373,26 +331,26 @@ 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;
@ -400,7 +358,7 @@ export default {
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: treeData,
value: setTreeData.ROOT || [],
});
this.loadGrid = true;
@ -540,22 +498,4 @@ const selectReadObjListTree = {
}
}
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.v-dialog {
.v-card {
&__title {
@if $theme ==dark {
background-color: #2d3355;
.v-btn {
background-color: #2d3355;
}
}
}
}
}
}
}
</style>

15
components/common/select/SelectBlocMstr.vue
View File

@ -2,22 +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
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</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" append-icon="" class="v-select__custom" outlined
<v-select v-model="selectValue" :items="searchParam[parentPrgmId].blocMstrList"
item-text="blocNm" item-value="idx" append-icon="" outlined
:hide-details="true" :class="['v-select__custom', customClass]">
<template v-slot:append>
    <v-icon>$icoChevronDown</v-icon>
  </template>
<template v-slot:append><v-icon>$icoChevronDown</v-icon></template>
</v-select>
</v-col>
</v-row>

5
components/common/select/SelectMttList.vue
View File

@ -85,6 +85,11 @@ export default {
type: String,
require: false,
},
required: {
type: Boolean,
require: false,
default: false
},
},
data() {
return {

6
components/common/select/selectCodeList.vue
View File

@ -11,9 +11,11 @@
<v-col :cols="label ? textCols : ''">
<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>
:class="['v-select__custom', customClass]">
<template v-slot:append>
<v-icon>$icoChevronDown</v-icon>
</template></v-select>
</template>
</v-select>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>

6
components/icons/icoExpandAlt.vue Normal file
View File

@ -0,0 +1,6 @@
<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="M14.1248 1.71225L10.7462 2.13189C10.6283 2.14617 10.5801 2.28903 10.6623 2.37296L11.6391 3.34975L8.89799 6.09082C8.8714 6.11767 8.85649 6.15392 8.85649 6.19171C8.85649 6.2295 8.8714 6.26575 8.89799 6.2926L9.70335 7.09796C9.7587 7.15332 9.84977 7.15332 9.90513 7.09796L12.648 4.3551L13.6248 5.33189C13.6436 5.35072 13.6674 5.36387 13.6934 5.36981C13.7193 5.37576 13.7465 5.37427 13.7716 5.36551C13.7968 5.35675 13.819 5.34107 13.8356 5.32028C13.8523 5.29949 13.8628 5.27443 13.8658 5.24796L14.2837 1.87117C14.2867 1.84961 14.2846 1.82765 14.2776 1.80702C14.2707 1.78639 14.2591 1.76765 14.2437 1.75226C14.2283 1.73687 14.2096 1.72524 14.1889 1.7183C14.1683 1.71136 14.1463 1.70929 14.1248 1.71225ZM6.2962 8.89439C6.26935 8.8678 6.23309 8.85289 6.19531 8.85289C6.15752 8.85289 6.12127 8.8678 6.09442 8.89439L3.35334 11.6372L2.37656 10.6605C2.35771 10.6416 2.33394 10.6285 2.30797 10.6225C2.282 10.6166 2.25487 10.6181 2.22971 10.6268C2.20455 10.6356 2.18236 10.6513 2.16569 10.6721C2.14903 10.6929 2.13856 10.7179 2.13549 10.7444L1.71584 14.1212C1.70513 14.214 1.78192 14.2908 1.87477 14.2801L5.25335 13.8605C5.3712 13.8462 5.41942 13.7033 5.33727 13.6194L4.36049 12.6426L7.10334 9.89974C7.1587 9.84439 7.1587 9.75332 7.10334 9.69796L6.2962 8.89439Z" />
</svg>
</template>

4
components/pages/comm/CommCdTab.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="pb-5 h100">
<div class="d-flex align-center justify-space-between">
<span class="text-h6">공통그룹코드</span>
<span class="grid-title">공통그룹코드</span>
<div>
<Buttons
:parentPrgmId="parentPrgmId"
@ -126,7 +126,7 @@ export default {
{
header: '사용여부',
name: 'useFg',
align: 'center',
align: 'left',
formatter({ value }) {
const newValue = _this.pageData.useFgList.filter(
item => item.commCd == value,

20
components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
View File

@ -5,7 +5,7 @@
<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailDataSetTagList"
:btnActionsFnc="btnActions" />
</div>
<div ref="gridParent">
<div ref="gridParent" style="min-height: 30vh;">
<Grid :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="parentPrgmId"
@getRowsData="getRowData" :innerTabGridInfo="innerTabGridInfo" />
</div>
@ -66,7 +66,7 @@ export default {
},
data() {
return {
loadGrid: true,
loadGrid: false,
gridName: 'rowDataSetTagRelGrid',
detailDataSetTagList: myDataSetTagDetail,
dataPathMock: {
@ -128,8 +128,6 @@ export default {
const gridHeight = this.$refs['gridParent'].offsetHeight - 36;
const myOptions = {
// bodyHeight: gridHeight,
// minBodyHeight: gridHeight,
header: {
height: 28,
},
@ -137,14 +135,9 @@ export default {
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),
});
@ -204,16 +197,11 @@ export default {
value: myColumns,
});
this.$nextTick(() => {
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,

57
components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
View File

@ -271,63 +271,6 @@ 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) {

319
components/pages/ems/ReadPlcInfo/ReadPlcAddInfoTab.vue
View File

@ -1,26 +1,12 @@
<template>
<div>
<div
class="d-flex justify-space-between"
>
<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"
:btnActionsFnc="btnActions"
/>
<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
</div>
<div ref="gridParent">
<Grid
:ref="gridName"
:gridName="gridName"
:parentPrgmId="parentPrgmId"
:editorGrid="true"
:innerTabGridInfo="innerTabGridInfo"
@getRowsData="getRowData"
:dataPath="addInfoTabData"
/>
<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>
</template>
@ -53,65 +39,65 @@ export default {
},
data() {
return {
loadGrid: true,
loadGrid: false,
gridName: 'rowDetailGrid',
rowKey: null,
edtingFinishFlag: 'Y',
addInfoTabData: {
"rowDetailGrid": {
data: [
// addInfoTabData: {
// "rowDetailGrid": {
// data: [
{
readPlcNm: '서울 본사',
plcKind: '전기',
useFg: '1',
},
// {
// 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;
// ],
// 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;
// // },
// },
// ]
// }
// }
// 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: {
@ -166,9 +152,9 @@ export default {
bodyHeight: gridHeight,
minBodyHeight: gridHeight,
header: {
height: 28,
height: 37,
},
rowHeight: 29,
rowHeight: 37,
minRowHeight: 29,
selectionUnit: 'row',
editingEvent: 'click',
@ -178,100 +164,101 @@ 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,
// },
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: NewCustomEditor,
// },
// formatter(data) {
// return data.row.addInfoDataKind;
// },
// },
//{ header: "추가 정보 값", name: "addInfoVal", align: "center" , editor: "text",
// formatter({ value, row , column}) {
// 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);
// console.log("addInfoVal state : ", column);
// if(row.addInfoDataKind === "NUM"){
// if (row.addInfoDataKind === "NUM") {
// column.align = "right";
// }else{
// } else {
// column.align = "left";
// }
// return value;
// }
//},
// },
/*{
header: "사용여부",
name: "useFg",
@ -290,16 +277,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;
},
@ -379,7 +366,7 @@ export default {
gridEditingFinish2(data, bindingData) {
this.$refs[bindingData].editingFinish(data);
},
search() {},
search() { },
},
};
</script>

28
components/pages/ems/ReadPlcInfo/ReadPlcImgInfoTab.vue
View File

@ -8,9 +8,9 @@
<div ref="gridParent" style="height: calc((100vh - 520px) /2);">
<Grid :ref="gridName" :gridName="gridName" :parentPrgmId="parentPrgmId" @getRowsData="getRowData"
:innerTabGridInfo="innerTabGridInfo" :dataPath="imgInfoTabData" />
:innerTabGridInfo="innerTabGridInfo" />
</div>
<div ref="formParent">
<div ref="formParent" style="height: calc((100vh - 400px) /2);">
<component :is="'Form'" :parentPrgmId="parentPrgmId" :bindingData="gridName"
:detailList="detailReadPlcImgList" @gridEditingFinish="gridEditingFinish" />
</div>
@ -44,26 +44,9 @@ export default {
},
data() {
return {
loadGrid: true,
loadGrid: false,
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: {
@ -120,10 +103,11 @@ export default {
header: {
height: 28,
},
rowHeight: 29,
minRowHeight: 29,
// rowHeight: 29,
// minRowHeight: 29,
selectionUnit: 'row',
editingEvent: 'click',
rowHeight: 'auto',
};
this.setGridOption({
gridKey: this.gridName,

75
components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
View File

@ -7,9 +7,9 @@
</div>
<div ref="gridParent" style="height: calc((100vh - 520px) /2);">
<Grid :ref="gridName" :gridName="gridName" :parentPrgmId="parentPrgmId" @getRowsData="getRowData"
:innerTabGridInfo="innerTabGridInfo" :dataPath="tagRelTabData" />
:innerTabGridInfo="innerTabGridInfo" />
</div>
<div ref="formParent" >
<div class="mt-3" ref="formParent" style="height: calc((100vh - 400px) /2);">
<component :is="'Form'" :parentPrgmId="parentPrgmId" :bindingData="gridName"
:detailList="detailReadPlcTagList" @gridEditingFinish="gridEditingFinish" />
</div>
@ -46,78 +46,7 @@ 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: {

28
layouts/default.vue
View File

@ -112,13 +112,6 @@
}" />
<!-- <router-view :key="$route.fullPath"/> -->
</div>
<!--
v-model="treeValue"
return-object
@input="treeModel"
@update:active="clkTab"
-->
<AdminMenu :miniVariant="miniVariant" :userNm="this.userInfo.userNm" :comId="this.userInfo.comId" v-if="false" />
<component ref="changePswdPop" :is="'ChangePswdPop'" v-show="false" :comId="this.userInfo.comId" />
@ -148,14 +141,6 @@
</button>
</template>
</v-treeview>
<!-- <template #append>
<p
class="text-caption"
:style="{ letterSpacing: '-0.2px !important' }"
>
&copy; 2022. SK C&C all rights reserved.
</p>
</template> -->
</v-navigation-drawer>
</div>
@ -322,19 +307,6 @@
</div>
</div>
</v-main>
<!-- <v-footer
:absolute="!fixed"
app
:class="
drawer
? miniVariant
? 'drawerFooter miniFooter'
: 'drawerFooter'
: 'full-size'
"
>
<span>&copy; 2022. SK C&C all rights reserved.</span>
</v-footer> -->
</fullscreen>
</v-app>
</template>

809
layouts/default_bak.vue
View File

@ -1,809 +0,0 @@
<template>
<v-app :class="`${isDarkMode ? 'dark-mode' : 'light-mode'}`">
<!-- <v-app :class="'light-mode'"> -->
<fullscreen :fullscreen.sync="fullscreen">
<v-navigation-drawer
ref="navigationdrawer"
:value="drawer"
:mini-variant="miniVariant"
:clipped="clipped"
:absolute="true"
mini-variant-width="60"
fixed
app
>
<div class="d-flex align-center justify-space-between py-4 px-3">
<router-link class="home" :to="myHome.root">
<div class="lnb-logo">
<img v-if="isDarkMode" src="@/assets/images/logo_dm.png" />
<img v-else src="@/assets/images/logo_lm.png" />
</div>
<!-- <div class="lnb-logo">FEMS</div>-->
</router-link>
<v-app-bar-nav-icon
ref="appbarnavicon"
id="appbarnavicon"
@click.stop="miniVariant = !miniVariant"
@click="updateTreeview"
:style="{
backgroundColor: 'transparent',
color: isDarkMode ? '#fff' : '#111',
}"
/>
<!-- <router-view :key="$route.fullPath"/> -->
</div>
<!--
v-model="treeValue"
return-object
@input="treeModel"
@update:active="clkTab"
-->
<AdminMenu
:miniVariant="miniVariant"
:userNm="this.userInfo.userNm"
:comId="this.userInfo.comId"
/>
<component
ref="changePswdPop"
:is="'ChangePswdPop'"
v-show="false"
:comId="this.userInfo.comId"
/>
<v-treeview
ref="treeview"
:active.sync="activeTree"
active-class="v-treeview-node--active"
:items="treevieItems"
activatable
hoverable
color="#3896ff"
open-on-click
@update:open="openNode"
>
<template slot="label" slot-scope="{ item }">
<button
:class="{ 'justify-center': miniVariant }"
@mouseover="doMouseOver"
>
<v-icon
v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
v-text="menuIconById[item.menuId]"
:class="{ 'mr-2': !miniVariant }"
size="20"
></v-icon>
<v-icon
v-else-if="
item.lvl === 1 && !menuIconKeys.includes(item.menuId)
"
:class="{ 'mr-2': !miniVariant }"
size="20"
>mdi-package-variant-closed</v-icon
>
<v-icon
v-else-if="item.lvl === 2"
:class="{ 'mr-2': !miniVariant }"
size="10"
>
mdi-checkbox-blank
</v-icon>
<v-icon
v-else-if="
item.lvl >= 3 && item.childeVo.length === 0 && item.url
"
:class="miniVariant === false ? 'mr-2' : ''"
size="9"
>
$depth3rdBulletDark
</v-icon>
<span v-if="item.url"
>{{ item.menuNm }}
<!-- <span v-if="item.bookmark" class="material-icons" style="font-size: 17px; vertical-align: middle;" @click="addBookMark(item.menuId, item.url, item.bookmark)">star</span>
<span v-else-if="!item.bookmark" class="material-icons" style="font-size: 17px; vertical-align: middle;" @click="addBookMark(item.menuId, item.url, item.bookmark)">star_border</span> -->
</span>
<span v-else-if="!item.url">{{ item.menuNm }}</span>
<v-icon
v-if="item.lvl >= 1 && item.childeVo.length > 0 && !item.url"
>
mdi-chevron-down
</v-icon>
</button>
</template>
</v-treeview>
<!-- <template #append>
<p
class="text-caption"
:style="{ letterSpacing: '-0.2px !important' }"
>
&copy; 2022. SK C&C all rights reserved.
</p>
</template> -->
</v-navigation-drawer>
<v-main>
<v-container fluid>
<router-tab
ref="routerTab"
:tabs="treevieItems"
:keep-last-tab="false"
:contextmenu="false"
>
<template slot-scope="{ title, closable, to }">
<span>{{ title }}</span>
<v-icon
size="18"
class="ml-2"
v-if="closable"
@click.stop="onCloseTab(to)"
>mdi-close-circle</v-icon
>
</template>
<template #end>
<!--<ThemeSwitch />-->
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn
:ripple="false"
tile
class="btn-close"
v-bind="attrs"
v-on="on"
>
<span class="body-2">닫기</span>
<v-icon size="20">mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list
class="py-2 btn-close-menu-list"
:style="{
backgroundColor: isDarkMode ? '#144985' : '#3f4d7d',
}"
>
<v-list-item class="px-2">
<v-list-item-title @click="delAllTabsData()" class="body-2"
>전체 닫기</v-list-item-title
>
</v-list-item>
<v-list-item class="px-2">
<v-list-item-title
@click="deleteSblingsTab()"
class="body-2"
>나머지 닫기</v-list-item-title
>
</v-list-item>
</v-list>
</v-menu>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn
:ripple="false"
tile
class="btn-close"
v-bind="attrs"
v-on="on"
style="width:100px;"
>
<span class="body-2">즐겨찾기</span>
<v-icon size="20">mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list
v-if="myMenuList.length > 0"
class="py-2 btn-close-menu-list"
:style="{
backgroundColor: isDarkMode ? '#144985' : '#3f4d7d',
}"
>
<v-list-item
v-for="item in myMenuList"
:key="item.menuId"
class="px-2"
style="cursor:pointer;"
>
<v-list-item-title
@click="moveToMyMenu(item.url, item.menuId, item.prgmId)"
class="body-2"
>{{ item.menuNm }}</v-list-item-title
>
</v-list-item>
</v-list>
</v-menu>
<v-btn
icon
tile
:ripple="false"
@click="removeBookMark()"
v-if="bookmarkBtn == 1"
>
<span
class="material-icons"
style="font-size: 17px; vertical-align: middle;"
>star</span
>
</v-btn>
<v-btn
icon
tile
:ripple="false"
@click="addBookMark()"
v-if="bookmarkBtn == 0"
>
<span
class="material-icons"
style="font-size: 17px; vertical-align: middle;"
>star_border</span
>
</v-btn>
<v-btn
id="refresh"
icon
tile
:ripple="false"
@click="refreshTab()"
>
<v-icon>mdi-refresh</v-icon>
</v-btn>
<v-btn icon tile :ripple="false" @click="setDrawer()">
<v-icon>mdi-crop-free</v-icon>
</v-btn>
<!-- <v-btn icon tile :ripple="false" @click="toggle()">
<v-icon v-if="!fullscreen">mdi-arrow-expand-all</v-icon>
<v-icon v-else>mdi-arrow-collapse-all</v-icon>
</v-btn> -->
</template>
</router-tab>
</v-container>
<div v-if="loadingStackCnt > 0" class="loading-container">
<div class="loading">
<Fade-loader />
</div>
</div>
</v-main>
<!-- <v-footer
:absolute="!fixed"
app
:class="
drawer
? miniVariant
? 'drawerFooter miniFooter'
: 'drawerFooter'
: 'full-size'
"
>
<span>&copy; 2022. SK C&C all rights reserved.</span>
</v-footer> -->
</fullscreen>
</v-app>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'; // , mapActions
import ThemeSwitch from '@/components/common/ThemeSwitch';
import AdminMenu from '@/components/common/AdminMenu';
import FadeLoader from 'vue-spinner/src/FadeLoader.vue';
import ChangePswdPop from '~/components/common/modal/ChangePswdPop';
export default {
components: {
ThemeSwitch,
AdminMenu,
FadeLoader,
ChangePswdPop,
},
data() {
return {
fullscreen: false,
activeTree: [],
clipped: false,
fixed: false,
miniVariant: false,
// activeTabIdx: "",
routerTabInstance: null,
// programIdObj: null,
myPrgmId: null,
treeValue: [],
menuIconById: {
// MNU0003: 'mdi-chart-line',
// MNU0004: 'mdi-alarm-light',
// MNU0005: 'mdi-pencil-box-outline',
// MNU0006: 'mdi-cog-outline',
MNU0002: 'mdi-monitor',
MNU0091: 'mdi-chart-box',
MNU0102: 'mdi-human-male-board-poll',
MNU0103: 'mdi-file-chart-outline',
MNU0104: 'mdi-chart-sankey-variant',
MNU0106: 'mdi-database-edit-outline',
MNU0105: 'mdi-chart-bell-curve',
MNU0006: 'mdi-bulletin-board',
MNU0007: 'mdi-cog',
menu2: 'mdi-monitor',
menu3: 'mdi-chart-box',
menu4: 'mdi-human-male-board-poll',
menu5: 'mdi-file-chart-outline',
menu6: 'mdi-chart-sankey-variant',
menu7: 'mdi-database-edit-outline',
menu8: 'mdi-bulletin-board',
},
isLoading: false,
loadingStackCnt: 0,
bookmarkBtn: 0,
myMenuList: [],
prgmIdList: [],
initPageData: {},
obj: {},
newObj: {},
};
},
computed: {
...mapState({
myHome: 'myHome',
myHomeTabItems: 'myHomeTabItems',
indexRoot: 'indexRoot',
treevieItems: 'treevieItems',
menuData: 'menuData',
menuLink: state => state.modules.menu,
activeMenuId: state => state.activeMenuInfo.menuId,
isDarkMode: 'isDarkMode',
drawer: state => state.drawer,
userInfo: state => state.userInfo,
pageData: 'pageData',
}),
activeTabs() {
if (this.routerTabInstance) {
return this.routerTabInstance.activeTab;
} else {
return this.myHome.root;
}
},
menuIconKeys() {
return Object.keys(this.menuIconById);
},
},
watch: {
activeTabs: {
// 탭 클릭시 좌측 treeview 싱크 맞추가
deep: true,
handler(value) {
if (value) {
const prgmId = value.prgmId;
let thisPrgmId = this.$route.query.prgmId;
var tmp = 0;
for (var i = 0; i < this.myMenuList.length; i++) {
if (this.myMenuList[i].prgmId == thisPrgmId) {
tmp = 1;
}
}
this.bookmarkBtn = tmp;
//if (thisPrgmId && this.myPrgmId && this.myPrgmId != thisPrgmId) {
this.myPrgmId = prgmId;
this.activeTree.pop(); // 기존 황성화 트리 값 삭제
this.activeTree.push(thisPrgmId); // 인덱스가 아닐 경우 새로 넣어줌
// this.$set(this.activeTree, 0, prgmId); // treeview activetree 새로 셋팅 <= 위 pop() 과 push() 로 대체
//}
}
},
},
activeTree: {
deep: true,
handler(newVal, oldVal) {
var _this = this;
const nv = newVal[0];
const ov = oldVal[0];
if (nv !== ov) {
if (!nv) {
// 중복클릭 시 발생 상황 기존 값을 다시 넣어줌
this.activeTree.push(ov);
} else {
this.myPrgmId = nv;
if (this.menuData[nv].url) {
const menuUrl = this.menuData[nv].url;
const menuId = this.menuData[nv].menuId;
const isCommMenu = menuUrl.indexOf('comm/');
const isEmsMenu = menuUrl.indexOf('ems/');
const isCmmsMenu = menuUrl.indexOf('cmms/');
// console.log('activeTree...');
if (isCommMenu > -1 || isEmsMenu > -1 || isCmmsMenu > -1) {
// console.log('activeTree if stmt1');
// console.log('this.isLoading : ', this.isLoading);
// if(this.isLoading == true){
// console.log('if isLoading stmt1');
// return;
// }
this.$router.push({
path: `${this.menuData[nv].url}?prgmId=${nv}`,
});
// this.$router.beforeEach((to, from, next) => {
// if(_this.isLoading == true){
// next(false);
// }
// if (!to.matched.length) {
// next(false);
// } else {
// next();
// }
// });
var tmp = 0;
for (var i = 0; i < this.myMenuList.length; i++) {
if (this.myMenuList[i].menuId == menuId) {
tmp = 1;
}
}
this.bookmarkBtn = tmp;
} else {
// console.log('activeTree if stmt2');
// console.log('this.isLoading : ', this.isLoading);
// if(this.isLoading == true){
// console.log('if isLoading stmt2');
// return;
// }
this.$refs.routerTab.openIframe(
encodeURI(
`http://localhost:9999${this.menuData[nv].url}?prgmId=${nv}`,
),
this.menuData[nv].menuNm,
);
}
this.$axios.get(`${this.menuData[nv].url}?$menuId=${menuId}`);
} else alert('지정된 페이지 경로가 없습니다.');
}
}
},
},
menuData: {
deep: true,
handler(newVal, oldVal) {},
},
pageData: {
deep: true,
handler(newVal, oldVal) {
localStorage.setItem('pageData', JSON.stringify(this.pageData));
//console.log("localPageData", this.pageData);
},
},
// menuLink: {
// deep: true,
// handler() {
// let prgmIdList = Object.keys(this.menuData);
// let initPageData = {};
// prgmIdList.forEach(item => {
// let newObj = {
// [item] : {}
// };
// initPageData = Object.assign(initPageData, newObj)
// });
// }
// }
},
created() {},
beforeUnmount() {
//window.removeEventListener('beforeunload', this.unLoadEvent);
},
async mounted() {
//window.addEventListener('beforeunload', this.unLoadEvent);
const _this = this;
await this.getMenu({});
await this.initPageDataFunc();
await this.selectMyMenuFunc();
this.routerTabInstance = this.$refs.routerTab;
if (this.$route.fullPath == '/') {
this.routerTabInstance.reset();
this.$router.replace(this.myHome.root);
} else if (this.$route.fullPath != this.myHome.root) {
this.$refs.routerTab.items.unshift(this.myHomeTabItems);
} else {
this.refreshTab();
}
// this.$router.beforeEach((to, from, next) => {
// _this.isLoading = true;
// // console.log('$router.beforeEach...');
// // console.log('_this.isLoading[beforeEach] : ', _this.isLoading);
// // console.log('_this.loadingStackCnt : ', _this.loadingStackCnt);
// if(_this.loadingStackCnt > 0 && _this.isLoading){
// next(false);
// // return;
// }else if (!to.matched.length){
// next(false);
// }else{
// next();
// }
// });
// this.$router.afterEach((to, from, failure) => {
// });
// 요청 인터셉터
this.$axios.interceptors.request.use(
function(config) {
//alert(1)
_this.isLoading = true;
if(config.url.search('Page')<0){
// _this.loadingStackCnt++;
}
return config;
},
function(error) {
// 에라 나면 로딩 끄기
//alert(2)
_this.isLoading = false;
// if(error.url.search('Page')<0){
// _this.loadingStackCnt--;
// }
return Promise.reject(error);
},
);
// 응답 인터셉터
this.$axios.interceptors.response.use(
function(response) {
_this.isLoading = false;
if(response.config.url.search('Page')<0){
_this.loadingStackCnt--;
}
//alert(3)
return response;
},
function(error) {
// 응답 에러 시에도 로딩 끄기
//alert(4 )
_this.isLoading = false;
// if(error.url.search('Page')<0){
// _this.loadingStackCnt--;
// }
return Promise.reject(error);
},
);
},
methods: {
...mapMutations({
setDrawer: 'setDrawer', // 사이드메뉴 접고 펼치기
setPageDataInit: 'setPageDataInit',
}),
...mapActions({
getMenu: 'modules/menu/getMenu', // 트리메뉴 가져오기
chkOpenTabList: 'chkOpenTabList', // 트리메뉴 클릭 시 해당 pprgmId push
postUpdateApi: 'modules/list/postUpdateApi',
postApiReturn: 'modules/list/postApiReturn',
}),
// // tabActive(id) {},
// clkTab(itemArr) {
// console.log(itemArr[0]);
// if (!itemArr[0].to) return;
// this.$router.push({
// path: itemArr[0].to
// });
// },
toggle() {
this.fullscreen = !this.fullscreen;
},
refreshTab() {
// console.log("현재 탭 새로고침");
//this.routerTabInstance.refresh();
this.$nuxt.refresh();
this.routerTabInstance.refresh();
},
delAllTabsData() {
// console.log("탭 전체 닫기");
// for (let i = this.routerTabInstance.items.length - 1; i > -1; --i) {
// const diffTo = this.routerTabInstance.items[i].to;
// if (diffTo != this.myHome.root) {
// this.routerTabInstance.items.splice(i, 1);
// }
// }
//if(this.$router.currentRoute.fullPath != this.myHome.root){
if (this.routerTabInstance.items.length > 0) {
this.routerTabInstance.reset();
}
this.$router.replace(this.myHome.root);
//}
},
deleteSblingsTab() {
// console.log("탭 나머지 닫기");
// for (let i = this.routerTabInstance.items.length - 1; i > -1; --i) {
// const activeTo = this.routerTabInstance.activeTab.to;
// const diffTo = this.routerTabInstance.items[i].to;
// if (activeTo != diffTo && diffTo != this.myHome.root) {
// this.routerTabInstance.items.splice(i, 1);
// }
// }
if (this.routerTabInstance.items.length > 1) {
for (let i = this.routerTabInstance.items.length - 1; i > -1; --i) {
const activeTo = this.routerTabInstance.activeTab.to;
const diffTo = this.routerTabInstance.items[i].to;
if (activeTo != diffTo && diffTo != this.myHome.root) {
this.routerTabInstance.close(diffTo);
}
}
}
},
tabScrollMove(dir) {
const scrollTab = this.routerTabInstance.$refs.scroll;
const scrollWidth =
scrollTab.scrollData.scrollWidth - scrollTab.scrollData.clientWidth;
const scrollLeft = scrollTab.scrollData.scrollLeft;
const xAxis = this.calcScroll(scrollLeft, scrollWidth, dir);
scrollTab.scrollTo(xAxis, 0);
},
updateTreeview() {
if (this.miniVariant) {
// sidebar 접혀져 있을 때
this.$refs.treeview.updateAll();
} else {
// sidebar 펼쳐져 있을 때
}
},
// 열려있는 노드의 key 값 리턴(선택된 값이 아님)
openNode(node) {
//console.log('onOpen');
if (this.miniVariant) {
// sidebar 접혀져 있을 때
if (event.currentTarget.id !== this.$refs.appbarnavicon.$refs.link.id) {
this.$refs.appbarnavicon.click(event);
}
} else {
// sidebar 펼쳐져 있을 때
}
},
doMouseOver: function(event) {
//console.log(event);
},
calcScroll(sl, sw, dir) {
const deScrW = 60;
let returnSl = 0;
switch (dir) {
case 'prev':
returnSl = sl - deScrW <= 0 ? 0 : sl - deScrW;
break;
case 'next':
returnSl = sl + deScrW >= sw ? sw : sl + deScrW;
break;
default:
break;
}
return returnSl;
},
initPageDataFunc() {
const _this = this;
this.prgmIdList = Object.keys(this.menuData);
this.initPageData = {};
this.prgmIdList.forEach(item => {
_this.obj = {};
if (_this.pageData[item]) {
_this.obj = _this.pageData[item];
}
_this.newObj = {};
_this.newObj = {
[item]: _this.obj,
};
_this.initPageData = Object.assign(
{},
_this.initPageData,
_this.newObj,
);
});
localStorage.setItem('pageData', JSON.stringify(this.initPageData));
this.setPageDataInit(this.initPageData);
},
onCloseTab(to) {
const findIndex = this.$tabs.items.findIndex(v => v.to === to);
const { to: next } = this.$tabs.items[findIndex - 1];
this.$tabs.close(to, null);
if (this.$router.currentRoute.fullPath != next) {
this.$router.replace(next);
}
},
async addBookMark() {
var params = {
menuId: this.activeMenuId,
};
await this.postUpdateApi({
apiKey: 'saveBookmark',
sendParam: {
datas: {
bookmarkDt: [params],
},
params: {},
},
});
const res = await this.postApiReturn({
apiKey: 'selectMyMenu',
resKey: 'menuData',
sendParam: {},
});
this.myMenuList = res;
this.bookmarkBtn = 1;
},
async removeBookMark() {
var params = {
menuId: this.activeMenuId,
};
await this.postUpdateApi({
apiKey: 'deleteBookmark',
sendParam: {
datas: {
bookmarkDt: [params],
},
params: {},
},
});
const res = await this.postApiReturn({
apiKey: 'selectMyMenu',
resKey: 'menuData',
sendParam: {},
});
this.myMenuList = res;
this.bookmarkBtn = 0;
},
moveToMyMenu(url, menuId, prgmId) {
// console.log('moveToMyMenu...');
// if(this.isLoading == true){
// console.log('if isLoading stmt3');
// return;
// }
this.$router.push({
path: url + '?prgmId=' + prgmId,
});
},
async selectMyMenuFunc() {
const headers = {
headers: {
'X-Fems-MenuId': 'MNU0001',
},
};
const params = { params: {} };
const res = await this.$axios.post(
'/comm/base/MenuMngCtr/selectMyMenu',
params,
headers,
);
this.myMenuList = res.data.dataset.menuData;
},
// unLoadEvent: function (event) {
// //if (this.isLeaveSite) return;
// //this.delAllTabsData();
// this.$router.push({
// path: this.myHome.root
// });
// console.log("event", event)
// event.preventDefault();
// event.returnValue = '';
// },
// treeModel(obj) {
// console.log(">>> treeModel::obj = ", obj);
// this.treeValue[0] = obj;
// this.$refs.treeview.updateAll();
// // console.log(this.$refs.treeview);
// // this.$refs.treeview.activeCache = obj.id;
// }
},
};
</script>
<style lang="scss" scoped>
.loading {
z-index: 99;
position: fixed;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.4);
//box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
}
.v-spinner {
top: 50%;
left: 50%;
}
</style>

928
layouts/default_bk.vue
View File

@ -1,928 +0,0 @@
<template>
<v-app :class="`${isDarkMode ? 'dark-mode' : 'light-mode'}`">
<!-- <v-app :class="'light-mode'"> -->
<fullscreen :fullscreen.sync="fullscreen">
<v-navigation-drawer
ref="navigationdrawer"
:value="drawer"
:mini-variant="miniVariant"
:clipped="clipped"
:absolute="true"
mini-variant-width="60"
fixed
app
>
<div class="d-flex align-center justify-space-between py-4 px-3">
<router-link class="home" :to="myHome.root">
<div class="lnb-logo">
<img v-if="isDarkMode" src="@/assets/images/logo_dm.png" />
<img v-else src="@/assets/images/logo_lm.png" />
</div>
<!-- <div class="lnb-logo">FEMS</div>-->
</router-link>
<v-app-bar-nav-icon
ref="appbarnavicon"
id="appbarnavicon"
@click.stop="miniVariant = !miniVariant"
@click="updateTreeview"
:style="{
backgroundColor: 'transparent',
color: isDarkMode ? '#fff' : '#111',
}"
/>
<!-- <router-view :key="$route.fullPath"/> -->
</div>
<!--
v-model="treeValue"
return-object
@input="treeModel"
@update:active="clkTab"
-->
<AdminMenu
:miniVariant="miniVariant"
:userNm="this.userInfo.userNm"
:comId="this.userInfo.comId"
/>
<component
ref="changePswdPop"
:is="'ChangePswdPop'"
v-show="false"
:comId="this.userInfo.comId"
/>
<v-treeview
ref="treeview"
:active.sync="activeTree"
active-class="v-treeview-node--active"
:items="treevieItems"
activatable
hoverable
color="#3896ff"
open-on-click
@update:open="openNode"
>
<template slot="label" slot-scope="{ item }">
<button :class="{ 'justify-center': miniVariant }" @mouseover="doMouseOver">
<v-icon
v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
v-text="menuIconById[item.menuId]"
:class="{ 'mr-2': !miniVariant }"
size="20"
></v-icon>
<v-icon
v-else-if="item.lvl === 1 && !menuIconKeys.includes(item.menuId)"
:class="{ 'mr-2': !miniVariant }"
size="20"
>mdi-package-variant-closed</v-icon
>
<v-icon
v-else-if="item.lvl === 2"
:class="{ 'mr-2': !miniVariant }"
size="10"
>
mdi-checkbox-blank
</v-icon>
<v-icon
v-else-if="item.lvl >= 3 && item.childeVo.length === 0 && item.url"
:class="miniVariant === false ? 'mr-2' : ''"
size="9"
>
$depth3rdBulletDark
</v-icon>
<span v-if="item.url"
>{{ item.menuNm }}
<!-- <span v-if="item.bookmark" class="material-icons" style="font-size: 17px; vertical-align: middle;" @click="addBookMark(item.menuId, item.url, item.bookmark)">star</span>
<span v-else-if="!item.bookmark" class="material-icons" style="font-size: 17px; vertical-align: middle;" @click="addBookMark(item.menuId, item.url, item.bookmark)">star_border</span> -->
</span>
<span v-else-if="!item.url">{{ item.menuNm }}</span>
<v-icon v-if="item.lvl >= 1 && item.childeVo.length > 0 && !item.url">
mdi-chevron-down
</v-icon>
</button>
</template>
</v-treeview>
<!-- <template #append>
<p
class="text-caption"
:style="{ letterSpacing: '-0.2px !important' }"
>
&copy; 2022. SK C&C all rights reserved.
</p>
</template> -->
</v-navigation-drawer>
<v-main>
<v-container fluid>
<router-tab
ref="routerTab"
:tabs="treevieItems"
:keep-last-tab="false"
:contextmenu="false"
>
<template slot-scope="{ title, closable, to }">
<span>{{ title }}</span>
<v-icon size="18" class="ml-2" v-if="closable" @click.stop="onCloseTab(to)"
>mdi-close-circle</v-icon
>
</template>
<template #end>
<ThemeSwitch style="margin-right: 20px" />
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<!-- <v-btn :ripple="false" tile class="btn-close" v-bind="attrs" v-on="on">
<span class="body-2">닫기</span>
<v-icon size="20">mdi-chevron-down</v-icon>
</v-btn> -->
<a-button style="width: 80px; height: 36px" class="btn-close">
<span class="body-2">닫기</span>
<v-icon size="20">mdi-chevron-down</v-icon></a-button
>
</template>
<v-list
class="py-2 btn-close-menu-list"
:style="{
backgroundColor: isDarkMode ? '#144985' : '#3f4d7d',
}"
>
<v-list-item class="px-2">
<v-list-item-title @click="delAllTabsData()" class="body-2"
>전체 닫기</v-list-item-title
>
</v-list-item>
<v-list-item class="px-2">
<v-list-item-title @click="deleteSblingsTab()" class="body-2"
>나머지 닫기</v-list-item-title
>
</v-list-item>
</v-list>
</v-menu>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<!-- <v-btn
:ripple="false"
tile
class="btn-close"
v-bind="attrs"
v-on="on"
style="width: 100px"
>
<span class="body-2">즐겨찾기</span>
<v-icon size="20">mdi-chevron-down</v-icon>
</v-btn> -->
<a-button style="width: 100px; height: 36px" class="btn-close">
<span class="body-2">즐겨찾기</span>
<v-icon size="20">mdi-chevron-down</v-icon></a-button
>
</template>
<v-list
v-if="myMenuList.length > 0"
class="py-2 btn-close-menu-list"
:style="{
backgroundColor: isDarkMode ? '#144985' : '#3f4d7d',
}"
>
<v-list-item
v-for="item in myMenuList"
:key="item.menuId"
class="px-2"
style="cursor: pointer"
>
<v-list-item-title
@click="moveToMyMenu(item.url, item.menuId, item.prgmId)"
class="body-2"
>{{ item.menuNm }}</v-list-item-title
>
</v-list-item>
</v-list>
</v-menu>
<!-- <v-btn
icon
tile
:ripple="false"
@click="removeBookMark()"
v-if="bookmarkBtn == 1"
>
<span
class="material-icons"
style="font-size: 17px; vertical-align: middle"
>star</span
>
</v-btn> -->
<a-button
id="refresh"
:style="{
padding: '0',
width: '36px',
height: '36px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '4px', // square corners
}"
type="text"
@click="removeBookMark"
v-if="bookmarkBtn == 1"
>
<span
class="material-icons"
style="font-size: 17px; vertical-align: middle"
>star</span
>
</a-button>
<!-- <v-btn
icon
tile
:ripple="false"
@click="addBookMark()"
v-if="bookmarkBtn == 0"
>
<span
class="material-icons"
style="font-size: 17px; vertical-align: middle"
>star_border</span
>
</v-btn> -->
<a-button
id="refresh"
:style="{
padding: '0',
width: '36px',
height: '36px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '4px', // square corners
}"
type="text"
@click="addBookMark"
v-if="bookmarkBtn == 0"
>
<span
class="material-icons"
style="font-size: 17px; vertical-align: middle"
>star_border</span
>
</a-button>
<v-btn
style="
background-color: white;
color: #fff;
border: 0.2px solid rgb(217, 217, 217);
"
id="refresh"
icon
tile
:ripple="false"
@click="refreshTab()"
>
<v-icon style="color: rgba(0, 0, 0, 0.54)">mdi-refresh</v-icon>
</v-btn>
<!-- <a-button
id="refresh"
:style="{
padding: '0',
width: '36px',
height: '36px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '4px', // square corners
}"
type="text"
@click="refreshTab"
>
<v-icon >mdi-refresh</v-icon>
</a-button> -->
<!-- <a-button id="refresh" type="text" @click="setDrawer" class="icon-button">
    <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
</a-button>
 
<a-button type="text" @click="setDrawer" class="icon-button">
    <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
</a-button> -->
<!-- <a-button
:style="{
padding: '0',
width: '36px',
height: '36px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '4px', // square corners
}"
type="text"
@click="toggle"
>
<v-icon v-if="!fullscreen">mdi-arrow-expand-all</v-icon>  
<v-icon v-else>mdi-arrow-collapse-all</v-icon>
</a-button> -->
<v-btn
style="
background-color: white;
color: #fff;
border: 0.2px solid rgb(217, 217, 217);
"
icon
tile
:ripple="false"
@click="toggle()"
>
<v-icon style="color: rgba(0, 0, 0, 0.54)" v-if="!fullscreen"
>mdi-arrow-expand-all</v-icon
>
<v-icon style="color: rgba(0, 0, 0, 0.54)" v-else
>mdi-arrow-collapse-all</v-icon
>
</v-btn>
</template>
</router-tab>
</v-container>
<div v-if="loadingStackCnt > 0" class="loading-container">
<div class="loading">
<Fade-loader />
</div>
</div>
</v-main>
<!-- <v-footer
:absolute="!fixed"
app
:class="
drawer
? miniVariant
? 'drawerFooter miniFooter'
: 'drawerFooter'
: 'full-size'
"
>
<span>&copy; 2022. SK C&C all rights reserved.</span>
</v-footer> -->
</fullscreen>
</v-app>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex"; // , mapActions
import ThemeSwitch from "@/components/common/ThemeSwitch";
import AdminMenu from "@/components/common/AdminMenu";
import FadeLoader from "vue-spinner/src/FadeLoader.vue";
import ChangePswdPop from "~/components/common/modal/ChangePswdPop";
export default {
components: {
ThemeSwitch,
AdminMenu,
FadeLoader,
ChangePswdPop,
},
data() {
return {
fullscreen: false,
activeTree: [],
clipped: false,
fixed: false,
miniVariant: false,
// activeTabIdx: "",
routerTabInstance: null,
// programIdObj: null,
myPrgmId: null,
treeValue: [],
menuIconById: {
// MNU0003: 'mdi-chart-line',
// MNU0004: 'mdi-alarm-light',
// MNU0005: 'mdi-pencil-box-outline',
// MNU0006: 'mdi-cog-outline',
MNU0002: "mdi-monitor",
MNU0091: "mdi-chart-box",
MNU0102: "mdi-human-male-board-poll",
MNU0103: "mdi-file-chart-outline",
MNU0104: "mdi-chart-sankey-variant",
MNU0106: "mdi-database-edit-outline",
MNU0105: "mdi-chart-bell-curve",
MNU0006: "mdi-bulletin-board",
MNU0007: "mdi-cog",
},
isLoading: false,
loadingStackCnt: 0,
bookmarkBtn: 0,
myMenuList: [],
prgmIdList: [],
initPageData: {},
obj: {},
newObj: {},
};
},
computed: {
...mapState({
myHome: "myHome",
myHomeTabItems: "myHomeTabItems",
indexRoot: "indexRoot",
treevieItems: "treevieItems",
menuData: "menuData",
menuLink: (state) => state.modules.menu,
activeMenuId: (state) => state.activeMenuInfo.menuId,
isDarkMode: "isDarkMode",
drawer: (state) => state.drawer,
userInfo: (state) => state.userInfo,
pageData: "pageData",
}),
activeTabs() {
if (this.routerTabInstance) {
return this.routerTabInstance.activeTab;
} else {
return this.myHome.root;
}
},
menuIconKeys() {
return Object.keys(this.menuIconById);
},
},
watch: {
activeTabs: {
// 탭 클릭시 좌측 treeview 싱크 맞추가
deep: true,
handler(value) {
if (value) {
const prgmId = value.prgmId;
let thisPrgmId = this.$route.query.prgmId;
var tmp = 0;
for (var i = 0; i < this.myMenuList.length; i++) {
if (this.myMenuList[i].prgmId == thisPrgmId) {
tmp = 1;
}
}
this.bookmarkBtn = tmp;
//if (thisPrgmId && this.myPrgmId && this.myPrgmId != thisPrgmId) {
this.myPrgmId = prgmId;
this.activeTree.pop(); // 기존 황성화 트리 값 삭제
this.activeTree.push(thisPrgmId); // 인덱스가 아닐 경우 새로 넣어줌
// this.$set(this.activeTree, 0, prgmId); // treeview activetree 새로 셋팅 <= 위 pop() 과 push() 로 대체
//}
}
},
},
activeTree: {
deep: true,
handler(newVal, oldVal) {
var _this = this;
const nv = newVal[0];
const ov = oldVal[0];
if (nv !== ov) {
if (!nv) {
// 중복클릭 시 발생 상황 기존 값을 다시 넣어줌
this.activeTree.push(ov);
} else {
this.myPrgmId = nv;
console.log("menu:", this.menuData);
if (this.menuData[nv].url) {
const menuUrl = this.menuData[nv].url;
const menuId = this.menuData[nv].menuId;
const isCommMenu = menuUrl.indexOf("comm/");
const isEmsMenu = menuUrl.indexOf("ems/");
const isCmmsMenu = menuUrl.indexOf("cmms/");
// console.log('activeTree...');
console.log(isEmsMenu);
if (isCommMenu > -1 || isEmsMenu > -1 || isCmmsMenu > -1) {
// console.log('activeTree if stmt1');
// console.log('this.isLoading : ', this.isLoading);
// if(this.isLoading == true){
// console.log('if isLoading stmt1');
// return;
// }
// this.$router.push({
// path: `${this.menuData[nv].url}?prgmId=${nv}`,
// });
this.$router.replace("/").then(() => {
this.$router.push({
path: `${this.menuData[nv].url}?prgmId=${nv}`,
});
});
// this.$router.beforeEach((to, from, next) => {
// if(_this.isLoading == true){
// next(false);
// }
// if (!to.matched.length) {
// next(false);
// } else {
// next();
// }
// });
var tmp = 0;
for (var i = 0; i < this.myMenuList.length; i++) {
if (this.myMenuList[i].menuId == menuId) {
tmp = 1;
}
}
this.bookmarkBtn = tmp;
} else {
// console.log('activeTree if stmt2');
// console.log('this.isLoading : ', this.isLoading);
// if(this.isLoading == true){
// console.log('if isLoading stmt2');
// return;
// }
this.$refs.routerTab.openIframe(
encodeURI(`http://localhost:9999${this.menuData[nv].url}?prgmId=${nv}`),
this.menuData[nv].menuNm
);
}
this.$axios.get(`${this.menuData[nv].url}?$menuId=${menuId}`);
} else alert("지정된 페이지 경로가 없습니다.");
}
}
},
},
menuData: {
deep: true,
handler(newVal, oldVal) {},
},
pageData: {
deep: true,
handler(newVal, oldVal) {
localStorage.setItem("pageData", JSON.stringify(this.pageData));
//console.log("localPageData", this.pageData);
},
},
// menuLink: {
// deep: true,
// handler() {
// let prgmIdList = Object.keys(this.menuData);
// let initPageData = {};
// prgmIdList.forEach(item => {
// let newObj = {
// [item] : {}
// };
// initPageData = Object.assign(initPageData, newObj)
// });
// }
// }
},
created() {
this.$vuetify.theme.isDark = false;
this.setThemeChange(false);
},
beforeUnmount() {
//window.removeEventListener('beforeunload', this.unLoadEvent);
},
async mounted() {
//window.addEventListener('beforeunload', this.unLoadEvent);
const _this = this;
await this.getMenu({});
await this.initPageDataFunc();
await this.selectMyMenuFunc();
this.routerTabInstance = this.$refs.routerTab;
if (this.$route.fullPath == "/") {
this.routerTabInstance.reset();
this.$router.replace(this.myHome.root);
} else if (this.$route.fullPath != this.myHome.root) {
this.$refs.routerTab.items.unshift(this.myHomeTabItems);
} else {
this.refreshTab();
}
this.$router.beforeEach((to, from, next) => {
_this.isLoading = true;
// console.log('$router.beforeEach...');
// console.log('state : ', _this.$store.state)
// console.log('activeActionCnt : ', _this.$store.state.activeActionCnt)
// console.log('_this.isLoading[beforeEach] : ', _this.isLoading);
// console.log('_this.loadingStackCnt : ', _this.loadingStackCnt);
// if(_this.loadingStackCnt > 0 && _this.isLoading && _this.$store.state.activeActionCnt > 0){
if (_this.loadingStackCnt > 0 && _this.isLoading) {
next(false);
// return;
} else if (!to.matched.length) {
next(false);
} else {
next();
}
});
this.$router.afterEach((to, from, failure) => {});
// 요청 인터셉터
this.$axios.interceptors.request.use(
function (config) {
//alert(1)
_this.isLoading = true;
if (config.url.search("Page") < 0) {
_this.loadingStackCnt++;
}
return config;
},
function (error) {
// 에라 나면 로딩 끄기
//alert(2)
_this.isLoading = false;
// if(error.url.search('Page')<0){
// _this.loadingStackCnt--;
// }
return Promise.reject(error);
}
);
// 응답 인터셉터
this.$axios.interceptors.response.use(
function (response) {
_this.isLoading = false;
if (response.config.url.search("Page") < 0) {
_this.loadingStackCnt--;
}
//alert(3)
return response;
},
function (error) {
// 응답 에러 시에도 로딩 끄기
//alert(4 )
_this.isLoading = false;
// if(error.url.search('Page')<0){
// _this.loadingStackCnt--;
// }
return Promise.reject(error);
}
);
},
methods: {
...mapMutations({
setDrawer: "setDrawer", // 사이드메뉴 접고 펼치기
setPageDataInit: "setPageDataInit",
setThemeChange: "setThemeChange",
}),
...mapActions({
getMenu: "modules/menu/getMenu", // 트리메뉴 가져오기
chkOpenTabList: "chkOpenTabList", // 트리메뉴 클릭 시 해당 pprgmId push
postUpdateApi: "modules/list/postUpdateApi",
postApiReturn: "modules/list/postApiReturn",
}),
// // tabActive(id) {},
// clkTab(itemArr) {
// console.log(itemArr[0]);
// if (!itemArr[0].to) return;
// this.$router.push({
// path: itemArr[0].to
// });
// },
toggle() {
this.fullscreen = !this.fullscreen;
},
refreshTab() {
// console.log("현재 탭 새로고침");
//this.routerTabInstance.refresh();
this.$nuxt.refresh();
this.routerTabInstance.refresh();
},
delAllTabsData() {
// console.log("탭 전체 닫기");
// for (let i = this.routerTabInstance.items.length - 1; i > -1; --i) {
// const diffTo = this.routerTabInstance.items[i].to;
// if (diffTo != this.myHome.root) {
// this.routerTabInstance.items.splice(i, 1);
// }
// }
//if(this.$router.currentRoute.fullPath != this.myHome.root){
if (this.routerTabInstance.items.length > 0) {
this.routerTabInstance.reset();
}
this.$router.replace(this.myHome.root);
//}
},
deleteSblingsTab() {
// console.log("탭 나머지 닫기");
// for (let i = this.routerTabInstance.items.length - 1; i > -1; --i) {
// const activeTo = this.routerTabInstance.activeTab.to;
// const diffTo = this.routerTabInstance.items[i].to;
// if (activeTo != diffTo && diffTo != this.myHome.root) {
// this.routerTabInstance.items.splice(i, 1);
// }
// }
if (this.routerTabInstance.items.length > 1) {
for (let i = this.routerTabInstance.items.length - 1; i > -1; --i) {
const activeTo = this.routerTabInstance.activeTab.to;
const diffTo = this.routerTabInstance.items[i].to;
if (activeTo != diffTo && diffTo != this.myHome.root) {
this.routerTabInstance.close(diffTo);
}
}
}
},
tabScrollMove(dir) {
const scrollTab = this.routerTabInstance.$refs.scroll;
const scrollWidth =
scrollTab.scrollData.scrollWidth - scrollTab.scrollData.clientWidth;
const scrollLeft = scrollTab.scrollData.scrollLeft;
const xAxis = this.calcScroll(scrollLeft, scrollWidth, dir);
scrollTab.scrollTo(xAxis, 0);
},
updateTreeview() {
if (this.miniVariant) {
// sidebar 접혀져 있을 때
this.$refs.treeview.updateAll();
} else {
// sidebar 펼쳐져 있을 때
}
},
// 열려있는 노드의 key 값 리턴(선택된 값이 아님)
openNode(node) {
//console.log('onOpen');
if (this.miniVariant) {
// sidebar 접혀져 있을 때
if (event.currentTarget.id !== this.$refs.appbarnavicon.$refs.link.id) {
this.$refs.appbarnavicon.click(event);
}
} else {
// sidebar 펼쳐져 있을 때
}
},
doMouseOver: function (event) {
//console.log(event);
},
calcScroll(sl, sw, dir) {
const deScrW = 60;
let returnSl = 0;
switch (dir) {
case "prev":
returnSl = sl - deScrW <= 0 ? 0 : sl - deScrW;
break;
case "next":
returnSl = sl + deScrW >= sw ? sw : sl + deScrW;
break;
default:
break;
}
return returnSl;
},
initPageDataFunc() {
const _this = this;
this.prgmIdList = Object.keys(this.menuData);
this.initPageData = {};
this.prgmIdList.forEach((item) => {
_this.obj = {};
if (_this.pageData[item]) {
_this.obj = _this.pageData[item];
}
_this.newObj = {};
_this.newObj = {
[item]: _this.obj,
};
_this.initPageData = Object.assign({}, _this.initPageData, _this.newObj);
});
localStorage.setItem("pageData", JSON.stringify(this.initPageData));
this.setPageDataInit(this.initPageData);
},
onCloseTab(to) {
const findIndex = this.$tabs.items.findIndex((v) => v.to === to);
const { to: next } = this.$tabs.items[findIndex - 1];
this.$tabs.close(to, null);
if (this.$router.currentRoute.fullPath != next) {
this.$router.replace(next);
}
},
async addBookMark() {
var params = {
menuId: this.activeMenuId,
};
await this.postUpdateApi({
apiKey: "saveBookmark",
sendParam: {
datas: {
bookmarkDt: [params],
},
params: {},
},
});
const res = await this.postApiReturn({
apiKey: "selectMyMenu",
resKey: "menuData",
sendParam: {},
});
// const res = [
// {
// comId: "abc",
// upMenuId: "abc",
// menuId: "dashboard",
// menuNm: "abc",
// url: "DashboardPage",
// authCd: "yes",
// lvl: 9999,
// prgmId: "PRG0001",
// },
// {
// comId: "abc",
// upMenuId: "dashboard",
// menuId: "test",
// menuNm: "test",
// url: "DashboardPage",
// authCd: "yes",
// lvl: 666,
// prgmId: "PRG0002",
// },
// ];
this.myMenuList = res;
this.bookmarkBtn = 1;
},
async removeBookMark() {
var params = {
menuId: this.activeMenuId,
};
await this.postUpdateApi({
apiKey: "deleteBookmark",
sendParam: {
datas: {
bookmarkDt: [params],
},
params: {},
},
});
const res = await this.postApiReturn({
apiKey: "selectMyMenu",
resKey: "menuData",
sendParam: {},
});
this.myMenuList = res;
this.bookmarkBtn = 0;
},
moveToMyMenu(url, menuId, prgmId) {
// console.log('moveToMyMenu...');
// if(this.isLoading == true){
// console.log('if isLoading stmt3');
// return;
// }
alert("move to", url);
this.$router.push({
path: url + "?prgmId=" + prgmId,
});
},
async selectMyMenuFunc() {
const headers = {
headers: {
"X-Fems-MenuId": "MNU0001",
},
};
const params = { params: {} };
const res = await this.$axios.post(
"/comm/base/MenuMngCtr/selectMyMenu",
params,
headers
);
this.myMenuList = res.data.dataset.menuData;
},
// unLoadEvent: function (event) {
// //if (this.isLeaveSite) return;
// //this.delAllTabsData();
// this.$router.push({
// path: this.myHome.root
// });
// console.log("event", event)
// event.preventDefault();
// event.returnValue = '';
// },
// treeModel(obj) {
// console.log(">>> treeModel::obj = ", obj);
// this.treeValue[0] = obj;
// this.$refs.treeview.updateAll();
// // console.log(this.$refs.treeview);
// // this.$refs.treeview.activeCache = obj.id;
// }
},
};
</script>
<style lang="scss" scoped>
.loading {
z-index: 99;
position: fixed;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.4);
//box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
}
.v-spinner {
top: 50%;
left: 50%;
}
</style>

2
mixin/global.js
View File

@ -58,7 +58,7 @@ export default {
layoutInit() {
if (this.$refs.searchFilter) {
const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
this.$refs.contents.style.minHeight = `calc(100% - ${searchFilterHeight + 20}px)`;
}
},
//init() {}

35
pages/comm/auth/MenuRoleMngPage.vue
View File

@ -22,8 +22,7 @@
customClass="input-large"
/>
</v-col>
<v-col :cols="6" class="text-right">
<!-- <v-btn @click="test = !test">WWW</v-btn> -->
<v-col class="text-right d-flex justify-end align-end mr-3">
<BtnSearch size="large" />
</v-col>
</v-row>
@ -31,8 +30,8 @@
</v-col>
</v-row>
<v-row ref="contents" style="height: 100vh;">
<v-col cols="12" lg="2" class="h100">
<v-row ref="contents" >
<v-col cols="12" lg="2" >
<v-card>
<v-card-title>
<span class="custom-title-4">역할 리스트</span>
@ -53,7 +52,7 @@
</div>
</v-card>
</v-col>
<v-col cols="12" lg="10" class="h100">
<v-col cols="12" lg="10" >
<v-card>
<v-card-title>
<span class="custom-title-4">역할 메뉴별 권한</span>
@ -70,7 +69,7 @@
:style="{ minHeight: '36px' }"
>[미배정]메뉴리스트</span
>
<div class="px-5" style="height:calc(100% - 64px)">
<div class="px-0 mt-2" style="height:calc(100% - 64px)">
<div
ref="treeGridParent"
class="w100 h100"
@ -113,7 +112,7 @@
/>
</v-col>
</v-row>
<div class="px-5" style="height:calc(100% - 64px)">
<div class="px-0 mt-2" style="height:calc(100% - 64px)">
<div
ref="treeGridParent2"
class="w100 h100"
@ -403,6 +402,17 @@ export default {
];
const myTreeColumns = [
{
header: '',
name: '',
align: 'center',
width: 30,
formatter: (props) => {
return `<label class="custom-radio">
<span class="radio-mark"></span>
</label>`;
}
},
{
header: '메뉴명',
name: 'menuNm',
@ -415,6 +425,17 @@ export default {
},
];
const myTreeColumns2 = [
{
header: '',
name: '',
align: 'center',
width: 30,
formatter: (props) => {
return `<label class="custom-radio">
<span class="radio-mark"></span>
</label>`;
}
},
{ header: '역할ID', name: 'roleId', hidden: true },
{ header: '메뉴ID', name: 'menuId', hidden: true },
{ header: '메뉴명', name: 'menuNm', minWidth: '235' },

80
pages/comm/base/CommCdMngPage.vue
View File

@ -1,33 +1,65 @@
<template>
<div class="l-layout">
<PageTitle text="공통코드" />
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="4">
<v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'시스템구분'"
dataKey="sysDivCd"
:labelCols="12"
:textCols="12"
:sendParam="{ commGrpCd: 'CO_SYSDIV', useFg: '1' }"
:addAll="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="4">
<v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'사용여부'"
:labelCols="12"
:textCols="12"
:dataKey="'useFg'"
customClass="select-large"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
/>
</v-col>
<v-col :cols="4" class="text-right">
<BtnSearch @click="search" />
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
label="그룹코드"
valueNm="commGrpCd"
:searchOption="true"
:labelCols="12"
:textCols="12"
customClass="input-large"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
label="그룹코드명"
valueNm="commGrpCdNm"
:searchOption="true"
:labelCols="12"
:textCols="12"
customClass="input-large"
/>
</v-col>
<v-col :cols="12" class="text-right">
<BtnSearch style="margin-top:20px" @click="search" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<!-- <v-row align="center" no-gutters>
<v-col :cols="4">
<InputText
:parentPrgmId="myPrgmId"
@ -48,7 +80,7 @@
:textCols="8"
/>
</v-col>
</v-row>
</v-row> -->
</v-card>
</v-col>
</v-row>
@ -85,7 +117,7 @@
<v-card class="pb-5">
<v-card-title>공통그룹코드 상세</v-card-title>
<div class="px-5" style="height:calc(100% - 70px)">
<v-tabs v-model="tab" :hide-slider="true">
<v-tabs v-model="tab" >
<v-tab
v-for="item in items"
:key="item.id"
@ -132,6 +164,7 @@ import Form from '~/components/common/form/Form';
import CommCdTab from '@/components/pages/comm/CommCdTab';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import PageTitle from "~/components/common/PageTitle";
let myTitle;
let myPrgmId;
@ -158,6 +191,7 @@ export default {
Form,
CommCdTab,
Grid,
PageTitle
},
data() {
return {
@ -229,6 +263,9 @@ export default {
const myOptions = {
scrollX: false,
header: {
height: 38,
},
};
this.setGridOption({
gridKey: this.gridName,
@ -241,7 +278,7 @@ export default {
{
header: '시스템구분',
name: 'sysDivCd',
align: 'center',
align: 'left',
formatter({ value }) {
let commCdNm = '';
if (sysCdList.length > 0) {
@ -278,7 +315,7 @@ export default {
{
header: '사용여부',
name: 'useFg',
align: 'center',
align: 'left',
formatter({ value }) {
const newValue = _this.pageData.useFgList.filter(
item => item.commCd == value,
@ -554,7 +591,10 @@ const myDetail = [
valueNm: 'commGrpCd',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-2',
required: true,
},
{
@ -563,7 +603,10 @@ const myDetail = [
valueNm: 'commGrpNm',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-2',
required: true,
},
{
@ -572,7 +615,10 @@ const myDetail = [
valueNm: 'sysDivCd',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-2 mt-3',
list: 'sysDivCdList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -584,7 +630,10 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-2 mt-10',
value: { '1': true, '0': false },
required: true,
},
@ -594,7 +643,10 @@ const myDetail = [
valueNm: 'rmrk',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-2 mt-3',
},
];
</script>

57
pages/comm/base/NoticeMngPage.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="l-layout">
<common-page-title />
<!-- 리스트 페이지 시작 -->
<div v-if="pageActionFlag == 'list'" class="h1001">
<v-card class="" >
@ -14,10 +15,12 @@
<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
</div>
</v-col>
<v-col :cols="12" ref="contents" class="mt-5">
<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 76px);">
<div ref="gridParent" class="h100 px-50">
<component :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
ref="noticeMngGrid" @getRowsData="getRowData" :dataPath="dataPathMock" />
<!-- <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
@getRowsData="getRowData" /> -->
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
@getRowsData="getRowData" :selectedRowDataWatchFlag="true" />
</div>
</v-col>
</v-row>
@ -266,7 +269,8 @@ export default {
myPrgmId: myPrgmId,
//comId: "SEMPIO",
//comId: this.userInfo.comId,
comId: this.$store.state.userInfo.comId,
// comId: this.$store.state.userInfo.comId,
bordNo: null,
pageActionFlag: 'list',
gridName: 'noticeMngGrid',
@ -467,12 +471,12 @@ export default {
value: columnList,
});
// -----------------------TEST------------------
this.dataPathMock[this.gridName] = {
column: columnList,
data: dataPathDataExample,
}
// -----------------------END TEST--------------
// // -----------------------TEST------------------
// this.dataPathMock[this.gridName] = {
// column: columnList,
// data: dataPathDataExample,
// }
// // -----------------------END TEST--------------
this.getGridData();
},
async getGridData() {
@ -481,31 +485,32 @@ export default {
};
this.loadGrid = false;
let res = null;
try {
res = await this.postApiReturn({
const res = await this.postApiReturn({
apiKey: 'selectPostList',
resKey: 'postData',
sendParam: params,
});
}
catch (err) { }
finally {
// -----Test mock data-------------
if (null === res) {
res = dataPathDataExample;
}
// -----End test
}
// console.log('----------DEBUG--------res: ', res);
const newRes = res.map(item => {
const newObj = {
...item,
rowStat: null,
dataSetId: item.dataSetId,
dataSetNm: item.dataSetNm,
useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
};
return newObj;
});
this.setGridData({
gridKey: this.gridName,
value: res,
});
this.$nextTick(() => {
this.loadGrid = true;
value: newRes,
});
this.setPageData({ isFind: false });
this.loadGrid = true;
},
getRowData(data) {
this.selectedRowKey = data.rowKey;

6
pages/comm/base/PrgmMngPage.vue
View File

@ -37,7 +37,7 @@
<v-row ref="contents">
<!-- 프로그램 리스트 -->
<v-col :cols="5" class="h100">
<v-col :cols="5" >
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0">프로그램 리스트</v-card-title>
@ -50,7 +50,7 @@
/>
</div>
</div>
<div style="min-height:calc(100% - 70px)">
<div style="min-height: 60vh">
<div ref="gridParent" class="px-5 h100">
<component
:ref="gridName"
@ -65,7 +65,7 @@
</v-card>
</v-col>
<!-- 프로그램 상세 -->
<v-col :cols="7" class="h100">
<v-col :cols="7" >
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0">프로그램 상세</v-card-title>

677
pages/ems/base/DashboardPage.vue
View File

@ -344,7 +344,7 @@
<v-row>
<v-col cols="auto" style="text-align: left">
<!-- <p class="textInfo">{{ ngDtlCnt }}</p> -->
<p class="card-text-info">200</p>
<p class="card-text-info">{{ ngDtlCnt }}</p>
</v-col>
<v-col :cols="3" style="text-align: left"> 건 </v-col>
</v-row>
@ -369,7 +369,7 @@
<v-row>
<v-col cols="auto" style="text-align: left">
<!-- <p class="textInfo">{{ ngDtlSolvCnt }}</p> -->
<p class="card-text-info">100</p>
<p class="card-text-info">{{ ngDtlSolvCnt }}</p>
</v-col>
<v-col :cols="3" style="text-align: left"> 건 </v-col>
</v-row>
@ -580,11 +580,7 @@ export default {
Chart,
UnusedStatPopPage,
EtcStatPopPage,
BtnSearch,
AntCard,
CheckBox,
RadioStandard,
PageTitle,
PageTitle
},
computed: {
...mapState({
@ -607,7 +603,6 @@ export default {
// let chartOption = this.getGuageChartOption2(this.chart_01);
let chartOption = getGaugeChartOption({
title: this.chart_01,
value: 75,
isDarkMode: this.isDarkMode,
});
chartOption["series"][0]["data"][0].value = this.$store.state.pageData[myPrgmId][
@ -618,7 +613,6 @@ export default {
// let chartOption3 = this.getGuageChartOption2(this.chart_03);
let chartOption3 = getGaugeChartOption({
title: this.chart_03,
value: 75,
isDarkMode: this.isDarkMode,
});
chartOption3["series"][0]["data"][0].value = this.$store.state.pageData[myPrgmId][
@ -719,13 +713,9 @@ export default {
// this.search();
await this.gridInit();
await new Promise((resolve) => setTimeout(resolve, 1500));
await this.getTodayEfficiencyStatus();
await this.getEnrgAndCO2Data();
await this.getGridData();
if (this.$router.currentRoute.fullPath == this.myHome.root) {
this.dtToday = Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm");
await this.getEnrgAndCO2Data();
await this.getCompareEqpmTotData();
await this.getTodayEfficiencyStatus();
@ -755,9 +745,7 @@ export default {
if (this.$refs.gridParent != undefined) {
// gridHeight = gridHeight*0.9
gridHeight = this.$refs.gridParent.offsetHeight - 35;
// console.log("gridHeight : ", gridHeight);
}
const myOptions = {
// scrollX: false,
setScroll: true,
@ -770,12 +758,10 @@ export default {
height: 38,
},
};
this.setGridOption({
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
let hhMapper = {
"00": "00~01",
"01": "01~02",
@ -807,7 +793,7 @@ export default {
header: "NO",
name: "rowNum",
width: 70,
align: "right",
align: "center",
// hidden: true,
},
{
@ -855,98 +841,99 @@ export default {
});
this.loadGrid = true;
this.isGridLoading = false;
// this.getGridData();
},
async getGridData() {
this.loadGrid = false;
// console
// const res = await this.postApiReturn({
// apiKey: 'selectIssueGdIdxData',
// resKey: 'issueGdIdxData',
// sendParam: {},
// });
let fakeData = [
{
alrmKind: "WARN",
alrmMsg: "냉동기 전류부하율이 @V1%로 높음 (평균 @V2% 대비 @V3% 낮음) -@EQPM",
careStndVal: 50,
warnStndVal: 60,
eccId: "ECC000004",
eqpmGrpNm: "냉동기저온1",
eqpmGrpId: "EQG000001",
eqpmKindId: "EKIND0001",
eqpmId: "CHI-201",
eqpmNm: "CHI-201",
fabId: "ECC000003",
fabNm: "삼천1공장",
gdIdxId: "GD00001",
gdIdxNm: "전류부하율 평균 편차",
rowKey: 0,
rowNum: 1,
rowSpanMap: {},
sortKey: 0,
sortSeq: 1,
totDttm: Utility.setFormatDate(new Date(), "YYYY-MM-DD"),
totTime: "2022-12-20 02:43:24",
totVal: 70,
},
{
alrmKind: "WARN",
alrmMsg: "냉동기 냉각수 유량 부하율이 @V1%로 높음 -@EQPM",
careStndVal: 70,
warnStndVal: 100,
eccId: "ECC000004",
eqpmGrpNm: "냉동기고온1",
eqpmGrpId: "EQG000001",
eqpmKindId: "EKIND0001",
eqpmId: "CHI-302",
eqpmNm: "CHI-302",
fabId: "ECC000004",
fabNm: "삼천1공장",
gdIdxId: "GD00011",
gdIdxNm: "냉각수 유량 부하율",
rowKey: 0,
rowNum: 2,
rowSpanMap: {},
sortKey: 0,
sortSeq: 1,
totDttm: Utility.setFormatDate(new Date(), "YYYY-MM-DD"),
totTime: "2022-12-20 07:23:38",
totVal: 120,
},
];
this.setGridData({
gridKey: this.gridName,
value: fakeData,
const res = await this.postApiReturn({
apiKey: "selectIssueGdIdxData",
resKey: "issueGdIdxData",
sendParam: {},
});
// let fakeData = [
// {
// 'alrmKind' : "WARN",
// 'alrmMsg' : "냉동기 전류부하율이 @V1%로 높음 (평균 @V2% 대비 @V3% 낮음) -@EQPM",
// 'careStndVal' : 50,
// 'warnStndVal' : 60,
// 'eccId' : "ECC000004",
// 'eqpmGrpNm' : "냉동기저온1",
// 'eqpmGrpId' : "EQG000001",
// 'eqpmKindId' : "EKIND0001",
// 'eqpmId' : "CHI-201",
// 'eqpmNm' : "CHI-201",
// 'fabId' : "ECC000003",
// 'fabNm' : "삼천1공장",
// 'gdIdxId' : "GD00001",
// 'gdIdxNm' : "전류부하율 평균 편차",
// 'rowKey' : 0,
// 'rowNum' : 1,
// 'rowSpanMap' : {},
// 'sortKey' : 0,
// 'sortSeq' : 1,
// 'totDttm' : Utility.setFormatDate(new Date(), 'YYYY-MM-DD'),
// 'totTime' : '2022-12-20 02:43:24',
// 'totVal' : 70
// },
// {
// 'alrmKind' : "WARN",
// 'alrmMsg' : "냉동기 냉각수 유량 부하율이 @V1%로 높음 -@EQPM",
// 'careStndVal' : 70,
// 'warnStndVal' : 100,
// 'eccId' : "ECC000004",
// 'eqpmGrpNm' : "냉동기고온1",
// 'eqpmGrpId' : "EQG000001",
// 'eqpmKindId' : "EKIND0001",
// 'eqpmId' : "CHI-302",
// 'eqpmNm' : "CHI-302",
// 'fabId' : "ECC000004",
// 'fabNm' : "삼천1공장",
// 'gdIdxId' : "GD00011",
// 'gdIdxNm' : "냉각수 유량 부하율",
// 'rowKey' : 0,
// 'rowNum' : 2,
// 'rowSpanMap' : {},
// 'sortKey' : 0,
// 'sortSeq' : 1,
// 'totDttm' : Utility.setFormatDate(new Date(), 'YYYY-MM-DD'),
// 'totTime' : '2022-12-20 07:23:38',
// 'totVal' : 120
// }
// ]
// this.setGridData({
// gridKey: this.gridName,
// value: res,
// value: fakeData,
// });
this.setGridData({
gridKey: this.gridName,
value: res,
});
this.loadGrid = true;
},
async getEnrgAndCO2Data() {
this.loadChart_01 = false;
const res = [];
const res = await this.postApiReturn({
apiKey: "selectEnrgAndCO2Data",
resKey: "enrgAndCO2Data",
sendParam: {},
});
// //////////////////////////////////////////
// // 시연용 data 세팅
res[0] = {};
res[0]["dayVal"] = 18.0;
res[0]["mnthVal"] = 507.0;
res[0]["planVal"] = 653.0;
res[0]["co2DayVal"] = 9.0;
res[0]["co2MnthVal"] = 238.0;
res[0]["co2PlanVal"] = 307.0;
res[0]["co2YearVal"] = 1224.0;
res[0]["effcRt"] = 77.59;
// res[0]['dayVal'] = 18.0;
// res[0]['mnthVal'] = 507.0;
// res[0]['planVal'] = 653.0;
// res[0]['co2DayVal'] = 9.0;
// res[0]['co2MnthVal'] = 238.0;
// res[0]['co2PlanVal'] = 307.0;
// res[0]['co2YearVal'] = 1224.0;
// res[0]['effcRt'] = 77.59;
// //////////////////////////////////////////
// 대시보드 표기
this.enrgUsageDayVal = this.numberFormatter(
parseFloat(res[0]["dayVal"]).toFixed(0)
);
@ -964,20 +951,16 @@ export default {
parseFloat(res[0]["co2BefMnthVal"]).toFixed(0)
);
this.CO2YearVal = this.numberFormatter(parseFloat(res[0]["co2YearVal"]).toFixed(0));
this.$nextTick(() => {
let chartOption = null;
// chartOption = this.getGuageChartOption2(this.chart_01);
chartOption = getGaugeChartOption({
title: "Energy Usage",
value: 75,
isDarkMode: this.isDarkMode,
});
console.log("charto:", chartOption);
chartOption["series"][0]["data"][0].value =
res[0]["effcRt"] != null ? res[0]["effcRt"] : 0;
this.$store.state.pageData[myPrgmId][this.chart_01] = chartOption;
console.log("gauge chart ops:", chartOption);
// if(res[0]['effcRt'] == undefined || res[0]['effcRt'] == null){
// res[0]['effcRt'] = null;
// }
@ -993,12 +976,11 @@ export default {
},
async getCompareEqpmTotData() {
this.loadChart_02 = false;
// const res = await this.postApiReturn({
// apiKey: "selectCompareEqpmTotData",
// resKey: "compareEqpmTotData",
// sendParam: {},
// });
const res = "abc";
const res = await this.postApiReturn({
apiKey: "selectCompareEqpmTotData",
resKey: "compareEqpmTotData",
sendParam: {},
});
this.$nextTick(() => {
this.setChart02Data(res);
});
@ -1007,25 +989,24 @@ export default {
},
async getTodayEfficiencyStatus() {
this.loadChart_03 = false;
// const res = await this.postApiReturn({
// apiKey: 'selectTodayEfficiencyStatus',
// resKey: 'todayEfficiencyStatus',
// sendParam: {},
// });
const res = await this.postApiReturn({
apiKey: "selectTodayEfficiencyStatus",
resKey: "todayEfficiencyStatus",
sendParam: {},
});
// 대시보드 표기
// this.ngDtlCnt = this.numberFormatter(res[0]['ngDtlCnt']);
// this.ngDtlSolvCnt = this.numberFormatter(res[0]['ngDtlSolvCnt']);
// let effcRt = this.numberFormatter(
// (res[0]['ngDtlSolvCnt'] / res[0]['ngDtlCnt']) * 100,
// );
let effcRt = this.numberFormatter(78.21);
this.ngDtlCnt = this.numberFormatter(res[0]["ngDtlCnt"]);
this.ngDtlSolvCnt = this.numberFormatter(res[0]["ngDtlSolvCnt"]);
let effcRt = this.numberFormatter(
(res[0]["ngDtlSolvCnt"] / res[0]["ngDtlCnt"]) * 100
);
// let effcRt = this.numberFormatter(78.21)
this.$nextTick(() => {
let chartOption = null;
// chartOption = this.getGuageChartOption2(this.chart_03);
chartOption = getGaugeChartOption({
title: "Today Efficiency",
value: 75,
isDarkMode: this.isDarkMode,
});
chartOption["series"][0]["data"][0].value = isNaN(effcRt) ? 0 : effcRt;
@ -1037,15 +1018,14 @@ export default {
},
async getTodayNgTopTen() {
this.loadChart_04 = false;
// const res = await this.postApiReturn({
// apiKey: "selectTodayNgTopTen",
// resKey: "todayNgTopTen",
// sendParam: {},
// });
const res = "abc";
// this.setPageData({
// chart04Data: res,
// });
const res = await this.postApiReturn({
apiKey: "selectTodayNgTopTen",
resKey: "todayNgTopTen",
sendParam: {},
});
this.setPageData({
chart04Data: res,
});
this.$nextTick(() => {
this.setChart04Data(res);
});
@ -1054,12 +1034,11 @@ export default {
},
async getCompareEqpmTGdChart() {
this.loadChart_05 = false;
// const res = await this.postApiReturn({
// apiKey: "selectCompareEqpmTGdChart",
// resKey: "compareEqpmTGdChart",
// sendParam: {},
// });
const res = "aaa";
const res = await this.postApiReturn({
apiKey: "selectCompareEqpmTGdChart",
resKey: "compareEqpmTGdChart",
sendParam: {},
});
this.$nextTick(() => {
this.setChart05Data(res);
});
@ -1067,12 +1046,12 @@ export default {
this.isLine2Loading = false;
},
async setChart05Data(data) {
// if (this.$store.state.pageData[this.myPrgmId].compareEqpmTGdChart != undefined) {
// this.$store.state.pageData[this.myPrgmId].compareEqpmTGdChart.series = [];
// }
// if (!data.length) {
// return;
// }
if (this.$store.state.pageData[this.myPrgmId].compareEqpmTGdChart != undefined) {
this.$store.state.pageData[this.myPrgmId].compareEqpmTGdChart.series = [];
}
if (!data.length) {
return;
}
let xAxisData = [];
let seriesData = [];
// let legendData = {
@ -1081,7 +1060,7 @@ export default {
// dayVal: "금일",
// };
let legendData = ["전전일", "전일", "금일"];
// let legendData = ["전전일", "전일", "금일"];
let befBefValDataList = {
name: "전전일",
@ -1109,37 +1088,36 @@ export default {
};
// for (var i = 0; i < data.length; i++) {
//////없애야함//////
let total = 0;
// let total = 0;
let hour = Utility.setFormatDate(
new Date().setTime(new Date().getTime() - 1 * 60 * 60 * 1000),
"HH"
);
//////없애야함//////
for (var i = 0; i < 24; i++) {
// if (data[i].tm != undefined) {
// xAxisData.push(parseInt(data[i].tm));
// } else {
// xAxisData.push(i);
// }
if (data[i].tm != undefined) {
xAxisData.push(parseInt(data[i].tm));
} else {
xAxisData.push(i);
}
// //////없애야함//////
let num = parseInt(Math.random() * (13 - 7) + 7);
let num2 = parseInt(Math.random() * (11 - 6) + 6);
let num3 = parseInt(Math.random() * (10 - 5) + 5);
let tempTotal = num + num2 + num3;
total += tempTotal;
let befBefVal = num;
let befVal = num2;
let dayVal = num3;
// let num = parseInt(Math.random() * (13 - 7) + 7);
// let num2 = parseInt(Math.random() * (11 - 6) + 6);
// let num3 = parseInt(Math.random() * (10 - 5) + 5);
// let tempTotal = num + num2 + num3;
// total += tempTotal;
// let befBefVal = num;
// let befVal = num2;
// let dayVal = num3;
// //////////////////
// let befBefVal = data[i].befBefVal != undefined ? data[i].befBefVal : 0;
// let befVal = data[i].befVal != undefined ? data[i].befVal : 0;
let befBefVal = data[i].befBefVal != undefined ? data[i].befBefVal : 0;
let befVal = data[i].befVal != undefined ? data[i].befVal : 0;
befBefValDataList["data"].push(befBefVal);
befValDataList["data"].push(befVal);
if (i <= parseInt(hour)) {
// let dayVal = data[i].dayVal != undefined ? data[i].dayVal : 0;
let dayVal = data[i].dayVal != undefined ? data[i].dayVal : 0;
dayValDataList["data"].push(dayVal);
}
}
@ -1151,7 +1129,7 @@ export default {
var chartOption = getLineChartOption({
xAxisData: xAxisData,
legendData: legendData,
// legendData: legendData,
seriesData: seriesData,
isDarkMode: this.isDarkMode,
});
@ -1186,22 +1164,19 @@ export default {
// series: seriesData,
// };
console.log("chart 5 data:", seriesData);
await this.$nextTick(() => {});
// this.setChartOption({
// chartKey: "compareEqpmTGdChart",
// value: chartOption,
// });
this.$store.state.pageData[myPrgmId]["compareEqpmTGdChart"] = chartOption;
this.setChartOption({
chartKey: "compareEqpmTGdChart",
value: chartOption,
});
},
async setChart04Data(data) {
// if (this.$store.state.pageData[this.myPrgmId].todayNgTopTen != undefined) {
// this.$store.state.pageData[this.myPrgmId].todayNgTopTen.series = [];
// }
// if (!data.length) {
// return;
// }
if (this.$store.state.pageData[this.myPrgmId].todayNgTopTen != undefined) {
this.$store.state.pageData[this.myPrgmId].todayNgTopTen.series = [];
}
if (!data.length) {
return;
}
let seriesData = [
{
type: "pie",
@ -1219,51 +1194,52 @@ export default {
},
];
let pidChartdata = [];
// for (var i = 0; i < data.length; i++) {
// if (data[i].eqpmId != undefined) {
// pidChartdata.push({
// value: data[i]["ngDtlCnt"],
// name: data[i]["eqpmId"],
// groupId: data[i]["eqpmNm"],
// });
// }
// }
let eqpmNmList = [
"CHI-202",
"CHI-201",
"UT_LT_CH101",
"UT_LT_CH102",
"UT_LT_CH103",
"UT_LT_CH104",
"UT_LT_CH105",
"U-CH-013",
"U-CH-014",
"U-CH-015",
"U-CH-016",
"U-CH-017",
"U-CH-018",
"U-CH-019",
"U-CH-015B",
"U-CH-015C",
"U-CH-015D",
"U-CH-015E",
"UT_HT_CT101",
"UT_HT_CT102",
"UT_HT_CT103",
"UT_HT_CP101",
"VCB_A",
"U-CH-012",
"U-CH-015F",
"U-CH-016A",
];
for (var i = 1; i < 21; i++) {
for (var i = 0; i < data.length; i++) {
if (data[i].eqpmId != undefined) {
pidChartdata.push({
// value: data[i]['ngDtlCnt'],
value: i + parseInt(Math.random() * (9 - 5) + 5),
name: eqpmNmList[i],
groupId: eqpmNmList[i],
value: data[i]["ngDtlCnt"],
name: data[i]["eqpmId"],
groupId: data[i]["eqpmNm"],
});
}
}
// let eqpmNmList = [
// 'CHI-202',
// 'CHI-201',
// 'UT_LT_CH101',
// 'UT_LT_CH102',
// 'UT_LT_CH103',
// 'UT_LT_CH104',
// 'UT_LT_CH105',
// 'U-CH-013',
// 'U-CH-014',
// 'U-CH-015',
// 'U-CH-016',
// 'U-CH-017',
// 'U-CH-018',
// 'U-CH-019',
// 'U-CH-015B',
// 'U-CH-015C',
// 'U-CH-015D',
// 'U-CH-015E',
// 'UT_HT_CT101',
// 'UT_HT_CT102',
// 'UT_HT_CT103',
// 'UT_HT_CP101',
// 'VCB_A',
// 'U-CH-012',
// 'U-CH-015F',
// 'U-CH-016A',
// ]
// for(var i=1; i<21; i++){
// pidChartdata.push({
// // value: data[i]['ngDtlCnt'],
// value: i+parseInt(Math.random()*(9-5)+5),
// name: eqpmNmList[i],
// groupId: eqpmNmList[i]
// });
// }
seriesData[0]["data"] = [...pidChartdata];
var chartOption = {
grid: {
@ -1293,17 +1269,15 @@ export default {
series: seriesData,
};
await this.$nextTick(() => {});
// this.setChartOption({ chartKey: "todayNgTopTen", value: chartOption });
this.$store.state.pageData[myPrgmId]["todayNgTopTen"] = chartOption;
this.$store.state.pageData[myPrgmId]["chart04Data"] = chartOption;
this.setChartOption({ chartKey: "todayNgTopTen", value: chartOption });
},
async setChart02Data(data) {
// if (this.$store.state.pageData[this.myPrgmId].compareEqpmTotChart != undefined) {
// this.$store.state.pageData[this.myPrgmId].compareEqpmTotChart.series = [];
// }
// if (!data.length) {
// return;
// }
if (this.$store.state.pageData[this.myPrgmId].compareEqpmTotChart != undefined) {
this.$store.state.pageData[this.myPrgmId].compareEqpmTotChart.series = [];
}
if (!data.length) {
return;
}
let xAxisData = [];
let seriesData = [];
// let legendMapper = {
@ -1311,7 +1285,6 @@ export default {
// 'befVal' : '전일',
// 'dayVal' : '금일'
// }
let legendData = ["전전일", "전일", "금일"];
let befBefValDataList = {
name: "전전일",
type: "line",
@ -1336,82 +1309,38 @@ export default {
lineStyle: { width: 2 },
data: [],
};
// // for (var i = 0; i < data.length; i++) {
// for (var i = 0; i < data.length; i++) {
let hour = Utility.setFormatDate(
new Date().setTime(new Date().getTime() - 1 * 60 * 60 * 1000),
"HH"
);
// for (var i = 0; i < 24; i++) {
// if (data[i].tm != undefined) {
// xAxisData.push(parseInt(data[i].tm));
// } else {
// xAxisData.push(i);
// }
// //////없애야함//////
for (var i = 0; i < 24; i++) {
if (data[i].tm != undefined) {
xAxisData.push(parseInt(data[i].tm));
} else {
xAxisData.push(i);
}
//////없애야함//////
let num = parseInt(Math.random() * (13 - 10) + 10)
.toString()
.padStart(2, "0");
let num2 = parseInt(Math.random() * (9 - 1) + 1)
.toString()
.padStart(2, "0");
let num3 = parseInt(Math.random() * (13 - 10) + 10)
.toString()
.padStart(2, "0");
let num4 = parseInt(Math.random() * (9 - 1) + 1)
.toString()
.padStart(2, "0");
let num5 = parseInt(Math.random() * (13 - 10) + 10)
.toString()
.padStart(2, "0");
let num6 = parseInt(Math.random() * (9 - 1) + 1)
.toString()
.padStart(2, "0");
let befBefVal = num + num2;
let befVal = num3 + num4;
let dayVal = num5 + num6;
// let num = parseInt(Math.random() * (13 - 10) + 10).toString().padStart(2, '0');
// let num2 = parseInt(Math.random() * (9 - 1) + 1).toString().padStart(2, '0');
// let num3 = parseInt(Math.random() * (13 - 10) + 10).toString().padStart(2, '0');
// let num4 = parseInt(Math.random() * (9 - 1) + 1).toString().padStart(2, '0');
// let num5 = parseInt(Math.random() * (13 - 10) + 10).toString().padStart(2, '0');
// let num6 = parseInt(Math.random() * (9 - 1) + 1).toString().padStart(2, '0');
// let befBefVal = num+num2;
// let befVal = num3+num4;
// let dayVal = num5+num6;
// //////없애야함//////
let befBefVal = data[i].befBefVal != undefined ? data[i].befBefVal : 0;
let befVal = data[i].befVal != undefined ? data[i].befVal : 0;
befBefValDataList["data"].push(befBefVal);
befValDataList["data"].push(befVal);
if (i <= parseInt(hour)) {
// let dayVal = data[i].dayVal != undefined ? data[i].dayVal : 0;
let dayVal = data[i].dayVal != undefined ? data[i].dayVal : 0;
dayValDataList["data"].push(dayVal);
}
}
// let num = parseInt(Math.random() * (13 - 10) + 10)
// .toString()
// .padStart(2, "0");
// let num2 = parseInt(Math.random() * (9 - 1) + 1)
// .toString()
// .padStart(2, "0");
// let num3 = parseInt(Math.random() * (13 - 10) + 10)
// .toString()
// .padStart(2, "0");
// let num4 = parseInt(Math.random() * (9 - 1) + 1)
// .toString()
// .padStart(2, "0");
// let num5 = parseInt(Math.random() * (13 - 10) + 10)
// .toString()
// .padStart(2, "0");
// let num6 = parseInt(Math.random() * (9 - 1) + 1)
// .toString()
// .padStart(2, "0");
// let befBefVal = num + num2;
// let befVal = num3 + num4;
// let dayVal = num5 + num6;
// //////없애야함//////
// let befBefVal = data[i].befBefVal != undefined ? data[i].befBefVal : 0;
// let befVal = data[i].befVal != undefined ? data[i].befVal : 0;
// befBefValDataList["data"].push(befBefVal);
// befValDataList["data"].push(befVal);
// if (i <= parseInt(hour)) {
// let dayVal = data[i].dayVal != undefined ? data[i].dayVal : 0;
// dayValDataList["data"].push(dayVal);
// }
// }
seriesData = [befBefValDataList, befValDataList, dayValDataList];
// seriesData = [
@ -1433,7 +1362,7 @@ export default {
// ];
var chartOption = getLineChartOption({
xAxisData: xAxisData,
legendData: legendData,
// legendData: legendData,
seriesData: seriesData,
isDarkMode: this.isDarkMode,
});
@ -1468,12 +1397,10 @@ export default {
// series: seriesData,
// };
await this.$nextTick(() => {});
this.$store.state.pageData[myPrgmId][this.chart_02] = chartOption;
// this.setChartOption({
// chartKey: "compareEqpmTotChart",
// value: chartOption,
// });
this.setChartOption({
chartKey: "compareEqpmTotChart",
value: chartOption,
});
},
getGuageChartOption(chartName) {
const gaugeColors = [
@ -1506,8 +1433,8 @@ export default {
splitNumber: 10,
itemStyle: {
// color: '#FFAB91'
// color: 'auto',
color: gaugeColors,
color: "auto",
// color:gaugeColors
},
progress: {
// show: true,
@ -1518,8 +1445,8 @@ export default {
// show: false
show: true,
itemStyle: {
color: "#FFAB91",
// color: 'auto',
// color: '#FFAB91',
color: "auto",
},
},
axisLine: {
@ -1565,140 +1492,12 @@ export default {
fontSize: 15,
// fontSize: 20,
fontWeight: "bolder",
formatter: "30%",
formatter: "{value} %",
color: "auto",
},
data: [
{
name: "new",
value: 344,
},
],
},
],
};
return guageChartOption;
},
getGuageChartOption2(chartName) {
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"],
];
var guageChartOption = {
grid: {
// top: '-10%',
bottom: 0,
},
title: {},
graphic: [
{
type: "circle",
left: "center",
top: "center",
shape: {
r: 97, // radius of the background circle
},
style: {
fill: this.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: 0,
max: 160,
// 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)
],
},
},
axisTick: {
distance: -5,
length: 5,
lineStyle: {
color: "#000000",
width: 1,
},
},
splitLine: {
distance: -12,
length: 8,
lineStyle: {
color: "#000000",
width: 2,
},
},
axisLabel: {
color: this.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: this.isDarkMode ? "#fff" : "#333333",
formatter: function (value) {
return `{valueStyle|${value}}\n{percentStyle|%}`;
},
rich: {
// valueStyle: {
// fontSize: 25,
// fontWeight: "bold",
// },
percentStyle: {
fontSize: 10,
color: this.isDarkMode ? "#fff" : "#333333",
// fontWeight: "normal",
},
},
},
data: [
{
value: 16,
name: "에너지사용효율", // "Energy Usage Efficiency"
value: NaN,
},
],
},
@ -1847,7 +1646,6 @@ export default {
}[state];
},
chartClickEvent(argData, $event) {
// console.log('chartClickEvent', argData);
let pageMapper = {
dashBoard_enrgUsageGauge: {
pageName: "ems-effc-EnrgUseTotSummPage",
@ -1909,32 +1707,18 @@ export default {
});
},
topTenChartClickEvent(event) {
// let chartData = this.pageData.chart04Data;
// console.log("chart data first", this.pageData);
let chartData = this.$store.state.pageData[myPrgmId][this.chart_04]["series"][0][
"data"
];
console.log("select equipment", event["data"]["groupId"]);
let chartData = this.pageData.chart04Data;
// let chartData = this.$store.state.pageData[myPrgmId][this.chart_04]['series'][0]['data']
let selectedChartData = chartData.filter((item) => {
return item.eqpmId == event["data"]["groupId"];
});
console.log("chart data", selectedChartData);
// var data = {
// cmCycle: "CYC_DAY",
// fromDt: Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
// fabId: selectedChartData[0].fabId,
// eqpmKindId: selectedChartData[0].eqpmKindId,
// eqpmGrpId: selectedChartData[0].eqpmGrpId,
// eqpmId: selectedChartData[0].eqpmId,
// };
var fake_data = {
var data = {
cmCycle: "CYC_DAY",
fromDt: Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
fabId: 4555,
eqpmKindId: 99988,
eqpmGrpId: 88888,
eqpmId: 99900,
fabId: selectedChartData[0].fabId,
eqpmKindId: selectedChartData[0].eqpmKindId,
eqpmGrpId: selectedChartData[0].eqpmGrpId,
eqpmId: selectedChartData[0].eqpmId,
};
var key = "tick_" + Math.random();
this.$router.push({
@ -1944,8 +1728,7 @@ export default {
// tick:key
},
params: {
// ...data,
...fake_data,
...data,
key: key,
},
});

3
pages/ems/base/EffcIdxMngPage.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="l-layout">
<v-row ref="searchFilter">
<common-page-title />
<v-row ref="searchFilter" class="mt-2">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="end" no-gutters>

104
pages/ems/base/EnrgReadPlaceMngPage.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="l-layout">
<v-row ref="searchFilter">
<common-page-title />
<v-row ref="searchFilter" class="mt-2">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="end" no-gutters>
@ -19,7 +20,7 @@
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true" :labelCols="12"
:textCols="12" :customClass="'select-large'" :iconShow="true" />
</v-col>
<v-col :cols="2.5">
<v-col :cols="2.5" class="pr-4">
<InputText :parentPrgmId="myPrgmId" label="검침개소명" valueNm="readPlcNm" :labelCols="12"
:textCols="12" :searchOption="true" :customClass="'input-large'" :iconShow="true" />
</v-col>
@ -30,25 +31,25 @@
</v-card>
</v-col>
</v-row>
<v-row ref="contents" class="mt-4">
<v-col :cols="5" class="h100">
<v-row ref="contents" class="mt-3">
<v-col :cols="5" class="h100 pr-2">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-4 pb-6">
<v-card-title class="pa-0 custom-title-4">검침개소 정보</v-card-title>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:btnActionsFnc="btnActions" />
</div>
<div class="px-4">
<div class="px-4" style="height:calc(100% - 76px)">
<div ref="gridParent" class="w100 h100">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true"
:dataPath="dataPathExample" />
/>
</div>
</div>
</v-card>
</v-col>
<v-col :cols="7" class="h100">
<v-col :cols="7" class="h100 pl-2">
<v-card class="pb-5">
<v-card-title class="custom-title-4 pb-1 pa-4">검침개소 상세
</v-card-title>
@ -134,7 +135,7 @@ export default {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: true,
loadGrid: false,
tab: null,
isImgTabDisabled: false,
items: [
@ -157,47 +158,6 @@ export default {
],
detailList: myDetail,
defaultUseFg: 1,
dataPathExample: {
"rowGrid": {
data: sampleData,
column: [
{
header: '',
name: '',
align: 'center',
width: 50,
formatter: (props) => {
return `<label class="custom-radio">
<span class="radio-mark"></span>
</label>`;
}
},
{
header: '검침개소명',
name: 'readPlcNm',
align: 'left',
minWidth: 400,
},
{
header: '개소 종류',
name: 'plcKind',
minWidth: 100,
align: 'center',
},
{
header: '사용 여부',
name: 'useFg',
minWidth: 100,
align: 'center',
},
],
option: myOptions,
}
}
// loadTree: false
};
},
@ -312,18 +272,18 @@ export default {
},
async initData() {
let ercList = [];
// const res = await this.postApiReturn({
// apiKey: 'selectErcInfo',
// resKey: 'ercInfoData',
// sendParam: {
// blocId: this.userInfo.blocId,
// },
// });
// res.forEach(item => {
// const it = { text: item.ercNm, value: item.ercId };
// ercList.push(it);
// });
// this.setPageData({ ercNmList: ercList });
const res = await this.postApiReturn({
apiKey: 'selectErcInfo',
resKey: 'ercInfoData',
sendParam: {
blocId: this.userInfo.blocId,
},
});
res.forEach(item => {
const it = { text: item.ercNm, value: item.ercId };
ercList.push(it);
});
this.setPageData({ ercNmList: ercList });
},
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
@ -334,10 +294,12 @@ export default {
resizable: true,
},
treeColumnOptions: {
name: 'eccNm',       // Showing tree table
useIcon: false,      // Not using icon
indentWidth: 10,
name: 'readPlcNm',
},
header: {
height: 37,
},
rowHeight: 37,
};
this.setGridOption({
gridKey: this.gridName,
@ -531,7 +493,7 @@ export default {
if (this.tab == 2) {
this.tab = 0;
}
this.isImgTabDisabled = true;
this.isImgTabDisabled = false;
} else {
this.isImgTabDisabled = false;
}
@ -999,18 +961,6 @@ const sampleData = [
];
const myOptions = {
columnOptions: {
resizable: true,
},
treeColumnOptions: {
name: 'readPlcNm',       // Showing tree table
useIcon: false,      // Not using icon
indentWidth: 10,
},
}
const myDetail = [
{
type: 'InputText',

240
pages/ems/base/EnrgResourceCenterMngPage.vue
View File

@ -12,6 +12,7 @@
:textCols="12"
:labelCols="12"
:parentPrgmId="myPrgmId"
:customClass="'select-large'"
/>
</v-col>
<v-col :cols="3">
@ -22,6 +23,7 @@
dataKey="searchErcKind"
:sendParam="{ commGrpCd: 'EM_ERCKIND', useFg: '1' }"
:addAll="true"
:customClass="'select-large'"
/>
</v-col>
<v-col :cols="3">
@ -34,13 +36,9 @@
:addAll="true"
:textCols="12"
:labelCols="12"
:customClass="'select-large'"
/>
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="3">
<component
:is="'selectCodeList'"
@ -49,8 +47,11 @@
dataKey="searchChrgKind"
:sendParam="{ commGrpCd: 'EM_ENGCHAGKIND', useFg: '1' }"
:addAll="true"
:customClass="'select-large'"
/>
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="3">
<component
:is="'selectCodeList'"
@ -59,6 +60,7 @@
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
:customClass="'select-large'"
/>
</v-col>
<v-col :cols="3">
@ -69,8 +71,14 @@
:textCols="12"
:labelCols="12"
:searchOption="true"
:customClass="'input-large'"
/>
</v-col>
<v-col :cols="3">
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch :size="'default'" @click="search" />
</v-col>
</v-row>
</v-card>
</v-col>
@ -323,6 +331,9 @@ export default {
columnOptions: {
resizable: true,
},
header: {
height: 38,
},
};
this.setGridOption({
gridKey: this.gridName,
@ -332,12 +343,12 @@ export default {
const _this = this;
const myColumns = [
{ header: '회사 ID', name: 'comId', hidden: true },
{ header: '에너지원ID', name: 'ercId', width: 120, align: 'center' },
{ header: '에너지원ID', name: 'ercId', width: 120, align: 'left' },
{ header: '에너지원명', name: 'ercNm', align: 'left' },
{
header: '에너지원 유형',
name: 'ercKind',
align: 'center',
align: 'left',
formatter({ value }) {
let retVal = '';
const newValue = _this.pageData.ercKindList.filter(
@ -450,7 +461,7 @@ export default {
header: '사용 여부',
name: 'useFg',
width: 95,
align: 'center',
align: 'left',
formatter({ value }) {
value = value === true ? '1' : '0';
const newValue = _this.pageData.useFgList.filter(
@ -479,74 +490,24 @@ export default {
this.loadGrid = true;
},
async getRowGridData() {
let res = [
{
"comId": "COM001",
"ercId": "ERC001",
"ercNm": "LNG 가스",
"ercKind": "GAS",
"readObjId": "READ001",
"readPlcId": "PLC001",
"chrgKind": "FIXED",
"unitPrce": 120.5,
"prceFg": "1",
"peakPow": 500,
"elecContId": "EC001",
"elecContNm": "계약A",
"blocId": "BLOC001",
"useFg": true
},
{
"comId": "COM002",
"ercId": "ERC002",
"ercNm": "태양광",
"ercKind": "ELEC",
"readObjId": "READ002",
"readPlcId": "PLC002",
"chrgKind": "VARIABLE",
"unitPrce": 95.0,
"prceFg": "0",
"peakPow": 300,
"elecContId": "EC002",
"elecContNm": "계약B",
"blocId": "BLOC002",
"useFg": false
},
{
"comId": "COM003",
"ercId": "ERC003",
"ercNm": "지열",
"ercKind": "HEAT",
"readObjId": "READ003",
"readPlcId": "PLC003",
"chrgKind": "FIXED",
"unitPrce": 110.0,
"prceFg": "1",
"peakPow": 450,
"elecContId": "EC003",
"elecContNm": "계약C",
"blocId": "BLOC003",
"useFg": true
}
]
;
let res = [];
// if (this.pageData.blocMstrList.length > 0) {
// res = await this.postApiReturn({
// apiKey: 'selectErcInfo',
// resKey: 'ercInfoData',
// sendParam: {
// blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
// ercKind: this.pageData.searchErcKind,
// readObjId: this.pageData.searchReadObj,
// chrgKind: this.pageData.searchChrgKind,
// useFg: this.pageData.useFg,
// ercNmLike: this.pageData.ercNm,
// },
// });
// } else {
// this.setPageData({ isFind: false });
// }
if (this.pageData.blocMstrList.length > 0) {
res = await this.postApiReturn({
apiKey: 'selectErcInfo',
resKey: 'ercInfoData',
sendParam: {
blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
ercKind: this.pageData.searchErcKind,
readObjId: this.pageData.searchReadObj,
chrgKind: this.pageData.searchChrgKind,
useFg: this.pageData.useFg,
ercNmLike: this.pageData.ercNm,
},
});
} else {
this.setPageData({ isFind: false });
}
const newRes = res.map(item => {
const newObj = {
...item,
@ -798,133 +759,8 @@ const defaultData = {
/* data 세팅 */
// 로컬 gridName 값과 동일한 이름으로 세팅
rowGrid: {
data: [
{
"comId": "COM001",
"ercId": "ERC001",
"ercNm": "LNG 가스",
"ercKind": "GAS",
"readObjId": "READ001",
"readPlcId": "PLC001",
"chrgKind": "FIXED",
"unitPrce": 120.5,
"prceFg": "1",
"peakPow": 500,
"elecContId": "EC001",
"elecContNm": "계약A",
"blocId": "BLOC001",
"useFg": true
},
{
"comId": "COM002",
"ercId": "ERC002",
"ercNm": "태양광",
"ercKind": "ELEC",
"readObjId": "READ002",
"readPlcId": "PLC002",
"chrgKind": "VARIABLE",
"unitPrce": 95.0,
"prceFg": "0",
"peakPow": 300,
"elecContId": "EC002",
"elecContNm": "계약B",
"blocId": "BLOC002",
"useFg": false
},
{
"comId": "COM003",
"ercId": "ERC003",
"ercNm": "지열",
"ercKind": "HEAT",
"readObjId": "READ003",
"readPlcId": "PLC003",
"chrgKind": "FIXED",
"unitPrce": 110.0,
"prceFg": "1",
"peakPow": 450,
"elecContId": "EC003",
"elecContNm": "계약C",
"blocId": "BLOC003",
"useFg": true
}
],
column: [
{ header: '회사 ID', name: 'comId', hidden: true },
{ header: '에너지원ID', name: 'ercId', width: 120, align: 'center' },
{ header: '에너지원명', name: 'ercNm', align: 'left' },
{
header: '에너지원 유형',
name: 'ercKind',
align: 'center',
},
{
header: '검침대상',
name: 'readObjId',
align: 'left',
},
{
header: '검침 개소 ID',
name: 'readPlcId',
width: 80,
align: 'center',
hidden: true,
},
{
header: '고지 유형',
name: 'chrgKind',
width: 80,
align: 'center',
hidden: true,
},
{
header: '기본단가',
name: 'unitPrce',
width: 100,
align: 'right',
hidden: true,
},
{
header: '단가 사용여부',
name: 'prceFg',
width: 100,
align: 'center',
hidden: true,
},
{
header: '피크 전력',
name: 'peakPow',
width: 100,
align: 'right',
hidden: true,
},
{
header: '전력 계약',
name: 'elecContId',
width: 100,
align: 'center',
hidden: true,
},
{
header: '전력 계약',
name: 'elecContNm',
width: 100,
align: 'center',
hidden: true,
},
{
header: '사업장',
name: 'blocId',
width: 100,
align: 'center',
hidden: true,
},
{
header: '사용 여부',
name: 'useFg',
width: 95,
align: 'center',
}
], // myColumns,
data: [],
column: [], // myColumns,
option: {}, // myOptions
defaultRow: {
comId: '',

3
pages/ems/base/EqpmGrpPysclQtyMngPage.vue
View File

@ -1,6 +1,7 @@
<template>
<div ref="mainDiv" class="l-layout">
<v-row ref="searchFilter">
<common-page-title />
<v-row ref="searchFilter" class="mt-2">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="end" no-gutters>

5
pages/ems/base/GdIdxMngPage.vue
View File

@ -1,6 +1,7 @@
<template>
<div ref="mainDiv" class="l-layout">
<v-row ref="searchFilter">
<common-page-title />
<v-row ref="searchFilter" class="mt-2">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="end" no-gutters>
@ -41,7 +42,7 @@
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData" :dataPath="dataPathExample" />
</div>
<div class="d-flex py-4" >
<div class="d-flex py-4 mt-4" >
<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
@gridEditingFinish="gridEditingFinish" />
</div>

3
pages/ems/base/GdStndMngPage.vue
View File

@ -1,6 +1,7 @@
<template>
<div ref="mainDiv" class="l-layout">
<v-row ref="searchFilter">
<common-page-title />
<v-row ref="searchFilter" class="mt-2">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="end" no-gutters>

28
pages/ems/base/ReadResultCloseMngPage.vue
View File

@ -1,11 +1,6 @@
<template>
<div class="l-layout">
<!-- <h2 class="title">
<v-icon small color="primary" class="mr-1">mdi-circle</v-icon>
계량 데이터 마감 관리
</h2> -->
<PageTitle text="계량 데이터 마감 관리" />
<common-page-title />
<v-row ref="searchFilter">
<!-- 조회조견 -->
<v-col :cols="12">
@ -75,8 +70,8 @@
</v-row>
<v-row ref="contents">
<!-- 일일검침정보 목록-->
<v-col :cols="12" class="h100">
<v-card class="pb-5">
<v-col :cols="12">
<v-card class="pb-5 w100">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="custom-title-4 pa-0">일일검침정보</v-card-title>
<div class="d-flex align-center">
@ -91,21 +86,19 @@
type="primary"
:ripple="false"
@click="saveReadResultCloseMng('N')"
>일마감</a-button
>
일마감
</a-button>
</div>
</div>
<div class="px-5" style="min-height: calc(100% - 76px)">
<div ref="gridParent" class="h100 w100">
<div ref="gridParent" class="px-5 w100" style="min-height: 60vh">
<component
:is="loadGrid ? 'Grid' : null"
:ref="gridName"
:parentPrgmId="myPrgmId"
:gridName="gridName"
:dataPath="dataPathMock"
/>
</div>
</div>
</v-card>
</v-col>
</v-row>
@ -123,7 +116,6 @@ import selectCodeList from "@/components/common/select/selectCodeList";
import SelectMttList from "@/components/common/select/SelectMttList";
import Datepicker from "~/components/common/Datepicker";
import BtnExcelDownload from "~/components/common/button/BtnExcelDownload";
import PageTitle from "~/components/common/PageTitle";
let myTitle;
// const myPrgmId = "PRG0018";
@ -151,13 +143,12 @@ export default {
Datepicker,
Search,
Grid,
PageTitle,
},
data() {
return {
myPrgmId: myPrgmId,
gridName: "rowGrid",
loadGrid: true,
loadGrid: false,
dataPathMock: {
rowGrid: {
column: [
@ -260,7 +251,6 @@ export default {
gridKey: this.gridName,
value: myColumns,
});
this.loadGrid = true;
},
async search() {
await this.getRowGridData();
@ -288,8 +278,12 @@ export default {
mgnf: item.mgnf || 0,
})),
});
// console.log('--------------DEBUG-----res-------', res);
}
this.setPageData({ isFind: false });
this.$nextTick(() => {
this.loadGrid = true;
})
},
//전월 or 일 마감--------------------------------------------------------------------------------------------
async saveReadResultCloseMng(mnthYn) {

11
pages/ems/effc/DataSetMngPage.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="l-layout">
<CommonPageTitle />
<!-- Dataset 페이지 시작 -->
<div v-if="pageActionFlag == 'list'" class="h100">
<v-row ref="searchFilter">
@ -34,23 +35,23 @@
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="5" class="h100">
<v-col :cols="5" >
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0 custom-title-4">Data Set 리스트</v-card-title>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:btnActionsFnc="btnActions" />
</div>
<div class="px-5" style="min-height:calc(100% - 76px)">
<div ref="gridParent" class="w100 h100">
<div ref="gridParent" class="px-5" style="min-height: 60vh">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
@getRowsData="getRowData" @sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true" />
</div>
<!-- <div ref="gridParent" class="w100 h100">
</div> -->
</div>
</v-card>
</v-col>
<v-col :cols="7" class="h100">
<v-col :cols="7" >
<v-card class="pb-5">
<v-card-title class="custom-title-4" style="min-height:76px;">Data Set 상세
</v-card-title>

95
pages/ems/effc/EnrgEffcTotSummPage.vue
View File

@ -195,28 +195,16 @@ export default {
});
},
async getEqpmKind() {
// let res = await this.postApiReturn({
// apiKey: "selectEqpmKindCodeList",
// resKey: "eqpmKindCodeLists",
// sendParam: {},
// });
let res = [
{
eqpmKindId: "냉동기저온",
eqpmKindNm: "냉동기저온",
},
{
eqpmKindId: "냉동기고온",
eqpmKindNm: "냉동기고온",
},
];
let res = await this.postApiReturn({
apiKey: 'selectEqpmKindCodeList',
resKey: 'eqpmKindCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList01 = await res.map((item) => {
this.selectValueList01 = await res.map(item => {
return {
// text: item.eqpmKindNm,
label: item.eqpmKindNm,
text: item.eqpmKindNm,
value: item.eqpmKindId,
};
});
@ -233,29 +221,24 @@ export default {
gridInit() {},
getRowGridData() {},
async getData() {
// let res = await this.postApiReturn({
// apiKey: "selectEnrgEffcTotSumm",
// resKey: "totSummData",
// sendParam: {
// fromDt: this.pageData.fromDt,
// eqpmKindId: this.selectValue01,
// },
// });
let res = ["aaa", "bbb"];
let res = await this.postApiReturn({
apiKey: 'selectEnrgEffcTotSumm',
resKey: 'totSummData',
sendParam: {
fromDt: this.pageData.fromDt,
eqpmKindId: this.selectValue01,
},
});
await this.getChartData(res);
// this.selectData = res.filter((item, i) => {
// return (
// res.findIndex((item2, j) => {
// return item.eqpmGrpId === item2.eqpmGrpId;
// }) === i
// );
// });
this.selectData = [
{ eqpmGrpId: "G001", eqpmGrpNm: "Group A", otherProp: "..." },
{ eqpmGrpId: "G002", eqpmGrpNm: "Group B", otherProp: "..." },
];
this.selectData = res.filter((item, i) => {
return (
res.findIndex((item2, j) => {
return item.eqpmGrpId === item2.eqpmGrpId;
}) === i
);
});
},
barClick(event, chartName) {
var data = {};
@ -302,37 +285,25 @@ export default {
// }
// });
// data.map((item) => {
// if (chartDataObj[item.eqpmGrpId] != null) {
// chartDataObj[item.eqpmGrpId].push(item);
// } else {
// chartDataObj[item.eqpmGrpId] = [item];
// }
// });
chartDataObj = {
group1: [
{ fabNm: "Fab A", okCnt: 120, ngCnt: 30 },
{ fabNm: "Fab B", okCnt: 150, ngCnt: 20 },
{ fabNm: "Fab C", okCnt: 100, ngCnt: 50 },
],
group2: [
{ fabNm: "Fab D", okCnt: 180, ngCnt: 10 },
{ fabNm: "Fab E", okCnt: 160, ngCnt: 25 },
{ fabNm: "Fab F", okCnt: 140, ngCnt: 35 },
],
};
data.map(item => {
if (chartDataObj[item.eqpmGrpId] != null) {
chartDataObj[item.eqpmGrpId].push(item);
} else {
chartDataObj[item.eqpmGrpId] = [item];
}
});
// chartDataObj.keys()[0]
var i = 0;
for (var x of Object.keys(chartDataObj)) {
this.loadChartList.push(false);
i++;
this.objList["chart_0" + i] = chartDataObj[x];
this.chartNameList.push("chart_0" + i);
this.objList['chart_0' + i] = chartDataObj[x];
this.chartNameList.push('chart_0' + i);
this.setPageData({
[this.chartNameList[i - 1]]: Utility.defaultChartOption(true),
});
this.setChartData(chartDataObj[x], i);
}
// this.setChartData(chartDataObj[Object.keys(chartDataObj)[0]]);

5
pages/ems/effc/EnrgMapPage.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="l-layout">
<common-page-title />
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
@ -158,8 +159,8 @@ export default {
},
async created() { },
async mounted() {
this.initTest();
return;
// this.initTest();
// return;
this.init();
// document.querySelector('.icon_arrow').style.width = document.querySelector('.iconArrowCols').clientWidth-20 + "px";

4
pages/ems/effc/EnrgReptMngPage.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="l-layout">
<PageTitle text="효율성 지표 보고서" />
<CommonPageTitle />
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
@ -98,7 +98,6 @@ import Chart from '~/components/common/Chart';
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
import DateUtility from '~/plugins/dateUtility';
import XLSX from 'xlsx';
import PageTitle from "~/components/common/PageTitle";
let myTitle;
let myPrgmId;
@ -130,7 +129,6 @@ export default {
EqpmSelectPop,
DateUtility,
XLSX,
PageTitle,
},
data() {
return {

99
pages/ems/effc/EnrgUsePlanPage.vue
View File

@ -1,5 +1,6 @@
<template>
<div ref="mainDiv" class="l-layout">
<common-page-title />
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
@ -9,20 +10,20 @@
</v-col>
<v-col :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01" :itemList="selectValueList01"
:label="'FAB'" @update:propsValue="selectValue01 = $event" :iconShow="false" />
:label="'FAB'" @update:propsValue="selectValue01 = $event" :iconShow="false" customClass="select-large" />
</v-col>
<v-col :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02" :itemList="selectValueList02"
:label="'설비종류'" @update:propsValue="selectValue02 = $event" :iconShow="false" />
:label="'설비종류'" @update:propsValue="selectValue02 = $event" :iconShow="false" customClass="select-large"/>
</v-col>
<v-col :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox3" :propsValue="selectValue03" :itemList="selectValueList03"
:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :iconShow="false" />
:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :iconShow="false" customClass="select-large" />
</v-col>
<BtnSearch @click="search" />
<v-col>
</v-col>
<BtnSearch size="large" @click="search" />
<!-- <v-col>
</v-col> -->
<component ref="EnrgUsePlanModiPop" :is="'EnrgUsePlanModiPop'" :label="'test'" :parentPrgmId="myPrgmId"
@gridEditingFinish="gridEditingFinish" />
</v-row>
@ -30,18 +31,15 @@
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="12" style="height: 100%">
<v-card class="pb-5 h100">
<v-col :cols="12" >
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0 custom-title-4">설비별 에너지 계획 리스트</v-card-title>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
</div>
<div class="h100 px-5" style="height:calc(100% - 70px)">
<div ref="gridParent" class="w100 h100">
<div ref="gridParent" class="px-5" style="min-height: 60vh;">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
:editorGrid="true" @getRowsData="getRowData" :dataPath="dataPathMock" />
</div>
:editorGrid="true" @getRowsData="getRowData" />
</div>
</v-card>
</v-col>
@ -171,8 +169,8 @@ export default {
created() { },
async mounted() {
// -------
this.initTest();
return;
// this.initTest();
// return;
// ========End test===========
await this.init();
this.initedFlag = true;
@ -420,53 +418,25 @@ export default {
class CustumButton {
constructor(props) {
// v-btn v-btn--is-elevated v-btn--has-bg theme--dark v-size--default
const el = document.createElement('button');
const { grid, rowKey, columnInfo } = props;
$(el).addClass('tui-grid-cell-content');
// $(el).css('text-align', 'center');
el.classList.add('v-btn');
// el.style.width = '80%';
// el.style.height = '80%';
// el.style.boxShadow = '0px 0px 0px 2px #cbced6';
// el.style.background = 'linear-gradient(to bottom, #242940 5%, #476e9e 100%)';
// el.style.backgroundColor = '#144985';
el.style.borderRadius = '7px';
el.style.border = '1px solid #4e6096';
// el.style.display = 'inline-block';
// el.style.cursor = 'pointer';
el.style.color = '#ffffff';
// el.style.fontFamily = 'Arial';
el.style.padding = '6% 3%';
const gridData = grid.store.data.rawData;
const value = gridData[rowKey][columnInfo.name];
// el.style.textDecoration = 'none';
// el.style.textShadow = '0px 1px 0px #283966';
el.innerText = columnInfo.renderer.options.value;
this.el = el;
this.disabled = columnInfo.renderer.options.disabled || false;
const elDiv = document.createElement('div');
elDiv.innerHTML = `<span>${value}</span>`;
$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
const el2 = document.createElement('button');
$(el2).addClass('edit-btn blue--text');
el2.innerText = 'Edit';
elDiv.appendChild(el2);
this.el = elDiv;
if (!this.disabled) {
// hover 기능 구현
this.el.addEventListener('mouseover', function (event) {
// console.log('darkModeFg', _this.darkModeFg);
// console.log('event',event.fromElement);
// console.log('event',document.defaultView.getComputedStyle(el).getPropertyValue('background-color'));
// rgb(85, 130, 220) // light
// el.style.backgroundColor = '#26578F'; // rgb(20, 73, 133) // dark
// let btnColor = _this.darkModeFg? {mouseOver: '#26578F', mouseOut: '#144985'} : {mouseOver: 'rgb(85, 130, 220)', mouseOut: 'rgb(71, 119, 217)'};
// el.style.backgroundColor = btnColor['mouseOver'];
});
this.el.addEventListener('mouseout', function (event) {
// rgb(71, 119, 217) // light
// el.style.backgroundColor = '#144985'; // dark
// console.log('event',event.fromElement);
// let btnColor = _this.darkModeFg? {mouseOver: '#26578F', mouseOut: '#144985'} : {mouseOver: 'rgb(85, 130, 220)', mouseOut: 'rgb(71, 119, 217)'};
// el.style.backgroundColor = btnColor['mouseOut'];
});
// click 이벤트
this.el.addEventListener('click', function (event) {
el2.addEventListener('click', function (event) {
let gridData = grid.store.data.rawData;
let rowNum = gridData[rowKey].rowNum;
let selectedGridData = gridData.filter(item => {
@ -537,18 +507,25 @@ export default {
minWidth: 200,
align: 'left',
// hidden: true,
formatter: ({ value, row }) => {
return `
<span>${value}</span>
<button class="edit-btn" data-row='${JSON.stringify(row)}'>Edit</button>
`;
}
// formatter: ({ value, row }) => {
// return `
// <span>${value}</span>
// <button class="edit-btn" data-row='${JSON.stringify(row)}'>Edit</button>
// `;
// }
renderer: {
type: CustumButton,
options: {
value: '계획수정',
},
},
},
{
header: '',
name: 'btnCol',
width: 70,
align: 'center',
hidden: true,
renderer: {
type: CustumButton,
options: {

52
pages/ems/effc/TagTrndPage.vue
View File

@ -103,7 +103,6 @@
<component
:ref="gridName"
class="tagTrndGrid"
v-if="loadGrid"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@ -199,7 +198,6 @@ export default {
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
console.log("menudata:", myState.menuData[myPrgmId]);
await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
@ -330,7 +328,6 @@ export default {
} else {
this.dumyChartFg = false;
}
this.dumyChartFg = true;
if (this.initedFlag && this.tagList.length > 0) {
this.search();
}
@ -409,12 +406,12 @@ export default {
getAddInfoList: "modules/search/getAddInfoList",
}),
async init() {
await this.setPageData({
this.setPageData({
rowGridSelectKey: 0,
rowGridSelectData: null,
});
await this.gridInit();
this.setChartNull2();
this.gridInit();
this.setChartNull();
},
async search() {
// search가 2번 타는 경우:
@ -513,12 +510,6 @@ export default {
gridKey: this.gridName,
value: myColumns,
});
this.setGridData({
gridKey: this.gridName,
value: newRes,
});
this.loadGrid = true;
},
getRowData(data) {
@ -809,7 +800,6 @@ export default {
// data SeriesData 추가
chartDataDict[dataTagTitle]["seriesData"] = seriesData;
// data legend 추가
console.log("le dat:", legendData);
chartDataDict[dataTagTitle]["legendList"] = legendData;
//
//rawData chart data 구성하기
@ -1216,40 +1206,8 @@ const defaultData = {
rowGridSelectData: null,
/* Griddata 세팅 */
rowGrid: {
data: [
{
eqpmGrpNm: "냉동기고온",
eqpmGrpId: "UT_HT_CH201",
eqpmId: "UT_HT_CH201",
eqpmNm: "UT_HT_CH201",
tagId: "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV",
tagNm: "ICHEON 고온 냉동기 201호기 - 회로1 전류A",
// rowStat: "I",
},
{
eqpmGrpNm: "냉동기고온",
eqpmGrpId: "UT_HT_CH201",
eqpmId: "UT_HT_CH201",
eqpmNm: "UT_HT_CH201",
tagId: "ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV",
tagNm: "ICHEON 고온 냉동기 201호기 - 회로1 전류A",
// rowStat: "I",
},
],
column: [
{ header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 150 },
{
header: "설비그룹 ID",
name: "eqpmGrpId",
align: "center",
hidden: true,
},
{ header: "설비ID", name: "eqpmId", align: "left", width: 200 },
{ header: "설비명", name: "eqpmNm", align: "left", width: 200 },
{ header: "TAG ID", name: "tagId", align: "left", width: 500 },
{ header: "TAG 명", name: "tagNm", align: "left" },
// { header: "rowStat", name: "rowStat", align: "center", hidden: true },
],
data: [],
column: [],
option: {},
defaultRow: {
eqpmGrpNm: null,

1
plugins/eChart.js
View File

@ -52,5 +52,4 @@ use([
// ToolboxComponent, // 그래프 이미지 save
]);
console.log('echart plugin', echarts)
Vue.component('VChart', VChart);

4
plugins/vuetify.js
View File

@ -10,6 +10,7 @@ import icoBulletPoint from '~/components/icons/icoBulletPoint';
import icoChevronDown from '~/components/icons/icoChevronDown';
import icoSearch from '~/components/icons/icoSearch';
import icoSend from '~/components/icons/icoSend';
import icoExpandAlt from '~/components/icons/icoExpandAlt';
import '@mdi/font/css/materialdesignicons.css'; // Ensure you are using css-loader
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vue from 'vue';
@ -73,6 +74,9 @@ export default new Vuetify({
icoSend: {
component: icoSend,
},
icoExpandAlt: {
component: icoExpandAlt,
},
},
},
});

4
store/index.js
View File

@ -197,8 +197,8 @@ export const mutations = {
// 페이지 그리드 데이터 set
setGridData: (state, payload) => {
console.log('check:', state.pageData)
console.log('payload:', payload)
// console.log('check:', state.pageData)
// console.log('payload:', payload)
// state.pageData['PRG0001']['dashBoard_grid_01'] = {
// ...state.pageData['PRG0001']['dashBoard_grid_01'],
// data: payload.value,