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

<template>
  <div class="dashboard-container">
    <!-- 左侧面板 -->
    <aside class="dashboard-left">
    <!-- 合并模块：出售统计与存栏率 -->
    <div class="panel combined-panel">
      <div class="panel-header">
        <h3>各地区出售统计与品种存栏率</h3>
        <select v-model="selectedRegion" @change="updateLivestockData" class="region-select">
          <option value="全国">全国</option>
          <option value="北京市">北京市</option>
          <option value="天津市">天津市</option>
          <option value="河北省">河北省</option>
          <option value="山西省">山西省</option>
          <option value="内蒙古自治区">内蒙古自治区</option>
          <option value="辽宁省">辽宁省</option>
          <option value="吉林省">吉林省</option>
          <option value="黑龙江省">黑龙江省</option>
          <option value="上海市">上海市</option>
          <option value="江苏省">江苏省</option>
          <option value="浙江省">浙江省</option>
          <option value="安徽省">安徽省</option>
          <option value="福建省">福建省</option>
          <option value="江西省">江西省</option>
          <option value="山东省">山东省</option>
          <option value="河南省">河南省</option>
          <option value="湖北省">湖北省</option>
          <option value="湖南省">湖南省</option>
          <option value="广东省">广东省</option>
          <option value="广西壮族自治区">广西壮族自治区</option>
          <option value="海南省">海南省</option>
          <option value="重庆市">重庆市</option>
          <option value="四川省">四川省</option>
          <option value="贵州省">贵州省</option>
          <option value="云南省">云南省</option>
          <option value="西藏自治区">西藏自治区</option>
          <option value="陕西省">陕西省</option>
          <option value="甘肃省">甘肃省</option>
          <option value="青海省">青海省</option>
          <option value="宁夏回族自治区">宁夏回族自治区</option>
          <option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
        </select>
      </div>
      <div class="combined-content vertical-layout">
        <!-- 上方：出售统计 -->
        <div class="chart-section sales-section">
          <h4>各品种牛出售统计</h4>
          <v-chart
            ref="salesChart"
            class="chart"
            :option="salesChartOption"
            autoresize
          />
        </div>
        
        <!-- 下方：存栏率 -->
        <div class="chart-section livestock-section">
          <h4>不同品种牛存栏率</h4>
          <div class="echarts-container">
            <v-chart 
              ref="livestockChart"
              class="livestock-chart" 
              :option="livestockChartOption" 
              autoresize
            />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 不同品种年度总销售额柱状图模块 -->
    <div class="panel sales-revenue-panel">
      <h3>不同品种年度总销售额</h3>
      <v-chart 
        ref="salesRevenueChart"
        class="sales-revenue-chart" 
        :option="salesRevenueChartOption" 
        autoresize
      />
    </div>

  </aside>
  
  <!-- 中间地图区域 -->
  <section class="dashboard-center">
    <!-- 地图容器 -->
    <div class="map-container">
      <Map3D />
    </div>
  </section>
  
  <!-- 右侧面板 -->
  <aside class="dashboard-right">
    <!-- 地区-品种明细表 -->
    <div class="panel detail-panel">
      <div class="panel-header">
        <h3>地区-品种明细</h3>
        <select v-model="selectedBreed" @change="filterByBreed" class="breed-selector">
          <option value="">全部品种</option>
          <option value="安格斯牛">安格斯牛</option>
          <option value="荷斯坦牛">荷斯坦牛</option>
          <option value="复洲黄牛">复洲黄牛</option>
          <option value="西门塔尔牛">西门塔尔牛</option>
          <option value="夏洛莱牛">夏洛莱牛</option>
          <option value="水牛">水牛</option>
        </select>
      </div>
      <div class="detail-table">
        <div class="detail-header">
          <div>地区</div>
          <div>存栏(头)</div>
          <div>出售(头)</div>
          <div>单价(元/头)</div>
        </div>
        <div v-for="row in filteredDetailRows" :key="row.id" class="detail-row">
          <div>{{ row.region }}</div>
          <div>{{ row.stock }}</div>
          <div>{{ row.sold }}</div>
          <div>{{ row.price }}</div>
        </div>
      </div>
    </div>

    <!-- 品种单价排行榜 -->
    <div class="panel price-panel" >
      <div class="panel-header">
        <h3> 品种单价趋势图(元/头)</h3>
      </div>
      <div class="price-content">
        <v-chart 
          class="price-chart" 
          :option="priceRankingOption" 
          autoresize
        />
      </div>
    </div>
  </aside>
  </div>
