1452 lines
38 KiB
Vue
1452 lines
38 KiB
Vue
<template>
|
|
<div class="l-layout">
|
|
<v-row ref="rowParent" style="height: 100%">
|
|
<v-col sm="6" xl="3" style="height: 33%">
|
|
<v-card
|
|
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> -->
|
|
<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>
|
|
<div style="height: 10%"></div>
|
|
<v-col :cols="12" style="width: 100%; height:25%">
|
|
<div
|
|
class="d-flex align-center justify-space-between"
|
|
style="height: 33%; text-align:center"
|
|
>
|
|
<v-row>
|
|
<v-col :cols="1"> </v-col>
|
|
<v-col :cols="4" style="text-align:right">
|
|
금일 사용량 :
|
|
</v-col>
|
|
<v-col :cols="3" style="text-align:right">
|
|
{{ enrgUsageDayVal }}
|
|
</v-col>
|
|
<v-col :cols="2" style="text-align:left">
|
|
MWh
|
|
</v-col>
|
|
<v-col :cols="2"> </v-col>
|
|
</v-row>
|
|
</div>
|
|
<div
|
|
class="d-flex align-center justify-space-between"
|
|
style="height: 33%; text-align:center"
|
|
>
|
|
<v-row>
|
|
<v-col :cols="1"> </v-col>
|
|
<v-col :cols="4" style="text-align:right">
|
|
금월 누적량 :
|
|
</v-col>
|
|
<v-col :cols="3" style="text-align:right">
|
|
{{ enrgUsageMnthVal }}
|
|
</v-col>
|
|
<v-col :cols="2" style="text-align:left">
|
|
MWh
|
|
</v-col>
|
|
<v-col :cols="2"> </v-col>
|
|
</v-row>
|
|
</div>
|
|
<div
|
|
class="d-flex align-center justify-space-between"
|
|
style="height: 33%; text-align:center"
|
|
>
|
|
<v-row>
|
|
<v-col :cols="1"> </v-col>
|
|
<v-col :cols="4" style="text-align:right">
|
|
금월 계획량 :
|
|
</v-col>
|
|
<v-col :cols="3" style="text-align:right">
|
|
{{ enrgUsagePlanVal }}
|
|
</v-col>
|
|
<v-col :cols="2" style="text-align:left">
|
|
MWh
|
|
</v-col>
|
|
<v-col :cols="2"> </v-col>
|
|
</v-row>
|
|
</div>
|
|
<!-- <div style="height: 10%;"></div> -->
|
|
</v-col>
|
|
<div style="height: 5%"></div>
|
|
<div :style="{ width: '100%', height: '50%' }">
|
|
<!-- <div :style="{ width: '100%', height: '130px' }"> -->
|
|
<component
|
|
:style="{ width: '100%', height: '100%' }"
|
|
:is="loadChart_01 ? 'Chart' : null"
|
|
:parentPrgmId="myPrgmId"
|
|
:chartName="'enrgUsageGauge'"
|
|
:ref="'dashBoard_' + chart_01"
|
|
/>
|
|
</div>
|
|
<!-- <div style="height: 5%"></div> -->
|
|
</v-card>
|
|
</v-col>
|
|
<v-col sm="6" xl="3" style="height: 33%">
|
|
<v-card>
|
|
<v-card-title>온실가스 배출량</v-card-title>
|
|
<div class="px-5">
|
|
<v-banner>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<v-card-subtitle class="pa-0">금일: </v-card-subtitle>
|
|
<strong class="custom-title-3"
|
|
>{{ CO2DayVal }}
|
|
<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">
|
|
<v-card-subtitle class="pa-0">당월: </v-card-subtitle>
|
|
<strong class="custom-title-3"
|
|
>{{ CO2MnthVal }}
|
|
<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">
|
|
<v-card-subtitle class="pa-0">전월: </v-card-subtitle>
|
|
<strong class="custom-title-3"
|
|
>{{ CO2BefMnthVal }}
|
|
<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">
|
|
<v-card-subtitle class="pa-0">금년: </v-card-subtitle>
|
|
<strong class="custom-title-3"
|
|
>{{ CO2YearVal }}
|
|
<span class="body-2 text-color--non-activate"
|
|
>tCO2eq</span
|
|
></strong
|
|
>
|
|
</div>
|
|
</v-banner>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col sm="12" xl="6" style="height: 33%">
|
|
<v-card>
|
|
<!-- <div class="d-flex align-center justify-space-between" :style="{ width: '100%', height: '25%' }"> -->
|
|
<v-card-title>전일 대비 실적</v-card-title>
|
|
<!-- </div> -->
|
|
<div :style="{ width: '100%', height: '75%' }">
|
|
<component
|
|
:style="{ width: '100%', height: '100%' }"
|
|
:is="loadChart_02 ? 'Chart' : null"
|
|
:parentPrgmId="myPrgmId"
|
|
:chartName="'compareEqpmTotChart'"
|
|
:ref="'dashBoard_' + chart_02"
|
|
/>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<!-- </v-row> -->
|
|
<!-- <v-row ref="rowParent2" style="height: 33%"> -->
|
|
<v-col cols="12" sm="6" xl="3" style="height: 33%">
|
|
<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>
|
|
<v-col :cols="6">
|
|
<v-card-title class="pa-0">금일 효율 현황</v-card-title>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<div style="height: 5%"></div>
|
|
<v-col :cols="12" style="width: 100%; height:25%">
|
|
<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>
|
|
<div
|
|
class="d-flex align-center justify-space-between"
|
|
style="height: 33%; text-align:center"
|
|
>
|
|
<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-center justify-space-between"
|
|
style="height: 33%; text-align:center"
|
|
>
|
|
<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>
|
|
<!-- <div style="height: 10%;"></div> -->
|
|
</v-col>
|
|
<div style="height: 5%;"></div>
|
|
<div :style="{ width: '100%', height: '50%' }">
|
|
<!-- <div :style="{ width: '100%', height: '130px' }"> -->
|
|
<component
|
|
:style="{ width: '100%', height: '100%' }"
|
|
:is="loadChart_03 ? 'Chart' : null"
|
|
:parentPrgmId="myPrgmId"
|
|
:chartName="'todayEfficiencyStatus'"
|
|
:ref="'dashBoard_' + chart_03"
|
|
/>
|
|
</div>
|
|
<!-- <div style="height: 5%"></div> -->
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" xl="3" style="height: 33%">
|
|
<v-card :ref="'dashBoard_' + chart_04">
|
|
<v-card-title>금일 NG 설비 Top 10</v-card-title>
|
|
<div :style="{ width: '100%', height: '75%' }">
|
|
<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>
|
|
<v-col cols="12" sm="12" xl="6" style="height: 33%">
|
|
<v-card>
|
|
<!-- <div class="d-flex align-center justify-space-between"> -->
|
|
<v-card-title>전일 대비 NG</v-card-title>
|
|
<!-- </div> -->
|
|
<div :style="{ width: '100%', height: '75%' }">
|
|
<component
|
|
:style="{ width: '100%', height: '100%' }"
|
|
:is="loadChart_05 ? 'Chart' : null"
|
|
:parentPrgmId="myPrgmId"
|
|
:chartName="'compareEqpmTGdChart'"
|
|
:ref="'dashBoard_' + chart_05"
|
|
/>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<!-- </v-row> -->
|
|
<!-- <v-row ref="rowParent3" style="height: 33%"> -->
|
|
<v-col cols="12" sm="12" xl="12" style="height: 33%">
|
|
<v-card class="pb-5">
|
|
<div style="height: 5%"></div>
|
|
<div class="h100 px-5" style="height: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 UnusedStatPopPage from '~/components/common/modal/UnusedStatPopPage';
|
|
import EtcStatPopPage from '~/components/common/modal/EtcStatPopPage';
|
|
|
|
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,
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
myHome: 'myHome',
|
|
pageData: state => state.pageData[myPrgmId],
|
|
isDarkMode: 'isDarkMode',
|
|
myHome: 'myHome',
|
|
}),
|
|
},
|
|
watch: {
|
|
rdbElecQual() {
|
|
//전력품질 라디오버튼 변경
|
|
this.getElecQuality();
|
|
},
|
|
rdbEnrgUsage() {
|
|
//금일/금월 라디오버튼 변경
|
|
this.getEnrgUsage();
|
|
},
|
|
// 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,
|
|
|
|
chart_02: 'compareEqpmTotChart',
|
|
loadChart_02: false,
|
|
|
|
chart_03: 'todayEfficiencyStatus',
|
|
loadChart_03: false,
|
|
|
|
chart_04: 'todayNgTopTen',
|
|
loadChart_04: false,
|
|
|
|
chart_05: 'compareEqpmTGdChart',
|
|
loadChart_05: false,
|
|
|
|
gridName: 'dashBoard_grid_01',
|
|
loadGrid: false,
|
|
};
|
|
},
|
|
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;
|
|
// console.log("gridHeight : ", gridHeight);
|
|
}
|
|
const myOptions = {
|
|
// scrollX: false,
|
|
setScroll: true,
|
|
columnOptions: {
|
|
//frozenCount:2,
|
|
minWidth: 70,
|
|
resizable: true,
|
|
},
|
|
};
|
|
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: 'center',
|
|
// 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' },
|
|
{ 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.getGuageChartOption(this.chart_01);
|
|
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;
|
|
},
|
|
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;
|
|
},
|
|
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.getGuageChartOption(this.chart_03);
|
|
chartOption['series'][0]['data'][0].value = isNaN(effcRt) ? 0 : effcRt;
|
|
this.$store.state.pageData[myPrgmId][this.chart_03] = chartOption;
|
|
});
|
|
this.loadChart_03 = true;
|
|
},
|
|
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;
|
|
},
|
|
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;
|
|
},
|
|
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 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 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 = {
|
|
grid: {
|
|
left: '3%',
|
|
right: '5%',
|
|
// top: '15%',
|
|
// bottom: '15%',
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
// data: legendData,
|
|
// bottom: 'bottom',
|
|
// bottom: '90%',
|
|
icon: 'bar',
|
|
},
|
|
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,
|
|
});
|
|
},
|
|
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%',
|
|
},
|
|
];
|
|
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: 'left',
|
|
},
|
|
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];
|
|
|
|
var chartOption = {
|
|
grid: {
|
|
left: '3%',
|
|
right: '5%',
|
|
// top: '15%',
|
|
// bottom: '15%',
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
// data: legendData,
|
|
// bottom: 'bottom',
|
|
icon: 'bar',
|
|
},
|
|
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,
|
|
});
|
|
},
|
|
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) {
|
|
// console.log('chartClickEvent', argData);
|
|
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']['groupId'];
|
|
});
|
|
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">
|
|
.v-avatar {
|
|
border-radius: 21px;
|
|
font-size: 1.75rem;
|
|
}
|
|
.v-virtual-scroll-wrapper {
|
|
overflow-y: auto;
|
|
max-height: 210px;
|
|
}
|
|
</style>
|