修改二级ui
This commit is contained in:
@@ -1,22 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="report-body">
|
<div class="report-body">
|
||||||
<!-- 操作行 -->
|
<!-- 操作行 -->
|
||||||
<el-row>
|
<div class="report-actions">
|
||||||
<el-button type="primary" @click="exportReport">导出</el-button>
|
<el-button type="primary" @click="exportReport" icon="el-icon-download" size="small">导出报表</el-button>
|
||||||
</el-row>
|
</div>
|
||||||
<h1 class="report-body-title" style="text-align: center;">
|
<div class="overview-bar">
|
||||||
{{ title }}
|
<div class="overview-left">
|
||||||
</h1>
|
<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 class="summary-cards" v-if="summary.length > 0">
|
||||||
<div v-for="item in summary">
|
<div v-for="(item, index) in summary" :key="index">
|
||||||
<span class="card-title">{{ item.label }}: </span>
|
<span class="card-title">{{ item.label }}</span>
|
||||||
<span class="card-value">{{ item.value }}</span>
|
<span class="card-value">{{ item.value }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-table :data="dataset" border style="width: 100%;" size="small">
|
<div class="table-container">
|
||||||
<el-table-column v-for="item in columns" :label="item.label" :prop="item.prop" />
|
<div v-if="dataset.length" class="excel-table-wrapper">
|
||||||
</el-table>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -41,9 +69,22 @@ export default {
|
|||||||
columns: {
|
columns: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true
|
required: true
|
||||||
|
},
|
||||||
|
overviewInfo: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
reportLabel: '',
|
||||||
|
rangeText: ''
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
formatCell(value) {
|
||||||
|
if (value === null || value === undefined || value === '') {
|
||||||
|
return '-'
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
},
|
||||||
exportReport() {
|
exportReport() {
|
||||||
// 创建工作簿
|
// 创建工作簿
|
||||||
const workbook = XLSX.utils.book_new();
|
const workbook = XLSX.utils.book_new();
|
||||||
@@ -83,30 +124,161 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</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 {
|
.summary-cards {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 12px;
|
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 {
|
.card-title {
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
color: #000;
|
color: #666;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 8px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-value {
|
.card-value {
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
color: #111;
|
color: #333;
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-unit {
|
.card-unit {
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
color: rgba(255, 255, 255, 0.6);
|
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>
|
</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>
|
<template>
|
||||||
<div class="pdo-report">
|
<div class="report-page">
|
||||||
<el-row>
|
<div class="report-header">
|
||||||
<el-form :inline="true" :model="queryParams" class="query-form" size="mini">
|
<div class="header-title">
|
||||||
<el-form-item label="开始日期" prop="startTime">
|
<i class="el-icon-document"></i>
|
||||||
<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="选择开始时间"
|
<div class="title-text">
|
||||||
value-format="yyyy-MM-dd 00:00:00" style="width: 200px;"></el-date-picker>
|
<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>
|
||||||
<el-form-item label="结束日期" prop="endTime">
|
<el-form-item label="结束时间">
|
||||||
<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择结束时间"
|
<el-date-picker
|
||||||
value-format="yyyy-MM-dd 23:59:59" style="width: 200px;"></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-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="fetchReportData" icon="el-icon-search" size="small">查询</el-button>
|
<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-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-row>
|
</div>
|
||||||
<ReportBody v-loading="loading" title="实绩报表" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -25,46 +78,87 @@ import { getReportSummary, getReportDetail } from '@/api/l2/report'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PdoReport',
|
name: 'PdoReport',
|
||||||
components: {
|
components: { ReportBody },
|
||||||
ReportBody
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
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,
|
loading: false,
|
||||||
|
hasSelectedTime: false,
|
||||||
|
timeRange: {
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
},
|
||||||
reportSummary: [],
|
reportSummary: [],
|
||||||
reportDetail: [],
|
reportDetail: [],
|
||||||
columns: []
|
columns: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
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: {
|
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() {
|
async fetchReportData() {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
const res = await getReportSummary(this.queryParams)
|
try {
|
||||||
this.reportSummary = [
|
const queryParams = {
|
||||||
{ label: '成品卷数', value: res.coilCount }, // coilCount=总卷数，结合“成品总重/原料总重”场景，推测为成品卷数
|
startTime: this.timeRange.startTime,
|
||||||
{ label: '平均出口厚度[mm]', value: res.avgExitThickness }, // avgExitThickness=平均出口厚度，厚度用“平均”更符合实际（单卷厚度均匀，无“总厚度”概念）
|
endTime: this.timeRange.endTime,
|
||||||
{ label: '原料总重[t]', value: res.totalEntryWeight }, // totalEntryWeight=总入口重量，入口重量即原料重量
|
pageNum: 1,
|
||||||
{ label: '总出口长度[mm]', value: res.totalExitLength }, // totalExitLength=总出口长度，补充原“去锌总重”（无对应字段）的空缺，符合卷材加工的核心维度
|
pageSize: 1000
|
||||||
{ 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', ' ')
|
|
||||||
}
|
}
|
||||||
})
|
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 = [
|
this.columns = [
|
||||||
{ label: '出口物料ID', prop: 'exitMatId' },
|
{ label: '出口物料ID', prop: 'exitMatId' },
|
||||||
{ label: '入口物料ID', prop: 'entryMatId' },
|
{ label: '入口物料ID', prop: 'entryMatId' },
|
||||||
@@ -74,15 +168,129 @@ export default {
|
|||||||
{ label: '出口厚度(mm)', prop: 'exitThickness' },
|
{ label: '出口厚度(mm)', prop: 'exitThickness' },
|
||||||
{ label: '出口宽度(mm)', prop: 'exitWidth' },
|
{ label: '出口宽度(mm)', prop: 'exitWidth' },
|
||||||
{ label: '出口长度(m)', prop: 'exitLength' },
|
{ label: '出口长度(m)', prop: 'exitLength' },
|
||||||
{ label: '理论重量(kg)', prop: 'theoryWeight' },
|
{ label: '理论重量(t)', prop: 'theoryWeight' },
|
||||||
{ label: '实际重量(kg)', prop: 'actualWeight' },
|
{ label: '实际重量(t)', prop: 'actualWeight' },
|
||||||
{ label: '上线时间', prop: 'onlineTime' },
|
{ label: '上线时间', prop: 'onlineTime' }
|
||||||
]
|
]
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
this.$message.error('获取报表数据失败')
|
||||||
|
} finally {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
mounted() {
|
|
||||||
this.fetchReportData()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</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>
|
<template>
|
||||||
<div class="roller-report">
|
<div class="report-page">
|
||||||
<el-row>
|
<div class="report-header">
|
||||||
<el-form :inline="true" :model="queryParams" class="query-form" size="mini">
|
<div class="header-title">
|
||||||
<el-form-item label="开始日期" prop="startDate">
|
<i class="el-icon-document"></i>
|
||||||
<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="选择开始时间"
|
<div class="title-text">
|
||||||
value-format="yyyy-MM-dd 00:00:00" style="width: 200px;"></el-date-picker>
|
<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>
|
||||||
<el-form-item label="结束日期" prop="endDate">
|
<el-form-item label="结束时间">
|
||||||
<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择结束时间"
|
<el-date-picker
|
||||||
value-format="yyyy-MM-dd 23:59:59" style="width: 200px;"></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-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="fetchReportData" icon="el-icon-search" size="small">查询</el-button>
|
<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-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-row>
|
</div>
|
||||||
<ReportBody v-loading="loading" title="换辊报表" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -25,34 +78,73 @@ import { getRollHistorytList } from '@/api/l2/roller'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RollerReport',
|
name: 'RollerReport',
|
||||||
components: {
|
components: { ReportBody },
|
||||||
ReportBody
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
queryParams: {
|
loading: false,
|
||||||
// startTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-01 00:00:00',
|
hasSelectedTime: false,
|
||||||
// endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 2).toString().padStart(2, '0') + '-01 00:00:00',
|
timeRange: {
|
||||||
startTime: undefined,
|
startTime: '',
|
||||||
endTime: undefined,
|
endTime: ''
|
||||||
endTime: '',
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 1000
|
|
||||||
},
|
},
|
||||||
reportSummary: [],
|
reportSummary: [],
|
||||||
reportDetail: [],
|
reportDetail: [],
|
||||||
columns: [],
|
columns: []
|
||||||
loading: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
computed: {
|
||||||
this.fetchReportData()
|
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: {
|
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() {
|
async fetchReportData() {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
const res = await getRollHistorytList(this.queryParams)
|
try {
|
||||||
this.reportDetail = res.data.list
|
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 = [
|
this.columns = [
|
||||||
{ label: '换辊号', prop: 'changeid' },
|
{ label: '换辊号', prop: 'changeid' },
|
||||||
{ label: '轧辊号', prop: 'rollid' },
|
{ label: '轧辊号', prop: 'rollid' },
|
||||||
@@ -65,10 +157,131 @@ export default {
|
|||||||
{ label: '轧制重量', prop: 'rolledWeight' },
|
{ label: '轧制重量', prop: 'rolledWeight' },
|
||||||
{ label: '轧制次数', prop: 'rolledCount' },
|
{ label: '轧制次数', prop: 'rolledCount' },
|
||||||
{ label: '上线时间', prop: 'instalTime' },
|
{ label: '上线时间', prop: 'instalTime' },
|
||||||
{ label: '下线时间', prop: 'deinstalTime' },
|
{ 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
|
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>
|
<template>
|
||||||
<div class="stop-report">
|
<div class="report-page">
|
||||||
<el-row>
|
<div class="report-header">
|
||||||
<el-form :inline="true" :model="queryParams" class="query-form" size="mini">
|
<div class="header-title">
|
||||||
<el-form-item label="开始日期" prop="startDate">
|
<i class="el-icon-document"></i>
|
||||||
<el-date-picker v-model="queryParams.startDate" type="datetime" placeholder="选择开始时间"
|
<div class="title-text">
|
||||||
value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
|
<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>
|
||||||
<el-form-item label="结束日期" prop="endDate">
|
<el-form-item label="结束日期">
|
||||||
<el-date-picker v-model="queryParams.endDate" type="datetime" placeholder="选择结束时间"
|
<el-date-picker
|
||||||
value-format="yyyy-MM-dd" style="width: 200px;"></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-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="fetchReportData" icon="el-icon-search" size="small">查询</el-button>
|
<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-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-row>
|
</div>
|
||||||
<ReportBody v-loading="loading" title="停机报表" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ReportBody from './components/body.vue'
|
import ReportBody from './components/body.vue'
|
||||||
import { listStoppage, getStoppageSummary } from '@/api/l2/stop';
|
import { listStoppage, getStoppageSummary } from '@/api/l2/stop'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'StopReport',
|
name: 'StopReport',
|
||||||
components: {
|
components: { ReportBody },
|
||||||
ReportBody
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
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,
|
loading: false,
|
||||||
|
hasSelectedTime: false,
|
||||||
|
timeRange: {
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
},
|
||||||
reportSummary: [],
|
reportSummary: [],
|
||||||
reportDetail: [],
|
reportDetail: [],
|
||||||
columns: [
|
columns: [
|
||||||
@@ -52,28 +97,188 @@ export default {
|
|||||||
{ label: '结束时间', prop: 'endDate' },
|
{ label: '结束时间', prop: 'endDate' },
|
||||||
{ label: '持续时间[分钟]', prop: 'duration' },
|
{ label: '持续时间[分钟]', prop: 'duration' },
|
||||||
{ label: '停机类型', prop: 'unit' },
|
{ label: '停机类型', prop: 'unit' },
|
||||||
{ label: '备注', prop: 'remark' },
|
{ label: '备注', prop: 'remark' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
computed: {
|
||||||
this.fetchReportData()
|
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: {
|
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() {
|
async fetchReportData() {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
const res = await listStoppage(this.queryParams)
|
try {
|
||||||
this.reportDetail = res.data
|
const queryParams = {
|
||||||
const res2 = await getStoppageSummary(this.queryParams)
|
startDate: this.timeRange.startTime,
|
||||||
this.reportSummary = [
|
endDate: this.timeRange.endTime,
|
||||||
{ label: '统计区间', value: this.queryParams.startDate + ' 至 ' + this.queryParams.endDate },
|
pageNum: 1,
|
||||||
{ label: '停机次数', value: res2.data[0] },
|
pageSize: 1000
|
||||||
{ label: '停机时长[小时]', value: res2.data[1] },
|
}
|
||||||
{ label: '作业率', value: res2.data[2] + ' %' },
|
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
|
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,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="stoppage-management">
|
<div class="stoppage-management">
|
||||||
<el-card>
|
<!-- 查询表单区域 -->
|
||||||
<!-- 查询表单 -->
|
<div class="stop-header">
|
||||||
<el-form :inline="true" :model="queryForm" ref="queryForm" label-width="80px">
|
<el-form :inline="true" :model="queryForm" ref="queryForm" label-width="80px" size="small">
|
||||||
<el-form-item label="开始时间" prop="startDate">
|
<el-form-item label="开始时间" prop="startDate">
|
||||||
<el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始时间" value-format="yyyy-MM-dd"
|
<el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始时间" value-format="yyyy-MM-dd"
|
||||||
:clearable="true"></el-date-picker>
|
:clearable="true"></el-date-picker>
|
||||||
@@ -14,46 +14,126 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="handleQuery" :loading="btnLoading">
|
<el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button>
|
||||||
<i class="el-icon-search"></i> 查询
|
<el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
|
||||||
</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-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 数据表格 -->
|
<!-- 卡片网格布局 -->
|
||||||
<el-table v-loading="tableLoading" :data="tableData" border style="width: 100%; margin-top: 20px;"
|
<div v-loading="tableLoading" class="card-grid-container">
|
||||||
@row-click="handleRowClick" highlight-current-row>
|
<el-row :gutter="10">
|
||||||
<el-table-column prop="coilid" label="钢卷号" width="120" align="center"></el-table-column>
|
<el-col
|
||||||
<el-table-column prop="stopType" label="停机类型" width="120" align="center"></el-table-column>
|
v-for="(item, index) in tableData"
|
||||||
<el-table-column prop="remark" label="停机原因" min-width="200"></el-table-column>
|
:key="index"
|
||||||
<el-table-column prop="shift" label="班" width="80" align="center"></el-table-column>
|
:xs="24"
|
||||||
<el-table-column prop="crew" label="组" width="80" align="center"></el-table-column>
|
:sm="12"
|
||||||
<el-table-column prop="area" label="区域" width="100" align="center"></el-table-column>
|
:md="8"
|
||||||
<el-table-column prop="seton" label="设备" width="100" align="center"></el-table-column>
|
:lg="6"
|
||||||
<el-table-column prop="startDate" label="开始时间" width="180" align="center"></el-table-column>
|
:xl="5"
|
||||||
<el-table-column prop="endDate" label="结束时间" width="180" align="center"></el-table-column>
|
class="card-col"
|
||||||
<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-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>
|
||||||
|
|
||||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
<!-- 设备信息 -->
|
||||||
<template slot-scope="scope">
|
<div class="param-group">
|
||||||
<el-button size="mini" type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit">
|
<div class="group-title">设备信息</div>
|
||||||
编辑
|
<div class="param-list">
|
||||||
</el-button>
|
<div class="param-line">
|
||||||
<el-button size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete"
|
<span class="param-label">设备:</span>
|
||||||
:loading="scope.row.deleteLoading">
|
<span class="param-value">{{ item.seton || '-' }}</span>
|
||||||
删除
|
</div>
|
||||||
</el-button>
|
<div class="param-line">
|
||||||
</template>
|
<span class="param-label">机组:</span>
|
||||||
</el-table-column>
|
<span class="param-value">{{ item.unit || '-' }}</span>
|
||||||
</el-table>
|
</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-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">
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
|
||||||
@@ -224,6 +304,16 @@ export default {
|
|||||||
handleRowClick(row) {
|
handleRowClick(row) {
|
||||||
this.currentRow = row;
|
this.currentRow = row;
|
||||||
},
|
},
|
||||||
|
// 格式化时间
|
||||||
|
formatTime(time) {
|
||||||
|
if (!time) return '-';
|
||||||
|
// 如果是日期时间格式，直接返回
|
||||||
|
if (time.includes(' ')) {
|
||||||
|
return time;
|
||||||
|
}
|
||||||
|
// 如果是日期格式，返回日期
|
||||||
|
return time;
|
||||||
|
},
|
||||||
|
|
||||||
// 新增
|
// 新增
|
||||||
handleAdd() {
|
handleAdd() {
|
||||||
@@ -333,10 +423,181 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.no-data {
|
.stoppage-management {
|
||||||
margin-top: 50px;
|
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;
|
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 {
|
::v-deep .el-form-item {
|
||||||
|
|||||||
Reference in New Issue
Block a user