guanlan-src/app_frontEnd/web/src/views/System.vue

<script setup lang="ts">
/**
 * 维护巡检（system）——逐字对应重构前 `app.js` 的 `system()`（app.js:746-760）。
 *
 * 数据：`/api/maint_survey` → `{rows: [{层, 存在, 名, 覆盖, 条数, 末次更新, 频率, 责任, 位置, 摄入, 说明}], error?}`。
 * 三种分支：未取到（"正在巡检…"）· 出错 · 两层表（数据 / 机理）。
 */
import { computed, ref, watch } from 'vue'
import { PORTAL_RECALC_HTML } from '../lib/portalRecalc'
import { PORTAL_CSS } from '../lib/portalSections'
import { t } from '../i18n/zh'
import { fmt } from '../lib/render'
import { dv, esc } from '../lib/vib'

const props = defineProps<{ apis?: Record<string, any> | null }>()

/** 旧 `publicMeta(x, kind)`（app.js:815）：中文口径 = 原样显示 */
const publicMeta = (x: unknown): string => String(x == null ? '' : x)

/** ★P68 用**门户 CSS + 该节原文**装进同源 iframe（srcdoc），与门户四节同一手法 ⇒ 渲染与 v2.9.2 一致 */
const recalcBlobUrl = ref<string>('')
const _recalcSrc = computed<string>(() => '<!doctype html><html lang="zh" data-theme="light"><head>'
  + '<meta charset="utf-8"><base target="_top"><style>' + PORTAL_CSS + '</style></head><body>'
  + PORTAL_RECALC_HTML + '</body></html>')
watch(_recalcSrc, (html) => {
  const old = recalcBlobUrl.value
  recalcBlobUrl.value = URL.createObjectURL(new Blob([html], { type: 'text/html;charset=utf-8' }))
  if (old) { try { URL.revokeObjectURL(old) } catch { /* ignore */ } }
}, { immediate: true })

const md = computed<any>(() => props.apis?.['/detail/api/maint_survey'] ?? props.apis?.['/api/maint_survey'] ?? null)

/** 旧 `LAYERS`（app.js:752）：层字段中英值都认 */
const LAYERS: [string[], string, string, string][] = [
  [['数据', 'Data'], 'mt.layer_data', 'mt.layer_data_note', 'var(--accent)'],
  [['机理', 'Domain model', 'Mechanism'], 'mt.layer_mech', 'mt.layer_mech_note', 'var(--warning)'],
]
const rows = computed<any[]>(() => md.value?.rows || [])
const groups = computed(() => LAYERS
  .map(([lvs, kn, kd, col]) => ({ kn, kd, col, rs: rows.value.filter((r) => lvs.includes(String(r.层))) }))
  .filter((g) => g.rs.length))
</script>

<template>
  <section>
    <div class="eyebrow">{{ t('mt.eyebrow') }}</div>
    <div v-if="!md" class="panel"><p class="small muted">{{ t('mt.surveying') }}</p></div>
    <div v-else-if="md.error" class="panel"><p class="small" style="color:var(--critical)">{{ dv(md.error) }}</p></div>
    <template v-else>
      <div class="panel mb">
        <h3>{{ t('mt.head', { n: rows.length }) }}</h3>
        <p class="small muted">{{ t('mt.note') }}</p>
      </div>
      <div v-for="g in groups" :key="g.kn" class="panel mb" :style="`border-left:3px solid ${g.col}`">
        <h3>{{ t(g.kn) }} ({{ g.rs.length }})</h3>
        <p class="small muted">{{ t(g.kd) }}</p>
        <div class="tblwrap">
          <table style="margin-top:10px">
            <tr>
              <th style="width:18%">{{ t('mt.src') }}</th><th style="width:20%">{{ t('mt.cov') }}</th>
              <th style="width:13%">{{ t('mt.last') }}</th><th style="width:10%">{{ t('mt.freq') }}</th>
              <th style="width:11%">{{ t('mt.resp') }}</th><th>{{ t('mt.how') }}</th>
            </tr>
            <tr v-for="(r, i) in g.rs" :key="i">
              <td class="small"><b>{{ r.存在 ? '' : '✗ ' }}{{ publicMeta(r.名) }}</b></td>
              <td class="small num">{{ publicMeta(r.覆盖) }}<span v-if="r.条数" class="muted">{{ t('mt.rows_n', { n: fmt(r.条数) }) }}</span></td>
              <td class="small muted">{{ esc(r.末次更新 || '—') }}</td>
              <td class="small">{{ publicMeta(r.频率) }}</td>
              <td class="small">{{ publicMeta(r.责任) }}</td>
              <td class="small">
                <div class="muted">{{ t('mt.put') }} <code>{{ publicMeta(r.位置) }}</code></div>
                <div style="margin-top:3px">{{ t('mt.run') }} <code>{{ publicMeta(r.摄入) }}</code></div>
                <div class="muted" style="margin-top:3px">{{ publicMeta(r.说明) }}</div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </template>
    <div class="eyebrow" style="margin-top:18px">{{ t('tab.recalc') }}</div>
  <Recalc />
  <iframe data-added="recalc" class="portal-recalc-frame" title="数据重算与产物"
            :src="recalcBlobUrl" style="width:100%;height:1420px;border:0;display:block;margin-top:18px"></iframe>
</section>
</template>