大屏

ruoyi-screen/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.16.1",
         "echarts": "^5.5.1",
+        "echarts-wordcloud": "^2.1.0",
         "vue": "^3.5.13",
         "vue-router": "^4.6.4"
       },
@@ -614,6 +615,14 @@
         "zrender": "5.6.1"
       }
     },
+    "node_modules/echarts-wordcloud": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz",
+      "integrity": "sha512-Kt1JmbcROgb+3IMI48KZECK2AP5lG6bSsOEs+AsuwaWJxQom31RTNd6NFYI01E/YaI1PFZeueaupjlmzSQasjQ==",
+      "peerDependencies": {
+        "echarts": "^5.0.1"
+      }
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz",
@@ -1456,6 +1465,12 @@
         "zrender": "5.6.1"
       }
     },
+    "echarts-wordcloud": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz",
+      "integrity": "sha512-Kt1JmbcROgb+3IMI48KZECK2AP5lG6bSsOEs+AsuwaWJxQom31RTNd6NFYI01E/YaI1PFZeueaupjlmzSQasjQ==",
+      "requires": {}
+    },
     "entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz",

ruoyi-screen/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "axios": "^1.16.1",
     "echarts": "^5.5.1",
+    "echarts-wordcloud": "^2.1.0",
     "vue": "^3.5.13",
     "vue-router": "^4.6.4"
   },

ruoyi-screen/src/api/livestockResources.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+/** 畜牧资源看板主数据 GET /bigScreen/livestockResource/dashboard */
+export function getLivestockResourceDashboard(statYear) {
+  return request({
+    url: '/bigScreen/livestockResource/dashboard',
+    method: 'get',
+    params: { statYear }
+  })
+}

ruoyi-screen/src/components/ScreenChart.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from "vue"
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue"
 import * as echarts from "echarts"
