This commit is contained in:
zyh 2025-08-04 09:18:32 +08:00
commit acb021d78d
12 changed files with 853 additions and 34 deletions

View File

@ -0,0 +1,33 @@
import request from '@/utils/request'
export function getList(params) {
return request({
url: '/milkInOutStore/list',
method: 'get',
params
})
}
export function importExcel(file) {
const data = new FormData()
data.append('file', file)
return request({
url: '/milkInOutStore/import',
method: 'post',
data,
headers: { 'Content-Type': 'multipart/form-data' }
})
}
export function exportExcel(params) {
return request({
url: '/milkInOutStore/export',
method: 'post',
params,
responseType: 'blob'
})
}
export function getColumns() {
return request({ url: '/milkInOutStore/columns', method: 'get' })
}

View File

@ -0,0 +1,33 @@
import request from '@/utils/request'
export function listMilkProdclasses(query) {
return request({
url: '/milkProdclasses/milkProdclasses/list',
method: 'get',
params: query
})
}
export function importMilkProdclasses(data) {
return request({
url: '/milkProdclasses/milkProdclasses/import',
method: 'post',
data: data,
headers: { 'Content-Type': 'multipart/form-data' }
})
}
export function exportMilkProdclasses(query) {
return request({
url: '/milkProdclasses/milkProdclasses/export',
method: 'post',
responseType: 'blob',
params: query
})
}
export function getRanchList() {
return request({
url: '/system/ranch/list',
method: 'get'
})
}

View File

@ -44,3 +44,13 @@
// }
// 可以保留空文件或删除此文件
// 因为前端不再需要调用后端API
import request from '@/utils/request'
// 查询胎次校正列表
export function listParityCorrection(query) {
return request({
url: '/parityCorrection/parityCorrection/listAll',
method: 'get',
params: query
})
}

View File

@ -0,0 +1,8 @@
import request from '@/utils/request'
export function getRanchList() {
return request({
url: '/dairyProducts/ranch/list',
method: 'get'
})
}

View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询羊奶出入库列表
export function listMilkInOutStore(query) {
return request({
url: '/milkInOutStore/milkInOutStore/list',
method: 'get',
params: query
})
}
// 查询羊奶出入库详细
export function getMilkInOutStore(id) {
return request({
url: '/milkInOutStore/milkInOutStore/' + id,
method: 'get'
})
}
// 新增羊奶出入库
export function addMilkInOutStore(data) {
return request({
url: '/milkInOutStore/milkInOutStore',
method: 'post',
data: data
})
}
// 修改羊奶出入库
export function updateMilkInOutStore(data) {
return request({
url: '/milkInOutStore/milkInOutStore',
method: 'put',
data: data
})
}
// 删除羊奶出入库
export function delMilkInOutStore(id) {
return request({
url: '/milkInOutStore/milkInOutStore/' + id,
method: 'delete'
})
}

View File

@ -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' })
}

View File

@ -50,3 +50,6 @@ export function delData(dictCode) {
method: 'delete'
})
}
// 兼容旧写法
export { getDicts as listDictDataByType }

View File

