fix: 完成各生产订单的完成进度统计重构

spring

10 小时以前 d66055533cab4d64195b16e373334ff4f2774864

 src/views/reportAnalysis/dataDashboard/index.vue

@@ -179,20 +179,72 @@
            </div>
            <div class="main-panel">
               <div class="panel-item-customers">
                  <div class="event-header">
                     <img src="@/assets/BI/shijianmingxiicon@2x.png" alt="图标" class="event-icon" />
                     <span class="event-title">经营分析</span>
                  <div class="order-statistics-cards">
                     <div class="quality-cardSec">
                        <div class="quality-card four"></div>
                        <div class="quality-cardTitle">
                           <div>总订单数</div>
                           <div>{{orderStatisticsObject.totalOrderCount}}件</div>
                  </div>
                  <Echarts ref="chart"
                               :chartStyle="chartStyle"
                               :grid="grid"
                               :legend="barLegend1"
                               :series="barSeries11"
                               :tooltip="tooltip"
                               :xAxis="xAxis3"
                               :yAxis="yAxis3"
                               :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
                               style="height: 170px"></Echarts>
                     </div>
                     <div class="quality-cardSec">
                        <div class="quality-card five"></div>
                        <div class="quality-cardTitle">
                           <div>未完成订单数</div>
                           <div>{{orderStatisticsObject.uncompletedOrderCount}}件</div>
                        </div>
                     </div>
                     <div class="quality-cardSec">
                        <div class="quality-card six"></div>
                        <div class="quality-cardTitle">
                           <div>部分完成订单数</div>
                           <div>{{orderStatisticsObject.partialCompletedOrderCount}}件</div>
                        </div>
                     </div>
                     <div class="quality-cardSec">
                        <div class="quality-card seven"></div>
                        <div class="quality-cardTitle">
                           <div>已完成订单数</div>
                           <div>{{orderStatisticsObject.completedOrderCount}}件</div>
                        </div>
                     </div>
                  </div>
                  <div class="progress-table-container" ref="progressTableRef" @scroll="handleTableScroll">
                     <table class="progress-table">
                        <thead>
                           <tr>
                              <th>生产订单号</th>
                              <th>产品名称</th>
                              <th>规格</th>
                              <th>需求数量</th>
                              <th>完成数量</th>
                              <th>完成进度</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr 
                              v-for="(item, index) in progressTableData" 
                              :key="index"
                              :ref="el => setRowRef(el, index)"
                              :class="{ 'row-under-header': isRowUnderHeader(index) }"
                           >
                              <td>{{ item.npsNo || '-' }}</td>
                              <td>{{ item.productCategory || '-' }}</td>
                              <td>{{ item.specificationModel || '-' }}</td>
                              <td>{{ item.quantity || 0 }}</td>
                              <td>{{ item.completeQuantity || 0 }}</td>
                              <td>
                                 <el-progress
                                    :percentage="calculateProgress(item)"
                                    :color="progressColor(calculateProgress(item))"
                                    :status="calculateProgress(item) >= 100 ? 'success' : ''"
                                    :stroke-width="8"
                                 />
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
      </div>
@@ -261,6 +313,7 @@
import {getUpkeepPage} from "@/api/equipmentManagement/upkeep.js";
import {measuringInstrumentListPage} from "@/api/equipmentManagement/measurementEquipment.js";
import {listPageAnalysis} from "@/api/financialManagement/expenseManagement.js";
import {productOrderListPage} from "@/api/productionManagement/productionOrder.js";

// 全屏相关状态
const isFullscreen = ref(false);
@@ -288,7 +341,13 @@
const realtimeLineChartRef = ref(null)
const refContractList = ref(null)
const refTodoList = ref(null)
const progressTableRef = ref(null)
const timerScroll = ref(null)
const progressTableScrollTimer = ref(null)
const isTableScrolling = ref(false)
const tableScrollTimeout = ref(null)
const tableRowRefs = ref([])
const rowsUnderHeader = ref(new Set())

