575 lines
13 KiB
Vue
575 lines
13 KiB
Vue
<template>
|
||
<div class="l-layout">
|
||
<v-row ref="searchFilter">
|
||
<v-col :cols="12">
|
||
<v-card class="searchFilter">
|
||
<v-row align="center" no-gutters>
|
||
<v-col :cols="3">
|
||
<!-- 차트목록 -->
|
||
<component
|
||
:is="'SelectBox'"
|
||
ref="SelectBox"
|
||
:propsValue="selectValue01"
|
||
:itemList="selectValueList01"
|
||
:label="'차트'"
|
||
@update:propsValue="selectValue01 = $event"
|
||
/>
|
||
</v-col>
|
||
<v-col :cols="4">
|
||
<!-- 대상일 -->
|
||
<component
|
||
:is="'Datepicker'"
|
||
:parentPrgmId="myPrgmId"
|
||
:label="'대상일'"
|
||
:labelCols="3"
|
||
/>
|
||
</v-col>
|
||
<v-col :cols="5" class="text-right">
|
||
<!-- 조회버튼 -->
|
||
<BtnSearch @click="search" />
|
||
</v-col>
|
||
</v-row>
|
||
</v-card>
|
||
</v-col>
|
||
</v-row>
|
||
<v-row ref="contents">
|
||
<v-col :cols="12" style="height: 100%">
|
||
<v-card class="pb-5">
|
||
<div class="d-flex align-center justify-space-between pa-5">
|
||
<v-card-title class="pa-0">에너지 현황</v-card-title>
|
||
</div>
|
||
<v-row>
|
||
<!-- <div style="text-align:center;"> -->
|
||
<v-col class="arrowCols" :cols="3" style="text-align:center;">
|
||
<div class="arrowText">고압반</div>
|
||
</v-col>
|
||
<!-- <span class="mdi mdi-arrow-right-bold" size="mdi-48px"></span> -->
|
||
<!-- <i class="mdi mdi-arrow-right-bold"></i> -->
|
||
<!-- <span style="width:1000px;">⟶</span> -->
|
||
<v-col class="iconArrowCols" :cols="6">
|
||
<div class="arrow-right"></div>
|
||
<!-- <img class="icon_arrow" src="@/assets/images/icon/ico-enrgMap.png"/> -->
|
||
</v-col>
|
||
|
||
<v-col class="arrowCols" :cols="3" style="text-align:center;">
|
||
<div class="arrowText">분전반</div>
|
||
</v-col>
|
||
<!-- </div> -->
|
||
</v-row>
|
||
<div class="px-5" style="height:80%">
|
||
<div ref="chartParent" class="w100 h100">
|
||
<component
|
||
:ref="chartName"
|
||
class="w100 h100"
|
||
:is="loadChart ? 'Chart' : null"
|
||
:parentPrgmId="myPrgmId"
|
||
:chartName="chartName"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</v-card>
|
||
</v-col>
|
||
</v-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import mixinGlobal from '@/mixin/global.js';
|
||
import { resize } from '@/mixin/resize.js';
|
||
import Datepicker from '~/components/common/Datepicker';
|
||
import { mapState, mapActions, mapMutations } from 'vuex';
|
||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||
import Utility from '~/plugins/utility';
|
||
import SelectBox from '@/components/common/select/SelectBox';
|
||
import DateUtility from '~/plugins/dateUtility';
|
||
import Chart from '~/components/common/Chart';
|
||
|
||
let myTitle;
|
||
let myPrgmId;
|
||
|
||
export default {
|
||
mixins: [mixinGlobal, resize],
|
||
async asyncData(context) {
|
||
const myState = context.store.state;
|
||
myPrgmId = context.route.query.prgmId;
|
||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||
myTitle = await myState.activeMenuInfo.menuNm;
|
||
},
|
||
meta: {
|
||
title: () => {
|
||
return myTitle;
|
||
},
|
||
prgmId: myPrgmId,
|
||
closable: true,
|
||
},
|
||
components: {
|
||
Datepicker,
|
||
BtnSearch,
|
||
Utility,
|
||
DateUtility,
|
||
Chart,
|
||
SelectBox,
|
||
},
|
||
data() {
|
||
return {
|
||
myPrgmId: myPrgmId,
|
||
selectValueList01: [],
|
||
selectValue01: null,
|
||
loadChart: false,
|
||
chartName: 'sankeyChart',
|
||
loadChart: false,
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
isDarkMode: state => state.isDarkMode,
|
||
}),
|
||
chkIsFind() {
|
||
// 조회 플래그
|
||
return this.pageData.isFind;
|
||
},
|
||
chkToDt() {
|
||
return this.pageData.toDt;
|
||
},
|
||
chkFromDt() {
|
||
return this.pageData.fromDt;
|
||
},
|
||
},
|
||
watch: {
|
||
chkIsFind(val) {
|
||
if (val) this.search();
|
||
},
|
||
chkToDt(val) {
|
||
var diff = DateUtility.diff(
|
||
Utility.setFormatDate(new Date(), 'YYYY-MM-DD'),
|
||
this.pageData.toDt,
|
||
'd',
|
||
);
|
||
if (diff > 0) {
|
||
this.setPageData({
|
||
toDt: new Date(),
|
||
isCheck: true,
|
||
});
|
||
}
|
||
},
|
||
chkFromDt(val) {
|
||
var diff = DateUtility.diff(
|
||
Utility.setFormatDate(new Date(), 'YYYY-MM-DD'),
|
||
this.pageData.fromDt,
|
||
'd',
|
||
);
|
||
if (diff > 0) {
|
||
this.setPageData({
|
||
fromDt: new Date(),
|
||
isCheck: true,
|
||
});
|
||
}
|
||
},
|
||
},
|
||
async beforeCreate() {
|
||
myPrgmId = this.$route.query.prgmId;
|
||
await this.$store.dispatch('chkOpenTabList', {
|
||
key: 'create',
|
||
prgmId: myPrgmId,
|
||
defaultData: defaultData,
|
||
});
|
||
},
|
||
async created() {},
|
||
async mounted() {
|
||
this.init();
|
||
// document.querySelector('.icon_arrow').style.width = document.querySelector('.iconArrowCols').clientWidth-20 + "px";
|
||
},
|
||
beforeDestroy() {
|
||
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
|
||
},
|
||
methods: {
|
||
...mapMutations({
|
||
setChartOption: 'setChartOption',
|
||
setPageData: 'setPageData',
|
||
}),
|
||
...mapActions({
|
||
getCodeList: 'modules/search/getCodeList',
|
||
}),
|
||
async init() {
|
||
await this.getEnrgMapChartList();
|
||
this.setFromDt();
|
||
},
|
||
async search() {
|
||
await this.getChartData();
|
||
this.setPageData({
|
||
isFind: false,
|
||
});
|
||
},
|
||
setFromDt() {
|
||
this.pageData.fromDt = Utility.setBeforetDate(
|
||
this.pageData,
|
||
this.pageData.toDt,
|
||
'YYYYMMDD',
|
||
);
|
||
},
|
||
async getEnrgMapChartList() {
|
||
let res = await this.postApiReturn({
|
||
apiKey: 'selectEnrgMapChartList',
|
||
resKey: 'enrgMapChartList',
|
||
sendParam: {},
|
||
});
|
||
if (res.length > 0) {
|
||
this.selectValueList01 = await res.map(item => {
|
||
return {
|
||
text: item.sankeyChartNm,
|
||
value: item.sankeyChartSno.toString(),
|
||
};
|
||
});
|
||
this.selectValue01 = this.selectValueList01[0].value;
|
||
} else {
|
||
this.selectValueList01 = [];
|
||
this.selectValue01 = null;
|
||
}
|
||
this.setPageData({
|
||
sankeyChartList: this.selectValueList01,
|
||
sankeyChartSno: this.selectValue01,
|
||
});
|
||
},
|
||
async getChartData() {
|
||
let res = await this.postApiReturn({
|
||
apiKey: 'selectChartNode',
|
||
resKey: 'enrgMapChartNodeList',
|
||
sendParam: {
|
||
sankeyChartSno: this.selectValue01,
|
||
},
|
||
});
|
||
|
||
let res2 = await this.postApiReturn({
|
||
apiKey: 'selectSankeyTag',
|
||
resKey: 'sankeyTagList',
|
||
sendParam: {
|
||
sankeyChartSno: this.selectValue01,
|
||
},
|
||
});
|
||
|
||
var taglist = res2.map(item => {
|
||
return item['hmiTagNm'];
|
||
});
|
||
|
||
var tempSObj = {};
|
||
var tempEObj = {};
|
||
tempSObj['eterm'] = Utility.setFormatDate(
|
||
this.pageData.fromDt,
|
||
'YYYY-MM-DD 00:29:59',
|
||
);
|
||
tempSObj['sterm'] = Utility.setFormatDate(
|
||
DateUtility.addDate(-1, 'YYYY/MM/DD', this.pageData.fromDt),
|
||
'YYYY-MM-DD 23:59:59',
|
||
);
|
||
tempSObj['interval'] = '1';
|
||
tempSObj['vals'] = ['MIN'];
|
||
tempSObj['t'] = '2022-06-03 05:22:50';
|
||
tempSObj['term'] = 'MIN10';
|
||
tempSObj['tags'] = taglist;
|
||
tempSObj['url'] = 'http://58.232.11.31:1567/RTDBweapi/aggdata2.do';
|
||
|
||
var today = Utility.setFormatDate(new Date(), 'YYYYMMDD');
|
||
var eterm = Utility.setFormatDate(this.pageData.toDt, 'YYYYMMDD');
|
||
tempEObj['eterm'] = Utility.setFormatDate(
|
||
this.pageData.toDt,
|
||
'YYYY-MM-DD 23:59:59',
|
||
);
|
||
tempEObj['sterm'] =
|
||
today == eterm
|
||
? Utility.setFormatDate(this.pageData.toDt, 'YYYY-MM-DD 00:00:00')
|
||
: Utility.setFormatDate(this.pageData.toDt, 'YYYY-MM-DD 23:29:59');
|
||
tempEObj['interval'] = '1';
|
||
tempEObj['vals'] = ['MIN'];
|
||
tempEObj['t'] = '2022-06-03 05:22:50';
|
||
tempEObj['term'] = 'MIN10';
|
||
tempEObj['tags'] = taglist;
|
||
tempEObj['url'] = 'http://58.232.11.31:1567/RTDBweapi/aggdata2.do';
|
||
|
||
var startRes = await this.postApiReturn({
|
||
apiKey: 'selectEnrgMapInfo',
|
||
resKey: 'enrgMapInfoData',
|
||
sendParam: tempSObj,
|
||
});
|
||
|
||
var endRes = await this.postApiReturn({
|
||
apiKey: 'selectEnrgMapInfo',
|
||
resKey: 'enrgMapInfoData',
|
||
sendParam: tempEObj,
|
||
});
|
||
|
||
var resultRes = [];
|
||
var tempTags = [];
|
||
var allResCheck = false;
|
||
for (var i = 0; i < taglist.length; i++) {
|
||
if (
|
||
startRes.tags[i]['d'].length > 0 &&
|
||
endRes.tags[i]['d'].length > 0
|
||
) {
|
||
resultRes.push(
|
||
Utility.setFormatDecimal(
|
||
endRes.tags[i]['M'] - startRes.tags[i]['N'],
|
||
2,
|
||
),
|
||
);
|
||
} else {
|
||
resultRes.push(0);
|
||
tempTags.push({ index: i, tag: startRes.tags[i].tag });
|
||
}
|
||
}
|
||
if (tempTags.length > 0) {
|
||
allResCheck = true;
|
||
console.log('allResCheck... true');
|
||
}
|
||
if (allResCheck) {
|
||
tempSObj['tags'] = tempTags.map(item => {
|
||
return item.tag;
|
||
});
|
||
tempSObj['sterm'] = Utility.setFormatDate(
|
||
DateUtility.addDate(-1, 'YYYY/MM/DD', this.pageData.fromDt),
|
||
'YYYY-MM-DD 23:59:59',
|
||
);
|
||
tempSObj['eterm'] = Utility.setFormatDate(
|
||
this.pageData.toDt,
|
||
'YYYY-MM-DD 23:29:59',
|
||
);
|
||
var allRes = await this.postApiReturn({
|
||
apiKey: 'selectEnrgMapInfo',
|
||
resKey: 'enrgMapInfoData',
|
||
sendParam: tempSObj,
|
||
});
|
||
var cnt = 0;
|
||
allRes.tags.map(item => {
|
||
resultRes[tempTags[cnt++].index] = Utility.setFormatDecimal(
|
||
item['M'] - item['N'],
|
||
2,
|
||
);
|
||
});
|
||
}
|
||
|
||
this.setChartData(res, res2, resultRes);
|
||
},
|
||
async setChartData(nodeList, data, value) {
|
||
this.loadChart = false;
|
||
let makeData = [];
|
||
let makeLinks = [];
|
||
|
||
this.makeDataAndLink(nodeList, data, value, makeLinks, makeData);
|
||
|
||
//label에서 보여줄 total 값
|
||
var totalVal = 0;
|
||
makeLinks.map(item => {
|
||
if (item.source == makeData[0].name) {
|
||
totalVal += item.value;
|
||
}
|
||
});
|
||
|
||
//label , tooltip 셋팅
|
||
for (var i = 0; i < makeData.length; i++) {
|
||
makeData[i]['label'] = {
|
||
show: true,
|
||
formatter: function(obj) {
|
||
var retVal = makeLinks.filter(n => {
|
||
return n.target == obj.name;
|
||
});
|
||
return (
|
||
obj.name +
|
||
'\n' +
|
||
(obj.name == makeData[0].name
|
||
? Utility.setFormatIntDecimal(totalVal, 2)
|
||
: Utility.setFormatIntDecimal(retVal[0].value, 2))
|
||
);
|
||
},
|
||
};
|
||
makeData[i]['tooltip'] = {
|
||
formatter: function(obj) {
|
||
var retVal = makeLinks.filter(n => {
|
||
return n.target == obj.name;
|
||
});
|
||
return (
|
||
obj.name +
|
||
'\n' +
|
||
(obj.name == makeData[0].name
|
||
? Utility.setFormatIntDecimal(totalVal, 2)
|
||
: Utility.setFormatIntDecimal(retVal[0].value, 2)
|
||
)
|
||
.toString()
|
||
.bold()
|
||
);
|
||
},
|
||
};
|
||
}
|
||
|
||
const chartOption = {
|
||
backgroundColor: '#FFFFFF',
|
||
series: [
|
||
{
|
||
layoutIterations: 0,
|
||
type: 'sankey',
|
||
left: 25.0,
|
||
top: 20.0,
|
||
right: 120,
|
||
bottom: 50.0,
|
||
// nodeWidth:10,
|
||
nodeGap: 10,
|
||
nodeAlign: 'left',
|
||
data: makeData,
|
||
links: makeLinks,
|
||
lineStyle: {
|
||
color: 'source',
|
||
curveness: 0.5,
|
||
},
|
||
// triggerEvent: true,
|
||
itemStyle: {
|
||
//color: '#1f77b4',
|
||
//borderColor: '#1f77b4'
|
||
},
|
||
label: {
|
||
color: this.isDarkMode
|
||
? 'rgba(250,250,250,0.7)'
|
||
: 'rgba(0,0,0,0.7)',
|
||
fontFamily: 'Arial',
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
};
|
||
|
||
this.setChartOption({ chartKey: this.chartName, value: chartOption });
|
||
|
||
this.loadChart = true;
|
||
},
|
||
makeDataAndLink(nodeList, data, value, makeLinks, makeData) {
|
||
var makeTempData = [];
|
||
var tempMakeLinks = [];
|
||
nodeList.map(item => {
|
||
makeTempData.push({
|
||
name: item.nodeName,
|
||
});
|
||
});
|
||
var cnt = 0;
|
||
data.map(item => {
|
||
tempMakeLinks.push({
|
||
source: item.sourceName,
|
||
target: item.tartgetName,
|
||
value: parseFloat(value[cnt++]),
|
||
});
|
||
});
|
||
|
||
// var resultArr = parentList.filter((item, index)=>{
|
||
// console.log("index :",parentList.indexOf(item))
|
||
// console.log("##",parentList.indexOf(item) === index)
|
||
// return parentList.indexOf(item) === index;
|
||
// });
|
||
|
||
//1차 정렬
|
||
tempMakeLinks.sort(function(a, b) {
|
||
if (a.source == b.source) {
|
||
return b.value - a.value;
|
||
}
|
||
});
|
||
|
||
tempMakeLinks.filter(item => {
|
||
if (item.source == makeTempData[0].name) {
|
||
makeLinks.push(item);
|
||
}
|
||
});
|
||
|
||
//2차 정렬
|
||
makeSort(makeLinks, tempMakeLinks);
|
||
|
||
makeLinks.map(item => {
|
||
makeData.push({ name: item.target });
|
||
});
|
||
|
||
makeData.unshift(makeTempData[0]);
|
||
|
||
//
|
||
function makeSort(list, b) {
|
||
for (var i = 0; i < list.length; i++) {
|
||
b.filter(item => {
|
||
if (item.source == list[i].target) {
|
||
makeLinks.push(item);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
|
||
const defaultData = {
|
||
isFind: false,
|
||
cmCycle: 'CYC_DAY', // 주기
|
||
defaultRange: {
|
||
CYC_DAY: 30,
|
||
},
|
||
fromDt: '',
|
||
toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
|
||
sankeyChartList: [],
|
||
sankeyChartSno: null,
|
||
sankeyChart: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
confine: true,
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
grid: {
|
||
left: '0',
|
||
right: '0',
|
||
top: '0',
|
||
},
|
||
legend: null,
|
||
series: [],
|
||
title: {},
|
||
backgroundColor: '',
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
// .icon-arrow {
|
||
// display:inline-block;
|
||
// position: relative;
|
||
// height: 60px;
|
||
|
||
// // top: 20px;
|
||
// // left: 0;
|
||
|
||
// }
|
||
// .arrowText{
|
||
// // align-items: center;
|
||
// display: inline-block;
|
||
// flex-wrap: wrap;
|
||
// font-size: 1.25rem;
|
||
// font-weight: 700;
|
||
// letter-spacing: 0.0125em;
|
||
// line-height: 1.5;
|
||
// word-break: break-all;
|
||
// position: relative;
|
||
// line-height:60px;
|
||
// }
|
||
.arrow-right {
|
||
width: 100%;
|
||
height: 35px;
|
||
display: flex;
|
||
}
|
||
.arrow-right:before {
|
||
content: '';
|
||
background: #594dff;
|
||
width: 100%;
|
||
clip-path: polygon(
|
||
0 10px,
|
||
calc(100% - 15px) 10px,
|
||
calc(100% - 15px) 0,
|
||
100% 50%,
|
||
calc(100% - 15px) 100%,
|
||
calc(100% - 15px) calc(100% - 10px),
|
||
0 calc(100% - 10px)
|
||
);
|
||
}
|
||
</style>
|