修改二级ui
This commit is contained in:
@@ -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,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