ソースを参照

fix(web-app): 景气度 PMI 五项扩散指数改指标解读,TopNavBar 显示昵称

ligb 3 週間 前
親
コミット
5e15af3938

+ 5 - 2
web-app/src/components/TopNavBar.vue

@@ -84,8 +84,11 @@ function onSelect(item) {
   }
 }
 
-const displayName = computed(() => auth.account)
-const avatarText = computed(() => (auth.account ? auth.account.charAt(0) : '空'))
+const displayName = computed(() => auth.nickname || auth.account || '未登录')
+const avatarText = computed(() => {
+  const src = auth.nickname || auth.account
+  return src ? src.charAt(0) : '空'
+})
 const roleText = ''
 </script>
 

+ 25 - 30
web-app/src/views/fundamental/prosperity/index.vue

@@ -26,7 +26,7 @@
     </section>
 
     <!-- §7.0 三指标对比 -->
-    <section class="section">
+    <!-- <section class="section">
       <div class="section-hd">
         <span class="dot"></span>
         <h2>§7.0 EPMI / BCI / 制造业 PMI · 三指标叠加对比</h2>
@@ -54,7 +54,7 @@
           </div>
         </div>
       </div>
-    </section>
+    </section> -->
 
     <!-- §7.1 EPMI -->
     <section class="section">
@@ -178,31 +178,33 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="pmi-hero">
+            <!-- <div class="pmi-hero">
               <div class="mut">最新读数</div>
               <div :class="['pmi-val', pmiLatestCls]">{{ formatNum(pmiLatest?.value) }}</div>
               <span :class="['tag', pmiLatestTagCls]">{{ pmiLatestTag }}</span>
-            </div>
-            <Chart :option="pmiOpt" height="240px" />
+            </div> -->
+            <Chart :option="pmiOpt" />
           </div>
         </div>
         <div class="card">
           <div class="card-head">
             <div class="title">
-              <span class="ic">7.3b</span>
-              <span class="title-text">PMI 五项扩散指数</span>
+              <span class="ic">说</span>
+              <span class="title-text">指标解读</span>
             </div>
           </div>
           <div class="card-body">
-            <div class="stat-list">
-              <div v-for="row in pmiSub" :key="row.name" class="stat-row">
-                <span class="name">{{ row.name }}</span>
-                <span class="num">{{ row.value.toFixed(1) }}</span>
-                <span :class="['delta', row.cls]">{{ row.arrow }} {{ row.delta.toFixed(1) }}</span>
-              </div>
+            <div class="kv-list">
+              <div class="kv"><span class="k">指标编码</span><span class="v">{{ pmiMeta?.wind_code || '—' }}</span></div>
+              <div class="kv"><span class="k">数据源</span><span class="v">{{ pmiMeta?.source || '—' }}</span></div>
+              <div class="kv"><span class="k">频率</span><span class="v">{{ pmiMeta?.frequency || '月' }}</span></div>
+              <div class="kv"><span class="k">起始日期</span><span class="v">{{ formatDate(pmiMeta?.data_start) }}</span></div>
+              <div class="kv"><span class="k">最近观测</span><span class="v">{{ formatDate(pmiMeta?.data_end) }}</span></div>
+              <div class="kv"><span class="k">最新读数</span><span :class="['v', 'strong', pmiLatestCls]">{{ formatNum(pmiLatest?.value) }}%</span></div>
+              <div class="kv"><span class="k">荣枯线</span><span class="v">50</span></div>
             </div>
-            <div class="note" style="margin-top:10px">
-              制造业 PMI 由 5 个扩散指数加权合成;单项 ≥50 表示该分项处于扩张区间。
+            <div class="note">
+              制造业 PMI 由 5 个扩散指数加权合成(生产、新订单、原材料库存、从业人员、供应商配送时间);≥50 视为制造业整体处于扩张区间,<50 则为收缩压力。{{ pmiComment }}
             </div>
           </div>
         </div>
@@ -354,21 +356,14 @@ const pmiOpt = computed(() => pmiWithLineOption(
   { name: '制造业 PMI', threshold: 50, thresholdLabel: '荣枯线 50', color: '#1552D0', area: true },
 ))
 
-// ===== PMI 五项扩散指数 (mock 兜底) =====
-const pmiSub = computed(() => {
-  const items = [
-    { name: '生产指数', value: 50.6 },
-    { name: '新订单', value: 49.5 },
-    { name: '原材料库存', value: 47.8 },
-    { name: '从业人员', value: 48.4 },
-    { name: '供应商配送时间', value: 50.2 },
-  ]
-  return items.map((it) => {
-    const delta = it.value - 50
-    const cls = delta > 0.01 ? 'up-bg' : (delta < -0.01 ? 'down-bg' : 'flat-bg')
-    const arrow = delta > 0.01 ? '▲' : (delta < -0.01 ? '▼' : '—')
-    return { ...it, delta, cls, arrow }
-  })
+// ===== PMI 解读 =====
+const pmiComment = computed(() => {
+  const v = pmiLatest.value?.value
+  if (typeof v !== 'number') return '景气方向待观察'
+  if (v >= 52) return 'PMI 处于强扩张区间,制造业动能较强'
+  if (v >= 50) return 'PMI 稳态扩张,景气延续'
+  if (v >= 48) return 'PMI 接近荣枯线,需关注景气回落风险'
+  return 'PMI 跌至荣枯线下方,制造业收缩压力较大'
 })
 
 async function reload() {