gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

init dev-push code ui base design

Browse Source
This commit is contained in:
leonard
2025-07-22 09:58:38 +07:00
parent ffdf5ccb66
commit eedbf94d56
214 changed files with 42170 additions and 28040 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
components/common/modal/EnrgUsePlanModiPop.vue
View File

@ -9,10 +9,15 @@
scrollable
>
<v-card style="height: 100%">
<v-card-title class="pa-5 pb-0 d-flex align-center justify-space-between">
<span class="custom-title-4">사용량 계획</span>
<v-icon @click="closePop()">mdi-close</v-icon>
</v-card-title>
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col :cols="4">
<v-col :cols="4.5">
<InputText
:parentPrgmId="parentPrgmId"
:label="'설비명'"
@ -20,18 +25,43 @@
:readonly="true"
/>
</v-col>
<v-col :cols="2">
</v-row>
<v-row align="end" no-gutters class="mt-4 d-flex justify-center">
<v-col :cols="5.5" class="mr-2">
<component
:is="'SelectBox'"
ref="SelectBox1"
:labelCols='12'
:textCols='12'
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'대상월'"
@update:propsValue="selectValue01 = $event"
/>
</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 :cols="5.5" class="mr-2">
<component
:is="'SelectBox'"
ref="SelectBox2"
:labelCols='12'
:textCols='12'
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'전년대비절감율'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<a-button color="primary" dark @click="search()" icon="clock-circle" >
<!-- <template #icon>
<ClockCircleOutlined />
</template> -->
적용
</a-button>
<!-- <v-col :cols="2" class="text-right">
</v-col> -->
</v-row>
</div>
<v-divider></v-divider>
<!-- <v-divider></v-divider> -->
<!-- <div id="chartParent" ref="chartParent" style="height: 100px"> -->
<div :style="'height: calc(50vh)'">
@ -50,37 +80,8 @@
: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>
<!-- <v-divider></v-divider> -->
<!-- <div style="height: 20%; margin: auto; width: 90%; display: flex; align-items: center;"> -->
<!-- <div style="height: 70%; width:10%; float: left; border: 1px solid blue; background-color: #A2A2A2">
설정
</div>
@ -97,8 +98,6 @@
</v-col>
</v-row>
</div> -->
<!-- <v-row align="center" no-gutters>
<v-row
:cols="12"
@ -115,7 +114,7 @@
<v-btn color="primary" dark @click="setChart()">적용</v-btn>
</v-col>
</v-row> -->
</div>
<!-- </div> -->
</div>
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
@ -132,9 +131,9 @@
</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 class="pa-5 d-flex align-center justify-end">
<a-button color="primary" type="default" class="mr-2" dark @click="closePop()">취소</a-button>
<a-button color="primary" type="primary" dark @click="setUpdate()">확정</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -196,7 +195,7 @@ export default {
selectCodeList,
InputText,
Chart,
SelectBox
SelectBox,
// Tree
},
data() {
@ -318,6 +317,9 @@ export default {
// });
// }
},
mounted(){
this.initTest(); return;
},
methods: {
...mapMutations({
setPageData: 'setPageData',
@ -329,6 +331,7 @@ export default {
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.setChart();
},
@ -406,7 +409,79 @@ export default {
this.nowSeriesData = [];
this.nowModalChartData = [];
},
async initTestChart(){
this.loadChart = false;
let xAxisData = [];
let seriesData = [];
let data = [];
let targetMonthList = [];
let _this = this;
const dataItemLine = []; // { gubun: '2PLAN' };
const dataItemBar = []; //{ gubun: '1PLAN' };
const getRanNum = (n) => Math.floor(Math.random()*n + 1);
for(var i=1; i<=12; i++){
let qty = 'qty' + i.toString().padStart(2, '0');
targetMonthList.push(qty);
xAxisData.push(i);
dataItemLine.push(getRanNum(100));
dataItemBar.push(getRanNum(100));
}
data = [
{gubun: '1PLAN'}, {gubun: '2PLAN'},
];
seriesData = data.map(item => ({
name: item.gubun == '2PLAN' ? '계획' : '전년실적',
type: item.gubun == '2PLAN' ? 'line' : 'bar',
data: item.gubun == '2PLAN' ? dataItemLine : dataItemBar
}));
this.nowSeriesData = seriesData;
let option = {
grid: {
top: "3%",
},
xAxis:{
type: 'category',
data: xAxisData
},
yAxis:{
type:'value',
nameLocation : 'middle',
nameGap :45
},
legend: {
icon: 'circle',
},
series: seriesData,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
}
};
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.$nextTick(() => {
// })
},
async setChart(){
// test
this.initTestChart(); return;
// end test
this.loadChart = false;
let xAxisData = [];
let seriesData = [];