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

<script setup lang="ts">
import { vUnwrap } from '../lib/unwrap'
/**
 * 三类查询助手（assistant）——逐字对应重构前 `app.js` 的 `assistant()`（app.js:287-303）。
 *
 * 三个面板：故障码纠正措施（输入码 + 常用码）· 预防性维护（系统下拉）· 故障树（系统下拉），
 * 各自一个"查询"按钮与输出区；输出区初始为空（旧 `ASST.out.*`）。
 * 查询走 `GET /api/asst?kind=…&code|system=…`（交互行为，本版先迁**首屏呈现**）。
 */
import { computed, reactive } from 'vue'
import { t } from '../i18n/zh'
import { sysFromSlug, sysName, sysSlug } from '../lib/render2'
import { esc } from '../lib/vib'

/** 旧 `SYSOPT`（app.js:283） */
const SYSOPT = ['变桨', '偏航', '主轴承', '齿轮箱', '发电机', '变流器', '塔架与基础', '主控与传感网', '叶片与叶根']
/** 旧 `HOT`（app.js:284） */
const HOT = ['3225', '3130', '13902', '10105', '3224']
/** 旧 `ASST`（app.js:285） */
const ASST = reactive({ fault: '', prev: 'pitch', tree: 'pitch', out: { fault: '', prev: '', tree: '' } })

const row = 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px'

const selOptions = (id: 'prev' | 'tree') => SYSOPT.map((s) =>
  `<option value="${sysSlug(s)}" ${ASST[id] === sysSlug(s) ? 'selected' : ''}>${sysName(s)}</option>`).join('')

/** 常用码链接：旧 `<a href="#" data-code="…">码</a>`，用 ` · ` 连接 */
const hotHtml = computed(() => HOT.map((c) => `<a href="#" data-code="${c}">${c}</a>`).join(' · '))
</script>

<template>
  <section>
    <div class="eyebrow">{{ t('asst.head') }} — {{ t('asst.head_note') }}</div>
    <div class="panel mb">
      <h3>{{ t('asst.corrective') }} <span class="small muted" style="font-weight:400">{{ t('asst.corrective_flow') }}</span></h3>
      <div :style="row">
        <input id="asstIn_fault" :placeholder="esc(t('asst.code_placeholder'))" :value="ASST.fault" style="flex:1 1 220px">
        <button class="btn" data-asst="fault">{{ t('ui.query') }}</button>
        <span class="small muted">{{ t('asst.common') }} <span class="unwrap-host" v-html="hotHtml"></span></span>
      </div>
      <div id="asstOut_fault" style="margin-top:10px">{{ ASST.out.fault }}</div>
    </div>
    <div class="panel mb">
      <h3>{{ t('asst.preventive') }} <span class="small muted" style="font-weight:400">{{ t('asst.preventive_flow') }}</span></h3>
      <div :style="row">
        <select id="asstIn_prev" style="flex:1 1 200px" v-html="selOptions('prev')"></select>
        <button class="btn" data-asst="prev">{{ t('ui.query') }}</button>
      </div>
      <div id="asstOut_prev" style="margin-top:10px">{{ ASST.out.prev }}</div>
    </div>
    <div class="panel mb">
      <h3>{{ t('asst.faulttree') }} <span class="small muted" style="font-weight:400">{{ t('asst.faulttree_flow') }}</span></h3>
      <div :style="row">
        <select id="asstIn_tree" style="flex:1 1 200px" v-html="selOptions('tree')"></select>
        <button class="btn" data-asst="tree">{{ t('ui.query') }}</button>
      </div>
      <div id="asstOut_tree" style="margin-top:10px">{{ ASST.out.tree }}</div>
    </div>
  </section>
</template>