+import "echarts-wordcloud"
 
 const props = defineProps({
   /** 与 ECharts 官方 option 一致，由父组件传入 */
@@ -14,6 +15,15 @@ const chartRef = ref(null)
 let chartInstance = null
 let resizeObserver = null
 
+/** 写入配置并强制整表替换，避免从「暂无数据」切到真实图表时残留 title */
+function applyOption(opt) {
+  if (!chartInstance || !opt) {
+    return
+  }
+  chartInstance.setOption(opt, { notMerge: true })
+  chartInstance.resize()
+}
+
 /** 在挂载点创建实例并塞入配置 */
 function initChart() {
   if (!chartRef.value) {
@@ -23,7 +33,7 @@ function initChart() {
     chartInstance.dispose()
   }
   chartInstance = echarts.init(chartRef.value)
-  chartInstance.setOption(props.option)
+  applyOption(props.option)
 }
 
 /** 外层 div 尺寸变化时重绘，避免缩放过后面糊或留白 */
@@ -42,9 +52,8 @@ onMounted(() => {
 watch(
   () => props.option,
   (opt) => {
-    if (chartInstance && opt) {
-      chartInstance.setOption(opt, true)
-    }
+    applyOption(opt)
+    nextTick(() => resize())
   },
   { deep: true }
 )

ruoyi-screen/src/views/livestockResources/chartOptions.js

@@ -0,0 +1,460 @@
+/** 畜牧资源大屏 ECharts 配置（对齐 doc/大屏/畜牧资源 技术方案） */
+import 'echarts-wordcloud'
+
+const AXIS_LABEL = { color: '#9fb0c3', fontSize: 10 }
+const AXIS_LINE = { lineStyle: { color: 'rgba(61, 217, 176, 0.35)' } }
+const SPLIT_LINE = { lineStyle: { color: 'rgba(61, 217, 176, 0.12)' } }
+const GRID = { left: 40, right: 16, top: 36, bottom: 28, containLabel: true }
+
+const PIE_COLORS = ['#5ef0c8', '#ecd27b', '#6eb5ff', '#0f8f72', '#8a9fb0']
+const BAR_COLORS = ['#5ef0c8', '#ecd27b', '#6eb5ff', '#98e9aa']
+const WORD_COLORS = ['#5ef0c8', '#98e9aa', '#ecd27b', '#6eb5ff', '#a8d4c8', '#0f8f72']
+
+function emptyOption(text = '暂无数据') {
+  return {
+    title: {
+      text,
+      left: 'center',
+      top: 'middle',
+      textStyle: { color: '#6a9f90', fontSize: 13, fontWeight: 'normal' }
+    }
+  }
+}
+
+function formatShortDate(dateStr) {
+  if (!dateStr) {
+    return ''
+  }
+  const parts = String(dateStr).split('-')
+  if (parts.length >= 3) {
+    return `${parts[1]}-${parts[2]}`
+  }
+  return dateStr
+}
+
+function toNum(val) {
+  const n = Number(val)
+  return Number.isNaN(n) ? 0 : n
+}
+
+function chartBase() {
+  return { title: { show: false } }
+}
+
+/** 活跃度趋势 — 7 日会话数 + 提问量堆叠面积图 */
+export function buildActivityTrendOption(activityTrend) {
+  const series = activityTrend?.dailySeries || []
+  if (!series.length) {
+    return emptyOption('暂无活跃数据')
+  }
+  const dates = series.map((d) => formatShortDate(d.date))
+  const sessions = series.map((d) => toNum(d.sessionCount))
+  const questions = series.map((d) => toNum(d.questionCount))
+  return {
+    ...chartBase(),
+    color: ['#5ef0c8', '#ecd27b'],
+    tooltip: { trigger: 'axis' },
+    legend: {
+      top: 0,
+      right: 8,
+      textStyle: { color: '#a8d4c8', fontSize: 10 },
+      itemWidth: 12,
+      itemHeight: 8
+    },
+    grid: { ...GRID, top: 28, bottom: 24 },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: dates,
+      axisLabel: { ...AXIS_LABEL, fontSize: 9 },
+      axisLine: AXIS_LINE
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLabel: AXIS_LABEL,
+      axisLine: AXIS_LINE,
+      splitLine: SPLIT_LINE
+    },
+    series: [
+      {
+        name: '会话数',
+        type: 'line',
+        stack: 'total',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        areaStyle: { color: 'rgba(94, 240, 200, 0.35)' },
+        data: sessions
+      },
+      {
+        name: '提问量',
+        type: 'line',
+        stack: 'total',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        areaStyle: { color: 'rgba(236, 210, 123, 0.35)' },
+        data: questions
+      }
+    ]
+  }
+}
+
+/** 用户结构 — 新老用户对比柱图 */
+export function buildUserStructureOption(userStructure) {
+  if (!userStructure) {
+    return emptyOption('暂无用户数据')
+  }
+  const newCount = toNum(userStructure.newUserCount)
+  const oldCount = toNum(userStructure.oldUserCount)
+  // if (newCount === 0 && oldCount === 0) {
+  //   return emptyOption('暂无用户数据')
+  // }
+  const newRatio = userStructure?.newUserRatio != null ? Number(userStructure.newUserRatio).toFixed(1) : null
+  const oldRatio = userStructure?.oldUserRatio != null ? Number(userStructure.oldUserRatio).toFixed(1) : null
+  return {
+    ...chartBase(),
+    color: ['#5ef0c8', '#ecd27b'],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: (params) => {
+        const p = params[0]
+        const ratio = p.dataIndex === 0 ? newRatio : oldRatio
+        const ratioText = ratio != null ? ` (${ratio}%)` : ''
+        return `${p.name}<br/>${p.value} 人${ratioText}`
+      }
+    },
+    grid: { ...GRID, top: 16, bottom: 24 },
+    xAxis: {
+      type: 'category',
+      data: ['新用户', '老用户'],
+      axisLabel: { ...AXIS_LABEL, fontSize: 10 },
+      axisLine: AXIS_LINE
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLabel: AXIS_LABEL,
+      axisLine: AXIS_LINE,
+      splitLine: SPLIT_LINE
+    },
+    series: [
+      {
+        type: 'bar',
+        barMaxWidth: 48,
+        itemStyle: {
+          borderRadius: [4, 4, 0, 0],
+          color: (params) => BAR_COLORS[params.dataIndex % BAR_COLORS.length]
+        },
+        data: [newCount, oldCount]
+      }
+    ]
+  }
+}
+
+/** 提问分类占比 — 饼图 */
+export function buildCategoryShareOption(categoryShare) {
+  const items = categoryShare?.items || []
+  const data = items
+    .map((item, i) => ({
+      name: item.categoryName || item.categoryCode,
+      value: item.count ?? 0,
+      itemStyle: { color: PIE_COLORS[i % PIE_COLORS.length] }
+    }))
+  if (!data.length) {
+    return emptyOption('暂无分类数据')
+  }
+  return {
+    ...chartBase(),
+    tooltip: {
+      trigger: 'item',
+      formatter: (p) => {
+        const row = items.find((it) => (it.categoryName || it.categoryCode) === p.name)
+        const ratio = row?.ratio != null ? `${Number(row.ratio).toFixed(1)}%` : `${p.percent}%`
+        return `${p.name}<br/>${p.value} 条 (${ratio})`
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['0%', '62%'],
+        center: ['50%', '54%'],
+        label: {
+          color: '#e8eef5',
+          fontSize: 9,
+          formatter: (p) => {
+            const row = items.find((it) => (it.categoryName || it.categoryCode) === p.name)
+            const ratio = row?.ratio != null ? Number(row.ratio).toFixed(1) : p.percent
+            return `${p.name}\n${ratio}%`
+          }
+        },
+        labelLine: { length: 6, length2: 4 },
+        data
+      }
+    ]
+  }
+}
+
+/** 模型调用分析 — 分类条数柱图 */
+export function buildModelCallOption(modelCallAnalysis) {
+  const list = modelCallAnalysis || []
+  if (!list.length) {
+    return emptyOption('暂无调用数据')
+  }
+  const names = list.map((r) => r.categoryName || r.categoryCode || '')
+  const values = list.map((r) => toNum(r.count))
+  return {
+    ...chartBase(),
+    color: BAR_COLORS,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' }
+    },
+    grid: { ...GRID, top: 12, bottom: 28 },
+    xAxis: {
+      type: 'category',
+      data: names,
+      axisLabel: {
+        ...AXIS_LABEL,
+        interval: 0,
+        fontSize: 9,
+        rotate: names.some((n) => n.length > 4) ? 20 : 0
+      },
+      axisLine: AXIS_LINE
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLabel: AXIS_LABEL,
+      axisLine: AXIS_LINE,
+      splitLine: SPLIT_LINE
+    },
+    series: [
+      {
+        type: 'bar',
+        barMaxWidth: 28,
+        itemStyle: {
+          borderRadius: [4, 4, 0, 0],
+          color: (params) => BAR_COLORS[params.dataIndex % BAR_COLORS.length]
+        },
+        data: values
+      }
+    ]
+  }
+}
+
+/** 分时使用热度 — 会话柱 + 提问量折线（24 小时） */
+export function buildHourlyHeatOption(hourlyHeat) {
+  const series = hourlyHeat?.hourlySeries || []
+  if (!series.length) {
+    return emptyOption('暂无热度数据')
+  }
+  const labels = series.map((d) => d.bucketStart || '')
+  const sessions = series.map((d) => toNum(d.sessionCount))
+  const questions = series.map((d) => toNum(d.questionCount))
+  return {
+    ...chartBase(),
+    color: ['#5ef0c8', '#ecd27b'],
+    tooltip: { trigger: 'axis' },
+    legend: {
+      top: 0,
+      right: 8,
+      textStyle: { color: '#a8d4c8', fontSize: 10 },
+      itemWidth: 12,
+      itemHeight: 8
+    },
+    grid: { ...GRID, top: 28, bottom: 24, left: 36, right: 36 },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        ...AXIS_LABEL,
+        fontSize: 8,
+        interval: (idx) => idx % 4 === 0
+      },
+      axisLine: AXIS_LINE
+    },
+    yAxis: [
+      {
+        type: 'value',
+        minInterval: 1,
+        axisLabel: { ...AXIS_LABEL, fontSize: 9 },
+        axisLine: AXIS_LINE,
+        splitLine: SPLIT_LINE
+      },
+      {
+        type: 'value',
+        minInterval: 1,
+        axisLabel: { ...AXIS_LABEL, fontSize: 9 },
+        axisLine: AXIS_LINE,
+        splitLine: { show: false }
+      }
+    ],
+    series: [
+      {
+        name: '会话数',
+        type: 'bar',
+        barMaxWidth: 8,
+        itemStyle: { color: 'rgba(94, 240, 200, 0.75)', borderRadius: [2, 2, 0, 0] },
+        data: sessions
+      },
+      {
+        name: '提问量',
+        type: 'line',
+        yAxisIndex: 1,
+        smooth: true,
+        symbol: 'none',
+        lineStyle: { width: 2, color: '#ecd27b' },
+        data: questions
+      }
+    ]
+  }
+}
+
+/** 单次会话提问数量分布 — 环形图 */
+export function buildSessionReplyOption(sessionReplyDistribution) {
+  const list = sessionReplyDistribution || []
+  if (!list.length) {
+    return emptyOption('暂无分布数据')
+  }
+  const data = list
+    .map((item, i) => ({
+      name: item.bandName || item.bandCode,
+      value: toNum(item.sessionCount),
+      itemStyle: { color: PIE_COLORS[i % PIE_COLORS.length] }
+    }))
+  if (!data.length) {
+    return emptyOption('暂无分布数据')
+  }
+  return {
+    ...chartBase(),
+    tooltip: {
+      trigger: 'item',
+      formatter: (p) => {
+        const row = list.find((it) => (it.bandName || it.bandCode) === p.name)
+        const ratio = row?.ratio != null ? `${Number(row.ratio).toFixed(1)}%` : `${p.percent}%`
+        return `${p.name}<br/>${p.value} 会话 (${ratio})`
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['42%', '68%'],
+        center: ['50%', '54%'],
+        label: {
+          color: '#e8eef5',
+          fontSize: 9,
+          formatter: (p) => {
+            const row = list.find((it) => (it.bandName || it.bandCode) === p.name)
+            const ratio = row?.ratio != null ? Number(row.ratio).toFixed(1) : p.percent
+            return `${p.name}\n${ratio}%`
+          }
+        },
+        labelLine: { length: 6, length2: 4 },
+        data
+      }
+    ]
+  }
+}
+
+/** 会话状态分布 — 柱图（正常应答 / 调用失败） */
+export function buildReplyStatusOption(replyStatusDistribution) {
+  const items = replyStatusDistribution?.items || []
+  if (!items.length) {
+    return emptyOption('暂无状态数据')
+  }
+  const names = items.map((r) => r.statusName || r.statusCode || '')
+  const values = items.map((r) => toNum(r.count))
+  return {
+    ...chartBase(),
+    color: ['#5ef0c8', '#f56c6c'],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: (params) => {
+        const p = params[0]
+        const row = items[p.dataIndex]
+        const ratio = row?.ratio != null ? `${Number(row.ratio).toFixed(1)}%` : ''
+        return `${p.name}<br/>${p.value} 条${ratio ? ` (${ratio})` : ''}`
+      }
+    },
+    grid: { ...GRID, top: 12, bottom: 28 },
+    xAxis: {
+      type: 'category',
+      data: names,
+      axisLabel: { ...AXIS_LABEL, interval: 0, fontSize: 9 },
+      axisLine: AXIS_LINE
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLabel: AXIS_LABEL,
+      axisLine: AXIS_LINE,
+      splitLine: SPLIT_LINE
+    },
+    series: [
+      {
+        type: 'bar',
+        barMaxWidth: 36,
+        itemStyle: {
+          borderRadius: [4, 4, 0, 0],
+          color: (params) => (params.dataIndex === 0 ? '#5ef0c8' : '#f56c6c')
+        },
+        data: values
+      }
+    ]
+  }
+}
+
+/** 高频关键词 — ECharts 词云 */
+export function buildWordCloudOption(topKeywords) {
+  const list = topKeywords || []
+  if (!list.length) {
+    return emptyOption('暂无关键词')
+  }
+  const data = list
+    .filter((item) => item.keyword)
+    .map((item) => ({
+      name: item.keyword,
+      value: toNum(item.count)
+    }))
+  if (!data.length) {
+    return emptyOption('暂无关键词')
+  }
+  return {
+    ...chartBase(),
+    tooltip: {
+      show: true,
+      formatter: (p) => `${p.name}: ${p.value}`
+    },
+    series: [
+      {
+        type: 'wordCloud',
+        shape: 'circle',
+        left: 'center',
+        top: 'center',
+        width: '96%',
+        height: '96%',
+        sizeRange: [10, 26],
+        rotationRange: [-15, 15],
+        rotationStep: 15,
+        gridSize: 7,
+        drawOutOfBound: false,
+        textStyle: {
+          fontFamily: 'Microsoft YaHei, sans-serif',
+          fontWeight: 'bold',
+          color: () => WORD_COLORS[Math.floor(Math.random() * WORD_COLORS.length)]
+        },
+        emphasis: {
+          textStyle: {
+            shadowBlur: 8,
+            shadowColor: 'rgba(94, 240, 200, 0.6)'
+          }
+        },
+        data
+      }
+    ]
+  }
+}

