sk_fems_ui/components/common/modal/EnrgEffcGdIdxDetPop_bk.vue

<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>