init dev-push code ui base design
This commit is contained in:
leonard
@ -1,127 +1,81 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<PageTitle text="효율성 지표 보고서" />
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-row align="start" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'설비종류'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01" :label="'설비종류'"
|
||||
@update:propsValue="selectValue01 = $event" :textCols="12" customClass="select-large" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비그룹 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'설비그룹'"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" :propsValue="selectValue02" :itemList="selectValueList02" :label="'설비그룹'"
|
||||
@update:propsValue="selectValue02 = $event" :textCols="12" customClass="select-large" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<!-- FAB -->
|
||||
<component
|
||||
ref="fabSelect"
|
||||
:is="'SelectBoxMulti'"
|
||||
:propsValue="selectValue03"
|
||||
:itemList="selectValueList03"
|
||||
:label="'FAB'"
|
||||
:multiple="fabMultiple"
|
||||
@update:propsValue="selectValue03 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="3" class="text-right">
|
||||
<!-- 조회버튼 -->
|
||||
<v-btn class="d-inline-flex" @click="createExcel()">엑셀</v-btn>
|
||||
<BtnSearch @click="search" />
|
||||
<component ref="fabSelect" :is="'SelectBoxMulti'" :propsValue="selectValue03"
|
||||
:itemList="selectValueList03" :label="'FAB'" :multiple="fabMultiple"
|
||||
@update:propsValue="selectValue03 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<!-- 효율지표 -->
|
||||
<component
|
||||
ref="effcIdxSelect"
|
||||
:is="'SelectBoxMulti'"
|
||||
:propsValue="selectValue04"
|
||||
:itemList="selectValueList04"
|
||||
:label="'효율지표'"
|
||||
:multiple="effcIdxMultiple"
|
||||
@update:propsValue="selectValue04 = $event"
|
||||
/>
|
||||
<component ref="effcIdxSelect" :is="'SelectBoxMulti'" :propsValue="selectValue04"
|
||||
:itemList="selectValueList04" :label="'효율지표'" :multiple="effcIdxMultiple"
|
||||
@update:propsValue="selectValue04 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<v-col :cols="3">
|
||||
<!-- 대상일 -->
|
||||
<component
|
||||
:is="'Datepicker'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'대상일'"
|
||||
:labelCols="3"
|
||||
/>
|
||||
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="text-right d-flex align-end justify-end align-self-end">
|
||||
<!-- 조회버튼 -->
|
||||
<a-button type="primary" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
|
||||
<BtnSearch @click="search" size="large" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents">
|
||||
<v-col :cols="12" style="height: 50%">
|
||||
<v-card class="pb-5 v-card v-sheet theme--dark">
|
||||
<v-row ref="contents-rm" >
|
||||
<v-col :cols="12" style="min-height: 50vh">
|
||||
<v-card class="pb-5 v-card v-sheet">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">설비그룹 효율지표 Trend</v-card-title>
|
||||
</div>
|
||||
<div ref="chartParent" style="height: 80%">
|
||||
<component
|
||||
:ref="chartName01"
|
||||
class="w100 h100"
|
||||
:is="loadChart01 ? 'Chart' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:chartName="chartName01"
|
||||
/>
|
||||
<div ref="chartParent" style="height: 100%">
|
||||
<component :ref="chartName01" class="w100 h100" :is="loadChart01 ? 'Chart' : null" :parentPrgmId="myPrgmId"
|
||||
:chartName="chartName01" />
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col :cols="12" style="height: 50%">
|
||||
<v-card class="pb-5 v-card v-sheet theme--dark">
|
||||
<v-col :cols="12" style="min-height: 50vh">
|
||||
<v-card class="pb-5 v-card v-sheet">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-row>
|
||||
<v-row class="justify-space-between">
|
||||
<v-col :cols="3">
|
||||
<v-card-title class="pa-0">설비별 효율지표 Trend</v-card-title>
|
||||
</v-col>
|
||||
<v-col :cols="5"></v-col>
|
||||
<v-col :cols="3">
|
||||
<component
|
||||
class="text-right"
|
||||
ref="EqpmSelectPop"
|
||||
:is="'EqpmSelectPop'"
|
||||
:label="'설비'"
|
||||
:labelCols="1"
|
||||
:textCols="10"
|
||||
:valueNm="'eqpmId'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:eqpmGrpDisabled="true"
|
||||
:fabDisabled="true"
|
||||
:iconShow="false"
|
||||
:isMulti="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<v-btn @click="getEqpmData()">조회</v-btn>
|
||||
<!-- <v-col :cols="5"></v-col> -->
|
||||
<v-col :cols="4" class="d-flex justify-space-end" >
|
||||
<component class="text-right mr-2" ref="EqpmSelectPop" :is="'EqpmSelectPop'" :label="''" :labelCols="1"
|
||||
:textCols="12" :valueNm="'eqpmId'" :parentPrgmId="myPrgmId" :eqpmGrpDisabled="true"
|
||||
:fabDisabled="true" :isMulti="true" />
|
||||
<a-button @click="getEqpmData()" type="primary" >조회</a-button>
|
||||
</v-col>
|
||||
<!-- <v-col :cols="1">
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
</div>
|
||||
<div ref="chartParent" style="height: 80%">
|
||||
<component
|
||||
class="w100 h100"
|
||||
:is="loadChart02 ? 'Chart' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:chartName="chartName02"
|
||||
:ref="chartName02"
|
||||
/>
|
||||
<div ref="chartParent" style="height: 100%">
|
||||
<component class="w100 h100" :is="loadChart02 ? 'Chart' : null" :parentPrgmId="myPrgmId"
|
||||
:chartName="chartName02" :ref="chartName02" />
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
@ -144,6 +98,7 @@ import Chart from '~/components/common/Chart';
|
||||
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
|
||||
import DateUtility from '~/plugins/dateUtility';
|
||||
import XLSX from 'xlsx';
|
||||
import PageTitle from "~/components/common/PageTitle";
|
||||
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
@ -175,6 +130,7 @@ export default {
|
||||
EqpmSelectPop,
|
||||
DateUtility,
|
||||
XLSX,
|
||||
PageTitle,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -308,8 +264,11 @@ export default {
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
async mounted() {
|
||||
console.log('----DEBUG---');
|
||||
await this.initTest();
|
||||
// End Debug Test---
|
||||
await this.init();
|
||||
this.initedFlag = true;
|
||||
},
|
||||
@ -328,6 +287,71 @@ export default {
|
||||
...mapActions({
|
||||
getCodeList: 'modules/search/getCodeList',
|
||||
}),
|
||||
async initTest() {
|
||||
// debug test
|
||||
console.log('----DEBUG init pages----');
|
||||
const seriesName1 = ['B01. 냉동기전력량', ' B01.COP'];
|
||||
const seriesName2 = [
|
||||
'UT_HT_CH101:냉동기전혁당', 'UT_HT_CH102:냉동기전력량', 'UT_HT_CH201:냉동기전력당',
|
||||
'UT_HT_CH202:냉동기전력당', 'UT_HT_CH101:COP', 'UT_HT_CH102:COP',
|
||||
'UT_HT _CH201:COP', 'UT_HT _CH202:COP'
|
||||
];
|
||||
|
||||
// await this.getEqpmGrpData();
|
||||
const xAxisData = [];
|
||||
const totVal = [];
|
||||
const totVa2 = [];
|
||||
for (var i = 0; i < 10; i++) {
|
||||
xAxisData.push(DateUtility.addDate(i, 'DD', this.pageData.fromDt));
|
||||
seriesName1.forEach(name => {
|
||||
totVal[name] = totVal[name] ? totVal[name] : [];
|
||||
totVal[name].push(Math.random() * 100);
|
||||
})
|
||||
seriesName2.forEach(name => {
|
||||
totVa2[name] = totVa2[name] ? totVa2[name] : [];
|
||||
totVa2[name].push(Math.random() * 100);
|
||||
})
|
||||
}
|
||||
// const seriesData = [120, 200, 150, 80, 70, 110, 130];
|
||||
|
||||
const seriesData = seriesName1.map(name => ({ name, type: 'line', data: totVal[name] }));
|
||||
const chartOption = {
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
top: 'top',
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
bottom: '20%',
|
||||
},
|
||||
yAxis: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
},
|
||||
series: seriesData,
|
||||
tooltip: {},
|
||||
// type: 'line',
|
||||
// dataZoom: dataZoom,
|
||||
};
|
||||
|
||||
// console.log('-----DEBUG test data chart----', {
|
||||
// chartOption,
|
||||
// fromDt: this.pageData.fromDt
|
||||
// });
|
||||
this.setChartOption({ chartKey: this.chartName01, value: chartOption });
|
||||
this.setChartOption({
|
||||
chartKey: this.chartName02,
|
||||
value: {
|
||||
...chartOption,
|
||||
series: seriesName2.map(name => ({ name, type: 'line', data: totVa2[name] })),
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.loadChart01 = true;
|
||||
this.loadChart02 = true;
|
||||
});
|
||||
// End debug
|
||||
},
|
||||
async init() {
|
||||
await this.getFab();
|
||||
await this.getEqpmKind();
|
||||
@ -486,7 +510,6 @@ export default {
|
||||
this.setPageData({
|
||||
chartData01: res,
|
||||
});
|
||||
|
||||
this.setChartData(res);
|
||||
},
|
||||
async getEqpmData() {
|
||||
@ -677,6 +700,7 @@ export default {
|
||||
this.loadChart01 = false;
|
||||
let xAxisData = [];
|
||||
let seriesData = [];
|
||||
|
||||
var diff = DateUtility.diff(
|
||||
this.pageData.fromDt,
|
||||
this.pageData.toDt,
|
||||
@ -744,6 +768,7 @@ export default {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
var chartOption = {
|
||||
legend: {
|
||||
top: 'top',
|
||||
@ -892,7 +917,7 @@ const defaultData = {
|
||||
defaultRange: {
|
||||
CYC_DAY: 30,
|
||||
},
|
||||
fromDt: '',
|
||||
fromDt: '20250601',
|
||||
toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
|
||||
modalData: {},
|
||||
eqpmGrpChart: Utility.defaultChartOption(true),
|
||||
|
||||
Reference in New Issue
Block a user