ruoyi-screen/src/views/livestockResources/index.vue

@@ -1,30 +1,16 @@
 <template>
-  <div class="screen-page ts-page" :class="{ 'is-loading': loading }">
-    <div v-if="loadError" class="ts-error">{{ loadError }}</div>
-
-    <!-- <div class="ts-year-bar">
-      <label class="ts-year-bar__label">统计年份</label>
-      <select
-        v-model="statYear"
-        class="ts-year-bar__select"
-        :disabled="loading"
-        @change="onYearChange"
-      >
-        <option v-for="y in availableYears" :key="y" :value="String(y)">{{ y }}年</option>
-      </select>
-      <span v-if="statDate" class="ts-year-bar__date">统计日 {{ statDate }}</span>
-    </div> -->
-
-    <!-- 左栏：核心数据总览（ -->
+  <div class="screen-page lr-page" :class="{ 'is-loading': loading }">
+    <div v-if="loadError" class="lr-error">{{ loadError }}</div>
+
+    <!-- 左栏：核心总览 + 活跃/用户/分类/模型 -->
     <div class="screen-page--home-column">
       <div class="screen-page--home-column-top">
         <div class="top_title">核心数据总览 གཙོ་བོའི་གནས་ཚད་བསྡུས་གསལ།</div>
-        <div class="ts-overview-grid">
+        <div class="lr-overview-grid">
           <div