@ -0,0 +1,157 @@
<template>
<div>
<el-form :inline="true" :model="queryParams" class="mb-4">
<el-form-item label="开始日期">
<el-date-picker v-model="queryParams.datetimeStart" type="date" value-format="YYYY-MM-DD"/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker v-model="queryParams.datetimeEnd" type="date" value-format="YYYY-MM-DD"/>
</el-form-item>
<el-button type="primary" @click="getList">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</el-form>
<el-row :gutter="10" style="margin-bottom: 16px;">
<el-col :span="24">
<el-upload :before-upload="beforeUpload" :show-file-list="false" style="display: inline-block; margin: 0 8px;">
<el-button type="primary">导入</el-button>
</el-upload>
<el-button type="success" @click="handleExport">导出</el-button>
<el-button @click="openColDialog">列设置</el-button>
</el-col>
</el-row>
<el-dialog v-model="colDialog" title="选择展示列">
<div>
<strong>饲喂来源</strong>
<el-checkbox-group v-model="selectedFeed">
<el-checkbox v-for="f in allCols.feed" :key="f" :label="f">{{ f }}</el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top:1em">
<strong>销售去向</strong>
<el-checkbox-group v-model="selectedSale">
<el-checkbox v-for="s in allCols.sale" :key="s" :label="s">{{ s }}</el-checkbox>
</el-checkbox-group>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="applyCols">确认</el-button>
<el-button @click="colDialog = false">取消</el-button>
</div>
</template>
</el-dialog>
<el-table :data="rows" border style="margin-top:16px">
<!-- 前面的固定列 -->
<el-table-column prop="datetime" label="日期"/>
<el-table-column prop="num" label="羊数"/>
<el-table-column prop="colostSheep" label="初乳羊"/>
<el-table-column prop="commercialIntake" label="商乳入库"/>
<el-table-column prop="antiIntake" label="抗乳入库"/>
<el-table-column prop="colostIntake" label="初乳入库"/>
<el-table-column prop="intakeTotal" label="入库小计"/>
<el-table-column prop="commercialTest" label="商乳实验用奶"/>
<el-table-column prop="colostTest" label="初乳实验用奶"/>
<el-table-column prop="transferCommercial" label="商乳调拨出库"/>
<el-table-column prop="transferAnti" label="抗乳调拨出库"/>
<el-table-column prop="transferColost" label="初乳调拨出库"/>
<el-table-column prop="transferTotal" label="调拨小计"/>
<el-table-column prop="loss" label="损耗"/>
<!-- 动态饲喂来源列插入到这里 -->
<el-table-column v-for="f in selectedFeed" :key="'feed-'+f" :prop="f" :label="f"/>
<!-- 动态销售去向列 -->
<el-table-column v-for="s in selectedSale" :key="'sale-'+s" :prop="s" :label="s"/>
<!-- 后面的固定列 -->
<el-table-column prop="stockCommercial" label="商乳库存"/>
<el-table-column prop="stockAnti" label="抗乳库存"/>
<el-table-column prop="colost" label="初乳库存"/>
<el-table-column prop="returnFresh" label="爱特退回鲜奶"/>
<el-table-column prop="returnYogurt" label="爱特退回酸奶"/>
</el-table>
<el-pagination
style="margin-top:16px; text-align:right"
:total="total"
v-model:page-size="queryParams.pageSize"
v-model:current-page="queryParams.pageNum"
@current-change="getList">
</el-pagination>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getList as fetchList, importExcel, exportExcel, getColumns } from '@/api/dairyProducts/milkInOutStore/milkInOutStore.js'
import { ElMessage } from 'element-plus'
const queryParams = reactive({
datetimeStart: null,
datetimeEnd: null,
pageNum: 1,
pageSize: 10
})
const rows = ref([])
const total = ref(0)
const allCols = reactive({ feed: [], sale: [] })
const selectedFeed = ref([])
const selectedSale = ref([])
const colDialog = ref(false)
function getList() {
fetchList(queryParams).then(res => {
rows.value = res.rows
total.value = res.total
})
}
function resetQuery() {
queryParams.datetimeStart = null
queryParams.datetimeEnd = null
queryParams.pageNum = 1
getList()
}
function openColDialog() {
getColumns().then(res => {
const d = res.data[0]
allCols.feed = d.feed || []
allCols.sale = d.sale || []
// /
selectedFeed.value = [...allCols.feed]
selectedSale.value = [...allCols.sale]
colDialog.value = true
})
}
function applyCols() {
colDialog.value = false
getList()
}
function beforeUpload(file) {
importExcel(file).then(() => {
ElMessage.success('导入成功')
getList()
}).catch(err => {
ElMessage.error('导入失败:' + (err.message || err))
})
return false
}
function handleExport() {
exportExcel(queryParams).then(blob => {
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = `milk_in_out_store_${Date.now()}.xlsx`
link.click()
}).catch(err => {
ElMessage.error('导出失败:' + (err.message || err))
})
}
onMounted(() => getList())
</script>

