1797 lines
55 KiB
Vue
1797 lines
55 KiB
Vue
<template>
|
||
<div class="l-layout">
|
||
<CommonPageTitle/>
|
||
<!-- <CheckBox
|
||
:parentPrgmId="myPrgmId"
|
||
label="사용여부"
|
||
valueNm="useFg"
|
||
:required="true"
|
||
/>
|
||
|
||
<component
|
||
:is="'RadioStandard'"
|
||
:parentPrgmId="myPrgmId"
|
||
label="기준"
|
||
:labelCols="2"
|
||
:textCols="10"
|
||
/> -->
|
||
<v-row ref="rowParent">
|
||
<a-col :sm="12" :xl="6" :style="{ padding: '5px' }">
|
||
<!--<a-card class="pa-5" :border="false">
|
||
<div style="height: 10%">
|
||
<v-row>
|
||
<v-col :cols="6">
|
||
<v-card-title class="pa-0">에너지 사용량</v-card-title>
|
||
</v-col>
|
||
<v-col :cols="6">
|
||
<v-card-subtitle class="mt-0 pa-0 text-right">
|
||
{{ dtToday }} 기준</v-card-subtitle
|
||
>
|
||
</v-col>
|
||
</v-row>
|
||
</div>
|
||
<p>Test card 1</p>
|
||
<a-button>new new</a-button>
|
||
<BtnSearch />
|
||
</a-card> -->
|
||
<!-- <AntCard
|
||
:ref="'dashBoard_' + chart_01"
|
||
@click="chartClickEvent('dashBoard_' + chart_01, $event)"
|
||
> -->
|
||
<v-card
|
||
style="height: 312px"
|
||
class="pa-5"
|
||
:ref="'dashBoard_' + chart_01"
|
||
@click="chartClickEvent('dashBoard_' + chart_01, $event)"
|
||
>
|
||
<!-- <div class="d-flex align-center justify-space-between">
|
||
<v-card-title class="pa-0">에너지 사용량</v-card-title>
|
||
<v-card-subtitle class="mt-0 pa-0">
|
||
{{ dtToday }} 기준</v-card-subtitle
|
||
>
|
||
</div> -->
|
||
<!-- Card header -->
|
||
<div style="height: 10%">
|
||
<v-row>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
width: 4px;
|
||
height: 50px;
|
||
background-color: #91caff;
|
||
border-radius: 2px;
|
||
"
|
||
></div>
|
||
|
||
<v-col :cols="6">
|
||
<v-card-title class="pa-0">에너지 사용량</v-card-title>
|
||
</v-col>
|
||
<v-col :cols="6">
|
||
<v-card-subtitle class="mt-0 pa-0 text-right">
|
||
{{ dtToday }} 기준</v-card-subtitle
|
||
>
|
||
</v-col>
|
||
</v-row>
|
||
</div>
|
||
|
||
<div style="height: 10%"></div>
|
||
<!-- Three row above chart-->
|
||
<v-row>
|
||
<v-col :cols="6" style="width: 100%; height: 100%">
|
||
<div
|
||
class="d-flex align-left justify-space-between flex-column"
|
||
style="height: 33%; text-align: center"
|
||
>
|
||
<v-row>
|
||
<v-col :cols="12" style="text-align: left"> 금일 사용량 : </v-col>
|
||
</v-row>
|
||
<v-row>
|
||
<v-col cols="auto" style="text-align: left">
|
||
<p class="card-text-info">{{ enrgUsageDayVal }}</p>
|
||
</v-col>
|
||
<v-col :cols="3" style="text-align: left"> MWh </v-col>
|
||
</v-row>
|
||
</div>
|
||
|
||
<div
|
||
class="d-flex align-left justify-space-between flex-column"
|
||
style="height: 33%; text-align: center"
|
||
>
|
||
<v-row>
|
||
<v-col :cols="12" style="text-align: left"> 금월 누적량 : </v-col>
|
||
</v-row>
|
||
<v-row>
|
||
<v-col cols="auto" style="text-align: left">
|
||
<p class="card-text-info">{{ enrgUsageMnthVal }}</p>
|
||
</v-col>
|
||
<v-col :cols="3" style="text-align: left"> MWh </v-col>
|
||
</v-row>
|
||
</div>
|
||
<div
|
||
class="d-flex align-left justify-space-between flex-column"
|
||
style="height: 33%; text-align: center"
|
||
>
|
||
<v-row>
|
||
<v-col :cols="12" style="text-align: left"> 금월 계획량 : </v-col>
|
||
<v-col cols="auto" style="text-align: left">
|
||
<p class="card-text-info">{{ enrgUsagePlanVal }}</p>
|
||
</v-col>
|
||
<v-col :cols="3" style="text-align: left"> MWh </v-col>
|
||
</v-row>
|
||
</div>
|
||
<!-- <div style="height: 10%;"></div> -->
|
||
</v-col>
|
||
|
||
<!-- Energy usage chart -->
|
||
<div style="height: 5%"></div>
|
||
<v-col :cols="6" style="width: 100%">
|
||
<div
|
||
:style="{
|
||
width: '300px',
|
||
height: '100%',
|
||
marginLeft: '-74px',
|
||
position: 'relative',
|
||
}"
|
||
>
|
||
<!-- <div :style="{ width: '100%', height: '130px' }"> -->
|
||
|
||
<v-progress-circular
|
||
v-if="isGaugeLoading"
|
||
indeterminate
|
||
color="primary"
|
||
size="64"
|
||
style="
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
></v-progress-circular>
|
||
|
||
<component
|
||
:style="{ width: '300px', height: '100%' }"
|
||
:is="loadChart_01 ? 'Chart' : null"
|
||
:parentPrgmId="myPrgmId"
|
||
:chartName="'enrgUsageGauge'"
|
||
:ref="'dashBoard_' + chart_01"
|
||
/>
|
||
</div>
|
||
</v-col>
|
||
</v-row>
|
||
<!-- <div style="height: 5%"></div> -->
|
||
<!-- </AntCard> -->
|
||
</v-card>
|
||
</a-col>
|
||
<!-- greenhouse gas emissions-->
|
||
|
||
<a-col :sm="12" :xl="6" :style="{ padding: '5px' }">
|
||
<!-- <AntCard> -->
|
||
<v-card class="pa-5">
|
||
<!-- <div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
width: 4px;
|
||
height: 50px;
|
||
background-color: #91caff;
|
||
border-radius: 2px;
|
||
"
|
||
></div>
|
||
<v-card-title>온실가스 배출량</v-card-title> -->
|
||
|
||
<div style="height: 10%">
|
||
<v-row>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
width: 4px;
|
||
height: 50px;
|
||
background-color: #91caff;
|
||
border-radius: 2px;
|
||
"
|
||
></div>
|
||
|
||
<v-col :cols="6">
|
||
<v-card-title class="pa-0">온실가스 배출량</v-card-title>
|
||
</v-col>
|
||
<v-col :cols="6">
|
||
<v-card-subtitle class="mt-0 pa-0 text-right"> (tCO2eq)</v-card-subtitle>
|
||
</v-col>
|
||
</v-row>
|
||
</div>
|
||
|
||
<div style="margin-top: 25px">
|
||
<v-banner>
|
||
<div class="d-flex align-center justify-space-between">
|
||
<span class="pa-0 card-text-title">금일:</span>
|
||
<strong class="custom-title-3"
|
||
><span class="card-text-info">{{ CO2DayVal }}</span>
|
||
<!-- <span class="body-2 text-color--non-activate">tCO2eq</span> -->
|
||
</strong>
|
||
</div>
|
||
</v-banner>
|
||
<v-banner>
|
||
<div class="d-flex align-center justify-space-between">
|
||
<span class="pa-0 card-text-title">당월: </span>
|
||
<strong class="custom-title-3"
|
||
><span class="card-text-info">{{ CO2MnthVal }}</span>
|
||
<!-- <span class="body-2 text-color--non-activate">tCO2eq</span> -->
|
||
</strong>
|
||
</div>
|
||
</v-banner>
|
||
<v-banner>
|
||
<div class="d-flex align-center justify-space-between">
|
||
<span class="pa-0 card-text-title">전월: </span>
|
||
<strong class="custom-title-3"
|
||
><span class="card-text-info">{{ CO2BefMnthVal }}</span>
|
||
<!-- <span class="body-2 text-color--non-activate">tCO2eq</span> -->
|
||
</strong>
|
||
</div>
|
||
</v-banner>
|
||
<v-banner>
|
||
<div class="d-flex align-center justify-space-between">
|
||
<span class="pa-0 card-text-title">금년: </span>
|
||
<strong class="custom-title-3"
|
||
><span class="card-text-info">{{ CO2YearVal }}</span>
|
||
<!-- <span class="body-2 text-color--non-activate">tCO2eq</span> -->
|
||
</strong>
|
||
</div>
|
||
</v-banner>
|
||
</div>
|
||
<!-- </AntCard> -->
|
||
</v-card>
|
||
</a-col>
|
||
<!-- Performance compared to the previous day-->
|
||
<a-col :sm="24" :xl="12" :style="{ padding: '5px' }">
|
||
<!-- <AntCard> -->
|
||
<v-card>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
width: 4px;
|
||
height: 50px;
|
||
background-color: #91caff;
|
||
border-radius: 2px;
|
||
"
|
||
></div>
|
||
<!-- <div class="d-flex align-center justify-space-between" :style="{ width: '100%', height: '25%' }"> -->
|
||
<v-card-title :style="{ height: '15%' }">전일 대비 실적</v-card-title>
|
||
<!-- </div> -->
|
||
<div :style="{ width: '100%', height: '234px', overflow: 'visible' }">
|
||
<v-progress-circular
|
||
v-if="isLine1Loading"
|
||
indeterminate
|
||
color="primary"
|
||
size="64"
|
||
style="
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
></v-progress-circular>
|
||
<component
|
||
:style="{ width: '100%', height: '100%' }"
|
||
:is="loadChart_02 ? 'Chart' : null"
|
||
:parentPrgmId="myPrgmId"
|
||
:chartName="'compareEqpmTotChart'"
|
||
:ref="'dashBoard_' + chart_02"
|
||
/>
|
||
</div>
|
||
<!-- </AntCard> -->
|
||
</v-card>
|
||
</a-col>
|
||
<!-- </v-row> -->
|
||
<!-- <v-row ref="rowParent2" style="height: 33%"> -->
|
||
<!-- <v-col cols="12" sm="6" xl="3" style="height: 33%"> -->
|
||
<a-col :sm="12" :xl="6" :style="{ padding: '5px' }">
|
||
<v-card
|
||
class="pa-5"
|
||
:ref="'dashBoard_' + chart_03"
|
||
@click="chartClickEvent('dashBoard_' + chart_03, $event)"
|
||
>
|
||
<!-- <div class="d-flex align-center justify-space-between">
|
||
<v-card-title class="pa-0">에너지 사용량</v-card-title>
|
||
<v-card-subtitle class="mt-0 pa-0">
|
||
{{ dtToday }} 기준</v-card-subtitle
|
||
>
|
||
</div> -->
|
||
<div style="height: 10%">
|
||
<v-row>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
width: 4px;
|
||
height: 50px;
|
||
background-color: #91caff;
|
||
border-radius: 2px;
|
||
"
|
||
></div>
|
||
<v-col :cols="6">
|
||
<v-card-title class="pa-0">금일 효율 현황</v-card-title>
|
||
</v-col>
|
||
</v-row>
|
||
</div>
|
||
<div style="height: 10%"></div>
|
||
|
||
<!-- <div
|
||
class="d-flex align-center justify-space-between"
|
||
style="height: 33%; text-align: center"
|
||
>
|
||
<v-row>
|
||
<v-col :cols="12"> </v-col>
|
||
</v-row>
|
||
</div> -->
|
||
<v-row>
|
||
<v-col :cols="6" style="width: 100%; height: 100%">
|
||
<div
|
||
class="d-flex align-left justify-space-between flex-column"
|
||
style="height: 33%; text-align: center"
|
||
>
|
||
<v-row>
|
||
<v-col :cols="12" style="text-align: left"> 가이드 발생 건 수 : </v-col>
|
||
</v-row>
|
||
<v-row>
|
||
<v-col cols="auto" style="text-align: left">
|
||
<!-- <p class="textInfo">{{ ngDtlCnt }}</p> -->
|
||
<p class="card-text-info">{{ ngDtlCnt }}</p>
|
||
</v-col>
|
||
<v-col :cols="3" style="text-align: left"> 건 </v-col>
|
||
</v-row>
|
||
|
||
<!-- <v-row>
|
||
<v-col :cols="1"> </v-col>
|
||
<v-col :cols="5" style="text-align: right"> 가이드 발생 건 수 : </v-col>
|
||
<v-col :cols="3" style="text-align: right">
|
||
{{ ngDtlCnt }}
|
||
</v-col>
|
||
<v-col :cols="1" style="text-align: left"> 건 </v-col>
|
||
<v-col :cols="2"> </v-col>
|
||
</v-row> -->
|
||
</div>
|
||
<div
|
||
class="d-flex align-left justify-space-between flex-column"
|
||
style="height: 33%; text-align: center"
|
||
>
|
||
<v-row>
|
||
<v-col :cols="12" style="text-align: left"> 가이드 조치 건 수 : </v-col>
|
||
</v-row>
|
||
<v-row>
|
||
<v-col cols="auto" style="text-align: left">
|
||
<!-- <p class="textInfo">{{ ngDtlSolvCnt }}</p> -->
|
||
<p class="card-text-info">{{ ngDtlSolvCnt }}</p>
|
||
</v-col>
|
||
<v-col :cols="3" style="text-align: left"> 건 </v-col>
|
||
</v-row>
|
||
<!-- <v-row>
|
||
<v-col :cols="1"> </v-col>
|
||
<v-col :cols="5" style="text-align: right"> 가이드 조치 건 수 : </v-col>
|
||
<v-col :cols="3" style="text-align: right">
|
||
{{ ngDtlSolvCnt }}
|
||
</v-col>
|
||
<v-col :cols="2" style="text-align: left"> 건 </v-col>
|
||
<v-col :cols="1"> </v-col>
|
||
</v-row> -->
|
||
</div>
|
||
</v-col>
|
||
|
||
<!-- <div style="height: 10%;"></div> -->
|
||
|
||
<div style="height: 5%"></div>
|
||
<v-col :cols="6" style="width: 100%">
|
||
<div
|
||
:style="{
|
||
width: '300px',
|
||
height: '100%',
|
||
marginLeft: '-74px',
|
||
position: 'relative',
|
||
}"
|
||
>
|
||
<!-- <div :style="{ width: '100%', height: '130px' }"> -->
|
||
|
||
<v-progress-circular
|
||
v-if="isGauge2Loading"
|
||
indeterminate
|
||
color="primary"
|
||
size="64"
|
||
style="
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
></v-progress-circular>
|
||
<component
|
||
:style="{ width: '300px', height: '220px' }"
|
||
:is="loadChart_03 ? 'Chart' : null"
|
||
:parentPrgmId="myPrgmId"
|
||
:chartName="'todayEfficiencyStatus'"
|
||
:ref="'dashBoard_' + chart_03"
|
||
/>
|
||
</div>
|
||
</v-col>
|
||
</v-row>
|
||
<!-- <div style="height: 5%"></div> -->
|
||
</v-card>
|
||
<!-- </v-col> -->
|
||
</a-col>
|
||
|
||
<!-- <v-col cols="12" sm="6" xl="3" style="height: 33%"> -->
|
||
<a-col :sm="12" :xl="6" :style="{ padding: '5px' }">
|
||
<v-card :ref="'dashBoard_' + chart_04">
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
width: 4px;
|
||
height: 50px;
|
||
background-color: #91caff;
|
||
border-radius: 2px;
|
||
"
|
||
></div>
|
||
<v-card-title>금일 NG 설비 Top 10</v-card-title>
|
||
<div :style="{ width: '100%', height: '75%' }">
|
||
<v-progress-circular
|
||
v-if="isPieLoading"
|
||
indeterminate
|
||
color="primary"
|
||
size="64"
|
||
style="
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
></v-progress-circular>
|
||
<component
|
||
:style="{ width: '100%', height: '100%' }"
|
||
:is="loadChart_04 ? 'Chart' : null"
|
||
:parentPrgmId="myPrgmId"
|
||
:chartName="'todayNgTopTen'"
|
||
:ref="'dashBoard_' + chart_04"
|
||
@click="topTenChartClickEvent"
|
||
/>
|
||
</div>
|
||
</v-card>
|
||
<!-- </v-col> -->
|
||
</a-col>
|
||
|
||
<!-- <v-col cols="12" sm="12" xl="6" style="height: 33%"> -->
|
||
<a-col :sm="24" :xl="12" :style="{ padding: '5px' }">
|
||
<v-card>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
width: 4px;
|
||
height: 50px;
|
||
background-color: #91caff;
|
||
border-radius: 2px;
|
||
"
|
||
></div>
|
||
<!-- <div class="d-flex align-center justify-space-between"> -->
|
||
<v-card-title :style="{ height: '15%' }">전일 대비 NG</v-card-title>
|
||
<!-- </div> -->
|
||
<div :style="{ width: '100%', height: '80%' }">
|
||
<v-progress-circular
|
||
v-if="isLine2Loading"
|
||
indeterminate
|
||
color="primary"
|
||
size="64"
|
||
style="
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
></v-progress-circular>
|
||
<component
|
||
:style="{ width: '100%', height: '100%' }"
|
||
:is="loadChart_05 ? 'Chart' : null"
|
||
:parentPrgmId="myPrgmId"
|
||
:chartName="'compareEqpmTGdChart'"
|
||
:ref="'dashBoard_' + chart_05"
|
||
/>
|
||
</div>
|
||
</v-card>
|
||
<!-- </v-col> -->
|
||
</a-col>
|
||
<!-- </v-row> -->
|
||
<!-- <v-row ref="rowParent3" style="height: 33%"> -->
|
||
<v-col cols="12" sm="12" xl="12" style="height: 300px">
|
||
<v-card style="border-radius: 4px" class="pb-5">
|
||
<div style="height: 20px"></div>
|
||
<div class="h100 px-5" style="height: calc(100% - 30px)">
|
||
<div ref="gridParent" class="h100 w100">
|
||
<component
|
||
:is="loadGrid ? 'Grid' : null"
|
||
:gridName="'dashBoard_grid_01'"
|
||
:parentPrgmId="myPrgmId"
|
||
:ref="gridName"
|
||
@dblClick="gridClickEvent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</v-card>
|
||
</v-col>
|
||
</v-row>
|
||
<!-- <h2>대시보드 입니다.</h2>
|
||
<v-btn @click="axiosTest()">axios 테스트</v-btn> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapActions, mapMutations, mapState } from "vuex"; // , mapActions
|
||
import Vue from "vue";
|
||
import { resize } from "@/mixin/resize.js";
|
||
import DateUtility from "~/plugins/dateUtility";
|
||
import Utility from "~/plugins/utility";
|
||
import Grid from "~/components/common/Grid";
|
||
import Chart from "~/components/common/Chart";
|
||
|
||
import AntCard from "~/components/common/card/AntCard";
|
||
|
||
import UnusedStatPopPage from "~/components/common/modal/UnusedStatPopPage";
|
||
import EtcStatPopPage from "~/components/common/modal/EtcStatPopPage";
|
||
import BtnSearch from "~/components/common/button/BtnSearch";
|
||
import CheckBox from "~/components/common/checkbox/CheckBox";
|
||
import RadioStandard from "~/components/common/RadioStandard";
|
||
import PageTitle from "~/components/common/PageTitle";
|
||
|
||
import getGaugeChartOption from "~/components/common/chartoptions/GaugeChart";
|
||
import getLineChartOption from "~/components/common/chartoptions/LineChart";
|
||
let myTitle;
|
||
//const myPrgmId = "PRG0021";
|
||
let myPrgmId;
|
||
export default {
|
||
mixins: [resize],
|
||
layout: "default",
|
||
async asyncData(context) {
|
||
const myState = context.store.state;
|
||
// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
|
||
// myTitle = myState.activeMenuInfo.menuNm;
|
||
//const menuId = context.route.query.prgmId;
|
||
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: false,
|
||
},
|
||
components: {
|
||
DateUtility,
|
||
Grid,
|
||
Chart,
|
||
UnusedStatPopPage,
|
||
EtcStatPopPage,
|
||
PageTitle
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
myHome: "myHome",
|
||
pageData: (state) => state.pageData[myPrgmId],
|
||
isDarkMode: "isDarkMode",
|
||
myHome: "myHome",
|
||
}),
|
||
},
|
||
watch: {
|
||
rdbElecQual() {
|
||
//전력품질 라디오버튼 변경
|
||
this.getElecQuality();
|
||
},
|
||
rdbEnrgUsage() {
|
||
//금일/금월 라디오버튼 변경
|
||
this.getEnrgUsage();
|
||
},
|
||
isDarkMode(newVal) {
|
||
// Update color of dark mode or light mode into each charts
|
||
let chartOption = getGaugeChartOption({
|
||
title: this.chart_01,
|
||
isDarkMode: this.isDarkMode,
|
||
});
|
||
chartOption["series"][0]["data"][0].value = this.$store.state.pageData[myPrgmId][
|
||
this.chart_01
|
||
]?.series?.[0]?.data?.[0]?.value;
|
||
this.$store.state.pageData[myPrgmId][this.chart_01] = chartOption;
|
||
|
||
let chartOption3 = getGaugeChartOption({
|
||
title: this.chart_03,
|
||
isDarkMode: this.isDarkMode,
|
||
});
|
||
chartOption3["series"][0]["data"][0].value = this.$store.state.pageData[myPrgmId][
|
||
this.chart_03
|
||
]?.series?.[0]?.data?.[0]?.value;
|
||
this.$store.state.pageData[myPrgmId][this.chart_03] = chartOption3;
|
||
|
||
|
||
let chart04Dat = this.$store.state.pageData[myPrgmId]['chart04Data'];
|
||
this.setChart04Data(chart04Dat);
|
||
|
||
let chartOption2 = getLineChartOption({
|
||
xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxisData,
|
||
seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].seriesData,
|
||
isDarkMode: this.isDarkMode,
|
||
});
|
||
this.$store.state.pageData[myPrgmId][this.chart_02] = chartOption2
|
||
|
||
let chartOption5 = getLineChartOption({
|
||
xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxisData,
|
||
seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].seriesData,
|
||
isDarkMode: this.isDarkMode,
|
||
});
|
||
this.$store.state.pageData[myPrgmId][this.chart_05] = chartOption5
|
||
|
||
},
|
||
// beforeDestroy() {
|
||
// this.cancelAutoUpdate();
|
||
// this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
|
||
// },
|
||
},
|
||
async beforeCreate() {
|
||
myPrgmId = this.$route.query.prgmId;
|
||
// openTabList
|
||
this.$store.dispatch("chkOpenTabList", {
|
||
key: "create",
|
||
prgmId: myPrgmId,
|
||
defaultData: defaultData,
|
||
});
|
||
},
|
||
async created() {},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
beforeDestroy() {
|
||
this.cancelAutoUpdate();
|
||
this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
|
||
},
|
||
data() {
|
||
return {
|
||
myPrgmId: myPrgmId,
|
||
dtToday: Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
|
||
enrgUsageDayVal: "",
|
||
enrgUsageMnthVal: "",
|
||
enrgUsagePlanVal: "",
|
||
CO2DayVal: "",
|
||
CO2MnthVal: "",
|
||
CO2PlanVal: "",
|
||
CO2BefMnthVal: "",
|
||
CO2YearVal: "",
|
||
ngDtlCnt: "",
|
||
ngDtlSolvCnt: "",
|
||
|
||
//차트
|
||
chart_01: "enrgUsageGauge",
|
||
loadChart_01: false,
|
||
isGaugeLoading: true,
|
||
|
||
chart_02: "compareEqpmTotChart",
|
||
loadChart_02: false,
|
||
isLine1Loading: true,
|
||
|
||
chart_03: "todayEfficiencyStatus",
|
||
loadChart_03: false,
|
||
isGauge2Loading: true,
|
||
|
||
chart_04: "todayNgTopTen",
|
||
loadChart_04: false,
|
||
isPieLoading: true,
|
||
|
||
chart_05: "compareEqpmTGdChart",
|
||
loadChart_05: false,
|
||
isLine2Loading: true,
|
||
|
||
gridName: "dashBoard_grid_01",
|
||
loadGrid: false,
|
||
isGridLoading: true,
|
||
};
|
||
},
|
||
methods: {
|
||
...mapMutations({
|
||
setChartXAxisData: "setChartXAxisData",
|
||
setChartSeries: "setChartSeries",
|
||
setChartOption: "setChartOption",
|
||
setChartColorData: "setChartColorData",
|
||
setGridOption: "setGridOption",
|
||
setGridColumn: "setGridColumn",
|
||
setGridData: "setGridData",
|
||
setPageData: "setPageData",
|
||
}),
|
||
...mapActions({
|
||
postApi: "modules/list/postApi",
|
||
postApiReturn: "modules/list/postApiReturn",
|
||
chkOpenTabList: "chkOpenTabList",
|
||
}),
|
||
cancelAutoUpdate() {
|
||
clearInterval(this.timer);
|
||
},
|
||
async init() {
|
||
// this.search();
|
||
await this.gridInit();
|
||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||
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();
|
||
await this.getTodayNgTopTen();
|
||
await this.getCompareEqpmTGdChart();
|
||
await this.getGridData();
|
||
}
|
||
this.timer = setInterval(this.search, 90000); //15분 주기마다 갱신
|
||
},
|
||
async search() {
|
||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||
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();
|
||
await this.getTodayNgTopTen();
|
||
await this.getCompareEqpmTGdChart();
|
||
await this.getGridData();
|
||
}
|
||
},
|
||
async gridInit() {
|
||
this.loadGrid = false;
|
||
// let gridHeight = 241;
|
||
var gridHeight;
|
||
if (this.$refs.gridParent != undefined) {
|
||
// gridHeight = gridHeight*0.9
|
||
gridHeight = this.$refs.gridParent.offsetHeight - 35;
|
||
}
|
||
const myOptions = {
|
||
// scrollX: false,
|
||
setScroll: true,
|
||
columnOptions: {
|
||
//frozenCount:2,
|
||
minWidth: 70,
|
||
resizable: true,
|
||
},
|
||
header: {
|
||
height: 38,
|
||
},
|
||
};
|
||
this.setGridOption({
|
||
gridKey: this.gridName,
|
||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||
});
|
||
let hhMapper = {
|
||
"00": "00~01",
|
||
"01": "01~02",
|
||
"02": "02~03",
|
||
"03": "03~04",
|
||
"04": "04~05",
|
||
"05": "05~06",
|
||
"06": "06~07",
|
||
"07": "07~08",
|
||
"08": "08~09",
|
||
"09": "09~10",
|
||
10: "10~11",
|
||
11: "11~12",
|
||
12: "12~13",
|
||
13: "13~14",
|
||
14: "14~15",
|
||
15: "15~16",
|
||
16: "16~17",
|
||
17: "17~18",
|
||
18: "18~19",
|
||
19: "19~20",
|
||
20: "20~21",
|
||
21: "21~22",
|
||
22: "22~23",
|
||
23: "23~00",
|
||
};
|
||
const myColumns = [
|
||
{
|
||
header: "NO",
|
||
name: "rowNum",
|
||
width: 70,
|
||
align: "right",
|
||
// hidden: true,
|
||
},
|
||
{
|
||
header: "발생일",
|
||
name: "totDttm",
|
||
align: "center",
|
||
formatter({ value }) {
|
||
return Utility.setFormatDate(value, "YYYY-MM-DD");
|
||
},
|
||
width: 100,
|
||
},
|
||
{
|
||
header: "발생 시간대",
|
||
name: "totTime",
|
||
align: "center",
|
||
formatter({ value }) {
|
||
return hhMapper[Utility.setFormatDate(value, "HH")];
|
||
},
|
||
width: 100,
|
||
},
|
||
{ header: "빌딩", name: "fabNm", align: "left", width: 50 },
|
||
{ header: "빌딩", name: "fabId", align: "left", hidden: true },
|
||
{ header: "설비 그룹", name: "eqpmGrpNm", align: "left", width: 100 },
|
||
{ header: "설비 그룹", name: "eqpmGrpId", align: "left", hidden: true },
|
||
{ header: "설비", name: "eqpmNm", align: "left", width: 130 },
|
||
{ header: "설비", name: "eqpmId", align: "left", hidden: true },
|
||
{ header: "가이드 지표명", name: "gdIdxNm", align: "left", width: 200 },
|
||
{
|
||
header: "가이드 지표명",
|
||
name: "gdIdxId",
|
||
align: "left",
|
||
hidden: true,
|
||
},
|
||
{ header: "주의", name: "careStndVal", align: "right", width: 40 },
|
||
{ header: "경고", name: "warnStndVal", align: "right", width: 40 },
|
||
{ header: "가이드", name: "totVal", align: "right", width: 40 },
|
||
{ header: "알람 내용", name: "alrmMsg", align: "left", resizable: false },
|
||
{ header: "설비종류", name: "eqpmKindId", align: "left", hidden: true },
|
||
{ header: "설비종류", name: "eqpmKindNm", align: "left", hidden: true },
|
||
];
|
||
|
||
this.setGridColumn({
|
||
gridKey: this.gridName,
|
||
value: myColumns,
|
||
});
|
||
|
||
this.loadGrid = true;
|
||
// 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,
|
||
// });
|
||
|
||
this.setGridData({
|
||
gridKey: this.gridName,
|
||
value: res,
|
||
});
|
||
|
||
this.loadGrid = true;
|
||
},
|
||
async getEnrgAndCO2Data() {
|
||
this.loadChart_01 = false;
|
||
const res = await this.postApiReturn({
|
||
apiKey: "selectEnrgAndCO2Data",
|
||
resKey: "enrgAndCO2Data",
|
||
sendParam: {},
|
||
});
|
||
// //////////////////////////////////////////
|
||
// // 시연용 data 세팅
|
||
// 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)
|
||
);
|
||
this.enrgUsageMnthVal = this.numberFormatter(
|
||
parseFloat(res[0]["mnthVal"]).toFixed(0)
|
||
);
|
||
this.enrgUsagePlanVal = this.numberFormatter(
|
||
parseFloat(res[0]["planVal"]).toFixed(0)
|
||
);
|
||
// 대시보드 표기
|
||
this.CO2DayVal = this.numberFormatter(parseFloat(res[0]["co2DayVal"]).toFixed(0));
|
||
this.CO2MnthVal = this.numberFormatter(parseFloat(res[0]["co2MnthVal"]).toFixed(0));
|
||
this.CO2PlanVal = this.numberFormatter(parseFloat(res[0]["co2PlanVal"]).toFixed(0));
|
||
this.CO2BefMnthVal = this.numberFormatter(
|
||
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",
|
||
isDarkMode: this.isDarkMode,
|
||
});
|
||
chartOption["series"][0]["data"][0].value =
|
||
res[0]["effcRt"] != null ? res[0]["effcRt"] : 0;
|
||
this.$store.state.pageData[myPrgmId][this.chart_01] = chartOption;
|
||
// if(res[0]['effcRt'] == undefined || res[0]['effcRt'] == null){
|
||
// res[0]['effcRt'] = null;
|
||
// }
|
||
// this.setChart01Data(
|
||
// {
|
||
// effcRt : res[0]['effcRt'],
|
||
// stat : res[0]['effcRt'] < 33 ? '정상' : res[0]['effcRt'] > 66 ? '위험' : '주의'
|
||
// }
|
||
// );
|
||
});
|
||
this.loadChart_01 = true;
|
||
this.isGaugeLoading = false;
|
||
},
|
||
async getCompareEqpmTotData() {
|
||
this.loadChart_02 = false;
|
||
const res = await this.postApiReturn({
|
||
apiKey: "selectCompareEqpmTotData",
|
||
resKey: "compareEqpmTotData",
|
||
sendParam: {},
|
||
});
|
||
this.$nextTick(() => {
|
||
this.setChart02Data(res);
|
||
});
|
||
this.loadChart_02 = true;
|
||
this.isLine1Loading = false;
|
||
},
|
||
async getTodayEfficiencyStatus() {
|
||
this.loadChart_03 = false;
|
||
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.$nextTick(() => {
|
||
let chartOption = null;
|
||
// chartOption = this.getGuageChartOption2(this.chart_03);
|
||
chartOption = getGaugeChartOption({
|
||
title: "Today Efficiency",
|
||
isDarkMode: this.isDarkMode,
|
||
});
|
||
chartOption["series"][0]["data"][0].value = isNaN(effcRt) ? 0 : effcRt;
|
||
this.$store.state.pageData[myPrgmId][this.chart_03] = chartOption;
|
||
});
|
||
this.loadChart_03 = true;
|
||
this.isGauge2Loading = false;
|
||
// this.$ref.dashBoard_todayEfficiencyStatus.resize();
|
||
},
|
||
async getTodayNgTopTen() {
|
||
this.loadChart_04 = false;
|
||
const res = await this.postApiReturn({
|
||
apiKey: "selectTodayNgTopTen",
|
||
resKey: "todayNgTopTen",
|
||
sendParam: {},
|
||
});
|
||
this.setPageData({
|
||
chart04Data: res,
|
||
});
|
||
this.$nextTick(() => {
|
||
this.setChart04Data(res);
|
||
});
|
||
this.loadChart_04 = true;
|
||
this.isPieLoading = false;
|
||
},
|
||
async getCompareEqpmTGdChart() {
|
||
this.loadChart_05 = false;
|
||
const res = await this.postApiReturn({
|
||
apiKey: "selectCompareEqpmTGdChart",
|
||
resKey: "compareEqpmTGdChart",
|
||
sendParam: {},
|
||
});
|
||
this.$nextTick(() => {
|
||
this.setChart05Data(res);
|
||
});
|
||
this.loadChart_05 = true;
|
||
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;
|
||
}
|
||
let xAxisData = [];
|
||
let seriesData = [];
|
||
// let legendData = {
|
||
// befBefVal: "전전일",
|
||
// befVal: "전일",
|
||
// dayVal: "금일",
|
||
// };
|
||
|
||
// let legendData = ["전전일", "전일", "금일"];
|
||
|
||
let befBefValDataList = {
|
||
name: "전전일",
|
||
type: "line",
|
||
// 'smooth' : true,
|
||
showSymbol: false,
|
||
lineStyle: { width: 2 },
|
||
data: [],
|
||
};
|
||
let befValDataList = {
|
||
name: "전일",
|
||
type: "line",
|
||
// 'smooth' : true,
|
||
showSymbol: false,
|
||
lineStyle: { width: 2 },
|
||
data: [],
|
||
};
|
||
let dayValDataList = {
|
||
name: "금일",
|
||
type: "line",
|
||
// 'smooth' : true,
|
||
showSymbol: false,
|
||
lineStyle: { width: 2 },
|
||
data: [],
|
||
};
|
||
// for (var i = 0; i < data.length; i++) {
|
||
//////없애야함//////
|
||
// 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);
|
||
}
|
||
|
||
// //////없애야함//////
|
||
// 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;
|
||
|
||
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];
|
||
//////없애야함//////
|
||
// this.ngDtlCnt = this.numberFormatter(total);
|
||
// this.ngDtlSolvCnt = this.numberFormatter(parseInt(total*3/4)+12);
|
||
//////없애야함//////
|
||
|
||
var chartOption = getLineChartOption({
|
||
xAxisData: xAxisData,
|
||
// legendData: legendData,
|
||
seriesData: seriesData,
|
||
isDarkMode: this.isDarkMode,
|
||
});
|
||
|
||
// {
|
||
// grid: {
|
||
// left: "3%",
|
||
// right: "5%",
|
||
// top: "25%",
|
||
// // bottom: '15%',
|
||
// containLabel: true,
|
||
// },
|
||
// legend: {
|
||
// data: legendData,
|
||
// icon: "circle",
|
||
// top: "0%", // Position from the top
|
||
// right: "5%", // Position from the right
|
||
// orient: "horizontal", // Ensures the legend items are laid out horizontally
|
||
// },
|
||
// xAxis: {
|
||
// type: "category",
|
||
// boundaryGap: false,
|
||
// splitLine: false,
|
||
// data: xAxisData,
|
||
// },
|
||
// yAxis: {
|
||
// type: "value",
|
||
// position: "left",
|
||
// // name: 'kWh',
|
||
// // splitLine: false,
|
||
// },
|
||
// series: seriesData,
|
||
// };
|
||
|
||
await this.$nextTick(() => {});
|
||
this.setChartOption({
|
||
chartKey: "compareEqpmTGdChart",
|
||
value: chartOption,
|
||
});
|
||
this.$store.state.pageData[myPrgmId][this.chart_05] = 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;
|
||
}
|
||
let seriesData = [
|
||
{
|
||
type: "pie",
|
||
data: [],
|
||
label: {
|
||
show: false,
|
||
},
|
||
left: "22%",
|
||
bottom: "23",
|
||
radius: ["67%", "97%"], // Bigger inner and outer radius
|
||
center: ["60%", "50%"], // Shift chart slightly right to make room for legend
|
||
itemStyle: {
|
||
borderColor: "#fff", // Color of the gap
|
||
borderWidth: 2, // Thickness of the gap
|
||
},
|
||
},
|
||
];
|
||
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++){
|
||
|
||
// 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: {
|
||
// left: '3%',
|
||
// right: '-60%',
|
||
// top: '15%',
|
||
// bottom: '15%',
|
||
bottom: 0,
|
||
// containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
},
|
||
legend: {
|
||
// data: legendData,
|
||
// bottom: 'bottom',
|
||
// icon: 'bar',
|
||
// show: false,
|
||
top: "middle",
|
||
type: "scroll",
|
||
orient: "vertical",
|
||
left: "20",
|
||
icon: 'rect',
|
||
itemWidth: 15, // Width of the legend icon
|
||
itemHeight: 15,
|
||
textStyle: {
|
||
color: this.isDarkMode ? "#fff" : "#333333",
|
||
},
|
||
},
|
||
series: seriesData,
|
||
};
|
||
|
||
await this.$nextTick(() => {});
|
||
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;
|
||
}
|
||
let xAxisData = [];
|
||
let seriesData = [];
|
||
// let legendMapper = {
|
||
// 'befBefVal' : '전전일',
|
||
// 'befVal' : '전일',
|
||
// 'dayVal' : '금일'
|
||
// }
|
||
let befBefValDataList = {
|
||
name: "전전일",
|
||
type: "line",
|
||
// 'smooth' : true,
|
||
showSymbol: false,
|
||
lineStyle: { width: 2 },
|
||
data: [],
|
||
};
|
||
let befValDataList = {
|
||
name: "전일",
|
||
type: "line",
|
||
// 'smooth' : true,
|
||
showSymbol: false,
|
||
lineStyle: { width: 2 },
|
||
data: [],
|
||
};
|
||
let dayValDataList = {
|
||
name: "금일",
|
||
type: "line",
|
||
// 'smooth' : true,
|
||
showSymbol: false,
|
||
lineStyle: { width: 2 },
|
||
data: [],
|
||
};
|
||
// 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);
|
||
}
|
||
//////없애야함//////
|
||
|
||
// 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 = [
|
||
// {
|
||
// name: "Before Before",
|
||
// type: "bar",
|
||
// data: [133, 70, 124, 131, 115, 89, 63],
|
||
// },
|
||
// {
|
||
// name: "Before",
|
||
// type: "bar",
|
||
// data: [116, 93, 120, 113, 65, 109, 149],
|
||
// },
|
||
// {
|
||
// name: "Day",
|
||
// type: "bar",
|
||
// data: [135, 76, 86, 134, 79, 139, 120],
|
||
// },
|
||
// ];
|
||
var chartOption = getLineChartOption({
|
||
xAxisData: xAxisData,
|
||
// legendData: legendData,
|
||
seriesData: seriesData,
|
||
isDarkMode: this.isDarkMode,
|
||
});
|
||
|
||
// {
|
||
// grid: {
|
||
// left: "3%",
|
||
// right: "5%",
|
||
// top: "25%",
|
||
// // bottom: '15%',
|
||
// containLabel: true,
|
||
// },
|
||
// legend: {
|
||
// data: legendData,
|
||
// icon: "circle",
|
||
// top: "0%", // Position from the top
|
||
// right: "5%", // Position from the right
|
||
// orient: "horizontal", // Ensures the legend items are laid out horizontally
|
||
// },
|
||
// xAxis: {
|
||
// type: "category",
|
||
// boundaryGap: false,
|
||
// splitLine: false,
|
||
// data: xAxisData,
|
||
// },
|
||
// yAxis: {
|
||
// type: "value",
|
||
// position: "left",
|
||
// // name: 'kWh',
|
||
// // splitLine: false,
|
||
// },
|
||
// series: seriesData,
|
||
// };
|
||
await this.$nextTick(() => {});
|
||
this.setChartOption({
|
||
chartKey: "compareEqpmTotChart",
|
||
value: chartOption,
|
||
});
|
||
this.$store.state.pageData[myPrgmId][this.chart_02] = chartOption
|
||
},
|
||
getGuageChartOption(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: {},
|
||
series: [
|
||
{
|
||
type: "gauge",
|
||
center: ["50%", "80%"],
|
||
radius: "100%",
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
max: 100,
|
||
splitNumber: 10,
|
||
itemStyle: {
|
||
// color: '#FFAB91'
|
||
color: "auto",
|
||
// color:gaugeColors
|
||
},
|
||
progress: {
|
||
// show: true,
|
||
show: false,
|
||
width: 20,
|
||
},
|
||
pointer: {
|
||
// show: false
|
||
show: true,
|
||
itemStyle: {
|
||
// color: '#FFAB91',
|
||
color: "auto",
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 20,
|
||
color: chartName == "todayEfficiencyStatus" ? gaugeColors : gaugeColors2,
|
||
},
|
||
},
|
||
axisTick: {
|
||
distance: -35,
|
||
splitNumber: 5,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#999",
|
||
},
|
||
},
|
||
splitLine: {
|
||
distance: -38,
|
||
length: 14,
|
||
lineStyle: {
|
||
width: 3,
|
||
color: "#999",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
distance: -10,
|
||
color: "#999",
|
||
fontSize: 10,
|
||
},
|
||
anchor: {
|
||
show: false,
|
||
},
|
||
title: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
width: "100%",
|
||
lineHeight: 25,
|
||
borderRadius: 8,
|
||
// offsetCenter: [0, '-15%'],
|
||
offsetCenter: [0, "33%"],
|
||
fontSize: 15,
|
||
// fontSize: 20,
|
||
fontWeight: "bolder",
|
||
formatter: "{value} %",
|
||
color: "auto",
|
||
},
|
||
data: [
|
||
{
|
||
value: NaN,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
return guageChartOption;
|
||
},
|
||
|
||
// //차트Setting
|
||
// async setChart01Data(data) {
|
||
// this.$store.state.pageData[this.myPrgmId].enrgUsageGauge.series = [];
|
||
// if (data.effcRt == null) {
|
||
// return;
|
||
// }
|
||
|
||
// const arrDarkColors = {
|
||
// 정상: '#01ae6a',
|
||
// 주의: '#ffb046',
|
||
// 위험: '#f6637b',
|
||
// };
|
||
// const arrLightColors = {
|
||
// 정상: '#01ae6a',
|
||
// 주의: '#ffb046',
|
||
// 위험: '#f6637b',
|
||
// };
|
||
|
||
// const darkGaugeColors = [
|
||
// [0.125, '#009245'],
|
||
// [0.25, '#39b54a'],
|
||
// [0.375, '#d9e021'],
|
||
// [0.5, '#fcee21'],
|
||
// [0.625, '#fbb03b'],
|
||
// [0.75, '#f7931e'],
|
||
// [0.875, '#f15a24'],
|
||
// [1.0, '#ed1c24'],
|
||
// ];
|
||
// const lightGaugeColors = [
|
||
// [0.125, '#58c06f'],
|
||
// [0.25, '#7cd574'],
|
||
// [0.375, '#fbe462'],
|
||
// [0.5, '#ffd771'],
|
||
// [0.625, '#ffad7f'],
|
||
// [0.75, '#ff966e'],
|
||
// [0.875, '#ff706e'],
|
||
// [1.0, '#ff6689'],
|
||
// ];
|
||
|
||
// var chartOption = {
|
||
// series: [
|
||
// {
|
||
// type: 'gauge',
|
||
// startAngle: 180,
|
||
// endAngle: 0,
|
||
// min: 0,
|
||
// max: 100,
|
||
// radius: '100%',
|
||
// splitNumber: 8,
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// width: 30,
|
||
// color: this.isDarkMode ? darkGaugeColors : lightGaugeColors,
|
||
// },
|
||
// },
|
||
// splitLine: {
|
||
// show: false,
|
||
// },
|
||
// axisTick: {
|
||
// show: false,
|
||
// },
|
||
// axisLabel: {
|
||
// show: false,
|
||
// },
|
||
// pointer: {
|
||
// length: '80%',
|
||
// width: 5,
|
||
// itemStyle: {
|
||
// color: this.isDarkMode ? '#fff' : '#333333',
|
||
// },
|
||
// },
|
||
// anchor: {
|
||
// show: true,
|
||
// showAbove: true,
|
||
// size: 10,
|
||
// itemStyle: {
|
||
// borderWidth: 10,
|
||
// borderColor: this.isDarkMode ? '#fff' : '#333333',
|
||
// },
|
||
// },
|
||
// title: {
|
||
// offsetCenter: ['90%', '30%'],
|
||
// fontSize: 20,
|
||
// color: this.isDarkMode
|
||
// ? arrDarkColors[data.stat]
|
||
// : arrLightColors[data.stat],
|
||
// fontWeight: 'bold',
|
||
// },
|
||
// detail: {
|
||
// fontSize: 20,
|
||
// offsetCenter: ['-75%', '30%'],
|
||
// valueAnimation: true,
|
||
// formatter: function(value) {
|
||
// return '{value|' + value.toFixed(1) + '}{unit|%}';
|
||
// },
|
||
// rich: {
|
||
// value: {
|
||
// fontSize: 20,
|
||
// color: this.isDarkMode ? '#fff' : '#111111',
|
||
// fontWeight: 'bolder',
|
||
// },
|
||
// unit: {
|
||
// fontSize: 14,
|
||
// color: this.isDarkMode ? '#fff' : '#111111',
|
||
// fontWeight: 'bolder',
|
||
// padding: [0, 0, -5, 0],
|
||
// },
|
||
// },
|
||
// },
|
||
// data: [
|
||
// {
|
||
// name: data.stat,
|
||
// value: data.effcRt,
|
||
// },
|
||
// ],
|
||
// },
|
||
// ],
|
||
// };
|
||
|
||
// this.setChartOption({ chartKey: 'enrgUsageGauge', value: chartOption });
|
||
|
||
// this.loadChart_01 = true;
|
||
// },
|
||
|
||
tableDataGetDarkColorByState: (state) => {
|
||
return {
|
||
가동중: "#01ae6a",
|
||
미사용: "#ffb046",
|
||
비정상: "#f6637b",
|
||
}[state];
|
||
},
|
||
tableDataGetLightColorByState: (state) => {
|
||
return {
|
||
가동중: "#3cc380",
|
||
미사용: "#ffb13b",
|
||
비정상: "#f98694",
|
||
}[state];
|
||
},
|
||
chartClickEvent(argData, $event) {
|
||
let pageMapper = {
|
||
dashBoard_enrgUsageGauge: {
|
||
pageName: "ems-effc-EnrgUseTotSummPage",
|
||
prgmId: "PRG0080",
|
||
},
|
||
dashBoard_todayEfficiencyStatus: {
|
||
pageName: "ems-effc-EnrgEffcTotSummPage",
|
||
prgmId: "PRG0083",
|
||
},
|
||
// dashBoard_todayNgTopTen: {pageName: 'ems-effc-EnrgUseTotSummPage', prgmId: 'PRG0080'},
|
||
// dashBoard_enrgUsageGauge: {pageName: 'ems-effc-EnrgUseTotSummPage', prgmId: 'PRG0080'},
|
||
};
|
||
var data = {
|
||
...argData,
|
||
fromDt: this.pageData.fromDt,
|
||
};
|
||
|
||
var key = "tick_" + Math.random();
|
||
this.$router.push({
|
||
name: pageMapper[argData]["pageName"],
|
||
query: {
|
||
prgmId: pageMapper[argData]["prgmId"],
|
||
// tick:key
|
||
},
|
||
params: {
|
||
...data,
|
||
key: key,
|
||
},
|
||
});
|
||
},
|
||
numberFormatter(value) {
|
||
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||
},
|
||
gridClickEvent(_, event, gridName) {
|
||
var gridInstance = this.$refs[this.gridName].gridInstance;
|
||
var eventRowData = gridInstance.invoke("getRow", event.rowKey);
|
||
var data = {
|
||
cmCycle: "CYC_DAY",
|
||
fromDt:
|
||
eventRowData.totDttm != undefined
|
||
? eventRowData.totDttm
|
||
: Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
|
||
fabId: eventRowData.fabId,
|
||
eqpmKindId: eventRowData.eqpmKindId,
|
||
eqpmGrpId: eventRowData.eqpmGrpId,
|
||
eqpmId: eventRowData.eqpmId,
|
||
};
|
||
var key = "tick_" + Math.random();
|
||
this.$router.push({
|
||
name: "ems-effc-EnrgUseEqpmDetlMntrPage",
|
||
query: {
|
||
prgmId: "PRG0082",
|
||
// tick:key
|
||
},
|
||
params: {
|
||
...data,
|
||
key: key,
|
||
},
|
||
});
|
||
},
|
||
topTenChartClickEvent(event) {
|
||
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"]["name"];
|
||
});
|
||
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 key = "tick_" + Math.random();
|
||
this.$router.push({
|
||
name: "ems-effc-EnrgUseEqpmDetlMntrPage",
|
||
query: {
|
||
prgmId: "PRG0082",
|
||
// tick:key
|
||
},
|
||
params: {
|
||
...data,
|
||
key: key,
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
const defaultData = {
|
||
chart04Data: [],
|
||
dashBoard_grid_01: {
|
||
data: [],
|
||
option: {},
|
||
column: [],
|
||
},
|
||
enrgUsageGauge: Utility.defaultChartOption(true),
|
||
compareEqpmTotChart: Utility.defaultChartOption(true),
|
||
todayEfficiencyStatus: Utility.defaultChartOption(true),
|
||
todayNgTopTen: Utility.defaultChartOption(true),
|
||
compareEqpmTGdChart: Utility.defaultChartOption(true),
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.v-avatar {
|
||
border-radius: 21px;
|
||
font-size: 1.75rem;
|
||
}
|
||
.v-virtual-scroll-wrapper {
|
||
overflow-y: auto;
|
||
max-height: 210px;
|
||
}
|
||
|
||
.textInfo {
|
||
font-family: "Oxanium", sans-serif;
|
||
font-weight: 500;
|
||
font-size: 24px;
|
||
line-height: 24px;
|
||
letter-spacing: 0;
|
||
// color: #1677ff;
|
||
}
|
||
|
||
.textDetail {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
letter-spacing: 0;
|
||
color: #00000073;
|
||
}
|
||
</style>
|