-            v-for="item in liveStock"
+            v-for="item in overviewItems"
             :key="item.key"
-            class="ts-overview-cell"
-            :class="{ 'ts-overview-cell--placeholder': item.placeholder }"
+            class="lr-overview-cell"
           >
             <div class="content_title"><div>{{ item.label }}</div></div>
             <div class="content_num">
@@ -38,17 +24,45 @@
       <div class="screen-page--home-column-flex">
         <div class="screen-page--home-column-flex-item">
           <div class="flex_title">活跃度趋势 འགྲོ་འདུག་གོམ་སྟངས་རྒྱུན་སྟངས།</div>
-          <div class="flex_content flex_content--quote">
-           
-            <div class="quote-chart">
-              
-            </div>
+          <div class="flex_content">
+            <ScreenChart :option="activityTrendOption" />
           </div>
         </div>
         <div class="screen-page--home-column-flex-item">
           <div class="flex_title">用户结构分析 སྤྱོད་མིའི་གོ་སྐབས་དཔྱད་པ།</div>
-          <div class="flex_content">
-           
+          <div class="flex_content flex_content--user">
+            <div class="lr-rings">
+              <div class="lr-ring">
+                <div class="lr-ring__figure">
+                  <div class="lr-ring__outer">
+                    <div class="lr-ring__inner">
+                      <div class="lr-ring__val">
+                        <strong>{{ userStructureDisplay.newCount }}</strong>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="lr-ring__label">新用户人数</div>
+                <div v-if="userStructureDisplay.newRatio" class="lr-ring__ratio">
+                  占比 {{ userStructureDisplay.newRatio }}
+                </div>
+              </div>
+              <div class="lr-ring">
+                <div class="lr-ring__figure">
+                  <div class="lr-ring__outer">
+                    <div class="lr-ring__inner">
+                      <div class="lr-ring__val">
+                        <strong>{{ userStructureDisplay.oldCount }}</strong>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="lr-ring__label">老用户人数</div>
+                <div v-if="userStructureDisplay.oldRatio" class="lr-ring__ratio">
+                  占比 {{ userStructureDisplay.oldRatio }}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -57,49 +71,63 @@
         <div class="screen-page--home-column-flex-item">
           <div class="flex_title">提问分类占比 དྲིས་ལན་དབྱེ་རྩིས་བགོ་སྟངས།</div>
           <div class="flex_content">
