115 lines
3.4 KiB
Vue
115 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Detail Modal -->
|
|
<a-modal v-model="showDetailModal" title="가이드 알람이력" width="1200px" :footer="null"
|
|
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
|
|
<!-- Top Input Fields -->
|
|
<a-row :gutter="8" align="middle" style="margin-bottom: 16px;">
|
|
<!-- 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="설비명" :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-row :gutter="8" align="middle" style="margin-bottom: 16px;">
|
|
<!-- 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="설비명" :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 />
|
|
<!-- Table -->
|
|
<h3 style=" margin-bottom: 16px">설비 가이드 정보</h3>
|
|
<a-table :columns="modalTableColumns" :dataSource="modalTableData" rowKey="No" size="small" bordered
|
|
:pagination="false" />
|
|
|
|
<!-- 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,
|
|
modalTableColumns: [
|
|
{ title: 'No.', dataIndex: 'No', key: 'No', align: 'center' },
|
|
{ title: '발생일', dataIndex: '발생일', key: '발생일' },
|
|
{ title: '발생시간대', dataIndex: '발생시간대', key: '발생시간대' },
|
|
{ title: '가이드지표명', dataIndex: '가이드지표명', key: '가이드지표명' },
|
|
{ title: '주의', dataIndex: '주의', key: '주의' },
|
|
{ title: '경고', dataIndex: '경고', key: '경고' },
|
|
{ title: '가이드값', dataIndex: '가이드값', key: '가이드값' },
|
|
{ title: '알랑내용', dataIndex: '알랑내용', key: '알랑내용' },
|
|
],
|
|
modalTableData: [
|
|
{
|
|
No: 1,
|
|
발생일: '2025-06-01',
|
|
발생시간대: '02-03',
|
|
가이드지표명: '냉수 출구 온도 평균 편차',
|
|
주의: 3,
|
|
경고: 2,
|
|
가이드값: -1.23,
|
|
알랑내용: '[심각]냉수3과 온도차가 7.72°C로 낮음(평균 15.44*C 대비 7.72°C 낮음) - UT_HT_CH1C',
|
|
},
|
|
{
|
|
No: 2,
|
|
발생일: '2025-06-02',
|
|
발생시간대: '02-03',
|
|
가이드지표명: '냉수 출구 온도 평균 편차',
|
|
주의: 2,
|
|
경고: 1,
|
|
가이드값: -1.45,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
handleNgCntClick(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> |