datav---Cattle-Industry/src/components/Home.vue

<template>
  <div class="dashboard-container">
    <!-- 左侧面板 -->
    <aside class="dashboard-left">
    <!-- 全国牛单价排行榜 -->
    <div class="panel price-ranking-panel">
      <div class="panel-header">
        <h3>全国牛单价排行榜（元/斤）</h3>
      </div>
      <div class="price-table">
        <div class="price-table-header">
          <div>序号</div>
          <div>省份</div>
          <div>品种</div>
          <div>单价(元/斤)</div>
        </div>
        <div v-for="(row, idx) in nationalPriceTableSortedRows" :key="row.id" class="price-table-row">
          <div>{{ idx + 1 }}</div>
          <div>{{ row.province }}</div>
          <div>{{ row.breed }}</div>
          <div class="price-bar-cell">
            <div class="price-bar-track">
              <div class="price-bar" :style="getPriceBarStyle(row.price)"></div>
            </div>
            <span class="price-value after-bar">{{ formatPrice(row.price) }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 全国牛存栏量模块 -->
    <div class="panel slaughter-panel">
      <div class="panel-header">
        <h3>全国牛存栏量</h3>
      </div>
      <div class="total-stock">
        <div class="total-number">
          <!-- <span class="currency">≈</span> -->
          <!-- <span class="value">{{ nationalLivestockDisplay }}</span> -->
          <!-- <span class="unit">头</span> -->
        </div>
        <div class="echarts-container">
          <v-chart 
            ref="nationalLivestockYearChart"
            class="national-livestock-year-chart"
            :option="nationalLivestockYearOption"
            autoresize
          />
        </div>
        <!-- <div class="data-notes">
          <div class="data-source">数据来源：国家统计/行业估算（示例）。该值为全国牛总存栏量基准。</div>
        </div> -->
      </div>
    </div>

    <!-- 已移除：不同品种年度总销售额柱状图模块 -->

  </aside>
  
  <!-- 中间地图区域 -->
  <section class="dashboard-center">
    <!-- 自定义无数据提示框 -->
    <div v-if="showNoDataToast" class="no-data-toast">
      {{ noDataMessage }}
    </div>

    <!-- 地图容器 -->
    <div class="map-container">
      <Map3D @province-click="handleProvinceClick" />
      <!-- 跳转加载动画覆盖层 -->
      <div v-if="isJumpLoading" class="jump-loading-overlay">
        <div class="jump-spinner"></div>
        <div class="jump-loading-text">正在请求 {{ loadingProvince }} 数据...</div>
      </div>
    </div>
  </section>
  
  <!-- 右侧面板 -->
  <aside class="dashboard-right">
    <!-- 品种单价排行榜（替换原地区-品种明细） -->
    <div class="panel price-ranking-panel">
      <div class="panel-header">
        <h3>品种单价排行榜（元/斤）</h3>
        <select v-model="rightSelectedBreed" class="breed-selector">
          <option v-if="breedsLoading" disabled>加载中...</option>
          <option v-else-if="rightBreedOptions.length === 0" disabled>暂无数据</option>
          <option v-for="b in rightBreedOptions" :key="b" :value="b">{{ b }}</option>
        </select>
      </div>
      <div class="species-price-table">
        <div class="species-price-table-header">
          <div>品种</div>
          <div>省份</div>
          <div>地区</div>
          <div>单价(元/斤)</div>
        </div>
        <div v-for="(row, idx) in speciesPriceTableSortedRows" :key="row.id" class="species-price-table-row">
          <div>{{ row.breed }}</div>
          <div>{{ row.province }}</div>
          <div>{{ row.region }}</div>
          <div>{{ formatPrice(row.price) }}</div>
        </div>
      </div>
    </div>

    <!-- 全国省份单价排行榜（元/头） -->
      <div class="panel price-ranking-panel">
        <div class="panel-header">
          <h3>全国省份平均单价排行榜（元/斤）</h3>
        </div>
        <div class="echarts-container">
          <v-chart 
            ref="provincePriceRankingChart"
            class="province-price-ranking-chart"
            :option="nationalProvincePriceRankingOption"
            autoresize
          />
        </div>
      </div>

    <!-- 全国牛出栏率模块（年度全国出栏总量） -->
    <div class="panel livestock-panel">
      <div class="panel-header">
        <h3>全国牛出栏量</h3>
      </div>
      <div class="echarts-container">
        <v-chart 
          ref="nationalSlaughterYearChart"
          class="national-slaughter-year-chart" 
          :option="nationalSlaughterYearOption" 
          autoresize
        />
      </div>
      <!-- <div class="data-notes">
        <div class="data-source">全国出栏总量（单位：万头）。数据来源：国家统计/行业估算（示例）。</div>
      </div> -->
    </div>
  </aside>
  </div>
</template>

<style scoped>
/* 自定义无数据提示框 */
.no-data-toast {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 20, 40, 0.9);
  border: 1px solid #00ffff;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
  color: #00ffff;
  padding: 12px 24px;
  border-radius: 4px;
  z-index: 9999;
  font-size: 16px;
  font-weight: bold;
  pointer-events: none;
  animation: fadeInOut 0.3s ease-in-out;
}

@keyframes fadeInOut {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.dashboard-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
  box-sizing: border-box;
  position: relative; /* 允许作为背景层容器 */
  min-height: 100vh; /* 充满视口高度，保证背景覆盖 */
  background-color: #011819; /* 底层纯色背景，位于背景图之上、内容之下 */
}

/* 全国牛存栏量显示样式 */
.total-stock {
  padding: 10px 5px;
}
.total-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.total-number .currency {
  color: #00ffff;
  font-size: 22px;
  font-weight: 700;
}
.total-number .value {
  color: #00ffcc;
  font-size: 36px;
  font-weight: 800;
}
.total-number .unit {
  color: #cfefff;
  font-size: 16px;
  font-weight: 600;
}

.national-livestock-year-chart {
  width: 100%;
  height: 190px;
}

.national-slaughter-year-chart {
  width: 100%;
  height: 150px;
  margin-top: 10px;
}
.national-price-ranking-chart {
  width: 100%;
  height: 180px;
}
.province-price-ranking-chart {
  width: 100%;
  height: 300px;
}
.price-ranking-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.price-ranking-panel .echarts-container {
  height: auto;
  padding: 0 0 5px 0; /* 左侧去掉内边距，整体更靠左 */
  flex: 1;
}

/* 品种单价排行榜列表样式（右侧） */
.species-price-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  height: 250px; /* 设置固定高度 */
  overflow-y: auto;
}
.species-price-table-header,
.species-price-table-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr; /* 品种/省份/地区/单价 */
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.species-price-table-header {
  color: #84acf0;
  border-bottom: 1px solid rgba(132, 172, 240, 0.2);
  padding-bottom: 6px;
  font-weight: bold;
}
.species-price-table-row {
  color: #eaf7ff;
}

