DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pdo): 新增PDO管理功能及相关组件

Browse Source 
新增PDO管理页面及相关功能组件，包括：
1. 新增数据修正组件DataCorrection.vue
2. 新增标签打印组件LabelPrint.vue
3. 新增统计汇总组件PdoSummary.vue
4. 新增图表展示组件line.vue
5. 实现主页面index.vue布局及功能
6. 新增API接口文件用于业务数据交互
7. 修改lines/index.vue配置，移除baseURL动态获取逻辑
This commit is contained in:
砂糖
2025-12-25 15:50:19 +08:00
parent 65c04f3ed2
commit 30d5d914ef
15 changed files with 3486 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

579
klp-ui/src/views/lines/pdo/index.vue Normal file
View File

@@ -0,0 +1,579 @@
<template>
<div class="pdo-container">
<!-- 查询表单区域 -->
<div class="pdo-header">
<el-form :inline="true" :model="queryForm" ref="queryForm" label-width="100px" size="small">
<el-form-item label="钢卷号" prop="coilid">
<el-input v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input>
</el-form-item>
<el-form-item label="开始日期" prop="startDate">
<el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd"
clearable></el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="endDate">
<el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd"
clearable></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button>
<el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
<el-button type="success" @click="handleAdd" icon="el-icon-plus">补录</el-button>
</el-form-item>
</el-form>
</div>
<!-- 卡片网格布局 -->
<div v-loading="tableLoading" class="card-grid-container">
<el-row :gutter="10">
<el-col v-for="(item, index) in tableData" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="5"
class="card-col">
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '8px' }"
:class="{ 'card-selected': currentRow.exitMatId === item.exitMatId }" @click.native="handleRowClick(item)">
<div slot="header" class="card-header">
<div class="card-title">成品卷: {{ item.exitMatId || '-' }}</div>
<div class="card-subtitle">{{ item.entryMatId || '-' }} | {{ item.planNo || '-' }}</div>
</div>
<div class="card-body">
<div class="param-groups-row">
<!-- 基本信息 -->
<div class="param-group">
<div class="group-title">基本信息</div>
<div class="param-list">
<div class="param-line">
<span class="param-label">状态:</span>
<span class="param-value">{{ item.status || '-' }}</span>
</div>
<div class="param-line">
<span class="param-label">钢种:</span>
<span class="param-value">{{ item.steelGrade || '-' }}</span>
</div>
<div class="param-line">
<span class="param-label">产品类型:</span>
<span class="param-value">{{ item.prodCode || '-' }}</span>
</div>
<div class="param-line">
<span class="param-label">客户:</span>
<span class="param-value">{{ item.customer || '-' }}</span>
</div>
</div>
</div>
<!-- 来料信息 -->
<div class="param-group">
<div class="group-title">来料信息</div>
<div class="param-list">
<div class="param-line">
<span class="param-label">厚度:</span>
<span class="param-value">{{ item.entryThick || '-' }}</span>
</div>
<div class="param-line">
<span class="param-label">宽度:</span>
<span class="param-value">{{ item.entryWidth || '-' }}</span>
</div>
<div class="param-line">
<span class="param-label">长度:</span>
<span class="param-value">{{ item.entryLength || '-' }}</span>
</div>
<div class="param-line">
<span class="param-label">重量:</span>
<span class="param-value">{{ item.entryWeight || '-' }}</span>
</div>
</div>
</div>
<!-- 成品信息 -->
<div class="param-group">
<div class="group-title">成品信息</div>
<div class="param-list">
<div class="param-line">
<span class="param-label">厚度:</span>
<span class="param-value">{{ item.exitThickness || '-' }}</span>
</div>
<div class="param-line">
<span class="param-label">宽度:</span>
<span class="param-value">{{ item.exitWidth || '-' }}</span>
</div>
<div class="param-line">
<span class="param-label">长度:</span>
<span class="param-value">{{ item.exitLength || '-' }}</span>
</div>
<div class="param-line">
<span class="param-label">重量:</span>
<span class="param-value">{{ item.exitNetWeight || '-' }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<el-button size="mini" type="text" icon="el-icon-view" @click.stop="handlePrint(item)">打印</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(item)">操作</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" :loading="item.deleteLoading"
@click.stop="handleDelete(item)">删除</el-button>
</div>
</el-card>
</el-col>
</el-row>
<div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
<el-empty description="暂无数据"></el-empty>
</div>
</div>
<!-- 统计汇总和图表区域 -->
<div class="statistics-container">
<div class="statistics-header">
<div class="selected-info" v-if="currentRow && currentRow.entryMatId">
<i class="el-icon-check"></i>
<span class="selected-label">已选中:</span>
<span class="selected-value">成品卷 {{ currentRow.exitMatId }}</span>
<span class="selected-detail" v-if="currentRow.entryMatId">(来料卷: {{ currentRow.entryMatId }})</span>
</div>
<div class="selected-info empty" v-else>
<i class="el-icon-info"></i>
<span>请选择上方卡片查看详情</span>
</div>
</div>
<el-row :gutter="15" class="statistics-content">
<el-col :span="4" class="summary-col">
<div class="summary-wrapper">
<div class="summary-header">统计汇总</div>
<pdo-summary :table-data="tableData" />
</div>
</el-col>
<el-col :span="20" class="chart-col">
<div class="chart-wrapper">
<line-chart :enCoilID="currentRow.entryMatId" :url="activeUrl" />
</div>
</el-col>
</el-row>
</div>
<!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
<!-- 补录（新增）：仅显示数据修正组件，无tab -->
<div v-if="isAdd">
<pdo-data-correction :detail="formData" :save-callback="handleSave"
:save-loading="saveLoading"></pdo-data-correction>
</div>
<pdo-data-correction :detail="formData" :save-callback="handleSave"
:save-loading="saveLoading"></pdo-data-correction>
</el-dialog>
<el-dialog title="标签打印" :visible.sync="printOpen" width="600px" :close-on-click-modal="false">
<div style="display: flex; justify-content: center; align-items: center;">
<pdo-label-print :detail="formData"></pdo-label-print>
</div>
</el-dialog>
</div>
</template>
<script>
import createFetch from '@/api/l2/pdo'
import LineChart from './components/line.vue'
// 引入封装的两个组件
import PdoDataCorrection from './components/DataCorrection.vue'
import PdoLabelPrint from './components/LabelPrint.vue'
import PdoSummary from './components/PdoSummary.vue'
export default {
name: 'PdoManagement',
dicts: ['pdo_plan_origin'],
components: {
LineChart,
PdoDataCorrection, // 注册数据修正组件
PdoLabelPrint, // 注册标签打印组件
PdoSummary
},
data() {
return {
activeUrl: '140.143.206.120:18081',
queryForm: { coilid: '', startDate: '', endDate: '' },
printOpen: false,
tableData: [],
tableLoading: false,
btnLoading: false,
dialogVisible: false,
dialogTitle: '新增实绩',
// 新增：区分「补录（新增）」和「编辑」的状态标识
isAdd: false,
// 传递给子组件的详情数据（父组件仅做数据中转，不直接修改）
formData: {},
saveLoading: false,
currentRow: {},
socketType: [
{ value: 'alarm', label: '报警' },
{ value: 'track_position', label: '跟踪位置' },
{ value: 'track_measure', label: '跟踪测量' },
{ value: 'track_signal', label: '跟踪信号' },
{ value: 'track_matmap', label: '跟踪料号' },
{ value: 'calc_setup_result', label: '计算结果' }
]
}
},
created() {
this.pdoApi = createFetch(this.activeUrl)
this.getPdoList()
},
methods: {
// 获取列表数据（保持不变）
getPdoList() {
this.tableLoading = true
this.pdoApi.getPdoList(this.queryForm).then(res => {
this.tableData = res.data.map(item => ({ ...item, deleteLoading: false }))
}).catch(err => {
console.error(err)
this.$message.error('获取数据失败')
}).finally(() => {
this.tableLoading = false
this.btnLoading = false
})
},
// 查询（保持不变）
handleQuery() {
this.btnLoading = true;
this.getPdoList()
},
// 重置（保持不变）
handleReset() {
this.$refs.queryForm.resetFields();
this.getPdoList()
},
// 行点击（保持不变）
handleRowClick(row) {
this.currentRow = row;
},
// 格式化时间
formatTime(time) {
if (!time) return '-';
return this.parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}');
},
// 补录（新增）：设置isAdd=true，初始化空表单
handleAdd() {
this.isAdd = true; // 标记为「补录」
this.dialogTitle = '新增实绩';
// 初始化空表单数据（传递给子组件）
this.formData = {
subId: 0,
startPosition: 0,
endPosition: 0,
planId: 0,
entryThick: 0,
entryWidth: 0,
entryLength: 0,
entryWeight: 0,
weightTop: 0,
weightBottom: 0,
exitLength: 0,
exitNetWeight: 0,
theoryWeight: 0,
actualWeight: 0,
exitOuterDiameter: 0,
exitThickness: 0,
exitWidth: 0,
lastFlag: false,
separateFlag: false
};
this.dialogVisible = true
},
// 编辑：设置isAdd=false，赋值行数据
handleEdit(row) {
this.isAdd = false; // 标记为「编辑」
this.dialogTitle = '编辑实绩';
// 深拷贝行数据（避免直接修改表格数据）
this.formData = JSON.parse(JSON.stringify(row));
this.dialogVisible = true
},
handlePrint(row) {
// 深拷贝行数据（避免直接修改表格数据）
this.formData = JSON.parse(JSON.stringify(row));
this.printOpen = true
},
// 删除（保持不变）
handleDelete(row) {
this.$confirm(`确定删除成品卷 ${row.exitMatId}?`, '确认删除', { type: 'danger' }).then(() => {
row.deleteLoading = true
this.pdoApi.deletePdo(row.exitMatId, row.planId).then(res => {
if (res.code === 200) {
this.$message.success('删除成功');
this.getPdoList()
} else this.$message.error(res.msg || '删除失败')
}).finally(() => row.deleteLoading = false)
})
},
// 保存回调（子组件触发，处理实际API调用）
handleSave(formData) {
this.saveLoading = true
// 根据是否有id判断是新增还是编辑
const request = formData.id ? this.pdoApi.updatePdo(formData) : this.pdoApi.addPdo(formData)
request.then(res => {
if (res.code === 200) {
this.$message.success('保存成功');
this.dialogVisible = false;
this.getPdoList() // 刷新列表
} else this.$message.error(res.msg || '保存失败')
}).finally(() => {
this.saveLoading = false
})
},
}
}
</script>
<style lang="scss" scoped>
.pdo-container {
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
padding: 15px;
background: #f5f5f5;
overflow: hidden;
}
.pdo-header {
background: #ffffff;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 15px;
margin-bottom: 15px;
flex-shrink: 0;
}
.card-grid-container {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 5px;
margin-bottom: 15px;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #c0c0c0;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background: #f0f0f0;
}
}
.card-col {
margin-bottom: 10px;
}
.parameter-card {
border: 1px solid #d4d4d4;
border-radius: 2px;
cursor: pointer;
transition: all 0.2s;
&.card-selected {
border-color: #999;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
background: #fafafa;
}
::v-deep .el-card__header {
padding: 6px 8px;
background: #f8f8f8;
border-bottom: 1px solid #e0e0e0;
}
&:hover {
border-color: #999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
}
.card-header {
.card-title {
font-weight: 600;
font-size: 13px;
color: #333;
margin-bottom: 2px;
line-height: 1.4;
}
.card-subtitle {
font-size: 11px;
color: #888;
line-height: 1.3;
}
}
.card-body {
.param-groups-row {
display: flex;
gap: 8px;
.param-group {
flex: 1;
min-width: 0;
.group-title {
font-size: 11px;
font-weight: 600;
color: #555;
padding: 3px 0;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 4px;
background: #f5f5f5;
padding-left: 4px;
padding-right: 4px;
margin-left: -4px;
margin-right: -4px;
text-align: center;
}
.param-list {
.param-line {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 0;
border-bottom: 1px dotted #e8e8e8;
&:last-child {
border-bottom: none;
}
.param-label {
color: #777;
font-size: 11px;
flex-shrink: 0;
margin-right: 8px;
}
.param-value {
color: #333;
font-weight: 500;
font-size: 11px;
text-align: right;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
}
.card-footer {
display: flex;
justify-content: flex-end;
gap: 6px;
padding-top: 6px;
border-top: 1px solid #e0e0e0;
margin-top: 6px;
.el-button {
font-size: 11px;
padding: 2px 6px;
}
}
.empty-data {
text-align: center;
padding: 40px 0;
}
.statistics-container {
flex: 0 0 auto;
background: #ffffff;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 0;
display: flex;
flex-direction: column;
height: 280px;
}
.statistics-header {
padding: 8px 15px;
background: #f8f8f8;
border-bottom: 1px solid #e0e0e0;
flex-shrink: 0;
.selected-info {
display: flex;
align-items: center;
font-size: 13px;
&.empty {
color: #999;
i {
color: #bbb;
margin-right: 6px;
}
}
i {
color: #67c23a;
margin-right: 6px;
font-size: 14px;
}
.selected-label {
color: #666;
margin-right: 6px;
font-weight: 500;
}
.selected-value {
color: #333;
font-weight: 600;
margin-right: 8px;
}
.selected-detail {
color: #888;
font-size: 12px;
}
}
}
.statistics-content {
flex: 1;
min-height: 0;
padding: 12px 15px;
}
.summary-col {
height: 100%;
}
.summary-wrapper {
height: 100%;
display: flex;
flex-direction: column;
border-right: 1px solid #e8e8e8;
padding-right: 15px;
overflow: hidden;
}
.summary-header {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #e8e8e8;
}
.chart-col {
height: 100%;
}
.chart-wrapper {
height: 100%;
padding-left: 15px;
}
</style>