aegon-lv38 1.0.0

package/greenMortgage.vue

@@ -0,0 +1,1395 @@
+<template>
+  <div class="green-mortgage-page">
+  <el-card class="green-mortgage" shadow="never">
+    <header class="green-mortgage__header">
+      <h1 class="green-mortgage__title">
+        Residential Properties that hold valid Gold/Platinum ratings under BEAM Plus New
+        Buildings (NB) / Existing Buildings (EB)
+      </h1>
+      <p class="green-mortgage__subtitle">
+        持有有效的綠建環評新建建築 (NB) / 既有建築 (EB) 金級/鉑金級的住宅物業
+      </p>
+      <p class="green-mortgage__meta">Data Update Date: {{ dataUpdateDate || 'YYYY-MM-DD' }}</p>
+      <p class="green-mortgage__meta">Data Download Status: {{ dataDownloadStatus || 'Automatically Downloaded' }}</p>
+    </header>
+
+    <section class="green-mortgage__filters">
+      <div class="green-mortgage__filter-row">
+        <div class="green-mortgage__filter-group">
+          <label class="green-mortgage__filter-label" for="gm-rating-select">Select Rating(s)</label>
+          <el-select
+            id="gm-rating-select"
+            v-model="selectedRatings"
+            multiple
+            collapse-tags
+            collapse-tags-tooltip
+            placeholder=""
+            class="green-mortgage__rating-select"
+            clearable
+          >
+            <el-option
+              v-for="item in ratingOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </div>
+
+        <div class="green-mortgage__filter-group green-mortgage__filter-group--period">
+          <span class="green-mortgage__filter-label">Certification period:</span>
+          <div class="green-mortgage__period-controls">
+            <el-date-picker
+              v-model="startYear"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder=""
+              class="green-mortgage__date-input"
+              clearable
+              @clear="startYear = ''"
+            />
+            <span class="green-mortgage__to-text">to</span>
+            <el-date-picker
+              v-model="endYear"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder=""
+              class="green-mortgage__date-input"
+              clearable
+              @clear="endYear = ''"
+            />
+            <el-button class="green-mortgage__refresh-btn" @click="handleRefresh">
+              Refresh
+            </el-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="green-mortgage__action-row">
+        <el-button class="green-mortgage__export-btn" @click="handleExportExcel">
+          Export to Excel
+        </el-button>
+
+        <div class="green-mortgage__search">
+          <label class="green-mortgage__search-label" for="gm-search">Search:</label>
+          <el-input
+            id="gm-search"
+            v-model="searchKeyword"
+            class="green-mortgage__search-input"
+            clearable
+          />
+        </div>
+      </div>
+    </section>
+
+    <section class="green-mortgage__table-wrap">
+      <div
+        ref="tableRootRef"
+        class="green-mortgage__table-shell"
+        :class="{ 'is-scrollbar-visible': showScrollbars }"
+        @mouseenter="onTableShellEnter"
+        @mouseleave="onTableShellLeave"
+      >
+        <el-table
+          ref="tableRef"
+          v-loading="tableLoading"
+          :data="paginatedRows"
+          border
+          stripe
+          class="green-mortgage__table"
+          empty-text=" "
+          height="100%"
+          @header-dragend="onHeaderDragEnd"
+        >
+        <el-table-column
+          prop="propertyNameEng"
+          :width="columnWidths.propertyNameEng"
+          sortable
+          :sort-method="sortByPropertyName"
+          show-overflow-tooltip
+        >
+          <template #header>
+            <div class="green-mortgage__th green-mortgage__th--single">
+              <span>Property Name</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="propertyNameChi"
+          :width="columnWidths.propertyNameChi"
+          show-overflow-tooltip
+        >
+          <template #header>
+            <div class="green-mortgage__th green-mortgage__th--single">
+              <span>物業名稱</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="propertyAddress"
+          :width="columnWidths.propertyAddress"
+          sortable
+          :sort-method="sortByPropertyAddress"
+          show-overflow-tooltip
+        >
+          <template #header>
+            <div class="green-mortgage__th green-mortgage__th--inline">
+              <span>Property Address</span>
+              <span>物業地址</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="owner"
+          :width="columnWidths.owner"
+          sortable
+          :sort-method="sortByOwner"
+          show-overflow-tooltip
+        >
+          <template #header>
+            <div class="green-mortgage__th">
+              <span>Owner/Developer Co. Name</span>
+              <span>項目持有人/發展商名稱</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="district"
+          :width="columnWidths.district"
+          sortable
+          :sort-method="sortByDistrict"
+          show-overflow-tooltip
+        >
+          <template #header>
+            <div class="green-mortgage__th green-mortgage__th--inline">
+              <span>District</span>
+              <span>地區</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="tool"
+          :width="columnWidths.tool"
+          sortable
+          :sort-method="sortByTool"
+          show-overflow-tooltip
+        >
+          <template #header>
+            <div class="green-mortgage__th green-mortgage__th--inline">
+              <span>Tool</span>
+              <span>評估工具</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="projectType"
+          :width="columnWidths.projectType"
+          sortable
+          :sort-method="sortByProjectType"
+          show-overflow-tooltip
+        >
+          <template #header>
+            <div class="green-mortgage__th">
+              <span>Project Type</span>
+              <span>項目類型</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="achievedRating"
+          :width="columnWidths.achievedRating"
+          sortable
+          :sort-method="sortByAchievedRating"
+          show-overflow-tooltip
+        >
+          <template #header>
+            <div class="green-mortgage__th">
+              <span>Achieved Rating</span>
+              <span>獲得評級</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="year"
+          :width="columnWidths.year"
+          align="center"
+          sortable
+          :sort-method="sortByYear"
+        >
+          <template #header>
+            <div class="green-mortgage__th green-mortgage__th--single">
+              <span>Year</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="month"
+          :width="columnWidths.month"
+          align="center"
+          sortable
+          :sort-method="sortByMonth"
+        >
+          <template #header>
+            <div class="green-mortgage__th green-mortgage__th--single">
+              <span>Month</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="gbCertLabelNo"
+          :min-width="columnWidths.gbCertLabelNo"
+          sortable
+          :sort-method="sortByGbCertLabelNo"
+          show-overflow-tooltip
+        >
+          <template #header>
+            <div class="green-mortgage__th">
+              <span>GB Cert Label No</span>
+              <span>售樓書上的標籤號碼</span>
+            </div>
+          </template>
+        </el-table-column>
+        </el-table>
+
+        <!-- 外側豎向滑塊：默認隱藏，移入表格且可滾動時顯示 -->
+        <div
+          v-show="scrollCan && showScrollbars"
+          class="green-mortgage__vbar"
+          :style="vbarTrackStyle"
+          aria-hidden="true"
+        >
+          <div
+            class="green-mortgage__vthumb"
+            :style="vbarThumbStyle"
+            @mousedown.prevent="onThumbMouseDown"
+          />
+        </div>
+      </div>
+
+      <div class="green-mortgage__pagination">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :total="filteredRows.length"
+          :page-sizes="[10, 20, 50, 100]"
+          :pager-count="pagerCount"
+          background
+          :layout="paginationLayout"
+        />
+      </div>
+    </section>
+  </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import greenMortgageApi from '@/api/modules/industry/green_mortgage'
+import { industryExportToExcel } from '@/utils/function'
+import { lockDocumentScroll } from '@/views/gen-ai/common/utils/scroll'
+import type { TableInstance } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+interface GreenMortgageRow {
+  propertyNameEng: string
+  propertyNameChi: string
+  propertyAddress: string
+  owner: string
+  district: string
+  tool: string
+  projectType: string
+  achievedRating: string
+  year: string
+  month: string
+  gbCertLabelNo: string
+}
+
+const EXPORT_TABLE_HEADERS = [
+  'Property Name',
+  '物業名稱',
+  'Property Address',
+  'Owner/Developer Co. Name',
+  'District',
+  'Tool',
+  'Project Type',
+  'Achieved Rating',
+  'Year',
+  'Month',
+  'GB Cert Label No',
+] as const
+
+const COLUMN_WIDTH_STORAGE_KEY = 'green-mortgage-table-column-widths'
+
+const DEFAULT_COLUMN_WIDTHS: Record<string, number> = {
+  propertyNameEng: 120,
+  propertyNameChi: 120,
+  propertyAddress: 170,
+  owner: 210,
+  district: 90,
+  tool: 90,
+  projectType: 110,
+  achievedRating: 120,
+  year: 72,
+  month: 72,
+  gbCertLabelNo: 150,
+}
+
+function loadColumnWidths(): Record<string, number> {
+  try {
+    const raw = localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY)
+    if (!raw) return { ...DEFAULT_COLUMN_WIDTHS }
+    const parsed = JSON.parse(raw) as Record<string, unknown>
+    const next = { ...DEFAULT_COLUMN_WIDTHS }
+    for (const key of Object.keys(DEFAULT_COLUMN_WIDTHS)) {
+      const value = Number(parsed[key])
+      if (Number.isFinite(value) && value >= 48) next[key] = Math.round(value)
+    }
+    return next
+  } catch {
+    return { ...DEFAULT_COLUMN_WIDTHS }
+  }
+}
+
+const columnWidths = ref<Record<string, number>>(loadColumnWidths())
+
+function persistColumnWidths() {
+  localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidths.value))
+}
+
+function onHeaderDragEnd(
+  newWidth: number,
+  _oldWidth: number,
+  column: { property?: string },
+) {
+  const prop = column?.property
+  if (!prop || !(prop in DEFAULT_COLUMN_WIDTHS)) return
+  columnWidths.value = {
+    ...columnWidths.value,
+    [prop]: Math.max(48, Math.round(newWidth)),
+  }
+  persistColumnWidths()
+  void nextTick(() => refreshTableScrollUi())
+}
+
+const tableLoading = ref(false)
+const dataUpdateDate = ref('')
+const dataDownloadStatus = ref('')
+const ratingOptions = ref<string[]>([])
+const selectedRatings = ref<string[]>([])
+const startYear = ref<string | null>('')
+const endYear = ref<string | null>('')
+const searchKeyword = ref('')
+const tableRows = ref<GreenMortgageRow[]>([])
+const currentPage = ref(1)
+const pageSize = ref(10)
+const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1440)
+
+const isMobile = computed(() => viewportWidth.value < 768)
+const isTablet = computed(() => viewportWidth.value >= 768 && viewportWidth.value < 1200)
+
+const paginationLayout = computed(() => {
+  if (isMobile.value) return 'total, prev, pager, next'
+  if (isTablet.value) return 'total, sizes, prev, pager, next'
+  return 'total, sizes, prev, pager, next, jumper'
+})
+
+const pagerCount = computed(() => (isMobile.value ? 5 : 7))
+
+const tableRootRef = ref<HTMLElement | null>(null)
+const tableRef = ref<TableInstance>()
+
+/** 外側豎向滑塊（對齊 RecentReportsTable） */
+const THUMB_PX = 50
+const SCROLL_THUMB_COLOR = '#c1c1c1'
+/** 判定可豎滾的溢出閾值（避免 10 條內仍誤顯滾動條） */
+const V_OVERFLOW_THRESHOLD = 8
+/** 底部為橫向滾動條預留，避免豎條被裁切 */
+const V_BAR_BOTTOM_RESERVE = 12
+const scrollCan = ref(false)
+const thumbHeight = ref(THUMB_PX)
+const thumbOffset = ref(0)
+const trackTop = ref(0)
+const trackHeight = ref(0)
+const tableHovered = ref(false)
+const thumbDragging = ref(false)
+
+const showScrollbars = computed(() => tableHovered.value || thumbDragging.value)
+
+const vbarTrackStyle = computed(() => ({
+  top: `${trackTop.value}px`,
+  height: `${trackHeight.value}px`,
+}))
+
+const vbarThumbStyle = computed(() => ({
+  height: `${thumbHeight.value}px`,
+  transform: `translateY(${thumbOffset.value}px)`,
+  backgroundColor: SCROLL_THUMB_COLOR,
+}))
+
+function onTableShellEnter() {
+  tableHovered.value = true
+}
+
+function onTableShellLeave() {
+  if (thumbDragging.value) return
+  tableHovered.value = false
+}
+
+function getScrollWrap(): HTMLElement | null {
+  return (
+    (tableRootRef.value?.querySelector(
+      '.el-table__body-wrapper .el-scrollbar__wrap',
+    ) as HTMLElement | null) ?? null
+  )
+}
+
+function refreshOuterBar() {
+  const root = tableRootRef.value
+  const wrap = getScrollWrap()
+  if (!root || !wrap || paginatedRows.value.length === 0) {
+    scrollCan.value = false
+    return
+  }
+
+  const { scrollTop, scrollHeight, clientHeight } = wrap
+  const overflow = scrollHeight - clientHeight
+  const can = overflow > V_OVERFLOW_THRESHOLD
+  scrollCan.value = can
+  if (!can) return
+
+  const header = root.querySelector('.el-table__header-wrapper') as HTMLElement | null
+  const bodyWrapper = root.querySelector('.el-table__body-wrapper') as HTMLElement | null
+  const headerH = header?.offsetHeight ?? 0
+  const bodyH = bodyWrapper?.clientHeight ?? clientHeight
+
+  trackTop.value = headerH + 2
+  // 軌道高度限制在表體可見區內，底部預留橫條空間，避免被遮擋
+  const available = Math.min(clientHeight, bodyH, root.clientHeight - trackTop.value)
+  trackHeight.value = Math.max(0, available - V_BAR_BOTTOM_RESERVE)
+
+  const trackH = trackHeight.value
+  if (trackH <= 0) {
+    scrollCan.value = false
+    return
+  }
+
+  thumbHeight.value = Math.min(trackH, THUMB_PX)
+  const maxTravel = Math.max(0, trackH - thumbHeight.value)
+  const scrollMax = Math.max(0, overflow)
+  thumbOffset.value = scrollMax > 0 ? Math.round((scrollTop / scrollMax) * maxTravel) : 0
+}
+
+function onWrapScroll() {
+  refreshOuterBar()
+}
+
+let dragCleanup: (() => void) | undefined
+let boundWrap: HTMLElement | null = null
+let tableResizeObserver: ResizeObserver | undefined
+
+function onThumbMouseDown(event: MouseEvent) {
+  const wrapEl = getScrollWrap()
+  if (!wrapEl || !scrollCan.value) return
+  const scrollEl: HTMLElement = wrapEl
+
+  thumbDragging.value = true
+  const startY = event.clientY
+  const startTop = thumbOffset.value
+  const trackH = trackHeight.value
+  const maxTravel = Math.max(0, trackH - thumbHeight.value)
+  const scrollMax = scrollEl.scrollHeight - scrollEl.clientHeight
+
+  function onMove(e: MouseEvent) {
+    if (maxTravel <= 0 || scrollMax <= 0) return
+    const delta = e.clientY - startY
+    const nextOffset = Math.min(maxTravel, Math.max(0, startTop + delta))
+    thumbOffset.value = nextOffset
+    scrollEl.scrollTop = (nextOffset / maxTravel) * scrollMax
+  }
+
+  function onUp() {
+    thumbDragging.value = false
+    const root = tableRootRef.value
+    if (!root?.matches(':hover')) tableHovered.value = false
+    dragCleanup?.()
+    dragCleanup = undefined
+  }
+
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp, { once: true })
+  dragCleanup = () => {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+}
+
+function bindWrapScroll() {
+  unbindWrapScroll()
+  const wrap = getScrollWrap()
+  if (!wrap) return
+  wrap.addEventListener('scroll', onWrapScroll, { passive: true })
+  boundWrap = wrap
+}
+
+function unbindWrapScroll() {
+  boundWrap?.removeEventListener('scroll', onWrapScroll)
+  boundWrap = null
+}
+
+function refreshTableScrollUi() {
+  tableRef.value?.doLayout()
+  void nextTick(() => {
+    bindWrapScroll()
+    refreshOuterBar()
+  })
+}
+
+function syncViewportWidth() {
+  viewportWidth.value = window.innerWidth
+  refreshTableScrollUi()
+}
+
+const filteredRows = computed(() => filterRowsByCurrentCriteria(tableRows.value))
+
+const paginatedRows = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return filteredRows.value.slice(start, start + pageSize.value)
+})
+
+watch([searchKeyword, selectedRatings, startYear, endYear], () => {
+  currentPage.value = 1
+})
+
+watch(
+  () => tableRows.value.length,
+  () => {
+    currentPage.value = 1
+  },
+)
+
+watch(paginatedRows, () => {
+  void nextTick(() => refreshTableScrollUi())
+})
+
+watch([currentPage, pageSize], () => {
+  void nextTick(() => refreshTableScrollUi())
+})
+
+function pickString(record: Record<string, unknown>, keys: string[]) {
+  for (const key of keys) {
+    const value = record[key]
+    if (value != null && value !== '') return String(value)
+  }
+  return ''
+}
+
+function normalizeRow(item: unknown): GreenMortgageRow {
+  const record = item && typeof item === 'object' ? (item as Record<string, unknown>) : {}
+  return {
+    propertyNameEng: pickString(record, ['propertyNameEng', 'PROPERTY_NAME_ENG']),
+    propertyNameChi: pickString(record, ['propertyNameChi', 'PROPERTY_NAME_CHI']),
+    propertyAddress: pickString(record, ['propertyAddress', 'PROPERTY_ADDRESS']),
+    owner: pickString(record, ['owner', 'OWNER']),
+    district: pickString(record, ['district', 'DISTRICT']),
+    tool: pickString(record, ['tool', 'TOOL']),
+    projectType: pickString(record, ['projectType', 'PROJECT_TYPE']),
+    achievedRating: pickString(record, ['achievedRating', 'ACHIEVED_RATING']),
+    year: pickString(record, ['year', 'YEAR']),
+    month: pickString(record, ['month', 'MONTH']),
+    gbCertLabelNo: pickString(record, ['gbCertLabelNo', 'GB_CERT_LABEL_NO']),
+  }
+}
+
+function parseQueryResponse(data: unknown) {
+  if (!data || typeof data !== 'object') {
+    return { rows: [] as GreenMortgageRow[], dataUpdateDate: '', dataDownloadStatus: '' }
+  }
+
+  const record = data as Record<string, unknown>
+  const statusVO =
+    record.riskModelDataStatusVO && typeof record.riskModelDataStatusVO === 'object'
+      ? (record.riskModelDataStatusVO as Record<string, unknown>)
+      : {}
+
+  const list = record.riskModelDataVOList
+  const rows = Array.isArray(list) ? list.map(normalizeRow) : []
+
+  return {
+    rows,
+    dataUpdateDate: pickString(statusVO, ['dataUpdateDate', 'DataUpdateDate']),
+    dataDownloadStatus: pickString(statusVO, ['dataDownloadStatus', 'DataDownloadStatus']),
+  }
+}
+
+function parseRatingsResponse(data: unknown): string[] {
+  if (!Array.isArray(data)) return []
+  return data.map((item) => String(item).trim()).filter(Boolean)
+}
+
+function compareLexicographic(a: unknown, b: unknown) {
+  return String(a ?? '').localeCompare(String(b ?? ''), undefined, {
+    sensitivity: 'base',
+  })
+}
+
+function compareText(a: unknown, b: unknown) {
+  return String(a ?? '').localeCompare(String(b ?? ''), undefined, {
+    numeric: true,
+    sensitivity: 'base',
+  })
+}
+
+function compareAlphabeticalEmptyFirst(a: unknown, b: unknown) {
+  const strA = String(a ?? '').trim()
+  const strB = String(b ?? '').trim()
+  const emptyA = strA === ''
+  const emptyB = strB === ''
+
+  if (emptyA && emptyB) return 0
+  if (emptyA) return -1
+  if (emptyB) return 1
+
+  return strA.localeCompare(strB, undefined, { sensitivity: 'base' })
+}
+
+function createAlphabeticalEmptyFirstSorter(key: keyof GreenMortgageRow) {
+  return (a: GreenMortgageRow, b: GreenMortgageRow) =>
+    compareAlphabeticalEmptyFirst(a[key], b[key])
+}
+
+/** 首字元：數字 0 → 字母 1 → 其他 2 */
+function getFirstCharSortCategory(text: string) {
+  const trimmed = text.trim()
+  if (!trimmed) return 2
+  const first = trimmed.charAt(0)
+  if (/\d/.test(first)) return 0
+  if (/[a-zA-Z]/.test(first)) return 1
+  return 2
+}
+
+function getPropertyNameSortKey(row: GreenMortgageRow) {
+  return (row.propertyNameEng || '').trim()
+}
+
+function getPropertyNameLeadingNumber(name: string) {
+  const matched = name.trim().match(/^(\d+)/)
+  return matched ? Number(matched[1]) : Number.NaN
+}
+
+const sortByPropertyName = (a: GreenMortgageRow, b: GreenMortgageRow) => {
+  const nameA = getPropertyNameSortKey(a)
+  const nameB = getPropertyNameSortKey(b)
+  const categoryA = getFirstCharSortCategory(nameA)
+  const categoryB = getFirstCharSortCategory(nameB)
+
+  if (categoryA !== categoryB) return categoryA - categoryB
+
+  if (categoryA === 0) {
+    const leadingA = getPropertyNameLeadingNumber(nameA)
+    const leadingB = getPropertyNameLeadingNumber(nameB)
+    if (!Number.isNaN(leadingA) && !Number.isNaN(leadingB) && leadingA !== leadingB) {
+      return leadingA - leadingB
+    }
+  }
+
+  return nameA.localeCompare(nameB, undefined, { sensitivity: 'base' })
+}
+
+const sortByPropertyAddress = (a: GreenMortgageRow, b: GreenMortgageRow) => {
+  const addressA = (a.propertyAddress || '').trim()
+  const addressB = (b.propertyAddress || '').trim()
+  const categoryA = getFirstCharSortCategory(addressA)
+  const categoryB = getFirstCharSortCategory(addressB)
+
+  if (categoryA !== categoryB) return categoryA - categoryB
+
+  return compareLexicographic(addressA, addressB)
+}
+const sortByOwner = (a: GreenMortgageRow, b: GreenMortgageRow) => compareText(a.owner, b.owner)
+const sortByDistrict = createAlphabeticalEmptyFirstSorter('district')
+const sortByTool = createAlphabeticalEmptyFirstSorter('tool')
+const sortByProjectType = createAlphabeticalEmptyFirstSorter('projectType')
+const sortByAchievedRating = createAlphabeticalEmptyFirstSorter('achievedRating')
+const sortByYear = createAlphabeticalEmptyFirstSorter('year')
+const sortByMonth = createAlphabeticalEmptyFirstSorter('month')
+const sortByGbCertLabelNo = createAlphabeticalEmptyFirstSorter('gbCertLabelNo')
+
+async function fetchGreenMortgageRatings() {
+  try {
+    const res = await greenMortgageApi.getGreenMortgageRatings()
+    ratingOptions.value = parseRatingsResponse(res?.data)
+  } catch (error) {
+    console.error('getGreenMortgageRatings failed', error)
+    ratingOptions.value = []
+  }
+}
+
+function asTrimmedText(value: string | null | undefined) {
+  return String(value ?? '').trim()
+}
+
+function filterRowsByKeyword(rows: GreenMortgageRow[]) {
+  const keyword = asTrimmedText(searchKeyword.value).toLowerCase()
+  if (!keyword) return rows
+
+  return rows.filter((row) =>
+    Object.values(row).some((value) => String(value).toLowerCase().includes(keyword)),
+  )
+}
+
+/** 從 Certification period 取值中提取年份（相容 YYYY / YYYY-MM-DD） */
+function getYearFromPeriod(value: string | null | undefined): number | null {
+  const trimmed = asTrimmedText(value)
+  if (!trimmed) return null
+  const matched = trimmed.match(/^(\d{4})/)
+  if (!matched) return null
+  const year = Number(matched[1])
+  return Number.isNaN(year) ? null : year
+}
+
+/**
+ * 當前頁篩選：Select Rating(s) + Certification period + Search
+ * 進頁無篩選條件時返回全部資料
+ */
+function filterRowsByCurrentCriteria(rows: GreenMortgageRow[]) {
+  let result = rows
+
+  if (selectedRatings.value.length > 0) {
+    const ratingSet = new Set(selectedRatings.value)
+    result = result.filter((row) => ratingSet.has(row.achievedRating))
+  }
+
+  const start = getYearFromPeriod(startYear.value)
+  const end = getYearFromPeriod(endYear.value)
+  if (start != null || end != null) {
+    result = result.filter((row) => {
+      const year = Number(row.year)
+      if (Number.isNaN(year)) return false
+      if (start != null && year < start) return false
+      if (end != null && year > end) return false
+      return true
+    })
+  }
+
+  return filterRowsByKeyword(result)
+}
+
+function buildWorksheetData(rows: GreenMortgageRow[]) {
+  return [
+    [...EXPORT_TABLE_HEADERS],
+    ...rows.map((row) => [
+      row.propertyNameEng,
+      row.propertyNameChi,
+      row.propertyAddress,
+      row.owner,
+      row.district,
+      row.tool,
+      row.projectType,
+      row.achievedRating,
+      row.year,
+      row.month,
+      row.gbCertLabelNo,
+    ]),
+  ]
+}
+
+/** 進頁預設空條件 = 查詢全部；Refresh / 匯出請求共用 */
+function getGreenMortgageQueryParams() {
+  return {
+    endYear: asTrimmedText(endYear.value),
+    ratingList: [...selectedRatings.value],
+    startYear: asTrimmedText(startYear.value),
+  }
+}
+
+async function fetchGreenMortgageQuery() {
+  tableLoading.value = true
+  try {
+    const res = await greenMortgageApi.getGreenMortgageQuery(getGreenMortgageQueryParams())
+
+    if (res.data) {
+      const parsed = parseQueryResponse(res.data)
+      tableRows.value = parsed.rows
+      if (parsed.dataUpdateDate) dataUpdateDate.value = parsed.dataUpdateDate
+      if (parsed.dataDownloadStatus) dataDownloadStatus.value = parsed.dataDownloadStatus
+    } else {
+      tableRows.value = []
+    }
+  } catch (error) {
+    console.error('getGreenMortgageQuery failed', error)
+  } finally {
+    tableLoading.value = false
+  }
+}
+
+function handleRefresh() {
+  fetchGreenMortgageQuery()
+}
+
+/** 匯出當前 Select Rating(s) + Certification period + Search 篩選後的資料（格式不變） */
+async function handleExportExcel() {
+  try {
+    const res = await greenMortgageApi.getGreenMortgageQuery(getGreenMortgageQueryParams())
+    if (!res?.data) return
+
+    const parsed = parseQueryResponse(res.data)
+    const rows = filterRowsByCurrentCriteria(parsed.rows)
+    if (!rows.length) return
+
+    const worksheetData = buildWorksheetData(rows)
+    await industryExportToExcel(worksheetData, 'Green Mortgage', 'Green_Mortgage')
+  } catch (error) {
+    console.error('handleExportExcel failed', error)
+  }
+}
+
+/** 匯出當前頁已篩選資料（Select Rating / Certification period / Search 過濾後的結果） */
+async function handleExportExcel2() {
+  try {
+    const rows = filteredRows.value
+    if (!rows.length) return
+
+    const worksheetData = buildWorksheetData(rows)
+    await industryExportToExcel(worksheetData, 'Green Mortgage', 'Green_Mortgage')
+  } catch (error) {
+    console.error('handleExportExcel2 failed', error)
+  }
+}
+
+/** 鎖定 document 原有滾動條 cleanup */
+let restoreDocScroll: (() => void) | null = null
+
+onMounted(async () => {
+  syncViewportWidth()
+  window.addEventListener('resize', syncViewportWidth)
+  void nextTick(() => {
+    restoreDocScroll?.()
+    restoreDocScroll = lockDocumentScroll()
+    refreshTableScrollUi()
+    const root = tableRootRef.value
+    if (root) {
+      tableResizeObserver = new ResizeObserver(() => {
+        void nextTick(() => refreshTableScrollUi())
+      })
+      tableResizeObserver.observe(root)
+    }
+  })
+  await fetchGreenMortgageRatings()
+  await fetchGreenMortgageQuery()
+  void nextTick(() => refreshTableScrollUi())
+})
+
+onUnmounted(() => {
+  restoreDocScroll?.()
+  restoreDocScroll = null
+  window.removeEventListener('resize', syncViewportWidth)
+  tableResizeObserver?.disconnect()
+  unbindWrapScroll()
+  dragCleanup?.()
+})
+</script>
+
+<style lang="scss" scoped>
+.green-mortgage-page {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.green-mortgage {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+}
+
+.green-mortgage :deep(.el-card__body) {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: 20px;
+}
+
+.green-mortgage__header {
+  flex-shrink: 0;
+  margin-bottom: 14px;
+}
+
+.green-mortgage__title,
+.green-mortgage__subtitle {
+  margin: 0;
+  color: #c0504d;
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.green-mortgage__meta {
+  margin: 4px 0 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--el-text-color-primary);
+  word-break: break-word;
+}
+
+.green-mortgage__filters {
+  flex-shrink: 0;
+  margin-bottom: 10px;
+}
+
+.green-mortgage__filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 16px;
+  margin-bottom: 10px;
+}
+
+.green-mortgage__filter-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  min-width: 0;
+}
+
+.green-mortgage__filter-group--period {
+  flex: 1 1 auto;
+}
+
+.green-mortgage__period-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  min-width: 0;
+}
+
+.green-mortgage__filter-label {
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.green-mortgage__rating-select {
+  width: 220px;
+  max-width: 100%;
+}
+
+.green-mortgage__date-input {
+  width: 150px;
+  max-width: 100%;
+}
+
+.green-mortgage__date-input.el-date-editor {
+  --el-date-editor-width: 150px;
+}
+
+.green-mortgage__to-text {
+  font-size: 14px;
+}
+
+.green-mortgage__refresh-btn,
+.green-mortgage__export-btn {
+  border-radius: 4px;
+}
+
+.green-mortgage__action-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px 16px;
+}
+
+.green-mortgage__search {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.green-mortgage__search-label {
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.green-mortgage__search-input {
+  width: 220px;
+  max-width: 100%;
+}
+
+/* 有值時滑鼠移入顯示清空 x */
+.green-mortgage__rating-select :deep(.el-select__clear),
+.green-mortgage__date-input :deep(.el-input__clear),
+.green-mortgage__search-input :deep(.el-input__clear) {
+  display: inline-flex !important;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  cursor: pointer;
+}
+
+.green-mortgage__rating-select:hover :deep(.el-select__clear),
+.green-mortgage__rating-select :deep(.el-select__wrapper.is-focused .el-select__clear),
+.green-mortgage__date-input:hover :deep(.el-input__clear),
+.green-mortgage__date-input :deep(.el-input__wrapper.is-focus .el-input__clear),
+.green-mortgage__search-input:hover :deep(.el-input__clear),
+.green-mortgage__search-input :deep(.el-input__wrapper.is-focus .el-input__clear) {
+  opacity: 1;
+}
+
+.green-mortgage__table-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.green-mortgage__table-shell {
+  --gm-scroll-thumb: #c1c1c1;
+  position: relative;
+  flex: 1;
+  min-height: 240px;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.green-mortgage__table-shell :deep(.el-table) {
+  overflow: hidden;
+}
+
+.green-mortgage__table-shell :deep(.el-table__inner-wrapper) {
+  height: 100%;
+}
+
+.green-mortgage__pagination {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.green-mortgage__pagination :deep(.el-pagination) {
+  flex-wrap: wrap;
+  row-gap: 8px;
+  justify-content: flex-end;
+}
+
+.green-mortgage__th {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  font-size: 13px;
+  line-height: 1.25;
+  text-align: center;
+  white-space: normal;
+}
+
+.green-mortgage__th--single {
+  min-height: 34px;
+}
+
+.green-mortgage__th--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.green-mortgage__table {
+  width: 100%;
+  height: 100%;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper),
+.green-mortgage__table :deep(.el-table__header) {
+  background: #556b7d;
+}
+
+.green-mortgage__table :deep(.el-table__header table) {
+  width: 100% !important;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell) {
+  padding: 6px 0;
+  background: #556b7d;
+  color: #fff;
+  border-color: #f5f7fa;
+}
+
+/* 豎向滾動預留 gutter：與表頭同色，避免右側留白 */
+.green-mortgage__table :deep(.el-table__header th.el-table__cell.gutter) {
+  background: #556b7d !important;
+  border-bottom-color: #556b7d !important;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell .cell) {
+  padding: 0 8px;
+  color: #fff;
+}
+
+.green-mortgage__table :deep(.el-table__body td.el-table__cell) {
+  border-color: #f5f7fa;
+}
+
+.green-mortgage__table :deep(.el-table--border::before),
+.green-mortgage__table :deep(.el-table--border::after),
+.green-mortgage__table :deep(.el-table__inner-wrapper::after),
+.green-mortgage__table :deep(.el-table__border-left-patch) {
+  background-color: #f5f7fa;
+}
+
+/* 隱藏 table 內建豎向滑塊；橫向滑塊樣式對齊 RecentReportsTable */
+.green-mortgage__table-shell :deep(.el-scrollbar__bar.is-vertical) {
+  display: none !important;
+}
+
+.green-mortgage__table-shell :deep(.el-scrollbar__wrap) {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.green-mortgage__table-shell :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.green-mortgage__table-shell :deep(.el-scrollbar__bar.is-horizontal) {
+  display: block !important;
+  height: 8px !important;
+  left: 2px !important;
+  right: 2px !important;
+  bottom: 0 !important;
+  opacity: 0 !important;
+  pointer-events: none;
+  z-index: 10;
+  transition: opacity 0.15s ease;
+}
+
+.green-mortgage__table-shell.is-scrollbar-visible :deep(.el-scrollbar__bar.is-horizontal) {
+  opacity: 1 !important;
+  pointer-events: auto;
+}
+
+.green-mortgage__table-shell :deep(.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb) {
+  display: block !important;
+  height: 8px !important;
+  width: 50px !important;
+  min-width: 50px !important;
+  border-radius: 4px !important;
+  background-color: var(--gm-scroll-thumb, #c1c1c1) !important;
+  opacity: 1 !important;
+  cursor: grab;
+}
+
+.green-mortgage__table-shell :deep(.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb:active) {
+  cursor: grabbing;
+  background-color: #a8a8a8 !important;
+}
+
+.green-mortgage__vbar {
+  position: absolute;
+  right: 4px;
+  width: 8px;
+  z-index: 12;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.green-mortgage__vthumb {
+  width: 8px;
+  height: 50px;
+  min-height: 50px;
+  border-radius: 4px;
+  background-color: var(--gm-scroll-thumb, #c1c1c1);
+  cursor: grab;
+  pointer-events: auto;
+  will-change: transform;
+}
+
+.green-mortgage__vthumb:active {
+  cursor: grabbing;
+  background-color: #a8a8a8;
+}
+
+/* 排序圖示：預設隱藏，懸停/已排序時顯示；顏色沿用 el-table 主題 */
+.green-mortgage__table :deep(.caret-wrapper) {
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell.is-sortable:hover .caret-wrapper) {
+  opacity: 1;
+  visibility: visible;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell.ascending .caret-wrapper),
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell.descending .caret-wrapper) {
+  right: 2px;
+  opacity: 1;
+  visibility: visible;
+}
+
+.green-mortgage__table :deep(.sort-caret.ascending) {
+  border-bottom-color: #fff;
+}
+
+.green-mortgage__table :deep(.sort-caret.descending) {
+  border-top-color: #fff;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell.is-sortable .cell) {
+  position: relative;
+  padding-right: 24px;
+}
+
+/* 大屏 */
+@media (min-width: 1200px) {
+  .green-mortgage__title,
+  .green-mortgage__subtitle {
+    font-size: 18px;
+  }
+
+  .green-mortgage__table {
+    min-width: 100%;
+  }
+}
+
+/* 平板 */
+@media (max-width: 1199px) {
+  .green-mortgage__title,
+  .green-mortgage__subtitle {
+    font-size: 16px;
+  }
+
+  .green-mortgage__rating-select,
+  .green-mortgage__search-input {
+    width: 200px;
+  }
+
+  .green-mortgage__date-input {
+    width: 140px;
+  }
+
+  .green-mortgage__date-input.el-date-editor {
+    --el-date-editor-width: 140px;
+  }
+
+  .green-mortgage__th {
+    font-size: 12px;
+  }
+}
+
+/* 手機 */
+@media (max-width: 767px) {
+  .green-mortgage {
+    overflow: auto;
+  }
+
+  .green-mortgage :deep(.el-card__body) {
+    padding: 20px;
+  }
+
+  .green-mortgage__header {
+    margin-bottom: 10px;
+  }
+
+  .green-mortgage__title,
+  .green-mortgage__subtitle {
+    font-size: 14px;
+  }
+
+  .green-mortgage__meta {
+    font-size: 12px;
+  }
+
+  .green-mortgage__filter-row,
+  .green-mortgage__action-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .green-mortgage__filter-group,
+  .green-mortgage__filter-group--period,
+  .green-mortgage__period-controls,
+  .green-mortgage__search {
+    width: 100%;
+  }
+
+  .green-mortgage__filter-label,
+  .green-mortgage__search-label {
+    white-space: normal;
+  }
+
+  .green-mortgage__rating-select,
+  .green-mortgage__search-input,
+  .green-mortgage__date-input {
+    width: 100%;
+  }
+
+  .green-mortgage__date-input.el-date-editor {
+    --el-date-editor-width: 100%;
+  }
+
+  .green-mortgage__period-controls {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+  }
+
+  .green-mortgage__period-controls .green-mortgage__refresh-btn {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  .green-mortgage__export-btn {
+    width: 100%;
+  }
+
+  .green-mortgage__table-shell {
+    min-height: 280px;
+  }
+
+  .green-mortgage__pagination {
+    justify-content: center;
+  }
+
+  .green-mortgage__pagination :deep(.el-pagination) {
+    justify-content: center;
+  }
+}
+</style>

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "aegon-lv38",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}