/* 全国牛单价排行榜表格样式 */
.price-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  /* 表格自适应增高，撑满左侧面板剩余空间 */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.price-table-header,
.price-table-row {
  display: grid;
  grid-template-columns: 0.6fr 1fr 1.2fr 2fr;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.price-table-header {
  color: #84acf0;
  border-bottom: 1px solid rgba(132, 172, 240, 0.2);
  padding-bottom: 6px;
  font-weight: bold;
}
.price-table-row {
  color: #eaf7ff;
}
/* 单价列条形图样式 */
.price-bar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-bar-track {
  flex: 1;
  height: 12px; /* 条形更细 */
  border-radius: 0;
  background: transparent; /* 去掉背景色，仅保留条形图颜色 */
  overflow: hidden;
}
.price-bar {
  height: 100%;
  border-radius: 0 0 0 0; /* 去掉左侧圆角，仅保留右侧 */
  background: #4e73df; /* 与图二一致的蓝色 */
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.price-value {
  min-width: 86px;
  text-align: right;
  color: #eaf7ff;
  font-variant-numeric: tabular-nums;
}
.price-value.after-bar {
  min-width: 86px;
  text-align: right;
  color: #eaf7ff;
  font-weight: 600;
}
.dashboard-center {
  flex: 1; /* 中心区域保持基准宽度 */
  min-width: 300px;
  display: flex;
  flex-direction: column;
  height: 100vh; /* 确保中间区域占满整个视口高度 */
  padding: 10px;
}

.dashboard-left,
.dashboard-right {
  flex: 0.6; /* 两侧数据栏进一步缩小至约60%相对权重 */
  min-width: 300px; /* 保持最小宽度，避免内容截断 */
  max-width: 520px;
}

/* 左侧数据栏按列布局并占满视口高度 */
.dashboard-left {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 中低分辨率下进一步缩小到70%，保证协调性 */
@media (max-width: 1366px) {
  .dashboard-left,
  .dashboard-right {
    flex: 0.55;
  }
}
@media (max-width: 768px) {
  .dashboard-left,
  .dashboard-center,
  .dashboard-right {
    flex: 100%;
  }
}

/* 侧边数据栏面板样式，参考预警监测模块 */
.panel {
  background: rgba(7, 59, 68, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #00d4ff;
  opacity: 0.6;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.panel-header h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.diamond-icon {
  width: 12px;
  height: 12px;
  background: #00d4ff;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* 统一下拉选择样式 */
.region-select,
.breed-selector {
  margin-left: auto;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: #ffffff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
}

.region-select option,
.breed-selector option {
  background: #0c1426;
  color: #ffffff;
}
</style>

<script>
import { ref } from 'vue'
import axios from 'axios'
import Map3D from './Map3D.vue'
import { use } from 'echarts/core'
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
import { PieChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import * as echarts from 'echarts'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  SVGRenderer,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  name: 'Home',
  components: {
    Map3D,
    VChart
  },
  props: {
    selectedProvince: {
      type: String,
      default: ''
    }
  },
  emits: ['navigate-to-warning'],
  setup(props, { emit }) {
    const showNoDataToast = ref(false)
    const noDataMessage = ref('')
    let toastTimer = null
    const isJumpLoading = ref(false)
    const loadingProvince = ref('')
    // 省份点击请求控制器（用于防抖与取消上一次未完成的请求）
    let provinceClickController = null

    // provinces 接口参数映射：仅处理指定示例，其余保持不变
    const toApiProvinceParam = (name) => {
      const map = {
        '内蒙古自治区': '内蒙古',
        '四川省': '四川',
        '新疆维吾尔自治区': '新疆',
        '西藏自治区': '西藏',
        '宁夏回族自治区': '宁夏',
        '广西自治区': '广西',
        '河北省': '河北',
        '山东省': '山东',
        '黑龙江省': '黑龙江',
        '吉林省': '吉林',
        '云南省': '云南',
        '甘肃省': '甘肃',
        '青海省': '青海',
        '贵州省': '贵州',
        '安徽省': '安徽',
      }
      return map[name] ?? name
    }

    // 处理省份点击事件
    const handleProvinceClick = async (provinceName) => {
      // 若正在跳转/请求中，直接忽略后续点击，避免重复触发
      if (isJumpLoading.value) return

      // 跳转前加载动画
      loadingProvince.value = provinceName
      isJumpLoading.value = true

      // 取消上一次未完成的请求（防抖与竞态控制）
      if (provinceClickController) {
        try { provinceClickController.abort() } catch {}
      }
      provinceClickController = new AbortController()

      // 外部接口调用，超时控制（从2秒提高到8秒）
      let url = ''
      const timeoutId = setTimeout(() => {
        try { provinceClickController.abort() } catch {}
      }, 8000)
      try {
        const apiParam = toApiProvinceParam(provinceName)
        url = `/api/cattle-data/provinces?province=${encodeURIComponent(apiParam)}`
        const res = await fetch(url, { signal: provinceClickController.signal })
        clearTimeout(timeoutId)
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
        const raw = await res.json()
        const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : [])

        if (list && list.length > 0) {
          // 接口成功且有数据，自动跳转到价格行情页
          isJumpLoading.value = false
          emit('navigate-to-warning', provinceName)
        } else {
          throw new Error('empty payload')
        }
      } catch (error) {
        clearTimeout(timeoutId)
        // 区分超时与其他错误
        if (error?.name === 'AbortError') {
          console.warn('[外部接口] 超时已中止请求 (8s):', url)
          noDataMessage.value = '请求超时'
        } else {
          console.error('[外部接口] 调用失败:', error)
          noDataMessage.value = '该地区暂无数据'
        }
        isJumpLoading.value = false
        showNoDataToast.value = true
        if (toastTimer) clearTimeout(toastTimer)
        toastTimer = setTimeout(() => {
          showNoDataToast.value = false
        }, 2000)
      } finally {
        provinceClickController = null
      }
    }
    
    return {
      handleProvinceClick,
      showNoDataToast,
      noDataMessage,
      isJumpLoading,
      loadingProvince
    }
  },
  data() {
    return {
      // 右侧品种单价排行榜下拉选项与选中值
      rightBreedOptions: [],
      rightSelectedBreed: '',
      breedsLoading: false,
    speciesPriceRows: [], // 品种单价排行（接口）
    // 存栏率视图模式：percent 或 count
      livestockViewMode: 'percent',
      // 全国牛总存栏量基准值
      livestockBaseline: 100000000,
      // 不同品种默认数据（单位：头）
      livestockSpeciesData: [
        { name: '黄牛及改良牛', key: 'yellow', count: 87500000, color: '#00CDCD' },
        { name: '奶牛', key: 'dairy', count: 11000000, color: '#869DB0' },
        { name: '水牛', key: 'buffalo', count: 4750000, color: '#267EEF' },
        { name: '牦牛', key: 'yak', count: 16000000, color: '#42A2E1', globalShare: '>90%', domesticShare: '16%' }
      ],
      // 出栏率统计校验信息
      validationMessageSlaughter: '',
      // 存栏率选中的地区
      selectedRegionStock: '全国',
      // 选中的品种
      selectedBreed: '',
      
      // 防疫统计柱状图配置
      epidemicChartOption: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: {
            color: '#ffffff'
          },
          formatter: '{b}: {c}万头'
        },
        legend: {
          data: ['口蹄疫防疫', '猪瘟防疫', '其他类型防疫'],
          right: '10%',
          top: '10%',
          orient: 'vertical',
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 8
        },
        grid: {
          left: '15%',
          right: '35%',
          bottom: '15%',
          top: '15%'
        },
        xAxis: {
          type: 'category',
          data: ['口蹄疫防疫', '猪瘟防疫', '其他类型防疫'],
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10,
            rotate: 0,
            margin: 10
          },
          axisTick: {
            alignWithLabel: true,
            show: true
          },
          boundaryGap: true
        },
        yAxis: {
          type: 'value',
          name: '头数(万)',
          nameTextStyle: {
            color: '#00ffff',
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: '#00ffff'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.2)'
            }
          }
        },
        series: [{
          name: '防疫统计',
          type: 'bar',
          data: [
            { value: 32.67, itemStyle: { color: '#00ffff' } },
            { value: 20.3, itemStyle: { color: '#84acf0' } },
            { value: 1.91, itemStyle: { color: '#96ceb4' } }
          ],
          barWidth: '30%',
          itemStyle: {
            color: function(params) {
              const colors = ['#00ffff', '#84acf0', '#96ceb4'];
              return colors[params.dataIndex];
            }
          }
        }]
      },
      // 出栏率分类数据（单位：头）与颜色（统一主题）
      slaughterSpeciesData: [
        { name: '杂交改良牛', key: 'hybrid', count: 43000000, color: '#00CDCD', percent: 85 },
        { name: '奶公犊', key: 'dairy_bull_calf', count: 5000000, color: '#869DB0', percent: 10 },
        { name: '地方品种黄牛', key: 'local_yellow', minCount: 1500000, maxCount: 2000000, color: '#267EEF', minPercent: 3, maxPercent: 4 },
        { name: '其他品种', key: 'others', minCount: 500000, maxCount: 800000, color: '#42A2E1', minPercent: 1, maxPercent: 1.5 }
      ],
      slaughterPieOption: {},
      slaughterBarOption: {},
      // 不同品种牛存栏率图表（已改为全国出栏率，此处不再使用）
      livestockPieOption: {},
      livestockBarOption: {},

      // 全国牛出栏总量年度柱状图（单位：万头）
      nationalSlaughterYearOption: {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: { color: '#ffffff' },
          formatter: function(params) {
            const p = params[0]
            return `${p.axisValue}<br/>${p.marker}${p.seriesName}: ${p.value}`
          }
        },
        grid: { left: '12%', right: '8%', bottom: '12%', top: '18%' },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 10 }
        },
        yAxis: {
          type: 'value',
          name: '数量',
          nameTextStyle: { color: '#00ffff', fontSize: 11 },
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 10 },
          splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } }
        },
        series: [{
          name: '全国牛出栏总量',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 4,
          data: [],
          lineStyle: { color: '#00CDCD', width: 2 },
          itemStyle: { color: '#00CDCD' },
          areaStyle: { color: 'rgba(0,205,205,0.15)' },
          label: { show: true, position: 'top', color: '#cfefff', fontSize: 10, formatter: '{c}' }
        }]
      },

      // 全国牛存栏量年度柱状图（单位：万头）
      nationalLivestockYearOption: {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: { color: '#ffffff' },
          formatter: function(params) {
            const p = params[0]
            return `${p.axisValue}<br/>${p.marker}${p.seriesName}: ${p.value}`
          }
        },
        grid: { left: '12%', right: '8%', bottom: '12%', top: '18%' },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 10 }
        },
        yAxis: {
          type: 'value',
          name: '数量',
          nameTextStyle: { color: '#00ffff', fontSize: 11 },
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 10 },
          splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } }
        },
        series: [{
          name: '全国牛存栏总量',
          type: 'bar',
          data: [],
          barWidth: '40%',
          itemStyle: { color: '#00CDCD' },
          label: { show: true, position: 'top', color: '#cfefff', fontSize: 10, formatter: '{c}' }
        }]
      },


      // 已移除：2025年主要品种牛单价趋势预测配置

      // 全国牛单价排行榜表格数据
      nationalPriceTableRows: [
        { id: 1,  province: '河北省',   breed: '安格斯牛',   price: 14200 },
        { id: 2,  province: '山东省',   breed: '荷斯坦牛',   price: 17000 },
        { id: 3,  province: '江苏省',   breed: '复洲黄牛',   price: 14500 },
        { id: 4,  province: '浙江省',   breed: '西门塔尔牛', price: 16800 },
        { id: 5,  province: '新疆维吾尔自治区', breed: '夏洛莱牛', price: 16500 },
        { id: 6,  province: '甘肃省',   breed: '水牛',       price: 17387 },
        { id: 7,  province: '广东省',   breed: '安格斯牛',   price: 14200 },
        { id: 8,  province: '广西壮族自治区', breed: '荷斯坦牛', price: 17000 },
        { id: 9,  province: '湖南省',   breed: '复洲黄牛',   price: 14500 },
        { id: 10, province: '河南省',   breed: '西门塔尔牛', price: 16800 }
      ],

      // 全国省份平均单价数据源（专用于右侧省份排行图表）
      nationalProvinceAverageRows: [],

      // 全国牛单价排行榜配置（单位：元/头）
      nationalPriceRankingOption: {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: { color: '#ffffff' },
          formatter: function(params) {
            const p = params[0]
            return `${p.axisValue}<br/>${p.marker}${p.seriesName}: ${p.value} 元/头`
          }
        },
        grid: { left: '18%', right: '12%', bottom: '15%', top: '20%' },
        xAxis: {
          type: 'value',
          name: '单价（元/头）',
          nameTextStyle: { color: '#00ffff', fontSize: 11 },
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 10 },
          splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } }
        },
        yAxis: {
          type: 'category',
          data: ['荷斯坦牛','西门塔尔牛','夏洛莱牛','复洲黄牛','安格斯牛','水牛'],
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 11 }
        },
        series: [{
          name: '全国主要品种单价',
          type: 'bar',
          data: [17000, 16800, 16500, 14500, 14200, 17387],
          barWidth: '45%',
          itemStyle: { color: '#00CDCD' },
          label: { show: true, position: 'right', color: '#cfefff', fontSize: 10, formatter: '{c} 元/头' }
        }]
      },

       // 地区-品种明细数据
       detailRows: [
         { id: 1, region: '河北省', breed: '安格斯牛', stock: 68000, sold: 12000, price: 14200 },
         { id: 2, region: '山东省', breed: '荷斯坦牛', stock: 52000, sold: 9000, price: 17000 },
         { id: 3, region: '江苏省', breed: '复洲黄牛', stock: 72000, sold: 15000, price: 14500 },
         { id: 4, region: '浙江省', breed: '西门塔尔牛', stock: 61000, sold: 11000, price: 16800 },
         { id: 5, region: '新疆维吾尔自治区', breed: '夏洛莱牛', stock: 83000, sold: 13000, price: 16500 },
         { id: 6, region: '甘肃省', breed: '水牛', stock: 47000, sold: 8000, price: 17387 },
         { id: 7, region: '广东省', breed: '安格斯牛', stock: 55000, sold: 10000, price: 14200 },
         { id: 8, region: '广西壮族自治区', breed: '荷斯坦牛', stock: 43000, sold: 7500, price: 17000 },
         { id: 9, region: '湖南省', breed: '复洲黄牛', stock: 65000, sold: 12500, price: 14500 },
         { id: 10, region: '河南省', breed: '西门塔尔牛', stock: 58000, sold: 9800, price: 16800 }
       ],

       // 耳标统计数据
       earTagStats: {
         completed: 45678,
         planned: 52000
       },

       // 耳标佩戴统计堆叠柱状图配置
      earTagChartOption: {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
           },
           backgroundColor: 'rgba(0, 0, 0, 0.8)',
           borderColor: '#00ffff',
           borderWidth: 1,
           textStyle: {
             color: '#ffffff'
           },
           formatter: function(params) {
             let result = params[0].name + '<br/>';
             params.forEach(function(item) {
               result += item.marker + item.seriesName + ': ' + item.value + '头<br/>';
             });
             return result;
           }
         },
         legend: {
           data: ['已佩戴', '未佩戴'],
           top: '5%',
           textStyle: {
             color: '#ffffff',
             fontSize: 12
           },
           itemWidth: 12,
           itemHeight: 8
         },
         grid: {
           left: '15%',
           right: '10%',
           bottom: '15%',
           top: '25%'
         },
         xAxis: {
           type: 'value',
           name: '数量(头)',
           nameTextStyle: {
             color: '#00ffff',
             fontSize: 12
           },
           axisLine: {
             lineStyle: {
               color: '#00ffff'
             }
           },
           axisLabel: {
             color: '#ffffff',
             fontSize: 10
           },
           splitLine: {
             lineStyle: {
               color: 'rgba(0, 255, 255, 0.2)'
             }
           }
         },
         yAxis: {
           type: 'category',
           data: ['东方养殖场', '西部牧场', '南山农场', '北岭牧业', '中心养殖基地'],
           axisLine: {
             lineStyle: {
               color: '#00ffff'
             }
           },
           axisLabel: {
             color: '#ffffff',
             fontSize: 10
           }
         },
         series: [
           {
             name: '已佩戴',
             type: 'bar',
             stack: '总量',
             data: [8500, 12000, 9800, 7200, 8178],
             itemStyle: {
               color: '#00ffff'
             }
           },
           {
             name: '未佩戴',
             type: 'bar',
             stack: '总量',
             data: [1500, 2200, 1800, 1300, 1322],
             itemStyle: {
               color: '#84acf0'
             }
           }
         ]
       },

       // 牛只参保统计圆形进度图配置
       insuranceChartOption: {
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {c}头 ({d}%)',
           backgroundColor: 'rgba(0, 0, 0, 0.8)',
           borderColor: '#00ffff',
           borderWidth: 1,
           textStyle: {
             color: '#ffffff'
           }
         },
         series: [
           {
             name: '参保统计',
             type: 'pie',
             radius: ['70%', '90%'],
             center: ['50%', '50%'],
             startAngle: 90,
             avoidLabelOverlap: false,
             label: {
               show: false
             },
             labelLine: {
               show: false
             },
             data: [
               {
                 value: 160000,
                 name: '已参保',
                 itemStyle: {
                   color: {
                     type: 'linear',
                     x: 0,
                     y: 0,
                     x2: 1,
                     y2: 1,
                     colorStops: [{
                       offset: 0, color: '#00ffff'
                     }, {
                       offset: 1, color: '#0080ff'
                     }]
                   }
                 }
               },
               {
                 value: 40000,
                 name: '未参保',
                 itemStyle: {
                   color: 'rgba(255, 255, 255, 0.1)'
                 }
               }
             ]
           }
         ]
       },

       // 已移除：不同品种年度总销售额柱状图配置

    }
  },
  computed: {
    nationalLivestockCount() {
      return this.livestockBaseline || 0
    },
    nationalLivestockDisplay() {
      try {
        return (this.nationalLivestockCount || 0).toLocaleString('zh-CN')
      } catch (e) {
        return String(this.nationalLivestockCount || 0)
      }
    },
    totalLivestock() {
      // 以数据源计算总存栏量（万头）
      return this.livestockSpeciesData.reduce((sum, s) => sum + Math.round(s.count / 10000), 0)
    },
    filteredDetailRows() {
      if (!this.selectedBreed) {
        return this.detailRows
      }
      return this.detailRows.filter(row => row.breed === this.selectedBreed)
    },
    // 品种单价排行榜（右侧）基于地区-品种明细，按价格升序
    speciesPriceTableSortedRows() {
      let rows = (Array.isArray(this.speciesPriceRows) && this.speciesPriceRows.length > 0)
        ? this.speciesPriceRows
        : (Array.isArray(this.detailRows) ? this.detailRows.map(r => ({
          id: r.id,
          breed: r.breed,
          region: r.region,
          price: r.price
        })) : [])
      // 下拉选择生效：按包含关系过滤（处理“安格斯”匹配“安格斯牛”等）
      if (this.rightSelectedBreed) {
        rows = rows.filter(x => String(x.breed || '').includes(this.rightSelectedBreed))
      }
      rows.sort((a, b) => a.price - b.price)
      return rows
    },
    // 全国省份平均单价排行榜（右侧图表）：优先使用 nationalProvinceAverageRows；否则回退 nationalPriceTableRows
    nationalProvincePriceRankingOption() {
      const base = (Array.isArray(this.nationalProvinceAverageRows) && this.nationalProvinceAverageRows.length > 0)
        ? [...this.nationalProvinceAverageRows]
        : (Array.isArray(this.nationalPriceTableRows) ? [...this.nationalPriceTableRows] : [])
      base.sort((a, b) => a.price - b.price)
      const xCategories = base.map(r => r.province)
      const prices = base.map(r => r.price)
      return {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: { color: '#ffffff' },
          formatter: function(params) {
            const p = params[0]
            return `${p.axisValue}<br/>${p.seriesName}: ${p.value} 元/斤`
          }
        },
        grid: { left: '4%', right: '0%', bottom: '15%', top: '10%', containLabel: true },
        xAxis: {
          type: 'category',
          data: xCategories,
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 9, interval: 0 },
        },
        yAxis: {
          type: 'value',
          name: '单价（元/斤）',
          nameTextStyle: { color: '#00ffff', fontSize: 11 },
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 10 },
          min: 12,
          max: 15,
          interval: 1,
          splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } }
        },
        series: [{
          name: '省份单价',
          type: 'bar',
          data: prices,
          barWidth: '42%',
          barCategoryGap: '28%',
          itemStyle: { color: '#00E1E1' },
          label: { show: true, position: 'top', color: '#cfefff', fontSize: 10, formatter: '{c} ' }
        }],
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: 0,
            startValue: 0,
            endValue: xCategories.length - 1,
            zoomLock: true,
            filterMode: 'empty'
          }
        ]
      }
    },
    // 单价条形图需要的最大值（用于计算宽度百分比）
    priceBarMax() {
      const arr = Array.isArray(this.nationalPriceTableRows) ? this.nationalPriceTableRows.map(r => r.price) : []
      const max = Math.max(...arr, 1)
      return max
    },
    // 单价升序排列后的行数据
    nationalPriceTableSortedRows() {
      const rows = Array.isArray(this.nationalPriceTableRows) ? [...this.nationalPriceTableRows] : []
      rows.sort((a, b) => a.price - b.price)
      return rows
    }
  },
  watch: {
    rightSelectedBreed: {
      handler(breed) {
        if (breed) {
          this.fetchSpeciesPriceRanking(breed)
        }
      },
      immediate: true
    }
  },
  mounted() {
    // 页面挂载后拉取品种列表以填充右侧下拉框
    console.log('[Home] mounted: fetchBreeds 即将调用')
    this.fetchBreeds()
  },
  created() {
    // 保险起见，在 created 阶段也触发一次，避免某些场景 mounted 未执行
    console.log('[Home] created: fetchBreeds 即将调用')
    this.fetchBreeds()
  },
  methods: {
    // 格式化价格显示（千分位）
    formatPrice(value) {
      try {
        return Number(value || 0).toLocaleString('zh-CN')
      } catch (e) {
        return String(value || 0)
      }
    },
    // 计算条形宽度样式
    getPriceBarStyle(price) {
      const max = this.priceBarMax || 1
      const ratio = Math.max(0, Math.min(1, Number(price || 0) / max))
      // 增强对比：非线性拉伸，最小5%，最大100%，采用幂函数放大差异
      const percent = 5 + Math.pow(ratio, 0.6) * 95
      return { width: `${percent.toFixed(2)}%` }
    },
    // 拉取全国牛单价排行榜数据并填充表格/图表（字段：type/省份province/单价price）
    async fetchNationalPriceRanking() {
      const url = '/api/cattle-data'
      try {
        const res = await fetch(url)
        const raw = await res.json()
        const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : [])
        const rows = list.map((item, idx) => ({
          id: item.id ?? idx + 1,
          province: item.province ?? item.provinceName ?? '',
          breed: item.type ?? item.breed ?? '',
          price: Number(item.price)
        })).filter(r => r.province && r.breed && Number.isFinite(r.price))
        // 更新数据源（驱动左侧表格与右侧省份排行图表）
        this.nationalPriceTableRows = rows
      } catch (e) {
        console.warn('获取全国牛单价排行榜失败：', e)
      }
    },

    // 拉取品种单价排行榜数据
    async fetchSpeciesPriceRanking(breed) {
      const url = `/api/cattle-data?type=${breed}`
      try {
        const res = await fetch(url)
        const raw = await res.json()
        const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : [])
        const rows = list.map((item, idx) => ({
          id: item.id ?? idx + 1,
          province: item.province ?? '',
          region: item.location ?? '',
          breed: item.type ?? item.breed ?? '',
          price: Number(item.price)
        })).filter(r => r.province && r.region && r.breed && Number.isFinite(r.price))
        this.speciesPriceRows = rows
      } catch (e) {
        console.warn(`获取品种 ${breed} 单价排行失败：`, e)
      }
    },

    // 拉取全国省份平均单价排行榜数据（字段：province/provincePrice）
    async fetchNationalProvinceAverages() {
      const url = '/api/cattle-data/provinces'
      try {
        const res = await fetch(url)
        const raw = await res.json()
        const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : [])
        const rows = list.map((item, idx) => ({
          id: item.id ?? idx + 1,
          province: item.province ?? item.provinceName ?? '',
          price: Number(item.provincePrice)
        })).filter(r => r.province && Number.isFinite(r.price))
        this.nationalProvinceAverageRows = rows
      } catch (e) {
        console.warn('获取全国省份平均单价失败：', e)
      }
    },

    // 拉取品种列表，使用 breedName 作为下拉项
    async fetchBreeds() {
      const url = '/api/cattle-data/breeds'
      this.breedsLoading = true
      try {
        console.log('[Home] 调用接口:', url)
        const res = await fetch(url)
        const raw = await res.json()
        console.log('[Home] breeds 接口返回原始数据:', raw)
        const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : [])
        const names = list
          .map(it => it?.breedName ?? it?.name ?? it?.breed)
          .filter(Boolean)
        const uniq = Array.from(new Set(names))
        console.log('[Home] 解析后的品种列表:', uniq)
        if (uniq.length > 0) {
          const prev = this.rightSelectedBreed
          this.rightBreedOptions = uniq
          if (!prev || !uniq.includes(prev)) {
            this.rightSelectedBreed = uniq[0]
          }
        }
      } catch (e) {
        console.warn('[Home] 获取品种列表失败：', e)
      } finally {
        this.breedsLoading = false
        console.log('[Home] breedsLoading 结束，状态:', this.breedsLoading)
      }
    },
    // 构建环形图（占比）
    buildLivestockPieOption() {
      const baseline = this.livestockBaseline
      const species = this.livestockSpeciesData
      const names = species.map(s => s.name)
      const percents = species.map(s => Math.round(s.count / baseline * 100))
      const pieData = percents.map((v, i) => ({
        value: v,
        name: names[i],
        itemStyle: { color: species[i].color }
      }))
      return {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: { color: '#ffffff' },
          formatter: (params) => `${params.name}<br/>占比：${params.value}%`
        },
        series: [{
          name: '占比(%)',
          type: 'pie',
          radius: ['35%', '49%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'outside',
            fontSize: 11,
            color: '#ffffff',
            formatter: (p) => `${p.name}\n${p.value}%`
          },
          labelLine: { show: true, length: 12, length2: 8, lineStyle: { color: '#ffffff', width: 1 } },
          emphasis: {
            label: { show: true, fontSize: 12, fontWeight: 'bold', color: '#00ffff' }
          },
          data: pieData
        }]
      }
    },
    // 通过接口更新全国存栏/出栏年度数据（以2023年为例）
    async fetchNationalInventorySlaughter() {
      // 通过 Vite 代理避免浏览器 CORS，使用相对路径
      const url = '/api/cattle-data/national'
      try {
        const res = await fetch(url)
        const raw = await res.json()
        // 接口可能返回 { code, data: {...} } 或直接返回对象，统一取 payload
        const payload = raw && typeof raw === 'object' && raw.data ? raw.data : raw

        // 固定横轴为 2023/2024/2025，纵轴填充数值（单位：万头；缺失则为 null）
        const years = ['2023年', '2024年', '2025年']
        const readNumber = (obj, key) => {
          if (!obj) return null
          const v = obj[key]
          const n = typeof v === 'string' ? Number(v) : (typeof v === 'number' ? v : null)
          return Number.isFinite(n) ? n : null
        }

        const inventoryValues = [
          readNumber(payload, 'nationalInventory23th') ?? readNumber(payload, 'nationalInventory23'),
          readNumber(payload, 'nationalInventory24th') ?? readNumber(payload, 'nationalInventory24'),
          readNumber(payload, 'nationalInventory25th') ?? readNumber(payload, 'nationalInventory25')
        ]
        const slaughterValues = [
          readNumber(payload, 'nationalSlaughter23th') ?? readNumber(payload, 'nationalSlaughter23'),
          readNumber(payload, 'nationalSlaughter24th') ?? readNumber(payload, 'nationalSlaughter24'),
          readNumber(payload, 'nationalSlaughter25th') ?? readNumber(payload, 'nationalSlaughter25')
        ]

        // 更新“全国牛存栏量”
        this.nationalLivestockYearOption.xAxis.data = years
        this.nationalLivestockYearOption.series[0].data = inventoryValues
        this.nationalLivestockYearOption.yAxis.name = '数量(万头)'
        this.nationalLivestockYearOption.series[0].label = { ...this.nationalLivestockYearOption.series[0].label, formatter: '{c} 万头' }
        this.nationalLivestockYearOption.tooltip.formatter = function(params) {
          const p = params[0]
          return `${p.axisValue}<br/>${p.marker}${p.seriesName}: ${p.value} 万头`
        }
        this.nationalLivestockYearOption = { ...this.nationalLivestockYearOption }

        // 更新“全国牛出栏量”
        this.nationalSlaughterYearOption.xAxis.data = years
        this.nationalSlaughterYearOption.series[0].data = slaughterValues
        this.nationalSlaughterYearOption.yAxis.name = '数量(万头)'
        this.nationalSlaughterYearOption.series[0].label = { ...this.nationalSlaughterYearOption.series[0].label, formatter: '{c} 万头' }
        this.nationalSlaughterYearOption.tooltip.formatter = function(params) {
          const p = params[0]
          return `${p.axisValue}<br/>${p.marker}${p.seriesName}: ${p.value} 万头`
        }
        this.nationalSlaughterYearOption = { ...this.nationalSlaughterYearOption }
      } catch (e) {
        console.warn('获取全国存栏/出栏接口数据失败：', e)
      }
    },
    // 更新“全国牛存栏量年度柱状图”指定年份的值（单位：万头）
    updateLivestockYearValue(year, valueWan) {
      const yearLabel = `${year}年`
      const x = this.nationalLivestockYearOption.xAxis.data || []
      const idx = x.indexOf(yearLabel)
      if (idx >= 0) {
        const arr = this.nationalLivestockYearOption.series[0].data || []
        arr[idx] = Number(valueWan)
        // 触发响应式更新
        this.nationalLivestockYearOption = { ...this.nationalLivestockYearOption }
      }
    },
    // 更新“全国牛出栏量年度折线图”指定年份的值（单位：万头）
    updateSlaughterYearValue(year, valueWan) {
      const yearLabel = `${year}年`
      const x = this.nationalSlaughterYearOption.xAxis.data || []
      const idx = x.indexOf(yearLabel)
      if (idx >= 0) {
        const arr = this.nationalSlaughterYearOption.series[0].data || []
        arr[idx] = Number(valueWan)
        // 触发响应式更新
        this.nationalSlaughterYearOption = { ...this.nationalSlaughterYearOption }
      }
    },
    // 构建柱状图（数量）
    buildLivestockBarOption() {
      const species = this.livestockSpeciesData
      const names = species.map(s => s.name)
      const countsWan = species.map(s => Math.round(s.count / 10000))
      return {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: { color: '#ffffff' },
          formatter: (params) => {
            const p = params[0]
            return `${p.name}<br/>存栏量：${p.value} 万头`
          }
        },
        grid: { left: '12%', right: '6%', top: '15%', bottom: '12%', containLabel: true },
        xAxis: {
          type: 'category',
          data: names,
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 11, rotate: 0 }
        },
        yAxis: {
          type: 'value',
          name: '数量(万头)',
          nameTextStyle: { color: '#00ffff', fontSize: 12 },
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisLabel: { color: '#ffffff', fontSize: 11 },
          splitLine: { lineStyle: { color: 'rgba(0, 255, 255, 0.2)' } }
        },
        series: [{
          name: '数量(万头)',
          type: 'bar',
          barWidth: '50%',
          label: { show: true, position: 'top', color: '#eaffff', fontSize: 11, formatter: '{c} 万头' },
          data: countsWan.map((v, i) => ({ value: v, itemStyle: { color: species[i].color } }))
        }]
      }
    },
    // 刷新两个图表
    refreshLivestockOption() {
      this.livestockPieOption = this.buildLivestockPieOption()
      this.livestockBarOption = this.buildLivestockBarOption()
    },
    filterByBreed() {
      // 品种选择变化时的处理逻辑
      // filteredDetailRows计算属性会自动更新
    },
    updateLivestockData() {
      // 当前未提供地区维度的权威数据；保持全国基准展示
      this.refreshLivestockOption()
    },
    
    // 出栏率——环形图配置
    buildSlaughterPieOption() {
      const seriesData = this.slaughterSpeciesData.map(s => {
        if (s.percent != null) {
          return { value: s.percent, name: s.name, itemStyle: { color: s.color }, labelRange: `${s.percent}%` }
        }
        const mid = ((s.minPercent + s.maxPercent) / 2).toFixed(2)
        return { value: +mid, name: s.name, itemStyle: { color: s.color }, labelRange: `${s.minPercent}-${s.maxPercent}%` }
      })
      return {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: { color: '#ffffff' },
          formatter: params => `${params.marker}${params.name}<br/>占比：${seriesData[params.dataIndex].labelRange}`
        },
        legend: { show: false },
        series: [{
          name: '出栏占比',
          type: 'pie',
          radius: ['35%', '49%'],
          center: ['44%', '50%'],
          avoidLabelOverlap: true,
          label: {
            show: true,
            color: '#eaf7ff',
            formatter: ({ dataIndex, name }) => `${name}\n${seriesData[dataIndex].labelRange}`,
            fontSize: 12
          },
          labelLine: { show: true, length: 8, length2: 6 },
          data: seriesData
        }]
      }
    },
    // 出栏率——柱状图配置（区间值展示为中位数数值，标签文本展示区间）
    buildSlaughterBarOption() {
      const data = this.slaughterSpeciesData.map(s => {
        if (s.count != null) {
          return { value: Math.round(s.count / 10000), labelText: `${Math.round(s.count / 10000)}万头`, color: s.color, name: s.name }
        }
        const midCount = Math.round(((s.minCount + s.maxCount) / 2) / 10000)
        const labelText = `${Math.round(s.minCount / 10000)}-${Math.round(s.maxCount / 10000)}万头`
        return { value: midCount, labelText, color: s.color, name: s.name }
      })
      return {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: { color: '#ffffff' },
          formatter: params => {
            const p = params[0]
            const d = data[p.dataIndex]
            return `${p.marker}${d.name}<br/>出栏量：${d.labelText}`
          }
        },
        grid: { top: '20%', right: '6%', bottom: '15%', left: '12%', containLabel: true },
        xAxis: {
          type: 'category',
          data: data.map(d => d.name),
          axisLabel: { color: '#ffffff', fontSize: 12 },
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisTick: { lineStyle: { color: '#00ffff' } }
        },
        yAxis: {
          type: 'value',
          name: '出栏量(万头)',
          nameTextStyle: { color: '#00ffff', fontSize: 12 },
          axisLabel: { color: '#ffffff', fontSize: 11 },
          axisLine: { lineStyle: { color: '#00ffff' } },
          axisTick: { lineStyle: { color: '#00ffff' } },
          splitLine: { lineStyle: { color: 'rgba(0, 255, 255, 0.2)' } }
        },
        series: [{
          name: '出栏量',
          type: 'bar',
          data: data.map(d => ({ value: d.value, itemStyle: { color: d.color } })),
          barWidth: '60%',
          label: {
            show: true,
            position: 'top',
            color: '#eaf7ff',
            formatter: ({ dataIndex }) => data[dataIndex].labelText,
            fontSize: 11
          }
        }]
      }
    },
    refreshSlaughterOption() {
      this.slaughterPieOption = this.buildSlaughterPieOption()
      this.slaughterBarOption = this.buildSlaughterBarOption()
    },
    validateSlaughterData() {
      const categories = ['hybrid', 'dairy_bull_calf', 'local_yellow', 'others']
      const keysPresent = new Set(this.slaughterSpeciesData.map(s => s.key))
      if (!categories.every(k => keysPresent.has(k))) {
        this.validationMessageSlaughter = '数据完整性异常：缺少分类项，请检查数据源。'
        return false
      }
      let sum = 0
      this.slaughterSpeciesData.forEach(s => {
        if (s.percent != null) sum += s.percent
        else sum += (s.minPercent + s.maxPercent) / 2
      })
      const ok = Math.abs(sum - 100) <= 0.5
      this.validationMessageSlaughter = ok ? '' : `占比合计为${sum.toFixed(2)}%，未满足100%±0.5%校验。`
      return ok
    },
    ingestSlaughterRecords(records) {
      if (!Array.isArray(records)) return
      const map = { hybrid: 0, dairy_bull_calf: 0, local_yellow: 0, others: 0 }
      for (let i = 0; i < records.length; i++) {
        const r = records[i]
        if (map[r.categoryKey] != null) map[r.categoryKey] += r.count || 0
      }
      this.slaughterSpeciesData = this.slaughterSpeciesData.map(s => {
        if (s.count != null) return { ...s, count: map[s.key] || s.count }
        if (map[s.key] && map[s.key] > 0) {
          const val = map[s.key]
          return { ...s, minCount: Math.min(val, s.minCount ?? val), maxCount: Math.max(val, s.maxCount ?? val) }
        }
        return s
      })
      this.refreshSlaughterOption()
      this.validateSlaughterData()
    }
  },
  mounted() {
    // 页面加载时分别初始化数据
    this.refreshLivestockOption()
    this.refreshSlaughterOption()
    this.validateSlaughterData()
    // 拉取全国存栏/出栏年度数据并更新图表
    this.fetchNationalInventorySlaughter()
    // 拉取全国牛单价排行榜数据
    this.fetchNationalPriceRanking()
    // 拉取全国省份平均单价排行榜数据
    this.fetchNationalProvinceAverages()
  }
}
</script>

