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

<script setup lang="ts">
import BatchModal from "@/views/common/modal/batchModal.vue"
import dayjs from "dayjs"
import apis from "@/api/breeding"  

// 初始化默认日期范围为最近一个月
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>
				     <el-button type="success" @click="handleGenerateReport(0)">生成日报表0</el-button>
					   <el-button type="success" @click="handleGenerateReport(1)">生成日报表1</el-button>
               </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).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">
	   <el-table 
	     :data="reportDataItems" 
	     border 
	     :style="{ width: '100%' }" 
	     :height="600"
	     :header-cell-style="{ backgroundColor: '#e6f0ff', color: '#2c5aa0', fontWeight: 600, textAlign: 'center', border: '1px solid #d0d7e0' } "
	     :cell-style="{ border: '1px solid #d0d7e0', textAlign: 'center' }"
	     highlight-current-row :native-scrollbar="true">
	     <!-- 固定列：日期 -->
	     <el-table-column prop="recordDate" label="日期" fixed width="100" :formatter="formatDate">
	     </el-table-column>
	     
	     <!-- 周龄分组 -->
	     <el-table-column label="周龄"  fixed  :colspan="3">
	       <el-table-column prop="dayCount" label="天" width="60" ></el-table-column>
	       <el-table-column prop="weekAge" label="生长周龄" width="80" ></el-table-column>
	       <el-table-column prop="layingWeekAge" label="产蛋周龄" width="80" ></el-table-column>
	     </el-table-column>
	     
	     <!-- 存栏鸡数分组 -->
	     <el-table-column label="存栏鸡数" fixed :colspan="4">
	       <el-table-column prop="chicken1Count" label="母鸡" width="80" ></el-table-column>
	       <el-table-column prop="chicken0Count" label="公鸡" width="80" ></el-table-column>
	       <el-table-column prop="chicken2Count" label="未知" width="80" ></el-table-column>
	       <el-table-column prop="chickenCountTotal" label="合计" width="80" ></el-table-column>
	     </el-table-column>
	     
	     <!-- 公母比例(%) - 固定列 -->
	     <el-table-column prop="maleFemaleRatio" label="公母比例(%)" fixed width="80" ></el-table-column>
	     
	     <!-- 母鸡死淘分组 -->
	     <el-table-column label="母鸡死淘" :colspan="7">
	       <el-table-column label="母鸡死淘数量" :colspan="5">
	         <el-table-column prop="death1" label="死亡" width="80"></el-table-column>
	         <el-table-column prop="cull1" label="淘汰" width="80"></el-table-column>
	         <el-table-column prop="packageCull1" label="打包淘汰" width="100"></el-table-column>
	         <el-table-column prop="deathCullTotal1" label="合计" width="80"></el-table-column>
	         <el-table-column prop="deathCullRate1" label="死淘率(%)" width="100"></el-table-column>
	       </el-table-column>
	       <el-table-column label="累计" :colspan="2">
	         <el-table-column prop="accumCullTotal1" label="死淘" width="80"></el-table-column>
	         <el-table-column prop="accumCullRate1" label="死淘率(%)" width="100"></el-table-column>
	       </el-table-column>
	     </el-table-column>
	     
	     <!-- 公鸡死淘分组 -->
	     <el-table-column label="公鸡死淘" :colspan="7">
	       <el-table-column label="公鸡死淘数量" :colspan="5">
	         <el-table-column prop="death0" label="死亡" width="80"></el-table-column>
	         <el-table-column prop="cull0" label="淘汰" width="80"></el-table-column>
	         <el-table-column prop="packageCull0" label="打包淘汰" width="100"></el-table-column>
	         <el-table-column prop="deathCullTotal0" label="合计" width="80"></el-table-column>
	         <el-table-column prop="deathCullRate0" label="死淘率(%)" width="100"></el-table-column>
	       </el-table-column>
	       <el-table-column label="累计" :colspan="2">
	         <el-table-column prop="accumCullTotal0" label="死淘" width="80"></el-table-column>
	         <el-table-column prop="accumCullRate0" label="死淘率(%)" width="100"></el-table-column>
	       </el-table-column>
	     </el-table-column>
	     
	     <!-- 未知鸡死淘分组 -->
	     <el-table-column label="未知鸡死淘" :colspan="7">
	       <el-table-column label="未知死淘数量" :colspan="5">
	         <el-table-column prop="death2" label="死亡" width="80"></el-table-column>
	         <el-table-column prop="cull2" label="淘汰" width="80"></el-table-column>
	         <el-table-column prop="packageCull2" label="打包淘汰" width="100"></el-table-column>
	         <el-table-column prop="deathCullTotal2" label="合计" width="80"></el-table-column>
	         <el-table-column prop="deathCullRate2" label="死淘率(%)" width="100"></el-table-column>
	       </el-table-column>
	       <el-table-column label="累计" :colspan="2">
	         <el-table-column prop="accumCullTotal2" label="死淘" width="80"></el-table-column>
	         <el-table-column prop="accumCullRate2" label="死淘率(%)" width="100"></el-table-column>
	       </el-table-column>
	     </el-table-column>
	     
	     <!-- 耗料分组 -->
	     <el-table-column label="耗料" :colspan="17">
	       <el-table-column label="耗料量(g)" :colspan="4">
	         <el-table-column prop="poultDailyFeed1" label="母鸡" width="80"></el-table-column>
	         <el-table-column prop="poultDailyFeed0" label="公鸡" width="80"></el-table-column>
	         <el-table-column prop="poultDailyFeed2" label="未知" width="80"></el-table-column>
	         <el-table-column label="合计" width="80">
	           <template #default="scope">
	             {{ (scope.row.poultDailyFeed0 || 0) + (scope.row.poultDailyFeed1 || 0) + (scope.row.poultDailyFeed2 || 0) }}
	           </template>
	         </el-table-column>
	       </el-table-column>
	       <el-table-column label="耗料量/只/日(g)" :colspan="3">
	         <el-table-column prop="poultDailyFeedAvg1" label="母鸡" width="80"></el-table-column>
	         <el-table-column prop="poultDailyFeedAvg0" label="公鸡" width="80"></el-table-column>
	         <el-table-column prop="poultDailyFeedAvg2" label="未知" width="80"></el-table-column>
	       </el-table-column>
	       <el-table-column label="耗料量/只/日(g)" :colspan="3">
	         <el-table-column prop="poultDailyFeedStandard1" label="母鸡" width="80"></el-table-column>
	         <el-table-column prop="poultDailyFeedStandard0" label="公鸡" width="80"></el-table-column>
	         <el-table-column prop="poultDailyFeedStandard2" label="未知" width="80"></el-table-column>
	       </el-table-column>
	       <el-table-column label="累计耗料量(g)" :colspan="4">
	         <el-table-column prop="accumFeedAmount1" label="母鸡" width="80"></el-table-column>
	         <el-table-column prop="accumFeedAmount0" label="公鸡" width="80"></el-table-column>
	         <el-table-column prop="accumFeedAmount2" label="未知" width="80"></el-table-column>
	         <el-table-column label="合计" width="80">
	           <template #default="scope">
	             {{ (scope.row.accumFeedAmount0 || 0) + (scope.row.accumFeedAmount1 || 0) + (scope.row.accumFeedAmount2 || 0) }}
	           </template>
	         </el-table-column>
	       </el-table-column>
	       <el-table-column prop="feed1" label="母鸡喂料种类" width="120"></el-table-column>
	       <el-table-column prop="feed0" label="公鸡喂料种类" width="120"></el-table-column>
	       <el-table-column prop="feed2" label="未知喂料种类" width="120"></el-table-column>
	     </el-table-column>
	     
	     <!-- 日体重数据分组 -->
	     <el-table-column label="日体重数据" :colspan="9">
	       <el-table-column label="实际母鸡" :colspan="2">
	         <el-table-column prop="weight1" label="体重" width="80"></el-table-column>
	         <el-table-column prop="uniformity1" label="均匀度(%)" width="100"></el-table-column>
	       </el-table-column>
	       <el-table-column label="实际公鸡" :colspan="2">
	         <el-table-column prop="weight0" label="体重" width="80"></el-table-column>
	         <el-table-column prop="uniformity0" label="均匀度(%)" width="100"></el-table-column>
	       </el-table-column>
	       <el-table-column label="实际未知" :colspan="2">
	         <el-table-column prop="weight2" label="体重" width="80"></el-table-column>
	         <el-table-column prop="uniformity2" label="均匀度(%)" width="100"></el-table-column>
	       </el-table-column>
	       <el-table-column label="母系标准体重" :colspan="3">
	         <el-table-column prop="standardWeight1" label="母鸡" width="80"></el-table-column>
	         <el-table-column prop="standardWeight0" label="公鸡" width="80"></el-table-column>
	         <el-table-column prop="standardWeight2" label="未知" width="80"></el-table-column>
	       </el-table-column>
	     </el-table-column>
	     
	     <!-- 产蛋情况分组 -->
	     <el-table-column label="产蛋情况" :colspan="9">
	       <el-table-column prop="totalEggs" label="总产蛋数" width="100"></el-table-column>
	       <el-table-column prop="eggCount0" label="上缴种蛋" width="100"></el-table-column>
	       <el-table-column label="商品蛋" :colspan="6">
	         <el-table-column prop="eggCount1" label="纯系种蛋" width="100"></el-table-column>
	         <el-table-column prop="eggCount2" label="祖代蛋" width="100"></el-table-column>
	         <el-table-column prop="eggCount3" label="父母代蛋" width="100"></el-table-column>
	         <el-table-column prop="eggCount4" label="菜蛋" width="100"></el-table-column>
	         <el-table-column prop="eggCount5" label="畸形蛋" width="100"></el-table-column>
	         <el-table-column prop="eggCount6" label="破蛋" width="100"></el-table-column>
	       </el-table-column>
	       <el-table-column prop="eggWeight" label="实际蛋重(g)" width="100"></el-table-column>
	     </el-table-column>
	   </el-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;
	  border-radius: 8px;
	  overflow: hidden;
	  max-width: 1200px;
	  width: 100%;
     
	}
	
	.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>