From df6776caba5b66ec38a1d962c71d789a30f56c53 Mon Sep 17 00:00:00 2001
From: bot_dev2 <bot_dev2@xayunmei.com>
Date: Thu, 6 Aug 2026 12:56:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=20issue=20#168=20[B2?=
 =?UTF-8?q?]=20=E9=A9=BE=E9=A9=B6=E8=88=B1=E9=87=8D=E6=9E=84=EF=BC=88?=
 =?UTF-8?q?=E4=B8=8B=EF=BC=89=E2=80=94=E2=80=94=E5=AE=9E=E6=97=B6=E8=B6=8B?=
 =?UTF-8?q?=E5=8A=BF=EF=BC=88SVG=20=E6=8A=98=E7=BA=BF=202s=20=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=EF=BC=89+=20NL=20=E6=9F=A5=E8=AF=A2=EF=BC=88infer.ts?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/iaop/cockpit/components/NlQuery.vue | 75 +++++++++++++++++
 .../iaop/cockpit/components/TrendChart.vue    | 83 +++++++++++++++++++
 .../src/views/iaop/cockpit/index.vue          |  8 +-
 3 files changed, 164 insertions(+), 2 deletions(-)
 create mode 100644 deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/components/NlQuery.vue
 create mode 100644 deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/components/TrendChart.vue

diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/components/NlQuery.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/components/NlQuery.vue
new file mode 100644
index 0000000..147f90a
--- /dev/null
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/components/NlQuery.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/**
+ * NL 查询（issue #168 [B2]）
+ * 驾驶舱内联 NL 查询：输入 → infer.ts ask()（/v1/chat/completions）→ 展示回答。
+ * 网关离线（dry-run 占位/失败）给出降级提示。
+ */
+import { ref } from 'vue';
+
+import { ask } from '#/api/iaop/infer';
+
+const question = ref('');
+const answer = ref('');
+const loading = ref(false);
+const offline = ref(false);
+
+async function submit() {
+  const q = question.value.trim();
+  if (!q || loading.value) return;
+  loading.value = true;
+  answer.value = '';
+  offline.value = false;
+  try {
+    const r = await ask(q, { maxTokens: 200 });
+    answer.value = r.text;
+    if (r.meta && (r.meta as Record<string, unknown>).dry_run) {
+      offline.value = true;
+    }
+  } catch {
+    answer.value = '';
+    offline.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="nl-query">
+    <div class="w-title">工艺问答（NL 查询）</div>
+    <div class="nl-row">
+      <a-input
+        v-model:value="question"
+        placeholder="如：炉温异常如何处理？"
+        @press-enter="submit"
+      />
+      <a-button type="primary" :loading="loading" @click="submit">查询</a-button>
+    </div>
+    <a-alert v-if="offline" type="warning" show-icon style="margin-top: 8px">
+      <template #message>推理服务离线 / dry-run 占位：请检查后端推理服务（/v1/health）</template>
+    </a-alert>
+    <div v-if="answer" class="nl-answer">{{ answer }}</div>
+  </div>
+</template>
+
+<style scoped>
+.w-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+.nl-row {
+  display: flex;
+  gap: 8px;
+}
+.nl-answer {
+  margin-top: 10px;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 6px;
+  padding: 10px;
+  font-size: 13px;
+  line-height: 1.7;
+  max-height: 180px;
+  overflow: auto;
+}
+</style>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/components/TrendChart.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/components/TrendChart.vue
new file mode 100644
index 0000000..0a8f7ea
--- /dev/null
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/components/TrendChart.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+/**
+ * 实时趋势图（issue #168 [B2]）
+ * 原生 SVG 折线（零依赖，对齐旧 cockpit.js canvas 曲线）：
+ * props.series 点位名（如 CLF-01.TEMP），种子数据 + 2s 滚动刷新，
+ * 接总线后替换为实时点位数据源。
+ */
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  props?: Record<string, unknown>;
+}>();
+
+const series = String(props.props?.series || 'unknown.series');
+const points = ref<number[]>([]);
+const maxPoints = 40;
+
+let timer = 0;
+let seed = 100;
+
+function next(): number {
+  seed = Math.max(20, Math.min(200, seed + (Math.random() - 0.5) * 10));
+  return Math.round(seed);
+}
+
+function tick() {
+  points.value = [...points.value.slice(-(maxPoints - 1)), next()];
+}
+
+const W = 320;
+const H = 90;
+
+const polyline = ref('');
+
+function buildPath(vals: number[]): string {
+  if (vals.length < 2) return '';
+  const min = Math.min(...vals) - 5;
+  const max = Math.max(...vals) + 5;
+  const range = max - min || 1;
+  return vals
+    .map((v, i) => {
+      const x = (i / (maxPoints - 1)) * W;
+      const y = H - ((v - min) / range) * H;
+      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(' ');
+}
+
+watch(points, (v) => {
+  polyline.value = buildPath(v);
+});
+
+onMounted(() => {
+  for (let i = 0; i < 10; i++) tick();
+  timer = window.setInterval(tick, 2000);
+});
+
+onUnmounted(() => window.clearInterval(timer));
+</script>
+
+<template>
+  <div class="trend-chart">
+    <div class="w-title">{{ props?.title || `实时趋势（${series}）` }}</div>
+    <svg :width="W" :height="H" viewBox="0 0 320 90" preserveAspectRatio="none">
+      <polyline :points="polyline" fill="none" stroke="var(--cockpit-accent, #1677ff)" stroke-width="2" />
+      <text x="4" y="12" font-size="11" fill="var(--cockpit-fg-muted, #999)">
+        bind: {{ series }} · 2s 滚动
+      </text>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.w-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+.trend-chart svg {
+  width: 100%;
+  height: 90px;
+}
+</style>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/index.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/index.vue
index 946e321..bd2616d 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/index.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/index.vue
@@ -11,7 +11,9 @@ import { loadCockpitPlan } from '#/api/iaop/templates';
 
 import AlarmPanel from './components/AlarmPanel.vue';
 import KpiCard from './components/KpiCard.vue';
+import NlQuery from './components/NlQuery.vue';
 import ProcessFlow from './components/ProcessFlow.vue';
+import TrendChart from './components/TrendChart.vue';
 
 interface PlanWidget {
   type: string;
@@ -87,12 +89,14 @@ async function refreshHealth() {
             <ProcessFlow v-if="w.type === 'process_view'" :props="w.props" />
             <KpiCard v-else-if="w.type === 'kpi_card'" :props="w.props" />
             <AlarmPanel v-else-if="w.type === 'alarm_panel'" :props="w.props" />
+            <TrendChart v-else-if="w.type === 'trend'" :props="w.props" />
+            <NlQuery v-else-if="w.type === 'nl_query'" :props="w.props" />
             <a-card
               v-else
               size="small"
-              :title="w.props?.title || w.description || '趋势 / NL 查询（B2 交付）'"
+              :title="w.props?.title || w.description || '未知组件'"
             >
-              <a-empty description="待 B2（实时趋势 / NL 查询）" />
+              <a-empty description="未知 widget 类型" />
             </a-card>
           </div>
         </template>