<style scoped>
.dashboard-container {
  /* 移除flex布局，使用App.vue中的fixed布局 */
  background: transparent;
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 地图容器样式 */
.map-container {
  position: relative;
  width: 100%;
  height: 100%; /* 从68%改为100%，让地图占满整个中间区域 */
  margin-top: 0; /* 移除负边距 */
}

/* 跳转加载动画样式 */
.jump-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.jump-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(0,212,255,0.35);
  border-top-color: #00d4ff;
  border-radius: 50%;
  animation: jumpSpin 1s linear infinite;
  margin-bottom: 10px;
}

.jump-loading-text {
  color: #eaf7ff;
  font-size: 14px;
}

@keyframes jumpSpin {
  to { transform: rotate(360deg); }
}



.lowest-price-panel h3 {
  color: #00d4ff;
  font-size: 16px;
  margin: 0 0 15px 0;
  text-align: left;
  font-weight: bold;
}



.price-item {
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 6px;
  padding: 10px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  min-height: 80px; /* 设置最小高度确保内容显示 */
}

.price-item:hover {
  background: rgba(0, 255, 255, 0.2);
  border-color: #00d4ff;
  transform: translateY(-2px);
}

.breed-name {
  color: #00d4ff;
  font-size: 13px; /* 增加字体大小 */
  font-weight: bold;
  margin-bottom: 6px; /* 增加底部间距 */
  text-align: center;
}

