990 lines
28 KiB
Vue
990 lines
28 KiB
Vue
<template>
|
|
<div ref="mainDiv" class="l-layout">
|
|
<CommonPageTitle />
|
|
<v-row ref="searchFilter">
|
|
<v-col :cols="12">
|
|
<v-card class="searchFilter">
|
|
<v-row>
|
|
<v-col :cols="3">
|
|
<component
|
|
:is="'SelectBox'"
|
|
ref="SelectBox1"
|
|
:propsValue="selectValue01"
|
|
:itemList="selectValueList01"
|
|
:label="'FAB'"
|
|
:labelCols="12"
|
|
:textCols="12"
|
|
:customClass="'select-large'"
|
|
@update:propsValue="selectValue01 = $event"
|
|
/>
|
|
</v-col>
|
|
<v-col :cols="3">
|
|
<component
|
|
:is="'SelectBox'"
|
|
ref="SelectBox2"
|
|
:propsValue="selectValue02"
|
|
:itemList="selectValueList02"
|
|
:label="'설비종류'"
|
|
:labelCols="12"
|
|
:textCols="12"
|
|
:customClass="'select-large'"
|
|
@update:propsValue="selectValue02 = $event"
|
|
/>
|
|
</v-col>
|
|
<v-col :cols="3">
|
|
<component
|
|
:is="'SelectBox'"
|
|
ref="SelectBox3"
|
|
:propsValue="selectValue03"
|
|
:itemList="selectValueList03"
|
|
:label="'설비그룹'"
|
|
:labelCols="12"
|
|
:textCols="12"
|
|
:customClass="'select-large'"
|
|
@update:propsValue="selectValue03 = $event"
|
|
/>
|
|
</v-col>
|
|
<v-col :cols="3">
|
|
<component
|
|
:is="'SelectBox'"
|
|
ref="SelectBox4"
|
|
:propsValue="selectValue04"
|
|
:itemList="selectValueList04"
|
|
:label="'설비'"
|
|
:labelCols="12"
|
|
:textCols="12"
|
|
:customClass="'select-large'"
|
|
@update:propsValue="selectValue04 = $event"
|
|
/>
|
|
</v-col> </v-row
|
|
><v-row>
|
|
<v-col :cols="3">
|
|
<component
|
|
:is="'SelectCmCycle'"
|
|
:parentPrgmId="myPrgmId"
|
|
:labelCols="12"
|
|
:textCols="12"
|
|
:customClass="'select-large'"
|
|
:label="'구분'"
|
|
/>
|
|
</v-col>
|
|
<v-col :cols="3">
|
|
<component
|
|
:is="'DatePicker'"
|
|
:label="'대상년월'"
|
|
:parentPrgmId="myPrgmId"
|
|
:isRangeOption="false"
|
|
:textCols="12"
|
|
:customClass="'datepicker-large'"
|
|
/>
|
|
</v-col>
|
|
<v-col :cols="6" class="text-right">
|
|
<!-- <v-btn style="margin-top: 22px" :ripple="false" @click="search()"
|
|
>조회</v-btn
|
|
> -->
|
|
<a-button
|
|
style="margin-top: 25px; height: 40px"
|
|
icon="search"
|
|
class="search-button"
|
|
type="primary"
|
|
@click="search"
|
|
>조회</a-button
|
|
>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row ref="contents" style="height: calc(100vh - 230px)">
|
|
<v-col :cols="12" style="height: 100%">
|
|
<v-row class="pa-1" style="height: 50%; width: 100%">
|
|
<div style="width: 100%; height: 100%; overflow: hidden">
|
|
<v-card style="background: none; height: 15%">
|
|
<v-card-title
|
|
class="d-flex align-center justify-space-between"
|
|
style="padding: 0px"
|
|
>
|
|
<span style="margin-top: 10px" class="tit ft-size_20 ft-weight_600">
|
|
주요가이드 지표
|
|
</span>
|
|
</v-card-title>
|
|
</v-card>
|
|
<div style="height: 85%">
|
|
<v-row style="height: 100%; overflow: auto">
|
|
<v-col
|
|
:cols="3"
|
|
style="height: 100%"
|
|
v-for="(value, key, index) in contentData01"
|
|
:key="'key1' + index"
|
|
>
|
|
<v-card style="position: relative; overflow: hidden">
|
|
<!-- Card header -->
|
|
<div
|
|
style="
|
|
position: absolute;
|
|
left: 0;
|
|
top: 20px;
|
|
width: 4px;
|
|
height: 30px;
|
|
background-color: #91caff;
|
|
border-radius: 2px;
|
|
"
|
|
></div>
|
|
<v-card-title style="padding-left: 10px">{{
|
|
value["gdIdxNm"]
|
|
}}</v-card-title>
|
|
<div class="v-box" style="height: 80%; padding: 3px; margin: 10px">
|
|
<v-col :cols="12" style="height: 100%">
|
|
<div style="height: 85%">
|
|
<component
|
|
class="w100 h100"
|
|
:is="loadChart ? 'Chart' : null"
|
|
:parentPrgmId="myPrgmId"
|
|
:chartName="'chartGroup01_' + value['gdIdxId']"
|
|
:ref="'chartGroup01_' + value['gdIdxId']"
|
|
/>
|
|
</div>
|
|
</v-col>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</div>
|
|
</v-row>
|
|
<v-row class="pa-1" style="height: 52%; width: 100%">
|
|
<v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
|
|
<div style="height: 15%">
|
|
<v-card-title class="d-flex align-center justify-space-between pl-3">
|
|
<span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
|
|
</v-card-title>
|
|
</div>
|
|
<div
|
|
ref="gridParent01"
|
|
class="pl-3 mt-5"
|
|
style="height: 75%; overflow: hidden;"
|
|
>
|
|
<component
|
|
:ref="gridName01"
|
|
:is="loadGrid01 ? 'Grid' : null"
|
|
:gridName="gridName01"
|
|
:parentPrgmId="myPrgmId"
|
|
/>
|
|
</div>
|
|
</v-card>
|
|
</v-row>
|
|
<v-row class="pa-1" style="height: 40%; width: 100%">
|
|
<div style="height: 100%; width: 100%">
|
|
<v-row style="height: 100%">
|
|
<v-col :cols="5" class="">
|
|
<v-card class="pa-1" style="height: 100%; width: 100%">
|
|
<div style="height: 15%">
|
|
<v-card-title class="d-flex align-center justify-space-between pl-3">
|
|
<span class="tit ft-size_20 ft-weight_600">설비 상세 정보</span>
|
|
</v-card-title>
|
|
</div>
|
|
<div ref="gridParent02" style="height: 75%" class="pl-3 mt-5">
|
|
<component
|
|
:ref="gridName02"
|
|
:is="loadGrid02 ? 'Grid' : null"
|
|
:gridName="gridName02"
|
|
:parentPrgmId="myPrgmId"
|
|
@getRowsData="getRowData02"
|
|
/>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col :cols="7" class="">
|
|
<v-card class="pa-1" style="height: 100%; width: 100%">
|
|
<div style="height: 25%">
|
|
<v-card-title class="d-flex align-center justify-space-between pa-5">
|
|
<span class="tit ft-size_20 ft-weight_600">시간별 TREND 정보</span>
|
|
</v-card-title>
|
|
</div>
|
|
<div ref="trendChartParent" style="height: 75%">
|
|
<component
|
|
class="w100 h100"
|
|
:is="loadTrendChart ? 'Chart' : null"
|
|
:parentPrgmId="myPrgmId"
|
|
:chartName="'trendChart'"
|
|
/>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations, mapActions } from "vuex";
|
|
import mixinGlobal from "@/mixin/global.js";
|
|
import { resize } from "@/mixin/resize.js";
|
|
import Utility from "~/plugins/utility";
|
|
import SelectBox from "@/components/common/select/SelectBox";
|
|
import SelectCmCycle from "@/components/common/select/SelectCmCycle";
|
|
import DatePicker from "@/components/common/Datepicker";
|
|
import Grid from "~/components/common/Grid";
|
|
import Chart from "~/components/common/Chart";
|
|
import PageTitle from "~/components/common/PageTitle";
|
|
|
|
let myTitle;
|
|
let myPrgmId;
|
|
let paramKey;
|
|
|
|
export default {
|
|
mixins: [mixinGlobal, resize],
|
|
async asyncData(context) {
|
|
const myState = context.store.state;
|
|
myPrgmId = context.route.query.prgmId;
|
|
await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
|
|
myTitle = await myState.activeMenuInfo.menuNm;
|
|
},
|
|
meta: {
|
|
title: () => {
|
|
return myTitle;
|
|
},
|
|
prgmId: myPrgmId,
|
|
closable: true,
|
|
},
|
|
components: {
|
|
Utility,
|
|
SelectBox,
|
|
SelectCmCycle,
|
|
DatePicker,
|
|
Grid,
|
|
Chart,
|
|
},
|
|
data() {
|
|
return {
|
|
myPrgmId: myPrgmId,
|
|
|
|
initedFlag: false,
|
|
queryParams: null,
|
|
|
|
selectValueList01: [],
|
|
selectValueList02: [],
|
|
selectValueList03: [],
|
|
selectValueList04: [],
|
|
|
|
selectValue01: null,
|
|
selectValue02: null,
|
|
selectValue03: null,
|
|
selectValue04: null,
|
|
|
|
contentData01: {},
|
|
|
|
loadGrid01: false,
|
|
loadGrid02: false,
|
|
gridName01: "grid01",
|
|
gridName02: "grid02",
|
|
|
|
loadTrendChart: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
pageData: (state) => state.pageData[myPrgmId],
|
|
}),
|
|
fromDt() {
|
|
return this.pageData.fromDt;
|
|
},
|
|
},
|
|
watch: {
|
|
async $route(to, from) {
|
|
if (to.query.prgmId == myPrgmId) {
|
|
if (to.params.key) {
|
|
document.getElementById("refresh").click();
|
|
}
|
|
}
|
|
},
|
|
async selectValue01(value) {
|
|
if (this.initedFlag) {
|
|
// await this.search();
|
|
await this.getSelectValueList04();
|
|
}
|
|
},
|
|
async selectValue02(value) {
|
|
if (this.initedFlag) {
|
|
await this.getSelectValueList03();
|
|
}
|
|
},
|
|
async selectValue03(value) {
|
|
if (this.initedFlag) {
|
|
await this.getSelectValueList04();
|
|
}
|
|
},
|
|
async selectValue04(value) {
|
|
if (this.initedFlag) {
|
|
await this.search();
|
|
}
|
|
},
|
|
async fromDt(value) {
|
|
if (this.initedFlag) {
|
|
await this.search();
|
|
}
|
|
},
|
|
},
|
|
async beforeCreate() {
|
|
myPrgmId = this.$route.query.prgmId;
|
|
await this.$store.dispatch("chkOpenTabList", {
|
|
key: "create",
|
|
prgmId: myPrgmId,
|
|
defaultData: defaultData,
|
|
});
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
beforeDestroy() {
|
|
this.initedFlag = false;
|
|
this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
setChartOption: "setChartOption",
|
|
}),
|
|
async init() {
|
|
await this.getSelectValueList();
|
|
await this.setQueryParams();
|
|
await this.search();
|
|
|
|
this.initedFlag = true;
|
|
},
|
|
async setQueryParams() {
|
|
this.queryParams = null;
|
|
|
|
if (paramKey == this.$route.params.key) {
|
|
return;
|
|
}
|
|
if (this.$route.params.key) {
|
|
paramKey = this.$route.params.key;
|
|
this.queryParams = this.$route.params;
|
|
}
|
|
|
|
if (this.queryParams && typeof this.queryParams == "object") {
|
|
this.setPageData({
|
|
dateInitedFlag: true,
|
|
});
|
|
this.selectValue01 = this.queryParams["fabId"];
|
|
this.selectValue02 = this.queryParams["eqpmKindId"];
|
|
await this.getSelectValueList03();
|
|
this.selectValue03 = this.queryParams["eqpmGrpId"];
|
|
await this.getSelectValueList04();
|
|
this.selectValue04 = this.queryParams["eqpmId"];
|
|
|
|
this.setPageData({
|
|
fromDt: this.queryParams["fromDt"],
|
|
cmCycle: this.queryParams["cmCycle"],
|
|
});
|
|
}
|
|
},
|
|
async getSelectValueList() {
|
|
await this.getSelectValueList01();
|
|
await this.getSelectValueList02();
|
|
await this.getSelectValueList03();
|
|
await this.getSelectValueList04();
|
|
},
|
|
async getSelectValueList01() {
|
|
let res = await this.postApiReturn({
|
|
apiKey: "selectFabCodeList",
|
|
resKey: "fabCodeLists",
|
|
sendParam: {},
|
|
});
|
|
if (res.length > 0) {
|
|
this.selectValueList01 = await res.map((item) => {
|
|
return {
|
|
text: item.eccNm,
|
|
value: item.eccId,
|
|
};
|
|
});
|
|
this.selectValue01 = this.selectValueList01[0].value;
|
|
} else {
|
|
this.selectValueList01 = [];
|
|
this.selectValue01 = null;
|
|
}
|
|
},
|
|
async getSelectValueList02() {
|
|
var res = await this.postApiReturn({
|
|
apiKey: "selectEmsEqpmKindList",
|
|
resKey: "eqpmGrpPysclQtyMngData",
|
|
sendParam: {},
|
|
});
|
|
|
|
if (res.length > 0) {
|
|
this.selectValueList02 = await res.map((item) => {
|
|
return {
|
|
text: item.eqpmKindNm,
|
|
value: item.eqpmKindId,
|
|
data: {
|
|
...item,
|
|
},
|
|
};
|
|
});
|
|
this.selectValue02 = this.selectValueList02[0].value;
|
|
} else {
|
|
this.selectValueList02 = [];
|
|
this.selectValue02 = null;
|
|
}
|
|
},
|
|
async getSelectValueList03() {
|
|
var res = await this.postApiReturn({
|
|
apiKey: "selectEmsEqpmGrpList",
|
|
resKey: "eqpmGrpPysclQtyMngData",
|
|
sendParam: {
|
|
eqpmKindId: this.selectValue02,
|
|
},
|
|
});
|
|
|
|
if (res.length > 0) {
|
|
this.selectValueList03 = await res.map((item) => {
|
|
return {
|
|
text: item.eqpmGrpNm,
|
|
value: item.eqpmGrpId,
|
|
data: {
|
|
...item,
|
|
},
|
|
};
|
|
});
|
|
this.selectValue03 = this.selectValueList03[0].value;
|
|
} else {
|
|
this.selectValueList03 = [];
|
|
this.selectValue03 = null;
|
|
}
|
|
},
|
|
async getSelectValueList04() {
|
|
var res = await this.postApiReturn({
|
|
apiKey: "selectFabEqpmList",
|
|
resKey: "enrgUseEqpmDetlMntrData",
|
|
sendParam: {
|
|
fabId: this.selectValue01,
|
|
eqpmGrpId: this.selectValue03,
|
|
},
|
|
});
|
|
|
|
if (res.length > 0) {
|
|
this.selectValueList04 = await res.map((item) => {
|
|
return {
|
|
text: item.eqpmNm,
|
|
value: item.eqpmId,
|
|
data: {
|
|
...item,
|
|
},
|
|
};
|
|
});
|
|
this.selectValue04 = this.selectValueList04[0].value;
|
|
} else {
|
|
this.selectValueList04 = [];
|
|
this.selectValue04 = null;
|
|
}
|
|
},
|
|
async search() {
|
|
// console.log('search ...');
|
|
// console.log('selectValue01 : ', this.selectValue01);
|
|
// console.log('selectValue02 : ', this.selectValue02);
|
|
// console.log('selectValue03 : ', this.selectValue03);
|
|
// console.log('selectValue04 : ', this.selectValue04);
|
|
// console.log('cmCycle : ', this.pageData.cmCycle);
|
|
// console.log('fromDt : ', this.fromDt);
|
|
|
|
await this.setContentData();
|
|
|
|
this.setPageData({
|
|
dateInitedFlag: false,
|
|
});
|
|
},
|
|
reloadChart() {
|
|
this.loadChart = false;
|
|
this.$nextTick(() => {
|
|
this.loadChart = true;
|
|
});
|
|
},
|
|
async setContentData() {
|
|
await this.setContentData01();
|
|
await this.setContentData02();
|
|
await this.setContentData03();
|
|
// await this.setContentData04();
|
|
},
|
|
async setContentData01() {
|
|
var apiKey = null;
|
|
var res = null;
|
|
this.contentData01 = {};
|
|
|
|
if (this.pageData.cmCycle == "CYC_DAY") {
|
|
apiKey = "selectDailyEnrgUseMainGuideIdx";
|
|
} else if (this.pageData.cmCycle == "CYC_MONTH") {
|
|
apiKey = "selectMonthlyEnrgUseMainGuideIdx";
|
|
}
|
|
|
|
res = await this.postApiReturn({
|
|
apiKey: apiKey,
|
|
resKey: 'enrgUseEqpmDetlMntrData',
|
|
sendParam: {
|
|
eqpmGrpId: this.selectValue03,
|
|
eqpmId: this.selectValue04,
|
|
fromDt: this.fromDt,
|
|
},
|
|
});
|
|
this.contentData01 = await this.makeContentData01(res);
|
|
await this.setChartGroup01(this.contentData01);
|
|
this.reloadChart();
|
|
},
|
|
async setContentData02() {
|
|
const _this = this;
|
|
const myOptions = {
|
|
columnOptions: {
|
|
resizable: true,
|
|
},
|
|
header: {
|
|
height: 38,
|
|
},
|
|
};
|
|
const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
|
|
var columnList = [
|
|
{ header: "NO", name: "no", width: 40, align: "center" },
|
|
{ header: "gdIdxId", name: "gdIdxId", hidden: true },
|
|
{ header: "totDttm", name: "totDttm", hidden: true },
|
|
{ header: "발생일", name: "totDt", width: 150, align: "center" },
|
|
{ header: "발생시간대", name: "totTm", width: 100, align: "center" },
|
|
{ header: "가이드지표명", name: "gdIdxNm", width: 200 },
|
|
{ header: "가이드값", name: "totVal", hidden: true },
|
|
{ header: "주의값", name: "caseStndVal", hidden: true },
|
|
{ header: "경고값", name: "warnStndVal", hidden: true },
|
|
{ header: "알람종류", name: "alrmKind", hidden: true },
|
|
{ header: "알람내용", name: "alrmMsg" },
|
|
];
|
|
var res = [];
|
|
var newRes = [];
|
|
|
|
this.loadGrid01 = false;
|
|
|
|
res = await this.postApiReturn({
|
|
apiKey: 'selectEnrgUseGuideAlarmInfo',
|
|
resKey: 'enrgUseEqpmDetlMntrData',
|
|
sendParam: {
|
|
cmCycle: this.pageData.cmCycle,
|
|
eqpmId: this.selectValue04,
|
|
fromDt: this.fromDt,
|
|
alrmKind: ['WARN', 'CARE'],
|
|
},
|
|
});
|
|
|
|
for (var i = 0; i < res.length; i++) {
|
|
newRes.push({
|
|
...res[i],
|
|
no: i + 1,
|
|
});
|
|
}
|
|
|
|
this.setGridOption({
|
|
gridKey: this.gridName01,
|
|
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
|
});
|
|
this.setGridColumn({
|
|
gridKey: this.gridName01,
|
|
value: columnList,
|
|
});
|
|
this.setGridData({
|
|
gridKey: this.gridName01,
|
|
value: newRes,
|
|
});
|
|
|
|
this.loadGrid01 = true;
|
|
},
|
|
async setContentData03() {
|
|
const _this = this;
|
|
const myOptions = {
|
|
columnOptions: {
|
|
resizable: true,
|
|
},
|
|
header: {
|
|
height: 38,
|
|
},
|
|
};
|
|
const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
|
|
var columnList = [
|
|
{ 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" },
|
|
];
|
|
var res = [];
|
|
var newRes = [];
|
|
|
|
this.loadGrid02 = false;
|
|
|
|
res = await this.postApiReturn({
|
|
apiKey: "selectEnrgUseEqpmDescInfo",
|
|
resKey: "enrgUseEqpmDetlMntrData",
|
|
sendParam: {
|
|
eqpmGrpId: this.selectValue03,
|
|
},
|
|
});
|
|
|
|
for (var i = 0; i < res.length; i++) {
|
|
newRes.push({
|
|
...res[i],
|
|
no: i + 1,
|
|
});
|
|
}
|
|
|
|
this.setGridOption({
|
|
gridKey: this.gridName02,
|
|
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
|
});
|
|
this.setGridColumn({
|
|
gridKey: this.gridName02,
|
|
value: columnList,
|
|
});
|
|
this.setGridData({
|
|
gridKey: this.gridName02,
|
|
value: newRes,
|
|
});
|
|
|
|
this.loadGrid02 = true;
|
|
|
|
await this.$nextTick();
|
|
this.$refs[this.gridName02].focus({
|
|
rowKey: 0,
|
|
columnName: 'no',
|
|
setScroll: true,
|
|
});
|
|
},
|
|
async setContentData04(selectedData) {
|
|
var res = null;
|
|
var _this = this;
|
|
var xAxisData = null;
|
|
var seriesData = null;
|
|
var sliderHandleSize = 100;
|
|
|
|
this.loadTrendChart = false;
|
|
|
|
xAxisData = this.makeTrendChartXaxisData();
|
|
|
|
if (this.pageData.cmCycle == "CYC_MONTH") {
|
|
sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
|
|
}
|
|
|
|
res = await this.postApiReturn({
|
|
apiKey: 'selectEnrgUseHourlyTrendInfo',
|
|
resKey: 'enrgUseEqpmDetlMntrData',
|
|
sendParam: {
|
|
pysclQtyId: selectedData.pysclQtyId,
|
|
eqpmId: this.selectValue04,
|
|
fromDt: this.fromDt,
|
|
cmCycle: this.pageData.cmCycle,
|
|
},
|
|
});
|
|
|
|
seriesData = new Array(xAxisData.length).fill(NaN);
|
|
|
|
for (var i = 0; i < res.length; i++) {
|
|
if (this.pageData.cmCycle == "CYC_MONTH") {
|
|
seriesData[res[i]["monthCnt"]] = res[i]["totVal"];
|
|
} else if (this.pageData.cmCycle == "CYC_DAY") {
|
|
seriesData[res[i]["dayCnt"]] = res[i]["totVal"];
|
|
}
|
|
}
|
|
|
|
var chartOption = {
|
|
grid: {
|
|
top: "3%",
|
|
bottom: "25%",
|
|
},
|
|
tooltip: {
|
|
axisPointer: {
|
|
label: {
|
|
formatter: function (value) {
|
|
value = value.value;
|
|
return (
|
|
value.substring(5, 7) +
|
|
"월 " +
|
|
value.substring(8, 10) +
|
|
"일 " +
|
|
value.substring(11, 13) +
|
|
"시"
|
|
);
|
|
},
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
return value.substring(11, 13) + "시";
|
|
},
|
|
},
|
|
axisTick: {
|
|
interval: 23,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed", // Makes the lines dashed
|
|
color: "#ccc", // Optional: customize the color
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "line",
|
|
data: seriesData,
|
|
itemStyle: {
|
|
color: "#D32029",
|
|
},
|
|
// symbol: "circle",
|
|
showSymbol: true,
|
|
connectNulls: true,
|
|
},
|
|
// {
|
|
// type: "line",
|
|
// data: seriesData2,
|
|
// symbol: "none",
|
|
// itemStyle: {
|
|
// color: "#FAAD14",
|
|
// },
|
|
// },
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
// zoomLock: true,
|
|
zoomLock: false,
|
|
brushSelect: false,
|
|
start: 0, // 0-100 %
|
|
end: sliderHandleSize, // 0-100 %
|
|
},
|
|
{
|
|
type: "inside",
|
|
zoomOnMouseWheel: false,
|
|
moveOnMouseMove: false,
|
|
moveOnMouseWheel: true,
|
|
},
|
|
],
|
|
};
|
|
|
|
this.setChartOption({ chartKey: "trendChart", value: chartOption });
|
|
this.loadTrendChart = true;
|
|
},
|
|
async getRowData02(selectedData) {
|
|
await this.setContentData04(selectedData);
|
|
},
|
|
async makeContentData01(data) {
|
|
var result = {};
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (!result.hasOwnProperty(data[i]["gdIdxId"])) {
|
|
result[data[i]["gdIdxId"]] = {
|
|
gdIdxId: data[i]["gdIdxId"],
|
|
gdIdxNm: data[i]["gdIdxNm"],
|
|
data: [],
|
|
};
|
|
|
|
result[data[i]["gdIdxId"]]["data"].push({
|
|
...data[i],
|
|
});
|
|
} else {
|
|
result[data[i]["gdIdxId"]]["data"].push({
|
|
...data[i],
|
|
});
|
|
}
|
|
}
|
|
|
|
var idxData = await this.postApiReturn({
|
|
apiKey: 'selectEnrgUseMainIdxDesc',
|
|
resKey: 'eqpmIndMntrData',
|
|
sendParam: {
|
|
eqpmGrpId: this.selectValue03,
|
|
},
|
|
});
|
|
|
|
for (var i = 0; i < idxData.length; i++) {
|
|
if (!result.hasOwnProperty(idxData[i]["gdIdxId"])) {
|
|
result[idxData[i]["gdIdxId"]] = {
|
|
gdIdxId: idxData[i]["gdIdxId"],
|
|
gdIdxNm: idxData[i]["gdIdxNm"],
|
|
data: [],
|
|
};
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
async setChartGroup01(data) {
|
|
this.loadChart = false;
|
|
await this.$nextTick();
|
|
this.initChartGroup01(data);
|
|
this.setChartGroup01Data(data);
|
|
this.loadChart = true;
|
|
},
|
|
initChartGroup01(data) {
|
|
var dataKeyList = Object.keys(data);
|
|
var currentChartData = null;
|
|
var chartKey = null;
|
|
|
|
for (var i = 0; i < dataKeyList.length; i++) {
|
|
currentChartData = data[dataKeyList[i]];
|
|
chartKey = 'chartGroup01_' + currentChartData['gdIdxId'];
|
|
|
|
this.setPageData({
|
|
[chartKey]: this.getGroup01ChartOption(),
|
|
});
|
|
}
|
|
},
|
|
setChartGroup01Data(data) {
|
|
var dataKeyList = Object.keys(data);
|
|
var currentChartData = null;
|
|
var chartKey = null;
|
|
var xAxisData = null;
|
|
var seriesData = null;
|
|
|
|
xAxisData = this.makeChartGroup01XaxisData();
|
|
|
|
for (var i = 0; i < dataKeyList.length; i++) {
|
|
seriesData = new Array(xAxisData.length).fill(NaN);
|
|
|
|
currentChartData = data[dataKeyList[i]];
|
|
chartKey = "chartGroup01_" + currentChartData["gdIdxId"];
|
|
|
|
for (var j = 0; j < currentChartData["data"].length; j++) {
|
|
seriesData[currentChartData["data"][j]["dataNum"]] =
|
|
currentChartData["data"][j]["totVal"];
|
|
}
|
|
|
|
this.$store.state.pageData[myPrgmId][chartKey]["xAxis"]["data"] = xAxisData;
|
|
this.$store.state.pageData[myPrgmId][chartKey]["series"][0]["data"] = seriesData;
|
|
}
|
|
},
|
|
getGroup01ChartOption() {
|
|
var chartOption = Utility.defaultChartOption(true);
|
|
|
|
chartOption["series"][0]["type"] = "line";
|
|
chartOption["grid"]["bottom"] = "3%";
|
|
|
|
chartOption["series"][0]["itemStyle"] = {
|
|
color: "#D32029",
|
|
};
|
|
|
|
// Add dashed horizontal grid lines from y-axis
|
|
chartOption["yAxis"] = {
|
|
type: "value",
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed", // Makes the lines dashed
|
|
},
|
|
},
|
|
};
|
|
|
|
return chartOption;
|
|
},
|
|
makeChartGroup01XaxisData() {
|
|
var result = [];
|
|
var paramsDt = this.fromDt;
|
|
|
|
if (this.pageData.cmCycle == "CYC_MONTH") {
|
|
var tempDate = new Date(
|
|
paramsDt.substring(0, 4) + "-" + paramsDt.substring(4, 6) + "-01 00:00"
|
|
);
|
|
var lastDayOfMonth = getLastDayOfMonth(tempDate);
|
|
|
|
for (var i = 1; i <= lastDayOfMonth; i++) {
|
|
result.push(i);
|
|
}
|
|
} else if (this.pageData.cmCycle == "CYC_DAY") {
|
|
for (var i = 0; i < 24; i++) {
|
|
result.push(i);
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
makeTrendChartXaxisData() {
|
|
var result = [];
|
|
var paramsDt = this.fromDt;
|
|
var timezoneOffset = new Date().getTimezoneOffset() * 60000;
|
|
|
|
if (this.pageData.cmCycle == "CYC_MONTH") {
|
|
var tempDate = new Date(
|
|
paramsDt.substring(0, 4) + "-" + paramsDt.substring(4, 6) + "-01 00:00"
|
|
);
|
|
var lastDayOfMonth = getLastDayOfMonth(tempDate);
|
|
|
|
tempDate = new Date(tempDate - timezoneOffset);
|
|
result.push(tempDate.toISOString());
|
|
|
|
for (var i = 0; i < 24 * lastDayOfMonth - 1; i++) {
|
|
tempDate = addHours(1, tempDate);
|
|
result.push(tempDate.toISOString());
|
|
}
|
|
} else if (this.pageData.cmCycle == "CYC_DAY") {
|
|
var tempDate = new Date(
|
|
paramsDt.substring(0, 4) +
|
|
"-" +
|
|
paramsDt.substring(4, 6) +
|
|
"-" +
|
|
paramsDt.substring(6, 8) +
|
|
" 00:00"
|
|
);
|
|
|
|
tempDate = new Date(tempDate - timezoneOffset);
|
|
result.push(tempDate.toISOString());
|
|
|
|
for (var i = 0; i < 23; i++) {
|
|
tempDate = addHours(1, tempDate);
|
|
result.push(tempDate.toISOString());
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
},
|
|
};
|
|
|
|
function addHours(h, date) {
|
|
date.setTime(date.getTime() + h * 60 * 60 * 1000);
|
|
|
|
return date;
|
|
}
|
|
|
|
function getLastDayOfMonth(date) {
|
|
return new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1) - 1).getDate();
|
|
}
|
|
|
|
const defaultData = {
|
|
dateInitedFlag: false,
|
|
cmCycle: "CYC_MONTH",
|
|
cmCycleList: [
|
|
{ idx: 0, text: "월", value: "CYC_MONTH" },
|
|
{ idx: 1, text: "일", value: "CYC_DAY" },
|
|
],
|
|
defaultRange: {
|
|
CYC_MONTH: 1,
|
|
CYC_DAY: 1,
|
|
},
|
|
fromDt: Utility.setFormatDate(new Date(), "YYYYMM"), // 조회 시작일
|
|
|
|
grid01: {
|
|
data: [],
|
|
column: [],
|
|
option: {},
|
|
},
|
|
|
|
grid02: {
|
|
data: [],
|
|
column: [],
|
|
option: {},
|
|
},
|
|
|
|
trendChart: Utility.defaultChartOption(true),
|
|
};
|
|
</script>
|