-          
+            <ScreenChart :option="categoryShareOption" />
           </div>
         </div>
         <div class="screen-page--home-column-flex-item">
           <div class="flex_title">模型调用分析 དཔེ་གཞི་འབྲི་རྩོམ་དཔྱད་པ།</div>
           <div class="flex_content">
-           
+            <ScreenChart :option="modelCallOption" />
           </div>
         </div>
       </div>
     </div>
 
-    <!-- 右栏：农资商城本期不实现，保留占位 -->
+    <!-- 右栏：分时热度 + 分布/榜单/词云 -->
     <div class="screen-page--home-column">
-      <div class="screen-page--home-column-right ts-mall-panel">
+      <div class="screen-page--home-column-right lr-heat-panel">
         <div class="top_title">分时使用热度 དུས་སྐོར་སྤྱོད་སྟོབས་ཚད།</div>
-        
+        <div class="lr-heat-chart">
+          <ScreenChart :option="hourlyHeatOption" />
+        </div>
       </div>
+
       <div class="screen-page--home-column-flex">
         <div class="screen-page--home-column-flex-item">
           <div class="flex_title">会话提问数量分布 གོ་སྐབས་དྲིས་གྲངས་ཁྱབ་སྤེལ།</div>
-          <div class="flex_content flex_content--placeholder">
-          
+          <div class="flex_content">
+            <ScreenChart :option="sessionReplyOption" />
           </div>
         </div>
         <div class="screen-page--home-column-flex-item">
           <div class="flex_title">会话状态分布 གོ་སྐབས་གནས་སྟངས་ཁྱབ་སྤེལ།</div>
-          <div class="flex_content flex_content--placeholder">
-          
+          <div class="flex_content">
+            <ScreenChart :option="replyStatusOption" />
           </div>
         </div>
       </div>
+
       <div class="screen-page--home-column-flex">
         <div class="screen-page--home-column-flex-item">
           <div class="flex_title">热门问题榜单 ཡོངས་གྲགས་དྲིས་ལན་གསལ་ཐོ།</div>
-          <div class="flex_content flex_content--placeholder">
-           
+          <div class="flex_content flex_content--list">
+            <ul v-if="hotTopics.length" class="lr-hot-list">
+              <li v-for="(item, idx) in hotTopics" :key="item.categoryCode + '-' + idx" class="lr-hot-list__row">
+                <span class="lr-hot-list__rank" :class="'lr-hot-list__rank--' + (idx + 1)">{{ idx + 1 }}</span>
+                <span class="lr-hot-list__name" :title="item.categoryName">{{ item.categoryName }}</span>
+                <span class="lr-hot-list__meta">
+                  <strong>{{ formatNum(item.count) }}</strong>
+                  <em v-if="item.ratio != null">{{ formatRatio(item.ratio) }}%</em>
+                </span>
+              </li>
+            </ul>
+            <span v-else class="lr-empty">暂无榜单数据</span>
           </div>
         </div>
         <div class="screen-page--home-column-flex-item">
           <div class="flex_title">高频关键词 མང་དུ་སྦྱོང་བའི་ཚིག་གཙོ།</div>
-          <div class="flex_content flex_content--placeholder">
-           
+          <div class="flex_content">
+            <ScreenChart :option="wordCloudOption" />
           </div>
         </div>
       </div>
@@ -110,19 +138,206 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
 import ScreenChart from '@/components/ScreenChart.vue'
