羊群结构页面实现

src/api/fileManagement/sheep_file.js

@@ -25,3 +25,25 @@ export function delSheep_file(id) {
     method: 'delete'
   })
 }
+
+
+
+// 在群总数
+export const getInGroupCount = () => 
+  request({ url: '/sheep_file/sheep_file/stat/inGroupCount', method: 'get' })
+
+export function getSheepTypeStat() {
+  return request({ url: '/sheep_file/sheep_file/stat/sheepType', method: 'get' })
+}
+
+export function getBreedStatusStat() {
+  return request({ url: '/sheep_file/sheep_file/stat/breedStatus', method: 'get' })
+}
+
+export function getVarietyStat() {
+  return request({ url: '/sheep_file/sheep_file/stat/variety', method: 'get' })
+}
+
+export function getLactationParityStat() {
+  return request({ url: '/sheep_file/sheep_file/stat/lactationParity', method: 'get' })
+}

src/views/fileManagement/sheep_structure/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="app-container">
+
+    <!-- 顶部存栏总数 -->
+    <el-row :gutter="20" class="top-summary">
+      <el-col :span="24">
+        <el-card shadow="hover" class="summary-card">
+          <div class="summary-content">
+            <el-icon size="48" color="#409EFF"><Collection /></el-icon>
+            <div>
+              <div class="summary-title">存栏羊只总数</div>
+              <div class="summary-value">{{ inGroupCount }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 图表区域 -->
+    <el-row :gutter="20" class="chart-row">
+      <!-- 羊只类别 -->
+      <el-col :xs="24" :sm="24" :md="12" :lg="12">
+        <el-card shadow="hover" class="chart-card">
+          <template #header>
+            <span class="card-title">羊只类别分布</span>
+          </template>
+          <div ref="typePie" class="chart-box"></div>
+        </el-card>
+      </el-col>
+
+      <!-- 泌乳羊胎次 -->
+      <el-col :xs="24" :sm="24" :md="12" :lg="12">
+        <el-card shadow="hover" class="chart-card">
+          <template #header>
+            <span class="card-title">泌乳羊胎次分布</span>
+          </template>
+          <div ref="parityPie" class="chart-box"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" class="chart-row">
+      <!-- 繁育状态 -->
+      <el-col :xs="24" :sm="24" :md="12" :lg="12">
+        <el-card shadow="hover" class="chart-card">
+          <template #header>
+            <span class="card-title">繁育状态分布</span>
+          </template>
+          <div ref="breedBar" class="chart-box"></div>
+        </el-card>
+      </el-col>
+
+      <!-- 品种分布 -->
+      <el-col :xs="24" :sm="24" :md="12" :lg="12">
+        <el-card shadow="hover" class="chart-card">
+          <template #header>
+            <span class="card-title">品种分布</span>
+          </template>
+          <div ref="varietyBar" class="chart-box"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+import { Collection } from '@element-plus/icons-vue'
+import {
+  getInGroupCount,
+  getSheepTypeStat,
+  getBreedStatusStat,
+  getVarietyStat,
+  getLactationParityStat
+} from '@/api/fileManagement/sheep_file'
+
+const inGroupCount = ref(0)
+const typePie   = ref(null)
+const parityPie = ref(null)
+const breedBar  = ref(null)
+const varietyBar = ref(null)
+
+let chart1, chart2, chart3, chart4
+
+onMounted(() => {
+  chart1 = echarts.init(typePie.value)
+  chart2 = echarts.init(parityPie.value)
+  chart3 = echarts.init(breedBar.value)
+  chart4 = echarts.init(varietyBar.value)
+
+  loadCharts()
+  window.addEventListener('resize', () => {
+    chart1.resize(); chart2.resize(); chart3.resize(); chart4.resize()
+  })
+})
+
+function loadCharts() {
+  const pieOption = (data, title) => ({
+    title: { text: title, left: 'center', textStyle: { fontWeight: 'bold' } },
+    tooltip: { trigger: 'item' },
+    legend: { orient: 'vertical', left: 'left' },
+    series: [
+      {
+        type: 'pie',
+        radius: '60%',
+        data,
+        emphasis: {
+          itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)' }
+        }
+      }
+    ]
+  })
+
+  const barOption = (data, title) => ({
+    title: { text: title, left: 'center', textStyle: { fontWeight: 'bold' } },
+    tooltip: {},
+    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    xAxis: { type: 'category', data: data.map(i => i.name) },
+    yAxis: { type: 'value' },
+    series: [{ type: 'bar', data: data.map(i => i.value), itemStyle: { borderRadius: [4, 4, 0, 0] } }]
+  })
+
+  getInGroupCount().then(res => (inGroupCount.value = res.data))
+  getSheepTypeStat().then(res => chart1.setOption(pieOption(res.data, '羊只类别分布')))
+  getLactationParityStat().then(res => chart2.setOption(pieOption(res.data, '泌乳羊胎次分布')))
+  getBreedStatusStat().then(res => chart3.setOption(barOption(res.data, '繁育状态分布')))
+  getVarietyStat().then(res => chart4.setOption(barOption(res.data, '品种分布')))
+}
+</script>
+
+<style scoped>
+/* 顶部卡片 */
+.top-summary {
+  margin-bottom: 20px;
+}
+.summary-card {
+  border-radius: 12px;
+}
+.summary-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.summary-title {
+  font-size: 16px;
+  color: #909399;
+  margin-bottom: 6px;
+}
+.summary-value {
+  font-size: 36px;
+  font-weight: 700;
+  color: #409EFF;
+}
+
+/* 图表卡片 */
+.chart-row {
+  margin-bottom: 20px;
+}
+.chart-card {
+  border-radius: 12px;
+  height: 100%;
+}
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+.chart-box {
+  height: 300px;
+}
+</style>