报表

src/api/erf/erf.js

@@ -185,3 +185,22 @@ export const batchDeleteRawMaterial = data => createAPI(`/erf/rawMaterial/batchD
  * 根据物料编码查询物料描述（从part表）
  */
 export const getPartDescByPartNo = data => createAPI(`/erf/rawMaterial/getPartDescByPartNo`, 'post', data)
+
+// =====================================================
+// 样品完成周期报表 API接口定义
+// =====================================================
+
+/**
+ * 查询样品完成周期报表列表（分页）
+ */
+export const getSampleCycleReportList = data => createAPI(`/erf/sampleCycleReport/list`, 'post', data)
+
+// =====================================================
+// 审批周期报表 API接口定义
+// =====================================================
+
+/**
+ * 查询审批周期报表列表（分页）
+ * 统计从申请单发起日到三类经理（技术/生产/质量）全部审批完成的周期
+ */
+export const getApprovalCycleReportList = data => createAPI(`/erf/approvalCycleReport/list`, 'post', data)

src/views/modules/erf/approvalCycleReport.vue

@@ -0,0 +1,750 @@
+<template>
+  <div class="mod-config approval-cycle-report-page">
+    <!-- 查询条件表单 -->
+    <el-form :inline="true" label-position="top" class="query-form">
+      <el-form-item label="申请单号">
+        <el-input
+          v-model="queryHeaderData.applyNo"
+          placeholder="请输入申请单号"
+          clearable
+          style="width: 150px">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="事业部">
+        <el-select
+          v-model="queryHeaderData.buNo"
+          placeholder="请选择"
+          clearable
+          style="width: 120px">
+          <el-option label="全部" value=""></el-option>
+          <el-option label="RFID" value="RFID"></el-option>
+          <el-option label="RF" value="RF"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="试验类型">
+        <el-select
+          v-model="queryHeaderData.experimentType"
+          placeholder="请选择"
+          clearable
+          style="width: 120px">
+          <el-option label="全部" value=""></el-option>
+          <el-option label="High Risk" value="High Risk"></el-option>
+          <el-option label="Low Risk" value="Low Risk"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="申请人">
+        <el-input
+          v-model="queryHeaderData.creatorName"
+          placeholder="请输入申请人姓名"
+          clearable
+          style="width: 120px">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="发起日">
+        <el-date-picker
+          v-model="queryHeaderData.submitStartDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="开始日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="至">
+        <el-date-picker
+          v-model="queryHeaderData.submitEndDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="结束日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="审批完成日">
+        <el-date-picker
+          v-model="queryHeaderData.allApproveStartDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="开始日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="至">
+        <el-date-picker
+          v-model="queryHeaderData.allApproveEndDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="结束日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="审批周期（天）">
+        <el-input
+          v-model="queryHeaderData.cycleDaysMin"
+          placeholder="最小值"
+          style="width: 90px">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="至">
+        <el-input
+          v-model="queryHeaderData.cycleDaysMax"
+          placeholder="最大值"
+          style="width: 90px">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label=" " style="margin-top: -11px">
+        <el-button @click="getDataList('Y')" type="primary" class="search-btn" plain>查询</el-button>
+        <el-button @click="resetQuery()" plain class="reset-btn">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 统计摘要 -->
+    <div class="summary-bar" v-if="dataList.length > 0">
+      <span>共 <b>{{ totalPage }}</b> 条记录，</span>
+      <span>已全部审批完成 <b>{{ allApprovedCount }}</b> 条，</span>
+      <span>审批中 <b>{{ totalPage - allApprovedCount }}</b> 条</span>
+      <span v-if="avgCycleDays !== null">，已完成平均审批周期 <b>{{ avgCycleDays }}</b> 天</span>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table
+      ref="dataTable"
+      @row-click="handleRowClick"
+      highlight-current-row
+      :data="dataList"
+      v-loading="dataListLoading"
+      border
+      class="data-table"
+      style="width: 100%;"
+      :height="tableHeight">
+
+      <el-table-column
+        prop="applyNo"
+        label="申请单号"
+        width="100"
+        align="center"
+        header-align="center"
+        show-overflow-tooltip>
+      </el-table-column>
+
+      <el-table-column
+        prop="title"
+        label="试验名称"
+        min-width="150"
+        align="left"
+        header-align="center"
+        show-overflow-tooltip>
+      </el-table-column>
+
+      <el-table-column
+        prop="buName"
+        label="事业部"
+        width="60"
+        align="center"
+        header-align="center">
+      </el-table-column>
+
+      <el-table-column
+        prop="experimentType"
+        label="试验类型"
+        width="80"
+        align="center"
+        header-align="center">
+      </el-table-column>
+
+      <el-table-column
+        prop="creatorName"
+        label="申请人"
+        width="70"
+        align="center"
+        header-align="center">
+      </el-table-column>
+
+      <el-table-column
+        prop="submitTime"
+        label="发起日"
+        width="100"
+        align="center"
+        header-align="center">
+        <template slot-scope="scope">
+          {{ formatDate(scope.row.submitTime) }}
+        </template>
+      </el-table-column>
+
+      <!-- 技术经理审批 -->
+      <el-table-column
+        label="技术经理审批"
+        header-align="center"
+        align="center">
+        <el-table-column
+          prop="techManagerName"
+          label="审批人"
+          width="70"
+          align="center"
+          header-align="center"
+          show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.techManagerName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="techApproveTime"
+          label="审批时间"
+          width="150"
+          align="center"
+          header-align="center">
+          <template slot-scope="scope">
+            <span :class="scope.row.techApproveTime ? '' : 'pending-text'">
+              {{ scope.row.techApproveTime || '待审批' }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table-column>
+
+      <!-- 生产经理审批 -->
+      <el-table-column
+        label="生产经理审批"
+        header-align="center"
+        align="center">
+        <el-table-column
+          prop="prodManagerName"
+          label="审批人"
+          width="70"
+          align="center"
+          header-align="center"
+          show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.prodManagerName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="prodApproveTime"
+          label="审批时间"
+          width="150"
+          align="center"
+          header-align="center">
+          <template slot-scope="scope">
+            <span :class="scope.row.prodApproveTime ? '' : 'pending-text'">
+              {{ scope.row.prodApproveTime || '待审批' }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table-column>
+
+      <!-- 质量经理审批 -->
+      <el-table-column
+        label="质量经理审批"
+        header-align="center"
+        align="center">
+        <el-table-column
+          prop="qualManagerName"
+          label="审批人"
+          width="70"
+          align="center"
+          header-align="center"
+          show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.qualManagerName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="qualApproveTime"
+          label="审批时间"
+          width="150"
+          align="center"
+          header-align="center">
+          <template slot-scope="scope">
+            <span :class="scope.row.qualApproveTime ? '' : 'pending-text'">
+              {{ scope.row.qualApproveTime || '待审批' }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table-column>
+
+      <el-table-column
+        prop="allApproveTime"
+        label="审批完成时间"
+        width="150"
+        align="center"
+        header-align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.allApproveTime">
+            {{ scope.row.allApproveTime }}
+          </span>
+          <span v-else class="pending-text">审批中</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="approvalCycleDays"
+        label="审批周期（天）"
+        width="130"
+        align="center"
+        header-align="center">
+        <template slot-scope="scope">
+          <el-tag
+            v-if="scope.row.approvalCycleDays !== null && scope.row.approvalCycleDays !== undefined"
+            :type="getCycleDaysTagType(scope.row.approvalCycleDays)"
+            size="small">
+            {{ scope.row.approvalCycleDays }} 天
+          </el-tag>
+          <span v-else class="pending-text">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="isAllApproved"
+        label="审批状态"
+        width="100"
+        align="center"
+        header-align="center">
+        <template slot-scope="scope">
+          <el-tag
+            :type="scope.row.isAllApproved ? 'success' : 'warning'"
+            size="small">
+            {{ scope.row.isAllApproved ? '已全部审批' : '审批中' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"
+      style="margin-top: 20px; text-align: right;">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { getApprovalCycleReportList } from '@/api/erf/erf'
+
+export default {
+  name: 'ApprovalCycleReport',
+
+  data() {
+    return {
+      // 查询条件
+      queryHeaderData: {
+        applyNo: '',
+        buNo: '',
+        experimentType: '',
+        creatorName: '',
+        submitStartDate: '',
+        submitEndDate: '',
+        allApproveStartDate: '',
+        allApproveEndDate: '',
+        cycleDaysMin: null,
+        cycleDaysMax: null,
+        status: '',
+        page: 1,
+        limit: 20
+      },
+
+      // 数据列表
+      dataList: [],
+
+      // 分页参数
+      pageIndex: 1,
+      pageSize: 20,
+      totalPage: 0,
+      dataListLoading: false,
+
+      // 表格高度
+      tableHeight: 500
+    }
+  },
+
+  computed: {
+    /**
+     * 已全部审批完成的记录数
+     */
+    allApprovedCount() {
+      return this.dataList.filter(item => item.isAllApproved).length
+    },
+
+    /**
+     * 已完成记录的平均审批周期（天）
+     */
+    avgCycleDays() {
+      const completedList = this.dataList.filter(
+        item => item.isAllApproved && item.approvalCycleDays !== null
+      )
+      if (completedList.length === 0) {
+        return null
+      }
+      const total = completedList.reduce((sum, item) => sum + item.approvalCycleDays, 0)
+      return Math.round(total / completedList.length)
+    }
+  },
+
+  activated() {
+    this.getDataList()
+    this.calculateTableHeight()
+  },
+
+  mounted() {
+    this.calculateTableHeight()
+    window.addEventListener('resize', this.calculateTableHeight)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calculateTableHeight)
+  },
+
+  methods: {
+    /**
+     * 获取审批周期报表列表
+     *
+     * @param {string} flag - 'Y'表示重置到第一页
+     */
+    getDataList(flag) {
+      if (flag === 'Y') {
+        this.pageIndex = 1
+      }
+
+      this.queryHeaderData.page = this.pageIndex
+      this.queryHeaderData.limit = this.pageSize
+
+      this.dataListLoading = true
+
+      getApprovalCycleReportList(this.queryHeaderData).then(({data}) => {
+        this.dataListLoading = false
+        if (data && data.code === 0) {
+          this.dataList = data.page.list || []
+          this.totalPage = data.page.totalCount || 0
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+          this.$message.error(data.msg || '查询失败')
+        }
+      }).catch(error => {
+        this.dataListLoading = false
+        this.$message.error('查询异常')
+      })
+    },
+
+    /**
+     * 重置查询条件
+     */
+    resetQuery() {
+      this.queryHeaderData = {
+        applyNo: '',
+        buNo: '',
+        experimentType: '',
+        creatorName: '',
+        submitStartDate: '',
+        submitEndDate: '',
+        allApproveStartDate: '',
+        allApproveEndDate: '',
+        cycleDaysMin: null,
+        cycleDaysMax: null,
+        status: '',
+        page: 1,
+        limit: 20
+      }
+      this.getDataList('Y')
+    },
+
+    /**
+     * 行点击事件
+     */
+    handleRowClick(row) {
+      this.$refs.dataTable.setCurrentRow(row)
+    },
+
+    /**
+     * 分页大小改变
+     */
+    sizeChangeHandle(val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+
+    /**
+     * 当前页改变
+     */
+    currentChangeHandle(val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+
+    /**
+     * 计算表格高度
+     */
+    calculateTableHeight() {
+      this.$nextTick(() => {
+        const windowHeight = window.innerHeight
+        const queryFormHeight = 160
+        const paginationHeight = 60
+        const summaryBarHeight = 40
+        const otherHeight = 100
+        this.tableHeight = windowHeight - queryFormHeight - paginationHeight - summaryBarHeight - otherHeight
+      })
+    },
+
+    /**
+     * 格式化日期显示（只显示日期部分，不显示时间）
+     *
+     * @param {string|Date} dateTime - 日期时间字符串或Date对象
+     * @returns {string} 格式化后的日期字符串
+     */
+    formatDate(dateTime) {
+      if (!dateTime) {
+        return ''
+      }
+      const str = String(dateTime)
+      // 截取日期部分（yyyy-MM-dd）
+      return str.substring(0, 10)
+    },
+
+    /**
+     * 根据审批周期天数获取标签颜色
+     * 1天以内：绿色（高效）
+     * 0-2天：蓝色（正常）
+     * 3-7天：橙色（偏慢）
+     * 7天以上：红色（过慢）
+     *
+     * @param {number} days - 审批周期天数
+     * @returns {string} Element UI tag类型
+     */
+    getCycleDaysTagType(days) {
+      if (days <= 1) {
+        return 'success'
+      } else if (days <= 2) {
+        return 'primary'
+      } else if (days <= 7) {
+        return 'warning'
+      } else {
+        return 'danger'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.approval-cycle-report-page {
+  padding: 0;
+}
+
+.query-form {
+  margin-bottom: 10px;
+}
+
+.summary-bar {
+  margin-bottom: 10px;
+  padding: 8px 12px;
+  background-color: #f0f9ff;
+  border: 1px solid #b3d8ff;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #606266;
+}
+
+.summary-bar b {
+  color: #409EFF;
+  font-size: 15px;
+}
+
+.pending-text {
+  color: #C0C4CC;
+  font-style: italic;
+}
+
+.data-table {
+  background-color: #fff;
+}
+
+/* 数据表格样式 */
+ .data-table {
+  background-color: #FFFFFF;
+  border-radius: 4px;
+}
+
+ .data-table >>> .el-table__header-wrapper th {
+  background-color: #F5F7FA !important;
+  color: #333333;
+  font-weight: 600;
+  font-size: 16px;
+  border-color: #EBEEF5;
+  padding: 10px 0;
+  height: auto;
+}
+
+/* 固定列表头也使用相同背景色 */
+ .data-table >>> .el-table__fixed-header-wrapper th {
+  background-color: #F5F7FA !important;
+  color: #333333;
+  font-weight: 600;
+  font-size: 16px;
+  border-color: #EBEEF5;
+  padding: 8px 0;
+  height: auto;
+}
+
+ .data-table >>> .el-table__header-wrapper .cell {
+  text-align: center;
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px !important;
+}
+
+ .data-table >>> .el-table__fixed-header-wrapper .cell {
+  text-align: center;
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+ .data-table >>> .el-table__body-wrapper td {
+  border-color: #EBEEF5;
+  padding: 8px 0;
+  font-size: 16px;
+  color: #606266;
+  height: auto;
+}
+
+/* 固定列数据行也使用相同样式 */
+ .data-table >>> .el-table__fixed-body-wrapper td {
+  border-color: #EBEEF5;
+  padding: 8px 0;
+  font-size: 16px;
+  color: #606266;
+  height: auto;
+}
+
+ .data-table >>> .el-table__body-wrapper .cell {
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px !important;
+   line-height: 18px;
+   height: 18px;
+}
+
+ .data-table >>> .el-table__fixed-body-wrapper .cell {
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 操作列链接样式 - 统一蓝色样式 */
+ .data-table >>> .el-table__body-wrapper a {
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 13px;
+  color: #409EFF !important;
+  white-space: nowrap;
+}
+
+ .data-table >>> .el-table__body-wrapper a:hover {
+  color: #66B1FF !important;
+  text-decoration: underline;
+}
+
+ .data-table >>> .el-table__body tr:hover > td {
+  background-color: #F5F7FA !important;
+}
+
+ .data-table >>> .el-table__body tr.current-row > td {
+  background-color: #ECF5FF !important;
+}
+.data-table >>> .el-tag--small {
+  height: 18px;
+  line-height: 16px;
+}
+/* 查询表单样式 */
+.query-form {
+  background-color: #FFFFFF;
+  padding: 15px 15px 5px 15px;
+  border-radius: 4px;
+}
+
+.query-form >>> .el-form-item__label {
+  color: #333333;
+  font-size: 13px;
+  padding-bottom: 5px;
+}
+
+.query-form >>> .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  font-size: 13px;
+}
+
+.query-form >>> .el-input__inner::placeholder {
+  color: #C0C4CC;
+  font-size: 13px;
+}
+
+.query-form >>> .el-select .el-input__inner {
+  border-radius: 4px;
+}
+
+.query-form >>> .el-date-editor .el-input__inner {
+  border-radius: 4px;
+}
+/* 按钮样式 - 扁平化风格 */
+.query-form >>> .el-button {
+  height: 32px;
+  padding: 0 15px;
+  font-size: 13px;
+  border-radius: 4px;
+}
+/* 查询按钮 - 蓝色扁平 */
+.search-btn {
+  background-color: #ECF5FF;
+  border-color: #B3D8FF;
+  color: #409EFF;
+}
+
+.search-btn:hover {
+  background-color: #409EFF;
+  border-color: #409EFF;
+  color: #FFFFFF;
+}
+
+/* 重置按钮 - 灰色扁平 */
+.reset-btn {
+  background-color: #F5F7FA;
+  border-color: #D3D4D6;
+  color: #606266;
+}
+
+.reset-btn:hover {
+  background-color: #909399;
+  border-color: #909399;
+  color: #FFFFFF;
+}
+</style>

src/views/modules/erf/components/expApplyForm.vue

@@ -176,7 +176,7 @@
           </el-col>
 
           <el-col :span="8">
-            <el-form-item label="创建人">
+            <el-form-item label="申请人">
               <span>{{ saveHeaderData.creatorName }}</span>
             </el-form-item>
           </el-col>

src/views/modules/erf/expApplyList.vue

@@ -224,7 +224,7 @@
       </el-table-column>
       <el-table-column
         prop="creatorName"
-        label="创建人"
+        label="申请人"
         width="80"
         align="center"
         header-align="center">

src/views/modules/erf/sampleCycleReport.vue

@@ -0,0 +1,678 @@
+<template>
+  <div class="mod-config sample-cycle-report-page">
+    <!-- 查询条件表单 -->
+    <el-form :inline="true" label-position="top" class="query-form">
+      <el-form-item label="申请单号">
+        <el-input
+          v-model="queryHeaderData.applyNo"
+          placeholder="请输入申请单号"
+          clearable
+          style="width: 150px">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="事业部">
+        <el-select
+          v-model="queryHeaderData.buNo"
+          placeholder="请选择"
+          clearable
+          style="width: 120px">
+          <el-option label="全部" value=""></el-option>
+          <el-option label="RFID" value="RFID"></el-option>
+          <el-option label="RF" value="RF"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="试验类型">
+        <el-select
+          v-model="queryHeaderData.experimentType"
+          placeholder="请选择"
+          clearable
+          style="width: 120px">
+          <el-option label="全部" value=""></el-option>
+          <el-option label="High Risk" value="High Risk"></el-option>
+          <el-option label="Low Risk" value="Low Risk"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="申请人">
+        <el-input
+          v-model="queryHeaderData.creatorName"
+          placeholder="请输入申请人姓名"
+          clearable
+          style="width: 120px">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="queryHeaderData.createStartDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="开始日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="至">
+        <el-date-picker
+          v-model="queryHeaderData.createEndDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="结束日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="期望完成时间">
+        <el-date-picker
+          v-model="queryHeaderData.expectedFinishStartDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="开始日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="至">
+        <el-date-picker
+          v-model="queryHeaderData.expectedFinishEndDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="结束日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="实际完成时间">
+        <el-date-picker
+          v-model="queryHeaderData.actualFinishStartDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="开始日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="至">
+        <el-date-picker
+          v-model="queryHeaderData.actualFinishEndDate"
+          type="date"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          placeholder="结束日期"
+          style="width: 140px">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="周期差异（天）">
+        <el-input
+          v-model="queryHeaderData.cycleDifferenceMin"
+          placeholder="最小值"
+          :controls="false"
+          style="width: 100px">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="至">
+        <el-input
+          v-model="queryHeaderData.cycleDifferenceMax"
+          placeholder="最大值"
+          :controls="false"
+          style="width: 100px">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label=" " style="margin-top: -11px">
+        <el-button @click="getDataList('Y')" type="primary" class="search-btn" plain>查询</el-button>
+        <el-button @click="resetQuery()" plain class="reset-btn">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 数据表格 -->
+    <el-table
+      ref="dataTable"
+      @row-click="handleRowClick"
+      highlight-current-row
+      :data="dataList"
+      v-loading="dataListLoading"
+      border
+      class="data-table"
+      style="width: 100%;"
+      :height="tableHeight">
+
+      <el-table-column
+        prop="applyNo"
+        label="申请单号"
+        width="100"
+        align="center"
+        header-align="center"
+        show-overflow-tooltip>
+      </el-table-column>
+
+      <el-table-column
+        prop="title"
+        label="试验名称"
+        min-width="150"
+        align="left"
+        header-align="center"
+        show-overflow-tooltip>
+      </el-table-column>
+
+      <el-table-column
+        prop="buName"
+        label="事业部"
+        width="80"
+        align="center"
+        header-align="center">
+      </el-table-column>
+
+      <el-table-column
+        prop="experimentType"
+        label="试验类型"
+        width="100"
+        align="center"
+        header-align="center">
+      </el-table-column>
+
+      <el-table-column
+        prop="creatorName"
+        label="申请人"
+        width="100"
+        align="center"
+        header-align="center">
+      </el-table-column>
+
+      <el-table-column
+        prop="expectedFinishDate"
+        label="期望完成日期"
+        width="120"
+        align="center"
+        header-align="center">
+      </el-table-column>
+
+      <el-table-column
+        prop="actualFinishDate"
+        label="实际完成日期"
+        width="120"
+        align="center"
+        header-align="center">
+      </el-table-column>
+
+      <el-table-column
+        prop="cycleDifference"
+        label="周期差异（天）"
+        width="140"
+        align="center"
+        header-align="center">
+        <template slot-scope="scope">
+          <el-tag
+            :type="getCycleDifferenceTagType(scope.row.cycleDifference)"
+            size="small">
+            {{ formatCycleDifference(scope.row.cycleDifference) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="finalStatusDesc"
+        label="样品状态"
+        width="100"
+        align="center"
+        header-align="center">
+        <template slot-scope="scope">
+          <el-tag
+            :type="getFinalStatusTagType(scope.row.finalStatus)"
+            size="small">
+            {{ scope.row.finalStatus }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="finalQuantity"
+        label="入库数量"
+        width="100"
+        align="center"
+        header-align="center">
+        <template slot-scope="scope">
+          {{ scope.row.finalQuantity || '-' }}
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="createTime"
+        label="创建时间"
+        width="160"
+        align="center"
+        header-align="center">
+      </el-table-column>
+
+      <el-table-column
+        prop="status"
+        label="状态"
+        width="80"
+        align="center"
+        header-align="center">
+        <template slot-scope="scope">
+          <el-tag :type="getStatusTagType(scope.row.status)" size="small">
+            {{ scope.row.status }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"
+      style="margin-top: 20px; text-align: right;">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { getSampleCycleReportList } from '@/api/erf/erf'
+
+export default {
+  name: 'SampleCycleReport',
+
+  data() {
+    return {
+      // 查询条件
+      queryHeaderData: {
+        applyNo: '',
+        buNo: '',
+        experimentType: '',
+        creatorName: '',
+        createStartDate: '',
+        createEndDate: '',
+        expectedFinishStartDate: '',
+        expectedFinishEndDate: '',
+        actualFinishStartDate: '',
+        actualFinishEndDate: '',
+        cycleDifferenceMin: null,
+        cycleDifferenceMax: null,
+        status: '已完成', // 默认查询已完成的申请单
+        page: 1,
+        limit: 20
+      },
+
+      // 数据列表
+      dataList: [],
+
+      // 分页参数
+      pageIndex: 1,
+      pageSize: 20,
+      totalPage: 0,
+      dataListLoading: false,
+
+      // 表格高度
+      tableHeight: 500
+    }
+  },
+
+  activated() {
+    this.getDataList()
+    this.calculateTableHeight()
+  },
+
+  mounted() {
+    this.calculateTableHeight()
+    window.addEventListener('resize', this.calculateTableHeight)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calculateTableHeight)
+  },
+
+  methods: {
+    /**
+     * 获取样品完成周期报表列表
+     *
+     * @param {string} flag - 'Y'表示重置到第一页
+     */
+    getDataList(flag) {
+      if (flag === 'Y') {
+        this.pageIndex = 1
+      }
+
+      this.queryHeaderData.page = this.pageIndex
+      this.queryHeaderData.limit = this.pageSize
+
+      this.dataListLoading = true
+
+      getSampleCycleReportList(this.queryHeaderData).then(({data}) => {
+        this.dataListLoading = false
+        if (data && data.code === 0) {
+          this.dataList = data.page.list || []
+          this.totalPage = data.page.totalCount || 0
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+          this.$message.error(data.msg || '查询失败')
+        }
+      }).catch(error => {
+        this.dataListLoading = false
+        this.$message.error('查询异常')
+      })
+    },
+
+    /**
+     * 重置查询条件
+     */
+    resetQuery() {
+      this.queryHeaderData = {
+        applyNo: '',
+        buNo: '',
+        experimentType: '',
+        creatorName: '',
+        createStartDate: '',
+        createEndDate: '',
+        expectedFinishStartDate: '',
+        expectedFinishEndDate: '',
+        actualFinishStartDate: '',
+        actualFinishEndDate: '',
+        cycleDifferenceMin: null,
+        cycleDifferenceMax: null,
+        status: '已完成',
+        page: 1,
+        limit: 20
+      }
+      this.getDataList('Y')
+    },
+
+    /**
+     * 行点击事件
+     */
+    handleRowClick(row) {
+      this.$refs.dataTable.setCurrentRow(row)
+    },
+
+    /**
+     * 分页大小改变
+     */
+    sizeChangeHandle(val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+
+    /**
+     * 当前页改变
+     */
+    currentChangeHandle(val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+
+    /**
+     * 计算表格高度
+     */
+    calculateTableHeight() {
+      this.$nextTick(() => {
+        const windowHeight = window.innerHeight
+        const queryFormHeight = 150
+        const paginationHeight = 60
+        const otherHeight = 100
+        this.tableHeight = windowHeight - queryFormHeight - paginationHeight - otherHeight
+      })
+    },
+
+    /**
+     * 格式化周期差异显示
+     */
+    formatCycleDifference(days) {
+      if (days === null || days === undefined) {
+        return '-'
+      }
+      if (days === 0) {
+        return '准时'
+      } else if (days > 0) {
+        return `延期 ${days} 天`
+      } else {
+        return `提前 ${Math.abs(days)} 天`
+      }
+    },
+
+    /**
+     * 获取周期差异标签颜色
+     */
+    getCycleDifferenceTagType(days) {
+      if (days === null || days === undefined) {
+        return 'info'
+      }
+      if (days === 0) {
+        return 'success'
+      } else if (days > 0) {
+        return 'danger' // 延期显示红色
+      } else {
+        return 'success' // 提前显示绿色
+      }
+    },
+
+    /**
+     * 获取样品状态标签颜色
+     */
+    getFinalStatusTagType(status) {
+      const typeMap = {
+        '正常入库': 'success',
+        '报废': 'danger'
+      }
+      return typeMap[status] || 'info'
+    },
+
+    /**
+     * 获取状态标签颜色
+     */
+    getStatusTagType(status) {
+      const typeMap = {
+        '草稿': 'info',
+        '已下达': 'primary',
+        '已批准': 'success',
+        '生产中': 'warning',
+        '样品确认': 'warning',
+        '已完成': 'success',
+        '已取消': 'danger',
+        '已驳回': 'danger'
+      }
+      return typeMap[status] || 'info'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.data-table {
+  background-color: #fff;
+}
+
+.data-table {
+  background-color: #fff;
+}
+
+/* 数据表格样式 */
+.data-table {
+  background-color: #FFFFFF;
+  border-radius: 4px;
+}
+
+.data-table >>> .el-table__header-wrapper th {
+  background-color: #F5F7FA !important;
+  color: #333333;
+  font-weight: 600;
+  font-size: 16px;
+  border-color: #EBEEF5;
+  padding: 10px 0;
+  height: auto;
+}
+
+/* 固定列表头也使用相同背景色 */
+.data-table >>> .el-table__fixed-header-wrapper th {
+  background-color: #F5F7FA !important;
+  color: #333333;
+  font-weight: 600;
+  font-size: 16px;
+  border-color: #EBEEF5;
+  padding: 8px 0;
+  height: auto;
+}
+
+.data-table >>> .el-table__header-wrapper .cell {
+  text-align: center;
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px !important;
+}
+
+.data-table >>> .el-table__fixed-header-wrapper .cell {
+  text-align: center;
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.data-table >>> .el-table__body-wrapper td {
+  border-color: #EBEEF5;
+  padding: 8px 0;
+  font-size: 16px;
+  color: #606266;
+  height: auto;
+}
+
+/* 固定列数据行也使用相同样式 */
+.data-table >>> .el-table__fixed-body-wrapper td {
+  border-color: #EBEEF5;
+  padding: 8px 0;
+  font-size: 16px;
+  color: #606266;
+  height: auto;
+}
+
+.data-table >>> .el-table__body-wrapper .cell {
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px !important;
+  line-height: 18px;
+  height: 18px;
+}
+
+.data-table >>> .el-table__fixed-body-wrapper .cell {
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 操作列链接样式 - 统一蓝色样式 */
+.data-table >>> .el-table__body-wrapper a {
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 13px;
+  color: #409EFF !important;
+  white-space: nowrap;
+}
+
+.data-table >>> .el-table__body-wrapper a:hover {
+  color: #66B1FF !important;
+  text-decoration: underline;
+}
+
+.data-table >>> .el-table__body tr:hover > td {
+  background-color: #F5F7FA !important;
+}
+
+.data-table >>> .el-table__body tr.current-row > td {
+  background-color: #ECF5FF !important;
+}
+
+.data-table >>> .el-tag--small {
+  height: 18px;
+  line-height: 16px;
+}
+
+/* 查询表单样式 */
+.query-form {
+  background-color: #FFFFFF;
+  padding: 15px 15px 5px 15px;
+  border-radius: 4px;
+}
+
+.query-form >>> .el-form-item__label {
+  color: #333333;
+  font-size: 13px;
+  padding-bottom: 5px;
+}
+
+.query-form >>> .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  font-size: 13px;
+}
+
+.query-form >>> .el-input__inner::placeholder {
+  color: #C0C4CC;
+  font-size: 13px;
+}
+
+.query-form >>> .el-select .el-input__inner {
+  border-radius: 4px;
+}
+
+.query-form >>> .el-date-editor .el-input__inner {
+  border-radius: 4px;
+}
+/* 按钮样式 - 扁平化风格 */
+.query-form >>> .el-button {
+  height: 32px;
+  padding: 0 15px;
+  font-size: 13px;
+  border-radius: 4px;
+}
+/* 查询按钮 - 蓝色扁平 */
+.search-btn {
+  background-color: #ECF5FF;
+  border-color: #B3D8FF;
+  color: #409EFF;
+}
+
+.search-btn:hover {
+  background-color: #409EFF;
+  border-color: #409EFF;
+  color: #FFFFFF;
+}
+
+/* 重置按钮 - 灰色扁平 */
+.reset-btn {
+  background-color: #F5F7FA;
+  border-color: #D3D4D6;
+  color: #606266;
+}
+
+.reset-btn:hover {
+  background-color: #909399;
+  border-color: #909399;
+  color: #FFFFFF;
+}
+</style>