+import { getLivestockResourceDashboard } from '@/api/livestockResources'
+import {
+  buildActivityTrendOption,
+  buildCategoryShareOption,
+  buildHourlyHeatOption,
+  buildModelCallOption,
+  buildReplyStatusOption,
+  buildSessionReplyOption,
+  buildWordCloudOption
+} from './chartOptions'
 
 const loading = ref(false)
 const loadError = ref('')
 const statYear = ref(String(new Date().getFullYear()))
-const statDate = ref('')
-
-const liveStock = ref([])
-
 
+const overview = ref(null)
+const activityTrend = ref(null)
+const userStructure = ref(null)
+const categoryShare = ref(null)
+const modelCallAnalysis = ref([])
+const hourlyHeat = ref(null)
+const sessionReplyDistribution = ref([])
+const replyStatusDistribution = ref(null)
+const hotTopics = ref([])
+const topKeywords = ref([])
+
+const activityTrendOption = computed(() => buildActivityTrendOption(activityTrend.value))
+const categoryShareOption = computed(() => buildCategoryShareOption(categoryShare.value))
+const modelCallOption = computed(() => buildModelCallOption(modelCallAnalysis.value))
+const hourlyHeatOption = computed(() => buildHourlyHeatOption(hourlyHeat.value))
+const sessionReplyOption = computed(() => buildSessionReplyOption(sessionReplyDistribution.value))
+const replyStatusOption = computed(() => buildReplyStatusOption(replyStatusDistribution.value))
+const wordCloudOption = computed(() => buildWordCloudOption(topKeywords.value))
+
+/** 核心总览 8 项（布局对齐交易总览，4 列 × 2 行） */
+const overviewItems = computed(() => {
+  const o = overview.value
+  return [
+    { key: 'totalUsers', label: '累计使用用户', unit: '人', value: display(o?.totalUsers) },
+    { key: 'todayActiveUsers', label: '今日活跃用户', unit: '人', value: display(o?.todayActiveUsers) },
+    { key: 'todayNewUsers', label: '日新增用户', unit: '人', value: display(o?.todayNewUsers) },
+    { key: 'totalSessions', label: '累计会话数', unit: '次', value: display(o?.totalSessions) },
+    { key: 'todaySessions', label: '今日会话数', unit: '次', value: display(o?.todaySessions) },
+    { key: 'totalQuestionCount', label: '累计提问量', unit: '次', value: display(o?.totalQuestionCount) },
+    { key: 'todayQuestionCount', label: '今日提问量', unit: '次', value: display(o?.todayQuestionCount) },
+    {
+      key: 'avgResponseSeconds',
+      label: '平均响应时长',
+      unit: '秒',
+      value: displaySeconds(o?.avgResponseSeconds)
+    }
+  ]
+})
+
+/** 用户结构双圆环：人数 + 占比（对齐共同富裕「数字赋能」圆环样式） */
+const userStructureDisplay = computed(() => {
+  const u = userStructure.value
+  const newRatio = u?.newUserRatio != null ? `${formatRatio(u.newUserRatio)}%` : ''
+  const oldRatio = u?.oldUserRatio != null ? `${formatRatio(u.oldUserRatio)}%` : ''
+  return {
+    newCount: display(u?.newUserCount),
+    oldCount: display(u?.oldUserCount),
+    newRatio,
+    oldRatio
+  }
+})
+
+function formatNum(val) {
+  if (val === null || val === undefined || val === '') {
+    return '0'
+  }
+  const n = Number(val)
+  if (Number.isNaN(n)) {
+    return '0'
+  }
+  return n.toLocaleString('zh-CN')
+}
+
+function display(val) {
+  return formatNum(val)
+}
+
+function displaySeconds(val) {
+  if (val === null || val === undefined || val === '') {
+    return '0'
+  }
+  const n = Number(val)
+  if (Number.isNaN(n)) {
+    return '0'
+  }
+  return n.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 1 })
+}
+
+function formatRatio(val) {
+  const n = Number(val)
+  if (Number.isNaN(n)) {
+    return '0.0'
+  }
+  return n.toFixed(1)
+}
+
+/** 兼容拦截器返回 AjaxResult，或直接返回 data 本体 */
+function resolveDashboard(res) {
+  if (!res) {
+    return null
+  }
+  const payload = res.data !== undefined ? res.data : res
+  if (payload && payload.data && payload.overview == null && payload.data.overview) {
+    return payload.data
+  }
+  return payload
+}
+
+function normalizeActivityTrend(raw) {
+  if (!raw) {
+    return null
+  }
+  if (Array.isArray(raw)) {
+    return { dailySeries: raw }
+  }
+  return raw
+}
+
+function normalizeHourlyHeat(raw) {
+  if (!raw) {
+    return null
+  }
+  if (Array.isArray(raw)) {
+    return { hourlySeries: raw }
+  }
+  return raw
+}
+
+function normalizeReplyStatus(raw) {
+  if (!raw) {
+    return null
+  }
+  if (Array.isArray(raw)) {
+    return { items: raw }
+  }
+  return raw
+}
+
+function pickHotTopics(data, categoryItems) {
+  if (data.hotTopics?.length) {
+    return data.hotTopics
+  }
+  return [...(categoryItems || [])]
+    .filter((item) => toNum(item?.count) > 0)
+    .sort((a, b) => toNum(b.count) - toNum(a.count))
+    .slice(0, 5)
+}
+
+function toNum(val) {
+  const n = Number(val)
+  return Number.isNaN(n) ? 0 : n
+}
+
+function applyDashboard(data) {
+  if (!data) {
+    return
+  }
+  if (data.statYear) {
+    statYear.value = String(data.statYear)
+  }
+  overview.value = data.overview || null
+  activityTrend.value = normalizeActivityTrend(data.activityTrend)
+  userStructure.value = data.userStructure || null
+  categoryShare.value = data.categoryShare || null
+  const categoryItems = data.categoryShare?.items || []
+  modelCallAnalysis.value = data.modelCallAnalysis?.length
+    ? data.modelCallAnalysis
+    : categoryItems
+  hourlyHeat.value = normalizeHourlyHeat(data.hourlyHeat)
+  sessionReplyDistribution.value = data.sessionReplyDistribution || []
+  replyStatusDistribution.value = normalizeReplyStatus(data.replyStatusDistribution)
+  hotTopics.value = pickHotTopics(data, categoryItems)
+  topKeywords.value = data.topKeywords || []
+}
+
+async function fetchDashboard() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    const res = await getLivestockResourceDashboard(statYear.value)
+    applyDashboard(resolveDashboard(res))
+  } catch (e) {
+    loadError.value = e?.message || '看板数据加载失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchDashboard()
+})
 </script>
 
 <style scoped>
