Compare commits
3 Commits
1fa01f84ef
...
ee00290b35
| Author | SHA1 | Date | |
|---|---|---|---|
| ee00290b35 | |||
| 8d7a21f4cc | |||
| 3292799656 |
@@ -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,22 +1,50 @@
|
||||
<template>
|
||||
<div class="report-body">
|
||||
<!-- 操作行 -->
|
||||
<el-row>
|
||||
<el-button type="primary" @click="exportReport">导出</el-button>
|
||||
</el-row>
|
||||
<h1 class="report-body-title" style="text-align: center;">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<div class="report-actions">
|
||||
<el-button type="primary" @click="exportReport" icon="el-icon-download" size="small">导出报表</el-button>
|
||||
</div>
|
||||
<div class="overview-bar">
|
||||
<div class="overview-left">
|
||||
<div class="overview-title">{{ title }}</div>
|
||||
<div class="overview-meta">
|
||||
<span>报表类型：{{ overviewInfo.reportLabel || '-' }}</span>
|
||||
<span>时间范围：{{ overviewInfo.rangeText || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-actions">
|
||||
<el-tag size="mini" effect="dark">{{ overviewInfo.reportLabel || '-' }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="report-body-title">总览数据</h1>
|
||||
<div class="summary-cards" v-if="summary.length > 0">
|
||||
<div v-for="item in summary">
|
||||
<span class="card-title">{{ item.label }}: </span>
|
||||
<div v-for="(item, index) in summary" :key="index">
|
||||
<span class="card-title">{{ item.label }}</span>
|
||||
<span class="card-value">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="dataset" border style="width: 100%;" size="small">
|
||||
<el-table-column v-for="item in columns" :label="item.label" :prop="item.prop" />
|
||||
</el-table>
|
||||
<div class="table-container">
|
||||
<div v-if="dataset.length" class="excel-table-wrapper">
|
||||
<table class="excel-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(item, index) in columns" :key="index">
|
||||
{{ item.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, rowIndex) in dataset" :key="rowIndex">
|
||||
<td v-for="(column, colIndex) in columns" :key="colIndex">
|
||||
{{ formatCell(row[column.prop]) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<el-empty v-else description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -41,9 +69,22 @@ export default {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
overviewInfo: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
reportLabel: '',
|
||||
rangeText: ''
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatCell(value) {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '-'
|
||||
}
|
||||
return value
|
||||
},
|
||||
exportReport() {
|
||||
// 创建工作簿
|
||||
const workbook = XLSX.utils.book_new();
|
||||
@@ -83,30 +124,161 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.report-body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.report-actions {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.overview-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
background: #f9f9f9;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.overview-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.overview-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.overview-meta {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
span {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report-body-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 10px 0 20px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.summary-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 2px;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card-title {
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-bottom: 3px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-unit {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 2px;
|
||||
padding: 0 10px 10px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.excel-table-wrapper {
|
||||
min-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.excel-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
table-layout: fixed;
|
||||
|
||||
thead th {
|
||||
background: #f5f5f5;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
border: 1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
border: 1px solid #e4e4e4;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #f0f6ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,341 +0,0 @@
|
||||
<template>
|
||||
<div class="report-container">
|
||||
<!-- <el-row>
|
||||
<el-select size="mini" v-model="reportType" style="width: 80px;" placeholder="请选择报表类型">
|
||||
<el-option label="实绩" value="pdo"></el-option>
|
||||
<el-option label="换辊" value="roller"></el-option>
|
||||
<el-option label="停机" value="stop"></el-option>
|
||||
</el-select>
|
||||
</el-row> -->
|
||||
<!-- 查询条件区域 -->
|
||||
<el-row>
|
||||
<el-form v-if="reportType === 'pdo'" :inline="true" :model="queryParams" class="query-form" size="mini">
|
||||
<el-form-item label="机组号" prop="groupNo">
|
||||
<el-input v-model="queryParams.groupNo" placeholder="请输入机组号" clearable style="width: 160px;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="班次号" prop="shiftNo">
|
||||
<el-input v-model="queryParams.shiftNo" placeholder="请输入班次号" clearable style="width: 160px;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="选择开始时间"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" style="width: 200px;"></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择结束时间"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" style="width: 200px;"></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="fetchReportData" icon="el-icon-search" size="small">查询</el-button>
|
||||
<el-button @click="resetQuery" icon="el-icon-refresh" size="small">重置</el-button>
|
||||
<!-- <el-button type="success" @click="exportReport" icon="el-icon-download" size="small">导出</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-if="reportType === 'roller'" size="mini" inline class="query-form">
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" style="width: 140px"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" style="width: 140px"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-if="reportType === 'stop'" size="mini" inline class="query-form">
|
||||
<el-form-item label="开始时间" prop="startDate">
|
||||
<el-date-picker v-model="queryParams.startDate" type="date" placeholder="选择开始时间" value-format="yyyy-MM-dd"
|
||||
:clearable="true"></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="结束时间" prop="endDate">
|
||||
<el-date-picker v-model="queryParams.endDate" type="date" placeholder="选择结束时间" value-format="yyyy-MM-dd"
|
||||
:clearable="true"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<PdoReport v-if="reportType === 'pdo'" />
|
||||
<RollerReport v-if="reportType === 'roller'" />
|
||||
<StopReport v-if="reportType === 'stop'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getReportSummary, getReportDetail } from '@/api/l2/report'
|
||||
import ReportBody from './components/body.vue'
|
||||
import PdoReport from './components/pdo.vue'
|
||||
import RollerReport from './components/roller.vue'
|
||||
import StopReport from './components/stop.vue'
|
||||
|
||||
export default {
|
||||
name: 'Report',
|
||||
components: {
|
||||
ReportBody,
|
||||
PdoReport,
|
||||
RollerReport,
|
||||
StopReport
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
reportType: 'stop',
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
groupNo: '',
|
||||
shiftNo: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
},
|
||||
// 汇总数据
|
||||
reportSummary: {
|
||||
totalExitWidth: 0,
|
||||
totalExitLength: 0,
|
||||
totalTheoryWeight: 0,
|
||||
totalActualWeight: 0,
|
||||
totalExitThickness: 0,
|
||||
avgExitWidth: 0,
|
||||
avgExitLength: 0,
|
||||
avgTheoryWeight: 0,
|
||||
avgActualWeight: 0,
|
||||
avgExitThickness: 0,
|
||||
coilCount: 0,
|
||||
totalEntryWeight: 0,
|
||||
yieldRate: 0
|
||||
},
|
||||
columns: [
|
||||
{ label: '出口物料ID', prop: 'exitMatId' },
|
||||
{ label: '入口物料ID', prop: 'entryMatId' },
|
||||
{ label: '机组号', prop: 'groupNo' },
|
||||
{ label: '班次号', prop: 'shiftNo' },
|
||||
{ label: '钢种', prop: 'steelGrade' },
|
||||
{ label: '出口厚度(mm)', prop: 'exitThickness' },
|
||||
{ label: '出口宽度(mm)', prop: 'exitWidth' },
|
||||
{ label: '出口长度(m)', prop: 'exitLength' },
|
||||
{ label: '理论重量(kg)', prop: 'theoryWeight' },
|
||||
{ label: '实际重量(kg)', prop: 'actualWeight' },
|
||||
{ label: '上线时间', prop: 'onlineTime' },
|
||||
],
|
||||
// 详细数据（无分页，一次性加载所有数据）
|
||||
reportDetail: [],
|
||||
// 加载状态
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始化时获取URL参数
|
||||
this.initQueryParams()
|
||||
// 加载报表数据
|
||||
this.fetchReportData()
|
||||
},
|
||||
methods: {
|
||||
// 从URL初始化查询参数
|
||||
initQueryParams() {
|
||||
const { groupNo, shiftNo, startTime, endTime } = this.$route.query
|
||||
if (groupNo) this.queryParams.groupNo = groupNo
|
||||
if (shiftNo) this.queryParams.shiftNo = shiftNo
|
||||
if (startTime) this.queryParams.startTime = startTime
|
||||
if (endTime) this.queryParams.endTime = endTime
|
||||
},
|
||||
|
||||
// 获取报表数据（无分页）
|
||||
async fetchReportData() {
|
||||
this.loading = true
|
||||
try {
|
||||
// 获取汇总数据
|
||||
const summaryRes = await getReportSummary(this.queryParams)
|
||||
this.reportSummary = summaryRes || this.reportSummary
|
||||
|
||||
// 获取详细数据（不传递分页参数，获取所有数据）
|
||||
const detailRes = await getReportDetail(this.queryParams)
|
||||
this.reportDetail = detailRes || []
|
||||
} catch (error) {
|
||||
this.$message.error('获取报表数据失败：' + (error.message || '未知错误'))
|
||||
console.error('报表数据获取失败', error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 重置查询条件
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
groupNo: '',
|
||||
shiftNo: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
}
|
||||
this.fetchReportData() // 重置后重新查询
|
||||
},
|
||||
|
||||
// 导出报表
|
||||
exportReport() {
|
||||
this.$confirm('确定要导出当前报表数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info'
|
||||
}).then(async () => {
|
||||
try {
|
||||
// 这里可以实现导出逻辑
|
||||
this.$message.success('报表导出成功')
|
||||
} catch (error) {
|
||||
this.$message.error('报表导出失败：' + (error.message || '未知错误'))
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消导出')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.report-container {
|
||||
min-height: 100vh;
|
||||
color: #ffffff;
|
||||
/* 文字设为白色 */
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
margin-bottom: 15px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.query-form {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* 紧凑的表单样式 */
|
||||
.el-form-item {
|
||||
margin-right: 10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-date-picker {
|
||||
--el-input-bg-color: rgba(255, 255, 255, 0.1) !important;
|
||||
--el-input-text-color: #ffffff !important;
|
||||
--el-input-placeholder-color: rgba(255, 255, 255, 0.6) !important;
|
||||
border-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.summary-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
.card-title {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.card-unit {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.detail-table-card {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.table-header {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-header h2 {
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-bg-color: transparent !important;
|
||||
--el-table-text-color: #ffffff !important;
|
||||
--el-table-border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-table tr:nth-child(even) {
|
||||
background-color: rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
.el-table tr:hover>td {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.el-table td {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-empty__description {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
/* 按钮样式优化 */
|
||||
.el-button {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
.el-button--small {
|
||||
padding: 5px 10px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +1,74 @@
|
||||
<template>
|
||||
<div class="pdo-report">
|
||||
<el-row>
|
||||
<el-form :inline="true" :model="queryParams" class="query-form" size="mini">
|
||||
<el-form-item label="开始日期" prop="startTime">
|
||||
<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="选择开始时间"
|
||||
value-format="yyyy-MM-dd 00:00:00" style="width: 200px;"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期" prop="endTime">
|
||||
<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择结束时间"
|
||||
value-format="yyyy-MM-dd 23:59:59" style="width: 200px;"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="fetchReportData" icon="el-icon-search" size="small">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<ReportBody v-loading="loading" title="实绩报表" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
|
||||
<div class="report-page">
|
||||
<div class="report-header">
|
||||
<div class="header-title">
|
||||
<i class="el-icon-document"></i>
|
||||
<div class="title-text">
|
||||
<span>实绩报表</span>
|
||||
<small>请选择时间范围后查看数据</small>
|
||||
</div>
|
||||
</div>
|
||||
<el-tag size="small" effect="plain">实绩</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="time-selector-card" v-if="!hasSelectedTime">
|
||||
<div class="selector-header">
|
||||
<i class="el-icon-calendar"></i>
|
||||
<span>请选择查询时间范围</span>
|
||||
</div>
|
||||
<div class="selector-content">
|
||||
<el-form :inline="true" size="small">
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker
|
||||
v-model="timeRange.startTime"
|
||||
type="datetime"
|
||||
placeholder="选择开始时间"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 220px;"
|
||||
:clearable="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker
|
||||
v-model="timeRange.endTime"
|
||||
type="datetime"
|
||||
placeholder="选择结束时间"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 220px;"
|
||||
:clearable="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :disabled="!canQuery" icon="el-icon-search" @click="handleTimeConfirm">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleTimeReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="report-content" v-else>
|
||||
<div class="content-toolbar">
|
||||
<div class="toolbar-info">
|
||||
<span class="info-label">报表类型：</span>
|
||||
<span class="info-value">实绩报表</span>
|
||||
<span class="info-divider">|</span>
|
||||
<span class="info-label">时间范围：</span>
|
||||
<span class="info-range">{{ displayTimeRange }}</span>
|
||||
</div>
|
||||
<el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">重新选择时间</el-button>
|
||||
</div>
|
||||
|
||||
<ReportBody
|
||||
v-loading="loading"
|
||||
title="实绩报表"
|
||||
:summary="reportSummary"
|
||||
:dataset="reportDetail"
|
||||
:columns="columns"
|
||||
:overview-info="overviewInfo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -25,64 +78,219 @@ import { getReportSummary, getReportDetail } from '@/api/l2/report'
|
||||
|
||||
export default {
|
||||
name: 'PdoReport',
|
||||
components: {
|
||||
ReportBody
|
||||
},
|
||||
components: { ReportBody },
|
||||
data() {
|
||||
return {
|
||||
queryParams: {
|
||||
// startTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-01 00:00:00',
|
||||
// endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 2).toString().padStart(2, '0') + '-01 00:00:00',
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
},
|
||||
loading: false,
|
||||
hasSelectedTime: false,
|
||||
timeRange: {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
reportSummary: [],
|
||||
reportDetail: [],
|
||||
columns: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchReportData() {
|
||||
this.loading = true
|
||||
const res = await getReportSummary(this.queryParams)
|
||||
this.reportSummary = [
|
||||
{ label: '成品卷数', value: res.coilCount }, // coilCount=总卷数，结合“成品总重/原料总重”场景，推测为成品卷数
|
||||
{ label: '平均出口厚度[mm]', value: res.avgExitThickness }, // avgExitThickness=平均出口厚度，厚度用“平均”更符合实际（单卷厚度均匀，无“总厚度”概念）
|
||||
{ label: '原料总重[t]', value: res.totalEntryWeight }, // totalEntryWeight=总入口重量，入口重量即原料重量
|
||||
{ label: '总出口长度[mm]', value: res.totalExitLength }, // totalExitLength=总出口长度，补充原“去锌总重”（无对应字段）的空缺，符合卷材加工的核心维度
|
||||
{ label: '平均出口宽度[mm]', value: res.avgExitWidth }, // avgExitWidth=平均出口宽度，宽度用“平均”更合理（单卷宽度固定，“总宽度”无业务意义）
|
||||
{ label: '成品总重[t]', value: res.totalActualWeight }, // totalActualWeight=总实际重量，实际重量即成品最终重量
|
||||
{ label: '总理论重量[t]', value: res.totalTheoryWeight }, // totalTheoryWeight=总理论重量，工业场景中常用“理论重量vs实际重量”对比
|
||||
{ label: '成材率', value: (res.yieldRate * 100).toFixed(2) + '%' } // yieldRate=成材率，原配置正确，保留
|
||||
];
|
||||
const res2 = await getReportDetail()
|
||||
this.reportDetail = res2.map(item => {
|
||||
return {
|
||||
...item,
|
||||
onlineTime: item.onlineTime.replace('T', ' ')
|
||||
}
|
||||
})
|
||||
this.columns = [
|
||||
{ label: '出口物料ID', prop: 'exitMatId' },
|
||||
{ label: '入口物料ID', prop: 'entryMatId' },
|
||||
{ label: '机组号', prop: 'groupNo' },
|
||||
{ label: '班次号', prop: 'shiftNo' },
|
||||
{ label: '钢种', prop: 'steelGrade' },
|
||||
{ label: '出口厚度(mm)', prop: 'exitThickness' },
|
||||
{ label: '出口宽度(mm)', prop: 'exitWidth' },
|
||||
{ label: '出口长度(m)', prop: 'exitLength' },
|
||||
{ label: '理论重量(kg)', prop: 'theoryWeight' },
|
||||
{ label: '实际重量(kg)', prop: 'actualWeight' },
|
||||
{ label: '上线时间', prop: 'onlineTime' },
|
||||
]
|
||||
this.loading = false
|
||||
computed: {
|
||||
canQuery() {
|
||||
return this.timeRange.startTime && this.timeRange.endTime
|
||||
},
|
||||
displayTimeRange() {
|
||||
if (!this.canQuery) return '-'
|
||||
return `${this.timeRange.startTime} 至 ${this.timeRange.endTime}`
|
||||
},
|
||||
overviewInfo() {
|
||||
return {
|
||||
reportLabel: '实绩报表',
|
||||
rangeText: this.displayTimeRange
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchReportData()
|
||||
methods: {
|
||||
handleTimeReset() {
|
||||
this.timeRange = {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
}
|
||||
},
|
||||
async handleTimeConfirm() {
|
||||
if (!this.canQuery) {
|
||||
this.$message.warning('请选择完整的时间范围')
|
||||
return
|
||||
}
|
||||
const start = new Date(this.timeRange.startTime)
|
||||
const end = new Date(this.timeRange.endTime)
|
||||
if (start > end) {
|
||||
this.$message.warning('开始时间不能晚于结束时间')
|
||||
return
|
||||
}
|
||||
this.hasSelectedTime = true
|
||||
await this.fetchReportData()
|
||||
},
|
||||
handleReturn() {
|
||||
this.hasSelectedTime = false
|
||||
this.handleTimeReset()
|
||||
this.reportSummary = []
|
||||
this.reportDetail = []
|
||||
},
|
||||
async fetchReportData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const queryParams = {
|
||||
startTime: this.timeRange.startTime,
|
||||
endTime: this.timeRange.endTime,
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
}
|
||||
const res = await getReportSummary(queryParams)
|
||||
this.reportSummary = [
|
||||
{ label: '成品卷数', value: res.coilCount },
|
||||
{ label: '平均出口厚度[mm]', value: res.avgExitThickness },
|
||||
{ label: '原料总重[t]', value: res.totalEntryWeight },
|
||||
{ label: '总出口长度[mm]', value: res.totalExitLength },
|
||||
{ label: '平均出口宽度[mm]', value: res.avgExitWidth },
|
||||
{ label: '成品总重[t]', value: res.totalActualWeight },
|
||||
{ label: '总理论重量[t]', value: res.totalTheoryWeight },
|
||||
{ label: '成材率', value: (res.yieldRate * 100).toFixed(2) + '%' }
|
||||
]
|
||||
const res2 = await getReportDetail(queryParams)
|
||||
this.reportDetail = (res2 || []).map(item => ({
|
||||
...item,
|
||||
onlineTime: item.onlineTime ? item.onlineTime.replace('T', ' ') : ''
|
||||
}))
|
||||
this.columns = [
|
||||
{ label: '出口物料ID', prop: 'exitMatId' },
|
||||
{ label: '入口物料ID', prop: 'entryMatId' },
|
||||
{ label: '机组号', prop: 'groupNo' },
|
||||
{ label: '班次号', prop: 'shiftNo' },
|
||||
{ label: '钢种', prop: 'steelGrade' },
|
||||
{ label: '出口厚度(mm)', prop: 'exitThickness' },
|
||||
{ label: '出口宽度(mm)', prop: 'exitWidth' },
|
||||
{ label: '出口长度(m)', prop: 'exitLength' },
|
||||
{ label: '理论重量(t)', prop: 'theoryWeight' },
|
||||
{ label: '实际重量(t)', prop: 'actualWeight' },
|
||||
{ label: '上线时间', prop: 'onlineTime' }
|
||||
]
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.$message.error('获取报表数据失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.report-page {
|
||||
height: calc(100vh - 84px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
}
|
||||
.title-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-selector-card {
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
|
||||
.selector-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
i {
|
||||
margin-right: 8px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-content {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.report-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.toolbar-info {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
.info-label {
|
||||
color: #777;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.info-value,
|
||||
.info-range {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.info-divider {
|
||||
margin: 0 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +1,74 @@
|
||||
<template>
|
||||
<div class="roller-report">
|
||||
<el-row>
|
||||
<el-form :inline="true" :model="queryParams" class="query-form" size="mini">
|
||||
<el-form-item label="开始日期" prop="startDate">
|
||||
<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="选择开始时间"
|
||||
value-format="yyyy-MM-dd 00:00:00" style="width: 200px;"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期" prop="endDate">
|
||||
<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择结束时间"
|
||||
value-format="yyyy-MM-dd 23:59:59" style="width: 200px;"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="fetchReportData" icon="el-icon-search" size="small">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<ReportBody v-loading="loading" title="换辊报表" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
|
||||
<div class="report-page">
|
||||
<div class="report-header">
|
||||
<div class="header-title">
|
||||
<i class="el-icon-document"></i>
|
||||
<div class="title-text">
|
||||
<span>换辊报表</span>
|
||||
<small>请选择时间范围后查看数据</small>
|
||||
</div>
|
||||
</div>
|
||||
<el-tag size="small" effect="plain">换辊</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="time-selector-card" v-if="!hasSelectedTime">
|
||||
<div class="selector-header">
|
||||
<i class="el-icon-calendar"></i>
|
||||
<span>请选择查询时间范围</span>
|
||||
</div>
|
||||
<div class="selector-content">
|
||||
<el-form :inline="true" size="small">
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker
|
||||
v-model="timeRange.startTime"
|
||||
type="datetime"
|
||||
placeholder="选择开始时间"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 220px;"
|
||||
:clearable="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker
|
||||
v-model="timeRange.endTime"
|
||||
type="datetime"
|
||||
placeholder="选择结束时间"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 220px;"
|
||||
:clearable="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :disabled="!canQuery" icon="el-icon-search" @click="handleTimeConfirm">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleTimeReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="report-content" v-else>
|
||||
<div class="content-toolbar">
|
||||
<div class="toolbar-info">
|
||||
<span class="info-label">报表类型：</span>
|
||||
<span class="info-value">换辊报表</span>
|
||||
<span class="info-divider">|</span>
|
||||
<span class="info-label">时间范围：</span>
|
||||
<span class="info-range">{{ displayTimeRange }}</span>
|
||||
</div>
|
||||
<el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">重新选择时间</el-button>
|
||||
</div>
|
||||
|
||||
<ReportBody
|
||||
v-loading="loading"
|
||||
title="换辊报表"
|
||||
:summary="reportSummary"
|
||||
:dataset="reportDetail"
|
||||
:columns="columns"
|
||||
:overview-info="overviewInfo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -25,50 +78,210 @@ import { getRollHistorytList } from '@/api/l2/roller'
|
||||
|
||||
export default {
|
||||
name: 'RollerReport',
|
||||
components: {
|
||||
ReportBody
|
||||
},
|
||||
components: { ReportBody },
|
||||
data() {
|
||||
return {
|
||||
queryParams: {
|
||||
// startTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-01 00:00:00',
|
||||
// endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 2).toString().padStart(2, '0') + '-01 00:00:00',
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
endTime: '',
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
loading: false,
|
||||
hasSelectedTime: false,
|
||||
timeRange: {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
reportSummary: [],
|
||||
reportDetail: [],
|
||||
columns: [],
|
||||
loading: false
|
||||
columns: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchReportData()
|
||||
computed: {
|
||||
canQuery() {
|
||||
return this.timeRange.startTime && this.timeRange.endTime
|
||||
},
|
||||
displayTimeRange() {
|
||||
if (!this.canQuery) return '-'
|
||||
return `${this.timeRange.startTime} 至 ${this.timeRange.endTime}`
|
||||
},
|
||||
overviewInfo() {
|
||||
return {
|
||||
reportLabel: '换辊报表',
|
||||
rangeText: this.displayTimeRange
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTimeReset() {
|
||||
this.timeRange = {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
}
|
||||
},
|
||||
async handleTimeConfirm() {
|
||||
if (!this.canQuery) {
|
||||
this.$message.warning('请选择完整的时间范围')
|
||||
return
|
||||
}
|
||||
if (new Date(this.timeRange.startTime) > new Date(this.timeRange.endTime)) {
|
||||
this.$message.warning('开始时间不能晚于结束时间')
|
||||
return
|
||||
}
|
||||
this.hasSelectedTime = true
|
||||
await this.fetchReportData()
|
||||
},
|
||||
handleReturn() {
|
||||
this.hasSelectedTime = false
|
||||
this.handleTimeReset()
|
||||
this.reportSummary = []
|
||||
this.reportDetail = []
|
||||
},
|
||||
async fetchReportData() {
|
||||
this.loading = true
|
||||
const res = await getRollHistorytList(this.queryParams)
|
||||
this.reportDetail = res.data.list
|
||||
this.columns = [
|
||||
{ label: '换辊号', prop: 'changeid' },
|
||||
{ label: '轧辊号', prop: 'rollid' },
|
||||
{ label: '类型', prop: 'type' },
|
||||
{ label: '位置', prop: 'position' },
|
||||
{ label: '直径', prop: 'diameter' },
|
||||
{ label: '粗糙度', prop: 'rough' },
|
||||
{ label: '凸度', prop: 'crown' },
|
||||
{ label: '轧制长度', prop: 'rolledLength' },
|
||||
{ label: '轧制重量', prop: 'rolledWeight' },
|
||||
{ label: '轧制次数', prop: 'rolledCount' },
|
||||
{ label: '上线时间', prop: 'instalTime' },
|
||||
{ label: '下线时间', prop: 'deinstalTime' },
|
||||
]
|
||||
this.loading = false
|
||||
try {
|
||||
const queryParams = {
|
||||
startTime: this.timeRange.startTime,
|
||||
endTime: this.timeRange.endTime,
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
}
|
||||
const res = await getRollHistorytList(queryParams)
|
||||
this.reportDetail = (res.data?.list || []).map(item => ({
|
||||
...item
|
||||
}))
|
||||
this.columns = [
|
||||
{ label: '换辊号', prop: 'changeid' },
|
||||
{ label: '轧辊号', prop: 'rollid' },
|
||||
{ label: '类型', prop: 'type' },
|
||||
{ label: '位置', prop: 'position' },
|
||||
{ label: '直径', prop: 'diameter' },
|
||||
{ label: '粗糙度', prop: 'rough' },
|
||||
{ label: '凸度', prop: 'crown' },
|
||||
{ label: '轧制长度', prop: 'rolledLength' },
|
||||
{ label: '轧制重量', prop: 'rolledWeight' },
|
||||
{ label: '轧制次数', prop: 'rolledCount' },
|
||||
{ label: '上线时间', prop: 'instalTime' },
|
||||
{ label: '下线时间', prop: 'deinstalTime' }
|
||||
]
|
||||
this.reportSummary = [
|
||||
{ label: '数据条数', value: this.reportDetail.length },
|
||||
{ label: '时间范围', value: this.displayTimeRange }
|
||||
]
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.$message.error('获取报表数据失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.report-page {
|
||||
height: calc(100vh - 84px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
}
|
||||
.title-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-selector-card {
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
|
||||
.selector-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
i {
|
||||
margin-right: 8px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-content {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.report-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.toolbar-info {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
.info-label {
|
||||
color: #777;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.info-value,
|
||||
.info-range {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.info-divider {
|
||||
margin: 0 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +1,92 @@
|
||||
<template>
|
||||
<div class="stop-report">
|
||||
<el-row>
|
||||
<el-form :inline="true" :model="queryParams" class="query-form" size="mini">
|
||||
<el-form-item label="开始日期" prop="startDate">
|
||||
<el-date-picker v-model="queryParams.startDate" type="datetime" placeholder="选择开始时间"
|
||||
value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期" prop="endDate">
|
||||
<el-date-picker v-model="queryParams.endDate" type="datetime" placeholder="选择结束时间"
|
||||
value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="fetchReportData" icon="el-icon-search" size="small">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<ReportBody v-loading="loading" title="停机报表" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
|
||||
<div class="report-page">
|
||||
<div class="report-header">
|
||||
<div class="header-title">
|
||||
<i class="el-icon-document"></i>
|
||||
<div class="title-text">
|
||||
<span>停机报表</span>
|
||||
<small>请选择时间范围后查看数据</small>
|
||||
</div>
|
||||
</div>
|
||||
<el-tag size="small" effect="plain">停机</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="time-selector-card" v-if="!hasSelectedTime">
|
||||
<div class="selector-header">
|
||||
<i class="el-icon-calendar"></i>
|
||||
<span>请选择查询日期范围</span>
|
||||
</div>
|
||||
<div class="selector-content">
|
||||
<el-form :inline="true" size="small">
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker
|
||||
v-model="timeRange.startTime"
|
||||
type="date"
|
||||
placeholder="选择开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 200px;"
|
||||
:clearable="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker
|
||||
v-model="timeRange.endTime"
|
||||
type="date"
|
||||
placeholder="选择结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 200px;"
|
||||
:clearable="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :disabled="!canQuery" icon="el-icon-search" @click="handleTimeConfirm">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleTimeReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="report-content" v-else>
|
||||
<div class="content-toolbar">
|
||||
<div class="toolbar-info">
|
||||
<span class="info-label">报表类型：</span>
|
||||
<span class="info-value">停机报表</span>
|
||||
<span class="info-divider">|</span>
|
||||
<span class="info-label">时间范围：</span>
|
||||
<span class="info-range">{{ displayTimeRange }}</span>
|
||||
</div>
|
||||
<el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">重新选择时间</el-button>
|
||||
</div>
|
||||
|
||||
<ReportBody
|
||||
v-loading="loading"
|
||||
title="停机报表"
|
||||
:summary="reportSummary"
|
||||
:dataset="reportDetail"
|
||||
:columns="columns"
|
||||
:overview-info="overviewInfo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ReportBody from './components/body.vue'
|
||||
import { listStoppage, getStoppageSummary } from '@/api/l2/stop';
|
||||
import { listStoppage, getStoppageSummary } from '@/api/l2/stop'
|
||||
|
||||
export default {
|
||||
name: 'StopReport',
|
||||
components: {
|
||||
ReportBody
|
||||
},
|
||||
components: { ReportBody },
|
||||
data() {
|
||||
return {
|
||||
// 默认值为本月
|
||||
queryParams: {
|
||||
// startDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-01',
|
||||
startDate: '2020-01-01',
|
||||
// 最后一天不一定是31？
|
||||
// endDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 2).toString().padStart(2, '0') + '-01',
|
||||
// 今天
|
||||
endDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + new Date().getDate(),
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
},
|
||||
loading: false,
|
||||
hasSelectedTime: false,
|
||||
timeRange: {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
reportSummary: [],
|
||||
reportDetail: [],
|
||||
columns: [
|
||||
@@ -52,28 +97,188 @@ export default {
|
||||
{ label: '结束时间', prop: 'endDate' },
|
||||
{ label: '持续时间[分钟]', prop: 'duration' },
|
||||
{ label: '停机类型', prop: 'unit' },
|
||||
{ label: '备注', prop: 'remark' },
|
||||
{ label: '备注', prop: 'remark' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchReportData()
|
||||
computed: {
|
||||
canQuery() {
|
||||
return this.timeRange.startTime && this.timeRange.endTime
|
||||
},
|
||||
displayTimeRange() {
|
||||
if (!this.canQuery) return '-'
|
||||
return `${this.timeRange.startTime} 至 ${this.timeRange.endTime}`
|
||||
},
|
||||
overviewInfo() {
|
||||
return {
|
||||
reportLabel: '停机报表',
|
||||
rangeText: this.displayTimeRange
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTimeReset() {
|
||||
this.timeRange = {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
}
|
||||
},
|
||||
async handleTimeConfirm() {
|
||||
if (!this.canQuery) {
|
||||
this.$message.warning('请选择完整的日期范围')
|
||||
return
|
||||
}
|
||||
if (new Date(this.timeRange.startTime) > new Date(this.timeRange.endTime)) {
|
||||
this.$message.warning('开始日期不能晚于结束日期')
|
||||
return
|
||||
}
|
||||
this.hasSelectedTime = true
|
||||
await this.fetchReportData()
|
||||
},
|
||||
handleReturn() {
|
||||
this.hasSelectedTime = false
|
||||
this.handleTimeReset()
|
||||
this.reportSummary = []
|
||||
this.reportDetail = []
|
||||
},
|
||||
async fetchReportData() {
|
||||
this.loading = true
|
||||
const res = await listStoppage(this.queryParams)
|
||||
this.reportDetail = res.data
|
||||
const res2 = await getStoppageSummary(this.queryParams)
|
||||
this.reportSummary = [
|
||||
{ label: '统计区间', value: this.queryParams.startDate + ' 至 ' + this.queryParams.endDate },
|
||||
{ label: '停机次数', value: res2.data[0] },
|
||||
{ label: '停机时长[小时]', value: res2.data[1] },
|
||||
{ label: '作业率', value: res2.data[2] + ' %' },
|
||||
]
|
||||
|
||||
this.loading = false
|
||||
try {
|
||||
const queryParams = {
|
||||
startDate: this.timeRange.startTime,
|
||||
endDate: this.timeRange.endTime,
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
}
|
||||
const res = await listStoppage(queryParams)
|
||||
this.reportDetail = res.data || []
|
||||
|
||||
const res2 = await getStoppageSummary(queryParams)
|
||||
this.reportSummary = [
|
||||
{ label: '统计区间', value: this.displayTimeRange },
|
||||
{ label: '停机次数', value: res2.data?.[0] || 0 },
|
||||
{ label: '停机时长[小时]', value: res2.data?.[1] || 0 },
|
||||
{ label: '作业率', value: (res2.data?.[2] || 0) + ' %' }
|
||||
]
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.$message.error('获取报表数据失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.report-page {
|
||||
height: calc(100vh - 84px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
}
|
||||
.title-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-selector-card {
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
|
||||
.selector-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
i {
|
||||
margin-right: 8px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-content {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.report-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 2px;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.toolbar-info {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
.info-label {
|
||||
color: #777;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.info-value,
|
||||
.info-range {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.info-divider {
|
||||
margin: 0 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div class="filter-container">
|
||||
<div class="filter-panel">
|
||||
<div class="panel-header">
|
||||
<h4>历史检索</h4>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<div class="filter-label">• 按时间</div>
|
||||
<div class="filter-content time-range">
|
||||
@@ -17,7 +20,7 @@
|
||||
format="HH:mm"
|
||||
placeholder="选择时间"
|
||||
value-format="HH:mm"
|
||||
style="width: 90px; margin-left: 5px"
|
||||
style="width: 140px; margin-left: 5px"
|
||||
></el-time-picker>
|
||||
|
||||
<div class="time-label" style="margin-top: 10px">结束时间：</div>
|
||||
@@ -33,7 +36,7 @@
|
||||
format="HH:mm"
|
||||
placeholder="选择时间"
|
||||
value-format="HH:mm"
|
||||
style="width: 90px; margin-left: 5px"
|
||||
style="width: 140px; margin-left: 5px"
|
||||
></el-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,12 +91,10 @@ export default {
|
||||
changeId: '',
|
||||
rollId: ''
|
||||
},
|
||||
// 开始日期和时间
|
||||
startDate: '2020-01-01',
|
||||
startTime: '10:00',
|
||||
// 结束日期和时间
|
||||
endDate: '2020-12-01',
|
||||
endTime: '22:00',
|
||||
startDate: '',
|
||||
startTime: '',
|
||||
endDate: '',
|
||||
endTime: '',
|
||||
// 换辊号选项
|
||||
changeIdOptions: [],
|
||||
// 轧辊号选项
|
||||
@@ -104,19 +105,8 @@ export default {
|
||||
// 获取换辊号和轧辊号列表
|
||||
this.getChangeIdOptions()
|
||||
this.getRollIdOptions()
|
||||
|
||||
// 设置默认时间范围
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth()
|
||||
|
||||
const startDate = new Date(year, month, 1)
|
||||
const endDate = new Date()
|
||||
|
||||
this.startDate = this.formatDate(startDate)
|
||||
this.endDate = this.formatDate(endDate)
|
||||
this.startTime = '00:00'
|
||||
this.endTime = '23:59'
|
||||
|
||||
this.setDefaultTimeRange()
|
||||
},
|
||||
methods: {
|
||||
// 获取换辊号列表
|
||||
@@ -149,16 +139,31 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
// 格式化日期为 yyyy-MM-dd 格式
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
},
|
||||
formatTime(date) {
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${hours}:${minutes}`
|
||||
},
|
||||
setDefaultTimeRange() {
|
||||
this.startDate = '2020-01-01'
|
||||
this.startTime = '10:00'
|
||||
this.setEndToNow()
|
||||
},
|
||||
setEndToNow() {
|
||||
const now = new Date()
|
||||
this.endDate = this.formatDate(now)
|
||||
this.endTime = this.formatTime(now)
|
||||
},
|
||||
|
||||
// 处理搜索按钮点击
|
||||
handleSearch() {
|
||||
this.setEndToNow()
|
||||
// 构建搜索参数
|
||||
const params = {
|
||||
startTime: `${this.startDate} ${this.startTime}:00`,
|
||||
@@ -179,19 +184,7 @@ export default {
|
||||
changeId: '',
|
||||
rollId: ''
|
||||
}
|
||||
|
||||
// 设置默认时间范围
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth()
|
||||
|
||||
const startDate = new Date(year, month, 1)
|
||||
const endDate = new Date()
|
||||
|
||||
this.startDate = this.formatDate(startDate)
|
||||
this.endDate = this.formatDate(endDate)
|
||||
this.startTime = '00:00'
|
||||
this.endTime = '23:59'
|
||||
this.setDefaultTimeRange()
|
||||
|
||||
// 触发父组件的重置事件
|
||||
this.$emit('reset')
|
||||
@@ -203,12 +196,33 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.filter-container {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.filter-panel {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
@@ -236,7 +250,6 @@ export default {
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
|
||||
.el-button {
|
||||
|
||||
@@ -1,45 +1,55 @@
|
||||
<template>
|
||||
<div class="history-container">
|
||||
<div class="history-table">
|
||||
|
||||
<div class="history-table" ref="historyWrapper" @mouseleave="handleTableLeave">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
class="compact-table"
|
||||
height="400px"
|
||||
:show-overflow-tooltip="true"
|
||||
@cell-mouse-enter="handleCellEnter"
|
||||
@row-mouseleave="handleRowLeave"
|
||||
>
|
||||
<el-table-column prop="changeid" label="换辊号" width="120" align="center" />
|
||||
<el-table-column prop="rollid" label="轧辊号" width="120" align="center" />
|
||||
<el-table-column prop="seton" label="机组" width="80" align="center" />
|
||||
<el-table-column prop="shift" label="班次" width="60" align="center" />
|
||||
<el-table-column prop="crew" label="班组" width="60" align="center" />
|
||||
<el-table-column prop="standid" label="机架号" width="80" align="center" />
|
||||
<el-table-column label="位置" align="center" prop="position" width="50">
|
||||
<el-table-column prop="changeid" label="换辊号" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="rollid" label="轧辊号" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="standid" label="机架号" align="center" show-overflow-tooltip />
|
||||
<el-table-column label="位置" align="center" prop="position">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.roller_position" :value="scope.row.position" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center" prop="type">
|
||||
<el-table-column label="类型" align="center" prop="type" >
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.roller_type" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="diameter" label="直径" width="100" align="center" />
|
||||
<el-table-column prop="rough" label="粗糙度" width="100" align="center" />
|
||||
<el-table-column prop="crown" label="凸度" width="100" align="center" />
|
||||
<el-table-column prop="composition" label="成分" width="100" align="center" />
|
||||
<el-table-column prop="grindCount" label="磨削次数" width="100" align="center" />
|
||||
<el-table-column prop="rolledWeight" label="轧制重量" width="100" align="center" />
|
||||
<el-table-column prop="rolledCount" label="轧制数量" width="100" align="center" />
|
||||
<el-table-column prop="rolledLength" label="轧制长度" width="100" align="center" />
|
||||
<el-table-column prop="totalRolledWeight" label="总轧制重量" width="120" align="center" />
|
||||
<el-table-column prop="totalRolledLength" label="总轧制长度" width="120" align="center" />
|
||||
<el-table-column prop="totalRolledCount" label="总轧制数量" width="120" align="center" />
|
||||
<el-table-column prop="changeType" label="换辊类型" width="100" align="center" />
|
||||
<el-table-column prop="changeTime" label="换辊时间" width="160" align="center" />
|
||||
<el-table-column prop="instalTime" label="安装时间" width="160" align="center" />
|
||||
<el-table-column prop="deinstalTime" label="拆卸时间" width="160" align="center" />
|
||||
<el-table-column prop="changeType" label="换辊类型" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="changeTime" label="换辊时间" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="instalTime" label="安装时间" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="deinstalTime" label="拆卸时间" align="center" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<transition name="el-fade-in-linear">
|
||||
<div
|
||||
v-if="tooltipVisible && hoveredRow"
|
||||
class="row-tooltip"
|
||||
:style="tooltipStyle"
|
||||
ref="rowTooltip"
|
||||
>
|
||||
<div class="tooltip-title">详细信息</div>
|
||||
<div class="tooltip-list">
|
||||
<div
|
||||
class="tooltip-item"
|
||||
v-for="field in detailFields"
|
||||
:key="field.prop"
|
||||
>
|
||||
<span class="label">{{ field.label }}：</span>
|
||||
<span class="value">{{ formatTooltipValue(hoveredRow, field) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<Pagination
|
||||
v-show="pagination.total>0"
|
||||
@@ -55,18 +65,55 @@
|
||||
import { getRollHistorytList } from '@/api/l2/roller'
|
||||
|
||||
export default {
|
||||
dicts: ['roller_type','roller_position'],
|
||||
name: 'RollerHistory',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 15,
|
||||
total: 0
|
||||
},
|
||||
tooltipVisible: false,
|
||||
tooltipStyle: {
|
||||
top: '0px',
|
||||
left: '0px'
|
||||
},
|
||||
hoveredRow: null,
|
||||
searching: false,
|
||||
searchForm: {
|
||||
changeId: '',
|
||||
rollId: '',
|
||||
changeTimeRange: [],
|
||||
instalTimeRange: [],
|
||||
deinstalTimeRange: []
|
||||
},
|
||||
detailFields: [
|
||||
{ label: '换辊号', prop: 'changeid' },
|
||||
{ label: '轧辊号', prop: 'rollid' },
|
||||
{ label: '机架号', prop: 'standid' },
|
||||
{ label: '位置', prop: 'position', dict: 'roller_position' },
|
||||
{ label: '类型', prop: 'type', dict: 'roller_type' },
|
||||
{ label: '换辊类型', prop: 'changeType' },
|
||||
{ label: '换辊时间', prop: 'changeTime' },
|
||||
{ label: '安装时间', prop: 'instalTime' },
|
||||
{ label: '拆卸时间', prop: 'deinstalTime' },
|
||||
{ label: '直径', prop: 'diameter' },
|
||||
{ label: '粗糙度', prop: 'rough' },
|
||||
{ label: '凸度', prop: 'crown' },
|
||||
{ label: '成分', prop: 'composition' },
|
||||
{ label: '磨削次数', prop: 'grindCount' },
|
||||
{ label: '轧制重量', prop: 'rolledWeight' },
|
||||
{ label: '轧制数量', prop: 'rolledCount' },
|
||||
{ label: '轧制长度', prop: 'rolledLength' },
|
||||
{ label: '总轧制重量', prop: 'totalRolledWeight' },
|
||||
{ label: '总轧制长度', prop: 'totalRolledLength' },
|
||||
{ label: '总轧制数量', prop: 'totalRolledCount' }
|
||||
]
|
||||
}
|
||||
},
|
||||
dicts: ['roller_type','roller_position'],
|
||||
|
||||
props: {
|
||||
params: {
|
||||
type: Object,
|
||||
@@ -89,26 +136,14 @@ export default {
|
||||
// this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
// 获取表格数据
|
||||
fetchData() {
|
||||
// 如果没有搜索参数，则不发起请求
|
||||
// if (Object.keys(this.params).length === 0) {
|
||||
// this.tableData = []
|
||||
// this.pagination.total = 0
|
||||
// return
|
||||
// }
|
||||
|
||||
// 根据API文档，需要构建正确的请求体
|
||||
const requestBody = {
|
||||
...this.params,
|
||||
...this.buildSearchParams(),
|
||||
pageNum: this.pagination.currentPage,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
|
||||
console.log('发送请求参数:', requestBody)
|
||||
console.log('请求URL:', '/l2-api/api/roller/history/list')
|
||||
console.log('请求方法:', 'POST')
|
||||
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
@@ -116,28 +151,17 @@ export default {
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
|
||||
getRollHistorytList(requestBody)
|
||||
return getRollHistorytList(requestBody)
|
||||
.then(res => {
|
||||
loading.close()
|
||||
console.log('API响应:', res)
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
// 处理返回的分页数据
|
||||
this.tableData = res.data.list || []
|
||||
this.pagination.total = res.data.total || 0
|
||||
this.pagination.currentPage = res.data.pageNum || 1
|
||||
|
||||
// 格式化日期时间
|
||||
this.tableData.forEach(item => {
|
||||
if (item.changeTime) {
|
||||
item.changeTime = this.formatDate(item.changeTime)
|
||||
}
|
||||
if (item.instalTime) {
|
||||
item.instalTime = this.formatDate(item.instalTime)
|
||||
}
|
||||
if (item.deinstalTime) {
|
||||
item.deinstalTime = this.formatDate(item.deinstalTime)
|
||||
}
|
||||
if (item.changeTime) item.changeTime = this.formatDate(item.changeTime)
|
||||
if (item.instalTime) item.instalTime = this.formatDate(item.instalTime)
|
||||
if (item.deinstalTime) item.deinstalTime = this.formatDate(item.deinstalTime)
|
||||
})
|
||||
} else {
|
||||
this.$message.error(res.msg || '获取数据失败')
|
||||
@@ -146,12 +170,14 @@ export default {
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
loading.close()
|
||||
console.error('获取轧辊历史数据失败', error)
|
||||
this.$message.error('获取数据失败：' + (error.message || '未知错误'))
|
||||
this.tableData = []
|
||||
this.pagination.total = 0
|
||||
})
|
||||
.finally(() => {
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
@@ -207,6 +233,101 @@ export default {
|
||||
handleSizeChange(pageSize) {
|
||||
this.pagination.pageSize = pageSize
|
||||
this.fetchData()
|
||||
},
|
||||
handleLocalSearch() {
|
||||
this.searching = true
|
||||
this.pagination.currentPage = 1
|
||||
this.fetchData().finally(() => {
|
||||
this.searching = false
|
||||
})
|
||||
},
|
||||
handleLocalReset() {
|
||||
this.searchForm = {
|
||||
changeId: '',
|
||||
rollId: '',
|
||||
changeTimeRange: [],
|
||||
instalTimeRange: [],
|
||||
deinstalTimeRange: []
|
||||
}
|
||||
this.pagination.currentPage = 1
|
||||
this.fetchData()
|
||||
},
|
||||
buildSearchParams() {
|
||||
const params = {}
|
||||
if (this.searchForm.changeId) {
|
||||
params.changeId = this.searchForm.changeId
|
||||
}
|
||||
if (this.searchForm.rollId) {
|
||||
params.rollid = this.searchForm.rollId
|
||||
}
|
||||
|
||||
const [changeStart, changeEnd] = this.searchForm.changeTimeRange || []
|
||||
if (changeStart && changeEnd) {
|
||||
params.changeTimeBegin = changeStart
|
||||
params.changeTimeEnd = changeEnd
|
||||
}
|
||||
const [instalStart, instalEnd] = this.searchForm.instalTimeRange || []
|
||||
if (instalStart && instalEnd) {
|
||||
params.instalTimeBegin = instalStart
|
||||
params.instalTimeEnd = instalEnd
|
||||
}
|
||||
const [deinstalStart, deinstalEnd] = this.searchForm.deinstalTimeRange || []
|
||||
if (deinstalStart && deinstalEnd) {
|
||||
params.deinstalTimeBegin = deinstalStart
|
||||
params.deinstalTimeEnd = deinstalEnd
|
||||
}
|
||||
return params
|
||||
},
|
||||
handleCellEnter(row, column, cell, event) {
|
||||
if (!row || !event) return
|
||||
this.hoveredRow = row
|
||||
this.tooltipVisible = true
|
||||
this.updateTooltipPosition(event)
|
||||
},
|
||||
handleRowLeave() {
|
||||
this.tooltipVisible = false
|
||||
this.hoveredRow = null
|
||||
},
|
||||
handleTableLeave() {
|
||||
this.tooltipVisible = false
|
||||
this.hoveredRow = null
|
||||
},
|
||||
updateTooltipPosition(event) {
|
||||
this.$nextTick(() => {
|
||||
const wrapper = this.$refs.historyWrapper
|
||||
const tooltipEl = this.$refs.rowTooltip
|
||||
if (!wrapper || !tooltipEl) return
|
||||
|
||||
const wrapperRect = wrapper.getBoundingClientRect()
|
||||
const tooltipRect = tooltipEl.getBoundingClientRect()
|
||||
let left = event.clientX - wrapperRect.left + 16
|
||||
let top = event.clientY - wrapperRect.top + 12
|
||||
|
||||
if (left + tooltipRect.width > wrapperRect.width) {
|
||||
left = wrapperRect.width - tooltipRect.width - 8
|
||||
}
|
||||
if (left < 8) left = 8
|
||||
if (top + tooltipRect.height > wrapperRect.height) {
|
||||
top = wrapperRect.height - tooltipRect.height - 8
|
||||
}
|
||||
if (top < 8) top = 8
|
||||
|
||||
this.tooltipStyle = {
|
||||
top: `${top}px`,
|
||||
left: `${left}px`
|
||||
}
|
||||
})
|
||||
},
|
||||
formatTooltipValue(row, field) {
|
||||
const value = row[field.prop]
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '-'
|
||||
}
|
||||
if (field.dict && this.dict && this.dict.type && this.dict.type[field.dict]) {
|
||||
const match = this.dict.type[field.dict].find(item => item.value === value)
|
||||
return match ? match.label : value
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -214,15 +335,34 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-container {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
|
||||
.history-search-panel {
|
||||
margin-bottom: 8px;
|
||||
background: #ffffff;
|
||||
|
||||
.history-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 8px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.history-table {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
background: #ffffff;
|
||||
|
||||
.compact-table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
@@ -240,4 +380,56 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table td {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.row-tooltip {
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 12px 14px;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
max-height: 70%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tooltip-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 6px 12px;
|
||||
}
|
||||
|
||||
.tooltip-item {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
line-height: 1.5;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
margin-right: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,38 +1,40 @@
|
||||
<!-- 当前在线辊的信息，props接收在线辊的表格数据 -->
|
||||
<template>
|
||||
<div class="online-roll">
|
||||
<div style="display: flex; justify-content: center; align-items: center;">
|
||||
<div class="panel-header">
|
||||
<h4>在线辊</h4>
|
||||
</div>
|
||||
<el-table
|
||||
:data="onlineData"
|
||||
cell-class-name="roll-cell"
|
||||
border
|
||||
stripe
|
||||
size="mini"
|
||||
style="width: 1500px; table-layout: fixed;"
|
||||
v-loading="loading"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<el-table-column prop="rollid" label="轧辊号"/>
|
||||
<el-table-column label="位置" align="center" prop="position" width="50">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.roller_position" :value="scope.row.position" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center" prop="type" width="65">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.roller_type" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="diameter" label="直径" width="70" />
|
||||
<el-table-column prop="rough" label="粗糙度" width="65" />
|
||||
<el-table-column prop="crown" label="凸度" width="60" />
|
||||
<el-table-column prop="rolledLength" label="长度" width="70" />
|
||||
<el-table-column prop="rolledWeight" label="重量" width="70" />
|
||||
<el-table-column prop="rolledCount" label="轧制数量" width="75" />
|
||||
<el-table-column prop="instalTime" label="装机时间" width="160" />
|
||||
</el-table>
|
||||
<el-table
|
||||
:data="onlineData"
|
||||
border
|
||||
stripe
|
||||
size="mini"
|
||||
class="compact-table"
|
||||
v-loading="loading"
|
||||
:show-overflow-tooltip="true"
|
||||
style="width: 100%; table-layout: fixed;"
|
||||
>
|
||||
<el-table-column prop="rollid" label="轧辊号" show-overflow-tooltip />
|
||||
<el-table-column label="位置" align="center" prop="position" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.position }}</span>
|
||||
<dict-tag :options="dict.type.roller_position" :value="scope.row.position" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center" prop="type" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.type }}</span>
|
||||
<dict-tag :options="dict.type.roller_type" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="diameter" label="直径" show-overflow-tooltip />
|
||||
<el-table-column prop="rough" label="粗糙度"show-overflow-tooltip />
|
||||
<el-table-column prop="crown" label="凸度" show-overflow-tooltip />
|
||||
<el-table-column prop="rolledLength" label="长度" show-overflow-tooltip />
|
||||
<el-table-column prop="rolledWeight" label="重量" show-overflow-tooltip />
|
||||
<el-table-column prop="rolledCount" label="轧制数量" show-overflow-tooltip />
|
||||
<el-table-column prop="instalTime" label="装机时间" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -64,15 +66,37 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.online-roll {
|
||||
overflow-x: auto; /* 父容器允许横向滚动，保证不挤行 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.el-table th,
|
||||
.el-table td {
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.compact-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
<!-- 换坤标准，props接收在线辊的表格数据 -->
|
||||
<template>
|
||||
<div class="standard-roll">
|
||||
<div style="display: flex; justify-content: center; align-items: center;">
|
||||
<div class="panel-header">
|
||||
<h4>换辊标准</h4>
|
||||
</div>
|
||||
<el-table
|
||||
:data="onlineData"
|
||||
cell-class-name="roll-cell"
|
||||
border
|
||||
stripe
|
||||
size="mini"
|
||||
style="width: 100%; table-layout: fixed;"
|
||||
class="compact-table"
|
||||
v-loading="loading"
|
||||
:row-style="{ 'text-align': 'center' }"
|
||||
:show-overflow-tooltip="true"
|
||||
header-align="center"
|
||||
align="center"
|
||||
style="width: 100%; table-layout: fixed;"
|
||||
>
|
||||
<el-table-column prop="usableLength" label="可用长度"/>
|
||||
<el-table-column prop="leftLength" label="剩余长度" width="75"/>
|
||||
<el-table-column prop="usableWeight" label="可用重量" width="75"/>
|
||||
<el-table-column prop="leftWeight" label="剩余重量" width="75"/>
|
||||
<el-table-column prop="usableLength" label="可用长度" show-overflow-tooltip />
|
||||
<el-table-column prop="leftLength" label="剩余长度" show-overflow-tooltip />
|
||||
<el-table-column prop="usableWeight" label="可用重量" show-overflow-tooltip />
|
||||
<el-table-column prop="leftWeight" label="剩余重量" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -49,9 +49,33 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-table th,
|
||||
.el-table td {
|
||||
<style scoped lang="scss">
|
||||
.standard-roll {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.compact-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table td {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -1,66 +1,57 @@
|
||||
<!-- 准备轧辊的表格，props接收在线辊表格数据，每一个在线辊生成一个换辊行，组件内部处理获取所有备用轧辊和创建备用轧辊的信息 -->
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div style="display: flex; justify-content: center; align-items: center;">
|
||||
<h4 style=" text-align: center; flex: 1;">准备辊</h4>
|
||||
<div style="margin-left: auto;">
|
||||
<el-button type="primary" size="mini" @click="handleBackup">备辊</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleOnline">上线</el-button>
|
||||
<div class="standby-panel" v-loading="loading">
|
||||
<div class="panel-header">
|
||||
<h4>准备辊</h4>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" size="mini" icon="el-icon-box" @click="handleBackup">备辊</el-button>
|
||||
<el-button type="primary" size="mini" icon="el-icon-upload2" @click="handleOnline">上线</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table :data="tableData" cell-class-name="roll-cell" style="width: 100%" size="mini" border stripe>
|
||||
<el-table-column fixed="left">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
size="mini"
|
||||
border
|
||||
stripe
|
||||
class="compact-table"
|
||||
:show-overflow-tooltip="true"
|
||||
style="width: 100%; table-layout: fixed;"
|
||||
>
|
||||
<el-table-column fixed="left" label="位置/类型" min-width="130" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ getRollerTitle(scope.row.type, scope.row.position) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="rollid" label="轧辊号">
|
||||
<el-table-column prop="rollid" label="轧辊号" min-width="150" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-select size="mini" filterable clearable allow-create v-model="scope.row.rollid" placeholder="请选择轧辊号"
|
||||
@change="handleChange(scope.row)">
|
||||
<el-select
|
||||
size="mini"
|
||||
filterable
|
||||
clearable
|
||||
allow-create
|
||||
v-model="scope.row.rollid"
|
||||
placeholder="请选择轧辊号"
|
||||
@change="handleChange(scope.row)"
|
||||
>
|
||||
<el-option v-for="item in scope.row.data" :key="item.rollid" :label="item.rollid" :value="item.rollid" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="diameter" label="直径">
|
||||
<el-table-column prop="diameter" label="直径" min-width="110" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-input size="mini" :disabled="!scope.row.rollid" v-model="scope.row.diameter" placeholder="请输入直径" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="rough" label="粗糙度">
|
||||
<el-table-column prop="rough" label="粗糙度" min-width="110" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-input size="mini" :disabled="!scope.row.rollid" v-model="scope.row.rough" placeholder="请输入粗糙度" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="crown" label="凹度">
|
||||
<el-table-column prop="crown" label="凹度" min-width="110" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-input size="mini" :disabled="!scope.row.rollid" v-model="scope.row.crown" placeholder="请输入凹度" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="rollid_" label="轧辊号" width="100" />
|
||||
<el-table-column label="位置" align="center" prop="position" width="50">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.roller_position" :value="scope.row.position" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.roller_type" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="diameter_" label="直径 (mm)" width="100" />
|
||||
<el-table-column prop="rough_" label="粗糙度" width="80" />
|
||||
<el-table-column prop="crown_" label="凸度" width="80" />
|
||||
<el-table-column prop="rolledLength" label="已轧长度" width="100" />
|
||||
<el-table-column prop="rolledWeight" label="已轧重量" width="120" />
|
||||
<el-table-column prop="rolledCount" label="轧制数量" width="100" />
|
||||
<el-table-column prop="instalTime" label="装机时间" width="160" />
|
||||
|
||||
<el-table-column prop="usableLength" label="可用长度" />
|
||||
<el-table-column prop="leftLength" label="剩余长度" />
|
||||
<el-table-column prop="usableWeight" label="可用重量" />
|
||||
<el-table-column prop="leftWeight" label="剩余重量" /> -->
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -70,13 +61,14 @@ import { getOfflineRollList, backupRoll, getReadyRollList, onlineRoll } from '@/
|
||||
|
||||
export default {
|
||||
name: 'Standby',
|
||||
dicts: ['roller_type', 'roller_position'],
|
||||
props: {
|
||||
onlineData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
dicts: ['roller_type', 'roller_position'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
@@ -97,14 +89,12 @@ export default {
|
||||
async handler(newVal) {
|
||||
this.loading = true
|
||||
const readyRollList = (await getReadyRollList()).data
|
||||
console.log(readyRollList, '备辊');
|
||||
const tableData = await Promise.all(newVal.map(async item => {
|
||||
const res = await getOfflineRollList(item.position, item.type)
|
||||
console.log(res);
|
||||
// 如果readyRollList中存在position和type相同的对象，则额外赋值直径等参数
|
||||
const key = `${item.position.toUpperCase()}${item.type.toUpperCase()}`
|
||||
const readyRoll = readyRollList[key]
|
||||
console.log(readyRoll, item, key, readyRollList, `取值`);
|
||||
const { diameter, rough, crown, rollid, ...roll } =
|
||||
{
|
||||
...item,
|
||||
@@ -166,3 +156,41 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.standby-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.compact-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table td {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,26 +1,34 @@
|
||||
<template>
|
||||
<div v-loading="loading" style="padding: 0 20px;">
|
||||
<el-row :gutter="4">
|
||||
<!-- 轧辊列表 -->
|
||||
<el-col :span="7">
|
||||
<Standby :onlineData="onlineData" @online="fetchData"></Standby>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<Online :onlineData="onlineData"></Online>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<Standard :onlineData="onlineData"></Standard>
|
||||
</el-col>
|
||||
<div class="roller-page" v-loading="loading">
|
||||
<el-row :gutter="12" class="panel-row">
|
||||
<el-col :span="7" class="panel-col">
|
||||
<div class="panel-card tall-panel">
|
||||
<Standby :onlineData="onlineData" @online="fetchData" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="panel-col">
|
||||
<div class="panel-card tall-panel">
|
||||
<Online :onlineData="onlineData" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5" class="panel-col">
|
||||
<div class="panel-card tall-panel">
|
||||
<Standard :onlineData="onlineData" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="4">
|
||||
<!-- 换坤 -->
|
||||
<el-col :span="18">
|
||||
<History :historyData="historyData" :params="historyParams"></History>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<FilterVue @filter="setHistoryParams" />
|
||||
</el-col>
|
||||
|
||||
<el-row :gutter="12" class="panel-row bottom-row">
|
||||
<el-col :span="18" class="panel-col">
|
||||
<div class="panel-card">
|
||||
<History :historyData="historyData" :params="historyParams" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="panel-col">
|
||||
<div class="panel-card">
|
||||
<FilterVue @filter="setHistoryParams" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
@@ -81,3 +89,45 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.roller-page {
|
||||
padding: 15px 20px 20px;
|
||||
background: #f5f5f5;
|
||||
min-height: calc(100vh - 84px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.panel-row {
|
||||
margin-bottom: 12px;
|
||||
align-items: stretch;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-col {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.tall-panel {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bottom-row .panel-card {
|
||||
min-height: 360px;
|
||||
}
|
||||
</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>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="stoppage-management">
|
||||
<el-card>
|
||||
<!-- 查询表单 -->
|
||||
<el-form :inline="true" :model="queryForm" ref="queryForm" label-width="80px">
|
||||
<!-- 查询表单区域 -->
|
||||
<div class="stop-header">
|
||||
<el-form :inline="true" :model="queryForm" ref="queryForm" label-width="80px" size="small">
|
||||
<el-form-item label="开始时间" prop="startDate">
|
||||
<el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始时间" value-format="yyyy-MM-dd"
|
||||
:clearable="true"></el-date-picker>
|
||||
@@ -14,46 +14,126 @@
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery" :loading="btnLoading">
|
||||
<i class="el-icon-search"></i> 查询
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<i class="el-icon-refresh"></i> 重置
|
||||
</el-button>
|
||||
<!-- <el-button type="success" @click="handleAdd">
|
||||
<i class="el-icon-plus"></i> 新增
|
||||
</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-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="coilid" label="钢卷号" width="120" align="center"></el-table-column>
|
||||
<el-table-column prop="stopType" label="停机类型" width="120" align="center"></el-table-column>
|
||||
<el-table-column prop="remark" label="停机原因" min-width="200"></el-table-column>
|
||||
<el-table-column prop="shift" label="班" width="80" align="center"></el-table-column>
|
||||
<el-table-column prop="crew" label="组" width="80" align="center"></el-table-column>
|
||||
<el-table-column prop="area" label="区域" width="100" align="center"></el-table-column>
|
||||
<el-table-column prop="seton" label="设备" width="100" align="center"></el-table-column>
|
||||
<el-table-column prop="startDate" label="开始时间" width="180" align="center"></el-table-column>
|
||||
<el-table-column prop="endDate" label="结束时间" width="180" align="center"></el-table-column>
|
||||
<el-table-column prop="duration" label="停机时长(分)" width="120" align="center"></el-table-column>
|
||||
<el-table-column prop="insdate" label="更新时间" width="180" align="center"></el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<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)" icon="el-icon-delete"
|
||||
:loading="scope.row.deleteLoading">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<!-- 卡片网格布局 -->
|
||||
<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.stopid === item.stopid }"
|
||||
@click.native="handleRowClick(item)"
|
||||
>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-title">停机ID: {{ item.stopid || '-' }}</div>
|
||||
<div class="card-subtitle">钢卷号: {{ item.coilid || '-' }}</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.stopType || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<span class="param-label">班:</span>
|
||||
<span class="param-value">{{ item.shift || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<span class="param-label">组:</span>
|
||||
<span class="param-value">{{ item.crew || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<span class="param-label">区域:</span>
|
||||
<span class="param-value">{{ item.area || '-' }}</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.seton || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<span class="param-label">机组:</span>
|
||||
<span class="param-value">{{ item.unit || '-' }}</span>
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<span class="param-label">停机时长:</span>
|
||||
<span class="param-value">{{ item.duration || '-' }} 分钟</span>
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<span class="param-label">更新时间:</span>
|
||||
<span class="param-value">{{ formatTime(item.insdate) }}</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">{{ formatTime(item.startDate) }}</span>
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<span class="param-label">结束时间:</span>
|
||||
<span class="param-value">{{ formatTime(item.endDate) }}</span>
|
||||
</div>
|
||||
<div class="param-line full-width" v-if="item.remark">
|
||||
<span class="param-label">停机原因:</span>
|
||||
<span class="param-value">{{ item.remark }}</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-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
|
||||
@@ -224,6 +304,16 @@ export default {
|
||||
handleRowClick(row) {
|
||||
this.currentRow = row;
|
||||
},
|
||||
// 格式化时间
|
||||
formatTime(time) {
|
||||
if (!time) return '-';
|
||||
// 如果是日期时间格式，直接返回
|
||||
if (time.includes(' ')) {
|
||||
return time;
|
||||
}
|
||||
// 如果是日期格式，返回日期
|
||||
return time;
|
||||
},
|
||||
|
||||
// 新增
|
||||
handleAdd() {
|
||||
@@ -333,10 +423,181 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.no-data {
|
||||
margin-top: 50px;
|
||||
<style lang="scss" scoped>
|
||||
.stoppage-management {
|
||||
height: calc(100vh - 84px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stop-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;
|
||||
|
||||
&::-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;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.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;
|
||||
|
||||
&.full-width {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.param-label {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
|
||||
Reference in New Issue
Block a user