View File

@ -0,0 +1,161 @@
<!-- index.vue (前端视图修改 resetQuery 以匹配正确字段) -->
<template>
<div class="app-container">
<el-form ref="queryRef" :model="queryParams" inline label-width="80px">
<el-form-item label="日期范围">
<el-date-picker v-model="dateRange" type="daterange" range-separator=""
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
</el-form-item>
<!-- 管理耳号变成输入框 -->
<el-form-item label="管理耳号">
<el-input v-model="queryParams.manageEarNo" placeholder="请输入管理耳号" clearable />
</el-form-item>
<!-- 厂区下拉框数据源来自字典 da_ranch -->
<el-form-item label="厂区">
<el-select v-model="queryParams.factory" clearable placeholder="请选择">
<el-option
v-for="d in ranchOptions"
:key="d.value"
:label="d.label"
:value="d.value" />
</el-select>
</el-form-item>
<!-- 班次只有 12 -->
<el-form-item label="班次">
<el-select v-model="queryParams.classes" clearable placeholder="请选择">
<el-option :value="1" label="1" />
<el-option :value="2" label="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row>
<el-button type="info" plain @click="handleImport" v-hasPermi="['milkProdclasses:milkProdclasses:import']">
<el-icon><Upload /></el-icon> 导入
</el-button>
<el-button type="warning" plain @click="handleExport" v-hasPermi="['milkProdclasses:milkProdclasses:export']">
<el-icon><Download /></el-icon> 导出
</el-button>
</el-row>
<el-table :data="tableData" v-loading="loading">
<el-table-column prop="datetime" label="日期" width="110" />
<el-table-column prop="manageEarNo" label="管理耳号" />
<el-table-column prop="electronicEarNo" label="电子耳号" />
<el-table-column prop="parity" label="胎次" />
<el-table-column prop="factory" label="厂区" />
<el-table-column prop="classes" label="班次" />
<el-table-column prop="milk" label="班次产奶量" />
<el-table-column prop="correctedMilk" label="班次校正奶量" />
</el-table>
<pagination v-show="total>0" :total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList" />
<!-- 导入弹窗 -->
<el-dialog title="Excel导入" v-model="openImport" width="400px">
<el-upload drag :action="uploadUrl" :headers="headers"
accept=".xls,.xlsx" :on-success="uploadSuccess" :on-error="uploadError">
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
<div>将文件拖到此处或<em>点击上传</em></div>
</el-upload>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { listMilkProdclasses, importMilkProdclasses, exportMilkProdclasses } from '@/api/dairyProducts/milkProdclasses/milkProdclasses'
import { getToken } from '@/utils/auth'
import { getRanchList } from '@/api/dairyProducts/ranch/ranch.js'
import { Upload, Download, UploadFilled } from '@element-plus/icons-vue';
const ranchOptions = ref([])
onMounted(() => {
getRanchList().then(res => {
ranchOptions.value = res.data.map(item => ({
label: item.ranchName,
value: item.ranchCode
}))
}).catch(err => {
console.error('获取厂区列表失败:', err)
})
})
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
manageEarNo: '', //
factory: null,
classes: null
})
const dateRange = ref([])
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const openImport = ref(false)
const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/milkProdclasses/milkProdclasses/import';
const headers = { Authorization: 'Bearer ' + getToken() };
function getList() {
loading.value = true
const [start, end] = dateRange.value || []
listMilkProdclasses({
datetimeStart: start,
datetimeEnd: end,
manageEarNo: queryParams.manageEarNo,
factory: queryParams.factory,
classes: queryParams.classes,
pageNum: queryParams.pageNum,
pageSize: queryParams.pageSize
}).then(res => {
tableData.value = res.rows
total.value = res.total
loading.value = false
}).catch(err => {
console.error('查询失败:', err);
loading.value = false;
});
}
function resetQuery() {
Object.assign(queryParams, { pageNum: 1, manageEarNo: '', factory: null, classes: null });
dateRange.value = [];
getList();
}
function handleImport() {
openImport.value = true;
}
function uploadSuccess(response) {
console.log('上传成功:', response);
openImport.value = false;
getList();
}
function uploadError(err) {
console.error('上传失败:', err);
}
function handleExport() {
const [start, end] = dateRange.value || [];
exportMilkProdclasses({
datetimeStart: start,
datetimeEnd: end,
manageEarNo: queryParams.manageEarNo, //
factory: queryParams.factory,
classes: queryParams.classes
});
}
getList();
</script>

