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

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

@@ -1,19 +1,9 @@
<template>
<div class="monitoring-container">
<div class="chart-wrapper">
<div class="chart-wrapper" v-loading="loading">
<!-- 参数选择下拉框 -->
<el-select
v-model="paramField"
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 v-model="paramField" 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>
<!-- 图表容器 -->
@@ -67,17 +57,22 @@ export default {
chart: null, // 图表实例
chartData: [], // 图表数据
timeStamps: [], // 时间戳
originalTimeStamps: [], // 原始时间戳（用于采样）
originalChartData: [], // 原始图表数据（用于采样）
timeRange: '1', // 时间范围(分钟)
socket: null, // 模拟socket
latestValue: 0,
maxValue: 0,
minValue: 0,
avgValue: 0
avgValue: 0,
loading: false,
maxXAxisLabels: 20 // X轴最多显示的标签数量
}
},
watch: {
enCoilID: {
handler(newVal) {
console.log('enCoilID 变化:', newVal);
if (newVal) {
this.fetchChartData();
} else {
@@ -86,13 +81,6 @@ export default {
},
immediate: true
},
paramField: {
handler() {
if (this.enCoilID) {
this.fetchChartData();
}
}
}
},
mounted() {
// 初始化图表
@@ -133,6 +121,10 @@ export default {
// 获取图表数据
fetchChartData() {
if (!this.enCoilID || !this.paramField) {
this.drawNoDataChart();
}
this.loading = true;
getSegmentList({
enCoilID: this.enCoilID,
paramField: this.paramField
@@ -141,12 +133,16 @@ export default {
if (res.data && res.data.length) {
this.processChartData(res.data);
this.drawLineChart();
console.log('有数据，绘制折线图')
} else {
this.drawNoDataChart();
console.log('无数据，清空折线图')
}
}).catch(err => {
console.error('获取数据失败:', err);
this.drawErrorChart();
}).finally(_ => {
this.loading = false;
});
},
@@ -155,16 +151,48 @@ export default {
// 排序数据（按segNo，假设是时间戳或序号）
rawData.sort((a, b) => a.segNo - b.segNo);
// 提取时间戳和数值
this.timeStamps = rawData.map(item => item.segNo);
this.chartData = rawData.map(item => parseFloat(item.value));
// 保存原始数据
this.originalTimeStamps = rawData.map(item => item.segNo);
this.originalChartData = rawData.map(item => parseFloat(item.value));
// 计算统计值
if (this.chartData.length) {
this.latestValue = this.chartData[this.chartData.length - 1];
this.maxValue = Math.max(...this.chartData);
this.minValue = Math.min(...this.chartData);
this.avgValue = this.chartData.reduce((sum, val) => sum + val, 0) / this.chartData.length;
// 根据数据量决定是否采样
if (rawData.length > this.maxXAxisLabels) {
// 数据采样 - 均匀采样
this.sampleData(rawData);
} else {
// 数据量适中，直接使用全部数据
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));
}
},
@@ -192,7 +220,7 @@ export default {
formatter: (params) => {
const param = params[0];
return `
时间: ${param.name}<br>
序号: ${param.name}<br>
值: ${param.value.toFixed(2)}<br>
单位: ${this.getParamUnit()}
`;
@@ -201,7 +229,7 @@ export default {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
bottom: '10%', // 增加底部空间，防止标签被截断
top: '15%',
containLabel: true
},
@@ -217,7 +245,11 @@ export default {
axisLabel: {
color: '#666',
rotate: 45,
interval: 0
// 动态计算标签显示间隔
interval: (index, value) => {
// 如果数据量大于maxXAxisLabels，按采样后的间隔显示
return index % Math.max(1, Math.ceil(this.timeStamps.length / this.maxXAxisLabels)) === 0;
}
},
splitLine: {
show: false
@@ -342,6 +374,9 @@ export default {
drawNoDataChart() {
if (!this.chart) return;
// 先清除原有图表内容
this.chart.clear();
const option = {
graphic: {
elements: [
@@ -409,6 +444,8 @@ export default {
// 清空现有数据
this.chartData = [];
this.timeStamps = [];
this.originalTimeStamps = [];
this.originalChartData = [];
// 重新获取数据
if (this.enCoilID) {
@@ -429,9 +466,33 @@ export default {
case 'stripSpeed':
return 'm/s';
case 'tensionPorBr1':
case 'tensionPorBr2':
return 'N';
case 'cleaningVoltage':
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:
return '';
}

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

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

@@ -7,12 +7,12 @@
<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-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-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>
@@ -25,23 +25,10 @@
<!-- 卡片网格布局 -->
<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)"
>
<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>
@@ -119,19 +106,9 @@
</div>
</div>
<div class="card-footer">
<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>
<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>
@@ -171,34 +148,21 @@
</div>
<!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="80%"
:close-on-click-modal="false"
>
<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>
<pdo-data-correction :detail="formData" :save-callback="handleSave"
:save-loading="saveLoading"></pdo-data-correction>
</div>
<!-- 编辑：保留原有tab，显示数据修正+标签打印 -->
<el-tabs v-else v-model="activeTab">
<el-tab-pane label="数据修正" name="basicInfo">
<pdo-data-correction
:detail="formData"
:save-callback="handleSave"
:save-loading="saveLoading"
></pdo-data-correction>
<pdo-data-correction :detail="formData" :save-callback="handleSave"
:save-loading="saveLoading"></pdo-data-correction>
</el-tab-pane>
<el-tab-pane label="标签打印" name="labelPrint">
<pdo-label-print
:detail="formData"
></pdo-label-print>
<pdo-label-print :detail="formData"></pdo-label-print>
</el-tab-pane>
</el-tabs>
</el-dialog>

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

@@ -1,68 +1,58 @@
<template>
<div class="pdi-container">
<!-- 卡片网格布局 -->
<div v-loading="loading" class="card-grid-container">
<el-row :gutter="10">
<el-col :span="12">
<div class="pdi-header">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<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-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-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-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</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">
<el-row :gutter="12">
<el-col
v-for="(item, index) in setupList"
:key="index"
:xs="24"
:sm="12"
:md="8"
:lg="5"
:xl="4"
class="card-col"
>
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
<div slot="header" class="card-header">
<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>
<el-checkbox
:value="isSelected(item)"
@change="toggleSelection(item, $event)"
class="card-checkbox"
></el-checkbox>
</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">
<span class="card-title">钢卷号: {{ currentRow.coilid || '-' }}</span>
</div>
<div class="card-subtitle">计划ID: {{ currentRow.planid || '-' }} | 更改次数: {{ currentRow.type || '-' }}</div>
</div>
<div class="card-body">
<!-- 全线张力 -->
<div class="param-group">
@@ -70,61 +60,61 @@
<div class="param-row">
<div class="param-item">
<span class="param-label">开卷机张力:</span>
<span class="param-value">{{ item.porTension || '-' }}</span>
<span class="param-value">{{ currentRow.porTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">入口活套张力:</span>
<span class="param-value">{{ item.celTension || '-' }}</span>
<span class="param-value">{{ currentRow.celTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">清洗段张力:</span>
<span class="param-value">{{ item.cleanTension || '-' }}</span>
<span class="param-value">{{ currentRow.cleanTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">炉区张力:</span>
<span class="param-value">{{ item.furTension || '-' }}</span>
<span class="param-value">{{ currentRow.furTension || '-' }}</span>
</div>
</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">冷却塔张力:</span>
<span class="param-value">{{ item.towerTension || '-' }}</span>
<span class="param-value">{{ currentRow.towerTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">光整机不投张力:</span>
<span class="param-value">{{ item.tmNoneTension || '-' }}</span>
<span class="param-value">{{ currentRow.tmNoneTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">光整机入口张力:</span>
<span class="param-value">{{ item.tmEntryTension || '-' }}</span>
<span class="param-value">{{ currentRow.tmEntryTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">光整机出口张力:</span>
<span class="param-value">{{ item.tmExitTension || '-' }}</span>
<span class="param-value">{{ currentRow.tmExitTension || '-' }}</span>
</div>
</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">拉矫机不投张力:</span>
<span class="param-value">{{ item.tlNoneTension || '-' }}</span>
<span class="param-value">{{ currentRow.tlNoneTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">拉矫机出口张力:</span>
<span class="param-value">{{ item.tlExitTension || '-' }}</span>
<span class="param-value">{{ currentRow.tlExitTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">后处理张力:</span>
<span class="param-value">{{ item.coatTension || '-' }}</span>
<span class="param-value">{{ currentRow.coatTension || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">出口活套张力:</span>
<span class="param-value">{{ item.cxlTension || '-' }}</span>
<span class="param-value">{{ currentRow.cxlTension || '-' }}</span>
</div>
</div>
<div class="param-row">
<div class="param-item">
<span class="param-label">卷取机张力:</span>
<span class="param-value">{{ item.trTension || '-' }}</span>
<span class="param-value">{{ currentRow.trTension || '-' }}</span>
</div>
<div class="param-item"></div>
<div class="param-item"></div>
@@ -138,19 +128,19 @@
<div class="param-row">
<div class="param-item">
<span class="param-label">光整机轧制力:</span>
<span class="param-value">{{ item.tmRollforce || '-' }}</span>
<span class="param-value">{{ currentRow.tmRollforce || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">光整机弯辊力:</span>
<span class="param-value">{{ item.tmBendforce || '-' }}</span>
<span class="param-value">{{ currentRow.tmBendforce || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">防皱辊插入量:</span>
<span class="param-value">{{ item.tmAcrMesh || '-' }}</span>
<span class="param-value">{{ currentRow.tmAcrMesh || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">防颤辊插入量:</span>
<span class="param-value">{{ item.tmBrMesh || '-' }}</span>
<span class="param-value">{{ currentRow.tmBrMesh || '-' }}</span>
</div>
</div>
</div>
@@ -161,19 +151,19 @@
<div class="param-row">
<div class="param-item">
<span class="param-label">拉矫机延伸率:</span>
<span class="param-value">{{ item.tlElong || '-' }}</span>
<span class="param-value">{{ currentRow.tlElong || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">矫直辊插入量1:</span>
<span class="param-value">{{ item.tlLvlMesh1 || '-' }}</span>
<span class="param-value">{{ currentRow.tlLvlMesh1 || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">矫直辊插入量2:</span>
<span class="param-value">{{ item.tlLvlMesh2 || '-' }}</span>
<span class="param-value">{{ currentRow.tlLvlMesh2 || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">防横弓插入量:</span>
<span class="param-value">{{ item.tlAcbMesh || '-' }}</span>
<span class="param-value">{{ currentRow.tlAcbMesh || '-' }}</span>
</div>
</div>
</div>
@@ -184,43 +174,26 @@
<div class="param-row">
<div class="param-item">
<span class="param-label">预热段出口板温:</span>
<span class="param-value">{{ item.preheatingSection || '-' }}</span>
<span class="param-value">{{ currentRow.preheatingSection || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">加热段出口板温:</span>
<span class="param-value">{{ item.heatingSection || '-' }}</span>
<span class="param-value">{{ currentRow.heatingSection || '-' }}</span>
</div>
<div class="param-item">
<span class="param-label">冷却段出口板温:</span>
<span class="param-value">{{ item.coolingSection || '-' }}</span>
<span class="param-value">{{ currentRow.coolingSection || '-' }}</span>
</div>
<div class="param-item"></div>
</div>
</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>
<div v-if="setupList.length === 0 && !loading" class="empty-data">
<el-empty description="暂无数据"></el-empty>
</div>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<el-empty v-else description="请在左侧选择钢卷查看工艺历史"></el-empty>
</el-col>
</el-row>
</div>
<!-- 统计图区域：复用 PDO 的折线图组件，基于选中的钢卷号 -->
<div class="statistics-container">
@@ -414,6 +387,11 @@ export default {
this.title = "修改【请填写功能名称】";
});
},
handleClick(item) {
this.currentRow = item;
console.log('点击', item)
// this.handleUpdate(item);
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
@@ -456,7 +434,7 @@ export default {
<style lang="scss" scoped>
.pdi-container {
height: calc(100vh - 84px);
// height: calc(100vh - 84px);
display: flex;
flex-direction: column;
padding: 15px;
@@ -496,6 +474,13 @@ export default {
margin-bottom: 12px;
}
.parameter-detail {
height: auto;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 10px;
}
.parameter-card {
height: auto;
border: 1px solid #d4d4d4;