init dev-push code ui base design
This commit is contained in:
leonard
220
components/common/modal/EnrgEffcGdIdxDetPop_bk.vue
Normal file
220
components/common/modal/EnrgEffcGdIdxDetPop_bk.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Detail Modal -->
|
||||
<a-modal v-model="showDetailModal" title="가이드 정보" width="800px" :footer="null"
|
||||
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
|
||||
<!-- Top Input Fields -->
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">가이드지표</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="GD00111" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-input value="냉각수 온도차 평균 편차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">계산코드</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="BEF_AVG_DEV_GT" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">계산설명</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑1</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑2</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑3</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑4</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">카테고리1</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">카테고리2</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">주의기준간</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="3" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">경고기준값</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="5" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">열람메세지</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차가 @V1C로 낮음(청균@AVG 대비 @RSLTC 낮음]-@EOPM" :style="{ borderRadius: '6px', height: '34px' }"
|
||||
disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">가이드방법</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="대비 @RSLTC 낮음]-@EOPM" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
<!-- Footer Buttons -->
|
||||
<div style="text-align: right; margin-top: 16px;">
|
||||
<a-button @click="showDetailModal = false">닫기</a-button>
|
||||
<a-button type="primary" style="margin-left: 8px; color:#fff" @click="confirmModal">확인</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showDetailModal: false,
|
||||
selectedRecord: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleGdIdxNmClick(record) {
|
||||
this.selectedRecord = record;
|
||||
this.showDetailModal = true;
|
||||
},
|
||||
confirmModal() {
|
||||
this.showDetailModal = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.ant-modal-header {
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-modal-title,
|
||||
h3 {
|
||||
font-weight: 600
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user