View File

@ -7,48 +7,30 @@
border
stripe
>
<el-table-column
label="胎次"
align="center"
prop="parity"
width="120"
/>
<el-table-column
label="系数"
align="center"
prop="coef"
width="120"
/>
<el-table-column label="胎次" align="center" prop="parity" width="120" />
<el-table-column label="系数" align="center" prop="coef" width="120" />
</el-table>
</div>
</template>
<script setup name="ParityCorrection">
import { listParityCorrection } from '@/api/dairyProducts/parityCorrection/parityCorrection.js'
import { ref, onMounted } from 'vue'
const loading = ref(false)
const parityCorrectionList = ref([])
// 1-8
const fixedParityData = [
{ id: 1, parity: 1, coef: 1.2 },
{ id: 2, parity: 2, coef: 1.0 },
{ id: 3, parity: 3, coef: 0.96 },
{ id: 4, parity: 4, coef: 0.96 },
{ id: 5, parity: 5, coef: 1.0 },
{ id: 6, parity: 6, coef: 1.0 },
{ id: 7, parity: 7, coef: 1.0 },
{ id: 8, parity: 8, coef: 1.0 }
]
//
onMounted(() => {
function getList() {
loading.value = true
//
setTimeout(() => {
parityCorrectionList.value = fixedParityData
listParityCorrection().then(res => {
parityCorrectionList.value = res.rows || res.data || [] //
}).finally(() => {
loading.value = false
}, 500)
})
}
onMounted(() => {
getList()
})
</script>

View File

@ -0,0 +1,194 @@
<template>
<div class="app-container">
<!-- 查询条件 -->
<el-form :inline="true" :model="queryParams" class="filter-form">
<el-form-item label="耳号">
<el-input v-model="queryParams.manageEarTag" placeholder="请输入耳号" />
</el-form-item>
<el-form-item label="筛选天数">
<el-input-number v-model="queryParams.screenDays" :min="0" placeholder="请输入天数" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 操作按钮行 -->
<div class="button-group">
<el-button type="success" @click="handleExport">导出</el-button>
<el-popover
placement="bottom"
width="400"
trigger="click"
>
<el-checkbox-group v-model="selectedFields" class="checkbox-columns">
<el-checkbox
v-for="col in allColumns"
:key="col.prop"
:label="col.prop"
>{{ col.label }}</el-checkbox>
</el-checkbox-group>
<template #reference>
<el-button type="info">展示列</el-button>
</template>
</el-popover>
</div>
<!-- 数据表格 -->
<el-table :data="list" border style="width: 100%" v-loading="loading" :row-key="row => row.id">
<el-table-column
v-for="col in visibleColumns"
:key="col.prop"
:label="col.label"
:prop="col.prop"
:min-width="col.minWidth || 120"
/>
</el-table>
<!-- 分页 -->
<el-pagination
v-show="total > 0"
:total="total"
:current-page="queryParams.pageNum"
:page-size="queryParams.pageSize"
@current-change="handlePageChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[10, 20, 50, 100]"
/>
</div>
</template>
<script>
import { listSheepMilkAnalysis, exportSheepMilkAnalysis } from "@/api/dairyProducts/sheepMilkAnalysis/sheepMilkAnalysis.js";
export default {
name: "SheepMilkAnalysis",
data() {
return {
loading: false,
total: 0,
list: [],
queryParams: {
pageNum: 1,
pageSize: 10,
manageEarTag: null,
screenDays: null
},
selectedFields: [],
allColumns: [
{ label: "耳号", prop: "manageEarTag" },
{ label: "品种", prop: "variety" },
{ label: "挤奶时间", prop: "milkingDate" },
{ label: "干奶时间", prop: "dryDate" },
{ label: "筛选天数", prop: "screeningDays" },
{ label: "挤奶天数", prop: "milkingDays" },
{ label: "校正后最大胎次", prop: "maxCorrectedParity" },
{ label: "系统奶量之合计", prop: "systemMilkTotal" },
{ label: "校正奶量之合计", prop: "correctedMilkTotal" },
{ label: "校正日平均奶量", prop: "avgDailyCorrectedMilk" },
{ label: "胎次1的总产奶量", prop: "parity1TotalMilk" },
{ label: "胎次2的总产奶量", prop: "parity2TotalMilk" },
{ label: "胎次3的总产奶量", prop: "parity3TotalMilk" },
{ label: "胎次4的总产奶量", prop: "parity4TotalMilk" },
{ label: "胎次1的日平均产量", prop: "parity1AvgDailyMilk" },
{ label: "胎次2的日平均产量", prop: "parity2AvgDailyMilk" },
{ label: "胎次3的日平均产量", prop: "parity3AvgDailyMilk" },
{ label: "胎次4的日平均产量", prop: "parity4AvgDailyMilk" },
{ label: "泌乳天数", prop: "lactationDays" },
{ label: "过去7日日平均奶量", prop: "past7DaysAvgMilk" },
{ label: "校正过去7日日平均奶量", prop: "past7DaysAvgCorrectedMilk" },
{ label: "过去14日日平均奶量", prop: "past14DaysAvgMilk" },
{ label: "过去30日日平均奶量", prop: "past30DaysAvgMilk" },
{ label: "羊只类型", prop: "sheepType" },
{ label: "生日", prop: "birthDate" },
{ label: "当前胎次", prop: "currentParity" },
{ label: "月龄", prop: "ageMonths" },
{ label: "当前体重", prop: "currentWeight" },
{ label: "繁育状态", prop: "breedStatus" },
{ label: "父号", prop: "fatherTag" },
{ label: "母号", prop: "motherTag" },
{ label: "牧场名称", prop: "ranchName" },
{ label: "家系", prop: "familyLine" },
{ label: "母亲挤奶天数", prop: "motherMilkingDays" },
{ label: "母亲校正奶量之合计", prop: "motherCorrectedMilkTotal" },
{ label: "母亲校正后最大胎次", prop: "motherMaxCorrectedParity" },
{ label: "母亲校正日平均奶量", prop: "motherAvgDailyCorrectedMilk" }
]
};
},
created() {
this.selectedFields = this.allColumns.map(c => c.prop);
this.getList();
},
computed: {
visibleColumns() {
return this.allColumns.filter(col => this.selectedFields.includes(col.prop));
}
},
methods: {
getList() {
this.loading = true;
listSheepMilkAnalysis(this.queryParams).then(response => {
this.list = response.rows;
this.total = response.total;
this.loading = false;
});
},
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
resetQuery() {
this.queryParams = {
pageNum: 1,
pageSize: 10,
manageEarTag: null,
screenDays: null
};
this.selectedFields = this.allColumns.map(c => c.prop);
this.getList();
},
handlePageChange(pageNum) {
this.queryParams.pageNum = pageNum;
this.getList();
},
handleSizeChange(pageSize) {
this.queryParams.pageSize = pageSize;
this.getList();
},
handleExport() {
exportSheepMilkAnalysis(this.queryParams).then(response => {
const blob = new Blob([response], { type: 'application/vnd.ms-excel' });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', '羊奶分析数据.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}
}
};
</script>
<style scoped>
.filter-form .el-form-item {
margin-right: 15px;
}
.button-group {
margin-bottom: 10px;
}
.checkbox-columns {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-height: 300px;
overflow-y: auto;
}
</style>

View File

@ -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>