123

ruoyi-screen/src/api/tradeSales.js

@@ -1,10 +1,14 @@
 import request from '@/utils/request'
 
 /** 看板主数据 GET /bigScreen/tradeSales/dashboard */
-export function getTradeSalesDashboard(statYear) {
+export function getTradeSalesDashboard(statYear, forceRefresh = false) {
+  const params = { statYear }
+  if (forceRefresh) {
+    params.forceRefresh = true
+  }
   return request({
     url: '/bigScreen/tradeSales/dashboard',
     method: 'get',
-    params: { statYear }
+    params
   })
 }

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

@@ -43,27 +43,39 @@ function formatQuoteDate(quoteDate) {
   return quoteDate
 }
 
-/** 产地行情 — 近 7 日均价面积图 */
+/** 产地行情 — 近 7 日最低/最高/均价三曲线 */
 export function buildOriginQuoteOption(originQuote) {
   if (!originQuote?.hasQuoteData || !originQuote.dailyTrend?.length) {
     return emptyOption('暂无行情数据')
   }
   const dates = originQuote.dailyTrend.map((d) => formatQuoteDate(d.quoteDate))
+  const minPrices = originQuote.dailyTrend.map((d) => Number(d.minPrice ?? 0))
+  const maxPrices = originQuote.dailyTrend.map((d) => Number(d.maxPrice ?? 0))
   const avgPrices = originQuote.dailyTrend.map((d) => Number(d.avgPrice ?? 0))
-  if (!avgPrices.some((v) => v > 0)) {
+  if (![...minPrices, ...maxPrices, ...avgPrices].some((v) => v > 0)) {
     return emptyOption('暂无行情数据')
   }
   const unit = originQuote.priceUnitLabel || ''
   return {
-    color: ['#5ef0c8'],
+    color: ['#6eb5ff', '#ecd27b', '#5ef0c8'],
     tooltip: {
       trigger: 'axis',
       formatter: (params) => {
-        const p = params[0]
-        return `${p.name}<br/>均价 ${p.value}${unit}`
+        const lines = [params[0]?.name || '']
+        params.forEach((p) => {
+          lines.push(`${p.marker}${p.seriesName} ${p.value}${unit}`)
+        })
+        return lines.join('<br/>')
       }
     },
-    grid: { ...GRID, top: 8, bottom: 24 },
+    legend: {
+      bottom: 0,
+      left: 'center',
+      textStyle: { color: '#a8d4c8', fontSize: 9 },
+      itemWidth: 12,
+      itemHeight: 6
+    },
+    grid: { ...GRID, top: 8, bottom: 30 },
     xAxis: {
       type: 'category',
       data: dates,
@@ -77,13 +89,29 @@ export function buildOriginQuoteOption(originQuote) {
       splitLine: SPLIT_LINE
     },
     series: [
+      {
+        name: '最低价',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 3,
+        data: minPrices
+      },
+      {
+        name: '最高价',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 3,
+        data: maxPrices
+      },
       {
         name: '均价',
         type: 'line',
         smooth: true,
         symbol: 'circle',
-        symbolSize: 4,
-        areaStyle: { color: 'rgba(94, 240, 200, 0.25)' },
+        symbolSize: 3,
+        areaStyle: { color: 'rgba(94, 240, 200, 0.18)' },
         data: avgPrices
       }
     ]
@@ -170,9 +198,6 @@ export function buildSalesDestinationBarOption(salesDestination) {
   const sorted = [...salesDestination].sort((a, b) => a.salesDestination - b.salesDestination)
   const names = sorted.map((r) => r.salesDestinationName || '')
   const values = sorted.map((r) => r.tradeHeads ?? 0)
-  if (!values.some((v) => v > 0)) {
-    return emptyOption('暂无去向数据')
-  }
   return {
     color: DESTINATION_COLOR,
     tooltip: {
@@ -219,13 +244,12 @@ export function buildQualityGradePieOption(qualityGrade) {
     return emptyOption('暂无等级数据')
   }
   const data = qualityGrade.items
-    .filter((item) => (item.tradeHeads ?? 0) > 0)
     .map((item, i) => ({
       name: item.gradeName || item.gradeCode,
       value: item.tradeHeads ?? 0,
       itemStyle: { color: GRADE_COLOR[i % GRADE_COLOR.length] }
     }))
-  if (!data.length) {
+  if (!data.length || !data.some((item) => item.value > 0)) {
     return emptyOption('暂无等级数据')
   }
   return {
@@ -265,11 +289,22 @@ export function buildQualityGradePieOption(qualityGrade) {
 const MALL_PIE_COLOR = ['#5ef0c8', '#ecd27b', '#6eb5ff', '#0f8f72', '#c9a227', '#8b7cf6']
 const MALL_BAR_COLOR = ['#5ef0c8', '#6eb5ff', '#ecd27b', '#0f8f72', '#c9a227']
 const WORD_COLORS = ['#5ef0c8', '#ecd27b', '#6eb5ff', '#98e9aa', '#0f8f72', '#c9a227']
+const MALL_UNAVAILABLE_TEXT = '商城统计未接入'
+
+function resolveMallEmptyText(mallStatsAvailable, defaultText = '暂无数据') {
+  if (mallStatsAvailable === false) {
+    return MALL_UNAVAILABLE_TEXT
+  }
+  return defaultText
+}
 
 /** 农资品类销售占比 — 饼图 */
-export function buildCategorySalesPieOption(categorySales) {
+export function buildCategorySalesPieOption(categorySales, mallStatsAvailable = true) {
+  if (mallStatsAvailable === false) {
+    return emptyOption(MALL_UNAVAILABLE_TEXT)
+  }
   if (!categorySales?.items?.length || !(categorySales.totalQty > 0)) {
-    return emptyOption('暂无品类数据')
+    return emptyOption(resolveMallEmptyText(mallStatsAvailable, '暂无品类数据'))
   }
   const data = categorySales.items
     .filter((item) => (item.qty ?? 0) > 0)
@@ -312,9 +347,12 @@ export function buildCategorySalesPieOption(categorySales) {
 }
 
 /** 商城订单趋势 — 曲线 */
-export function buildMallOrderTrendOption(mallOrderTrend) {
+export function buildMallOrderTrendOption(mallOrderTrend, mallStatsAvailable = true) {
+  if (mallStatsAvailable === false) {
+    return emptyOption(MALL_UNAVAILABLE_TEXT)
+  }
   if (!mallOrderTrend?.items?.length) {
-    return emptyOption('暂无订单数据')
+    return emptyOption(resolveMallEmptyText(mallStatsAvailable, '暂无订单数据'))
   }
   const counts = monthSeries(mallOrderTrend.items, 'orderCount')
   if (!counts.some((v) => v > 0)) {
@@ -352,9 +390,12 @@ export function buildMallOrderTrendOption(mallOrderTrend) {
 }
 
 /** 店铺入驻 — 饼图（按月占比） */
-export function buildShopEntryPieOption(shopEntry) {
+export function buildShopEntryPieOption(shopEntry, mallStatsAvailable = true) {
+  if (mallStatsAvailable === false) {
+    return emptyOption(MALL_UNAVAILABLE_TEXT)
+  }
   if (!shopEntry?.items?.length || !(shopEntry.yearTotal > 0)) {
-    return emptyOption('暂无入驻数据')
+    return emptyOption(resolveMallEmptyText(mallStatsAvailable, '暂无入驻数据'))
   }
   const data = shopEntry.items
     .filter((item) => (item.shopCount ?? 0) > 0)
@@ -393,9 +434,12 @@ export function buildShopEntryPieOption(shopEntry) {
 }
 
 /** 消费区域排名 Top5 — 柱图（万元） */
-export function buildRegionRankBarOption(regionRank) {
+export function buildRegionRankBarOption(regionRank, mallStatsAvailable = true) {
+  if (mallStatsAvailable === false) {
+    return emptyOption(MALL_UNAVAILABLE_TEXT)
+  }
   if (!regionRank?.items?.length) {
-    return emptyOption('暂无区域数据')
+    return emptyOption(resolveMallEmptyText(mallStatsAvailable, '暂无区域数据'))
   }
   const sorted = [...regionRank.items].sort((a, b) => a.rank - b.rank)
   const names = sorted.map((r) => r.city || '')
@@ -441,10 +485,13 @@ export function buildRegionRankBarOption(regionRank) {
 }
 
 /** 消费者评价词云 */
-export function buildReviewWordCloudOption(reviewWordCloud) {
+export function buildReviewWordCloudOption(reviewWordCloud, mallStatsAvailable = true) {
+  if (mallStatsAvailable === false) {
+    return emptyOption(MALL_UNAVAILABLE_TEXT)
+  }
   const list = reviewWordCloud?.items || []
   if (!list.length) {
-    return emptyOption('暂无评价数据')
+    return emptyOption(resolveMallEmptyText(mallStatsAvailable, '暂无评价数据'))
   }
   const data = list
     .filter((item) => item.word)

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

@@ -1,8 +1,10 @@
 <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">
+    <div v-if="loadError" class="ts-error" @click="onRetry">
+      {{ loadError }}（点击重试）
+    </div>
+<!-- 
+    <div class="ts-year-bar">
       <label class="ts-year-bar__label">统计年份</label>
       <select
         v-model="statYear"
@@ -13,9 +15,17 @@
         <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>
+      <button
+        type="button"
+        class="ts-year-bar__refresh"
+        :disabled="loading || refreshing"
+        @click="onManualRefresh"
+      >
+        {{ refreshing ? '刷新中…' : '刷新' }}
+      </button>
     </div> -->
 
-    <!-- 左栏：牦牛交易（对接 §3.1） -->
+    <!-- 左栏：牦牛交易 -->
     <div class="screen-page--home-column">
       <div class="screen-page--home-column-top">
         <div class="top_title">交易总览 ཚོང་འདོན་ཀྱི་རྒྱུན་བསྡུས།</div>
@@ -59,6 +69,12 @@
                   <strong>{{ formatPrice(originQuote?.maxPrice7d) }}</strong>
                 </div>
               </div>
+              <div class="quote-summary__item">
+                <div class="quote-summary__label">最近行情日</div>
+                <div class="quote-summary__val quote-summary__val--date">
+                  <strong>{{ originQuote?.lastQuoteDate || '—' }}</strong>
+                </div>
+              </div>
             </div>
             <div class="quote-chart">
               <ScreenChart :option="originQuoteChartOption" />
@@ -89,10 +105,13 @@
       </div>
     </div>
 
-    <!-- 右栏：农资商城（对接 §8～13） -->
-    <div class="screen-page--home-column">
+    <!-- 右栏：农资商城 -->
+    <div class="screen-page--home-column" :class="{ 'ts-mall-unavailable': !mallStatsAvailable }">
       <div class="screen-page--home-column-right ts-mall-panel">
-        <div class="top_title">农资品类销售 ཞིང་ལས་རྒྱུ་ཆ་རིགས་ཀྱི་ཚོང་འདོན།</div>
+        <div class="top_title">
+          农资品类销售 ཞིང་ལས་རྒྱུ་ཆ་རིགས་ཀྱི་ཚོང་འདོན།
+          <span v-if="categoryStatDate" class="ts-mall-stat-date">（{{ categoryStatDate }}）</span>
+        </div>
         <div class="ts-mall-top">
           <div class="ts-mall-top__pie">
             <ScreenChart :option="categorySalesChartOption" />
@@ -103,7 +122,7 @@
               <li v-for="item in hotCategoryItems" :key="item.rank" class="ts-mall-hot-list__row">
                 <span class="ts-mall-hot-list__rank">{{ item.rank }}</span>
                 <span class="ts-mall-hot-list__name" :title="item.categoryName">{{ item.categoryName }}</span>
-                <span class="ts-mall-hot-list__qty">{{ formatNum(item.qty) }}</span>
+                <span class="ts-mall-hot-list__qty">{{ formatNum(item.qty) }} 件</span>
               </li>
             </ul>
             <span v-else class="ts-placeholder ts-placeholder--sm">{{ mallEmptyHint }}</span>
@@ -143,7 +162,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import ScreenChart from '@/components/ScreenChart.vue'
 import { getTradeSalesDashboard } from '@/api/tradeSales'
 import {
@@ -158,11 +177,15 @@ import {
   buildTradeMonthlyOption
 } from './chartOptions'
 
+/** 自动轮播刷新周期（对齐功能需求 §7.3，默认 3 分钟） */
+const DASHBOARD_REFRESH_MS = 3 * 60 * 1000
+
 const loading = ref(false)
+const refreshing = ref(false)
 const loadError = ref('')
 const statYear = ref(String(new Date().getFullYear()))
 const statDate = ref('')
-const availableYears = ref([])
+const availableYears = ref([new Date().getFullYear()])
 
 const tradeOverview = ref(null)
 const originQuote = ref(null)
@@ -177,15 +200,25 @@ const shopEntry = ref(null)
 const regionRank = ref(null)
 const reviewWordCloud = ref(null)
 
+let dashboardTimer = null
+
+const mallAvailable = computed(() => mallStatsAvailable.value)
+
 const originQuoteChartOption = computed(() => buildOriginQuoteOption(originQuote.value))
 const monthlyTrendChartOption = computed(() => buildTradeMonthlyOption(tradeMonthlyTrend.value))
 const destinationChartOption = computed(() => buildSalesDestinationBarOption(salesDestination.value))
 const qualityGradeChartOption = computed(() => buildQualityGradePieOption(qualityGrade.value))
-const categorySalesChartOption = computed(() => buildCategorySalesPieOption(categorySales.value))
-const mallOrderTrendChartOption = computed(() => buildMallOrderTrendOption(mallOrderTrend.value))
-const shopEntryChartOption = computed(() => buildShopEntryPieOption(shopEntry.value))
-const regionRankChartOption = computed(() => buildRegionRankBarOption(regionRank.value))
-const reviewWordCloudChartOption = computed(() => buildReviewWordCloudOption(reviewWordCloud.value))
+const categorySalesChartOption = computed(() =>
+  buildCategorySalesPieOption(categorySales.value, mallAvailable.value)
+)
+const mallOrderTrendChartOption = computed(() =>
+  buildMallOrderTrendOption(mallOrderTrend.value, mallAvailable.value)
+)
+const shopEntryChartOption = computed(() => buildShopEntryPieOption(shopEntry.value, mallAvailable.value))
+const regionRankChartOption = computed(() => buildRegionRankBarOption(regionRank.value, mallAvailable.value))
+const reviewWordCloudChartOption = computed(() =>
+  buildReviewWordCloudOption(reviewWordCloud.value, mallAvailable.value)
+)
 
 const hotCategoryItems = computed(() => {
   const items = hotCategoryRank.value?.items || []
@@ -194,13 +227,17 @@ const hotCategoryItems = computed(() => {
 
 const mallEmptyHint = computed(() => (mallStatsAvailable.value ? '暂无热销数据' : '商城统计未接入'))
 
+const categoryStatDate = computed(
+  () => categorySales.value?.statDate || hotCategoryRank.value?.statDate || ''
+)
+
 const tradeOverviewItems = computed(() => {
   const o = tradeOverview.value
   return [
     {
       key: 'orderCount',
       label: '牦牛交易订单数',
-      unit: '笔',
+      unit: '单',
       value: display(o?.orderCount),
       placeholder: false
     },
@@ -293,6 +330,21 @@ function formatPrice(val) {
   return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
 }
 
+function resetDashboard() {
+  tradeOverview.value = null
+  originQuote.value = null
+  tradeMonthlyTrend.value = []
+  salesDestination.value = []
+  qualityGrade.value = null
+  mallStatsAvailable.value = false
+  categorySales.value = null
+  hotCategoryRank.value = null
+  mallOrderTrend.value = null
+  shopEntry.value = null
+  regionRank.value = null
+  reviewWordCloud.value = null
+}
+
 function applyDashboard(data) {
   if (!data) {
     return
@@ -309,7 +361,7 @@ function applyDashboard(data) {
   tradeMonthlyTrend.value = data.tradeMonthlyTrend || []
   salesDestination.value = data.salesDestination || []
   qualityGrade.value = data.qualityGrade || null
-  mallStatsAvailable.value = !!data.mallStatsAvailable
+  mallStatsAvailable.value = data.mallStatsAvailable || false
   categorySales.value = data.categorySales || null
   hotCategoryRank.value = data.hotCategoryRank || null
   mallOrderTrend.value = data.mallOrderTrend || null
@@ -318,16 +370,25 @@ function applyDashboard(data) {
   reviewWordCloud.value = data.reviewWordCloud || null
 }
 
-async function fetchDashboard() {
-  loading.value = true
+async function fetchDashboard(forceRefresh = false) {
+  if (forceRefresh) {
+    if (refreshing.value) {
+      return
+    }
+    refreshing.value = true
+  } else {
+    loading.value = true
+    resetDashboard()
+  }
   loadError.value = ''
   try {
-    const res = await getTradeSalesDashboard(statYear.value)
+    const res = await getTradeSalesDashboard(statYear.value, forceRefresh)
     applyDashboard(res.data)
   } catch (e) {
     loadError.value = e?.message || '看板数据加载失败'
   } finally {
     loading.value = false
+    refreshing.value = false
   }
 }
 
@@ -335,8 +396,30 @@ function onYearChange() {
   fetchDashboard()
 }
 
+function onManualRefresh() {
+  fetchDashboard(true)
+}
+
+function onRetry() {
+  fetchDashboard()
+}
+
+function startDashboardTimer() {
+  dashboardTimer = setInterval(() => {
+    fetchDashboard(true)
+  }, DASHBOARD_REFRESH_MS)
+}
+
 onMounted(() => {
   fetchDashboard()
+  startDashboardTimer()
+})
+
+onUnmounted(() => {
+  if (dashboardTimer) {
+    clearInterval(dashboardTimer)
+    dashboardTimer = null
+  }
 })
 </script>
 
@@ -367,6 +450,7 @@ onMounted(() => {
   color: #ffb4b4;
   background: rgba(80, 20, 20, 0.75);
   border-radius: 4px;
+  cursor: pointer;
 }
 
 .ts-year-bar {
@@ -401,6 +485,22 @@ onMounted(() => {
   color: rgba(168, 212, 200, 0.75);
 }
 
+.ts-year-bar__refresh {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+  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;
+  cursor: pointer;
+}
+
+.ts-year-bar__refresh:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .screen-page--home-column {
   width: 617px;
   height: 100%;
@@ -431,6 +531,12 @@ onMounted(() => {
   flex-direction: column;
 }
 
+.ts-mall-stat-date {
+  font-size: 12px;
+  color: rgba(168, 212, 200, 0.8);
+  margin-left: 4px;
+}
+
 .ts-mall-top {
   flex: 1;
   min-height: 0;
@@ -613,7 +719,6 @@ onMounted(() => {
 }
 
 .content_title {
-
   font-size: 11px;
   color: #a8d4c8;
   line-height: 1.3;
@@ -646,13 +751,15 @@ onMounted(() => {
 .quote-summary {
   display: flex;
   flex-direction: row;
-  gap: 6px;
-  height: 42px;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-height: 42px;
   flex-shrink: 0;
 }
 
 .quote-summary__item {
-  flex: 1;
+  flex: 1 1 calc(50% - 4px);
+  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -660,28 +767,33 @@ onMounted(() => {
   background: rgba(4, 48, 40, 0.45);
   border-radius: 4px;
   border: 1px solid rgba(61, 217, 176, 0.2);
+  padding: 2px 0;
 }
 
 .quote-summary__label {
-  font-size: 10px;
+  font-size: 9px;
   color: #a8d4c8;
 }
 
 .quote-summary__val {
-  font-size: 11px;
+  font-size: 10px;
   color: #fff;
 }
 
 .quote-summary__val strong {
-  font-size: 14px;
+  font-size: 12px;
   background: linear-gradient(to bottom, #98e9aa, #ecd27b);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }
 
-.quote-summary__unit {
+.quote-summary__val--date strong {
   font-size: 10px;
+}
+
+.quote-summary__unit {
+  font-size: 9px;
   color: #a8d4c8;
   margin-left: 2px;
 }
@@ -690,10 +802,4 @@ onMounted(() => {
   flex: 1;
   min-height: 0;
 }
-
-.flex_content--placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 </style>