Remove mockdata screen 5
This commit is contained in:
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="mainDiv" class="l-layout">
|
<div ref="mainDiv" class="l-layout">
|
||||||
<PageTitle text="에너지 사용량 이력" />
|
<CommonPageTitle />
|
||||||
|
|
||||||
<v-row ref="searchFilter">
|
<v-row ref="searchFilter">
|
||||||
<v-col :cols="12">
|
<v-col :cols="12">
|
||||||
<v-card class="searchFilter">
|
<v-card class="searchFilter">
|
||||||
@ -76,6 +75,7 @@
|
|||||||
:parentPrgmId="myPrgmId"
|
:parentPrgmId="myPrgmId"
|
||||||
:isRangeOption="false"
|
:isRangeOption="false"
|
||||||
:textCols="12"
|
:textCols="12"
|
||||||
|
:customClass="'datepicker-large'"
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col :cols="6" class="text-right">
|
<v-col :cols="6" class="text-right">
|
||||||
@ -270,7 +270,6 @@ export default {
|
|||||||
DatePicker,
|
DatePicker,
|
||||||
Grid,
|
Grid,
|
||||||
Chart,
|
Chart,
|
||||||
PageTitle,
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -363,10 +362,9 @@ export default {
|
|||||||
setChartOption: "setChartOption",
|
setChartOption: "setChartOption",
|
||||||
}),
|
}),
|
||||||
async init() {
|
async init() {
|
||||||
await this.search();
|
|
||||||
|
|
||||||
await this.getSelectValueList();
|
await this.getSelectValueList();
|
||||||
await this.setQueryParams();
|
await this.setQueryParams();
|
||||||
|
await this.search();
|
||||||
|
|
||||||
this.initedFlag = true;
|
this.initedFlag = true;
|
||||||
},
|
},
|
||||||
@ -522,11 +520,6 @@ export default {
|
|||||||
await this.setContentData01();
|
await this.setContentData01();
|
||||||
await this.setContentData02();
|
await this.setContentData02();
|
||||||
await this.setContentData03();
|
await this.setContentData03();
|
||||||
await this.setContentData04();
|
|
||||||
|
|
||||||
// await this.setContentData01();
|
|
||||||
// await this.setContentData02();
|
|
||||||
// await this.setContentData03();
|
|
||||||
// await this.setContentData04();
|
// await this.setContentData04();
|
||||||
},
|
},
|
||||||
async setContentData01() {
|
async setContentData01() {
|
||||||
@ -540,47 +533,16 @@ export default {
|
|||||||
apiKey = "selectMonthlyEnrgUseMainGuideIdx";
|
apiKey = "selectMonthlyEnrgUseMainGuideIdx";
|
||||||
}
|
}
|
||||||
|
|
||||||
// res = await this.postApiReturn({
|
res = await this.postApiReturn({
|
||||||
// apiKey: apiKey,
|
apiKey: apiKey,
|
||||||
// resKey: "enrgUseEqpmDetlMntrData",
|
resKey: 'enrgUseEqpmDetlMntrData',
|
||||||
// sendParam: {
|
sendParam: {
|
||||||
// eqpmGrpId: this.selectValue03,
|
eqpmGrpId: this.selectValue03,
|
||||||
// eqpmId: this.selectValue04,
|
eqpmId: this.selectValue04,
|
||||||
// fromDt: this.fromDt,
|
fromDt: this.fromDt,
|
||||||
// },
|
|
||||||
// });
|
|
||||||
|
|
||||||
res = [
|
|
||||||
{
|
|
||||||
gdIdxId: "A01",
|
|
||||||
gdIdxNm: "Temperature",
|
|
||||||
dataNum: 0,
|
|
||||||
totVal: 23.5,
|
|
||||||
timestamp: "2025-07-15T10:00:00Z",
|
|
||||||
},
|
},
|
||||||
{
|
});
|
||||||
gdIdxId: "C03",
|
console.log('res 01:',res)
|
||||||
gdIdxNm: "Power Usage",
|
|
||||||
dataNum: 1,
|
|
||||||
totVal: 24.1,
|
|
||||||
timestamp: "2025-07-15T11:00:00Z",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gdIdxId: "B02",
|
|
||||||
gdIdxNm: "Humidity",
|
|
||||||
dataNum: 0,
|
|
||||||
totVal: 60,
|
|
||||||
timestamp: "2025-07-15T10:00:00Z",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gdIdxId: "B03",
|
|
||||||
gdIdxNm: "Test",
|
|
||||||
dataNum: 0,
|
|
||||||
totVal: 50,
|
|
||||||
timestamp: "2025-07-19T10:00:00Z",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
this.contentData01 = await this.makeContentData01(res);
|
this.contentData01 = await this.makeContentData01(res);
|
||||||
console.log("content", this.contentData01);
|
console.log("content", this.contentData01);
|
||||||
await this.setChartGroup01(this.contentData01);
|
await this.setChartGroup01(this.contentData01);
|
||||||
@ -615,42 +577,16 @@ export default {
|
|||||||
|
|
||||||
this.loadGrid01 = false;
|
this.loadGrid01 = false;
|
||||||
|
|
||||||
// res = await this.postApiReturn({
|
res = await this.postApiReturn({
|
||||||
// apiKey: "selectEnrgUseGuideAlarmInfo",
|
apiKey: 'selectEnrgUseGuideAlarmInfo',
|
||||||
// resKey: "enrgUseEqpmDetlMntrData",
|
resKey: 'enrgUseEqpmDetlMntrData',
|
||||||
// sendParam: {
|
sendParam: {
|
||||||
// cmCycle: this.pageData.cmCycle,
|
cmCycle: this.pageData.cmCycle,
|
||||||
// eqpmId: this.selectValue04,
|
eqpmId: this.selectValue04,
|
||||||
// fromDt: this.fromDt,
|
fromDt: this.fromDt,
|
||||||
// alrmKind: ["WARN", "CARE"],
|
alrmKind: ['WARN', 'CARE'],
|
||||||
// },
|
|
||||||
// });
|
|
||||||
res = [
|
|
||||||
{
|
|
||||||
gdIdxId: "PQ001",
|
|
||||||
totDttm: "TEMP",
|
|
||||||
totDt: "Temperature",
|
|
||||||
totTm: "Analog",
|
|
||||||
gdIdxNm: "PQ001",
|
|
||||||
totVal: "TEMP",
|
|
||||||
caseStndVal: "Temperature",
|
|
||||||
warnStndVal: "Analog",
|
|
||||||
alrmKind: "PQ001",
|
|
||||||
alrmMsg: "TEMP",
|
|
||||||
},
|
},
|
||||||
{
|
});
|
||||||
gdIdxId: "PQ001",
|
|
||||||
totDttm: "TEMP",
|
|
||||||
totDt: "Temperature",
|
|
||||||
totTm: "Analog",
|
|
||||||
gdIdxNm: "PQ001",
|
|
||||||
totVal: "TEMP",
|
|
||||||
caseStndVal: "Temperature",
|
|
||||||
warnStndVal: "Analog",
|
|
||||||
alrmKind: "PQ001",
|
|
||||||
alrmMsg: "TEMP",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
for (var i = 0; i < res.length; i++) {
|
for (var i = 0; i < res.length; i++) {
|
||||||
newRes.push({
|
newRes.push({
|
||||||
@ -697,33 +633,13 @@ export default {
|
|||||||
|
|
||||||
this.loadGrid02 = false;
|
this.loadGrid02 = false;
|
||||||
|
|
||||||
// res = await this.postApiReturn({
|
res = await this.postApiReturn({
|
||||||
// apiKey: "selectEnrgUseEqpmDescInfo",
|
apiKey: 'selectEnrgUseEqpmDescInfo',
|
||||||
// resKey: "enrgUseEqpmDetlMntrData",
|
resKey: 'enrgUseEqpmDetlMntrData',
|
||||||
// sendParam: {
|
sendParam: {
|
||||||
// eqpmGrpId: this.selectValue03,
|
eqpmGrpId: this.selectValue03,
|
||||||
// },
|
|
||||||
// });
|
|
||||||
res = [
|
|
||||||
{
|
|
||||||
pysclQtyId: "PQ001",
|
|
||||||
pysclQtyCd: "TEMP",
|
|
||||||
pysclQtyNm: "Temperature",
|
|
||||||
pysclQtyTp: "Analog",
|
|
||||||
},
|
},
|
||||||
{
|
});
|
||||||
pysclQtyId: "PQ002",
|
|
||||||
pysclQtyCd: "PRESS",
|
|
||||||
pysclQtyNm: "Pressure",
|
|
||||||
pysclQtyTp: "Analog",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pysclQtyId: "PQ003",
|
|
||||||
pysclQtyCd: "FLOW",
|
|
||||||
pysclQtyNm: "Flow Rate",
|
|
||||||
pysclQtyTp: "Digital",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
for (var i = 0; i < res.length; i++) {
|
for (var i = 0; i < res.length; i++) {
|
||||||
newRes.push({
|
newRes.push({
|
||||||
@ -748,11 +664,11 @@ export default {
|
|||||||
this.loadGrid02 = true;
|
this.loadGrid02 = true;
|
||||||
|
|
||||||
await this.$nextTick();
|
await this.$nextTick();
|
||||||
// this.$refs[this.gridName02].focus({
|
this.$refs[this.gridName02].focus({
|
||||||
// rowKey: 0,
|
rowKey: 0,
|
||||||
// columnName: "no",
|
columnName: 'no',
|
||||||
// setScroll: true,
|
setScroll: true,
|
||||||
// });
|
});
|
||||||
},
|
},
|
||||||
async setContentData04(selectedData) {
|
async setContentData04(selectedData) {
|
||||||
var res = null;
|
var res = null;
|
||||||
@ -764,31 +680,23 @@ export default {
|
|||||||
this.loadTrendChart = false;
|
this.loadTrendChart = false;
|
||||||
|
|
||||||
xAxisData = this.makeTrendChartXaxisData();
|
xAxisData = this.makeTrendChartXaxisData();
|
||||||
console.log("x axis :", xAxisData);
|
|
||||||
|
|
||||||
if (this.pageData.cmCycle == "CYC_MONTH") {
|
if (this.pageData.cmCycle == "CYC_MONTH") {
|
||||||
sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
|
sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
|
||||||
}
|
}
|
||||||
|
|
||||||
// res = await this.postApiReturn({
|
res = await this.postApiReturn({
|
||||||
// apiKey: "selectEnrgUseHourlyTrendInfo",
|
apiKey: 'selectEnrgUseHourlyTrendInfo',
|
||||||
// resKey: "enrgUseEqpmDetlMntrData",
|
resKey: 'enrgUseEqpmDetlMntrData',
|
||||||
// sendParam: {
|
sendParam: {
|
||||||
// pysclQtyId: selectedData.pysclQtyId,
|
pysclQtyId: selectedData.pysclQtyId,
|
||||||
// eqpmId: this.selectValue04,
|
eqpmId: this.selectValue04,
|
||||||
// fromDt: this.fromDt,
|
fromDt: this.fromDt,
|
||||||
// cmCycle: this.pageData.cmCycle,
|
cmCycle: this.pageData.cmCycle,
|
||||||
// },
|
},
|
||||||
// });
|
});
|
||||||
|
|
||||||
res = [
|
seriesData = new Array(xAxisData.length).fill(NaN);
|
||||||
{ monthCnt: 0, totVal: 120 },
|
|
||||||
{ monthCnt: 1, totVal: 150 },
|
|
||||||
{ monthCnt: 2, totVal: 180 },
|
|
||||||
{ monthCnt: 3, totVal: 200 },
|
|
||||||
];
|
|
||||||
|
|
||||||
seriesData = new Array(xAxisData.length).fill(300);
|
|
||||||
|
|
||||||
for (var i = 0; i < res.length; i++) {
|
for (var i = 0; i < res.length; i++) {
|
||||||
if (this.pageData.cmCycle == "CYC_MONTH") {
|
if (this.pageData.cmCycle == "CYC_MONTH") {
|
||||||
@ -798,8 +706,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var seriesData2 = new Array(xAxisData.length).fill(100);
|
|
||||||
|
|
||||||
var chartOption = {
|
var chartOption = {
|
||||||
grid: {
|
grid: {
|
||||||
top: "3%",
|
top: "3%",
|
||||||
@ -845,14 +751,14 @@ export default {
|
|||||||
color: "#D32029",
|
color: "#D32029",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
type: "line",
|
// type: "line",
|
||||||
data: seriesData2,
|
// data: seriesData2,
|
||||||
symbol: "none",
|
// symbol: "none",
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
color: "#FAAD14",
|
// color: "#FAAD14",
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
],
|
],
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
@ -898,40 +804,13 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// var idxData = await this.postApiReturn({
|
var idxData = await this.postApiReturn({
|
||||||
// apiKey: "selectEnrgUseMainIdxDesc",
|
apiKey: 'selectEnrgUseMainIdxDesc',
|
||||||
// resKey: "eqpmIndMntrData",
|
resKey: 'eqpmIndMntrData',
|
||||||
// sendParam: {
|
sendParam: {
|
||||||
// eqpmGrpId: this.selectValue03,
|
eqpmGrpId: this.selectValue03,
|
||||||
// },
|
|
||||||
// });
|
|
||||||
|
|
||||||
var idxData = [
|
|
||||||
{
|
|
||||||
gdIdxId: "A01",
|
|
||||||
gdIdxNm: "Temperature",
|
|
||||||
unit: "°C",
|
|
||||||
description: "Average temperature reading",
|
|
||||||
},
|
},
|
||||||
{
|
});
|
||||||
gdIdxId: "B02",
|
|
||||||
gdIdxNm: "Humidity",
|
|
||||||
unit: "%",
|
|
||||||
description: "Relative humidity level",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gdIdxId: "C03",
|
|
||||||
gdIdxNm: "Power Usage",
|
|
||||||
unit: "kWh",
|
|
||||||
description: "Total power consumption",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gdIdxId: "B03",
|
|
||||||
gdIdxNm: "Test",
|
|
||||||
unit: "%",
|
|
||||||
description: "Relative humidity level test",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
for (var i = 0; i < idxData.length; i++) {
|
for (var i = 0; i < idxData.length; i++) {
|
||||||
if (!result.hasOwnProperty(idxData[i]["gdIdxId"])) {
|
if (!result.hasOwnProperty(idxData[i]["gdIdxId"])) {
|
||||||
@ -956,11 +835,10 @@ export default {
|
|||||||
var dataKeyList = Object.keys(data);
|
var dataKeyList = Object.keys(data);
|
||||||
var currentChartData = null;
|
var currentChartData = null;
|
||||||
var chartKey = null;
|
var chartKey = null;
|
||||||
|
|
||||||
for (var i = 0; i < dataKeyList.length; i++) {
|
for (var i = 0; i < dataKeyList.length; i++) {
|
||||||
currentChartData = data[dataKeyList[i]];
|
currentChartData = data[dataKeyList[i]];
|
||||||
console.log("curr:", currentChartData);
|
chartKey = 'chartGroup01_' + currentChartData['gdIdxId'];
|
||||||
|
|
||||||
chartKey = "chartGroup01_" + currentChartData["gdIdxId"];
|
|
||||||
|
|
||||||
this.setPageData({
|
this.setPageData({
|
||||||
[chartKey]: this.getGroup01ChartOption(),
|
[chartKey]: this.getGroup01ChartOption(),
|
||||||
@ -975,10 +853,9 @@ export default {
|
|||||||
var seriesData = null;
|
var seriesData = null;
|
||||||
|
|
||||||
xAxisData = this.makeChartGroup01XaxisData();
|
xAxisData = this.makeChartGroup01XaxisData();
|
||||||
console.log("text xaxis", xAxisData);
|
|
||||||
|
|
||||||
for (var i = 0; i < dataKeyList.length; i++) {
|
for (var i = 0; i < dataKeyList.length; i++) {
|
||||||
seriesData = new Array(xAxisData.length).fill(10);
|
seriesData = new Array(xAxisData.length).fill(NaN);
|
||||||
|
|
||||||
currentChartData = data[dataKeyList[i]];
|
currentChartData = data[dataKeyList[i]];
|
||||||
chartKey = "chartGroup01_" + currentChartData["gdIdxId"];
|
chartKey = "chartGroup01_" + currentChartData["gdIdxId"];
|
||||||
@ -1006,8 +883,6 @@ export default {
|
|||||||
color: "#D32029",
|
color: "#D32029",
|
||||||
};
|
};
|
||||||
|
|
||||||
// chartOption["series"][0]["symbol"] = "none";
|
|
||||||
console.log("chartOption: ", chartOption);
|
|
||||||
return chartOption;
|
return chartOption;
|
||||||
},
|
},
|
||||||
makeChartGroup01XaxisData() {
|
makeChartGroup01XaxisData() {
|
||||||
@ -1097,76 +972,14 @@ const defaultData = {
|
|||||||
fromDt: Utility.setFormatDate(new Date(), "YYYYMM"), // 조회 시작일
|
fromDt: Utility.setFormatDate(new Date(), "YYYYMM"), // 조회 시작일
|
||||||
|
|
||||||
grid01: {
|
grid01: {
|
||||||
data: [
|
data: [],
|
||||||
{
|
column: [],
|
||||||
gdIdxId: "PQ001",
|
|
||||||
totDttm: "TEMP",
|
|
||||||
totDt: "Temperature",
|
|
||||||
totTm: "Analog",
|
|
||||||
gdIdxNm: "PQ001",
|
|
||||||
totVal: "TEMP",
|
|
||||||
caseStndVal: "Temperature",
|
|
||||||
warnStndVal: "Analog",
|
|
||||||
alrmKind: "PQ001",
|
|
||||||
alrmMsg: "TEMP",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gdIdxId: "PQ001",
|
|
||||||
totDttm: "TEMP",
|
|
||||||
totDt: "Temperature",
|
|
||||||
totTm: "Analog",
|
|
||||||
gdIdxNm: "PQ001",
|
|
||||||
totVal: "TEMP",
|
|
||||||
caseStndVal: "Temperature",
|
|
||||||
warnStndVal: "Analog",
|
|
||||||
alrmKind: "PQ001",
|
|
||||||
alrmMsg: "TEMP",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
column: [
|
|
||||||
{ header: "NO", name: "no", width: 40, align: "right" },
|
|
||||||
{ header: "gdIdxId", name: "gdIdxId", hidden: true, align: "left" },
|
|
||||||
{ header: "totDttm", name: "totDttm", hidden: true, align: "left" },
|
|
||||||
{ header: "발생일", name: "totDt", width: 150, align: "left" },
|
|
||||||
{ header: "발생시간대", name: "totTm", width: 100, align: "left" },
|
|
||||||
{ header: "가이드지표명", name: "gdIdxNm", width: 200, align: "left" },
|
|
||||||
{ header: "가이드값", name: "totVal", hidden: true, align: "left" },
|
|
||||||
{ header: "주의값", name: "caseStndVal", hidden: true, align: "left" },
|
|
||||||
{ header: "경고값", name: "warnStndVal", hidden: true, align: "left" },
|
|
||||||
{ header: "알람종류", name: "alrmKind", hidden: true, align: "left" },
|
|
||||||
{ header: "알람내용", name: "alrmMsg", align: "left" },
|
|
||||||
],
|
|
||||||
option: {},
|
option: {},
|
||||||
},
|
},
|
||||||
|
|
||||||
grid02: {
|
grid02: {
|
||||||
data: [
|
data: [],
|
||||||
{
|
column: [],
|
||||||
pysclQtyId: "PQ001",
|
|
||||||
pysclQtyCd: "TEMP",
|
|
||||||
pysclQtyNm: "Temperature",
|
|
||||||
pysclQtyTp: "Analog",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pysclQtyId: "PQ002",
|
|
||||||
pysclQtyCd: "PRESS",
|
|
||||||
pysclQtyNm: "Pressure",
|
|
||||||
pysclQtyTp: "Analog",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pysclQtyId: "PQ003",
|
|
||||||
pysclQtyCd: "FLOW",
|
|
||||||
pysclQtyNm: "Flow Rate",
|
|
||||||
pysclQtyTp: "Digital",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
column: [
|
|
||||||
{ header: "NO", name: "no", align: "right", width: 40 },
|
|
||||||
{ header: "물리량ID", name: "pysclQtyId", width: 100, align: "left" },
|
|
||||||
{ header: "물리량코드", name: "pysclQtyCd", align: "left" },
|
|
||||||
{ header: "물리량명", name: "pysclQtyNm", width: 190, align: "left" },
|
|
||||||
{ header: "물리량타입", name: "pysclQtyTp", width: 100, align: "left" },
|
|
||||||
],
|
|
||||||
option: {},
|
option: {},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user