.province-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px; /* 增加间距 */
}

.province {
  color: #ffffff;
  font-size: 12px; /* 增加字体大小 */
}

.price {
  color: #00ff88;
  font-size: 11px; /* 增加字体大小 */
  font-weight: bold;
}

/* 左右侧面板容器边框 */
.dashboard-left::before,
.dashboard-right::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 10px;
  right: 10px;
  border: 2px solid #00d4ff;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 
    0 0 10px rgba(0, 212, 255, 0.3),
    inset 0 0 10px rgba(0, 212, 255, 0.1);
}

.dashboard-left::after,
.dashboard-right::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  /* bottom: 10px; */
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 6px;
  pointer-events: none;
}

/* 合并模块样式 */
.combined-panel {
  height: 70vh; /* 进一步增加到70%视口高度 */
}

.combined-content {
  display: flex;
  gap: 15px;
  height: calc(100% - 60px); /* 减去标题高度 */
}

/* 上下布局样式 */
.combined-content.vertical-layout {
  flex-direction: column;
}

.chart-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(0, 20, 40, 0.3);

  border-radius: 4px;

}

/* 上下布局时的图表区域样式 */
.vertical-layout .chart-section {
  min-height: 220px; /* 增加最小高度，提供更多空间 */
}

.chart-section h4 {
  color: #00d4ff;
  font-size: 14px;
  margin: 0 0 10px 0;
  text-align: left;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);

}

