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

前端修复

Browse Source
This commit is contained in:
86156
2025-12-20 15:56:30 +08:00
parent c5b5d740e8
commit 9661fe2a77
6 changed files with 737 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/l2/src/views/l2/pdo/components/line.vue
View File

@@ -36,10 +36,27 @@ export default {
},
data() {
return {
// 参数列表来源于 DeviceEnum 定义的监测字段
paramFields: [
{ label: '带钢速度', value: 'stripSpeed' },
{ label: '张力PorBr1', value: 'tensionPorBr1' },
{ label: '清洗电压', value: 'cleaningVoltage' }
{ label: '开卷张力1#', value: 'tensionPorBr1' },
{ label: '开卷张力2#', value: 'tensionPorBr2' },
{ label: '清洗电压', value: 'cleaningVoltage' },
{ label: '清洗电流', value: 'cleaningCurrent' },
{ label: '碱液浓度', value: 'alkaliConcentration' },
{ label: '碱液温度', value: 'alkaliTemperature' },
{ label: 'PH炉出口温度', value: 'phfExitStripTemp' },
{ label: '加热段出口温度', value: 'rtfExitStripTemp' },
{ label: '冷却段出口温度', value: 'jcsExitStripTemp' },
{ label: '均衡段出口温度', value: 'scsExitStripTemp' },
{ label: '锌锅温度', value: 'potTemperature' },
{ label: '锌锅功率', value: 'zincPotPower' },
{ label: '燃气消耗', value: 'gasConsumption' },
{ label: '冷却塔温度', value: 'coolingTowerStripTemp' },
{ label: '光整机张力', value: 'tensionBr5Tm' },
{ label: 'TM出口速度', value: 'stripSpeedTmExit' },
{ label: '拉矫延伸率', value: 'tlElongation' },
{ label: '拉矫张力', value: 'tensionTlBr7' }
],
paramField: 'stripSpeed',
treeProps: {
@@ -155,8 +172,12 @@ export default {
drawLineChart() {
if (!this.chart) return;
// 清理旧图层，避免“暂无数据”残留
this.chart.clear();
const option = {
backgroundColor: 'transparent',
graphic: [], // 清除占位/无数据图层
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -281,7 +302,7 @@ export default {
]
};
this.chart.setOption(option);
this.chart.setOption(option, true);
},
// 绘制空图表（未选择实绩）

76
apps/l2/src/views/l2/pdo/index.vue
View File

@@ -25,19 +25,19 @@
<!-- 卡片网格布局 -->
<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"
<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"
<el-card
class="parameter-card"
shadow="never"
:body-style="{ padding: '8px' }"
:class="{ 'card-selected': currentRow.exitMatId === item.exitMatId }"
@click.native="handleRowClick(item)"
@@ -144,7 +144,7 @@
<!-- 统计汇总和图表区域 -->
<div class="statistics-container">
<div class="statistics-header">
<div class="selected-info" v-if="currentRow && currentRow.exitMatId">
<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>
@@ -164,17 +164,17 @@
</el-col>
<el-col :span="20" class="chart-col">
<div class="chart-wrapper">
<line-chart :enCoilID="currentRow.exitMatId" />
<line-chart :enCoilID="currentRow.entryMatId" />
</div>
</el-col>
</el-row>
</div>
<!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
<el-dialog
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="80%"
:visible.sync="dialogVisible"
width="80%"
:close-on-click-modal="false"
>
<!-- 补录（新增）：仅显示数据修正组件，无tab -->
@@ -190,7 +190,7 @@
<el-tabs v-else v-model="activeTab">
<el-tab-pane label="数据修正" name="basicInfo">
<pdo-data-correction
:detail="formData"
:detail="formData"
:save-callback="handleSave"
:save-loading="saveLoading"
></pdo-data-correction>
@@ -264,7 +264,7 @@ export default {
this.btnLoading = false
})
},
// 查询（保持不变）
// 查询（保持不变）
handleQuery() {
this.btnLoading = true;
this.getPdoList()
@@ -375,16 +375,16 @@ export default {
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;
}
@@ -399,19 +399,19 @@ export default {
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);
@@ -426,7 +426,7 @@ export default {
margin-bottom: 2px;
line-height: 1.4;
}
.card-subtitle {
font-size: 11px;
color: #888;
@@ -438,11 +438,11 @@ export default {
.param-groups-row {
display: flex;
gap: 8px;
.param-group {
flex: 1;
min-width: 0;
.group-title {
font-size: 11px;
font-weight: 600;
@@ -457,7 +457,7 @@ export default {
margin-right: -4px;
text-align: center;
}
.param-list {
.param-line {
display: flex;
@@ -465,18 +465,18 @@ export default {
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;
@@ -500,7 +500,7 @@ export default {
padding-top: 6px;
border-top: 1px solid #e0e0e0;
margin-top: 6px;
.el-button {
font-size: 11px;
padding: 2px 6px;
@@ -528,39 +528,39 @@ export default {
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;
@@ -604,4 +604,4 @@ export default {
height: 100%;
padding-left: 15px;
}
</style>
</style>

26
apps/l2/src/views/l2/plan/components/PlanRecommendPanel.vue
View File

@@ -334,17 +334,27 @@ export default {
},
methods: {
getSteelGradeLabel(gradeId) {
const match = this.steelGradeList.find(item => item.gradeid === gradeId)
return match ? match.name : (gradeId || '')
if (gradeId === undefined || gradeId === null) return ''
const gid = String(gradeId)
const match = this.steelGradeList.find(
item =>
String(item.gradeid) === gid ||
String(item.gradeId) === gid ||
String(item.name) === gid ||
String(item.gradeName || '') === gid
)
return match ? (match.name || match.gradeName || gid) : gid
},
async fetchSteelRecommendations() {
const token = ++this.steelFetchToken
this.loadingSteel = true
try {
const gradeLabel = this.getSteelGradeLabel(this.steelGrade)
const response = await listRollforce({
pageNum: 1,
pageSize: 8,
steelGrade: this.steelGrade
steelGrade: gradeLabel || this.steelGrade,
gradeId: this.steelGrade
})
if (token !== this.steelFetchToken) return
const rows = Array.isArray(response.rows) ? response.rows : []
@@ -467,11 +477,16 @@ export default {
}
},
mapRollforceRow(row, sourceLabel = '光整机轧制力') {
const gradeLabel =
row.steelGradeName ||
row.steelGradeLabel ||
this.getSteelGradeLabel(row.steelGrade) ||
row.steelGrade
return {
_id: `rollforce-${row.id || createId()}`,
sourceLabel,
steelGrade: row.steelGrade,
steelGradeLabel: this.getSteelGradeLabel(row.steelGrade),
steelGradeLabel: gradeLabel,
entryThick: row.thick,
yieldPoint: row.yieldStren,
spmElongation: row.elong,
@@ -487,11 +502,12 @@ export default {
}
},
mapTensionRow(row) {
const gradeLabel = row.steelGradeName || this.getSteelGradeLabel(row.steelGrade) || row.steelGrade
return {
_id: `tension-${row.id || createId()}`,
sourceLabel: '全线张力',
steelGrade: row.steelGrade,
steelGradeLabel: row.steelGrade ? this.getSteelGradeLabel(row.steelGrade) : '',
steelGradeLabel: gradeLabel || '',
entryThick: row.thick,
yieldPoint: row.yieldStren,
spmElongation: row.elong,

40
apps/l2/src/views/l2/plan/index.vue
View File

@@ -294,6 +294,21 @@
min="0"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出口目标长度" prop="exitLengthTar">
<el-input v-model="form.exitLengthTar" placeholder="请输入出口目标长度(mm)" type="number" step="1" min="0"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出口目标厚度" prop="exitThickTar">
<el-input v-model="form.exitThickTar" placeholder="请输入出口目标厚度(mm)" type="number" step="0.01" min="0"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出口目标宽度" prop="exitWidthTar">
<el-input v-model="form.exitWidthTar" placeholder="请输入出口目标宽度(mm)" type="number" step="1" min="0"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
@@ -611,7 +626,17 @@ export default {
},
handleApplySteelGrade(payload) {
if (!payload) return
if (payload.steelGrade) this.form.steelGrade = payload.steelGrade
if (payload.steelGrade) {
const gid = String(payload.steelGrade)
const match = this.steelGradeList.find(item =>
String(item.gradeid) === gid ||
String(item.gradeId) === gid ||
String(item.name) === gid ||
String(item.gradeName || '') === gid
)
// 下拉选择器以 gradeid 为 value，确保回填 id 以显示名称
this.form.steelGrade = match ? match.gradeid : payload.steelGrade
}
if (payload.entryThick) this.form.entryThick = payload.entryThick
if (payload.entryWidth) this.form.entryWidth = payload.entryWidth
if (payload.yieldPoint) this.form.yieldPoint = payload.yieldPoint
@@ -667,15 +692,20 @@ export default {
return null
}
// 从matMapList中查找匹配的位置
const position = this.matMapList.find(item =>
// 从matMapList中查找匹配的位置（若有多个匹配，取posIdx最大/最靠后的为当前位置）
const positions = this.matMapList.filter(item =>
(item.planId && item.planId === plan.planid) ||
(item.planId && item.planId === plan.planId) ||
(item.matId && item.matId === plan.coilid) ||
(item.matId && item.matId === plan.matId)
)
return position
if (positions.length === 0) return null
return positions.reduce((prev, cur) => {
const p = prev?.posIdx ?? -1
const c = cur?.posIdx ?? -1
return c > p ? cur : prev
})
},
// 获取计划列表数据（支持传入清理后的查询参数）
async getList(cleanParams) {

148
apps/l2/src/views/l2/setup/pdi.vue
View File

@@ -61,7 +61,7 @@
class="card-checkbox"
></el-checkbox>
</div>
<div class="card-subtitle">计划号: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }}</div>
<div class="card-subtitle">计划ID: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }}</div>
</div>
<div class="card-body">
<!-- 全线张力 -->
@@ -69,61 +69,61 @@
<div class="group-title">全线张力</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">开卷机:</span>
<span class="param-label">开卷机张力:</span>
<span class="param-value">{{ item.porTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">入口活套:</span>
<span class="param-label">入口活套张力:</span>
<span class="param-value">{{ item.celTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">清洗段:</span>
<span class="param-label">清洗段张力:</span>
<span class="param-value">{{ item.cleanTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">炉区:</span>
<span class="param-label">炉区张力:</span>
<span class="param-value">{{ item.furTension || '-' }}</span>
</div>
</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">冷却塔:</span>
<span class="param-label">冷却塔张力:</span>
<span class="param-value">{{ item.towerTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">光整机-不投:</span>
<span class="param-label">光整机不投张力:</span>
<span class="param-value">{{ item.tmNoneTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">光整机入口:</span>
<span class="param-label">光整机入口张力:</span>
<span class="param-value">{{ item.tmEntryTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">光整机出口:</span>
<span class="param-label">光整机出口张力:</span>
<span class="param-value">{{ item.tmExitTension || '-' }}</span>
</div>
</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">拉矫机-不投:</span>
<span class="param-label">拉矫机不投张力:</span>
<span class="param-value">{{ item.tlNoneTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">拉矫机出口:</span>
<span class="param-label">拉矫机出口张力:</span>
<span class="param-value">{{ item.tlExitTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">后处理:</span>
<span class="param-label">后处理张力:</span>
<span class="param-value">{{ item.coatTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">出口活套:</span>
<span class="param-label">出口活套张力:</span>
<span class="param-value">{{ item.cxlTension || '-' }}</span>
</div>
</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">卷取机:</span>
<span class="param-label">卷取机张力:</span>
<span class="param-value">{{ item.trTension || '-' }}</span>
</div>
<div class="param-item"></div>
@@ -137,11 +137,11 @@
<div class="group-title">光整机参数</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">轧制力:</span>
<span class="param-label">光整机轧制力:</span>
<span class="param-value">{{ item.tmRollforce || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">弯辊力:</span>
<span class="param-label">光整机弯辊力:</span>
<span class="param-value">{{ item.tmBendforce || '-' }}</span>
</div>
<div class="param-item">
@@ -160,7 +160,7 @@
<div class="group-title">拉矫机参数</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">延伸率:</span>
<span class="param-label">拉矫机延伸率:</span>
<span class="param-value">{{ item.tlElong || '-' }}</span>
</div>
<div class="param-item">
@@ -180,7 +180,7 @@
<!-- 炉火段 -->
<div class="param-group">
<div class="group-title">炉火段</div>
<div class="group-title">炉段温度</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">预热段出口板温:</span>
@@ -221,20 +221,43 @@
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 统计图区域：复用 PDO 的折线图组件，基于选中的钢卷号 -->
<div class="statistics-container">
<div class="statistics-header">
<div v-if="currentRow && currentRow.coilid" class="selected-info">
<i class="el-icon-check"></i>
<span class="selected-label">已选中:</span>
<span class="selected-value">钢卷 {{ currentRow.coilid }}</span>
<span class="selected-detail" v-if="currentRow.planid">计划号: {{ currentRow.planid }}</span>
</div>
<div v-else class="selected-info empty">
<i class="el-icon-info"></i>
<span>请选择上方卡片查看图表</span>
</div>
</div>
<div class="chart-wrapper">
<line-chart v-if="currentRow && currentRow.coilid" :enCoilID="currentRow.coilid" />
<div v-else class="chart-placeholder">请选择钢卷以查看工艺曲线</div>
</div>
</div>
</div>
</template>
<script>
import { listSetup, getSetup, delSetup, addSetup, updateSetup } from "@/api/business/setup";
import LineChart from '../pdo/components/line.vue'
export default {
name: "Setup",
components: { LineChart },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
currentRow: null,
// 非单个禁用
single: true,
// 非多个禁用
@@ -342,6 +365,7 @@ export default {
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
this.currentRow = null
},
/** 重置按钮操作 */
resetQuery() {
@@ -356,19 +380,20 @@ export default {
},
// 判断是否选中
isSelected(item) {
return this.ids.includes(item.ID)
return this.ids.includes(this.getItemKey(item))
},
getItemKey(item) {
return item.id ?? item.ID
},
// 切换选中状态
toggleSelection(item, checked) {
const key = this.getItemKey(item)
if (checked) {
if (!this.ids.includes(item.ID)) {
this.ids.push(item.ID)
}
this.ids = [key];
this.currentRow = item;
} else {
const index = this.ids.indexOf(item.ID)
if (index > -1) {
this.ids.splice(index, 1)
}
this.ids = [];
this.currentRow = null;
}
this.single = this.ids.length !== 1
this.multiple = this.ids.length === 0
@@ -436,7 +461,7 @@ export default {
flex-direction: column;
padding: 15px;
background: #f5f5f5;
overflow: hidden;
overflow: auto;
}
.pdi-header {
@@ -450,8 +475,7 @@ export default {
.card-grid-container {
flex: 1;
overflow-y: auto;
padding-right: 5px;
overflow: visible;
min-height: 0;
&::-webkit-scrollbar {
@@ -473,7 +497,7 @@ export default {
}
.parameter-card {
height: 100%;
height: auto;
border: 1px solid #d4d4d4;
border-radius: 2px;
@@ -592,4 +616,68 @@ export default {
text-align: center;
padding: 40px 0;
}
/* 统计图样式，复用 PDO 工业风 */
.statistics-container {
margin-top: 16px;
background: #ffffff;
border: 1px solid #d4d4d4;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
padding: 12px 12px 16px;
}
.statistics-header {
display: flex;
align-items: center;
padding: 8px 0 10px;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 10px;
}
.selected-info {
display: flex;
align-items: center;
gap: 8px;
color: #303133;
font-size: 13px;
}
.selected-info i {
color: #67c23a;
}
.selected-info.empty {
color: #999;
}
.selected-label {
font-weight: 600;
}
.selected-value {
color: #409eff;
font-weight: 600;
}
.selected-detail {
color: #606266;
}
.chart-wrapper {
height: 360px;
background: #f9fafc;
border: 1px dashed #dcdfe6;
border-radius: 6px;
padding: 8px;
}
.chart-placeholder {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #909399;
font-size: 13px;
}
</style>

1064
apps/l2/src/views/l2/track/rect.vue
View File

File diff suppressed because it is too large Load Diff