Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-trungvq7-0729
This commit is contained in:
dev
@ -27,7 +27,7 @@
|
||||
</v-col>
|
||||
<v-col class="text-right d-flex align-end align-self-end justify-end">
|
||||
<a-button @click="jamoviClickEvent('view')" type="primary" :ripple="false" class="mr-1"
|
||||
depressed size="large">Jamovi</a-button>
|
||||
depressed size="large">JAMOVI</a-button>
|
||||
<BtnSearch @click="search" size="large" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -283,7 +283,7 @@ export default {
|
||||
{
|
||||
header: '모델링 DataSet ID',
|
||||
name: 'dataSetId',
|
||||
align: 'center',
|
||||
align: 'left',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
|
||||
@ -21,22 +21,21 @@
|
||||
: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" :labelCols="12" :textCols="12" customClass="select-large" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<!-- 대상일 -->
|
||||
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="text-right d-flex align-end justify-end align-self-end">
|
||||
<v-col :cols="6.5" 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>
|
||||
<a-button icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
|
||||
<BtnSearch @click="search" size="large" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -62,15 +61,23 @@
|
||||
<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="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" />
|
||||
<component
|
||||
class="text-right mr-2"
|
||||
ref="EqpmSelectPop"
|
||||
label=""
|
||||
placeholder="설비..."
|
||||
is="EqpmSelectPop"
|
||||
valueNm="eqpmId"
|
||||
:textCols="12"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:eqpmGrpDisabled="true"
|
||||
:fabDisabled="true"
|
||||
:iconShow="false"
|
||||
: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: 100%">
|
||||
@ -316,6 +323,7 @@ export default {
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
top: 'top',
|
||||
size: '8'
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
|
||||
@ -104,7 +104,6 @@
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="myPrgmId"
|
||||
@dblClick="gridDoubleClickEvent"
|
||||
/>
|
||||
<!--
|
||||
<component
|
||||
@ -143,7 +142,6 @@ import SelectBox from "@/components/common/select/SelectBox";
|
||||
import SelectCmCycle from "@/components/common/select/SelectCmCycle";
|
||||
import DatePicker from "@/components/common/Datepicker";
|
||||
import Grid from "~/components/common/Grid";
|
||||
import PageTitle from "@/components/common/PageTitle";
|
||||
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
@ -170,7 +168,6 @@ export default {
|
||||
SelectCmCycle,
|
||||
DatePicker,
|
||||
Grid,
|
||||
PageTitle,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -204,6 +201,7 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData: (state) => state.pageData[myPrgmId],
|
||||
isDarkMode: "isDarkMode",
|
||||
}),
|
||||
fromDt() {
|
||||
return this.pageData.fromDt;
|
||||
@ -237,6 +235,16 @@ export default {
|
||||
await this.search();
|
||||
}
|
||||
},
|
||||
isDarkMode(newVal) {
|
||||
// Switch mode for 10 tooltips
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const tooltipEl = document.getElementById(`tooltipElement_${i}`);
|
||||
if (tooltipEl) {
|
||||
tooltipEl.classList.remove("light-mode", "dark-mode");
|
||||
tooltipEl.classList.add(newVal ? "dark-mode" : "light-mode");
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
async beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
@ -357,13 +365,79 @@ export default {
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
const _this = this;
|
||||
// Define custom button
|
||||
class CustomButton {
|
||||
constructor(props,pageData) {
|
||||
const { grid, rowKey, columnInfo } = props;
|
||||
const gridData = grid.store.data.rawData;
|
||||
const value = gridData[rowKey][columnInfo.name];
|
||||
const onClickCallback = columnInfo.renderer.options.onClick;
|
||||
|
||||
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 = '보기';
|
||||
elDiv.appendChild(el2);
|
||||
this.el = elDiv;
|
||||
if (!this.disabled && typeof onClickCallback === 'function') {
|
||||
// click 이벤트
|
||||
this.el.addEventListener('click', function(event) {
|
||||
onClickCallback(rowKey);
|
||||
});
|
||||
}
|
||||
}
|
||||
getElement() {
|
||||
return this.el;
|
||||
}
|
||||
getValue() {
|
||||
// return this.el.value;
|
||||
}
|
||||
mounted() {
|
||||
// this.el.focus();
|
||||
}
|
||||
}
|
||||
|
||||
var columnList = [
|
||||
{ header: "NO", name: "no", align: "right", width: 80 },
|
||||
{ header: "fabId", name: "fabId", hidden: true },
|
||||
{ header: "FAB", name: "fabNm", align: "left" },
|
||||
{ header: "eqpmGrpId", name: "eqpmGrpId", hidden: true },
|
||||
{ header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200 },
|
||||
{ header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200,
|
||||
// Render custom button to switch page instead of double click on row
|
||||
renderer: {
|
||||
type: CustomButton,
|
||||
options: {
|
||||
value: '보기',
|
||||
onClick: (rowKey) => {
|
||||
const gridInstance = this.$refs[this.gridName].gridInstance;
|
||||
const eventRowData = gridInstance.invoke("getRow", rowKey);
|
||||
|
||||
const data = {
|
||||
cmCycle: this.pageData.cmCycle,
|
||||
fromDt: this.pageData.fromDt,
|
||||
fabId: this.selectValue01,
|
||||
eqpmKindId: this.selectValue02,
|
||||
eqpmGrpId: this.selectValue03,
|
||||
eqpmId: eventRowData.eqpmId,
|
||||
};
|
||||
const key = "tick_" + Math.random();
|
||||
this.$router.push({
|
||||
name: "ems-effc-EnrgUseEqpmDetlMntrPage",
|
||||
query: {
|
||||
prgmId: "PRG0082",
|
||||
},
|
||||
params: {
|
||||
...data,
|
||||
key: key,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{ header: "eqpmId", name: "eqpmId", hidden: true },
|
||||
{ header: "설비명", name: "eqpmNm", align: "left", width: 200 },
|
||||
{
|
||||
@ -472,6 +546,10 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
pageOptions: {
|
||||
useClient: true,
|
||||
perPage: 3,
|
||||
}
|
||||
};
|
||||
|
||||
this.setGridOption({
|
||||
@ -693,53 +771,83 @@ function numberFormatter({ value }) {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@for $i from 0 through 9 {
|
||||
#gridParent > * {
|
||||
// .tui-grid-content-area{
|
||||
background-color: red;
|
||||
color: red;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
#tooltipTargetElement_#{$i} {
|
||||
overflow: visible;
|
||||
position: relative; // 테스트3번쨰
|
||||
white-space: nowrap; // 테스트3번쨰
|
||||
}
|
||||
#tooltipElement_#{$i} {
|
||||
display: none;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
#tooltipTargetElement_#{$i}:hover #tooltipElement_#{$i} {
|
||||
display: block;
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
bottom: 30px;
|
||||
z-index: 1000000000;
|
||||
align: "center";
|
||||
color: #f2f2f2;
|
||||
background-color: #7f7f7f;
|
||||
// width : 77px;
|
||||
width: 200%;
|
||||
left: -50%;
|
||||
border-radius: 3px;
|
||||
word-break: keep-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.tui-grid-rside-area {
|
||||
display: none;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.tui-grid-header-area {
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
::v-deep {
|
||||
@for $i from 0 through 9 {
|
||||
#gridParent > * {
|
||||
// .tui-grid-content-area{
|
||||
background-color: red;
|
||||
color: red;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
#tooltipTargetElement_#{$i} {
|
||||
overflow: visible;
|
||||
position: relative; // 테스트3번쨰
|
||||
white-space: nowrap; // 테스트3번쨰
|
||||
}
|
||||
#tooltipElement_#{$i} {
|
||||
display: none;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
#tooltipTargetElement_#{$i}:hover #tooltipElement_#{$i} {
|
||||
display: block;
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
bottom: 40px;
|
||||
z-index: 1000000000;
|
||||
align: "center";
|
||||
color: #f2f2f2;
|
||||
background-color: #000000d9;
|
||||
// width : 77px;
|
||||
width: 200%;
|
||||
left: -50%;
|
||||
border-radius: 4px;
|
||||
padding: 6px 0px;
|
||||
word-break: keep-all;
|
||||
white-space: pre-wrap;
|
||||
// Light mode
|
||||
&.light-mode {
|
||||
background-color: #000000d9;
|
||||
}
|
||||
// Dark mode
|
||||
&.dark-mode {
|
||||
background-color: #424242;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
border-width: 6px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&.light-mode::after {
|
||||
border-color: #000000d9 transparent transparent transparent;
|
||||
}
|
||||
|
||||
&.dark-mode::after {
|
||||
border-color: #424242 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-rside-area {
|
||||
display: none;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.tui-grid-header-area {
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user