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

refactor(l2): 优化组件布局和代码格式，改进图表数据采样逻辑

Browse Source 
重构多个Vue组件，统一代码格式并优化布局。主要修改包括：
1. 删除未使用的print.vue组件
2. 优化line.vue图表数据采样逻辑，添加加载状态
3. 调整pdi.vue布局为左右分栏式设计
4. 统一组件代码缩进和属性换行格式
This commit is contained in:
砂糖
2025-12-22 11:34:50 +08:00
parent 9661fe2a77
commit dc06aea9f2
4 changed files with 252 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,11 @@
<template> <template>
<div class="monitoring-container"> <div class="monitoring-container">
<div class="chart-wrapper"> <div class="chart-wrapper" v-loading="loading">
<!-- 参数选择下拉框 --> <!-- 参数选择下拉框 -->
<el-select <el-select v-model="paramField" class="param-select" @change="handleParamChange" size="mini">
v-model="paramField" <el-option v-for="item in paramFields" :key="item.value" :label="item.label" :value="item.value"></el-option>
class="param-select"
@change="handleParamChange"
size="mini"
>
<el-option
v-for="item in paramFields"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
<!-- 图表容器 --> <!-- 图表容器 -->
<div ref="chart" class="chart-content"></div> <div ref="chart" class="chart-content"></div>
</div> </div>
@@ -67,17 +57,22 @@ export default {
chart: null, // 图表实例 chart: null, // 图表实例
chartData: [], // 图表数据 chartData: [], // 图表数据
timeStamps: [], // 时间戳 timeStamps: [], // 时间戳
originalTimeStamps: [], // 原始时间戳（用于采样）
originalChartData: [], // 原始图表数据（用于采样）
timeRange: '1', // 时间范围(分钟) timeRange: '1', // 时间范围(分钟)
socket: null, // 模拟socket socket: null, // 模拟socket
latestValue: 0, latestValue: 0,
maxValue: 0, maxValue: 0,
minValue: 0, minValue: 0,
avgValue: 0 avgValue: 0,
loading: false,
maxXAxisLabels: 20 // X轴最多显示的标签数量
} }
}, },
watch: { watch: {
enCoilID: { enCoilID: {
handler(newVal) { handler(newVal) {
console.log('enCoilID 变化:', newVal);
if (newVal) { if (newVal) {
this.fetchChartData(); this.fetchChartData();
} else { } else {
@@ -86,13 +81,6 @@ export default {
}, },
immediate: true immediate: true
}, },
paramField: {
handler() {
if (this.enCoilID) {
this.fetchChartData();
}
}
}
}, },
mounted() { mounted() {
// 初始化图表 // 初始化图表
@@ -113,7 +101,7 @@ export default {
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.chart);
// 监听窗口大小变化，调整图表尺寸 // 监听窗口大小变化，调整图表尺寸
window.addEventListener('resize', this.handleResize); window.addEventListener('resize', this.handleResize);
// 初始显示 // 初始显示
if (this.enCoilID) { if (this.enCoilID) {
this.fetchChartData(); this.fetchChartData();
@@ -123,16 +111,20 @@ export default {
} }
}); });
}, },
// 处理窗口大小变化 // 处理窗口大小变化
handleResize() { handleResize() {
if (this.chart) { if (this.chart) {
this.chart.resize(); this.chart.resize();
} }
}, },
// 获取图表数据 // 获取图表数据
fetchChartData() { fetchChartData() {
if (!this.enCoilID || !this.paramField) {
this.drawNoDataChart();
}
this.loading = true;
getSegmentList({ getSegmentList({
enCoilID: this.enCoilID, enCoilID: this.enCoilID,
paramField: this.paramField paramField: this.paramField
@@ -141,37 +133,73 @@ export default {
if (res.data && res.data.length) { if (res.data && res.data.length) {
this.processChartData(res.data); this.processChartData(res.data);
this.drawLineChart(); this.drawLineChart();
console.log('有数据，绘制折线图')
} else { } else {
this.drawNoDataChart(); this.drawNoDataChart();
console.log('无数据，清空折线图')
} }
}).catch(err => { }).catch(err => {
console.error('获取数据失败:', err); console.error('获取数据失败:', err);
this.drawErrorChart(); this.drawErrorChart();
}).finally(_ => {
this.loading = false;
}); });
}, },
// 处理图表数据 // 处理图表数据
processChartData(rawData) { processChartData(rawData) {
// 排序数据（按segNo，假设是时间戳或序号） // 排序数据（按segNo，假设是时间戳或序号）
rawData.sort((a, b) => a.segNo - b.segNo); rawData.sort((a, b) => a.segNo - b.segNo);
// 提取时间戳和数值 // 保存原始数据
this.timeStamps = rawData.map(item => item.segNo); this.originalTimeStamps = rawData.map(item => item.segNo);
this.chartData = rawData.map(item => parseFloat(item.value)); this.originalChartData = rawData.map(item => parseFloat(item.value));
// 计算统计值 // 根据数据量决定是否采样
if (this.chartData.length) { if (rawData.length > this.maxXAxisLabels) {
this.latestValue = this.chartData[this.chartData.length - 1]; // 数据采样 - 均匀采样
this.maxValue = Math.max(...this.chartData); this.sampleData(rawData);
this.minValue = Math.min(...this.chartData); } else {
this.avgValue = this.chartData.reduce((sum, val) => sum + val, 0) / this.chartData.length; // 数据量适中，直接使用全部数据
this.timeStamps = this.originalTimeStamps;
this.chartData = this.originalChartData;
}
// 计算统计值（基于原始数据）
if (this.originalChartData.length) {
this.latestValue = this.originalChartData[this.originalChartData.length - 1];
this.maxValue = Math.max(...this.originalChartData);
this.minValue = Math.min(...this.originalChartData);
this.avgValue = this.originalChartData.reduce((sum, val) => sum + val, 0) / this.originalChartData.length;
} }
}, },
// 数据采样方法
sampleData(rawData) {
const total = rawData.length;
const sampleInterval = Math.ceil(total / this.maxXAxisLabels);
// 初始化采样数组
this.timeStamps = [];
this.chartData = [];
// 均匀采样
for (let i = 0; i < total; i += sampleInterval) {
this.timeStamps.push(rawData[i].segNo);
this.chartData.push(parseFloat(rawData[i].value));
}
// 确保最后一个数据点被包含
if (this.timeStamps[this.timeStamps.length - 1] !== rawData[total - 1].segNo) {
this.timeStamps.push(rawData[total - 1].segNo);
this.chartData.push(parseFloat(rawData[total - 1].value));
}
},
// 绘制折线图 // 绘制折线图
drawLineChart() { drawLineChart() {
if (!this.chart) return; if (!this.chart) return;
// 清理旧图层，避免“暂无数据”残留 // 清理旧图层，避免“暂无数据”残留
this.chart.clear(); this.chart.clear();
@@ -192,7 +220,7 @@ export default {
formatter: (params) => { formatter: (params) => {
const param = params[0]; const param = params[0];
return ` return `
时间: ${param.name}<br> 序号: ${param.name}<br>
值: ${param.value.toFixed(2)}<br> 值: ${param.value.toFixed(2)}<br>
单位: ${this.getParamUnit()} 单位: ${this.getParamUnit()}
`; `;
@@ -201,7 +229,7 @@ export default {
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '10%', // 增加底部空间，防止标签被截断
top: '15%', top: '15%',
containLabel: true containLabel: true
}, },
@@ -217,7 +245,11 @@ export default {
axisLabel: { axisLabel: {
color: '#666', color: '#666',
rotate: 45, rotate: 45,
interval: 0 // 动态计算标签显示间隔
interval: (index, value) => {
// 如果数据量大于maxXAxisLabels，按采样后的间隔显示
return index % Math.max(1, Math.ceil(this.timeStamps.length / this.maxXAxisLabels)) === 0;
}
}, },
splitLine: { splitLine: {
show: false show: false
@@ -301,14 +333,14 @@ export default {
} }
] ]
}; };
this.chart.setOption(option, true); this.chart.setOption(option, true);
}, },
// 绘制空图表（未选择实绩） // 绘制空图表（未选择实绩）
drawEmptyChart() { drawEmptyChart() {
if (!this.chart) return; if (!this.chart) return;
const option = { const option = {
graphic: { graphic: {
elements: [ elements: [
@@ -334,14 +366,17 @@ export default {
}, },
series: [] series: []
}; };
this.chart.setOption(option); this.chart.setOption(option);
}, },
// 绘制无数据图表 // 绘制无数据图表
drawNoDataChart() { drawNoDataChart() {
if (!this.chart) return; if (!this.chart) return;
// 先清除原有图表内容
this.chart.clear();
const option = { const option = {
graphic: { graphic: {
elements: [ elements: [
@@ -367,14 +402,14 @@ export default {
}, },
series: [] series: []
}; };
this.chart.setOption(option); this.chart.setOption(option);
}, },
// 绘制错误图表 // 绘制错误图表
drawErrorChart() { drawErrorChart() {
if (!this.chart) return; if (!this.chart) return;
const option = { const option = {
graphic: { graphic: {
elements: [ elements: [
@@ -400,38 +435,64 @@ export default {
}, },
series: [] series: []
}; };
this.chart.setOption(option); this.chart.setOption(option);
}, },
// 处理参数变更 // 处理参数变更
handleParamChange() { handleParamChange() {
// 清空现有数据 // 清空现有数据
this.chartData = []; this.chartData = [];
this.timeStamps = []; this.timeStamps = [];
this.originalTimeStamps = [];
this.originalChartData = [];
// 重新获取数据 // 重新获取数据
if (this.enCoilID) { if (this.enCoilID) {
this.fetchChartData(); this.fetchChartData();
} }
}, },
// 获取参数标签 // 获取参数标签
getParamLabel() { getParamLabel() {
const param = this.paramFields.find(item => item.value === this.paramField); const param = this.paramFields.find(item => item.value === this.paramField);
return param ? param.label : this.paramField; return param ? param.label : this.paramField;
}, },
// 获取参数单位 // 获取参数单位
getParamUnit() { getParamUnit() {
// 根据不同参数返回不同单位 // 根据不同参数返回不同单位
switch(this.paramField) { switch (this.paramField) {
case 'stripSpeed': case 'stripSpeed':
return 'm/s'; return 'm/s';
case 'tensionPorBr1': case 'tensionPorBr1':
case 'tensionPorBr2':
return 'N'; return 'N';
case 'cleaningVoltage': case 'cleaningVoltage':
return 'V'; return 'V';
case 'cleaningCurrent':
return 'A';
case 'alkaliConcentration':
return '%';
case 'alkaliTemperature':
case 'phfExitStripTemp':
case 'rtfExitStripTemp':
case 'jcsExitStripTemp':
case 'scsExitStripTemp':
case 'potTemperature':
case 'coolingTowerStripTemp':
return '°C';
case 'zincPotPower':
return 'kW';
case 'gasConsumption':
return 'm³/h';
case 'tensionBr5Tm':
case 'tensionTlBr7':
return 'N';
case 'stripSpeedTmExit':
return 'm/s';
case 'tlElongation':
return '%';
default: default:
return ''; return '';
} }
@@ -460,7 +521,7 @@ export default {
right: 10px; right: 10px;
z-index: 10; z-index: 10;
width: 150px; width: 150px;
::v-deep .el-input__inner { ::v-deep .el-input__inner {
border-color: #d4d4d4; border-color: #d4d4d4;
} }
@@ -471,4 +532,4 @@ export default {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
} }
</style> </style>

0
apps/l2/src/views/l2/pdo/components/print.vue
View File

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

@@ -7,12 +7,12 @@
<el-input v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input> <el-input v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="开始日期" prop="startDate"> <el-form-item label="开始日期" prop="startDate">
<el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始日期" <el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd"
value-format="yyyy-MM-dd" clearable></el-date-picker> clearable></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="结束日期" prop="endDate"> <el-form-item label="结束日期" prop="endDate">
<el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束日期" <el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd"
value-format="yyyy-MM-dd" clearable></el-date-picker> clearable></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button> <el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button>
@@ -25,23 +25,10 @@
<!-- 卡片网格布局 --> <!-- 卡片网格布局 -->
<div v-loading="tableLoading" class="card-grid-container"> <div v-loading="tableLoading" class="card-grid-container">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col <el-col v-for="(item, index) in tableData" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="5"
v-for="(item, index) in tableData" class="card-col">
:key="index" <el-card class="parameter-card" shadow="never" :body-style="{ padding: '8px' }"
:xs="24" :class="{ 'card-selected': currentRow.exitMatId === item.exitMatId }" @click.native="handleRowClick(item)">
: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 slot="header" class="card-header">
<div class="card-title">成品卷: {{ item.exitMatId || '-' }}</div> <div class="card-title">成品卷: {{ item.exitMatId || '-' }}</div>
<div class="card-subtitle">{{ item.entryMatId || '-' }} | {{ item.planNo || '-' }}</div> <div class="card-subtitle">{{ item.entryMatId || '-' }} | {{ item.planNo || '-' }}</div>
@@ -119,23 +106,13 @@
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<el-button <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(item)">操作</el-button>
size="mini" <el-button size="mini" type="text" icon="el-icon-delete" :loading="item.deleteLoading"
type="text" @click.stop="handleDelete(item)">删除</el-button>
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> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<div v-if="tableData.length === 0 && !tableLoading" class="empty-data"> <div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
<el-empty description="暂无数据"></el-empty> <el-empty description="暂无数据"></el-empty>
</div> </div>
@@ -159,46 +136,33 @@
<el-col :span="4" class="summary-col"> <el-col :span="4" class="summary-col">
<div class="summary-wrapper"> <div class="summary-wrapper">
<div class="summary-header">统计汇总</div> <div class="summary-header">统计汇总</div>
<pdo-summary :table-data="tableData" /> <pdo-summary :table-data="tableData" />
</div> </div>
</el-col> </el-col>
<el-col :span="20" class="chart-col"> <el-col :span="20" class="chart-col">
<div class="chart-wrapper"> <div class="chart-wrapper">
<line-chart :enCoilID="currentRow.entryMatId" /> <line-chart :enCoilID="currentRow.entryMatId" />
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<!-- 编辑/新增弹窗：根据isAdd条件渲染内容 --> <!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
<el-dialog <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
:title="dialogTitle"
:visible.sync="dialogVisible"
width="80%"
:close-on-click-modal="false"
>
<!-- 补录（新增）：仅显示数据修正组件，无tab --> <!-- 补录（新增）：仅显示数据修正组件，无tab -->
<div v-if="isAdd"> <div v-if="isAdd">
<pdo-data-correction <pdo-data-correction :detail="formData" :save-callback="handleSave"
:detail="formData" :save-loading="saveLoading"></pdo-data-correction>
:save-callback="handleSave"
:save-loading="saveLoading"
></pdo-data-correction>
</div> </div>
<!-- 编辑：保留原有tab，显示数据修正+标签打印 --> <!-- 编辑：保留原有tab，显示数据修正+标签打印 -->
<el-tabs v-else v-model="activeTab"> <el-tabs v-else v-model="activeTab">
<el-tab-pane label="数据修正" name="basicInfo"> <el-tab-pane label="数据修正" name="basicInfo">
<pdo-data-correction <pdo-data-correction :detail="formData" :save-callback="handleSave"
:detail="formData" :save-loading="saveLoading"></pdo-data-correction>
:save-callback="handleSave"
:save-loading="saveLoading"
></pdo-data-correction>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="标签打印" name="labelPrint"> <el-tab-pane label="标签打印" name="labelPrint">
<pdo-label-print <pdo-label-print :detail="formData"></pdo-label-print>
:detail="formData"
></pdo-label-print>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-dialog> </el-dialog>

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

@@ -1,67 +1,57 @@
<template> <template>
<div class="pdi-container"> <div class="pdi-container">
<div class="pdi-header">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="钢卷号" prop="coilid">
<el-input
v-model="queryParams.coilid"
placeholder="请输入钢卷号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="计划号" prop="planid">
<el-input
v-model="queryParams.planid"
placeholder="请输入计划号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</div>
<!-- 卡片网格布局 --> <!-- 卡片网格布局 -->
<div v-loading="loading" class="card-grid-container"> <div v-loading="loading" class="card-grid-container">
<el-row :gutter="12"> <el-row :gutter="10">
<el-col <el-col :span="12">
v-for="(item, index) in setupList" <div class="pdi-header">
:key="index" <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
:xs="24" label-width="68px">
:sm="12" <el-form-item label="钢卷号" prop="coilid">
:md="8" <el-input v-model="queryParams.coilid" placeholder="请输入钢卷号" clearable
:lg="5" @keyup.enter.native="handleQuery" />
:xl="4" </el-form-item>
class="card-col" <el-form-item label="计划号" prop="planid">
> <el-input v-model="queryParams.planid" placeholder="请输入计划号" clearable
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }"> @keyup.enter.native="handleQuery" />
<div slot="header" class="card-header"> </el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</el-form-item>
</el-form>
</div>
<div v-if="setupList.length === 0 && !loading" class="empty-data">
<el-empty description="暂无数据"></el-empty>
</div>
<el-row v-else :gutter="10">
<el-col v-for="(item, index) in setupList" :key="index" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
class="card-col">
<el-card class="parameter-card" @click.native="handleClick(item)" shadow="never"
:body-style="{ padding: '10px' }">
<div class="card-header">
<div class="card-title-row">
<span class="card-title">钢卷号: {{ item.coilid || '-' }}</span>
</div>
<div class="card-subtitle">计划ID: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }}</div>
</div>
<div class="card-footer">
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
</div>
</el-card>
</el-col>
</el-row>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
</el-col>
<el-col :span="12">
<div v-if="currentRow && currentRow.coilid" class="parameter-detail">
<div class="card-header">
<div class="card-title-row"> <div class="card-title-row">
<span class="card-title">钢卷号: {{ item.coilid || '-' }}</span> <span class="card-title">钢卷号: {{ currentRow.coilid || '-' }}</span>
<el-checkbox
:value="isSelected(item)"
@change="toggleSelection(item, $event)"
class="card-checkbox"
></el-checkbox>
</div> </div>
<div class="card-subtitle">计划ID: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }}</div> <div class="card-subtitle">计划ID: {{ currentRow.planid || '-' }} | 更改次数: {{ currentRow.type || '-' }}</div>
</div> </div>
<div class="card-body"> <div class="card-body">
<!-- 全线张力 --> <!-- 全线张力 -->
@@ -70,61 +60,61 @@
<div class="param-row"> <div class="param-row">
<div class="param-item"> <div class="param-item">
<span class="param-label">开卷机张力:</span> <span class="param-label">开卷机张力:</span>
<span class="param-value">{{ item.porTension || '-' }}</span> <span class="param-value">{{ currentRow.porTension || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">入口活套张力:</span> <span class="param-label">入口活套张力:</span>
<span class="param-value">{{ item.celTension || '-' }}</span> <span class="param-value">{{ currentRow.celTension || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">清洗段张力:</span> <span class="param-label">清洗段张力:</span>
<span class="param-value">{{ item.cleanTension || '-' }}</span> <span class="param-value">{{ currentRow.cleanTension || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">炉区张力:</span> <span class="param-label">炉区张力:</span>
<span class="param-value">{{ item.furTension || '-' }}</span> <span class="param-value">{{ currentRow.furTension || '-' }}</span>
</div> </div>
</div> </div>
<div class="param-row"> <div class="param-row">
<div class="param-item"> <div class="param-item">
<span class="param-label">冷却塔张力:</span> <span class="param-label">冷却塔张力:</span>
<span class="param-value">{{ item.towerTension || '-' }}</span> <span class="param-value">{{ currentRow.towerTension || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">光整机不投张力:</span> <span class="param-label">光整机不投张力:</span>
<span class="param-value">{{ item.tmNoneTension || '-' }}</span> <span class="param-value">{{ currentRow.tmNoneTension || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">光整机入口张力:</span> <span class="param-label">光整机入口张力:</span>
<span class="param-value">{{ item.tmEntryTension || '-' }}</span> <span class="param-value">{{ currentRow.tmEntryTension || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">光整机出口张力:</span> <span class="param-label">光整机出口张力:</span>
<span class="param-value">{{ item.tmExitTension || '-' }}</span> <span class="param-value">{{ currentRow.tmExitTension || '-' }}</span>
</div> </div>
</div> </div>
<div class="param-row"> <div class="param-row">
<div class="param-item"> <div class="param-item">
<span class="param-label">拉矫机不投张力:</span> <span class="param-label">拉矫机不投张力:</span>
<span class="param-value">{{ item.tlNoneTension || '-' }}</span> <span class="param-value">{{ currentRow.tlNoneTension || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">拉矫机出口张力:</span> <span class="param-label">拉矫机出口张力:</span>
<span class="param-value">{{ item.tlExitTension || '-' }}</span> <span class="param-value">{{ currentRow.tlExitTension || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">后处理张力:</span> <span class="param-label">后处理张力:</span>
<span class="param-value">{{ item.coatTension || '-' }}</span> <span class="param-value">{{ currentRow.coatTension || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">出口活套张力:</span> <span class="param-label">出口活套张力:</span>
<span class="param-value">{{ item.cxlTension || '-' }}</span> <span class="param-value">{{ currentRow.cxlTension || '-' }}</span>
</div> </div>
</div> </div>
<div class="param-row"> <div class="param-row">
<div class="param-item"> <div class="param-item">
<span class="param-label">卷取机张力:</span> <span class="param-label">卷取机张力:</span>
<span class="param-value">{{ item.trTension || '-' }}</span> <span class="param-value">{{ currentRow.trTension || '-' }}</span>
</div> </div>
<div class="param-item"></div> <div class="param-item"></div>
<div class="param-item"></div> <div class="param-item"></div>
@@ -138,19 +128,19 @@
<div class="param-row"> <div class="param-row">
<div class="param-item"> <div class="param-item">
<span class="param-label">光整机轧制力:</span> <span class="param-label">光整机轧制力:</span>
<span class="param-value">{{ item.tmRollforce || '-' }}</span> <span class="param-value">{{ currentRow.tmRollforce || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">光整机弯辊力:</span> <span class="param-label">光整机弯辊力:</span>
<span class="param-value">{{ item.tmBendforce || '-' }}</span> <span class="param-value">{{ currentRow.tmBendforce || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">防皱辊插入量:</span> <span class="param-label">防皱辊插入量:</span>
<span class="param-value">{{ item.tmAcrMesh || '-' }}</span> <span class="param-value">{{ currentRow.tmAcrMesh || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">防颤辊插入量:</span> <span class="param-label">防颤辊插入量:</span>
<span class="param-value">{{ item.tmBrMesh || '-' }}</span> <span class="param-value">{{ currentRow.tmBrMesh || '-' }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -161,19 +151,19 @@
<div class="param-row"> <div class="param-row">
<div class="param-item"> <div class="param-item">
<span class="param-label">拉矫机延伸率:</span> <span class="param-label">拉矫机延伸率:</span>
<span class="param-value">{{ item.tlElong || '-' }}</span> <span class="param-value">{{ currentRow.tlElong || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">矫直辊插入量1:</span> <span class="param-label">矫直辊插入量1:</span>
<span class="param-value">{{ item.tlLvlMesh1 || '-' }}</span> <span class="param-value">{{ currentRow.tlLvlMesh1 || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">矫直辊插入量2:</span> <span class="param-label">矫直辊插入量2:</span>
<span class="param-value">{{ item.tlLvlMesh2 || '-' }}</span> <span class="param-value">{{ currentRow.tlLvlMesh2 || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">防横弓插入量:</span> <span class="param-label">防横弓插入量:</span>
<span class="param-value">{{ item.tlAcbMesh || '-' }}</span> <span class="param-value">{{ currentRow.tlAcbMesh || '-' }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -184,43 +174,26 @@
<div class="param-row"> <div class="param-row">
<div class="param-item"> <div class="param-item">
<span class="param-label">预热段出口板温:</span> <span class="param-label">预热段出口板温:</span>
<span class="param-value">{{ item.preheatingSection || '-' }}</span> <span class="param-value">{{ currentRow.preheatingSection || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">加热段出口板温:</span> <span class="param-label">加热段出口板温:</span>
<span class="param-value">{{ item.heatingSection || '-' }}</span> <span class="param-value">{{ currentRow.heatingSection || '-' }}</span>
</div> </div>
<div class="param-item"> <div class="param-item">
<span class="param-label">冷却段出口板温:</span> <span class="param-label">冷却段出口板温:</span>
<span class="param-value">{{ item.coolingSection || '-' }}</span> <span class="param-value">{{ currentRow.coolingSection || '-' }}</span>
</div> </div>
<div class="param-item"></div> <div class="param-item"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="card-footer"> </div>
<el-button
size="mini" <el-empty v-else description="请在左侧选择钢卷查看工艺历史"></el-empty>
type="text"
icon="el-icon-delete"
@click="handleDelete(item)"
>删除</el-button>
</div>
</el-card>
</el-col> </el-col>
</el-row> </el-row>
<div v-if="setupList.length === 0 && !loading" class="empty-data">
<el-empty description="暂无数据"></el-empty>
</div>
</div> </div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 统计图区域：复用 PDO 的折线图组件，基于选中的钢卷号 --> <!-- 统计图区域：复用 PDO 的折线图组件，基于选中的钢卷号 -->
<div class="statistics-container"> <div class="statistics-container">
@@ -375,7 +348,7 @@ export default {
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.ID) this.ids = selection.map(item => item.ID)
this.single = selection.length!==1 this.single = selection.length !== 1
this.multiple = !selection.length this.multiple = !selection.length
}, },
// 判断是否选中 // 判断是否选中
@@ -414,6 +387,11 @@ export default {
this.title = "修改【请填写功能名称】"; this.title = "修改【请填写功能名称】";
}); });
}, },
handleClick(item) {
this.currentRow = item;
console.log('点击', item)
// this.handleUpdate(item);
},
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
this.$refs["form"].validate(valid => { this.$refs["form"].validate(valid => {
@@ -437,12 +415,12 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const IDs = row.id || this.ids; const IDs = row.id || this.ids;
this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + IDs + '"的数据项？').then(function() { this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + IDs + '"的数据项？').then(function () {
return delSetup(IDs); return delSetup(IDs);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}).catch(() => {}); }).catch(() => { });
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
@@ -456,7 +434,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.pdi-container { .pdi-container {
height: calc(100vh - 84px); // height: calc(100vh - 84px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 15px; padding: 15px;
@@ -477,16 +455,16 @@ export default {
flex: 1; flex: 1;
overflow: visible; overflow: visible;
min-height: 0; min-height: 0;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #c0c0c0; background: #c0c0c0;
border-radius: 3px; border-radius: 3px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: #f0f0f0; background: #f0f0f0;
} }
@@ -496,17 +474,24 @@ export default {
margin-bottom: 12px; margin-bottom: 12px;
} }
.parameter-detail {
height: auto;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 10px;
}
.parameter-card { .parameter-card {
height: auto; height: auto;
border: 1px solid #d4d4d4; border: 1px solid #d4d4d4;
border-radius: 2px; border-radius: 2px;
::v-deep .el-card__header { ::v-deep .el-card__header {
padding: 8px 10px; padding: 8px 10px;
background: #f5f5f5; background: #f5f5f5;
border-bottom: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4;
} }
&:hover { &:hover {
border-color: #999; border-color: #999;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
@@ -519,19 +504,19 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 4px; margin-bottom: 4px;
.card-title { .card-title {
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
color: #333; color: #333;
flex: 1; flex: 1;
} }
.card-checkbox { .card-checkbox {
margin-left: 10px; margin-left: 10px;
} }
} }
.card-subtitle { .card-subtitle {
font-size: 11px; font-size: 11px;
color: #666; color: #666;
@@ -541,11 +526,11 @@ export default {
.card-body { .card-body {
.param-group { .param-group {
margin-bottom: 12px; margin-bottom: 12px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.group-title { .group-title {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
@@ -554,15 +539,15 @@ export default {
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
margin-bottom: 6px; margin-bottom: 6px;
} }
.param-row { .param-row {
display: flex; display: flex;
margin-bottom: 6px; margin-bottom: 6px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.param-item { .param-item {
flex: 1; flex: 1;
display: flex; display: flex;
@@ -570,15 +555,15 @@ export default {
padding: 4px 6px; padding: 4px 6px;
border-right: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;
min-width: 0; min-width: 0;
&:last-child { &:last-child {
border-right: none; border-right: none;
} }
&:empty { &:empty {
border-right: none; border-right: none;
} }
.param-label { .param-label {
color: #666; color: #666;
font-size: 11px; font-size: 11px;
@@ -587,7 +572,7 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.param-value { .param-value {
color: #333; color: #333;
font-weight: 500; font-weight: 500;
@@ -605,7 +590,7 @@ export default {
padding-top: 8px; padding-top: 8px;
border-top: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8;
margin-top: 8px; margin-top: 8px;
.el-button { .el-button {
font-size: 12px; font-size: 12px;
padding: 0 4px; padding: 0 4px;