.sales-section .chart,
.livestock-section .livestock-chart {
  flex: 1;
  min-height: 200px; /* 减小最小高度 */
}

.echarts-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 面板样式 */
.panel {
  background: rgba(7, 59, 68, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 6px;
  margin-bottom: 5px;
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden; 
  box-shadow: 
    0 0 8px rgba(0, 212, 255, 0.2),
    inset 0 0 8px rgba(0, 212, 255, 0.05);
}



.panel-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  margin-bottom: 10px;
}

.panel-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  width: 30px;
  height: 2px;
  background: #00d4ff;
  box-shadow: 0 0 4px rgba(0, 212, 255, 0.6);
}

.panel-header h3 {
  color: #ffffff;
  font-size: 16px;
  padding-bottom: 5px;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.panel-header h3::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: #00d4ff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.8);
}



.region-select:hover,
.breed-selector:hover {
  border-color: #00ffff;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

.region-select option,
.breed-selector option {
  background: rgba(0, 20, 40, 0.95);
  color: #ffffff;
  padding: 4px;
}

/* 存栏总数统计样式 */
.livestock-panel .echarts-container {
  display: flex;
  flex-direction: row;
  gap: 10px; /* 两图间距约16px */
  height:190px;
  padding: 0 5px 5px 5px;
}

.total-display {
  text-align: center;
  /* margin-bottom: 1px; */
}

.total-number {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
}

.total-label {
  font-size: 12px;
  color: #cccccc;
  margin-top: 5px;
}

.livestock-chart {
  flex: 1;
  width: 100%;
  height: 350px;
}

/* 新增：存栏率的两个图表容器 */
.livestock-pie {
  flex: 0 0 40%;
  height: 100%;
}
.livestock-bar {
  flex: 1;
  height: 100%;
}

/* 统一图例样式，置于两图下方 */
.livestock-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
  
  align-items: center;
}
.livestock-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.livestock-legend .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
}
.livestock-legend .legend-label {
  color: #eaf7ff;
  font-size: 12px;
}

