init dev-push code ui base design
This commit is contained in:
leonard
File diff suppressed because it is too large
Load Diff
@ -6,126 +6,82 @@
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'FAB'"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" :propsValue="selectValue02" :itemList="selectValueList02"
|
||||
:label="'FAB'" @update:propsValue="selectValue02 = $event" :labelCols="12"
|
||||
:textCols="12" :customClass="'select-large'" />
|
||||
</v-col>
|
||||
<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" :labelCols="12"
|
||||
:textCols="12" :customClass="'select-large'" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue03"
|
||||
:itemList="selectValueList03"
|
||||
:label="'설비그룹'"
|
||||
@update:propsValue="selectValue03 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" :propsValue="selectValue03" :itemList="selectValueList03"
|
||||
:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :labelCols="12"
|
||||
:textCols="12" :customClass="'select-large'" />
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<v-col :cols="3">
|
||||
<!-- 평가 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue06"
|
||||
:itemList="selectValueList06"
|
||||
:label="'평가'"
|
||||
@update:propsValue="selectValue06 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" :propsValue="selectValue06" :itemList="selectValueList06"
|
||||
:label="'평가'" @update:propsValue="selectValue06 = $event" :labelCols="12" :textCols="12"
|
||||
:customClass="'select-large'" />
|
||||
</v-col>
|
||||
|
||||
<v-col :cols="1" class="text-right">
|
||||
<!-- 조회버튼 -->
|
||||
<BtnSearch @click="search" />
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters>
|
||||
<v-row align="end" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component
|
||||
ref="EqpmSelectPop"
|
||||
:is="'EqpmSelectPop'"
|
||||
:label="'설비'"
|
||||
:valueNm="'eqpmNm'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:eqpmGrpDisabled="true"
|
||||
:fabDisabled="true"
|
||||
:textCols="8"
|
||||
:isMulti="true"
|
||||
/>
|
||||
<component ref="EqpmSelectPop" :is="'EqpmSelectPop'" :label="'설비'" :valueNm="'eqpmNm'"
|
||||
:parentPrgmId="myPrgmId" :eqpmGrpDisabled="true" :fabDisabled="true" :isMulti="true"
|
||||
:labelCols="12" :textCols="12" :customClass="'input-large'" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:propsValue="selectValue05"
|
||||
:itemList="selectValueList05"
|
||||
:label="'가이드명'"
|
||||
@update:propsValue="selectValue05 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue05"
|
||||
:itemList="selectValueList05" :label="'가이드명'"
|
||||
@update:propsValue="selectValue05 = $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="12"
|
||||
:textCols="12" :customClass="'input-large'" />
|
||||
</v-col>
|
||||
<v-col :cols="3" class="text-right">
|
||||
<!-- 조회버튼 -->
|
||||
<BtnSearch @click="search" size="large" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents">
|
||||
<v-row ref="contents" class="pt-3">
|
||||
<v-col :cols="12" style="height: 100%">
|
||||
<v-card class="pb-5">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<div class="d-flex align-center justify-space-between pa-4">
|
||||
<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
|
||||
</div>
|
||||
<div class="px-5" style="height:calc(100% - 76px)">
|
||||
<div class="px-4" style="height:calc(100% - 76px)">
|
||||
<div ref="gridParent" class="w100 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:columnClickEventFlag="true"
|
||||
@columnClick="columnClick"
|
||||
/>
|
||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
|
||||
:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick"
|
||||
:dataPath="dataPathExample" />
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<component
|
||||
ref="EnrgEffcEqpmDetailPop"
|
||||
:is="'EnrgEffcEqpmDetailPop'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
/>
|
||||
<component
|
||||
ref="EnrgEffcGdIdxDetPop"
|
||||
:is="'EnrgEffcGdIdxDetPop'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
/>
|
||||
<component ref="EnrgEffcEqpmDetailPop" :is="'EnrgEffcEqpmDetailPop'" :parentPrgmId="myPrgmId" />
|
||||
<component ref="EnrgEffcGdIdxDetPop" :is="'EnrgEffcGdIdxDetPop'" :parentPrgmId="myPrgmId" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
import { mapActions } from 'vuex';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import Buttons from '~/components/common/button/Buttons';
|
||||
@ -185,8 +141,442 @@ export default {
|
||||
selectValueList05: [],
|
||||
selectValueList06: [],
|
||||
initedFlag: false,
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'rowGrid',
|
||||
dataPathExample: {
|
||||
"rowGrid": {
|
||||
data: [
|
||||
{
|
||||
"no": 1,
|
||||
"fabNm": "B02",
|
||||
"eqpmGrpNm": "ETCH Group",
|
||||
"eqpmId": "EQ028",
|
||||
"eqpmNm": "DEP D78",
|
||||
"gdIdxId": "GD004",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
"careStndVal": 34,
|
||||
"warnStndVal": 56,
|
||||
"totVal": 30,
|
||||
"okFg": "주의",
|
||||
"gdMeth": "Adjust pad pressure",
|
||||
"ngCnt": 0
|
||||
},
|
||||
{
|
||||
"no": 2,
|
||||
"fabNm": "C01",
|
||||
"eqpmGrpNm": "DEP Group",
|
||||
"eqpmId": "EQ003",
|
||||
"eqpmNm": "PHOTO P34",
|
||||
"gdIdxId": "GD028",
|
||||
"gdIdxNm": "Exposure Time Guide",
|
||||
"careStndVal": 40,
|
||||
"warnStndVal": 53,
|
||||
"totVal": 48,
|
||||
"okFg": "주의",
|
||||
"gdMeth": "Tune RF power",
|
||||
"ngCnt": 7
|
||||
},
|
||||
{
|
||||
"no": 3,
|
||||
"fabNm": "C01",
|
||||
"eqpmGrpNm": "CMP Group",
|
||||
"eqpmId": "EQ012",
|
||||
"eqpmNm": "CMP C56",
|
||||
"gdIdxId": "GD016",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
"careStndVal": 31,
|
||||
"warnStndVal": 34,
|
||||
"totVal": 44,
|
||||
"okFg": "양호",
|
||||
"gdMeth": "Change exposure time",
|
||||
"ngCnt": 6
|
||||
},
|
||||
{
|
||||
"no": 4,
|
||||
"fabNm": "D01",
|
||||
"eqpmGrpNm": "ETCH Group",
|
||||
"eqpmId": "EQ016",
|
||||
"eqpmNm": "ETCH E12",
|
||||
"gdIdxId": "GD004",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
"careStndVal": 33,
|
||||
"warnStndVal": 40,
|
||||
"totVal": 56,
|
||||
"okFg": "주의",
|
||||
"gdMeth": "Modify gas flow",
|
||||
"ngCnt": 2
|
||||
},
|
||||
{
|
||||
"no": 5,
|
||||
"fabNm": "C01",
|
||||
"eqpmGrpNm": "DEP Group",
|
||||
"eqpmId": "EQ004",
|
||||
"eqpmNm": "CMP C56",
|
||||
"gdIdxId": "GD008",
|
||||
"gdIdxNm": "Deposition Rate Guide",
|
||||
"careStndVal": 33,
|
||||
"warnStndVal": 44,
|
||||
"totVal": 20,
|
||||
"okFg": "주의",
|
||||
"gdMeth": "Adjust pad pressure",
|
||||
"ngCnt": 7
|
||||
},
|
||||
{
|
||||
"no": 6,
|
||||
"fabNm": "B01",
|
||||
"eqpmGrpNm": "DEP Group",
|
||||
"eqpmId": "EQ019",
|
||||
"eqpmNm": "ETCH E12",
|
||||
"gdIdxId": "GD014",
|
||||
"gdIdxNm": "Polish Rate Guide",
|
||||
"careStndVal": 34,
|
||||
"warnStndVal": 38,
|
||||
"totVal": 46,
|
||||
"okFg": "양호",
|
||||
"gdMeth": "Modify gas flow",
|
||||
"ngCnt": 1
|
||||
},
|
||||
{
|
||||
"no": 7,
|
||||
"fabNm": "D01",
|
||||
"eqpmGrpNm": "ETCH Group",
|
||||
"eqpmId": "EQ024",
|
||||
"eqpmNm": "ETCH E12",
|
||||
"gdIdxId": "GD008",
|
||||
"gdIdxNm": "Exposure Time Guide",
|
||||
"careStndVal": 37,
|
||||
"warnStndVal": 51,
|
||||
"totVal": 24,
|
||||
"okFg": "경고",
|
||||
"gdMeth": "Modify gas flow",
|
||||
"ngCnt": 10
|
||||
},
|
||||
{
|
||||
"no": 8,
|
||||
"fabNm": "D01",
|
||||
"eqpmGrpNm": "DEP Group",
|
||||
"eqpmId": "EQ014",
|
||||
"eqpmNm": "DEP D78",
|
||||
"gdIdxId": "GD023",
|
||||
"gdIdxNm": "Deposition Rate Guide",
|
||||
"careStndVal": 22,
|
||||
"warnStndVal": 49,
|
||||
"totVal": 43,
|
||||
"okFg": "주의",
|
||||
"gdMeth": "Change exposure time",
|
||||
"ngCnt": 6
|
||||
},
|
||||
{
|
||||
"no": 9,
|
||||
"fabNm": "C01",
|
||||
"eqpmGrpNm": "DEP Group",
|
||||
"eqpmId": "EQ001",
|
||||
"eqpmNm": "ETCH E12",
|
||||
"gdIdxId": "GD022",
|
||||
"gdIdxNm": "Polish Rate Guide",
|
||||
"careStndVal": 20,
|
||||
"warnStndVal": 24,
|
||||
"totVal": 51,
|
||||
"okFg": "경고",
|
||||
"gdMeth": "Modify gas flow",
|
||||
"ngCnt": 9
|
||||
},
|
||||
{
|
||||
"no": 10,
|
||||
"fabNm": "D01",
|
||||
"eqpmGrpNm": "CMP Group",
|
||||
"eqpmId": "EQ027",
|
||||
"eqpmNm": "ETCH E12",
|
||||
"gdIdxId": "GD002",
|
||||
"gdIdxNm": "Deposition Rate Guide",
|
||||
"careStndVal": 27,
|
||||
"warnStndVal": 46,
|
||||
"totVal": 60,
|
||||
"okFg": "양호",
|
||||
"gdMeth": "Modify gas flow",
|
||||
"ngCnt": 4
|
||||
},
|
||||
{
|
||||
"no": 11,
|
||||
"fabNm": "C01",
|
||||
"eqpmGrpNm": "PHOTO Group",
|
||||
"eqpmId": "EQ004",
|
||||
"eqpmNm": "CMP C56",
|
||||
"gdIdxId": "GD025",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
"careStndVal": 30,
|
||||
"warnStndVal": 58,
|
||||
"totVal": 28,
|
||||
"okFg": "경고",
|
||||
"gdMeth": "Modify gas flow",
|
||||
"ngCnt": 3
|
||||
},
|
||||
{
|
||||
"no": 12,
|
||||
"fabNm": "D01",
|
||||
"eqpmGrpNm": "ETCH Group",
|
||||
"eqpmId": "EQ022",
|
||||
"eqpmNm": "ETCH E12",
|
||||
"gdIdxId": "GD024",
|
||||
"gdIdxNm": "Polish Rate Guide",
|
||||
"careStndVal": 27,
|
||||
"warnStndVal": 42,
|
||||
"totVal": 62,
|
||||
"okFg": "양호",
|
||||
"gdMeth": "Adjust pad pressure",
|
||||
"ngCnt": 0
|
||||
},
|
||||
{
|
||||
"no": 13,
|
||||
"fabNm": "C01",
|
||||
"eqpmGrpNm": "ETCH Group",
|
||||
"eqpmId": "EQ018",
|
||||
"eqpmNm": "PHOTO P34",
|
||||
"gdIdxId": "GD013",
|
||||
"gdIdxNm": "Exposure Time Guide",
|
||||
"careStndVal": 32,
|
||||
"warnStndVal": 35,
|
||||
"totVal": 62,
|
||||
"okFg": "양호",
|
||||
"gdMeth": "Change exposure time",
|
||||
"ngCnt": 5
|
||||
},
|
||||
{
|
||||
"no": 14,
|
||||
"fabNm": "D01",
|
||||
"eqpmGrpNm": "CMP Group",
|
||||
"eqpmId": "EQ017",
|
||||
"eqpmNm": "DEP D78",
|
||||
"gdIdxId": "GD005",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
"careStndVal": 36,
|
||||
"warnStndVal": 47,
|
||||
"totVal": 39,
|
||||
"okFg": "경고",
|
||||
"gdMeth": "Tune RF power",
|
||||
"ngCnt": 10
|
||||
},
|
||||
{
|
||||
"no": 15,
|
||||
"fabNm": "D01",
|
||||
"eqpmGrpNm": "DEP Group",
|
||||
"eqpmId": "EQ025",
|
||||
"eqpmNm": "DEP D78",
|
||||
"gdIdxId": "GD028",
|
||||
"gdIdxNm": "Deposition Rate Guide",
|
||||
"careStndVal": 36,
|
||||
"warnStndVal": 59,
|
||||
"totVal": 63,
|
||||
"okFg": "양호",
|
||||
"gdMeth": "Adjust pad pressure",
|
||||
"ngCnt": 1
|
||||
},
|
||||
{
|
||||
"no": 16,
|
||||
"fabNm": "B02",
|
||||
"eqpmGrpNm": "PHOTO Group",
|
||||
"eqpmId": "EQ026",
|
||||
"eqpmNm": "PHOTO P34",
|
||||
"gdIdxId": "GD008",
|
||||
"gdIdxNm": "Exposure Time Guide",
|
||||
"careStndVal": 24,
|
||||
"warnStndVal": 59,
|
||||
"totVal": 20,
|
||||
"okFg": "양호",
|
||||
"gdMeth": "Change exposure time",
|
||||
"ngCnt": 1
|
||||
},
|
||||
{
|
||||
"no": 17,
|
||||
"fabNm": "B01",
|
||||
"eqpmGrpNm": "DEP Group",
|
||||
"eqpmId": "EQ023",
|
||||
"eqpmNm": "ETCH E12",
|
||||
"gdIdxId": "GD021",
|
||||
"gdIdxNm": "Polish Rate Guide",
|
||||
"careStndVal": 26,
|
||||
"warnStndVal": 51,
|
||||
"totVal": 31,
|
||||
"okFg": "주의",
|
||||
"gdMeth": "Modify gas flow",
|
||||
"ngCnt": 2
|
||||
},
|
||||
{
|
||||
"no": 18,
|
||||
"fabNm": "B02",
|
||||
"eqpmGrpNm": "PHOTO Group",
|
||||
"eqpmId": "EQ012",
|
||||
"eqpmNm": "ETCH E12",
|
||||
"gdIdxId": "GD023",
|
||||
"gdIdxNm": "Polish Rate Guide",
|
||||
"careStndVal": 34,
|
||||
"warnStndVal": 45,
|
||||
"totVal": 64,
|
||||
"okFg": "경고",
|
||||
"gdMeth": "Change exposure time",
|
||||
"ngCnt": 1
|
||||
},
|
||||
{
|
||||
"no": 19,
|
||||
"fabNm": "B01",
|
||||
"eqpmGrpNm": "PHOTO Group",
|
||||
"eqpmId": "EQ018",
|
||||
"eqpmNm": "ETCH E12",
|
||||
"gdIdxId": "GD002",
|
||||
"gdIdxNm": "Etch Depth Guide",
|
||||
"careStndVal": 30,
|
||||
"warnStndVal": 31,
|
||||
"totVal": 51,
|
||||
"okFg": "주의",
|
||||
"gdMeth": "Tune RF power",
|
||||
"ngCnt": 2
|
||||
},
|
||||
{
|
||||
"no": 20,
|
||||
"fabNm": "C01",
|
||||
"eqpmGrpNm": "CMP Group",
|
||||
"eqpmId": "EQ018",
|
||||
"eqpmNm": "CMP C56",
|
||||
"gdIdxId": "GD021",
|
||||
"gdIdxNm": "Exposure Time Guide",
|
||||
"careStndVal": 30,
|
||||
"warnStndVal": 51,
|
||||
"totVal": 45,
|
||||
"okFg": "양호",
|
||||
"gdMeth": "Change exposure time",
|
||||
"ngCnt": 7
|
||||
},
|
||||
{
|
||||
"no": 21,
|
||||
"fabNm": "B01",
|
||||
"eqpmGrpNm": "CMP Group",
|
||||
"eqpmId": "EQ021",
|
||||
"eqpmNm": "CMP C56",
|
||||
"gdIdxId": "GD001",
|
||||
"gdIdxNm": "Deposition Rate Guide",
|
||||
"careStndVal": 23,
|
||||
"warnStndVal": 42,
|
||||
"totVal": 40,
|
||||
"okFg": "주의",
|
||||
"gdMeth": "Tune RF power",
|
||||
"ngCnt": 5
|
||||
}
|
||||
]
|
||||
,
|
||||
column: [
|
||||
{
|
||||
header: 'No.',
|
||||
name: 'no',
|
||||
align: 'right',
|
||||
width: 30,
|
||||
},
|
||||
{
|
||||
header: 'FAB',
|
||||
name: 'fabNm',
|
||||
align: 'left',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
header: '설비그룹',
|
||||
name: 'eqpmGrpNm',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
header: '설비id',
|
||||
name: 'eqpmId',
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
header: '설비명',
|
||||
name: 'eqpmNm',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
header: '가이드명',
|
||||
name: 'gdIdxId',
|
||||
hidden: true,
|
||||
// formatter({ value }) {
|
||||
// let retVal = '';
|
||||
// const newValue = _this.pageData.gdIdxIdList.filter(
|
||||
// item => item.value == value,
|
||||
// );
|
||||
// if (newValue.length > 0) {
|
||||
// retVal = newValue[0].text;
|
||||
// }
|
||||
// //빈값일때 전체방지
|
||||
// if (value == '' || value == null) {
|
||||
// retVal = '';
|
||||
// }
|
||||
// return retVal;
|
||||
// },
|
||||
},
|
||||
{
|
||||
header: '가이드명',
|
||||
name: 'gdIdxNm',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
header: '주의',
|
||||
name: 'careStndVal',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
header: '경고',
|
||||
name: 'warnStndVal',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
header: '가이드값',
|
||||
name: 'totVal',
|
||||
align: 'right',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
header: '평가',
|
||||
name: 'okFg',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
header: '절감가이드 방법',
|
||||
name: 'gdMeth',
|
||||
},
|
||||
{
|
||||
header: 'NG발생건수',
|
||||
name: 'ngCnt',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
},
|
||||
],
|
||||
option: {
|
||||
// pageOptions: {
|
||||
// useClient: true,
|
||||
// perPage: 10,
|
||||
// },
|
||||
|
||||
// scrollX: false,
|
||||
scrollY: true
|
||||
|
||||
}
|
||||
|
||||
// pageOptions: {
|
||||
// useClient: true,
|
||||
// perPage: 10,
|
||||
// },
|
||||
// scrollX: false,
|
||||
// scrollY: false
|
||||
|
||||
|
||||
},
|
||||
// pageOptions: {
|
||||
// useClient: true,
|
||||
// perPage: 10,
|
||||
// },
|
||||
// scrollX: true,
|
||||
// scrollY: false
|
||||
},
|
||||
popDialog: false,
|
||||
eqpmFlag: false,
|
||||
eqpmKindFlag: false,
|
||||
@ -243,12 +633,12 @@ export default {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
fabId(val) {},
|
||||
fabNm(val) {},
|
||||
eqpmKindId(val) {},
|
||||
eqpmGrpId(val) {},
|
||||
eqpmGrpNm(val) {},
|
||||
fromDt(val) {},
|
||||
fabId(val) { },
|
||||
fabNm(val) { },
|
||||
eqpmKindId(val) { },
|
||||
eqpmGrpId(val) { },
|
||||
eqpmGrpNm(val) { },
|
||||
fromDt(val) { },
|
||||
async selectValue02(val) {
|
||||
if (this.initedFlag) {
|
||||
this.setPageData({
|
||||
@ -367,7 +757,7 @@ export default {
|
||||
fabNm: data.fabNm,
|
||||
eqpmKindId: data.eqpmKindId,
|
||||
fromDt: data.fromDt,
|
||||
okFg:data.okFg
|
||||
okFg: data.okFg
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
@ -399,7 +789,7 @@ export default {
|
||||
} else {
|
||||
this.setFromDt();
|
||||
}
|
||||
await this.gridInit();
|
||||
// await this.gridInit();
|
||||
},
|
||||
async search() {
|
||||
await this.getRowGridData();
|
||||
@ -416,68 +806,75 @@ export default {
|
||||
// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
|
||||
},
|
||||
async getEqpmKind() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmKindCodeList',
|
||||
resKey: 'eqpmKindCodeLists',
|
||||
sendParam: {},
|
||||
});
|
||||
if (res.length > 0) {
|
||||
this.selectValueList01 = await res.map(item => {
|
||||
return {
|
||||
text: item.eqpmKindNm,
|
||||
value: item.eqpmKindId,
|
||||
};
|
||||
});
|
||||
this.selectValueList01.unshift({
|
||||
text: '전체',
|
||||
value: null,
|
||||
});
|
||||
if (
|
||||
this.routeData.eqpmKindId == null ||
|
||||
this.routeData.eqpmKindId == ''
|
||||
) {
|
||||
this.selectValue01 = this.selectValueList01[0].value;
|
||||
} else if (
|
||||
this.routeData.eqpmKindId != null ||
|
||||
this.routeData.eqpmKindId != ''
|
||||
) {
|
||||
this.selectValue01 = this.routeData.eqpmKindId;
|
||||
}
|
||||
} else {
|
||||
this.selectValueList01 = [];
|
||||
this.selectValue01 = null;
|
||||
}
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: 'selectEqpmKindCodeList',
|
||||
// resKey: 'eqpmKindCodeLists',
|
||||
// sendParam: {},
|
||||
// });
|
||||
// if (res.length > 0) {
|
||||
// this.selectValueList01 = await res.map(item => {
|
||||
// return {
|
||||
// text: item.eqpmKindNm,
|
||||
// value: item.eqpmKindId,
|
||||
// };
|
||||
// });
|
||||
// this.selectValueList01.unshift({
|
||||
// text: '전체',
|
||||
// value: null,
|
||||
// });
|
||||
// if (
|
||||
// this.routeData.eqpmKindId == null ||
|
||||
// this.routeData.eqpmKindId == ''
|
||||
// ) {
|
||||
// this.selectValue01 = this.selectValueList01[0].value;
|
||||
// } else if (
|
||||
// this.routeData.eqpmKindId != null ||
|
||||
// this.routeData.eqpmKindId != ''
|
||||
// ) {
|
||||
// this.selectValue01 = this.routeData.eqpmKindId;
|
||||
// }
|
||||
// } else {
|
||||
// this.selectValueList01 = [];
|
||||
// this.selectValue01 = null;
|
||||
// }
|
||||
this.setPageData({
|
||||
eqpmKindList: this.selectValueList01,
|
||||
eqpmKindId: this.selectValue01,
|
||||
});
|
||||
},
|
||||
async getFab() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectFabCodeList',
|
||||
resKey: 'fabCodeLists',
|
||||
sendParam: {},
|
||||
});
|
||||
if (res.length > 0) {
|
||||
this.selectValueList02 = await res.map(item => {
|
||||
return {
|
||||
text: item.eccNm,
|
||||
value: item.eccId,
|
||||
};
|
||||
});
|
||||
this.selectValueList02.unshift({
|
||||
text: '전체',
|
||||
value: null,
|
||||
});
|
||||
if (this.routeData.fabId != null && this.routeData.fabId != '') {
|
||||
this.selectValue02 = this.routeData.fabId;
|
||||
} else if (this.routeData.fabId == null || this.routeData.fabId == '') {
|
||||
this.selectValue02 = this.selectValueList02[0].value;
|
||||
}
|
||||
} else {
|
||||
this.selectValueList02 = [];
|
||||
this.selectValue02 = null;
|
||||
}
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: 'selectFabCodeList',
|
||||
// resKey: 'fabCodeLists',
|
||||
// sendParam: {},
|
||||
// });
|
||||
this.selectValueList02 = [
|
||||
{ text: '온도 센서', value: 'ECC001' },
|
||||
{ text: '압력 센서', value: 'ECC002' },
|
||||
{ text: '유량 센서', value: 'ECC003' },
|
||||
{ text: '습도 센서', value: 'ECC004' },
|
||||
{ text: '전압 센서', value: 'ECC005' }
|
||||
];
|
||||
// if (res.length > 0) {
|
||||
// // this.selectValueList02 = await res.map(item => {
|
||||
// // return {
|
||||
// // text: item.eccNm,
|
||||
// // value: item.eccId,
|
||||
// // };
|
||||
// // });
|
||||
// this.selectValueList02.unshift({
|
||||
// text: '전체',
|
||||
// value: null,
|
||||
// });
|
||||
// if (this.routeData.fabId != null && this.routeData.fabId != '') {
|
||||
// this.selectValue02 = this.routeData.fabId;
|
||||
// } else if (this.routeData.fabId == null || this.routeData.fabId == '') {
|
||||
// this.selectValue02 = this.selectValueList02[0].value;
|
||||
// }
|
||||
// } else {
|
||||
// this.selectValueList02 = [];
|
||||
// this.selectValue02 = null;
|
||||
// }
|
||||
this.setPageData({
|
||||
fabIdList: this.selectValueList02,
|
||||
fabId: this.selectValue02,
|
||||
@ -519,37 +916,37 @@ export default {
|
||||
this.selectValue03 = null;
|
||||
}
|
||||
|
||||
this.setPageData({
|
||||
eqpmGrpId : this.selectValue03,
|
||||
eqpmGrpIdList : this.selectValueList03
|
||||
})
|
||||
this.setPageData({
|
||||
eqpmGrpId: this.selectValue03,
|
||||
eqpmGrpIdList: this.selectValueList03
|
||||
})
|
||||
},
|
||||
async getEqpm(data) {},
|
||||
async getEqpm(data) { },
|
||||
async getGdIdx() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmGdIdxCodeList',
|
||||
resKey: 'eqpmGdIdxCodeLists',
|
||||
sendParam: {
|
||||
eqpmGrpId: this.selectValue03,
|
||||
},
|
||||
});
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: 'selectEqpmGdIdxCodeList',
|
||||
// resKey: 'eqpmGdIdxCodeLists',
|
||||
// sendParam: {
|
||||
// eqpmGrpId: this.selectValue03,
|
||||
// },
|
||||
// });
|
||||
|
||||
if (res.length > 0) {
|
||||
this.selectValueList05 = await res.map(item => {
|
||||
return {
|
||||
text: item.gdIdxNm,
|
||||
value: item.gdIdxId,
|
||||
};
|
||||
});
|
||||
this.selectValueList05.unshift({
|
||||
text: '전체',
|
||||
value: null,
|
||||
});
|
||||
this.selectValue05 = this.selectValueList05[0].value;
|
||||
} else {
|
||||
this.selectValueList05 = [];
|
||||
this.selectValue05 = null;
|
||||
}
|
||||
// if (res.length > 0) {
|
||||
// this.selectValueList05 = await res.map(item => {
|
||||
// return {
|
||||
// text: item.gdIdxNm,
|
||||
// value: item.gdIdxId,
|
||||
// };
|
||||
// });
|
||||
// this.selectValueList05.unshift({
|
||||
// text: '전체',
|
||||
// value: null,
|
||||
// });
|
||||
// this.selectValue05 = this.selectValueList05[0].value;
|
||||
// } else {
|
||||
// this.selectValueList05 = [];
|
||||
// this.selectValue05 = null;
|
||||
// }
|
||||
|
||||
this.setPageData({
|
||||
gdIdxIdList: this.selectValueList05,
|
||||
@ -571,9 +968,9 @@ export default {
|
||||
value: 'NG',
|
||||
},
|
||||
];
|
||||
if(this.routeData.okFg == null || this.routeData.okFg == '' ){
|
||||
if (this.routeData.okFg == null || this.routeData.okFg == '') {
|
||||
this.selectValue06 = this.selectValueList06[0].value;
|
||||
}else if(this.routeData.okFg != null || this.routeData.okFg != '' ){
|
||||
} else if (this.routeData.okFg != null || this.routeData.okFg != '') {
|
||||
this.selectValue06 = this.routeData.okFg;
|
||||
}
|
||||
this.setPageData({
|
||||
@ -590,6 +987,15 @@ export default {
|
||||
resizable: true,
|
||||
},
|
||||
rowHeaders: ['rowNum'],
|
||||
|
||||
|
||||
// pageOptions: {
|
||||
// useClient: true,
|
||||
// perPage: 10,
|
||||
// },
|
||||
// scrollX: false,
|
||||
// scrollY: false,
|
||||
|
||||
// heightResizable: true,
|
||||
// rowHeight:'auto'
|
||||
};
|
||||
@ -724,27 +1130,27 @@ export default {
|
||||
if (e.columnName == 'ngCnt' && e.targetType == 'cell') {
|
||||
// if(e.columnName == 'ngCnt' && data.ngCnt > 0){
|
||||
this.$refs['EnrgEffcEqpmDetailPop'].popCheck = true;
|
||||
this.setPageData({
|
||||
rowGridSelectKey: e.rowKey,
|
||||
rowGridSelectData: {
|
||||
...data,
|
||||
fromDt: this.pageData.fromDt,
|
||||
toDt: this.pageData.toDt,
|
||||
},
|
||||
});
|
||||
// this.setPageData({
|
||||
// rowGridSelectKey: e.rowKey,
|
||||
// rowGridSelectData: {
|
||||
// ...data,
|
||||
// fromDt: this.pageData.fromDt,
|
||||
// toDt: this.pageData.toDt,
|
||||
// },
|
||||
// });
|
||||
}
|
||||
|
||||
if (e.columnName == 'gdIdxNm' && e.targetType == 'cell') {
|
||||
// if(e.columnName == 'ngCnt' && data.ngCnt > 0){
|
||||
this.$refs['EnrgEffcGdIdxDetPop'].popCheck = true;
|
||||
this.setPageData({
|
||||
rowGridSelectKey: e.rowKey,
|
||||
rowGridSelectData: {
|
||||
...data,
|
||||
fromDt: this.pageData.fromDt,
|
||||
toDt: this.pageData.toDt,
|
||||
},
|
||||
});
|
||||
// this.setPageData({
|
||||
// rowGridSelectKey: e.rowKey,
|
||||
// rowGridSelectData: {
|
||||
// ...data,
|
||||
// fromDt: this.pageData.fromDt,
|
||||
// toDt: this.pageData.toDt,
|
||||
// },
|
||||
// });
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
973
pages/ems/effc/EnrgEffcEqpmDetlMntrPage_bk.vue
Normal file
973
pages/ems/effc/EnrgEffcEqpmDetlMntrPage_bk.vue
Normal file
@ -0,0 +1,973 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="end" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component :is="'SelectBox'" :propsValue="fabSelected" :itemList="fabList" :label="'FAB'"
|
||||
@update:propsValue="fabSelected = $event" :labelCols="12" :textCols="12"
|
||||
:customClass="'select-large'" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component :is="'SelectBox'" :propsValue="eqpmKindSelected" :itemList="eqpmKindList" :label="'설비종류'"
|
||||
@update:propsValue="eqpmKindSelected = $event" :labelCols="12" :textCols="12" :customClass="'select-large'" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component :is="'SelectBox'" :propsValue="eqpmGrpSelected" :itemList="eqpmGrpList" :label="'설비그룹'"
|
||||
@update:propsValue="eqpmGrpSelected = $event":labelCols="12" :textCols="12" :customClass="'select-large'" />
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<!-- 평가 -->
|
||||
<component :is="'SelectBox'" :propsValue="selectValue06" :itemList="selectValueList06" :label="'평가'"
|
||||
@update:propsValue="selectValue06 = $event" :labelCols="12" :textCols="12" :customClass="'select-large'" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="end" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<component ref="EqpmSelectPop" :is="'EqpmSelectPop'" :label="'설비'" :valueNm="'eqpmNm'"
|
||||
:parentPrgmId="myPrgmId" :isMulti="true" :fabSelected="fabSelected"
|
||||
:eqpmGrpSelected="eqpmGrpSelected" :labelCols="12" :textCols="12" :customClass="'select-large'"/>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue05" :itemList="selectValueList05"
|
||||
:label="'가이드명'" @update:propsValue="selectValue05 = $event" :labelCols="12" :textCols="12" :customClass="'select-large'" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
대상일
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="12">
|
||||
<a-range-picker size="large">
|
||||
<template #suffixIcon>
|
||||
<a-icon type="calendar" />
|
||||
</template>
|
||||
</a-range-picker>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="3" class="text-right">
|
||||
<!-- 조회버튼 -->
|
||||
<a-button icon="search" type="primary" @click="search()" class="search-button" size="large">조회</a-button>
|
||||
<!-- <BtnSearch @click="search" /> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents" class="mt-4">
|
||||
<v-col :cols="12" style="height: 100%">
|
||||
<a-card class="p-0" :style="{ border: 'none', borderRadius: '8px' }">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
|
||||
</div>
|
||||
<div class="px-5" style="height:calc(100% - 76px)">
|
||||
<a-table :columns="columns" :dataSource="filteredData" bordered>
|
||||
<template slot="gdIdxNm" slot-scope="text, record">
|
||||
<a @click="handleGdIdxNmClick(record)" style="cursor: pointer; color: #1890ff;">
|
||||
{{ text }}
|
||||
</a>
|
||||
</template>
|
||||
<template slot="ngCnt" slot-scope="text, record">
|
||||
<a @click="handleNgCntClick(record)" style="cursor: pointer; color: #1890ff;">
|
||||
{{ text }}
|
||||
</a>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
<component ref="EnrgEffcEqpmDetailPop" :is="'EnrgEffcEqpmDetailPop'" :parentPrgmId="myPrgmId" />
|
||||
<component ref="EnrgEffcGdIdxDetPop" :is="'EnrgEffcGdIdxDetPop'" :parentPrgmId="myPrgmId" />
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
import { mapActions } from 'vuex';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import SelectBox from '@/components/common/select/SelectBox';
|
||||
import Utility from '~/plugins/utility';
|
||||
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
|
||||
import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
|
||||
import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
|
||||
import { DatePicker } from 'ant-design-vue';
|
||||
|
||||
|
||||
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
let paramsKey;
|
||||
// let params;
|
||||
// let routeCheck = false;
|
||||
|
||||
export default {
|
||||
mixins: [mixinGlobal, resize],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
// myTitle = await myState.activeMenuInfo.menuNm;
|
||||
myTitle = '효율운전 가이드';
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: 'PRG0084',
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
Utility,
|
||||
// Grid,
|
||||
SelectBox,
|
||||
// Buttons,
|
||||
BtnSearch,
|
||||
'a-range-picker': DatePicker.RangePicker,
|
||||
EnrgEffcEqpmDetailPop,
|
||||
EqpmSelectPop,
|
||||
EnrgEffcGdIdxDetPop,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: 'PRG0084',
|
||||
selectValue01: null,
|
||||
selectValue02: null,
|
||||
selectValue03: null,
|
||||
selectValue04: { eqpmId: [] },
|
||||
selectValue05: null,
|
||||
selectValue06: null,
|
||||
selectValueList01: [],
|
||||
selectValueList02: [],
|
||||
selectValueList03: [],
|
||||
selectValueList04: [],
|
||||
selectValueList05: [],
|
||||
selectValueList06: [],
|
||||
fabSelected: null,
|
||||
eqpmGrpSelected: null,
|
||||
eqpmKindSelected: null,
|
||||
fabList: [],
|
||||
eqpmGrpList: [],
|
||||
eqpmKindList: [],
|
||||
initedFlag: false,
|
||||
loadGrid: false,
|
||||
gridName: 'rowGrid',
|
||||
popDialog: false,
|
||||
eqpmFlag: false,
|
||||
eqpmKindFlag: false,
|
||||
eqpmGrpFlag: false,
|
||||
eqpmGdIdxFlag: false,
|
||||
fabFlag: false,
|
||||
routeData: {},
|
||||
columns: [
|
||||
{ title: 'No.', dataIndex: 'No', key: 'No', align: 'center' },
|
||||
{ title: 'FAB', dataIndex: 'fab', key: 'fab', align: 'center' },
|
||||
{ title: '설비그룹', dataIndex: '설비그룹', key: '설비그룹' },
|
||||
{ title: '설비명', dataIndex: '설비명', key: '설비명' },
|
||||
{ title: '가이드명', dataIndex: '가이드명', key: 'gdIdxNm', scopedSlots: { customRender: 'gdIdxNm' } },
|
||||
{ title: '주의', dataIndex: '주의', key: '주의' },
|
||||
{ title: '경고', dataIndex: '경고', key: '경고' },
|
||||
{ title: '가이드값', dataIndex: '가이드값', key: '가이드값' },
|
||||
{ title: '평가', dataIndex: '평가', key: '평가' },
|
||||
{ title: '절감가이드 방법', dataIndex: '절감가이드방법', key: '절감가이드방법' },
|
||||
{ title: 'NG발생건수', dataIndex: 'NG발생건수', key: 'ngCnt', scopedSlots: { customRender: 'ngCnt' } },
|
||||
],
|
||||
filteredData: [
|
||||
|
||||
],
|
||||
data: [
|
||||
{
|
||||
No: 1,
|
||||
fab: 'FAB001',
|
||||
설비그룹: '냉동기고온',
|
||||
설비명: 'UT_HT_CH101',
|
||||
가이드명: 'C.O.P',
|
||||
주의: 3,
|
||||
경고: 2,
|
||||
가이드값: 7.55,
|
||||
평가: 'NG',
|
||||
절감가이드방법: '냉동기 C.O.P 효율운전 점검 필요',
|
||||
NG발생건수: 1,
|
||||
},
|
||||
{
|
||||
No: 2,
|
||||
fab: 'FAB002',
|
||||
설비그룹: '냉동기고온',
|
||||
설비명: 'UT_HT_CH102',
|
||||
가이드명: '전류부하율 평균 편차',
|
||||
주의: 3,
|
||||
경고: 5,
|
||||
가이드값: -1.421,
|
||||
평가: 'NG',
|
||||
절감가이드방법: '냉동기 전류부하율 추가 상승 검토 필요',
|
||||
NG발생건수: 5,
|
||||
},
|
||||
{
|
||||
No: 3,
|
||||
fab: 'FAB001',
|
||||
설비그룹: '공조기',
|
||||
설비명: 'AHU_01',
|
||||
가이드명: '온도 편차',
|
||||
주의: 1,
|
||||
경고: 0,
|
||||
가이드값: 0.5,
|
||||
평가: 'OK',
|
||||
절감가이드방법: '정상 운전 중',
|
||||
NG발생건수: 0,
|
||||
},
|
||||
{
|
||||
No: 4,
|
||||
fab: 'FAB003',
|
||||
설비그룹: '보일러',
|
||||
설비명: 'BLR_01',
|
||||
가이드명: '연료 효율',
|
||||
주의: 2,
|
||||
경고: 1,
|
||||
가이드값: 85.2,
|
||||
평가: '주의',
|
||||
절감가이드방법: '연료 효율 점검 필요',
|
||||
NG발생건수: 2,
|
||||
},
|
||||
{
|
||||
No: 5,
|
||||
fab: 'FAB002',
|
||||
설비그룹: '냉동기저온',
|
||||
설비명: 'LT_CH201',
|
||||
가이드명: 'C.O.P',
|
||||
주의: 4,
|
||||
경고: 3,
|
||||
가이드값: 6.8,
|
||||
평가: 'NG',
|
||||
절감가이드방법: '저온 냉동기 효율 개선 필요',
|
||||
NG발생건수: 3,
|
||||
},
|
||||
{
|
||||
No: 6,
|
||||
fab: 'FAB001',
|
||||
설비그룹: '공조기',
|
||||
설비명: 'AHU_02',
|
||||
가이드명: '전력 사용량',
|
||||
주의: 0,
|
||||
경고: 0,
|
||||
가이드값: 120,
|
||||
평가: 'OK',
|
||||
절감가이드방법: '정상 운전 중',
|
||||
NG발생건수: 0,
|
||||
},
|
||||
{
|
||||
No: 7,
|
||||
fab: 'FAB003',
|
||||
설비그룹: '냉동기고온',
|
||||
설비명: 'UT_HT_CH103',
|
||||
가이드명: 'C.O.P',
|
||||
주의: 2,
|
||||
경고: 2,
|
||||
가이드값: 7.1,
|
||||
평가: '주의',
|
||||
절감가이드방법: '냉동기 효율 점검 필요',
|
||||
NG발생건수: 1,
|
||||
},
|
||||
{
|
||||
No: 8,
|
||||
fab: 'FAB002',
|
||||
설비그룹: '보일러',
|
||||
설비명: 'BLR_02',
|
||||
가이드명: '온도 편차',
|
||||
주의: 1,
|
||||
경고: 1,
|
||||
가이드값: 1.2,
|
||||
평가: '주의',
|
||||
절감가이드방법: '온도 센서 점검 필요',
|
||||
NG발생건수: 1,
|
||||
},
|
||||
{
|
||||
No: 9,
|
||||
fab: 'FAB001',
|
||||
설비그룹: '냉동기저온',
|
||||
설비명: 'LT_CH202',
|
||||
가이드명: '전류부하율 평균 편차',
|
||||
주의: 3,
|
||||
경고: 4,
|
||||
가이드값: -2.1,
|
||||
평가: 'NG',
|
||||
절감가이드방법: '전류부하율 이상 감지',
|
||||
NG발생건수: 4,
|
||||
},
|
||||
{
|
||||
No: 10,
|
||||
fab: 'FAB003',
|
||||
설비그룹: '공조기',
|
||||
설비명: 'AHU_03',
|
||||
가이드명: '전력 사용량',
|
||||
주의: 0,
|
||||
경고: 0,
|
||||
가이드값: 110,
|
||||
평가: 'OK',
|
||||
절감가이드방법: '정상 운전 중',
|
||||
NG발생건수: 0,
|
||||
},
|
||||
{
|
||||
No: 11,
|
||||
fab: 'FAB002',
|
||||
설비그룹: '냉동기고온',
|
||||
설비명: 'UT_HT_CH104',
|
||||
가이드명: 'C.O.P',
|
||||
주의: 2,
|
||||
경고: 3,
|
||||
가이드값: 6.9,
|
||||
평가: '주의',
|
||||
절감가이드방법: '냉동기 효율 점검 필요',
|
||||
NG발생건수: 2,
|
||||
},
|
||||
{
|
||||
No: 12,
|
||||
fab: 'FAB001',
|
||||
설비그룹: '보일러',
|
||||
설비명: 'BLR_03',
|
||||
가이드명: '연료 효율',
|
||||
주의: 1,
|
||||
경고: 1,
|
||||
가이드값: 88.5,
|
||||
평가: 'OK',
|
||||
절감가이드방법: '정상 운전 중',
|
||||
NG발생건수: 0,
|
||||
}
|
||||
]
|
||||
// filtered data to show in the table
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
fabId() {
|
||||
return this.pageData.fabId;
|
||||
},
|
||||
fabNm() {
|
||||
return this.pageData.fabNm;
|
||||
},
|
||||
eqpmKindId() {
|
||||
return this.pageData.eqpmKindId;
|
||||
},
|
||||
eqpmGrpId() {
|
||||
return this.pageData.eqpmGrpId;
|
||||
},
|
||||
eqpmGrpNm() {
|
||||
return this.pageData.eqpmGrpNm;
|
||||
},
|
||||
fromDt() {
|
||||
return this.pageData.fromDt;
|
||||
},
|
||||
checkedRows() {
|
||||
return this.pageData.checkedRows;
|
||||
},
|
||||
eqpmInfo() {
|
||||
return this.pageData.eqpmInfo;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
// routeCheck=true;
|
||||
if (to.query.prgmId == myPrgmId) {
|
||||
if (paramsKey != to.params.key) {
|
||||
if (to.params.key == undefined) {
|
||||
} else {
|
||||
// params=to.params;
|
||||
paramsKey = to.params.Key;
|
||||
document.getElementById('refresh').click();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
fabId(val) { },
|
||||
fabNm(val) { },
|
||||
eqpmKindId(val) { },
|
||||
eqpmGrpId(val) { },
|
||||
eqpmGrpNm(val) { },
|
||||
fromDt(val) { },
|
||||
async selectValue02(val) {
|
||||
if (this.initedFlag) {
|
||||
this.setPageData({
|
||||
fabId: val,
|
||||
eqpmId: [],
|
||||
eqpmNm: null,
|
||||
eqpmIdList: [],
|
||||
// isFind:true
|
||||
});
|
||||
this.selectValue04 = { eqpmId: [] };
|
||||
// await this.getEqpm();
|
||||
// if(this.eqpmFlag){
|
||||
// this.setPageData({ isFind: true });
|
||||
// this.eqpmFlag=false;
|
||||
// }
|
||||
}
|
||||
},
|
||||
async selectValue01(val) {
|
||||
if (this.initedFlag) {
|
||||
this.setPageData({
|
||||
eqpmKindId: val,
|
||||
eqpmGrpId: null,
|
||||
eqpmId: [],
|
||||
eqpmNm: null,
|
||||
eqpmIdList: [],
|
||||
});
|
||||
this.selectValue04 = { eqpmId: [] };
|
||||
await this.getEqpmGrp();
|
||||
// await this.getEqpm(this.selectValueList03);
|
||||
}
|
||||
},
|
||||
async selectValue03(val) {
|
||||
if (this.initedFlag) {
|
||||
this.setPageData({
|
||||
eqpmGrpId: val,
|
||||
eqpmId: [],
|
||||
eqpmNm: null,
|
||||
eqpmIdList: [],
|
||||
});
|
||||
this.selectValue04 = { eqpmId: [] };
|
||||
// await this.getEqpm();
|
||||
// if(this.eqpmFlag){
|
||||
// this.setPageData({ isFind: true });
|
||||
this.eqpmGrpFlag = true;
|
||||
// }
|
||||
// await this.getEqpm();
|
||||
await this.getGdIdx();
|
||||
}
|
||||
},
|
||||
async selectValue06(val) {
|
||||
if (this.initedFlag) {
|
||||
this.setPageData({
|
||||
eqpmGrpId: null,
|
||||
eqpmId: [],
|
||||
eqpmNm: null,
|
||||
eqpmIdList: [],
|
||||
isFind: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
checkedRows(val) {
|
||||
if (this.initedFlag) {
|
||||
var temp = this.pageData.checkedRows.map(item => {
|
||||
return item.eqpmId;
|
||||
});
|
||||
this.selectValue04 = { eqpmId: temp };
|
||||
}
|
||||
},
|
||||
eqpmInfo(val) {
|
||||
if (this.initedFlag) {
|
||||
this.setPageData({ eqpmId: val.eqpmId, eqpmNm: val.eqpmNm });
|
||||
}
|
||||
},
|
||||
|
||||
// async selectValue04(val) {
|
||||
// if (this.initedFlag) {
|
||||
// console.log("val : ",val)
|
||||
// this.setPageData({ isFind: true });
|
||||
// }
|
||||
// },
|
||||
selectValue04: {
|
||||
deep: true,
|
||||
handler(newVal, oldVal) {
|
||||
this.setPageData({ isFind: true });
|
||||
},
|
||||
},
|
||||
async selectValue05(val) {
|
||||
if (this.initedFlag) {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
},
|
||||
},
|
||||
async beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
await this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
created() {
|
||||
var data = this.$route.params;
|
||||
// this.setPageData({
|
||||
// eqpmGrpId : data.eqpmGrpId,
|
||||
// eqpmGrpNm : data.eqpmGrpNm,
|
||||
// fabId : data.fabId,
|
||||
// fabNm : data.fabNm,
|
||||
// eqpmKindId : data.eqpmKindId,
|
||||
// fromDt : data.fromDt
|
||||
|
||||
// });
|
||||
this.routeData = {
|
||||
eqpmGrpId: data.eqpmGrpId,
|
||||
eqpmGrpNm: data.eqpmGrpNm,
|
||||
fabId: data.fabId,
|
||||
fabNm: data.fabNm,
|
||||
eqpmKindId: data.eqpmKindId,
|
||||
fromDt: data.fromDt,
|
||||
okFg: data.okFg
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.init();
|
||||
this.initedFlag = true;
|
||||
this.routeData = {};
|
||||
|
||||
this.filteredData = this.data;
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
// routeCheck=false;
|
||||
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
getCodeList: 'modules/search/getCodeList',
|
||||
getBlocMstrList: 'modules/search/getBlocMstrList',
|
||||
}),
|
||||
handleNgCntClick(record) {
|
||||
|
||||
this.$refs['EnrgEffcEqpmDetailPop'].showDetailModal = true;
|
||||
|
||||
},
|
||||
handleGdIdxNmClick(record) {
|
||||
this.$refs['EnrgEffcGdIdxDetPop'].showDetailModal = true;
|
||||
},
|
||||
async init() {
|
||||
await this.getFab();
|
||||
await this.getEqpmKind();
|
||||
await this.getEqpmGrp();
|
||||
// await this.getEqpm();
|
||||
await this.getGdIdx();
|
||||
await this.getOkFg();
|
||||
this.filteredData = this.data;
|
||||
|
||||
if (this.routeData.fromDt != null) {
|
||||
this.setPageData({
|
||||
fromDt: this.routeData.fromDt,
|
||||
});
|
||||
} else {
|
||||
this.setFromDt();
|
||||
}
|
||||
await this.gridInit();
|
||||
|
||||
},
|
||||
search() {
|
||||
this.filteredData = this.data.filter(item => {
|
||||
return (
|
||||
|
||||
(!this.fabSelected || item.fab === this.fabSelected) &&
|
||||
(!this.eqpmGrpSelected || item['설비그룹'] === this.eqpmGrpSelected) &&
|
||||
(!this.selectValue06 || item['평가'] === this.selectValue06) &&
|
||||
(!this.selectValue05 || item['가이드명'] === this.selectValue05)
|
||||
|
||||
);
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
setFromDt() {
|
||||
this.pageData.fromDt = Utility.setBeforetDate(
|
||||
this.pageData,
|
||||
this.pageData.toDt,
|
||||
'YYYYMMDD',
|
||||
);
|
||||
// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
|
||||
},
|
||||
async getEqpmKind() {
|
||||
this.eqpmKindList = [
|
||||
{ label: 'Etcher', value: 'EQK001' },
|
||||
{ label: 'Deposition', value: 'EQK002' },
|
||||
{ label: 'Inspection', value: 'EQK003' },
|
||||
];
|
||||
|
||||
this.eqpmKindSelected = 'EQK001';
|
||||
this.setPageData({
|
||||
eqpmKindList: this.eqpmKindList,
|
||||
eqpmKindId: this.eqpmKindSelected,
|
||||
});
|
||||
},
|
||||
async getFab() {
|
||||
this.fabList = [
|
||||
{ label: 'FAB001', value: 'FAB001' },
|
||||
{ label: 'FAB002', value: 'FAB002' },
|
||||
{ label: 'FAB003', value: 'FAB003' },
|
||||
];
|
||||
|
||||
this.setPageData({
|
||||
fabIdList: this.fabList,
|
||||
fabId: this.fabSelected,
|
||||
});
|
||||
},
|
||||
async getEqpmGrp() {
|
||||
//설비그룹
|
||||
|
||||
this.eqpmGrpList = [
|
||||
{ label: '냉동기고온', value: '냉동기고온' },
|
||||
{ label: '냉동기저온', value: '냉동기저온' },
|
||||
{ label: '공조기', value: '공조기' },
|
||||
{ label: '보일러', value: '보일러' }
|
||||
];
|
||||
|
||||
this.setPageData({
|
||||
eqpmGrpId: this.eqpmGrpSelected,
|
||||
eqpmGrpIdList: this.eqpmGrpList
|
||||
})
|
||||
},
|
||||
async getEqpm(data) { },
|
||||
async getGdIdx() {
|
||||
|
||||
|
||||
this.selectValueList05 = [
|
||||
{ label: 'C.O.P', value: 'C.O.P' },
|
||||
{ label: '전류부하율 평균 편차', value: '전류부하율 평균 편차' },
|
||||
{ label: '온도 편차', value: '온도 편차' },
|
||||
{ label: '연료 효율', value: '연료 효율' },
|
||||
{ label: '전력 사용량', value: '전력 사용량' }
|
||||
];
|
||||
|
||||
|
||||
this.setPageData({
|
||||
gdIdxIdList: this.selectValueList05,
|
||||
gdIdxId: this.selectValue05,
|
||||
});
|
||||
},
|
||||
async getOkFg() {
|
||||
this.selectValueList06 = [
|
||||
{
|
||||
label: '전체',
|
||||
value: null,
|
||||
},
|
||||
{
|
||||
label: 'OK',
|
||||
value: 'OK',
|
||||
},
|
||||
{
|
||||
label: 'NG',
|
||||
value: 'NG',
|
||||
},
|
||||
];
|
||||
|
||||
if (this.routeData.okFg == null || this.routeData.okFg == '') {
|
||||
this.selectValue06 = this.selectValueList06[0].value;
|
||||
} else if (this.routeData.okFg != null || this.routeData.okFg != '') {
|
||||
this.selectValue06 = this.routeData.okFg;
|
||||
}
|
||||
this.setPageData({
|
||||
okFg: this.selectValue06,
|
||||
okFgList: this.selectValueList06,
|
||||
});
|
||||
},
|
||||
async gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
// const gridWidth = this.$refs.gridParent.offsetWidth / 2;
|
||||
|
||||
const myOptions = {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
rowHeaders: ['rowNum'],
|
||||
// heightResizable: true,
|
||||
// rowHeight:'auto'
|
||||
};
|
||||
this.setGridOption({
|
||||
gridKey: this.gridName,
|
||||
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
|
||||
});
|
||||
|
||||
const _this = this;
|
||||
const myColumns = [
|
||||
{
|
||||
header: 'FAB',
|
||||
name: 'fabNm',
|
||||
align: 'left',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
header: '설비그룹',
|
||||
name: 'eqpmGrpNm',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
header: '설비id',
|
||||
name: 'eqpmId',
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
header: '설비명',
|
||||
name: 'eqpmNm',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
header: '가이드명',
|
||||
name: 'gdIdxId',
|
||||
hidden: true,
|
||||
// formatter({ value }) {
|
||||
// let retVal = '';
|
||||
// const newValue = _this.pageData.gdIdxIdList.filter(
|
||||
// item => item.value == value,
|
||||
// );
|
||||
// if (newValue.length > 0) {
|
||||
// retVal = newValue[0].text;
|
||||
// }
|
||||
// //빈값일때 전체방지
|
||||
// if (value == '' || value == null) {
|
||||
// retVal = '';
|
||||
// }
|
||||
// return retVal;
|
||||
// },
|
||||
},
|
||||
{
|
||||
header: '가이드명',
|
||||
name: 'gdIdxNm',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
header: '주의',
|
||||
name: 'careStndVal',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
header: '경고',
|
||||
name: 'warnStndVal',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
header: '가이드값',
|
||||
name: 'totVal',
|
||||
align: 'right',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
header: '평가',
|
||||
name: 'okFg',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
header: '절감가이드 방법',
|
||||
name: 'gdMeth',
|
||||
},
|
||||
{
|
||||
header: 'NG발생건수',
|
||||
name: 'ngCnt',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
},
|
||||
];
|
||||
|
||||
this.setGridColumn({
|
||||
gridKey: this.gridName,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
// this.loadGrid = true;
|
||||
|
||||
this.getRowGridData();
|
||||
},
|
||||
async getRowGridData() {
|
||||
this.loadGrid = false;
|
||||
|
||||
var res = await this.postApiReturn({
|
||||
apiKey: 'selectEnrgEffcEqpmDetlMntr',
|
||||
resKey: 'eqpmDetlData',
|
||||
sendParam: {
|
||||
eqpmId: this.selectValue04.eqpmId,
|
||||
eqpmGrpId: this.selectValue03,
|
||||
fromDt: this.pageData.fromDt,
|
||||
toDt: this.pageData.toDt,
|
||||
gdIdxId: this.selectValue05,
|
||||
fabId: this.selectValue02,
|
||||
eqpmKindId: this.selectValue01,
|
||||
okFg: this.selectValue06,
|
||||
},
|
||||
});
|
||||
const mockData = [
|
||||
{
|
||||
fabNm: 'FAB-A',
|
||||
eqpmGrpNm: 'Group-3',
|
||||
eqpmId: 'EQPM-001',
|
||||
eqpmNm: 'Equipment-1',
|
||||
gdIdxId: 'GD-001',
|
||||
gdIdxNm: 'Guide-1',
|
||||
careStndVal: 43.88,
|
||||
warnStndVal: 98.56,
|
||||
totVal: 31.62,
|
||||
okFg: 'OK',
|
||||
gdMeth: 'Method-C',
|
||||
ngCnt: 1
|
||||
},
|
||||
{
|
||||
fabNm: 'FAB-C',
|
||||
eqpmGrpNm: 'Group-3',
|
||||
eqpmId: 'EQPM-002',
|
||||
eqpmNm: 'Equipment-2',
|
||||
gdIdxId: 'GD-002',
|
||||
gdIdxNm: 'Guide-2',
|
||||
careStndVal: 42.59,
|
||||
warnStndVal: 82.21,
|
||||
totVal: 32.61,
|
||||
okFg: 'OK',
|
||||
gdMeth: 'Method-A',
|
||||
ngCnt: 3
|
||||
},
|
||||
{
|
||||
fabNm: 'FAB-A',
|
||||
eqpmGrpNm: 'Group-2',
|
||||
eqpmId: 'EQPM-003',
|
||||
eqpmNm: 'Equipment-3',
|
||||
gdIdxId: 'GD-003',
|
||||
gdIdxNm: 'Guide-3',
|
||||
careStndVal: 36.6,
|
||||
warnStndVal: 68.64,
|
||||
totVal: 50.99,
|
||||
okFg: 'NG',
|
||||
gdMeth: 'Method-B',
|
||||
ngCnt: 8
|
||||
},
|
||||
// ... (7 more rows like these)
|
||||
]
|
||||
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: mockData,
|
||||
});
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
columnClick(e) {
|
||||
var data = this.$refs[this.gridName].gridInstance.invoke(
|
||||
'getRow',
|
||||
e.rowKey,
|
||||
);
|
||||
|
||||
if (e.columnName == 'ngCnt' && e.targetType == 'cell') {
|
||||
// if(e.columnName == 'ngCnt' && data.ngCnt > 0){
|
||||
this.$refs['EnrgEffcEqpmDetailPop'].popCheck = true;
|
||||
this.setPageData({
|
||||
rowGridSelectKey: e.rowKey,
|
||||
rowGridSelectData: {
|
||||
...data,
|
||||
fromDt: this.pageData.fromDt,
|
||||
toDt: this.pageData.toDt,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (e.columnName == 'gdIdxNm' && e.targetType == 'cell') {
|
||||
// if(e.columnName == 'ngCnt' && data.ngCnt > 0){
|
||||
this.$refs['EnrgEffcGdIdxDetPop'].popCheck = true;
|
||||
this.setPageData({
|
||||
rowGridSelectKey: e.rowKey,
|
||||
rowGridSelectData: {
|
||||
...data,
|
||||
fromDt: this.pageData.fromDt,
|
||||
toDt: this.pageData.toDt,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
isFind: false,
|
||||
fabId: '',
|
||||
fabIdList: [],
|
||||
fabNm: '',
|
||||
eccId: '',
|
||||
eqpmInfo: null,
|
||||
eccIdList: [],
|
||||
eqpmGrpNm: '',
|
||||
eqpmGrpId: null,
|
||||
eqpmGrpList: [],
|
||||
eqpmId: [],
|
||||
eqpmNm: null,
|
||||
eqpmIdList: [],
|
||||
eqpmNm: '',
|
||||
eqpmKindId: '',
|
||||
gdIdxId: '',
|
||||
gdIdxIdList: [],
|
||||
checkedRows: [],
|
||||
cmCycle: 'CYC_DAY', // 주기
|
||||
defaultRange: {
|
||||
CYC_DAY: 30,
|
||||
},
|
||||
calcProc: null,
|
||||
calcDesc: null,
|
||||
fromDt: '',
|
||||
toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
|
||||
modalData: {},
|
||||
// 선택된 그룹코드 상세 데이터
|
||||
rowGridSelectKey: 0,
|
||||
rowGridSelectData: null,
|
||||
rowGrid: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {},
|
||||
defaultRow: {
|
||||
fabNm: '',
|
||||
eqpmGrpNm: '',
|
||||
eqpmId: null,
|
||||
gdIdxId: '',
|
||||
careStndVal: '',
|
||||
warnStndVal: '',
|
||||
totVal: '',
|
||||
okFg: '',
|
||||
gdMeth: '',
|
||||
ngCnt: '',
|
||||
rowStat: null,
|
||||
},
|
||||
buttonAuth: {
|
||||
add: false,
|
||||
remove: false,
|
||||
save: false,
|
||||
excel: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.custom-search {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.ant-modal-content .ant-modal-header {
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -1,64 +1,69 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'설비종류'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<div class="l-layout">
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<!-- 설비종류 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'설비종류'"
|
||||
:labelCols="12"
|
||||
:textCols="12"
|
||||
:iconShow="true"
|
||||
:customClass="'select-large'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col :cols="3">
|
||||
<!-- 대상일 -->
|
||||
<component
|
||||
:is="'Datepicker'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'대상일'"
|
||||
:labelCols="3"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="text-right">
|
||||
<!-- 조회버튼 -->
|
||||
<BtnSearch @click="search" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents">
|
||||
<v-col
|
||||
:cols="6"
|
||||
v-for="(item, index) in selectData"
|
||||
:key="item.eqpmGrpId"
|
||||
style="height: 50%"
|
||||
>
|
||||
<!-- <v-card class="pa-5" @click="barClick($event,'card')"> -->
|
||||
<v-card class="pa-5">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<v-card-title class="pa-0">{{ item.eqpmGrpNm }}</v-card-title>
|
||||
</div>
|
||||
<div ref="chartParent" style="height: 90%">
|
||||
<component
|
||||
:id="chartNameList[index]"
|
||||
class="w100 h100 totChart"
|
||||
:is="loadChartList[index] ? 'Chart' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:chartName="chartNameList[index]"
|
||||
:ref="chartNameList[index]"
|
||||
@click="barClick($event, chartNameList[index])"
|
||||
/>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- <v-col :cols="12" style="height: 35%">
|
||||
<v-col :cols="3">
|
||||
<!-- 대상일 -->
|
||||
<component
|
||||
:is="'Datepicker'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:customClass="'select-large'"
|
||||
:label="'대상일'"
|
||||
:labelCols="3"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="6" class="text-right">
|
||||
<!-- 조회버튼 -->
|
||||
<BtnSearch style="margin-top: 20px" size="large" @click="search" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height: 700px">
|
||||
<v-col
|
||||
:cols="6"
|
||||
v-for="(item, index) in selectData"
|
||||
:key="item.eqpmGrpId"
|
||||
style="height: 50vh"
|
||||
>
|
||||
<!-- <v-card class="pa-5" @click="barClick($event,'card')"> -->
|
||||
<v-card class="pa-5">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<v-card-title class="pa-0">{{ item.eqpmGrpNm }}</v-card-title>
|
||||
</div>
|
||||
<div ref="chartParent" style="height: 90%">
|
||||
<component
|
||||
:id="chartNameList[index]"
|
||||
class="w100 h100 totChart"
|
||||
:is="loadChartList[index] ? 'Chart' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:chartName="chartNameList[index]"
|
||||
:ref="chartNameList[index]"
|
||||
@click="barClick($event, chartNameList[index])"
|
||||
/>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- <v-col :cols="12" style="height: 35%">
|
||||
<v-card class="pa-5">
|
||||
<div ref="gridParent">
|
||||
<component
|
||||
@ -70,345 +75,376 @@
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
</div>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapMutations } from 'vuex';
|
||||
import vue from 'vue';
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
import Datepicker from '~/components/common/Datepicker';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import SelectBox from '@/components/common/select/SelectBox';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
import Buttons from '~/components/common/button/Buttons';
|
||||
import Utility from '~/plugins/utility';
|
||||
import Chart from '~/components/common/Chart';
|
||||
import { mapActions, mapMutations } from "vuex";
|
||||
import vue from "vue";
|
||||
import mixinGlobal from "@/mixin/global.js";
|
||||
import { resize } from "@/mixin/resize.js";
|
||||
import Datepicker from "~/components/common/Datepicker";
|
||||
import Grid from "~/components/common/Grid";
|
||||
import SelectBox from "@/components/common/select/SelectBox";
|
||||
import BtnSearch from "~/components/common/button/BtnSearch";
|
||||
import Buttons from "~/components/common/button/Buttons";
|
||||
import Utility from "~/plugins/utility";
|
||||
import Chart from "~/components/common/Chart";
|
||||
let myTitle;
|
||||
let myPrgmId;
|
||||
|
||||
export default {
|
||||
mixins: [mixinGlobal, resize],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
Datepicker,
|
||||
Grid,
|
||||
SelectBox,
|
||||
BtnSearch,
|
||||
Buttons,
|
||||
Utility,
|
||||
Chart,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
selectValue01: null,
|
||||
selectValueList01: [],
|
||||
loadChartList: [],
|
||||
chartNameList: [],
|
||||
selectData: [],
|
||||
url: '',
|
||||
objList: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
fromDt() {
|
||||
return this.pageData.fromDt;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
selectValue01(val) {
|
||||
this.chartNameList = [];
|
||||
this.search();
|
||||
},
|
||||
fromDt(val) {
|
||||
this.chartNameList = [];
|
||||
},
|
||||
},
|
||||
async beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
await this.$store.dispatch('chkOpenTabList', {
|
||||
key: 'create',
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
created() {},
|
||||
async mounted() {
|
||||
await this.init();
|
||||
mixins: [mixinGlobal, resize],
|
||||
async asyncData(context) {
|
||||
const myState = context.store.state;
|
||||
myPrgmId = context.route.query.prgmId;
|
||||
console.log("active menu:", myState.menuData);
|
||||
await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
|
||||
myTitle = await myState.activeMenuInfo.menuNm;
|
||||
},
|
||||
meta: {
|
||||
title: () => {
|
||||
return myTitle;
|
||||
},
|
||||
prgmId: myPrgmId,
|
||||
closable: true,
|
||||
},
|
||||
components: {
|
||||
Datepicker,
|
||||
Grid,
|
||||
SelectBox,
|
||||
BtnSearch,
|
||||
Buttons,
|
||||
Utility,
|
||||
Chart,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myPrgmId: myPrgmId,
|
||||
selectValue01: null,
|
||||
selectValueList01: [],
|
||||
loadChartList: [],
|
||||
chartNameList: [],
|
||||
selectData: [],
|
||||
url: "",
|
||||
objList: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
chkIsFind() {
|
||||
// 조회 플래그
|
||||
return this.pageData.isFind;
|
||||
},
|
||||
fromDt() {
|
||||
return this.pageData.fromDt;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
},
|
||||
selectValue01(val) {
|
||||
this.chartNameList = [];
|
||||
this.search();
|
||||
},
|
||||
fromDt(val) {
|
||||
this.chartNameList = [];
|
||||
},
|
||||
},
|
||||
async beforeCreate() {
|
||||
myPrgmId = this.$route.query.prgmId;
|
||||
await this.$store.dispatch("chkOpenTabList", {
|
||||
key: "create",
|
||||
prgmId: myPrgmId,
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
created() {},
|
||||
async mounted() {
|
||||
await this.init();
|
||||
|
||||
// document.getElementById('totChart').on('click', function(params){
|
||||
// document.getElementById('totChart').on('click', function(params){
|
||||
|
||||
// });
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setChartOption: 'setChartOption',
|
||||
setPageData: 'setPageData',
|
||||
}),
|
||||
...mapActions({
|
||||
getCodeList: 'modules/search/getCodeList',
|
||||
getBlocMstrList: 'modules/search/getBlocMstrList',
|
||||
getAddInfoList: 'modules/search/getAddInfoList',
|
||||
}),
|
||||
async init() {
|
||||
await this.getEqpmKind();
|
||||
await this.getData();
|
||||
// await this.getChartData();
|
||||
// await this.setChartData(data);
|
||||
},
|
||||
async search() {
|
||||
// this.getRowGridData();
|
||||
await this.getData();
|
||||
this.setPageData({
|
||||
isFind: false,
|
||||
});
|
||||
},
|
||||
async getEqpmKind() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmKindCodeList',
|
||||
resKey: 'eqpmKindCodeLists',
|
||||
sendParam: {},
|
||||
});
|
||||
// });
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setChartOption: "setChartOption",
|
||||
setPageData: "setPageData",
|
||||
}),
|
||||
...mapActions({
|
||||
getCodeList: "modules/search/getCodeList",
|
||||
getBlocMstrList: "modules/search/getBlocMstrList",
|
||||
getAddInfoList: "modules/search/getAddInfoList",
|
||||
}),
|
||||
async init() {
|
||||
await this.getEqpmKind();
|
||||
await this.getData();
|
||||
// await this.getChartData();
|
||||
// await this.setChartData(data);
|
||||
},
|
||||
async search() {
|
||||
// this.getRowGridData();
|
||||
await this.getData();
|
||||
this.setPageData({
|
||||
isFind: false,
|
||||
});
|
||||
},
|
||||
async getEqpmKind() {
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: "selectEqpmKindCodeList",
|
||||
// resKey: "eqpmKindCodeLists",
|
||||
// sendParam: {},
|
||||
// });
|
||||
|
||||
if (res.length > 0) {
|
||||
this.selectValueList01 = await res.map(item => {
|
||||
return {
|
||||
text: item.eqpmKindNm,
|
||||
value: item.eqpmKindId,
|
||||
};
|
||||
});
|
||||
this.selectValue01 = this.selectValueList01[0].value;
|
||||
} else {
|
||||
this.selectValueList01 = [];
|
||||
this.selectValue01 = null;
|
||||
}
|
||||
this.setPageData({
|
||||
eqpmKindList: this.selectValueList01,
|
||||
eqpmKindId: this.selectValue01,
|
||||
});
|
||||
},
|
||||
gridInit() {},
|
||||
getRowGridData() {},
|
||||
async getData() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEnrgEffcTotSumm',
|
||||
resKey: 'totSummData',
|
||||
sendParam: {
|
||||
fromDt: this.pageData.fromDt,
|
||||
eqpmKindId: this.selectValue01,
|
||||
},
|
||||
});
|
||||
let res = [
|
||||
{
|
||||
eqpmKindId: "냉동기저온",
|
||||
eqpmKindNm: "냉동기저온",
|
||||
},
|
||||
{
|
||||
eqpmKindId: "냉동기고온",
|
||||
eqpmKindNm: "냉동기고온",
|
||||
},
|
||||
];
|
||||
|
||||
await this.getChartData(res);
|
||||
if (res.length > 0) {
|
||||
this.selectValueList01 = await res.map((item) => {
|
||||
return {
|
||||
// text: item.eqpmKindNm,
|
||||
label: item.eqpmKindNm,
|
||||
value: item.eqpmKindId,
|
||||
};
|
||||
});
|
||||
this.selectValue01 = this.selectValueList01[0].value;
|
||||
} else {
|
||||
this.selectValueList01 = [];
|
||||
this.selectValue01 = null;
|
||||
}
|
||||
this.setPageData({
|
||||
eqpmKindList: this.selectValueList01,
|
||||
eqpmKindId: this.selectValue01,
|
||||
});
|
||||
},
|
||||
gridInit() {},
|
||||
getRowGridData() {},
|
||||
async getData() {
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey: "selectEnrgEffcTotSumm",
|
||||
// resKey: "totSummData",
|
||||
// sendParam: {
|
||||
// fromDt: this.pageData.fromDt,
|
||||
// eqpmKindId: this.selectValue01,
|
||||
// },
|
||||
// });
|
||||
let res = ["aaa", "bbb"];
|
||||
await this.getChartData(res);
|
||||
|
||||
this.selectData = res.filter((item, i) => {
|
||||
return (
|
||||
res.findIndex((item2, j) => {
|
||||
return item.eqpmGrpId === item2.eqpmGrpId;
|
||||
}) === i
|
||||
);
|
||||
});
|
||||
},
|
||||
barClick(event, chartName) {
|
||||
var data = {};
|
||||
if (chartName == 'card') {
|
||||
data.fromDt = null;
|
||||
data.eqpmGrpId = null;
|
||||
data.eqpmGrpNm = null;
|
||||
data.fabId = null;
|
||||
data.fabNm = null;
|
||||
data.okFg = null;
|
||||
data.eqpmKindNm = null;
|
||||
} else {
|
||||
var chartData = this.objList[chartName];
|
||||
data.fromDt = this.pageData.fromDt;
|
||||
data.eqpmGrpId = chartData[event.dataIndex].eqpmGrpId;
|
||||
data.eqpmGrpNm = chartData[event.dataIndex].eqpmGrpNm;
|
||||
data.fabId = chartData[event.dataIndex].fabId;
|
||||
data.fabNm = chartData[event.dataIndex].fabNm;
|
||||
data.okFg = event.seriesName;
|
||||
data.eqpmKindId = this.selectValue01;
|
||||
}
|
||||
// this.selectData = res.filter((item, i) => {
|
||||
// return (
|
||||
// res.findIndex((item2, j) => {
|
||||
// return item.eqpmGrpId === item2.eqpmGrpId;
|
||||
// }) === i
|
||||
// );
|
||||
// });
|
||||
|
||||
this.$router.push({
|
||||
name: 'ems-effc-EnrgEffcEqpmDetlMntrPage',
|
||||
params: {
|
||||
...data,
|
||||
key: 'data_' + Math.random(),
|
||||
},
|
||||
query: {
|
||||
prgmId: 'PRG0084',
|
||||
// key : "data_"+Math.random()
|
||||
},
|
||||
});
|
||||
},
|
||||
async getChartData(data) {
|
||||
var chartDataObj = {};
|
||||
this.objList = {};
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey : 'selectEnrgEffcTotSumm',
|
||||
// resKey : 'totSummData',
|
||||
// sendParam:{
|
||||
// fromDt : this.pageData.fromDt,
|
||||
// eqpmKindId : this.pageData.eqpmKindId,
|
||||
// }
|
||||
// });
|
||||
this.selectData = [
|
||||
{ eqpmGrpId: "G001", eqpmGrpNm: "Group A", otherProp: "..." },
|
||||
{ eqpmGrpId: "G002", eqpmGrpNm: "Group B", otherProp: "..." },
|
||||
];
|
||||
},
|
||||
barClick(event, chartName) {
|
||||
var data = {};
|
||||
if (chartName == "card") {
|
||||
data.fromDt = null;
|
||||
data.eqpmGrpId = null;
|
||||
data.eqpmGrpNm = null;
|
||||
data.fabId = null;
|
||||
data.fabNm = null;
|
||||
data.okFg = null;
|
||||
data.eqpmKindNm = null;
|
||||
} else {
|
||||
var chartData = this.objList[chartName];
|
||||
data.fromDt = this.pageData.fromDt;
|
||||
data.eqpmGrpId = chartData[event.dataIndex].eqpmGrpId;
|
||||
data.eqpmGrpNm = chartData[event.dataIndex].eqpmGrpNm;
|
||||
data.fabId = chartData[event.dataIndex].fabId;
|
||||
data.fabNm = chartData[event.dataIndex].fabNm;
|
||||
data.okFg = event.seriesName;
|
||||
data.eqpmKindId = this.selectValue01;
|
||||
}
|
||||
|
||||
data.map(item => {
|
||||
if (chartDataObj[item.eqpmGrpId] != null) {
|
||||
chartDataObj[item.eqpmGrpId].push(item);
|
||||
} else {
|
||||
chartDataObj[item.eqpmGrpId] = [item];
|
||||
}
|
||||
});
|
||||
this.$router.push({
|
||||
name: "ems-effc-EnrgEffcEqpmDetlMntrPage",
|
||||
params: {
|
||||
...data,
|
||||
key: "data_" + Math.random(),
|
||||
},
|
||||
query: {
|
||||
prgmId: "PRG0084",
|
||||
// key : "data_"+Math.random()
|
||||
},
|
||||
});
|
||||
},
|
||||
async getChartData(data) {
|
||||
var chartDataObj = {};
|
||||
this.objList = {};
|
||||
// let res = await this.postApiReturn({
|
||||
// apiKey : 'selectEnrgEffcTotSumm',
|
||||
// resKey : 'totSummData',
|
||||
// sendParam:{
|
||||
// fromDt : this.pageData.fromDt,
|
||||
// eqpmKindId : this.pageData.eqpmKindId,
|
||||
// }
|
||||
// });
|
||||
|
||||
// chartDataObj.keys()[0]
|
||||
var i = 0;
|
||||
for (var x of Object.keys(chartDataObj)) {
|
||||
this.loadChartList.push(false);
|
||||
i++;
|
||||
this.objList['chart_0' + i] = chartDataObj[x];
|
||||
this.chartNameList.push('chart_0' + i);
|
||||
this.setPageData({
|
||||
[this.chartNameList[i - 1]]: Utility.defaultChartOption(true),
|
||||
});
|
||||
// data.map((item) => {
|
||||
// if (chartDataObj[item.eqpmGrpId] != null) {
|
||||
// chartDataObj[item.eqpmGrpId].push(item);
|
||||
// } else {
|
||||
// chartDataObj[item.eqpmGrpId] = [item];
|
||||
// }
|
||||
// });
|
||||
|
||||
this.setChartData(chartDataObj[x], i);
|
||||
}
|
||||
// this.setChartData(chartDataObj[Object.keys(chartDataObj)[0]]);
|
||||
},
|
||||
async setChartData(data, number) {
|
||||
this.loadChartList[number - 1] = false;
|
||||
let xAxisData = [];
|
||||
let seriesData = [];
|
||||
var emphasisStyle = {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0,0,0,0.3)',
|
||||
},
|
||||
};
|
||||
chartDataObj = {
|
||||
group1: [
|
||||
{ fabNm: "Fab A", okCnt: 120, ngCnt: 30 },
|
||||
{ fabNm: "Fab B", okCnt: 150, ngCnt: 20 },
|
||||
{ fabNm: "Fab C", okCnt: 100, ngCnt: 50 },
|
||||
],
|
||||
group2: [
|
||||
{ fabNm: "Fab D", okCnt: 180, ngCnt: 10 },
|
||||
{ fabNm: "Fab E", okCnt: 160, ngCnt: 25 },
|
||||
{ fabNm: "Fab F", okCnt: 140, ngCnt: 35 },
|
||||
],
|
||||
};
|
||||
|
||||
// console.log("data : ", data);
|
||||
data.map(item => {
|
||||
xAxisData.push(item.fabNm);
|
||||
});
|
||||
// chartDataObj.keys()[0]
|
||||
var i = 0;
|
||||
for (var x of Object.keys(chartDataObj)) {
|
||||
this.loadChartList.push(false);
|
||||
i++;
|
||||
this.objList["chart_0" + i] = chartDataObj[x];
|
||||
this.chartNameList.push("chart_0" + i);
|
||||
this.setPageData({
|
||||
[this.chartNameList[i - 1]]: Utility.defaultChartOption(true),
|
||||
});
|
||||
this.setChartData(chartDataObj[x], i);
|
||||
}
|
||||
// this.setChartData(chartDataObj[Object.keys(chartDataObj)[0]]);
|
||||
},
|
||||
async setChartData(data, number) {
|
||||
this.loadChartList[number - 1] = false;
|
||||
let xAxisData = [];
|
||||
let seriesData = [];
|
||||
var emphasisStyle = {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "rgba(0,0,0,0.3)",
|
||||
},
|
||||
};
|
||||
|
||||
seriesData.push({
|
||||
name: 'OK',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: '40',
|
||||
emphasis: emphasisStyle,
|
||||
data: data.map(obj => obj['okCnt']),
|
||||
});
|
||||
seriesData.push({
|
||||
name: 'NG',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: '40',
|
||||
emphasis: emphasisStyle,
|
||||
data: data.map(obj => obj['ngCnt']),
|
||||
});
|
||||
var dataZoom = [];
|
||||
if (xAxisData.length > 7) {
|
||||
dataZoom = [
|
||||
{
|
||||
type: 'inside',
|
||||
disabled: false,
|
||||
start: 0,
|
||||
end: parseInt(700 / xAxisData.length) - 1,
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
moveOnMouseMove: true,
|
||||
start: 0,
|
||||
end: parseInt(700 / xAxisData.length) - 1,
|
||||
},
|
||||
];
|
||||
} else {
|
||||
dataZoom = [
|
||||
{
|
||||
type: 'inside',
|
||||
disabled: true,
|
||||
start: 0,
|
||||
end: parseInt(700 / xAxisData.length) - 1,
|
||||
},
|
||||
{
|
||||
show: false,
|
||||
moveOnMouseMove: false,
|
||||
start: 0,
|
||||
end: parseInt(700 / xAxisData.length) - 1,
|
||||
},
|
||||
];
|
||||
}
|
||||
console.log("data : ", data);
|
||||
data.map((item) => {
|
||||
xAxisData.push(item.fabNm);
|
||||
});
|
||||
|
||||
// console.log("xAxisData : ", xAxisData);
|
||||
// console.log("seriesData : ", seriesData);
|
||||
var chartOption = {
|
||||
legend: {
|
||||
top: xAxisData.length > 7 ? 'top' : 'bottom',
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
bottom: '16%',
|
||||
},
|
||||
yAxis: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
},
|
||||
series: seriesData,
|
||||
tooltip: {},
|
||||
dataZoom: dataZoom,
|
||||
};
|
||||
seriesData.push({
|
||||
name: "OK",
|
||||
type: "bar",
|
||||
stack: "one",
|
||||
barWidth: "40",
|
||||
emphasis: emphasisStyle,
|
||||
data: data.map((obj) => obj["okCnt"]),
|
||||
});
|
||||
seriesData.push({
|
||||
name: "NG",
|
||||
type: "bar",
|
||||
stack: "one",
|
||||
barWidth: "40",
|
||||
emphasis: emphasisStyle,
|
||||
data: data.map((obj) => obj["ngCnt"]),
|
||||
});
|
||||
|
||||
await this.$nextTick();
|
||||
this.setChartOption({
|
||||
chartKey: this.chartNameList[number - 1],
|
||||
value: chartOption,
|
||||
});
|
||||
this.loadChartList[number - 1] = true;
|
||||
},
|
||||
},
|
||||
var dataZoom = [];
|
||||
if (xAxisData.length > 7) {
|
||||
dataZoom = [
|
||||
{
|
||||
type: "inside",
|
||||
disabled: false,
|
||||
start: 0,
|
||||
end: parseInt(700 / xAxisData.length) - 1,
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
moveOnMouseMove: true,
|
||||
start: 0,
|
||||
end: parseInt(700 / xAxisData.length) - 1,
|
||||
},
|
||||
];
|
||||
} else {
|
||||
dataZoom = [
|
||||
{
|
||||
type: "inside",
|
||||
disabled: true,
|
||||
start: 0,
|
||||
end: parseInt(700 / xAxisData.length) - 1,
|
||||
},
|
||||
{
|
||||
show: false,
|
||||
moveOnMouseMove: false,
|
||||
start: 0,
|
||||
end: parseInt(700 / xAxisData.length) - 1,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// console.log("xAxisData : ", xAxisData);
|
||||
console.log("seriesData : ", seriesData);
|
||||
var chartOption = {
|
||||
legend: {
|
||||
top: xAxisData.length > 7 ? "top" : "bottom",
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
bottom: "16%",
|
||||
},
|
||||
yAxis: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
},
|
||||
series: seriesData,
|
||||
tooltip: {},
|
||||
dataZoom: dataZoom,
|
||||
};
|
||||
|
||||
await this.$nextTick();
|
||||
this.setChartOption({
|
||||
chartKey: this.chartNameList[number - 1],
|
||||
value: chartOption,
|
||||
});
|
||||
this.loadChartList[number - 1] = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultData = {
|
||||
isFind: false,
|
||||
eqpmKindList: [],
|
||||
eqpmKindId: '',
|
||||
cmCycle: 'CYC_DAY', // 주기
|
||||
defaultRange: {
|
||||
CYC_DAY: 0,
|
||||
},
|
||||
fromDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'), // 조회 시작일
|
||||
isFind: false,
|
||||
eqpmKindList: [],
|
||||
eqpmKindId: "",
|
||||
cmCycle: "CYC_DAY", // 주기
|
||||
defaultRange: {
|
||||
CYC_DAY: 0,
|
||||
},
|
||||
fromDt: Utility.setFormatDate(new Date(), "YYYYMMDD"), // 조회 시작일
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/scss/common.scss';
|
||||
// @import "@/assets/scss/common.scss";
|
||||
|
||||
// .echarts::v-deep > div > canvas:hover {
|
||||
// cursor: pointer;
|
||||
|
||||
@ -3,68 +3,51 @@
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<v-row align="end" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<!-- 차트목록 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'차트'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" ref="SelectBox" :propsValue="selectValue01" :itemList="selectValueList01"
|
||||
:label="'차트'" @update:propsValue="selectValue01 = $event" :textCols="12" customClass="select-large" />
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<!-- 대상일 -->
|
||||
<component
|
||||
:is="'Datepicker'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'대상일'"
|
||||
:labelCols="3"
|
||||
/>
|
||||
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" />
|
||||
</v-col>
|
||||
<v-col :cols="5" class="text-right">
|
||||
<v-col :cols="4" class="text-right">
|
||||
<BtnSearch @click="search" size="large" />
|
||||
<!-- 조회버튼 -->
|
||||
<BtnSearch @click="search" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents">
|
||||
<v-col :cols="12" style="height: 100%">
|
||||
<v-col :cols="12" style="min-height: 50vh">
|
||||
<v-card class="pb-5">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">에너지 현황</v-card-title>
|
||||
</div>
|
||||
<v-row>
|
||||
<!-- <div style="text-align:center;"> -->
|
||||
<v-col class="arrowCols" :cols="3" style="text-align:center;">
|
||||
<div class="arrowText">고압반</div>
|
||||
<v-row align="center" class="mx-2">
|
||||
<v-col class="d-flex align-center">
|
||||
<span class="arrowText">
|
||||
<v-btn class="" outlined fab x-small color="#E6F4FF">
|
||||
<v-icon>check</v-icon>
|
||||
</v-btn>
|
||||
고압반
|
||||
</span>
|
||||
<div class="col arrow-right mx-2 pa-0"></div>
|
||||
<span class="arrowText">
|
||||
분전반
|
||||
<v-btn class="" outlined fab x-small color="#E6F4FF">
|
||||
<v-icon>check</v-icon>
|
||||
</v-btn>
|
||||
</span>
|
||||
</v-col>
|
||||
<!-- <span class="mdi mdi-arrow-right-bold" size="mdi-48px"></span> -->
|
||||
<!-- <i class="mdi mdi-arrow-right-bold"></i> -->
|
||||
<!-- <span style="width:1000px;">⟶</span> -->
|
||||
<v-col class="iconArrowCols" :cols="6">
|
||||
<div class="arrow-right"></div>
|
||||
<!-- <img class="icon_arrow" src="@/assets/images/icon/ico-enrgMap.png"/> -->
|
||||
</v-col>
|
||||
|
||||
<v-col class="arrowCols" :cols="3" style="text-align:center;">
|
||||
<div class="arrowText">분전반</div>
|
||||
</v-col>
|
||||
<!-- </div> -->
|
||||
</v-row>
|
||||
<div class="px-5" style="height:80%">
|
||||
<div class="px-5" style="height: 80%">
|
||||
<div ref="chartParent" class="w100 h100">
|
||||
<component
|
||||
:ref="chartName"
|
||||
class="w100 h100"
|
||||
:is="loadChart ? 'Chart' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:chartName="chartName"
|
||||
/>
|
||||
<component :ref="chartName" class="w100 h100" :is="loadChart ? 'Chart' : null" :parentPrgmId="myPrgmId"
|
||||
:chartName="chartName" />
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
@ -117,7 +100,6 @@ export default {
|
||||
selectValue01: null,
|
||||
loadChart: false,
|
||||
chartName: 'sankeyChart',
|
||||
loadChart: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -174,8 +156,11 @@ export default {
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
async created() {},
|
||||
async created() { },
|
||||
async mounted() {
|
||||
this.initTest();
|
||||
return;
|
||||
|
||||
this.init();
|
||||
// document.querySelector('.icon_arrow').style.width = document.querySelector('.iconArrowCols').clientWidth-20 + "px";
|
||||
},
|
||||
@ -190,6 +175,80 @@ export default {
|
||||
...mapActions({
|
||||
getCodeList: 'modules/search/getCodeList',
|
||||
}),
|
||||
initTest() {
|
||||
|
||||
const randomNumber = n => Math.floor(Math.random() * n) + 1;
|
||||
|
||||
const makeData = [
|
||||
{ name: 'A' },
|
||||
{ name: 'B' },
|
||||
{ name: 'B2' },
|
||||
{ name: 'C1' },
|
||||
{ name: 'C2' },
|
||||
{ name: 'C3' },
|
||||
// { name: 'D' }
|
||||
];
|
||||
const makeLinks = [
|
||||
{ source: 'A', target: 'B', value: 100 },
|
||||
{ source: 'A', target: 'B2', value: 50 },
|
||||
{ source: 'B', target: 'C1', value: 50 },
|
||||
{ source: 'B', target: 'C2', value: 50 },
|
||||
{ source: 'B2', target: 'C3', value: 50 },
|
||||
];
|
||||
for (let index = 0; index < 10; index++) {
|
||||
makeData.push(...[
|
||||
{ name: 'D' + index },
|
||||
]);
|
||||
makeLinks.push(...[
|
||||
{ source: 'C' + randomNumber(3), target: 'D' + index, value: randomNumber(50) },
|
||||
]);
|
||||
}
|
||||
|
||||
const chartOption = {
|
||||
backgroundColor: '#FFFFFF',
|
||||
series: [
|
||||
{
|
||||
layoutIterations: 0,
|
||||
type: 'sankey',
|
||||
left: 25.0,
|
||||
top: 20.0,
|
||||
right: 120,
|
||||
bottom: 50.0,
|
||||
// nodeWidth:10,
|
||||
nodeGap: 10,
|
||||
nodeAlign: 'left',
|
||||
data: makeData,
|
||||
links: makeLinks,
|
||||
lineStyle: {
|
||||
color: 'source',
|
||||
curveness: 0.5,
|
||||
},
|
||||
// triggerEvent: true,
|
||||
itemStyle: {
|
||||
//color: '#1f77b4',
|
||||
//borderColor: '#1f77b4'
|
||||
},
|
||||
label: {
|
||||
color: this.isDarkMode
|
||||
? 'rgba(250,250,250,0.7)'
|
||||
: 'rgba(0,0,0,0.7)',
|
||||
fontFamily: 'Arial',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
this.setChartOption({ chartKey: this.chartName, value: chartOption });
|
||||
// console.log("----DEBUG chart-options-------", { chartOption });
|
||||
this.$nextTick(() => {
|
||||
this.loadChart = true;
|
||||
});
|
||||
},
|
||||
async init() {
|
||||
await this.getEnrgMapChartList();
|
||||
this.setFromDt();
|
||||
@ -367,7 +426,7 @@ export default {
|
||||
for (var i = 0; i < makeData.length; i++) {
|
||||
makeData[i]['label'] = {
|
||||
show: true,
|
||||
formatter: function(obj) {
|
||||
formatter: function (obj) {
|
||||
var retVal = makeLinks.filter(n => {
|
||||
return n.target == obj.name;
|
||||
});
|
||||
@ -381,7 +440,7 @@ export default {
|
||||
},
|
||||
};
|
||||
makeData[i]['tooltip'] = {
|
||||
formatter: function(obj) {
|
||||
formatter: function (obj) {
|
||||
var retVal = makeLinks.filter(n => {
|
||||
return n.target == obj.name;
|
||||
});
|
||||
@ -465,7 +524,7 @@ export default {
|
||||
// });
|
||||
|
||||
//1차 정렬
|
||||
tempMakeLinks.sort(function(a, b) {
|
||||
tempMakeLinks.sort(function (a, b) {
|
||||
if (a.source == b.source) {
|
||||
return b.value - a.value;
|
||||
}
|
||||
@ -530,45 +589,41 @@ const defaultData = {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .icon-arrow {
|
||||
// display:inline-block;
|
||||
// position: relative;
|
||||
// height: 60px;
|
||||
<style lang="scss" scoped>
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.arrowText {
|
||||
.v-btn {
|
||||
background-color: map-deep-get($config, #{$theme}, "arow-line-btn-bg-color"); // #E6F4FF;
|
||||
border: none;
|
||||
|
||||
// // top: 20px;
|
||||
// // left: 0;
|
||||
.v-icon {
|
||||
color: map-deep-get($config, #{$theme}, "arow-line-color"); // #1677FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
// .arrowText{
|
||||
// // align-items: center;
|
||||
// display: inline-block;
|
||||
// flex-wrap: wrap;
|
||||
// font-size: 1.25rem;
|
||||
// font-weight: 700;
|
||||
// letter-spacing: 0.0125em;
|
||||
// line-height: 1.5;
|
||||
// word-break: break-all;
|
||||
// position: relative;
|
||||
// line-height:60px;
|
||||
// }
|
||||
.arrow-right {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
}
|
||||
.arrow-right:before {
|
||||
content: '';
|
||||
background: #594dff;
|
||||
width: 100%;
|
||||
clip-path: polygon(
|
||||
0 10px,
|
||||
calc(100% - 15px) 10px,
|
||||
calc(100% - 15px) 0,
|
||||
100% 50%,
|
||||
calc(100% - 15px) 100%,
|
||||
calc(100% - 15px) calc(100% - 10px),
|
||||
0 calc(100% - 10px)
|
||||
);
|
||||
.arrow-right {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
display: flex;
|
||||
background-color: map-deep-get($config, #{$theme}, "arow-line-color"); //#1677FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .arrow-right:before {
|
||||
// // content: '';
|
||||
// background: #594dff;
|
||||
// width: 100%;
|
||||
// clip-path: polygon(
|
||||
// 0 10px,
|
||||
// calc(100% - 15px) 10px,
|
||||
// calc(100% - 15px) 0,
|
||||
// 100% 50%,
|
||||
// calc(100% - 15px) 100%,
|
||||
// calc(100% - 15px) calc(100% - 10px),
|
||||
// 0 calc(100% - 10px)
|
||||
// );
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -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),
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -3,50 +3,28 @@
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<v-row align="end" no-gutters>
|
||||
<v-col :cols="2.5">
|
||||
<DatePicker :parentPrgmId="myPrgmId" :label="'조회연도'" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'FAB'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
<v-col :cols="2.5">
|
||||
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01" :itemList="selectValueList01"
|
||||
:label="'FAB'" @update:propsValue="selectValue01 = $event" :iconShow="false" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox2"
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'설비종류'"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
<v-col :cols="2.5">
|
||||
<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02" :itemList="selectValueList02"
|
||||
:label="'설비종류'" @update:propsValue="selectValue02 = $event" :iconShow="false" />
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox3"
|
||||
:propsValue="selectValue03"
|
||||
:itemList="selectValueList03"
|
||||
:label="'설비그룹'"
|
||||
@update:propsValue="selectValue03 = $event"
|
||||
/>
|
||||
<v-col :cols="2.5">
|
||||
<component :is="'SelectBox'" ref="SelectBox3" :propsValue="selectValue03" :itemList="selectValueList03"
|
||||
:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :iconShow="false" />
|
||||
</v-col>
|
||||
<v-col :cols="1" class="text-right">
|
||||
<BtnSearch @click="search" />
|
||||
<component
|
||||
ref="EnrgUsePlanModiPop"
|
||||
:is="'EnrgUsePlanModiPop'"
|
||||
:label="'test'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
@gridEditingFinish="gridEditingFinish"
|
||||
/>
|
||||
|
||||
<BtnSearch @click="search" />
|
||||
<v-col>
|
||||
</v-col>
|
||||
<component ref="EnrgUsePlanModiPop" :is="'EnrgUsePlanModiPop'" :label="'test'" :parentPrgmId="myPrgmId"
|
||||
@gridEditingFinish="gridEditingFinish" />
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
@ -55,34 +33,25 @@
|
||||
<v-col :cols="12" style="height: 100%">
|
||||
<v-card class="pb-5 h100">
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
|
||||
:editorGrid="true" @getRowsData="getRowData" :dataPath="dataPathMock" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
import { mapState, mapActions, mapMutations } from 'vuex';
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { resize } from '@/mixin/resize.js';
|
||||
import SelectBox from '@/components/common/select/SelectBox';
|
||||
@ -139,6 +108,9 @@ export default {
|
||||
fromDt: new Date().getFullYear(),
|
||||
rowKey: null,
|
||||
edtingFinishFlag: 'Y',
|
||||
dataPathMock: {
|
||||
// "grid01": {}
|
||||
},
|
||||
// gridName: 'rowGrid',
|
||||
};
|
||||
},
|
||||
@ -196,8 +168,12 @@ export default {
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
async mounted() {
|
||||
// -------
|
||||
this.initTest();
|
||||
return;
|
||||
// ========End test===========
|
||||
await this.init();
|
||||
this.initedFlag = true;
|
||||
},
|
||||
@ -210,6 +186,122 @@ export default {
|
||||
getBlocMstrList: 'modules/search/getBlocMstrList',
|
||||
getAddInfoList: 'modules/search/getAddInfoList',
|
||||
}),
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
}),
|
||||
initTest() {
|
||||
let _this = this;
|
||||
// _this.setPageData({ popupDialogFg: true });
|
||||
|
||||
class MockCustumButton {
|
||||
constructor(props) {
|
||||
const { grid, rowKey, columnInfo } = props;
|
||||
const value = columnInfo.renderer.options.value;
|
||||
|
||||
const elDiv = document.createElement('div');
|
||||
elDiv.innerHTML = `<span>${value}</span>`;
|
||||
$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
|
||||
const el = document.createElement('button');
|
||||
$(el).addClass('edit-btn blue--text');
|
||||
el.innerText = 'Edit';
|
||||
|
||||
el.addEventListener('click', function (event) {
|
||||
// console.log("------DEBUG----_this:", _this);
|
||||
// _this.setPageData({ eqpmNm: selectedGridData[0]?.eqpmNm });
|
||||
_this.setPageData({ popupDialogFg: true });
|
||||
});
|
||||
|
||||
elDiv.appendChild(el);
|
||||
this.elDiv = elDiv;
|
||||
}
|
||||
|
||||
getElement() {
|
||||
return this.elDiv;
|
||||
}
|
||||
}
|
||||
const mockData = {
|
||||
column: [
|
||||
{ header: 'No', name: 'rowNum', align: 'center', width: 40 },
|
||||
{ header: 'FAB', name: 'fab', align: 'left', width: 80 },
|
||||
{ header: '설비 그룹', name: 'eqpmGrpNm', align: 'left', minWidth: 150 },
|
||||
// {
|
||||
// header: '설비명', name: 'eqpmNm', align: 'left', minWidth: 150,
|
||||
// formatter: ({ value, row }) => {
|
||||
// return `
|
||||
// <div class="d-flex justify-space-between">
|
||||
// <span>${value}</span>
|
||||
// <button class="edit-btn blue--text" data-row='${JSON.stringify(row)}'>Edit</button
|
||||
// </div>
|
||||
// `;
|
||||
// }
|
||||
// },
|
||||
{
|
||||
header: '설비명',
|
||||
name: 'eqpmNm',
|
||||
width: 70,
|
||||
align: 'left',
|
||||
minWidth: 150,
|
||||
renderer: {
|
||||
type: MockCustumButton,
|
||||
options: {
|
||||
value: '계획수정',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '구분', name: 'gubun', align: 'left', width: 80,
|
||||
formatter({ value }) {
|
||||
let retVal = '';
|
||||
if (value == '1RSLT') {
|
||||
retVal = '전년실적';
|
||||
} else if (value == '2PLAN') {
|
||||
retVal = '계획';
|
||||
} else {
|
||||
retVal = value;
|
||||
}
|
||||
return retVal;
|
||||
},
|
||||
},
|
||||
|
||||
{ header: '1월', name: 'jan', align: 'right', width: 80 },
|
||||
{ header: '2월', name: 'feb', align: 'right', width: 80 },
|
||||
{ header: '3월', name: 'mar', align: 'right', width: 80 },
|
||||
{ header: '4월', name: 'apr', align: 'right', width: 80 },
|
||||
{ header: '5월', name: 'may', align: 'right', width: 80 },
|
||||
{ header: '6월', name: 'jun', align: 'right', width: 80 },
|
||||
{ header: '7월', name: 'jul', align: 'right', width: 80 },
|
||||
{ header: '8월', name: 'aug', align: 'right', width: 80 },
|
||||
{ header: '9월', name: 'sep', align: 'right', width: 80 },
|
||||
{ header: '10월', name: 'oct', align: 'right', width: 80 },
|
||||
{ header: '11월', name: 'nov', align: 'right', width: 80 },
|
||||
{ header: '12월', name: 'dec', align: 'right', width: 80 }
|
||||
],
|
||||
data: dataPathDataExample,
|
||||
defaultRow: dataPathDataExample,
|
||||
option: {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
header: {
|
||||
height: 65,
|
||||
complexColumns: [
|
||||
{
|
||||
header: '2025 년',
|
||||
name: 'yyyyCol',
|
||||
childNames: [
|
||||
'jan', 'feb', 'mar', 'apr', 'may', 'jun',
|
||||
'jul', 'aug', 'sep', 'oct', 'nov', 'dec'
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
};
|
||||
this.dataPathMock[this.gridName] = mockData;
|
||||
this.$nextTick(() => {
|
||||
this.loadGrid = true;
|
||||
});
|
||||
},
|
||||
async init() {
|
||||
await this.getFab();
|
||||
await this.getEqpmKind();
|
||||
@ -357,7 +449,7 @@ export default {
|
||||
|
||||
if (!this.disabled) {
|
||||
// hover 기능 구현
|
||||
this.el.addEventListener('mouseover', function(event) {
|
||||
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'));
|
||||
@ -366,7 +458,7 @@ export default {
|
||||
// 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) {
|
||||
this.el.addEventListener('mouseout', function (event) {
|
||||
// rgb(71, 119, 217) // light
|
||||
// el.style.backgroundColor = '#144985'; // dark
|
||||
// console.log('event',event.fromElement);
|
||||
@ -374,7 +466,7 @@ export default {
|
||||
// el.style.backgroundColor = btnColor['mouseOut'];
|
||||
});
|
||||
// click 이벤트
|
||||
this.el.addEventListener('click', function(event) {
|
||||
this.el.addEventListener('click', function (event) {
|
||||
let gridData = grid.store.data.rawData;
|
||||
let rowNum = gridData[rowKey].rowNum;
|
||||
let selectedGridData = gridData.filter(item => {
|
||||
@ -445,6 +537,12 @@ 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>
|
||||
`;
|
||||
}
|
||||
},
|
||||
{
|
||||
header: '',
|
||||
@ -525,7 +623,7 @@ export default {
|
||||
let selectedGridData = gridData.filter(item => {
|
||||
return item.rowNum == data.rowNum;
|
||||
});
|
||||
await this.$nextTick(() => {});
|
||||
await this.$nextTick(() => { });
|
||||
this.setPageData({
|
||||
rowGrid2SelectData: selectedGridData,
|
||||
});
|
||||
@ -724,8 +822,8 @@ export default {
|
||||
dataArr[i][qty] == ''
|
||||
? null
|
||||
: parseInt(dataArr[i][qty]) == 0
|
||||
? 0
|
||||
: dataArr[i][qty];
|
||||
? 0
|
||||
: dataArr[i][qty];
|
||||
dataList.push(temp);
|
||||
}
|
||||
}
|
||||
@ -867,18 +965,110 @@ const defaultData = {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const dataPathDataExample = [
|
||||
{
|
||||
rowNum: 1,
|
||||
fab: 'B01',
|
||||
eqpmGrpNm: '방송기술운',
|
||||
eqpmNm: 'U/T_LT_CH101',
|
||||
gubun: '전력량',
|
||||
jan: 110000,
|
||||
feb: 112000,
|
||||
mar: 115000,
|
||||
apr: 117000,
|
||||
may: 120000,
|
||||
jun: 118000,
|
||||
jul: 119000,
|
||||
aug: 121000,
|
||||
sep: 122000,
|
||||
oct: 123000,
|
||||
nov: 124000,
|
||||
dec: 125000
|
||||
},
|
||||
{
|
||||
rowNum: 2,
|
||||
fab: 'B02',
|
||||
eqpmGrpNm: '방송기술운',
|
||||
eqpmNm: 'U/T_LT_CH102',
|
||||
gubun: '전력량',
|
||||
jan: 81000,
|
||||
feb: 82000,
|
||||
mar: 83000,
|
||||
apr: 84000,
|
||||
may: 85000,
|
||||
jun: 86000,
|
||||
jul: 87000,
|
||||
aug: 88000,
|
||||
sep: 89000,
|
||||
oct: 90000,
|
||||
nov: 91000,
|
||||
dec: 92000
|
||||
},
|
||||
{
|
||||
rowNum: 3, fab: 'C01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH124', gubun: '수도량',
|
||||
jan: 106178, feb: 104740, mar: 92283, apr: 116081, may: 98945, jun: 126579,
|
||||
jul: 90690, aug: 124243, sep: 97524, oct: 84072, nov: 88160, dec: 118183
|
||||
},
|
||||
{
|
||||
rowNum: 4, fab: 'B01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH103', gubun: '가스량',
|
||||
jan: 80442, feb: 102867, mar: 114939, apr: 106335, may: 81743, jun: 83711,
|
||||
jul: 86114, aug: 97432, sep: 84146, oct: 84775, nov: 117921, dec: 119417
|
||||
},
|
||||
{
|
||||
rowNum: 5, fab: 'B01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH156', gubun: '전력량',
|
||||
jan: 90341, feb: 94072, mar: 122754, apr: 85471, may: 90813, jun: 116831,
|
||||
jul: 90856, aug: 109437, sep: 94029, oct: 96075, nov: 127067, dec: 102503
|
||||
},
|
||||
{
|
||||
rowNum: 6, fab: 'B03', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH183', gubun: '가스량',
|
||||
jan: 104163, feb: 107012, mar: 104631, apr: 83055, may: 106311, jun: 117306,
|
||||
jul: 86434, aug: 117087, sep: 118414, oct: 91499, nov: 93829, dec: 94192
|
||||
},
|
||||
{
|
||||
rowNum: 7, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH158', gubun: '가스량',
|
||||
jan: 84821, feb: 128234, mar: 116883, apr: 116718, may: 114738, jun: 88297,
|
||||
jul: 93840, aug: 84700, sep: 98360, oct: 87021, nov: 113098, dec: 94734
|
||||
},
|
||||
{
|
||||
rowNum: 8, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH179', gubun: '가스량',
|
||||
jan: 128714, feb: 88797, mar: 124808, apr: 109283, may: 113141, jun: 82873,
|
||||
jul: 114993, aug: 129108, sep: 100885, oct: 125730, nov: 92127, dec: 122286
|
||||
},
|
||||
{
|
||||
rowNum: 9, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH191', gubun: '전력량',
|
||||
jan: 107258, feb: 108424, mar: 113604, apr: 116648, may: 124149, jun: 129978,
|
||||
jul: 112215, aug: 129602, sep: 93551, oct: 111272, nov: 89736, dec: 128423
|
||||
},
|
||||
{
|
||||
rowNum: 10, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH104', gubun: '전력량',
|
||||
jan: 82089, feb: 102793, mar: 96784, apr: 85238, may: 86153, jun: 123849,
|
||||
jul: 115095, aug: 129484, sep: 102109, oct: 80976, nov: 119841, dec: 106309
|
||||
},
|
||||
{
|
||||
rowNum: 11, fab: 'C02', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH139', gubun: '전력량',
|
||||
jan: 128592, feb: 95647, mar: 85982, apr: 126824, may: 87928, jun: 128967,
|
||||
jul: 94637, aug: 107530, sep: 122533, oct: 97546, nov: 112110, dec: 126250
|
||||
},
|
||||
{
|
||||
rowNum: 12, fab: 'C01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH109', gubun: '전력량',
|
||||
jan: 106530, feb: 91716, mar: 111104, apr: 102663, may: 108912, jun: 91464,
|
||||
jul: 121245, aug: 90785, sep: 120586, oct: 105718, nov: 96191, dec: 111513
|
||||
}
|
||||
];
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// @import '@/assets/scss/common.scss';
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/scss/var.scss';
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.tui-grid {
|
||||
|
||||
&-row-odd,
|
||||
&-row-even {
|
||||
&:hover > .colrowspan {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
&:hover>.colrowspan {
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
'tui-grid-cell-backgroundColor'
|
||||
) !important;
|
||||
@ -888,10 +1078,10 @@ const defaultData = {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-cell {
|
||||
&.row-selected.colrowspan {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
'tui-grid-cell-backgroundColor'
|
||||
) !important;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -562,7 +562,7 @@ const defaultData = {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
// #tooltipTargetElement_0:hover + #tooltipElement_0{
|
||||
// display : block
|
||||
// }
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user