237 lines
7.2 KiB
Vue
237 lines
7.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="stoppage-view">
|
|||
|
|
<el-form :inline="true" :model="query" size="small" class="filter-bar">
|
|||
|
|
<el-form-item label="区域">
|
|||
|
|
<el-input v-model="query.area" placeholder="区域" clearable style="width: 120px" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="停机类型">
|
|||
|
|
<el-input v-model="query.stopType" placeholder="停机类型" clearable style="width: 140px" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="开始日期">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="query.startDate"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="起"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
style="width: 136px"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="—">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="query.endDate"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="止"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
style="width: 136px"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" icon="el-icon-search" :loading="loading" @click="handleSearch">查询</el-button>
|
|||
|
|
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<el-table
|
|||
|
|
:data="rows"
|
|||
|
|
size="mini"
|
|||
|
|
border
|
|||
|
|
stripe
|
|||
|
|
:height="tableHeight"
|
|||
|
|
v-loading="loading"
|
|||
|
|
highlight-current-row
|
|||
|
|
>
|
|||
|
|
<el-table-column type="index" width="50" label="序" fixed />
|
|||
|
|
<el-table-column prop="encoilid" label="钢卷号" width="130" show-overflow-tooltip fixed />
|
|||
|
|
<el-table-column prop="area" label="区域" width="90" show-overflow-tooltip />
|
|||
|
|
<el-table-column prop="unit" label="机组" width="90" show-overflow-tooltip />
|
|||
|
|
<el-table-column prop="stop_type" label="停机类型" width="120" show-overflow-tooltip>
|
|||
|
|
<template slot-scope="{ row }">
|
|||
|
|
<el-tag :type="stopTypeTag(row.stop_type)" size="mini" disable-transitions>
|
|||
|
|
{{ row.stop_type || '—' }}
|
|||
|
|
</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="开始时间" width="148">
|
|||
|
|
<template slot-scope="{ row }">{{ fmtDate(row.start_date) }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="结束时间" width="148">
|
|||
|
|
<template slot-scope="{ row }">{{ fmtDate(row.end_date) }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="时长" width="80">
|
|||
|
|
<template slot-scope="{ row }">
|
|||
|
|
<span :class="durationCls(row.duration)">{{ fmtDuration(row.duration) }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="shift" label="班次" width="56" />
|
|||
|
|
<el-table-column prop="crew" label="班组" width="56" />
|
|||
|
|
<el-table-column prop="seton" label="SETON" width="90" show-overflow-tooltip />
|
|||
|
|
<el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<div class="pagination-bar">
|
|||
|
|
<span class="total-duration" v-if="rows.length">
|
|||
|
|
本页合计时长：<b>{{ pageTotalDuration }}</b>
|
|||
|
|
</span>
|
|||
|
|
<el-pagination
|
|||
|
|
small
|
|||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|||
|
|
:total="pagination.total"
|
|||
|
|
:page-size="pagination.pageSize"
|
|||
|
|
:page-sizes="[50, 100, 200]"
|
|||
|
|
:current-page="pagination.page"
|
|||
|
|
@size-change="handleSizeChange"
|
|||
|
|
@current-change="handlePageChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getStoppageList, getStoppageCount } from '@/api/l2/timing'
|
|||
|
|
|
|||
|
|
function fmtDateStr(val) {
|
|||
|
|
if (!val) return '—'
|
|||
|
|
const s = String(val)
|
|||
|
|
const m = s.match(/(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2}):(\d{2})/)
|
|||
|
|
if (m) return `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}:${m[6]}`
|
|||
|
|
const d = new Date(val)
|
|||
|
|
if (isNaN(d.getTime())) return s
|
|||
|
|
const pad = n => String(n).padStart(2, '0')
|
|||
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// duration 单位为分钟，格式化为 Xh Ym 或 Ym
|
|||
|
|
function fmtDurationStr(val) {
|
|||
|
|
if (val == null || val === '') return '—'
|
|||
|
|
const mins = Math.round(parseFloat(val))
|
|||
|
|
if (isNaN(mins)) return String(val)
|
|||
|
|
if (mins < 60) return `${mins}m`
|
|||
|
|
const h = Math.floor(mins / 60)
|
|||
|
|
const m = mins % 60
|
|||
|
|
return m === 0 ? `${h}h` : `${h}h ${m}m`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'TimingStoppagePage',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
query: { area: '', stopType: '', startDate: '', endDate: '' },
|
|||
|
|
rows: [],
|
|||
|
|
pagination: { page: 1, pageSize: 50, total: 0 },
|
|||
|
|
tableHeight: 'calc(100vh - 200px)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
pageTotalDuration() {
|
|||
|
|
const total = this.rows.reduce((sum, r) => {
|
|||
|
|
const v = parseFloat(r.duration)
|
|||
|
|
return sum + (isNaN(v) ? 0 : v)
|
|||
|
|
}, 0)
|
|||
|
|
return fmtDurationStr(total)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.loadCount()
|
|||
|
|
this.loadRows()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
buildFilter() {
|
|||
|
|
const { area, stopType, startDate, endDate } = this.query
|
|||
|
|
return {
|
|||
|
|
area: area || undefined,
|
|||
|
|
stopType: stopType || undefined,
|
|||
|
|
startDate: startDate || undefined,
|
|||
|
|
endDate: endDate || undefined
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async loadCount() {
|
|||
|
|
try {
|
|||
|
|
const res = await getStoppageCount(this.buildFilter())
|
|||
|
|
this.pagination.total = res?.data?.total ?? 0
|
|||
|
|
} catch (_) {}
|
|||
|
|
},
|
|||
|
|
async loadRows() {
|
|||
|
|
this.loading = true
|
|||
|
|
try {
|
|||
|
|
const { page, pageSize } = this.pagination
|
|||
|
|
const res = await getStoppageList(page, pageSize, this.buildFilter())
|
|||
|
|
this.rows = res?.data?.rows || []
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleSearch() {
|
|||
|
|
this.pagination.page = 1
|
|||
|
|
this.loadCount()
|
|||
|
|
this.loadRows()
|
|||
|
|
},
|
|||
|
|
handleReset() {
|
|||
|
|
this.query = { area: '', stopType: '', startDate: '', endDate: '' }
|
|||
|
|
this.pagination.page = 1
|
|||
|
|
this.loadCount()
|
|||
|
|
this.loadRows()
|
|||
|
|
},
|
|||
|
|
handlePageChange(page) {
|
|||
|
|
this.pagination.page = page
|
|||
|
|
this.loadRows()
|
|||
|
|
},
|
|||
|
|
handleSizeChange(size) {
|
|||
|
|
this.pagination.pageSize = size
|
|||
|
|
this.pagination.page = 1
|
|||
|
|
this.loadCount()
|
|||
|
|
this.loadRows()
|
|||
|
|
},
|
|||
|
|
fmtDate(val) { return fmtDateStr(val) },
|
|||
|
|
fmtDuration(val) { return fmtDurationStr(val) },
|
|||
|
|
durationCls(val) {
|
|||
|
|
const mins = parseFloat(val)
|
|||
|
|
if (isNaN(mins)) return ''
|
|||
|
|
if (mins >= 60) return 'dur-high'
|
|||
|
|
if (mins >= 15) return 'dur-mid'
|
|||
|
|
return ''
|
|||
|
|
},
|
|||
|
|
stopTypeTag(type) {
|
|||
|
|
if (!type) return 'info'
|
|||
|
|
const t = String(type).toUpperCase()
|
|||
|
|
if (t.includes('故障') || t.includes('FAULT') || t.includes('BREAK')) return 'danger'
|
|||
|
|
if (t.includes('计划') || t.includes('PLAN')) return 'primary'
|
|||
|
|
if (t.includes('换辊') || t.includes('ROLL')) return 'warning'
|
|||
|
|
return 'info'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.stoppage-view {
|
|||
|
|
padding: 12px;
|
|||
|
|
background: #fff;
|
|||
|
|
height: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.filter-bar {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.pagination-bar {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
padding: 8px 0 0;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.total-duration {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
.total-duration b {
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
.dur-high { color: #f56c6c; font-weight: 600; }
|
|||
|
|
.dur-mid { color: #e6a23c; }
|
|||
|
|
</style>
|