-.ts-page {
+.lr-page {
   position: relative;
   width: 100%;
   height: 100%;
@@ -133,11 +348,11 @@ const liveStock = ref([])
   justify-content: space-between;
 }
 
-.ts-page.is-loading {
+.lr-page.is-loading {
   opacity: 0.92;
 }
 
-.ts-error {
+.lr-error {
   position: absolute;
   top: 4px;
   left: 50%;
@@ -150,38 +365,6 @@ const liveStock = ref([])
   border-radius: 4px;
 }
 
-.ts-year-bar {
-  position: absolute;
-  top: 8px;
-  right: 24px;
-  z-index: 5;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.ts-year-bar__label {
-  font-size: 12px;
-  color: var(--screen-text-secondary, #a8d4c8);
-}
-
-.ts-year-bar__select {
-  min-width: 88px;
-  height: 28px;
-  padding: 0 8px;
-  font-size: 13px;
-  color: #e8eef5;
-  background: rgba(4, 48, 40, 0.85);
-  border: 1px solid var(--screen-line-dim, rgba(61, 217, 176, 0.42));
-  border-radius: 4px;
-  outline: none;
-}
-
-.ts-year-bar__date {
-  font-size: 11px;
-  color: rgba(168, 212, 200, 0.75);
-}
-
 .screen-page--home-column {
   width: 617px;
   height: 100%;
@@ -196,35 +379,29 @@ const liveStock = ref([])
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background: url('../../assets/sale/sale.png') no-repeat center center;
+  background: url('../../assets/live/live.png') no-repeat center center;
   background-size: 100% 100%;
 }
 
 .screen-page--home-column-right {
   width: 617px;
   height: 201px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
   background: url('../../assets/pro/pro.png') no-repeat center center;
   background-size: 100% 100%;
 }
 
-.ts-mall-panel {
-  display: flex;
-  flex-direction: column;
+.lr-heat-panel {
+  overflow: hidden;
 }
 
-.ts-placeholder {
+.lr-heat-chart {
   flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 24px;
-  text-align: center;
-  font-size: 14px;
-  color: rgba(168, 212, 200, 0.75);
-}
-
-.ts-placeholder--sm {
-  font-size: 13px;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: 0 8px 8px;
 }
 
 .screen-page--home-column-flex {
@@ -253,18 +430,19 @@ const liveStock = ref([])
   flex-shrink: 0;
 }
 
-.ts-overview-grid {
+/* 核心总览：4 列 × 2 行，对齐交易总览样式 */
+.lr-overview-grid {
   flex: 1;
   min-height: 0;
   box-sizing: border-box;
-  padding: 6px 20px 14px 32px;
+  padding: 4px 20px 12px 28px;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  gap: 4px 40px;
+  gap: 2px 16px;
 }
 
-.ts-overview-cell {
+.lr-overview-cell {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -273,29 +451,29 @@ const liveStock = ref([])
   width: 100%;
   text-align: right;
   box-sizing: border-box;
-  padding-right: 10px;
+  padding-right: 6px;
 }
 
-.ts-overview-cell .content_title {
+.lr-overview-cell .content_title {
   width: 100%;
   text-align: right;
 }
 
-.ts-overview-cell .content_num {
+.lr-overview-cell .content_num {
   width: 100%;
   display: flex;
   align-items: baseline;
   justify-content: flex-end;
-  gap: 6px;
-  margin: 4px 0 0;
-  line-height: 1.3;
+  gap: 4px;
+  margin: 2px 0 0;
+  line-height: 1.2;
 }
 
 .content_num__value {
   flex: 1;
   min-width: 0;
   text-align: right;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 600;
   background: linear-gradient(to bottom, #98e9aa, #ecd27b);
   -webkit-background-clip: text;
@@ -305,25 +483,15 @@ const liveStock = ref([])
 
 .content_num__unit {
   flex-shrink: 0;
-  font-size: 12px;
+  font-size: 11px;
   color: #a8d4c8;
   line-height: 1.2;
-  text-align: right;
-}
-
-.ts-overview-cell--placeholder .content_num__value {
-  font-size: 18px;
-  background: none;
-  -webkit-background-clip: unset;
-  background-clip: unset;
-  color: #6a9f90;
 }
 
 .content_title {
-
-  font-size: 11px;
+  font-size: 10px;
   color: #a8d4c8;
-  line-height: 1.3;
+  line-height: 1.25;
 }
 
 .flex_title {
@@ -344,63 +512,215 @@ const liveStock = ref([])
   padding: 5px;
 }
 
-.flex_content--quote {
+.flex_content--user {
   display: flex;
-  flex-direction: column;
-  padding: 4px 6px;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px 8px;
 }
 
-.quote-summary {
+/* 用户结构双圆环（对齐 commonProsperity 数字赋能 cp-ring） */
+.lr-rings {
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
-  gap: 6px;
-  height: 42px;
-  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-around;
+  gap: 8px;
 }
 
-.quote-summary__item {
+.lr-ring {
   flex: 1;
+  min-width: 0;
+  max-width: 130px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: rgba(4, 48, 40, 0.45);
-  border-radius: 4px;
-  border: 1px solid rgba(61, 217, 176, 0.2);
 }
 
-.quote-summary__label {
+.lr-ring__figure {
+  width: 104px;
+  height: 104px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lr-ring__outer {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 2px solid rgba(236, 210, 123, 0.22);
+  background: transparent;
+}
+
+.lr-ring__inner {
+  position: relative;
+  width: 82%;
+  height: 82%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+}
+
+.lr-ring__inner::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  padding: 3px;
+  background: linear-gradient(160deg, #45f0b8 0%, #1d9a7a 42%, #ecd27b 100%);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.lr-ring__val {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+  text-align: center;
+  line-height: 1.15;
+  color: #e8eef5;
+}
+
+.lr-ring__val strong {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #ecd27b;
+}
+
+.lr-ring__label {
+  margin-top: 6px;
+  width: 100%;
+  padding: 0 2px;
+  box-sizing: border-box;
   font-size: 10px;
   color: #a8d4c8;
+  text-align: center;
+  line-height: 1.35;
+}
+
+.lr-ring__ratio {
+  margin-top: 2px;
+  font-size: 9px;
+  color: #5ef0c8;
+  text-align: center;
+  line-height: 1.3;
+}
+
+.flex_content--list {
+  padding: 6px 10px;
+  overflow: hidden;
+}
+
+.lr-hot-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
-.quote-summary__val {
+.lr-hot-list__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 30px;
+  padding: 0 4px;
+  border-bottom: 1px solid rgba(61, 217, 176, 0.12);
+}
+
+.lr-hot-list__row:last-child {
+  border-bottom: none;
+}
+
+.lr-hot-list__rank {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  background: rgba(61, 217, 176, 0.25);
+  color: #a8d4c8;
   font-size: 11px;
+  line-height: 18px;
+  text-align: center;
+}
+
+.lr-hot-list__rank--1 {
+  background: linear-gradient(135deg, #ecd27b, #c9a030);
+  color: #1a2e28;
+}
+
+.lr-hot-list__rank--2 {
+  background: rgba(236, 210, 123, 0.55);
   color: #fff;
 }
 
-.quote-summary__val strong {
-  font-size: 14px;
-  background: linear-gradient(to bottom, #98e9aa, #ecd27b);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+.lr-hot-list__rank--3 {
+  background: rgba(110, 181, 255, 0.45);
+  color: #fff;
 }
 
-.quote-summary__unit {
+.lr-hot-list__name {
+  flex: 1;
+  min-width: 0;
+  font-size: 11px;
+  color: #e8eef5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lr-hot-list__meta {
+  flex-shrink: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
   font-size: 10px;
   color: #a8d4c8;
-  margin-left: 2px;
 }
 
-.quote-chart {
-  flex: 1;
-  min-height: 0;
+.lr-hot-list__meta strong {
+  font-size: 12px;
+  color: #5ef0c8;
+  font-weight: 600;
+}
+
+.lr-hot-list__meta em {
+  font-style: normal;
+  color: #ecd27b;
 }
 
-.flex_content--placeholder {
+.lr-empty {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 13px;
+  color: rgba(168, 212, 200, 0.75);
 }
 </style>