const chartStylePie = {
   width: '140%',
@@ -336,6 +395,14 @@
   supplierNum: 0,
   processNum: 0,
   factoryNum: 0,
})

// 订单统计对象
const orderStatisticsObject = ref({
   totalOrderCount: 0,
   uncompletedOrderCount: 0,
   partialCompletedOrderCount: 0,
   completedOrderCount: 0,
})
const chartStyle = {
   width: '100%',
@@ -582,6 +649,33 @@
// 待办事项
const todoList = ref([])

// 生产订单完成进度表格数据
const progressTableData = ref([])

// 计算完成进度百分比
const calculateProgress = (item) => {
   if (!item) return 0
   // 优先使用completionStatus字段
   if (item.completionStatus !== undefined && item.completionStatus !== null) {
      const percentage = Number(item.completionStatus)
      if (isNaN(percentage)) return 0
      return Math.min(Math.max(Math.round(percentage), 0), 100)
   }
   // 如果没有completionStatus，则根据完成数量和需求数量计算
   if (!item.quantity || item.quantity === 0) return 0
   const percentage = (item.completeQuantity || 0) / item.quantity * 100
   return Math.min(Math.max(Math.round(percentage), 0), 100)
}

// 根据进度百分比返回颜色
const progressColor = (percentage) => {
   const p = percentage || 0
   if (p < 30) return "#f56c6c"
   if (p < 50) return "#e6a23c"
   if (p < 80) return "#409eff"
   return "#67c23a"
}

// 计算缩放比例
const calculateScale = () => {
  const container = document.querySelector('.scale-container')
@@ -651,6 +745,7 @@
}
// 各生产订单的完成进度统计
const progressStatisticsInfo = () => {
   // 从统计接口获取统计数据
   getProgressStatistics().then((res) => {
      console.log("生产订单完成进度统计数据:", res)
      
@@ -659,24 +754,22 @@
         return
      }
      
      // 设置X轴数据 - 使用分类名称
      xAxis3.value[0].data = ['已完成进度数', '总订单数', '未完成订单数', '已完成订单数']
		
      // 设置单个系列的数据 - 每个X轴分类对应一个值
      if (barSeries11.value && barSeries11.value.length > 0) {
         barSeries11.value[0].data = [
            res.data.completedProgressCount || 0,
            res.data.totalOrderCount || 0,
            res.data.uncompletedOrderCount || 0,
            res.data.completedOrderCount || 0
         ]
      // 从接口获取统计数据
      orderStatisticsObject.value = {
         totalOrderCount: res.data.totalOrderCount || 0,
         uncompletedOrderCount: res.data.uncompletedOrderCount || 0,
         partialCompletedOrderCount: res.data.partialCompletedOrderCount || 0,
         completedOrderCount: res.data.completedOrderCount || 0
      }
      progressTableData.value = res.data.completedOrderDetails || []
      // 重置行引用
      tableRowRefs.value = []
      rowsUnderHeader.value.clear()
      
      console.log('图表数据设置完成:', {
         xAxis: xAxis3.value[0].data,
         series: barSeries11.value[0]?.data
      // 在获取到数据后，初始化滚动功能
      nextTick(() => {
         initProgressTableScroll()
      })
		
   }).catch((error) => {
      console.error('获取生产订单完成进度统计失败:', error)
   })
@@ -822,6 +915,163 @@

// 自动轮换周、月、季度的定时器
const autoSwitchTimer = ref(null)

// 设置行引用
const setRowRef = (el, index) => {
   if (el) {
      tableRowRefs.value[index] = el
   }
}

// 判断行是否在表头下方
const isRowUnderHeader = (index) => {
   return rowsUnderHeader.value.has(index)
}

// 处理表格滚动事件
const handleTableScroll = () => {
   const tableContainer = progressTableRef.value
   if (!tableContainer) return
	
   const thead = tableContainer.querySelector('thead')
   if (!thead) return
	
   const theadHeight = thead.offsetHeight
   const containerRect = tableContainer.getBoundingClientRect()
   const containerTop = containerRect.top
   const theadBottom = containerTop + theadHeight
	
   // 清空之前的记录
   rowsUnderHeader.value.clear()
	
   // 检查每一行是否在表头下方（被表头遮挡）
   tableRowRefs.value.forEach((row, index) => {
      if (row) {
         const rowRect = row.getBoundingClientRect()
         const rowTop = rowRect.top
         const rowBottom = rowRect.bottom
			
         // 如果行与表头有重叠（行在表头下方被遮挡）
         // 行的顶部在表头底部下方，但行的底部在表头底部上方，说明被遮挡
         if (rowTop < theadBottom && rowBottom > containerTop) {
            rowsUnderHeader.value.add(index)
         }
      }
   })
	
   // 清除之前的定时器
   if (tableScrollTimeout.value) {
      clearTimeout(tableScrollTimeout.value)
   }
	
   // 滚动停止后清空淡化标记
   tableScrollTimeout.value = setTimeout(() => {
      rowsUnderHeader.value.clear()
   }, 150)
}

// 初始化生产订单进度表格滚动功能
const initProgressTableScroll = () => {
   const tableContainer = progressTableRef.value
   if (!tableContainer) return
	
   // 清理之前的滚动动画和定时器
   if (progressTableScrollTimer.value) {
      cancelAnimationFrame(progressTableScrollTimer.value)
      progressTableScrollTimer.value = null
   }
   if (tableContainer._pauseTimer) {
      clearInterval(tableContainer._pauseTimer)
      tableContainer._pauseTimer = null
   }
	
   const tbody = tableContainer.querySelector('tbody')
   if (!tbody) return
	
   // 清理之前可能存在的克隆行（保留原始数据行）
   // 原始数据行的数量应该等于 progressTableData.value.length
   const originalCount = progressTableData.value.length
   const allRows = Array.from(tbody.querySelectorAll('tr'))
   if (allRows.length > originalCount) {
      // 移除所有超过原始数量的行（这些是克隆的行）
      for (let i = originalCount; i < allRows.length; i++) {
         allRows[i].remove()
      }
   }
	
   const scrollItems = Array.from(tbody.querySelectorAll('tr'))
   if (scrollItems.length === 0) return
	
   // 获取原始数据项数量
   const originalItemCount = scrollItems.length
	
   // 计算容器高度和表头高度
   const thead = tableContainer.querySelector('thead')
   const theadHeight = thead ? thead.offsetHeight : 40
   const containerHeight = tableContainer.clientHeight
   const visibleHeight = containerHeight - theadHeight
	
   // 计算原始数据的总高度
   const itemHeight = scrollItems[0]?.offsetHeight || 40
   const totalContentHeight = itemHeight * originalItemCount
	
   // 如果数据量不够，容器可以完全显示所有数据，就不需要滚动和克隆
   if (totalContentHeight <= visibleHeight) {
      // 数据量少，不需要滚动，直接返回
      return
   }
	
   // 数据量足够，需要滚动，进行克隆以实现无缝滚动
   const cloneCount = Math.ceil(visibleHeight / itemHeight) + 2
	
   // 克隆前几个项目并添加到列表末尾，实现无缝滚动
   for (let i = 0; i < cloneCount; i++) {
      const clone = scrollItems[i % originalItemCount].cloneNode(true)
      tbody.appendChild(clone)
   }
	
   let scrollPosition = 0
   const scrollSpeed = 1.5
   const pauseTime = 3000
   let isPaused = false
   let lastTimestamp = 0
	
   // 连续滚动动画函数
   function scrollAnimation(timestamp) {
      if (!lastTimestamp) lastTimestamp = timestamp
      const deltaTime = timestamp - lastTimestamp
      lastTimestamp = timestamp
		
      if (!isPaused) {
         scrollPosition += scrollSpeed * (deltaTime / 16)
			
         // 计算最大滚动位置（原始内容的高度）
         const maxScroll = itemHeight * originalItemCount
			
         // 当滚动超过原始内容长度时，重置位置实现无缝滚动
         if (scrollPosition >= maxScroll) {
            scrollPosition = 0
            tableContainer.scrollTop = 0
         } else {
            tableContainer.scrollTop = scrollPosition
         }
      }
		
      progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)
   }
	
   // 启动滚动动画
   progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)
	
   // 设置滚动-暂停-滚动的循环效果
   const pauseTimer = setInterval(() => {
      isPaused = !isPaused
   }, pauseTime)
	
   // 清理定时器
   tableContainer._pauseTimer = pauseTimer
}

// 初始化待办事项列表滚动功能
const initTodoListScroll = () => {
   const todoList = refTodoList.value
@@ -1074,6 +1324,25 @@
    }
  }
  
  // 清理生产订单进度表格的动画和定时器
  const progressTable = progressTableRef.value
  if (progressTable) {
    if (progressTableScrollTimer.value) {
      cancelAnimationFrame(progressTableScrollTimer.value)
      progressTableScrollTimer.value = null
    }
    if (progressTable._pauseTimer) {
      clearInterval(progressTable._pauseTimer)
      progressTable._pauseTimer = null
    }
  }
  
  // 清理表格滚动定时器
  if (tableScrollTimeout.value) {
    clearTimeout(tableScrollTimeout.value)
    tableScrollTimeout.value = null
  }
  
  // 清理自动轮换周、月、季度的定时器
  if (autoSwitchTimer.value) {
    clearInterval(autoSwitchTimer.value)
@@ -1272,7 +1541,33 @@
}
.quality-card.three {
   background-image: url("@/assets/BI/chuchangyijianicon@2x.png");
}
   
/* 订单统计卡片样式 */
.order-statistics-cards {
   display: flex;
   gap: 12px;
   width: 100%;
   height: 94px;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
}

.quality-card.four {
   background-image: url("@/assets/BI/yuancailiaoyijianicon@2x.png");
}

.quality-card.five {
   background-image: url("@/assets/BI/guochengyijianicon@2x.png");
}

.quality-card.six {
   background-image: url("@/assets/BI/chuchangyijianicon@2x.png");
}

.quality-card.seven {
   background-image: url("@/assets/BI/yuancailiaoyijianicon@2x.png");
}
.panel-title-icon {
   width: 60px;
@@ -1555,4 +1850,84 @@
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.5);
}

