- Update screen 29 - 14 - Remove mock data dashboard

This commit is contained in:
Michael
2025-07-28 17:11:08 +09:00
parent 2dd0c6a72c
commit bac0b25a96
12 changed files with 1329 additions and 1762 deletions

View File

@ -93,6 +93,7 @@
}
.search-button {
height: 40px;
color: map-deep-get($config, #{$theme}, "search-btn-color");
}

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;

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,
@ -238,6 +239,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,

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

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%',

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,

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) {

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>

File diff suppressed because it is too large Load Diff

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: '',
@ -1160,3 +996,6 @@ const myDetail = [
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -195,68 +195,51 @@ export default {
});
},
async getEqpmKind() {
// let res = await this.postApiReturn({
// apiKey: "selectEqpmKindCodeList",
// resKey: "eqpmKindCodeLists",
// sendParam: {},
// });
let res = await this.postApiReturn({
apiKey: 'selectEqpmKindCodeList',
resKey: 'eqpmKindCodeLists',
sendParam: {},
});
let res = [
{
eqpmKindId: "냉동기저온",
eqpmKindNm: "냉동기저온",
},
{
eqpmKindId: "냉동기고온",
eqpmKindNm: "냉동기고온",
},
];
if (res.length > 0) {
this.selectValueList01 = await res.map((item) => {
return {
// text: item.eqpmKindNm,
label: item.eqpmKindNm,
value: item.eqpmKindId,
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
this.setPageData({
eqpmKindList: this.selectValueList01,
eqpmKindId: this.selectValue01,
});
},
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
this.setPageData({
eqpmKindList: this.selectValueList01,
eqpmKindId: this.selectValue01,
});
},
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"];
await this.getChartData(res);
let res = await this.postApiReturn({
apiKey: 'selectEnrgEffcTotSumm',
resKey: 'totSummData',
sendParam: {
fromDt: this.pageData.fromDt,
eqpmKindId: this.selectValue01,
},
});
// this.selectData = res.filter((item, i) => {
// return (
// res.findIndex((item2, j) => {
// return item.eqpmGrpId === item2.eqpmGrpId;
// }) === i
// );
// });
await this.getChartData(res);
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 = {};
if (chartName == "card") {
@ -291,52 +274,40 @@ export default {
});
},
async getChartData(data) {
var chartDataObj = {};
this.objList = {};
// let res = await this.postApiReturn({
// apiKey : 'selectEnrgEffcTotSumm',
// resKey : 'totSummData',
// sendParam:{
// fromDt : this.pageData.fromDt,
// eqpmKindId : this.pageData.eqpmKindId,
// }
// });
var chartDataObj = {};
this.objList = {};
// let res = await this.postApiReturn({
// apiKey : 'selectEnrgEffcTotSumm',
// resKey : 'totSummData',
// sendParam:{
// fromDt : this.pageData.fromDt,
// eqpmKindId : this.pageData.eqpmKindId,
// }
// });
// data.map((item) => {
// if (chartDataObj[item.eqpmGrpId] != null) {
// chartDataObj[item.eqpmGrpId].push(item);
// } else {
// chartDataObj[item.eqpmGrpId] = [item];
// }
// });
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 },
],
};
// 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.setPageData({
[this.chartNameList[i - 1]]: Utility.defaultChartOption(true),
});
// 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.setPageData({
[this.chartNameList[i - 1]]: Utility.defaultChartOption(true),
});
this.setChartData(chartDataObj[x], i);
}
// this.setChartData(chartDataObj[Object.keys(chartDataObj)[0]]);
},
this.setChartData(chartDataObj[x], i);
}
// this.setChartData(chartDataObj[Object.keys(chartDataObj)[0]]);
},
async setChartData(data, number) {
this.loadChartList[number - 1] = false;
let xAxisData = [];

File diff suppressed because it is too large Load Diff