修改二级ui
This commit is contained in:
@@ -70,20 +70,44 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 汇总组件样式优化，与原页面风格统一 */
|
||||
<style lang="scss" scoped>
|
||||
.summary-content {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions__label {
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions__content {
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.summary-rate {
|
||||
color: #2bf; /* 成材率用主题色突出 */
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -1,28 +1,25 @@
|
||||
<template>
|
||||
<el-row :gutter="20" class="monitoring-container">
|
||||
<!-- 实时数据折线图 -->
|
||||
<el-col :span="20">
|
||||
<div class="chart-wrapper">
|
||||
<!-- 参数选择下拉框 -->
|
||||
<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>
|
||||
|
||||
<!-- 图表容器 -->
|
||||
<div ref="chart" class="chart-content"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="monitoring-container">
|
||||
<div class="chart-wrapper">
|
||||
<!-- 参数选择下拉框 -->
|
||||
<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>
|
||||
|
||||
<!-- 图表容器 -->
|
||||
<div ref="chart" class="chart-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -94,18 +91,20 @@ export default {
|
||||
methods: {
|
||||
// 初始化图表
|
||||
initChart() {
|
||||
if (this.$refs.chart) {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
// 监听窗口大小变化，调整图表尺寸
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
|
||||
// 初始显示
|
||||
if (this.enCoilID) {
|
||||
this.fetchChartData();
|
||||
} else {
|
||||
this.drawEmptyChart();
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.chart) {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
// 监听窗口大小变化，调整图表尺寸
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
|
||||
// 初始显示
|
||||
if (this.enCoilID) {
|
||||
this.fetchChartData();
|
||||
} else {
|
||||
this.drawEmptyChart();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 处理窗口大小变化
|
||||
@@ -157,10 +156,17 @@ export default {
|
||||
if (!this.chart) return;
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
type: 'line'
|
||||
},
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
borderColor: '#d4d4d4',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
},
|
||||
formatter: (params) => {
|
||||
const param = params[0];
|
||||
@@ -182,16 +188,42 @@ export default {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.timeStamps,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d4d4d4'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666',
|
||||
rotate: 45,
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: this.getParamUnit(),
|
||||
nameLocation: 'middle',
|
||||
nameGap: 30
|
||||
nameGap: 30,
|
||||
nameTextStyle: {
|
||||
color: '#666'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d4d4d4'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#e8e8e8',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -200,18 +232,50 @@ export default {
|
||||
data: this.chartData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
symbolSize: 4,
|
||||
lineStyle: {
|
||||
color: '#666',
|
||||
width: 2
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#999'
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(153, 153, 153, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(153, 153, 153, 0.05)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: '最大值' },
|
||||
{ type: 'min', name: '最小值' }
|
||||
]
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#999'
|
||||
},
|
||||
label: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
areaStyle: {},
|
||||
markLine: {
|
||||
data: [
|
||||
{ type: 'average', name: '平均值' }
|
||||
]
|
||||
],
|
||||
lineStyle: {
|
||||
color: '#999',
|
||||
type: 'dashed'
|
||||
},
|
||||
label: {
|
||||
color: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -355,9 +419,8 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.monitoring-container {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -366,79 +429,25 @@ export default {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.param-select {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
width: 150px;
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
border-color: #d4d4d4;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* 原有样式保留 */
|
||||
.tree-container,
|
||||
.chart-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tree-header,
|
||||
.chart-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tree-header i,
|
||||
.chart-header i {
|
||||
margin-right: 8px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.device-tree {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.custom-tree-node .online-status {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #13ce66;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__content:hover) {
|
||||
background-color: transparent !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node .el-tree-node__content:hover) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.el-tree-indent) {
|
||||
width: 16px;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,101 +1,174 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<!-- 查询表单（保持不变） -->
|
||||
<el-form :inline="true" :model="queryForm" ref="queryForm" label-width="100px">
|
||||
<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 size="mini" v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input>
|
||||
<el-input v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始日期" prop="startDate">
|
||||
<el-date-picker size="mini" v-model="queryForm.startDate" type="date" placeholder="选择开始日期"
|
||||
<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 size="mini" v-model="queryForm.endDate" type="date" placeholder="选择结束日期"
|
||||
<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"
|
||||
size="mini">查询</el-button>
|
||||
<el-button @click="handleReset" icon="el-icon-refresh" size="mini">重置</el-button>
|
||||
<el-button type="success" @click="handleAdd" icon="el-icon-plus" size="mini">补录</el-button>
|
||||
<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>
|
||||
|
||||
<!-- 数据表格（保持不变） -->
|
||||
<el-table v-loading="tableLoading" :data="tableData" border style="width: 100%; margin-top: 20px;"
|
||||
@row-click="handleRowClick" highlight-current-row>
|
||||
<el-table-column prop="exitMatId" label="成品卷" width="150" align="center" />
|
||||
<el-table-column prop="entryMatId" label="来料卷" width="150" align="center" />
|
||||
<el-table-column prop="subId" label="分切数" width="100" align="center" />
|
||||
<el-table-column prop="status" label="状态" width="100" align="center" />
|
||||
<el-table-column prop="startPosition" label="开始位置" width="100" align="center" />
|
||||
<el-table-column prop="endPosition" label="结束位置" width="100" align="center" />
|
||||
<el-table-column prop="planId" label="计划ID" width="120" align="center" />
|
||||
<el-table-column prop="planNo" label="计划号" width="150" align="center" />
|
||||
<el-table-column prop="prodCode" label="产品类型" width="120" align="center" />
|
||||
<el-table-column prop="groupNo" label="班号" width="100" align="center" />
|
||||
<el-table-column prop="shiftNo" label="组号" width="100" align="center" />
|
||||
<el-table-column prop="steelGrade" label="钢种" width="100" align="center" />
|
||||
<el-table-column prop="entryThick" label="来料厚度" width="100" align="center" />
|
||||
<el-table-column prop="entryWidth" label="来料宽带" width="100" align="center" />
|
||||
<el-table-column prop="entryLength" label="来料长度" width="100" align="center" />
|
||||
<el-table-column prop="entryWeight" label="来料重量" width="100" align="center" />
|
||||
<el-table-column prop="weightTop" label="上表面镀锌" width="100" align="center" />
|
||||
<el-table-column prop="weightBottom" label="下表面镀锌" width="100" align="center" />
|
||||
<el-table-column prop="exitLength" label="成品长度" width="100" align="center" />
|
||||
<el-table-column prop="exitNetWeight" label="成品带涂料重量" width="120" align="center" />
|
||||
<el-table-column prop="theoryWeight" label="理论重量" width="100" align="center" />
|
||||
<el-table-column prop="actualWeight" label="实际重量" width="100" align="center" />
|
||||
<el-table-column prop="exitOuterDiameter" label="成品外径" width="100" align="center" />
|
||||
<el-table-column prop="exitThickness" label="成品厚度" width="100" align="center" />
|
||||
<el-table-column prop="exitWidth" label="成品宽度" width="100" align="center" />
|
||||
<el-table-column prop="customer" label="客户" width="120" align="center" />
|
||||
<el-table-column label="上线时间" prop="onlineTime" width="180" align="center">
|
||||
<template slot-scope="scope">{{ parseTime(scope.row.onlineTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开始时间" prop="startTime" width="180" align="center">
|
||||
<template slot-scope="scope">{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间" prop="endTime" width="180" align="center">
|
||||
<template slot-scope="scope">{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unitCode" label="机组号" width="100" align="center" />
|
||||
<el-table-column prop="processCode" label="工序号" width="100" align="center" />
|
||||
<el-table-column label="是否尾卷" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.lastFlag ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否分卷" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.separateFlag ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计划来源" align="center" prop="planOrigin" width="120">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.pdo_plan_origin" :value="scope.row.planOrigin" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right" prop="action">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit">操作</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.row)" :loading="scope.row.deleteLoading"
|
||||
icon="el-icon-delete">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 卡片网格布局 -->
|
||||
<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="primary"
|
||||
icon="el-icon-edit"
|
||||
@click.stop="handleEdit(item)"
|
||||
>操作</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
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>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="3" style="padding: 10px;">
|
||||
<!-- 统计汇总和图表区域 -->
|
||||
<div class="statistics-container">
|
||||
<div class="statistics-header">
|
||||
<div class="selected-info" v-if="currentRow && currentRow.exitMatId">
|
||||
<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="21">
|
||||
<el-col :span="20" class="chart-col">
|
||||
<div class="chart-wrapper">
|
||||
<line-chart :enCoilID="currentRow.exitMatId" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
|
||||
<el-dialog
|
||||
@@ -205,6 +278,11 @@ export default {
|
||||
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; // 标记为「补录」
|
||||
@@ -270,4 +348,260 @@ export default {
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</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>
|
||||
@@ -1,19 +1,57 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="activeTab" >
|
||||
<el-tab-pane label="全线张力" name="1" />
|
||||
<el-tab-pane label="拉校机参数" name="2" />
|
||||
<el-tab-pane label="光整机弯辊力" name="3" />
|
||||
<el-tab-pane label="光整机插入量" name="4" />
|
||||
<el-tab-pane label="光整机轧制力" name="5" />
|
||||
<el-tab-pane label="炉火段" name="6" />
|
||||
</el-tabs>
|
||||
<T1 v-if="activeTab === '1'" />
|
||||
<T2 v-if="activeTab === '2'" />
|
||||
<T3 v-if="activeTab === '3'" />
|
||||
<T4 v-if="activeTab === '4'" />
|
||||
<T5 v-if="activeTab === '5'" />
|
||||
<T6 v-if="activeTab === '6'" />
|
||||
<div class="app-container setup-container">
|
||||
<el-row :gutter="20" class="setup-layout">
|
||||
<!-- 左侧侧边栏导航 -->
|
||||
<el-col :span="4" class="sidebar-col">
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="sidebar-header">
|
||||
<h3>工艺参数分类</h3>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="activeTab"
|
||||
class="sidebar-menu"
|
||||
@select="handleMenuSelect"
|
||||
>
|
||||
<el-menu-item index="1">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">全线张力</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">拉校机参数</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">光整机弯辊力</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">光整机插入量</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">光整机轧制力</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="6">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">炉火段</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧主内容区 -->
|
||||
<el-col :span="20" class="content-col">
|
||||
<div class="content-wrapper">
|
||||
<T1 v-if="activeTab === '1'" ref="t1" />
|
||||
<T2 v-if="activeTab === '2'" ref="t2" />
|
||||
<T3 v-if="activeTab === '3'" ref="t3" />
|
||||
<T4 v-if="activeTab === '4'" ref="t4" />
|
||||
<T5 v-if="activeTab === '5'" ref="t5" />
|
||||
<T6 v-if="activeTab === '6'" ref="t6" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -37,8 +75,100 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: '1'
|
||||
activeTab: '1' // 默认选中第一个分类
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMenuSelect(index) {
|
||||
this.activeTab = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setup-container {
|
||||
padding: 15px 0;
|
||||
height: calc(100vh - 84px);
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.setup-layout {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-col {
|
||||
height: 100%;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 15px;
|
||||
background: #e8e8e8;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
border-right: none;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
::v-deep .el-menu-item {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
|
||||
&.is-active {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
border-right: 2px solid #999;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-col {
|
||||
height: 100%;
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@@ -22,46 +22,119 @@
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="tensionList">
|
||||
<!-- <el-table-column type="index" width="55" align="center" /> -->
|
||||
<el-table-column label="厚度" align="center" prop="thick" />
|
||||
<el-table-column label="强度" align="center" prop="yieldStren" />
|
||||
<el-table-column label="开卷机张力" align="center" prop="value1" />
|
||||
<el-table-column label="入口活套" align="center" prop="value2" />
|
||||
<el-table-column label="清洗段" align="center" prop="value3" />
|
||||
<el-table-column label="炉区张力" align="center" prop="value4" />
|
||||
<el-table-column label="冷却塔" align="center" prop="value5" />
|
||||
<el-table-column label="光整机-不投" align="center" prop="value6" />
|
||||
<el-table-column label="光整机入口" align="center" prop="value7" />
|
||||
<el-table-column label="光整机出口" align="center" prop="value8" />
|
||||
<el-table-column label="拉矫机-不投" align="center" prop="value9" />
|
||||
<el-table-column label="拉矫机出口" align="center" prop="value10" />
|
||||
<el-table-column label="后处理" align="center" prop="value11" />
|
||||
<el-table-column label="出口活套" align="center" prop="value12" />
|
||||
<el-table-column label="卷取机" align="center" prop="value13" />
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(scope.row)"
|
||||
>复制新增</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in tensionList"
|
||||
: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">
|
||||
<span class="card-title">厚度: {{ item.thick || '-' }} | 强度: {{ item.yieldStren || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">开卷机张力:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">入口活套:</span>
|
||||
<span class="param-value">{{ item.value2 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">清洗段:</span>
|
||||
<span class="param-value">{{ item.value3 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">炉区张力:</span>
|
||||
<span class="param-value">{{ item.value4 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">冷却塔:</span>
|
||||
<span class="param-value">{{ item.value5 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">光整机-不投:</span>
|
||||
<span class="param-value">{{ item.value6 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">光整机入口:</span>
|
||||
<span class="param-value">{{ item.value7 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">光整机出口:</span>
|
||||
<span class="param-value">{{ item.value8 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">拉矫机-不投:</span>
|
||||
<span class="param-value">{{ item.value9 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">拉矫机出口:</span>
|
||||
<span class="param-value">{{ item.value10 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">后处理:</span>
|
||||
<span class="param-value">{{ item.value11 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">出口活套:</span>
|
||||
<span class="param-value">{{ item.value12 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">卷取机:</span>
|
||||
<span class="param-value">{{ item.value13 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<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="tensionList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
@@ -291,3 +364,122 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@@ -42,38 +42,72 @@
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="tlList">
|
||||
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
||||
<el-table-column label="钢种" align="center" prop="steelGrade" />
|
||||
<el-table-column label="硬度" align="center" prop="yieldStren" />
|
||||
<el-table-column label="厚度" align="center" prop="thick" />
|
||||
<el-table-column label="延伸率" align="center" prop="value1" />
|
||||
<el-table-column label="矫直辊插入量1" align="center" prop="value2" />
|
||||
<el-table-column label="矫直辊插入量2" align="center" prop="value3" />
|
||||
<el-table-column label="防横弓插入量" align="center" prop="value4" />
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(scope.row)"
|
||||
>复制新增</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in tlList"
|
||||
: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">
|
||||
<span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }} | 硬度: {{ item.yieldStren || '-' }} | 厚度: {{ item.thick || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">延伸率:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">矫直辊插入量1:</span>
|
||||
<span class="param-value">{{ item.value2 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">矫直辊插入量2:</span>
|
||||
<span class="param-value">{{ item.value3 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">防横弓插入量:</span>
|
||||
<span class="param-value">{{ item.value4 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<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="tlList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
@@ -282,7 +316,131 @@ export default {
|
||||
this.download('business/tl/export', {
|
||||
...this.queryParams
|
||||
}, `tl_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 获取钢种名称 */
|
||||
getSteelGradeName(gradeId) {
|
||||
const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@@ -42,34 +42,59 @@
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="bendforceList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="宽度" align="center" prop="width" />
|
||||
<el-table-column label="轧制力" align="center" prop="rollForce" />
|
||||
<el-table-column label="弯辊力" align="center" prop="value1" />
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(scope.row)"
|
||||
>复制新增</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in bendforceList"
|
||||
: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">
|
||||
<span class="card-title">宽度: {{ item.width || '-' }} | 轧制力: {{ item.rollForce || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">弯辊力:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<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="bendforceList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
@@ -252,3 +277,122 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@@ -42,36 +42,62 @@
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="meshList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="钢种" align="center" prop="steelGrade" />
|
||||
<el-table-column label="厚度" align="center" prop="thick" />
|
||||
<el-table-column label="强度" align="center" prop="yieldStren" />
|
||||
<el-table-column label="防皱辊插入量" align="center" prop="value1" />
|
||||
<el-table-column label="防颤辊插入量" align="center" prop="value2" />
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(scope.row)"
|
||||
>复制新增</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in meshList"
|
||||
: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">
|
||||
<span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }} | 厚度: {{ item.thick || '-' }} | 强度: {{ item.yieldStren || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">防皱辊插入量:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">防颤辊插入量:</span>
|
||||
<span class="param-value">{{ item.value2 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<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="meshList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
@@ -274,7 +300,131 @@ export default {
|
||||
this.download('business/mesh/export', {
|
||||
...this.queryParams
|
||||
}, `mesh_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 获取钢种名称 */
|
||||
getSteelGradeName(gradeId) {
|
||||
const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@@ -42,36 +42,62 @@
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="rollforceList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="钢种" align="center" prop="steelGrade" />
|
||||
<el-table-column label="厚度" align="center" prop="thick" />
|
||||
<el-table-column label="强度" align="center" prop="yieldStren" />
|
||||
<el-table-column label="延伸率" align="center" prop="elong" />
|
||||
<el-table-column label="轧制力" align="center" prop="value1" />
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(scope.row)"
|
||||
>复制新增</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in rollforceList"
|
||||
: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">
|
||||
<span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }} | 厚度: {{ item.thick || '-' }} | 强度: {{ item.yieldStren || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">延伸率:</span>
|
||||
<span class="param-value">{{ item.elong || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">轧制力:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(item)"
|
||||
>复制</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<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="rollforceList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
@@ -276,7 +302,131 @@ export default {
|
||||
this.download('business/rollforce/export', {
|
||||
...this.queryParams
|
||||
}, `rollforce_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 获取钢种名称 */
|
||||
getSteelGradeName(gradeId) {
|
||||
const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="panel-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@@ -42,29 +42,63 @@
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="furList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="钢种" align="center" prop="steelGrade" />
|
||||
<el-table-column label="预热段出口板温" align="center" prop="value1" />
|
||||
<el-table-column label="加热段出口板温" align="center" prop="value2" />
|
||||
<el-table-column label="冷却段出口板温" align="center" prop="value3" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 卡片网格布局 -->
|
||||
<div v-loading="loading" class="card-grid-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
v-for="(item, index) in furList"
|
||||
: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">
|
||||
<span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">预热段出口板温:</span>
|
||||
<span class="param-value">{{ item.value1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">加热段出口板温:</span>
|
||||
<span class="param-value">{{ item.value2 || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">冷却段出口板温:</span>
|
||||
<span class="param-value">{{ item.value3 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
>修改</el-button>
|
||||
<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="furList.length === 0 && !loading" class="empty-data">
|
||||
<el-empty description="暂无数据"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
@@ -253,7 +287,131 @@ export default {
|
||||
this.download('business/fur/export', {
|
||||
...this.queryParams
|
||||
}, `fur_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 获取钢种名称 */
|
||||
getSteelGradeName(gradeId) {
|
||||
const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
|
||||
return grade ? grade.name : gradeId;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="app-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
|
||||
@@ -24,35 +25,6 @@
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
@@ -64,53 +36,183 @@
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" :data="setupList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="钢卷号" align="center" prop="coilid" />
|
||||
<el-table-column label="计划号" align="center" prop="planid" />
|
||||
<el-table-column label="开卷机张力" align="center" prop="porTension" />
|
||||
<el-table-column label="入口活套张力" align="center" prop="celTension" />
|
||||
<el-table-column label="清洗段张力" align="center" prop="cleanTension" />
|
||||
<el-table-column label="炉区张力" align="center" prop="furTension" />
|
||||
<el-table-column label="冷却塔张力" align="center" prop="towerTension" />
|
||||
<el-table-column label="光整机不投张力" align="center" prop="tmNoneTension" />
|
||||
<el-table-column label="光整机入口张力" align="center" prop="tmEntryTension" />
|
||||
<el-table-column label="光整机出口张力" align="center" prop="tmExitTension" />
|
||||
<el-table-column label="光整机轧制力" align="center" prop="tmRollforce" />
|
||||
<el-table-column label="光整机弯辊力" align="center" prop="tmBendforce" />
|
||||
<el-table-column label="光整机防皱辊插入量" align="center" prop="tmAcrMesh" />
|
||||
<el-table-column label="光整机防颤辊插入量" align="center" prop="tmBrMesh" />
|
||||
<el-table-column label="拉矫机不投张力" align="center" prop="tlNoneTension" />
|
||||
<el-table-column label="拉矫机出口张力" align="center" prop="tlExitTension" />
|
||||
<el-table-column label="拉矫机延伸率" align="center" prop="tlElong" />
|
||||
<el-table-column label="拉矫机矫直辊插入量1" align="center" prop="tlLvlMesh1" />
|
||||
<el-table-column label="拉矫机矫直辊插入量2" align="center" prop="tlLvlMesh2" />
|
||||
<el-table-column label="拉矫机防横弓插入量" align="center" prop="tlAcbMesh" />
|
||||
<el-table-column label="后处理张力" align="center" prop="coatTension" />
|
||||
<el-table-column label="出口活套张力" align="center" prop="cxlTension" />
|
||||
<el-table-column label="卷取机张力" align="center" prop="trTension" />
|
||||
<el-table-column label="炉火段预热段出口板温" align="center" prop="preheatingSection" />
|
||||
<el-table-column label="炉火段加热段出口板温" align="center" prop="heatingSection" />
|
||||
<el-table-column label="炉火段冷却段出口板温" align="center" prop="coolingSection" />
|
||||
<el-table-column label="更改次数" align="center" prop="type" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button> -->
|
||||
<!-- 卡片网格布局 -->
|
||||
<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 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">计划号: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }}</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 全线张力 -->
|
||||
<div class="param-group">
|
||||
<div class="group-title">全线张力</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<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-value">{{ item.celTension || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<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-value">{{ item.furTension || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<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-value">{{ item.tmNoneTension || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<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-value">{{ item.tmExitTension || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<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-value">{{ item.tlExitTension || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<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-value">{{ item.cxlTension || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">卷取机:</span>
|
||||
<span class="param-value">{{ item.trTension || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item"></div>
|
||||
<div class="param-item"></div>
|
||||
<div class="param-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 光整机参数 -->
|
||||
<div class="param-group">
|
||||
<div class="group-title">光整机参数</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<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-value">{{ item.tmBendforce || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">防皱辊插入量:</span>
|
||||
<span class="param-value">{{ item.tmAcrMesh || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">防颤辊插入量:</span>
|
||||
<span class="param-value">{{ item.tmBrMesh || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 拉矫机参数 -->
|
||||
<div class="param-group">
|
||||
<div class="group-title">拉矫机参数</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">延伸率:</span>
|
||||
<span class="param-value">{{ item.tlElong || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">矫直辊插入量1:</span>
|
||||
<span class="param-value">{{ item.tlLvlMesh1 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">矫直辊插入量2:</span>
|
||||
<span class="param-value">{{ item.tlLvlMesh2 || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">防横弓插入量:</span>
|
||||
<span class="param-value">{{ item.tlAcbMesh || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 炉火段 -->
|
||||
<div class="param-group">
|
||||
<div class="group-title">炉火段</div>
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<span class="param-label">预热段出口板温:</span>
|
||||
<span class="param-value">{{ item.preheatingSection || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">加热段出口板温:</span>
|
||||
<span class="param-value">{{ item.heatingSection || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<span class="param-label">冷却段出口板温:</span>
|
||||
<span class="param-value">{{ item.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(scope.row)"
|
||||
@click="handleDelete(item)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</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"
|
||||
@@ -252,6 +354,25 @@ export default {
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
// 判断是否选中
|
||||
isSelected(item) {
|
||||
return this.ids.includes(item.ID)
|
||||
},
|
||||
// 切换选中状态
|
||||
toggleSelection(item, checked) {
|
||||
if (checked) {
|
||||
if (!this.ids.includes(item.ID)) {
|
||||
this.ids.push(item.ID)
|
||||
}
|
||||
} else {
|
||||
const index = this.ids.indexOf(item.ID)
|
||||
if (index > -1) {
|
||||
this.ids.splice(index, 1)
|
||||
}
|
||||
}
|
||||
this.single = this.ids.length !== 1
|
||||
this.multiple = this.ids.length === 0
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
@@ -307,3 +428,168 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pdi-container {
|
||||
height: calc(100vh - 84px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pdi-header {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-grid-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
min-height: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.parameter-card {
|
||||
height: 100%;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 8px 10px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.card-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-checkbox {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.param-group {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.param-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 6px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
min-width: 0;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin-top: 8px;
|
||||
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user