sk_fems_ui commit
This commit is contained in:
unknown
574
pages/ems/effc/EnrgMapPage.vue
Normal file
574
pages/ems/effc/EnrgMapPage.vue
Normal file
@ -0,0 +1,574 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user