367 lines
15 KiB
Vue
367 lines
15 KiB
Vue
<template>
|
|
<div class="l-layout">
|
|
<!-- <v-row ref="rowParent">
|
|
<v-col xl="4">
|
|
<v-card class="pa-5">
|
|
<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">2021-07-02 11:57 기준</v-card-subtitle>
|
|
</div>
|
|
<div class="d-flex align-center justify-space-between mt-8" style="height:calc(100% - 62px)">
|
|
<div class="mr-10" :style="{ width: '210px', height: '100%', backgroundColor: 'rgba(255, 0, 0, .6)'}"></div>
|
|
<div>
|
|
<div class="v-box">
|
|
<v-icon size="48" :color="isDarkMode ? '#22273c' : '#4a568d'">$darkDashCharge</v-icon>
|
|
<div class="text-right">
|
|
<strong class="custom-title-2">2,940 <span class="body-2">Kw</span></strong>
|
|
<p class="body-2 mt-1 mb-0 text-color--non-activate">요금 전용전력</p>
|
|
</div>
|
|
</div>
|
|
<div class="v-box">
|
|
<v-icon size="48" :color="isDarkMode ? '#22273c' : '#4a568d'">$darkDashPeak</v-icon>
|
|
<div class="text-right">
|
|
<strong class="custom-title-2">333 <span class="body-2">Kw</span></strong>
|
|
<p class="body-2 mt-1 mb-0 text-color--non-activate">현재 피크전력</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col xl="3">
|
|
<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">금년(1/1~5/18)</v-card-subtitle>
|
|
<strong class="custom-title-2">125,940 <span class="body-2 text-color--non-activate">kWh</span></strong>
|
|
</div>
|
|
</v-banner>
|
|
<v-banner>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<v-card-subtitle class="pa-0">전월(4/1~4/18)</v-card-subtitle>
|
|
<strong class="custom-title-2">34,018 <span class="body-2 text-color--non-activate">kWh</span></strong>
|
|
</div>
|
|
</v-banner>
|
|
<v-banner class="v-banner--last">
|
|
<div class="d-flex align-center justify-space-between">
|
|
<v-card-subtitle class="pa-0">금월(5/1 ~5/18)</v-card-subtitle>
|
|
<strong class="custom-title-2">20,648 <span class="body-2 text-color--non-activate">kWh</span></strong>
|
|
</div>
|
|
</v-banner>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col xl="3">
|
|
<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">금년(1/1~5/18)</v-card-subtitle>
|
|
<strong class="custom-title-2">28.98 <span class="body-2 text-color--non-activate">TOE</span></strong>
|
|
</div>
|
|
</v-banner>
|
|
<v-banner>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<v-card-subtitle class="pa-0">전월(4/1~4/18)</v-card-subtitle>
|
|
<strong class="custom-title-2">7.82 <span class="body-2 text-color--non-activate">TOE</span></strong>
|
|
</div>
|
|
</v-banner>
|
|
<v-banner class="v-banner--last">
|
|
<div class="d-flex align-center justify-space-between">
|
|
<v-card-subtitle class="pa-0">금월(5/1 ~5/18)</v-card-subtitle>
|
|
<strong class="custom-title-2">4.48 <span class="body-2 text-color--non-activate">TOE</span></strong>
|
|
</div>
|
|
</v-banner>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col xl="2">
|
|
<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>
|
|
<v-avatar size="42" :color="isDarkMode ? '#2fad35' : '#00c875'" min-width="64" class="font-weight-bold text-color--white-0">18</v-avatar>
|
|
</div>
|
|
</v-banner>
|
|
<v-banner>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<v-card-subtitle class="pa-0">미사용개소</v-card-subtitle>
|
|
<v-avatar size="42" :color="isDarkMode ? '#fb8200' : '#fdab3d'" min-width="64" class="font-weight-bold text-color--white-0">9</v-avatar>
|
|
</div>
|
|
</v-banner>
|
|
<v-banner class="v-banner--last">
|
|
<div class="d-flex align-center justify-space-between">
|
|
<v-card-subtitle class="pa-0">통신이상</v-card-subtitle>
|
|
<v-avatar size="42" :color="isDarkMode ? '#fb5a8b' : '#ff7b8b'" min-width="64" class="font-weight-bold text-color--white-0">5</v-avatar>
|
|
</div>
|
|
</v-banner>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col xl="3">
|
|
<v-card>
|
|
<v-card-title>금일 전기 사용량</v-card-title>
|
|
<div class="px-5 pb-5" style="height:calc(100% - 70px)">
|
|
<div class="text-center">
|
|
<div>
|
|
<strong class="custom-title-1">1,040 <span class="font-weight-regular custom-text-1">kWh</span></strong>
|
|
<div class="d-flex align-center justify-center mt-3">
|
|
<span class="body-1 text-color--non-activate">전주 평균대비(0시-15시)</span>
|
|
<div class="d-flex align-baseline ml-2" :style="{ color: '#ff76bb' }">
|
|
<strong class="mr-1 custom-text-1">56</strong>
|
|
<span class="caption mr-1">kWh</span>
|
|
<v-icon small color="#fb5a83">mdi-arrow-up</v-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mx-2 mt-4" style="height:calc(100% - 101px)">
|
|
<div :style="{width: '100%', minHeight: '150px', height: '100%', backgroundColor: 'rgba(255, 0, 0, .6)'}"></div>
|
|
</div>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col xl="3">
|
|
<v-card>
|
|
<v-card-title>금일 전기 비용</v-card-title>
|
|
<div class="px-5 pb-5" style="height:calc(100% - 70px)">
|
|
<div class="text-center">
|
|
<div>
|
|
<strong class="custom-title-1">100 <span class="font-weight-regular custom-text-1">천</span></strong>
|
|
<div class="d-flex align-center justify-center mt-3">
|
|
<span class="body-1 text-color--non-activate">전주 평균대비(0시-15시)</span>
|
|
<div class="d-flex align-baseline ml-2" :style="{ color: '#01ae6a' }">
|
|
<strong class="mr-1 custom-text-1">60</strong>
|
|
<span class="caption mr-1">천원</span>
|
|
<v-icon small color="#2fad35">mdi-arrow-down</v-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mx-2 mt-4" style="height:calc(100% - 101px)">
|
|
<div :style="{width: '100%', minHeight: '150px', height: '100%', backgroundColor: 'rgba(255, 0, 0, .6)'}"></div>
|
|
</div>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
sm="12"
|
|
xl="6"
|
|
>
|
|
<v-card>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<v-card-title>에너지 사용현황</v-card-title>
|
|
<v-card-actions class="d-flex justify-sm-end align-center pa-5">
|
|
<span class="body-2 mr-5">현재온도 <span :style="{ color: isDarkMode ? '#2d8cf6' : '#366dbe' }">22.00 ℃</span></span>
|
|
<v-radio-group
|
|
v-model="radios"
|
|
hide-details
|
|
dense
|
|
row
|
|
class="mt-0"
|
|
>
|
|
<v-radio
|
|
label="금일"
|
|
value="금일"
|
|
:color="isDarkMode ? '#2d8cf6' : '#366dbe'"
|
|
on-icon="mdi-record-circle"
|
|
:ripple="false"
|
|
></v-radio>
|
|
<v-radio
|
|
label="금월"
|
|
value="금월"
|
|
:color="isDarkMode ? '#2d8cf6' : '#366dbe'"
|
|
on-icon="mdi-record-circle"
|
|
:ripple="false"
|
|
></v-radio>
|
|
</v-radio-group>
|
|
</v-card-actions>
|
|
</div>
|
|
<div class="pl-5 pr-5 pb-5" style="height:calc(100% - 70px)">
|
|
<div :style="{ width: '100%', minheight: '200px', height: '100%', backgroundColor: 'rgba(255, 0, 0, 0.6)'}"></div>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
sm="12"
|
|
xl="5"
|
|
>
|
|
<v-card>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<v-card-title class="font-weight-bold">전력품질</v-card-title>
|
|
<v-card-actions>
|
|
<v-radio-group
|
|
v-model="radios2"
|
|
hide-details
|
|
dense
|
|
row
|
|
>
|
|
<v-radio label="Kw" value="Kw" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
|
|
<v-radio label="A(R)" value="A(R)" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
|
|
<v-radio label="V(R)" value="V(R)" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
|
|
<v-radio label="V(RS)" value="V(RS)" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
|
|
<v-radio label="PF" value="PF" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
|
|
<v-radio label="Hz" value="Hz" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
|
|
</v-radio-group>
|
|
</v-card-actions>
|
|
</div>
|
|
<div class="pt-0 pr-5 pl-5 pb-5" style="height:calc(100% - 70px)">
|
|
<div :style="{ width: '100%', height: '100%', backgroundColor: 'rgba(255, 0, 0, 0.6)'}"></div>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
sm="6"
|
|
xl="4"
|
|
>
|
|
<v-card>
|
|
<v-card-title>주요 검침현황</v-card-title>
|
|
<div class="v-virtual-scroll-wrapper px-5">
|
|
<v-virtual-scroll
|
|
max-height="264"
|
|
:items="tableDatas"
|
|
:item-height="42"
|
|
>
|
|
<template v-slot:default="{ item, index }">
|
|
<v-banner
|
|
single-line
|
|
:class="{ 'v-banner--last': index === tableDatas.length - 1 }"
|
|
>
|
|
<v-row
|
|
justify="space-between"
|
|
align="center"
|
|
no-gutters
|
|
>
|
|
<v-col cols="auto">
|
|
<p class="body-2 mb-0">{{ item.order }}</p>
|
|
</v-col>
|
|
<v-col cols="6">
|
|
<div class="d-flex align-center">
|
|
<v-chip
|
|
label
|
|
small
|
|
:ripple="false"
|
|
|
|
class="body-2"
|
|
>
|
|
{{ item.chips }}
|
|
</v-chip>
|
|
<p class="body-2 mb-0 ml-3">{{ item.title.length >= 14 ? item.title.slice(0, 10) + '...' : item.title }}</p>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="3">
|
|
<p class="body-2 mb-0">{{ item.Kw }}</p>
|
|
</v-col>
|
|
<v-col cols="2">
|
|
<v-icon :color="tableDataGetColorByState(item.state)" size="8" class="mr-1">mdi-circle</v-icon>
|
|
<span class="body-2">{{ item.state }}</span>
|
|
</v-col>
|
|
</v-row>
|
|
</v-banner>
|
|
</template>
|
|
</v-virtual-scroll>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
sm="6"
|
|
xl="3"
|
|
>
|
|
<v-card height="328">
|
|
<v-card-title>Log</v-card-title>
|
|
<v-timeline
|
|
dense
|
|
class="pt-0 px-5"
|
|
>
|
|
<div class="v-virtual-scroll-wrapper">
|
|
<v-virtual-scroll
|
|
width="100%"
|
|
max-height="222"
|
|
:items="logList"
|
|
:item-height="34"
|
|
>
|
|
<template v-slot:default="{ item, index }">
|
|
<v-timeline-item
|
|
:color="index === 0 ? '#196dcb': '#6a9bf4'"
|
|
small
|
|
fill-dot
|
|
class="pb-0"
|
|
>
|
|
<span class="body-2 ml-4">{{ item.time }}</span>
|
|
<span class="body-2 ml-5">{{ item.log }}</span>
|
|
</v-timeline-item>
|
|
</template>
|
|
</v-virtual-scroll>
|
|
</div>
|
|
</v-timeline>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'; // , mapActions
|
|
import DateUtility from '~/plugins/dateUtility';
|
|
|
|
let myTitle;
|
|
//const myPrgmId = 'myIndex';
|
|
const myPrgmId = 'PRG0001';
|
|
export default {
|
|
layout: 'default',
|
|
asyncData(context) {
|
|
const myState = context.store.state;
|
|
context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
|
myTitle =
|
|
myState.activeMenuInfo != null ? myState.activeMenuInfo.menuNm : '';
|
|
},
|
|
meta: {
|
|
title: () => {
|
|
return myTitle;
|
|
},
|
|
prgmId: myPrgmId,
|
|
closable: false,
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
isDarkMode: 'isDarkMode',
|
|
myHome: 'myHome',
|
|
}),
|
|
},
|
|
data() {
|
|
return {
|
|
myPrgmId: myPrgmId,
|
|
};
|
|
},
|
|
|
|
beforeCreate() {
|
|
this.$store.dispatch('chkOpenTabList', {
|
|
key: 'create',
|
|
prgmId: myPrgmId,
|
|
defaultData: defaultData,
|
|
});
|
|
},
|
|
created() {},
|
|
mounted() {},
|
|
beforeDestroy() {},
|
|
methods: {},
|
|
};
|
|
const defaultData = {};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.v-avatar {
|
|
border-radius: 21px;
|
|
font-size: 1.75rem;
|
|
}
|
|
</style>
|