<template>
|
<div class="report-management">
|
<!-- 筛选条件 -->
|
<el-card class="filter-card" shadow="never">
|
<el-form :model="filterForm" inline>
|
<el-form-item label="时间范围">
|
<el-date-picker
|
style="width: 300px"
|
v-model="filterForm.dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
@change="handleFilterChange"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleFilterChange">查询</el-button>
|
<el-button @click="resetFilter">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!-- 统计卡片 -->
|
<div class="statistics-cards">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon">
|
<el-icon><Box /></el-icon>
|
</div>
|
<div class="stat-info">
|
<div class="stat-number">{{ statistics.totalSamples }}</div>
|
<div class="stat-label">总订单数</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon">
|
<el-icon><Tools /></el-icon>
|
</div>
|
<div class="stat-info">
|
<div class="stat-number">{{ statistics.activeEquipment }}</div>
|
<div class="stat-label">待生产数量</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon">
|
<el-icon><Document /></el-icon>
|
</div>
|
<div class="stat-info">
|
<div class="stat-number">{{ statistics.completedInspections }}</div>
|
<div class="stat-label">已生产数量</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon">
|
<el-icon><ShoppingCart /></el-icon>
|
</div>
|
<div class="stat-info">
|
<div class="stat-number">{{ statistics.totalUsage }}</div>
|
<div class="stat-label">总核算工时</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 图表区域 -->
|
<div class="charts-container">
|
<el-row :gutter="20">
|
<!-- 样品进度图表 -->
|
<el-col :span="12">
|
<el-card class="chart-card" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>生产报工统计</span>
|
</div>
|
</template>
|
<div ref="sampleChartRef" class="chart-container"></div>
|
</el-card>
|
</el-col>
|
|
<!-- 设备使用图表 -->
|
<el-col :span="12">
|
<el-card class="chart-card" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>生产核算统计</span>
|
</div>
|
</template>
|
<div ref="equipmentChartRef" class="chart-container"></div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 详细数据表格 -->
|
<el-card class="table-card" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>生产报工详情</span>
|
<div>
|
</div>
|
</div>
|
</template>
|
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
v-loading="tableLoading"
|
stripe
|
border
|
>
|
<el-table-column prop="id" label="编号" width="80" />
|
<el-table-column prop="orderNo" label="生产订单号" />
|
<el-table-column prop="productCategory" label="产品大类" />
|
<el-table-column prop="specificationModel" label="规格型号" />
|
<el-table-column prop="unit" label="单位" />
|
<el-table-column prop="schedulingUserName" label="排产人" />
|
<el-table-column prop="schedulingDate" label="排产日期" />
|
<el-table-column prop="process" label="工序" />
|
<el-table-column prop="schedulingNum" label="排产数量" />
|
<el-table-column prop="finishedNum" label="生产数量" />
|
<el-table-column prop="pendingFinishNum" label="待生产数量" >
|
<template #default="scope">
|
<span>{{ scope.row.schedulingNum - scope.row.finishedNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" label="状态">
|
<template #default="scope">
|
<el-tag :type="getStatusType(scope.row.status).type">
|
{{ getStatusType(scope.row.status).label }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, nextTick } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import * as echarts from 'echarts'
|
import { Box, Tools, Document, ShoppingCart } from '@element-plus/icons-vue'
|
import {reportAnalysis} from '@/api/productionManagement/productionOrder'
|
|
// 响应式数据
|
const filterForm = reactive({
|
dateRange: [],
|
reportType: 'sample'
|
})
|
|
const statistics = reactive({
|
totalSamples: 0,
|
activeEquipment: 0,
|
completedInspections: 0,
|
totalUsage: 0
|
})
|
|
const tableData = ref([])
|
const tableLoading = ref(false)
|
|
// 图表引用
|
const sampleChartRef = ref(null)
|
const equipmentChartRef = ref(null)
|
|
// 图表实例
|
let sampleChart = null
|
let equipmentChart = null
|
let inspectionChart = null
|
let usageChart = null
|
|
// 初始化数据
|
const initData = () => {
|
let startDate=null,endDate=null;
|
if(filterForm.dateRange && filterForm.dateRange.length===2){
|
startDate = filterForm.dateRange[0];
|
endDate = filterForm.dateRange[1];
|
}
|
reportAnalysis({startDate:startDate,endDate:endDate}).then(res=>{
|
statistics.totalSamples = res.data.totalData.totalOrderNum
|
statistics.activeEquipment = res.data.totalData.tobeProduced
|
statistics.completedInspections = res.data.totalData.finishProduced
|
statistics.totalUsage = res.data.totalData.totalWorkhours
|
// 初始化图表
|
let chartData = res.data.productData?res.data.productData:{
|
finishProduced:0,
|
inProduced:0,
|
tobeProduced:0
|
};
|
initSampleChart([
|
{ value: chartData.finishProduced, name: '已完成' },
|
{ value: chartData.inProduced, name: '生产中' },
|
{ value: chartData.tobeProduced, name: '待报工' },
|
])
|
initEquipmentChart(res.data.workHours)
|
tableData.value = res.data.productDetails
|
})
|
}
|
|
// 初始化样品进度图表
|
const initSampleChart = (charData) => {
|
if (sampleChartRef.value) {
|
sampleChart = echarts.init(sampleChartRef.value)
|
const option = {
|
title: {
|
show: false
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'left'
|
},
|
series: [
|
{
|
name: '样品状态',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '18',
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: charData
|
}
|
]
|
}
|
sampleChart.setOption(option)
|
}
|
}
|
|
// 初始化设备使用图表
|
const initEquipmentChart = (chartData) => {
|
if (equipmentChartRef.value) {
|
let processData = [];
|
let workHoursData = [];
|
if(chartData){
|
chartData.forEach(item=>{
|
processData.push(item.process);
|
workHoursData.push(item.workHours);
|
})
|
}
|
equipmentChart = echarts.init(equipmentChartRef.value)
|
const option = {
|
title: {
|
show: false
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: processData,
|
name: '工序'
|
},
|
yAxis: {
|
type: 'value',
|
name: '核算工时'
|
},
|
series: [
|
{
|
name: '核算工时',
|
type: 'bar',
|
data: workHoursData,
|
itemStyle: {
|
// color: function(params) {
|
// const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9C27B0']
|
// return colors[params.dataIndex]
|
// }
|
}
|
}
|
]
|
}
|
equipmentChart.setOption(option)
|
}
|
}
|
|
// 事件处理函数
|
const handleFilterChange = () => {
|
// 这里可以根据筛选条件重新加载数据
|
initData()
|
}
|
|
const resetFilter = () => {
|
filterForm.dateRange = []
|
filterForm.reportType = 'sample'
|
ElMessage.info('筛选条件已重置')
|
}
|
|
const getStatusType = (status) => {
|
const statusMap = {
|
'3': {type:'success',label:'已完成'},
|
'2': {type:'warning',label:'生产中'},
|
'1': {type:'info',label:'待生产'}
|
}
|
return statusMap[status] || {type:'info',label:'未知状态'}
|
}
|
|
const getProgressStatus = (progress) => {
|
if (progress === 100) return 'success'
|
if (progress >= 80) return 'warning'
|
if (progress >= 50) return ''
|
return 'exception'
|
}
|
|
// 生命周期
|
onMounted(() => {
|
initData()
|
// 监听窗口大小变化，重新调整图表大小
|
window.addEventListener('resize', () => {
|
sampleChart?.resize()
|
equipmentChart?.resize()
|
inspectionChart?.resize()
|
usageChart?.resize()
|
})
|
})
|
</script>
|
|
<style scoped>
|
.report-management {
|
padding: 20px;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
.page-header h2 {
|
color: #303133;
|
margin-bottom: 8px;
|
font-size: 24px;
|
font-weight: 600;
|
}
|
|
.page-header p {
|
color: #909399;
|
font-size: 14px;
|
margin: 0;
|
}
|
|
.filter-card {
|
margin-bottom: 20px;
|
}
|
|
.statistics-cards {
|
margin-bottom: 20px;
|
}
|
|
.stat-card {
|
height: 120px;
|
}
|
|
.stat-content {
|
display: flex;
|
align-items: center;
|
height: 100%;
|
}
|
|
.stat-icon {
|
width: 60px;
|
height: 60px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 20px;
|
font-size: 24px;
|
color: white;
|
}
|
|
.stat-card:nth-child(1) .stat-icon {
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
}
|
|
.stat-card:nth-child(2) .stat-icon {
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
}
|
|
.stat-card:nth-child(3) .stat-icon {
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
}
|
|
.stat-card:nth-child(4) .stat-icon {
|
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
}
|
|
.stat-info {
|
flex: 1;
|
}
|
|
.stat-number {
|
font-size: 28px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 8px;
|
}
|
|
.stat-label {
|
font-size: 14px;
|
color: #909399;
|
}
|
|
.charts-container {
|
margin-bottom: 20px;
|
}
|
|
.chart-card {
|
margin-bottom: 20px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.chart-container {
|
height: 300px;
|
width: 100%;
|
}
|
|
.table-card {
|
margin-bottom: 20px;
|
}
|
|
:deep(.el-card__header) {
|
padding: 15px 20px;
|
border-bottom: 1px solid #ebeef5;
|
background-color: #fafafa;
|
}
|
|
:deep(.el-card__body) {
|
padding: 20px;
|
}
|
|
:deep(.el-table) {
|
margin-bottom: 20px;
|
}
|
|
:deep(.el-progress) {
|
margin: 0;
|
}
|
|
:deep(.el-tag) {
|
margin: 0;
|
}
|
</style>
|