/* 生产订单进度表格样式 */
.progress-table-container {
  height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 10px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE和Edge */
}

.progress-table-container::-webkit-scrollbar {
  display: none; /* Chrome、Safari和Opera */
}

.progress-table {
  width: 100%;
  border-collapse: collapse;
  color: #B8C8E0;
  font-size: 12px;
  table-layout: fixed;
}

.progress-table thead {
  position: sticky;
  top: 0;
  background-color: rgba(26, 88, 176, 0.9);
  z-index: 10;
}

.progress-table th {
  padding: 8px 6px;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid rgba(184, 200, 224, 0.3);
  color: #B8C8E0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-table th:nth-child(1) { width: 15%; } /* 生产订单号 */
.progress-table th:nth-child(2) { width: 15%; } /* 产品名称 */
.progress-table th:nth-child(3) { width: 15%; } /* 规格 */
.progress-table th:nth-child(4) { width: 12%; } /* 需求数量 */
.progress-table th:nth-child(5) { width: 12%; } /* 完成数量 */
.progress-table th:nth-child(6) { width: 31%; } /* 完成进度 */

.progress-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(184, 200, 224, 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  transition: opacity 0.3s ease;
}

.progress-table tbody tr:hover {
  background-color: rgba(184, 200, 224, 0.1);
}

.progress-table tbody tr.row-under-header {
  opacity: 0.5;
}

/* el-progress 组件样式调整 */
.progress-table :deep(.el-progress) {
  width: 100%;
}

.progress-table :deep(.el-progress-bar__outer) {
  background-color: rgba(184, 200, 224, 0.2);
}

.progress-table :deep(.el-progress__text) {
  color: #B8C8E0;
  font-size: 11px;
}
</style>