/* 小屏幕下纵向排列 */
@media (max-width: 768px) {
  .livestock-panel .echarts-container {
    flex-direction: column;
    height: auto;
  }
  .livestock-pie,
  .livestock-bar {
    width: 100%;
    height: 280px;
  }
}

/* 出栏率统计样式 */
.slaughter-panel {
  display: flex;
  flex-direction: column;
  /* 与“全国牛存栏率”模块保持一致的自适应面板高度 */
  flex: 0 0 auto;
  height: auto;
}
.slaughter-panel .echarts-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  /* 图表容器高度与“全国牛存栏率”模块一致 */
  flex: 0 0 230px;
  height: 230px;
}
.slaughter-pie {
  flex: 0 0 42%;
  height: 100%;
}
.slaughter-bar {
  flex: 1;
  height: 100%;
}
.slaughter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
  align-items: center;
  margin-top: 8px;
}
.slaughter-legend .legend-item { display: flex; align-items: center; gap: 6px; }
.slaughter-legend .legend-color { width: 12px; height: 12px; border-radius: 2px; box-shadow: 0 0 6px rgba(0, 212, 255, 0.5); }
.slaughter-legend .legend-label { color: #eaf7ff; font-size: 12px; }
.validation-message { margin-top: 6px; color: #ffcf6e; font-size: 12px; }

@media (max-width: 768px) {
  .slaughter-panel { height: auto; }
  .slaughter-panel .echarts-container { flex-direction: column; height: auto; }
  .slaughter-pie, .slaughter-bar { width: 100%; height: 280px; }
}







.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: rgba(0, 255, 255, 0.15);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
}

.card-number {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 8px;
}

.card-label {
  font-size: 12px;
  color: #cccccc;
  text-align: center;
  line-height: 1.2;
}

.chart-container {
  flex: 1;
  min-height: 200px;
}

.ear-tag-chart {
  width: 100%;
  height:93%;
}



/* 已移除：品种单价排行榜样式 */

/* 明细表样式 */
.detail-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  height: 520px;
  overflow-y: auto;
}

