sk_fems_ui commit
This commit is contained in:
unknown
575
components/common/modal/EnrgUsePlanModiPop.vue
Normal file
575
components/common/modal/EnrgUsePlanModiPop.vue
Normal file
@ -0,0 +1,575 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters >
|
||||
<v-dialog
|
||||
ref="popModal"
|
||||
v-model="dialog"
|
||||
width="900"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
scrollable
|
||||
>
|
||||
<v-card style="height: 100%">
|
||||
<div class="pa-5">
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<InputText
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:label="'설비명'"
|
||||
:valueNm="'eqpmNm'"
|
||||
:readonly="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
</v-col>
|
||||
<v-col :cols="3" class="text-right">
|
||||
<v-btn icon tile :ripple="false" @click="closePop()">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<!-- <div id="chartParent" ref="chartParent" style="height: 100px"> -->
|
||||
<div :style="'height: calc(50vh)'">
|
||||
<div class="d-flex align-center justify-space-between pa-4" style="height: 10%">
|
||||
<v-card-title class="pa-0 custom-title-4">사용량 계획</v-card-title>
|
||||
</div>
|
||||
<!-- <div id="chartParent" ref="chartParent" :style="'height: 80%'"> -->
|
||||
<div id="chartParent" ref="chartParent" style="height: 70%">
|
||||
<component
|
||||
class="w100 h100"
|
||||
:is="loadChart ? 'Chart' : null"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:modalId="modalId"
|
||||
:modalDataKey="modalDataKey"
|
||||
:chartName="chartName"
|
||||
:ref="chartName"
|
||||
/>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div style="height: 20%; margin: auto; width: 90%; display: flex; align-items: center;">
|
||||
<v-row align="center" no-gutters class="pa-5 d-flex align-center justify-center;">
|
||||
<v-col :cols="5">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:labelCols='3'
|
||||
:textCols='6'
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'대상월'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="5">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox2"
|
||||
:labelCols='5'
|
||||
:textCols='6'
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'전년대비절감율'"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2" class="text-right">
|
||||
<v-btn color="primary" dark @click="search()">적용</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- <div style="height: 70%; width:10%; float: left; border: 1px solid blue; background-color: #A2A2A2">
|
||||
설정
|
||||
</div>
|
||||
<div style="height: 70%; width:90%; margin-left:10%; border: 1px solid blue;">
|
||||
<v-row align="center" no-gutters class="pa-5 d-flex align-center justify-center;">
|
||||
<v-col :cols="4">
|
||||
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
|
||||
</v-col>
|
||||
<v-col :cols="2" class="text-right">
|
||||
<v-btn color="primary" dark @click="setChart()">적용</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- <v-row align="center" no-gutters>
|
||||
<v-row
|
||||
:cols="12"
|
||||
class="d-flex align-center justify-space-between pa-3"
|
||||
>
|
||||
|
||||
<v-col :cols="4">
|
||||
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
|
||||
</v-col>
|
||||
<v-col :cols="2" class="text-right">
|
||||
<v-btn color="primary" dark @click="setChart()">적용</v-btn>
|
||||
</v-col>
|
||||
</v-row> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
|
||||
<component
|
||||
:ref="'gridName' + parentPrgmId"
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:dataPath="searchParam.modifyEnrgUsePlanModalDataKey.modifyEnrgUsePlanModalData"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="bindingData"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate()"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn color="primary" dark @click="setUpdate()">확정</v-btn>
|
||||
<v-btn color="primary" dark @click="closePop()">취소</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Utility from '~/plugins/utility';
|
||||
import selectCodeList from '@/components/common/select/selectCodeList';
|
||||
import InputText from '~/components/common/input/InputText';
|
||||
import Chart from '~/components/common/Chart';
|
||||
import SelectBox from '@/components/common/select/SelectBox';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: '비교대상 최대(20개)',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 정보',
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 목록',
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
selectCodeList,
|
||||
InputText,
|
||||
Chart,
|
||||
SelectBox
|
||||
// Tree
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
chartName: 'modifyEnrgUsePlanChart',
|
||||
modalId: 'modifyEnrgUsePlanModal',
|
||||
modalDataKey: 'modifyEnrgUsePlanModalDataKey',
|
||||
// gridName: 'rowElecContGrid',
|
||||
loadChart: false,
|
||||
// selectedTargetMonth: 'all',
|
||||
dialog: false,
|
||||
selectValue01: null,
|
||||
selectValueList01: [],
|
||||
selectValue02: null,
|
||||
selectValueList02: [],
|
||||
nowModalChartData: [],
|
||||
nowSeriesData: [],
|
||||
|
||||
|
||||
activeRowData: {},
|
||||
checkedRowDataList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
// searchParam: state => state.pageData,
|
||||
// searchParam(state) {
|
||||
// return state.pageData[this.parentPrgmId];
|
||||
// },
|
||||
myBindingData(state) {
|
||||
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
}
|
||||
},
|
||||
rowGrid2SelectData(state) {
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId].rowGrid2SelectData;
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData]
|
||||
.rowGrid2SelectData;
|
||||
}
|
||||
},
|
||||
popupDialogFg(state) {
|
||||
return state.pageData[this.parentPrgmId].popupDialogFg;
|
||||
}
|
||||
}),
|
||||
chkDialog(){
|
||||
return this.dialog
|
||||
},
|
||||
chkPopupDialogFg() {
|
||||
// 모달 열기/닫기 값
|
||||
// return this.dialog
|
||||
return this.popupDialogFg;
|
||||
},
|
||||
|
||||
// get() {
|
||||
// // if(this.searchParam.rowGridSelectData){
|
||||
// // return this.searchParam.rowGridSelectData[this.item.valueNm];
|
||||
// // }
|
||||
// return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
|
||||
// },
|
||||
// set(value) {
|
||||
// // return value;
|
||||
// // return this.myBindingData({ [this.item.valueNm]: value });
|
||||
// //return this.setPageData({ [this.item.valueNm]: value });
|
||||
// return this.myBindingData({ [this.item.valueNm]: value });
|
||||
// },
|
||||
// },
|
||||
},
|
||||
watch: {
|
||||
async chkDialog(val){
|
||||
if (val) {
|
||||
// await this.getData();
|
||||
this.nowModalChartData = this.rowGrid2SelectData;
|
||||
this.setChart();
|
||||
} else {
|
||||
this.closePop();
|
||||
}
|
||||
},
|
||||
chkPopupDialogFg(val) {
|
||||
this.dialog = val;
|
||||
|
||||
},
|
||||
selectValue01(value){
|
||||
this.setSelectValueList02();
|
||||
// if(this.selectValue02 == '0'){
|
||||
// this.search();
|
||||
// }else{
|
||||
// this.setSelectValueList02();
|
||||
// }
|
||||
},
|
||||
selectValue02(value){
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.$store.commit('setPageData', {
|
||||
modifyEnrgUsePlanModal: {modifyEnrgUsePlanModalDataKey},
|
||||
});
|
||||
},
|
||||
created() {
|
||||
this.setSelectValueList01();
|
||||
this.setSelectValueList02();
|
||||
this.init();
|
||||
// if(this.searchParam.isMulti == true){
|
||||
// this.setPageData({
|
||||
// facInfoList : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
|
||||
// });
|
||||
// }else{
|
||||
// this.setPageData({
|
||||
// facInfo : localStorage.getItem(this.parentPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(this.parentPrgmId + "CheckedRow")) : {}
|
||||
// });
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setWidgetPageData: 'setWidgetPageData',
|
||||
setModalChartOption: 'setModalChartOption',
|
||||
setModalChartSeries: 'setModalChartSeries',
|
||||
setModalChartTooltip: 'setModalChartTooltip'
|
||||
}),
|
||||
...mapActions({
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
}),
|
||||
init() {
|
||||
this.setChart();
|
||||
},
|
||||
setSelectValueList01(){
|
||||
this.selectValueList01 = [{'text' : '전체', 'value': 'all'}];
|
||||
for(var i=1; i<=12; i++){
|
||||
let qty = 'qty' + i.toString().padStart(2, '0');
|
||||
this.selectValueList01.push(
|
||||
{
|
||||
'text' : i+'월',
|
||||
'value': qty
|
||||
}
|
||||
);
|
||||
}
|
||||
this.selectValue01 = this.selectValueList01[0].value;
|
||||
},
|
||||
setSelectValueList02(){
|
||||
for(var i=0; i<=100; i+=5){
|
||||
this.selectValueList02.push(
|
||||
{
|
||||
'text' : i + '%',
|
||||
'value': String(i)
|
||||
}
|
||||
);
|
||||
}
|
||||
this.selectValue02 = this.selectValueList02[0].value;
|
||||
},
|
||||
// 계약 정보 조회
|
||||
setUpdate() {
|
||||
this.dialog = false;
|
||||
let nowSeriesData = this.nowSeriesData;
|
||||
let nowPlanData = nowSeriesData.filter(item => {
|
||||
return item.name == '계획';
|
||||
})[0];
|
||||
let nowPastData = nowSeriesData.filter(item => {
|
||||
return item.name == '전년실적';
|
||||
})[0];
|
||||
let qtyList = [];
|
||||
let qtyDict = {};
|
||||
for(var i=0; i<nowPlanData.data.length; i++){
|
||||
qtyList.push('qty' + (i+1).toString().padStart(2, '0'));
|
||||
qtyDict['qty' + (i+1).toString().padStart(2, '0')] = i;
|
||||
let dt = {
|
||||
columnName: 'qty' + (i+1).toString().padStart(2, '0'),
|
||||
value: nowPlanData['data'][i],
|
||||
// targetRowNum: this.rowGrid2SelectData[1].rowKey,
|
||||
rowKey: this.rowGrid2SelectData[1].rowKey,
|
||||
rowEditingFg : true
|
||||
}
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
|
||||
}
|
||||
|
||||
let rowGrid2SelectData = this.rowGrid2SelectData;
|
||||
let newRowGrid2SelectData = rowGrid2SelectData.map(item => {
|
||||
qtyList.map(obj => {
|
||||
if(item.gubun == '2PLAN'){
|
||||
item[obj] = nowPlanData['data'][qtyDict[obj]];
|
||||
}else{
|
||||
item[obj] = nowPastData['data'][qtyDict[obj]];
|
||||
}
|
||||
})
|
||||
return item;
|
||||
|
||||
})
|
||||
|
||||
this.setPageData({rowGrid2SelectData: newRowGrid2SelectData});
|
||||
|
||||
},
|
||||
closePop(){
|
||||
this.dialog = false;
|
||||
this.setPageData({popupDialogFg : false});
|
||||
this.selectValue01 = this.selectValueList01[0].value;
|
||||
this.selectValue02 = this.selectValueList02[0].value;
|
||||
this.nowSeriesData = [];
|
||||
this.nowModalChartData = [];
|
||||
},
|
||||
async setChart(){
|
||||
this.loadChart = false;
|
||||
let xAxisData = [];
|
||||
let seriesData = [];
|
||||
let data = [];
|
||||
data = this.nowModalChartData;
|
||||
let targetMonthList = [];
|
||||
let _this = this;
|
||||
let tooltipData = {
|
||||
trigger:'axis',
|
||||
confine: true,
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
// valueFormatter: (value) => '$' +parseFloat(value).toFixed()
|
||||
formatter: function(params){
|
||||
var toolTipTitle = params[0].name[0];
|
||||
let res = "<div style='margin: 0px 0 0;line-height:1;'><div style='font-size:14px;color:#666;font-weight:400;line-height:1;'>"+toolTipTitle+"</div>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
let tempVal = parseFloat(params[i].value);
|
||||
if(Number.isFinite(tempVal)){
|
||||
tempVal = tempVal.toFixed();
|
||||
}else{
|
||||
if(!isNaN(tempVal)){
|
||||
tempVal = 0;
|
||||
}
|
||||
}
|
||||
res += "<div style='margin: 10px 0 0;line-height:1;'><div style='margin: 0px 0 0;line-height:1;'>"
|
||||
+"<span style='font-size:14px;color:#666;font-weight:400;margin-left:2px'>"+ params[i].marker
|
||||
+ " "+params[i].seriesName+" "
|
||||
+"</span>"
|
||||
+"<span style='float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900'>"
|
||||
+ _this.numberFormatter(tempVal)
|
||||
+"</b></span>"
|
||||
+"</div><div style='clear:both'></div></div>";
|
||||
}
|
||||
res += "</div>"
|
||||
return res;
|
||||
}
|
||||
}
|
||||
|
||||
for(var i=1; i<=12; i++){
|
||||
let qty = 'qty' + i.toString().padStart(2, '0');
|
||||
targetMonthList.push(qty);
|
||||
xAxisData.push(i);
|
||||
}
|
||||
// data = data.map(item => ({
|
||||
// ...item,
|
||||
// qty01: Math.floor(Math.random()*100),
|
||||
// qty02: Math.floor(Math.random()*100),
|
||||
// qty03: Math.floor(Math.random()*100),
|
||||
// qty07: Math.floor(Math.random()*100)
|
||||
// }));
|
||||
seriesData = data.map(item => ({
|
||||
name: item.gubun == '2PLAN' ? '계획' : '전년실적',
|
||||
type: item.gubun == '2PLAN' ? 'line' : 'bar',
|
||||
data: targetMonthList.map(obj => item[obj] || null)
|
||||
// data: targetMonthList.map(obj => item[obj] || 0)
|
||||
}));
|
||||
this.nowSeriesData = seriesData;
|
||||
// xAxisData = myKey.map(obj => obj.header);
|
||||
|
||||
let option = {
|
||||
grid: {
|
||||
top: "3%",
|
||||
},
|
||||
xAxis:{
|
||||
type: 'category',
|
||||
data: xAxisData
|
||||
},
|
||||
yAxis:{
|
||||
type:'value',
|
||||
// name: this.unitMapper[this.pageData.energyCd],
|
||||
nameLocation : 'middle',
|
||||
nameGap :45
|
||||
},
|
||||
legend: {
|
||||
},
|
||||
series: seriesData,
|
||||
tooltip: tooltipData
|
||||
};
|
||||
// console.log('option', option);
|
||||
await this.$nextTick(() => {
|
||||
|
||||
});
|
||||
this.setModalChartOption(
|
||||
{
|
||||
prgmId: this.$route.query.prgmId,
|
||||
chartKey: this.chartName,
|
||||
modalId: this.modalId,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: option,
|
||||
}
|
||||
);
|
||||
this.loadChart = true;
|
||||
// this.setModalChartTooltip(
|
||||
// {
|
||||
// prgmId: this.$route.query.prgmId,
|
||||
// chartKey: this.chartName,
|
||||
// modalId: this.modalId,
|
||||
// modalDataKey: this.modalDataKey,
|
||||
// value: tooltipData
|
||||
// }
|
||||
// );
|
||||
|
||||
},
|
||||
search() {
|
||||
// this.setChart();
|
||||
this.setSeriesData();
|
||||
},
|
||||
async setSeriesData(){
|
||||
this.loadChart = false;
|
||||
let targetMonth = this.selectValue01;
|
||||
let targetRatio = (100-this.selectValue02)/100;
|
||||
let nowSeriesData = this.nowSeriesData;
|
||||
let seriesData = [];
|
||||
let sData = [];
|
||||
let sData2 = [];
|
||||
sData = nowSeriesData.filter(item => {
|
||||
return item.name == '전년실적';
|
||||
})[0]['data'];
|
||||
sData2 = nowSeriesData.filter(item => {
|
||||
return item.name == '계획';
|
||||
})[0]['data'];
|
||||
// console.log('sData1', sData);
|
||||
if(targetMonth.includes('qty')){
|
||||
targetMonth = parseInt(targetMonth.slice(-2));
|
||||
}
|
||||
for(var i=0; i<sData.length; i++){
|
||||
if(targetMonth == 'all' || i+1 == targetMonth){
|
||||
sData2[i] = sData[i] * targetRatio;
|
||||
}
|
||||
}
|
||||
// console.log('sData2', sData2);
|
||||
seriesData = nowSeriesData.map(item => ({
|
||||
...item,
|
||||
data: item.name == '계획' ? sData2 : item.data
|
||||
}));
|
||||
|
||||
// console.log('seriesData', seriesData);
|
||||
await this.$nextTick(() => {
|
||||
|
||||
});
|
||||
this.setModalChartSeries(
|
||||
{
|
||||
prgmId: this.$route.query.prgmId,
|
||||
chartKey: this.chartName,
|
||||
modalId: this.modalId,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: seriesData,
|
||||
}
|
||||
);
|
||||
this.loadChart = true;
|
||||
this.nowSeriesData = seriesData;
|
||||
},
|
||||
numberFormatter(value) {
|
||||
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
let modifyEnrgUsePlanModalDataKey =
|
||||
{
|
||||
modifyEnrgUsePlanChart: Utility.defaultChartOption(true)
|
||||
};
|
||||
// 전력량 요금(원/kWh)
|
||||
</script>
|
||||
Reference in New Issue
Block a user