</template>

<style scoped>
.dashboard-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.dashboard-left,
.dashboard-center {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  height: 100vh; /* 确保中间区域占满整个视口高度 */
  padding: 10px;
}

.dashboard-right {
  flex: 1;
  min-width: 300px;
}
@media (max-width: 768px) {
  .dashboard-left,
  .dashboard-center,
  .dashboard-right {
    flex: 100%;
  }
}
</style>

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

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

export default {
  name: 'Home',
  components: {
    Map3D,
    VChart
  },
  data() {
    return {
      // 选中的地区
      selectedRegion: '全国',
      // 选中的品种
      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];
            }
          }
        }]
      },
      // 出售统计（各品种牛出售-南丁格尔玫瑰图）
      salesChartOption: {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: {
            color: '#ffffff'
          },
          formatter: '{a} <br/>{b}: {c}头 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'center',
          textStyle: { color: '#ffffff', fontSize: 12 },
          itemWidth: 14,
          itemHeight: 10
        },
        series: [
          {
            name: '品种出售统计',
            type: 'pie',
            radius: ['20%', '80%'],
            center: ['65%', '50%'],
            roseType: 'area',
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              fontSize: 10,
              color: '#ffffff',
              formatter: '{b}\n{d}%'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold',
                color: '#00ffff'
              }
            },
            data: [
              { value: 35000, name: '安格斯牛', itemStyle: { color: '#7af4ff' } },
              { value: 28000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
              { value: 22000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
              { value: 18000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
              { value: 15000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
              { value: 12000, name: '其他品种', itemStyle: { color: '#26c6da' } }
            ]
          }
        ]
      },
      // 不同品种牛存栏率（南丁格尔玫瑰图）
      livestockChartOption: {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: { color: '#ffffff' },
          formatter: '{a} <br/>{b}: {c}头 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'center',
          textStyle: { color: '#ffffff', fontSize: 12 },
          itemWidth: 14,
          itemHeight: 10
        },
        series: [
          {
            name: '品种存栏率',
            type: 'pie',
            radius: ['20%', '80%'],
            center: ['65%', '50%'],
            roseType: 'area',
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              fontSize: 10,
              color: '#ffffff',
              formatter: '{b}\n{d}%'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold',
                color: '#00ffff'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 255, 255, 0.5)'
              }
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              lineStyle: {
                color: '#ffffff',
                width: 1
              }
            },
            data: [
              { value: 120000, name: '安格斯牛', itemStyle: { color: '#00ffff' } },
              { value: 95000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
              { value: 87000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
              { value: 72000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
              { value: 65000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
              { value: 48000, name: '其他品种', itemStyle: { color: '#26c6da' } }
            ]
          }
        ]
      },


       // 品种单价趋势图配置
       priceRankingOption: {
         backgroundColor: 'transparent',
         tooltip: { 
           trigger: 'axis',
           backgroundColor: 'rgba(0, 0, 0, 0.8)',
           borderColor: '#00ffff',
           borderWidth: 1,
           textStyle: { color: '#ffffff' },
           formatter: function(params) {
             let result = params[0].axisValue + '<br/>';
             params.forEach(param => {
               result += param.marker + param.seriesName + ': ' + param.value + ' 元/头<br/>';
             });
             return result;
           }
         },
         legend: {
           data: ['安格斯牛', '荷斯坦牛', '夏洛莱牛', '西门塔尔牛', '复洲黄牛', '水牛'],
           textStyle: { color: '#fff', fontSize: 10 },
           top: '5%',
           itemWidth: 12,
           itemHeight: 8
         },
         grid: { top: '25%', right: '8%', bottom: '15%', left: '15%' },
         xAxis: { 
           type: 'category', 
           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
           name: '月份',
           nameTextStyle: { color: '#00ffff', fontSize: 11 },
           axisLabel: { color: '#fff', fontSize: 10, rotate: 45 }, 
           axisLine: { lineStyle: { color: '#00ffff' } },
           splitLine: { show: false }
         },
         yAxis: { 
           type: 'value', 
           name: '单价(元/头)',
           nameTextStyle: { color: '#00ffff', fontSize: 11 },
           axisLabel: { color: '#fff', fontSize: 10 },
           axisLine: { lineStyle: { color: '#00ffff' } },
           splitLine: { lineStyle: { color: 'rgba(0,255,255,0.2)' } },
           min: 13500,
           max: 18000,
           interval: 500
         },
         series: [
           {
             name: '安格斯牛',
             type: 'line',
             data: [14000, 14100, 14200, 14300, 14250, 14400, 14350, 14500, 14450, 14600, 14550, 14200],
             lineStyle: { color: '#ff6b6b', width: 2 },
             itemStyle: { color: '#ff6b6b' },
             symbol: 'circle',
             symbolSize: 4,
             smooth: true
           },
           {
             name: '荷斯坦牛',
             type: 'line',
             data: [16800, 16900, 17000, 17100, 17050, 17200, 17150, 17300, 17250, 17400, 17350, 17000],
             lineStyle: { color: '#4ecdc4', width: 2 },
             itemStyle: { color: '#4ecdc4' },
             symbol: 'circle',
             symbolSize: 4,
             smooth: true
           },
           {
             name: '夏洛莱牛',
             type: 'line',
             data: [16300, 16400, 16500, 16600, 16550, 16700, 16650, 16800, 16750, 16900, 16850, 16500],
             lineStyle: { color: '#45b7d1', width: 2 },
             itemStyle: { color: '#45b7d1' },
             symbol: 'circle',
             symbolSize: 4,
             smooth: true
           },
           {
             name: '西门塔尔牛',
             type: 'line',
             data: [16600, 16700, 16800, 16900, 16850, 17000, 16950, 17100, 17050, 17200, 17150, 16800],
             lineStyle: { color: '#96ceb4', width: 2 },
             itemStyle: { color: '#96ceb4' },
             symbol: 'circle',
             symbolSize: 4,
             smooth: true
           },
           {
             name: '复洲黄牛',
             type: 'line',
             data: [14300, 14400, 14500, 14600, 14550, 14700, 14650, 14800, 14750, 14900, 14850, 14500],
             lineStyle: { color: '#feca57', width: 2 },
             itemStyle: { color: '#feca57' },
             symbol: 'circle',
             symbolSize: 4,
             smooth: true
           },
           {
             name: '水牛',
             type: 'line',
             data: [17200, 17300, 17387, 17450, 17400, 17500, 17480, 17600, 17550, 17700, 17650, 17387],
             lineStyle: { color: '#ff9ff3', width: 2 },
             itemStyle: { color: '#ff9ff3' },
             symbol: 'circle',
             symbolSize: 4,
             smooth: true
           }
         ]
       },

       // 地区-品种明细数据
       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)'
                 }
               }
             ]
           }
         ]
       },

       // 不同品种年度总销售额柱状图配置
       salesRevenueChartOption: {
         backgroundColor: 'transparent',
         tooltip: {
           trigger: 'axis',
           backgroundColor: 'rgba(0, 0, 0, 0.8)',
           borderColor: '#00ffff',
           borderWidth: 1,
           textStyle: {
             color: '#ffffff'
           },
           formatter: '{a} <br/>{b}: {c}万元'
         },
         grid: {
           top: '15%',
           right: '8%',
           bottom: '15%',
           left: '15%',
           containLabel: true
         },
         xAxis: {
           type: 'category',
           data: ['安格斯牛', '荷斯坦牛', '夏洛莱牛', '西门塔尔牛', '利木赞牛', '其他品种'],
           axisLabel: {
             color: '#ffffff',
             fontSize: 12,
             rotate: 45
           },
           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: [
               { value: 28500, itemStyle: { color: '#7af4ff' } },
               { value: 22800, itemStyle: { color: '#00F6FF' } },
               { value: 18600, itemStyle: { color: '#84acf0' } },
               { value: 15200, itemStyle: { color: '#66d9ef' } },
               { value: 12800, itemStyle: { color: '#4dd0e1' } },
               { value: 9600, itemStyle: { color: '#26c6da' } }
             ],
             barWidth: '60%',
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowColor: '#00ffff'
               }
             }
           }
         ]
       },

     }
   },
   computed: {
    totalLivestock() {
      const series = this.livestockChartOption.series || []
      return series.reduce((sum, s) => sum + (s.data || []).reduce((a, b) => a + b, 0), 0)
    },
    filteredDetailRows() {
      if (!this.selectedBreed) {
        return this.detailRows
      }
      return this.detailRows.filter(row => row.breed === this.selectedBreed)
    }
  },
  methods: {
    filterByBreed() {
      // 品种选择变化时的处理逻辑
      // filteredDetailRows计算属性会自动更新
    },
    updateLivestockData() {
      // 不同地区的存栏数据 - 更新为省份数据
      const regionData = {
        '全国': [
          { value: 120000, name: '安格斯牛', itemStyle: { color: '#00ffff' } },
          { value: 95000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 87000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 72000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 65000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 48000, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '北京市': [
          { value: 15000, name: '安格斯牛', itemStyle: { color: '#00ffff' } },
          { value: 12000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 8000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 6000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 4000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 3000, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '河北省': [
          { value: 85000, name: '安格斯牛', itemStyle: { color: '#00ffff' } },
          { value: 72000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 58000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 45000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 38000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 25000, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '山东省': [
          { value: 95000, name: '安格斯牛', itemStyle: { color: '#00ffff' } },
          { value: 88000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 76000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 62000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 55000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 42000, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '内蒙古自治区': [
          { value: 110000, name: '安格斯牛', itemStyle: { color: '#00ffff' } },
          { value: 95000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 82000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 68000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 58000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 45000, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '新疆维吾尔自治区': [
          { value: 78000, name: '安格斯牛', itemStyle: { color: '#00ffff' } },
          { value: 65000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 52000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 48000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 38000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 32000, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '黑龙江省': [
          { value: 88000, name: '安格斯牛', itemStyle: { color: '#00ffff' } },
          { value: 75000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 62000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 55000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 45000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 35000, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ]
      }
      
      // 更新饼状图数据
      this.livestockChartOption.series[0].data = regionData[this.selectedRegion] || regionData['全国']
      
      // 同时更新出售统计数据以保持联动
      this.updateSalesDataByBreed()
    },
    
    // 根据品种更新出售统计数据
    updateSalesDataByBreed() {
      const salesData = {
        '全国': [
          { value: 35000, name: '安格斯牛', itemStyle: { color: '#7af4ff' } },
          { value: 28000, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 22000, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 18000, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 15000, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 12000, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '北京市': [
          { value: 1500, name: '安格斯牛', itemStyle: { color: '#7af4ff' } },
          { value: 1200, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 800, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 600, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 400, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 300, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '河北省': [
          { value: 8500, name: '安格斯牛', itemStyle: { color: '#7af4ff' } },
          { value: 7200, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 5800, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 4500, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 3800, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 2800, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '山东省': [
          { value: 9500, name: '安格斯牛', itemStyle: { color: '#7af4ff' } },
          { value: 8800, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 7600, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 6200, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 5100, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 4200, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '内蒙古自治区': [
          { value: 11000, name: '安格斯牛', itemStyle: { color: '#7af4ff' } },
          { value: 9500, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 8200, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 6800, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 5800, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 4500, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '新疆维吾尔自治区': [
          { value: 7800, name: '安格斯牛', itemStyle: { color: '#7af4ff' } },
          { value: 6500, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 5200, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 4300, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 3600, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 2900, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ],
        '黑龙江省': [
          { value: 8800, name: '安格斯牛', itemStyle: { color: '#7af4ff' } },
          { value: 7500, name: '荷斯坦牛', itemStyle: { color: '#00F6FF' } },
          { value: 6200, name: '夏洛莱牛', itemStyle: { color: '#84acf0' } },
          { value: 5500, name: '西门塔尔牛', itemStyle: { color: '#66d9ef' } },
          { value: 4500, name: '利木赞牛', itemStyle: { color: '#4dd0e1' } },
          { value: 3500, name: '其他品种', itemStyle: { color: '#26c6da' } }
        ]
      }
      
      // 更新出售统计图表数据
      this.salesChartOption.series[0].data = salesData[this.selectedRegion] || salesData['全国']
    }
  },
  mounted() {
    // 页面加载时初始化饼图数据
    this.updateLivestockData()
    
    // 初始化出售统计数据
    this.updateSalesDataByBreed()
  }
}
</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; /* 移除负边距 */
}

/* 不同品种牛单价最低省份展示模块 */
.lowest-price-panel {
  background: rgba(0, 20, 40, 0.8);
  border: 1px solid #00d4ff;
  border-radius: 8px;
  padding: 15px;
  /* margin-bottom: 15px; */
  height: 28%; /* 从32%调整到28%，为地图腾出更多空间 */
width: 730px;
margin-left: 580px;
}

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

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: calc(100% - 40px);
}

.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;
  bottom: 0px;
  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: 1px solid rgba(0, 212, 255, 0.2); */ /* 去掉边框 */
  border-radius: 4px;
  padding: 10px;
}

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

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

.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: 15px;
  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::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 4px;
  pointer-events: none;
} */

/* 面板角落装饰 */
/* .panel::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 20px;
  border-top: 2px solid #00d4ff;
  border-left: 2px solid #00d4ff;
  border-radius: 6px 0 0 0;
} */

.panel-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 10px 15px 8px 15px; */
  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 {
  /* margin-bottom: 5px; */
  color: #ffffff;
  font-size: 16px;
  padding-bottom: 5px;
  font-weight: bold;
  /* text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); */
  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,
.breed-selector {
  background: rgba(0, 20, 40, 0.8);
  border: 1px solid #00d4ff;
  border-radius: 4px;
  color: #ffffff;
  padding: 4px 8px;
  font-size: 12px;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.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: column;
  height: 250px;
  padding: 0 10px 10px 10px;
}

.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;
}

/* 出售统计样式 */
.sales-panel .sales-chart {
  height: 280px;
  padding: 10px 0px 0px 0px;
}

.sales-panel .sales-chart .chart {
  width: 100%;
  height: 78%;
}

/* 牛只耳标佩戴统计样式 */
.ear-tag-panel .ear-tag-stats {
  display: flex;
  gap: 15px;
  height: 280px;
  padding: 8px 15px 15px 15px;
}

.flip-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 100px;
  padding-top: 20px;
}

.flip-card {
  background-color: transparent;
  width: 100px;
  height: 90px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.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%;
}

/* 防疫统计样式 */
 .epidemic-panel .epidemic-content {
  height: 200px;
  padding: 0 15px 15px 15px;
}

.epidemic-chart {
  width: 100%;
  height: 100%;
} 

/* 品种单价排行榜样式 */
.price-panel .price-content {
  height: 280px;
  padding: 0 15px 10px 10px;
}

.price-chart {
  width: 100%;
  height: 100%;
}

/* 明细表样式 */
.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;
}

/* 销售额柱状图模块样式 */
.sales-revenue-panel {
  margin-top: 20px;
  height: 280px; /* 缩小高度 */
  background: rgba(0, 20, 40, 0.3);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 4px;
  padding: 15px;
}

.sales-revenue-chart {
  width: 100%;
  height: calc(100% - 40px); /* 调整高度计算 */
  margin-top: 15px; /* 添加上边距，将图表往下移 */
}

/* 牛只参保统计样式 */
.cattle-insurance-panel .insurance-stats {
  display: flex;
  align-items: center;
  height: 220px;
  padding: 10px 15px 15px 15px;
}

.insurance-circle {
  position: relative;
  width: 120px;
  height: 120px;
  margin-right: 20px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 15px;
}

.insurance-chart {
  width: 100%;
  height: 100%;
}

.insurance-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

.insurance-number {
  font-size: 16px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 4px;
}

.insurance-label {
  font-size: 10px;
  color: #cccccc;
  line-height: 1.2;
}

.insurance-companies {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.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;
}
</style>