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

update screen 2, 8, 9, 10, 27, 33, 34

Browse Source
This commit is contained in:
leonard
2025-07-28 16:12:24 +07:00
parent 117e0adeb9
commit c3d01c998c
26 changed files with 177 additions and 1957 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
pages/ems/effc/EnrgUsePlanPage.vue
View File

@ -1,5 +1,6 @@
<template>
<div ref="mainDiv" class="l-layout">
<common-page-title />
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
@ -9,20 +10,20 @@
</v-col>
<v-col :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01" :itemList="selectValueList01"
:label="'FAB'" @update:propsValue="selectValue01 = $event" :iconShow="false" />
:label="'FAB'" @update:propsValue="selectValue01 = $event" :iconShow="false" customClass="select-large" />
</v-col>
<v-col :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02" :itemList="selectValueList02"
:label="'설비종류'" @update:propsValue="selectValue02 = $event" :iconShow="false" />
:label="'설비종류'" @update:propsValue="selectValue02 = $event" :iconShow="false" customClass="select-large"/>
</v-col>
<v-col :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox3" :propsValue="selectValue03" :itemList="selectValueList03"
:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :iconShow="false" />
:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :iconShow="false" customClass="select-large" />
</v-col>
<BtnSearch @click="search" />
<v-col>
</v-col>
<BtnSearch size="large" @click="search" />
<!-- <v-col>
</v-col> -->
<component ref="EnrgUsePlanModiPop" :is="'EnrgUsePlanModiPop'" :label="'test'" :parentPrgmId="myPrgmId"
@gridEditingFinish="gridEditingFinish" />
</v-row>
@ -30,18 +31,15 @@
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="12" style="height: 100%">
<v-card class="pb-5 h100">
<v-col :cols="12" >
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0 custom-title-4">설비별 에너지 계획 리스트</v-card-title>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
</div>
<div class="h100 px-5" style="height:calc(100% - 70px)">
<div ref="gridParent" class="w100 h100">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
:editorGrid="true" @getRowsData="getRowData" :dataPath="dataPathMock" />
</div>
<div ref="gridParent" class="px-5" style="min-height: 60vh;">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
:editorGrid="true" @getRowsData="getRowData" />
</div>
</v-card>
</v-col>
@ -171,8 +169,8 @@ export default {
created() { },
async mounted() {
// -------
this.initTest();
return;
// this.initTest();
// return;
// ========End test===========
await this.init();
this.initedFlag = true;
@ -420,53 +418,25 @@ export default {
class CustumButton {
constructor(props) {
// v-btn v-btn--is-elevated v-btn--has-bg theme--dark v-size--default
const el = document.createElement('button');
const { grid, rowKey, columnInfo } = props;
$(el).addClass('tui-grid-cell-content');
// $(el).css('text-align', 'center');
el.classList.add('v-btn');
// el.style.width = '80%';
// el.style.height = '80%';
// el.style.boxShadow = '0px 0px 0px 2px #cbced6';
// el.style.background = 'linear-gradient(to bottom, #242940 5%, #476e9e 100%)';
// el.style.backgroundColor = '#144985';
el.style.borderRadius = '7px';
el.style.border = '1px solid #4e6096';
// el.style.display = 'inline-block';
// el.style.cursor = 'pointer';
el.style.color = '#ffffff';
// el.style.fontFamily = 'Arial';
el.style.padding = '6% 3%';
const gridData = grid.store.data.rawData;
const value = gridData[rowKey][columnInfo.name];
// el.style.textDecoration = 'none';
// el.style.textShadow = '0px 1px 0px #283966';
el.innerText = columnInfo.renderer.options.value;
this.el = el;
this.disabled = columnInfo.renderer.options.disabled || false;
const elDiv = document.createElement('div');
elDiv.innerHTML = `<span>${value}</span>`;
$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
const el2 = document.createElement('button');
$(el2).addClass('edit-btn blue--text');
el2.innerText = 'Edit';
elDiv.appendChild(el2);
this.el = elDiv;
if (!this.disabled) {
// hover 기능 구현
this.el.addEventListener('mouseover', function (event) {
// console.log('darkModeFg', _this.darkModeFg);
// console.log('event',event.fromElement);
// console.log('event',document.defaultView.getComputedStyle(el).getPropertyValue('background-color'));
// rgb(85, 130, 220) // light
// el.style.backgroundColor = '#26578F'; // rgb(20, 73, 133) // dark
// let btnColor = _this.darkModeFg? {mouseOver: '#26578F', mouseOut: '#144985'} : {mouseOver: 'rgb(85, 130, 220)', mouseOut: 'rgb(71, 119, 217)'};
// el.style.backgroundColor = btnColor['mouseOver'];
});
this.el.addEventListener('mouseout', function (event) {
// rgb(71, 119, 217) // light
// el.style.backgroundColor = '#144985'; // dark
// console.log('event',event.fromElement);
// let btnColor = _this.darkModeFg? {mouseOver: '#26578F', mouseOut: '#144985'} : {mouseOver: 'rgb(85, 130, 220)', mouseOut: 'rgb(71, 119, 217)'};
// el.style.backgroundColor = btnColor['mouseOut'];
});
// click 이벤트
this.el.addEventListener('click', function (event) {
el2.addEventListener('click', function (event) {
let gridData = grid.store.data.rawData;
let rowNum = gridData[rowKey].rowNum;
let selectedGridData = gridData.filter(item => {
@ -537,18 +507,25 @@ export default {
minWidth: 200,
align: 'left',
// hidden: true,
formatter: ({ value, row }) => {
return `
<span>${value}</span>
<button class="edit-btn" data-row='${JSON.stringify(row)}'>Edit</button>
`;
}
// formatter: ({ value, row }) => {
// return `
// <span>${value}</span>
// <button class="edit-btn" data-row='${JSON.stringify(row)}'>Edit</button>
// `;
// }
renderer: {
type: CustumButton,
options: {
value: '계획수정',
},
},
},
{
header: '',
name: 'btnCol',
width: 70,
align: 'center',
hidden: true,
renderer: {
type: CustumButton,
options: {