10/12

<template>
  <div class="employee-production-statistics">
    <el-card>
      <h2>职工生产统计</h2>
      <el-table :data="employees" style="width: 100%">
        <el-table-column prop="employeeId" label="职工ID" width="180"></el-table-column>
        <el-table-column prop="employeeName" label="职工姓名" width="180"></el-table-column>
        <el-table-column prop="date" label="日期" width="180">
          <template slot-scope="scope">
            {{ scope.row.date | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="qualifiedTransferCount" label="转出合格数" width="200">
          <template slot-scope="scope">
            {{ ((scope.row.qualifiedTransferCount / (scope.row.qualifiedTransferCount + scope.row.defectiveCount)) * 100).toFixed(2) }}% ({{ scope.row.qualifiedTransferCount }})
          </template>
        </el-table-column>
        <el-table-column prop="defectiveCount" label="次品数" width="200">
          <template slot-scope="scope">
            {{ ((scope.row.defectiveCount / (scope.row.qualifiedTransferCount + scope.row.defectiveCount)) * 100).toFixed(2) }}% ({{ scope.row.defectiveCount }})
          </template>
        </el-table-column>
        <el-table-column label="物料使用统计" width="200">
          <template slot-scope="scope">
            <el-button type="info" @click="showMaterialUsage(scope.row)">查看物料使用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="设备使用统计" width="200">
          <template slot-scope="scope">
            <el-button type="info" @click="showEquipmentUsage(scope.row)">查看设备使用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="processName" label="正在进行工序" width="180"></el-table-column>
        <el-table-column label="工单详情" width="200">
          <template slot-scope="scope">
            <el-button type="info" @click="showWorkOrderDetails(scope.row)">查看工单详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 物料使用统计弹框 -->
    <el-dialog :visible.sync="materialDialogVisible" title="物料使用统计">
      <el-table :data="selectedEmployee.materialUsage" style="width: 100%">
        <el-table-column prop="materialName" label="物料名称" width="180"></el-table-column>
        <el-table-column prop="batchNumber" label="批次号" width="180"></el-table-column>
        <el-table-column prop="usedQuantity" label="领用数量" width="180"></el-table-column>
        <el-table-column prop="consumedQuantity" label="消耗数量" width="180"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="materialDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 设备使用统计弹框 -->
    <el-dialog :visible.sync="equipmentDialogVisible" title="设备使用统计">
      <el-table :data="selectedEmployee.equipmentUsage" style="width: 100%">
        <el-table-column prop="equipmentName" label="设备名称" width="180"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="180"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="equipmentDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 工单详情弹框 -->
    <el-dialog :visible.sync="workOrderDialogVisible" title="工单详情">
      <el-table :data="selectedEmployee.workOrders" style="width: 100%">
        <el-table-column prop="workOrderId" label="工单ID" width="180"></el-table-column>
        <el-table-column prop="batchNumber" label="批次号" width="180"></el-table-column>
        <el-table-column prop="processName" label="工序名称" width="180"></el-table-column>
        <el-table-column prop="qualifiedTransferCount" label="转出合格品数" width="180"></el-table-column>
        <el-table-column prop="defectiveCount" label="次品数" width="180"></el-table-column>
        <el-table-column prop="inspectionCompleted" label="是否检验" width="180">
          <template slot-scope="scope">
            {{ scope.row.inspectionCompleted ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="workOrderDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      employees: [],
      materialDialogVisible: false,
      equipmentDialogVisible: false,
      workOrderDialogVisible: false,
      selectedEmployee: {}
    };
  },
  mounted() {
    this.fetchEmployeeData();
  },
  methods: {
    fetchEmployeeData() {
      axios.post('http://localhost:80/mes/select')
        .then(response => {
          const employeeStats = {};
          response.data.forEach(item => {
            const employeeId = item.employeeId;
            if (!employeeStats[employeeId]) {
              employeeStats[employeeId] = {
                employeeId: employeeId,
                employeeName: item.employeeName,
                date: new Date().toLocaleDateString(),
                qualifiedTransferCount: 0,
                defectiveCount: 0,
                materialUsage: [],
                equipmentUsage: [],
                workOrders: [],
                processName: item.processName
              };
            }
            employeeStats[employeeId].qualifiedTransferCount += item.qualifiedTransferCount;
            employeeStats[employeeId].defectiveCount += item.defectiveCount;
            employeeStats[employeeId].materialUsage.push({
              materialName: item.materialName,
              batchNumber: item.batchNumber,
              usedQuantity: item.usedQuantity,
              consumedQuantity: item.consumedQuantity
            });
            employeeStats[employeeId].equipmentUsage.push({
              equipmentName: item.equipmentName,
              startTime: item.startTime,
              endTime: item.endTime
            });
            employeeStats[employeeId].workOrders.push({
              workOrderId: item.workOrderId,
              batchNumber: item.batchNumber,
              processName: item.processName,
              qualifiedTransferCount: item.qualifiedTransferCount,
              defectiveCount: item.defectiveCount,
              inspectionCompleted: item.inspectionCompleted
            });
          });
          this.employees = Object.values(employeeStats);
        })
        .catch(error => {
          this.$message.error('获取数据失败: ' + error);
        });
    },
    showMaterialUsage(employee) {
      this.selectedEmployee = employee;
      this.materialDialogVisible = true;
    },
    showEquipmentUsage(employee) {
      this.selectedEmployee = employee;
      this.equipmentDialogVisible = true;
    },
    showWorkOrderDetails(employee) {
      this.selectedEmployee = employee;
      this.workOrderDialogVisible = true;
    }
  },
  filters: {
    formatDate(value) {
      return value ? new Date(value).toLocaleDateString() : '';
    }
  }
};
</script>

<style scoped>
.employee-production-statistics {
  padding: 20px;
}
</style>