.detail-header, .detail-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr;
  gap: 15px;
  align-items: center;
  font-size: 14px;
}

.detail-header {
  color: #84acf0;
  border-bottom: 1px solid rgba(132, 172, 240, 0.2);
  padding-bottom: 8px;
  font-weight: bold;
}

.detail-row {
  color: #fff;
  /* padding: 6px 0; */
  border-bottom: 1px dashed rgba(132, 172, 240, 0.15);
}

.detail-row:hover {
  background: rgba(132, 172, 240, 0.1);
  border-radius: 4px;
}

/* 已移除：销售额柱状图模块样式 */



.company-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.company-bar {
  width: 80px;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-right: 10px;
  overflow: hidden;
}

.company-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.company-name {
  font-size: 10px;
  color: #ffffff;
  flex: 1;
  line-height: 1.2;
}

/* 存栏率模块工具栏与数据说明 */
.panel-tools {
  display: flex;
  gap: 8px;
  margin-left: 10px;
}

.tool-btn {
  background: rgba(0, 212, 255, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.4);
  color: #ffffff;
  border-radius: 6px;
  padding: 4px 4px;
  font-size: 12px;
  cursor: pointer;
}

.tool-btn:hover {
  background: rgba(0, 212, 255, 0.25);
}

.data-notes {
  margin-top: 10px;
  min-height: 10%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #00d4ff;
  font-size: 12px;
}

.data-source {
  color: rgba(255, 255, 255, 0.7);
}
</style>