ChickenFarm/UI/VB.VUE/src/views/report/batchDay/index.vue

<script setup lang="ts">
import BatchModal from "@/views/common/modal/batchModal.vue"
import dayjs from "dayjs"
import apis from "@/api/breeding"  
import type{Header} from "@/components/table/models"
const headers = ref<Header[]>([
	{
		field: "recordDate",
		name: "记录日期",
		visible: true,
		isSort: false,
		tooltip: true,
		width: "100px",
	},
	{
		field: "周龄",
		name: "周龄",
		visible: true,
		isSort: false,
		tooltip: true,
		width: "230px",
		children: [
			{
				field: "dayCount",
				name: "天",
				visible: true,
				isSort: false,
				width: "50px",
				tooltip: true,
			},
			{
				field: "weekAge",
				name: "生长周龄",
				visible: true,
				isSort: false,
				width: "80px",
				tooltip: true
			},
			{
				field: "layingWeekAge",
				name: "产蛋周龄",
				visible: true,
				isSort: false,
				width: "80px",
				tooltip: true
			}
		]
	},
	{
		field: "存栏鸡数", name: "存栏鸡数", visible: true, isSort: false, width:"300px",
		children: [
			{
				field: "chicken1Count",
				name: "母鸡",
				visible: true,
				isSort: false,
				width: "100px",
				tooltip: true
			},
			{
				field: "chicken0Count",
				name: "公鸡",
				visible: true,
				isSort: false,
				width: "100px",
				tooltip: true
			},
			{
				field: "chicken2Count",
				name: "未知",
				visible: true,
				isSort: false,
				width: "100px",
				tooltip: true
			},
			{
				field: "chickenCountTotal",
				name: "合计",
				visible: true,
				isSort: false,
				width: "100px",
				tooltip: true
			}
		]
	},
	{ field: "maleFemaleRatio", name: "公母比例(%)", visible: true, isSort: false, tooltip: true, width: "80px" },
	{
		field: "母鸡死淘",
		name: `母鸡死淘`,
		width: "600px",
		children: [
			{
				field: "母鸡死淘数量",
				name: "母鸡死淘数量",
				visible: true,
				isSort: false,
				width: "500px",
				tooltip: true,
				children: [
					{
						field: "death1",
						name: "死亡",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "cull1",
						name: "淘汰",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "packageCull1",
						name: "打包淘汰",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "deathCullTotal1",
						name: "合计",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "deathCullRate1",
						name: "死淘率(%)",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			},
			{
				field: '累计',
				name: '累计',
				visible: true,
				isSort: false,
				width: "100px",
				children: [
					{
						field: "accumCullTotal1",
						name: "死淘",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "accumCullRate1",
						name: "死淘率(%)",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			}
		]
	},
	{
		field: "公鸡死淘",
		name: `公鸡死淘`,
		width: "600px",
		children: [
			{
				field: "公鸡死淘数量",
				name: "公鸡死淘数量",
				visible: true,
				isSort: false,
				width: "500px",
				tooltip: true,
				children: [
					{
						field: "death0",
						name: "死亡",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "cull0",
						name: "淘汰",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "packageCull0",
						name: "打包淘汰",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "deathCullTotal0",
						name: "合计",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "deathCullRate0",
						name: "死淘率(%)",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			},
			{
				field: '累计',
				name: '累计',
				visible: true,
				isSort: false,
				width: "100px",
				children: [
					{
						field: "accumCullTotal0",
						name: "死淘",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "accumCullRate0",
						name: "死淘率(%)",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			}
		]
	},
	{
		field: "未知死淘",
		name: `未知死淘`,
		width: "600px",
		children: [
			{
				field: "未知死淘数量",
				name: "未知死淘数量",
				visible: true,
				isSort: false,
				width: "500px",
				tooltip: true,
				children: [
					{
						field: "death2",
						name: "死亡",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "cull2",
						name: "淘汰",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "packageCull2",
						name: "打包淘汰",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "deathCullTotal2",
						name: "合计",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "deathCullRate2",
						name: "死淘率(%)",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			},
			{
				field: '累计',
				name: '累计',
				visible: true,
				isSort: false,
				width: "100px",
				children: [
					{
						field: "accumCullTotal2",
						name: "死淘",
						visible: true,
						isSort: false,
						width: "100px",
					}, {
						field: "accumCullRate2",
						name: "死淘率(%)",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			}
		]
	},
	{
		field: "耗料",
		name: "耗料",
		visible: true,
		isSort: false,
		width: "900px",
		children: [
			{
				field: "耗料量(g)",
				name: "耗料量(g)",
				visible: true,
				isSort: false,
				width: "250px",
				children: [
					{
						field: "poultDailyFeed1",
						name: "母鸡",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "poultDailyFeed0",
						name: "公鸡",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "poultDailyFeed2",
						name: "未知",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "poultDailyFeedTotal	",
						name: "合计",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			},
			{
				field: "耗料量/只/日(g)",
				name: "耗料量/只/日(g)",
				visible: true,
				isSort: false,
				width: "250px",
				children: [
					{
						field: "poultDailyFeedAvg1",
						name: "母鸡",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "poultDailyFeedAvg0",
						name: "公鸡",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "poultDailyFeedAvg2",
						name: "未知",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			},
			{
				field: "feed1",
				name: "母鸡喂料",
				visible: true,
				isSort: false,
				width: "200px",
				tooltip: true,
			},
			{
				field: "feed0",
				name: "公鸡喂料",
				visible: true,
				isSort: false,
				width: "200px",
				tooltip: true,
			},
			{
				field: "feed2",
				name: "未知喂料",
				visible: true,
				isSort: false,
				width: "200px",
				tooltip: true,
			}
		]
	},
	{
		field: "日体重数据",
		name: "日体重数据",
		visible: true,
		isSort: false,
		width: "900px",
		children: [
			{
				field: "实际母鸡",
				name: "实际母鸡",
				visible: true,
				isSort: false,
				width: "100px",
				children: [
					{
						field: "weight1",
						name: "体重",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "uniformity1",
						name: "均匀度(%)",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			},
			{
				field: "实际公鸡",
				name: "实际公鸡",
				visible: true,
				isSort: false,
				width: "100px",
				children: [
					{
						field: "weight0",
						name: "体重",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "uniformity0",
						name: "均匀度(%)",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			},
			{
				field: "实际未知",
				name: "实际未知",
				visible: true,
				isSort: false,
				width: "100px",
				children: [
					{
						field: "weight2",
						name: "体重",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "uniformity2",
						name: "均匀度(%)",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			},
			{
				field: "母系标准体重",
				name: "母系标准体重",
				visible: true,
				isSort: false,
				width: "100px",
				children: [
					{
						field: "standardWeight1",
						name: "母鸡",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "standardWeight0",
						name: "公鸡",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "standardWeight2",
						name: "未知",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			}
		]
	},
	{
		field: "产蛋情况",
		name: "产蛋情况",
		visible: true,
		isSort: false,
		width: "auto",
		children: [
			{
				field: "totalEggs",
				name: "总产蛋数",
				visible: true,
				isSort: false,
				width: "100px",
			},
			{
				field: "eggCount0",
				name: "上缴种蛋",
				visible: true,
				isSort: false,
				width: "100px",
			},
			{
				field: "商品蛋",
				name: "商品蛋",
				visible: true,
				isSort: false,
				width: "100px",
				children: [
					{
						field: "eggCount1",
						name: "纯系种蛋",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "eggCount2",
						name: "祖代蛋",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "eggCount3",
						name: "父母代蛋",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "eggCount4",
						name: "菜蛋",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "eggCount5",
						name: "畸形蛋",
						visible: true,
						isSort: false,
						width: "100px",
					},
					{
						field: "eggCount6",
						name: "破蛋",
						visible: true,
						isSort: false,
						width: "100px",
					}
				]
			},
			{
				field: "eggWeight",
				name: "实际蛋重(g)",
				visible: true,
				isSort: false,
				width: "100px",
			}
		]
	}
]);
// 初始化默认日期范围为最近一个月
const getDefaultDateRange = () => {
    const endDate = dayjs()
    const startDate = endDate.subtract(1, 'month')
    return [startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD')]
}

 
const formData = ref({
	batchNum: "",
	recordDate: "",
    dateRange: getDefaultDateRange(),
	params: {},
	type: 0
})

// 批次选择模态框相关
const batchModalRef = ref()
const selectedBatch = ref("")

// 打开批次选择模态框
function openBatchModal() {
    batchModalRef.value?.open()
}

// 批次选择确认回调
function onBatchConfirm(batches: any[]) {
    if (batches && batches.length > 0) {
        selectedBatch.value = batches[0].batchNum
        formData.value.batchNum = selectedBatch.value
    }
}

// 育种场信息数据
const batchInfo = ref({
    batchNum: "",
    chickenCount0: "",
    chickenCount1: "",
    chickenCount2: "",
    factoryName: "",
    coopNames: "",
    lineage: "",
    generation: "",
    hatchDate: "",
    source: "",
})
const reportDataItems=ref([])
// 查询处理函数
function handleSearch() {
    console.log('执行查询操作，批次号:', formData.value.batchNum)
    console.log('日期范围:', formData.value.dateRange)
    formData.value.params = {
        beginRecordDate: formData.value.dateRange[0],
        endRecordDate: formData.value.dateRange[1]
    }
    if(!formData.value.batchNum) {
        message.msgError("请选择批次")
        return
    }
    apis.batchDayStatisticsApi.getBatchDetail(formData.value.batchNum).then((res: any) => {
        console.log(res)
        batchInfo.value = res.data
    })  
    apis.batchDayStatisticsApi.listQuery(formData.value).then((res: any) => {
        console.log(res)
        reportDataItems.value = res.data
    })
    // 这里可以添加实际的查询逻辑
    // 例如调用API获取数据等
}

 

// 导出处理函数
function handleExport() {
    console.log('导出报表，批次号:', formData.value.batchNum)
    if(!formData.value.batchNum) {
        message.msgError("请选择批次")
        return
    }
    
   formData.value.params = {
        beginRecordDate: formData.value.dateRange[0],
        endRecordDate: formData.value.dateRange[1]
    }
    
    apis.batchDayStatisticsApi.export(formData.value, formData.value.batchNum + "日报表.xlsx").then((res: any) => {
        console.log(res)
        message.msgSuccess("导出成功")
    }).catch((error: any) => {
        console.error("导出失败:", error)
        message.msgError("导出失败")
    })
}

function handleGenerateReport(type) {
    if(!formData.value.batchNum) {
        message.msgError("请选择批次")
        return
    }
	formData.value.recordDate = formData.value.dateRange[1]
	formData.value.type = type
    apis.batchDayStatisticsApi.genReportFun(formData.value).then(() => {
        message.msgSuccess("生成成功")
    })
}

// 日期格式化函数
const formatDate = (row, column, cellValue) => {
  return dayjs(cellValue).format('YYYY/MM/DD')
}

 

// 单元格样式
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  // 日期列居中对齐
  if (columnIndex === 0) {  // 日期列
    return { textAlign: 'center' }
  }
  // 数字列右对齐
  if (columnIndex >= 3) {  // 从第4列开始右对齐
    return { textAlign: 'right' }
  }
  return { textAlign: 'center' }
}

// 将函数暴露给模板使用
defineExpose({
  formatDate,
  //headerCellStyle,
  cellStyle
})
</script>
<template>
   <div class="app-container py-5">
      <div
			class="w-100 d-flex flex-column align-items-center mx-auto"
			:style="{ maxWidth: 1500 + 'px' }">
        <div class="header d-flex justify-content-center align-items-center mb-10">
            <el-form :model="formData" label-width="auto" :inline="true" style="margin-left: 20px">
               <el-form-item label="批次" prop="batchNum">
                                    <el-input v-model="formData.batchNum" placeholder="请选择批次" readonly>
                                        <template #append>
                                            <el-button @click="openBatchModal">选择</el-button>
                                        </template>
                                    </el-input>
               </el-form-item>
               <el-form-item label="日期范围" prop="dateRange">
                   <el-date-picker
                       v-model="formData.dateRange"
                       type="daterange"
                       range-separator="至"
                       start-placeholder="开始日期"
                       end-placeholder="结束日期"
                       value-format="YYYY-MM-DD"
                       format="YYYY-MM-DD"
                       style="width: 220px;">
                   </el-date-picker>
               </el-form-item>
               <el-form-item>
                   <el-button type="primary" @click="handleSearch">查询</el-button>
                   <el-button type="warning" @click="handleExport">导出</el-button>
                   <div class="hidden-buttons-container">
                       <el-button type="success" @click="handleGenerateReport(0)">生成日报表0</el-button>
                       <el-button type="success" @click="handleGenerateReport(1)">生成日报表1</el-button>
                   </div>
               </el-form-item>           
           </el-form>
        </div>  
        
      </div>
      
      <!-- 批次选择模态框 -->
    
	 
	 <!-- 育种场信息表格 -->
	 <div class="farm-info-container">
	    <table class="table table-bordered farm-info-table">
	      <tbody>
	        <tr>
                <th rowspan="3">{{ batchInfo.factoryName }}<br>日报表</th>
                <th>鸡场</th>
                <th class="important-cell">弥勒{{ batchInfo.factoryName }}</th>
                <th>批号</th>
                <th  class="important-cell">{{ batchInfo.batchNum }}</th>
                <th>5%产蛋周龄</th>
                <th  class="important-cell"></th>
                <th>育雏舍</th>
                <th class="important-cell"></th>
            </tr>
             <tr>
                <th>品种</th>
                <th class="important-cell">{{ batchInfo.lineage }}系</th>
                <th>栋号</th>
                <th class="important-cell">{{ batchInfo.coopNames }}</th>
                <th>母鸡进苗数</th>
                <th class="important-cell">{{ batchInfo.chickenCount1 }}</th>
                <th>育成舍</th>
                <th class="important-cell"></th>
            </tr>
             <tr>
                <th>来源</th>
                <th class="important-cell">{{ batchInfo.source }}</th>
                <th>进鸡日期</th>
                <th class="important-cell">{{dayjs(batchInfo.hatchDate).isValid() ? dayjs(batchInfo.hatchDate).format("YYYY年MM月DD日") : "-" }}</th>
                <th>公鸡进苗数</th>
                <th class="important-cell">{{ batchInfo.chickenCount0 }}</th>
                <th>产蛋舍</th>
                <th class="important-cell"></th>
            </tr>
	      </tbody>
	    </table>
	 </div>
	 
	 <!-- 使用 Element Plus 的 el-table 替换原生表格 -->
	 <div class="table-container">
		<vb-data-table
				:columns="headers"
				:data="reportDataItems"
				ref="tableRef"
				keyField="id"
				:no-page="true"
				:fixed-number="9"
				:scroll="{ x: 5100 }"
				:check-multiple="false"
				:show-toolbar="false">
				<template #recordDate="{ row }">
					{{ dayjs(row.recordDate).format("YYYY-MM-DD") }}
				</template>
			<template #poultDailyFeedTotal="{ row }">
				{{ (row.poultDailyFeed0 || 0) + (row.poultDailyFeed1 || 0) + (row.poultDailyFeed2 || 0) }}
			</template>
        </vb-data-table>
	 </div>
	</div>
      <BatchModal ref="batchModalRef" :multiple="false" @confirm="onBatchConfirm" />
</template>
<style scoped>
	.table-container {
	  overflow-x: auto;
	  scrollbar-width: thin;
	  scrollbar-color: #a0cfff #f1f1f1;
	  border-radius: 8px;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	  margin: 20px 0;
	}
	
	
	.table {
	  min-width: 100%;
	  border-collapse: separate;
	  border-spacing: 0;
	  width: 100%;
	  border-radius: 8px;
	  overflow: hidden;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
	}
	
	.table th,
	.table td {
	  padding: 12px 15px;
	  text-align: center;
	  white-space: nowrap;
	  border-right: 1px solid #d0d7e0;
	  border-bottom: 1px solid #d0d7e0;
	}
	
	.table th {
	  background-color: #e6f0ff;
	  color: #2c5aa0;
	  font-weight: 600;
	  text-transform: uppercase;
	  letter-spacing: 0.5px;
	  font-size: 13px;
	  /* 垂直居中对齐 */
	  vertical-align: middle;
	}
	
	.table td {
	  /* 垂直居中对齐 */
	  vertical-align: middle;
	}
	
	.table th:last-child,
	.table td:last-child {
	  border-right: none;
	}
	
	/* 斑马纹样式 */
	.table tbody tr:nth-child(even) {
	  background-color: #fafcff;
	}
	
	/* 悬停效果 */
	.table tbody tr:hover {
	  background-color: #f0f7ff;
	  transition: background-color 0.2s ease;
	}
	
	/* 表头第一行特殊样式 */
	.table thead tr:first-child th {
	  background-color: #d1e4ff;
	}
	
	/* 数字列右对齐 */
	.table td:nth-child(n+10) {
	  text-align: right;
	}
	/* 育种场信息表格样式 */
	.farm-info-container {
	  margin: 10px auto;
	}
	
	/* 隐藏按钮容器样式 */
	.hidden-buttons-container {
	  position: fixed;
	  right: 0;
	  top: 50%;
	  transform: translateY(-50%);
	  z-index: 1000;
	  padding: 10px 0;
	  background: rgba(255, 255, 255, 0.95);
	  border-radius: 8px 0 0 8px;
	  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	  opacity: 0;
	  transition: opacity 0.3s ease;
	}

	.hidden-buttons-container:hover {
	  opacity: 1;
	}

	.hidden-buttons-container .el-button {
	  display: block;
	  width: 50px;
	  height: 50px;
	  margin: 5px 10px;
	  padding: 0;
	  border-radius: 50%;
	  opacity: 0;
	  transition: all 0.3s ease;
	  transform: translateX(100%);
	}

	.hidden-buttons-container:hover .el-button {
	  transform: translateX(0);
	  opacity: 1;
	}

	.hidden-buttons-container .el-button:first-child {
	  margin-bottom: 10px;
	}
	
	.farm-info-table {
	  width: 100%;
	  border-collapse: separate;
	  border-spacing: 0;
	  background-color: #ffffff;
	  font-size: 13px;
      border:1px solid #d0d7e0;
	}
	
	.farm-info-table td {
	  padding: 6px 10px;
	  text-align: center;
	  border-right: 1px solid #d0d7e0;
	  border-bottom: 1px solid #d0d7e0;
	  vertical-align: middle;
	}
	
	.farm-info-table td:last-child {
	  border-right: none;
	}
	
	.farm-info-table tr:last-child td {
	  border-bottom: none;
	}
	
	/* 合并单元格的背景色 */
	.farm-info-table td[rowspan],
	.farm-info-table td[colspan] {
	  background-color: #fafdff;
	  font-weight: 500;
	}
	
	/* 数据单元格的样式 */
	.farm-info-table td:not([rowspan]):not([colspan]) {
	  background-color: #ffffff;
	  text-align: center;
	}
	
	/* 需要从后端获取数据的列样式（实际第3、5、7、9列） */
	 
	/* 第1行 */
	.important-cell {
	  background-color: #fffefe !important;
	  font-weight: 600;
	  color: #3d4144 !important;
	  border-radius: 4px;
	  padding: 4px 8px;
	}
</style>