init dev-push code ui base design

components/common/modal/EnrgEffcEqpmDetailPop_bk.vue

@@ -0,0 +1,115 @@
+<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>