酸扎停机集成
This commit is contained in:
@@ -75,6 +75,24 @@ export function getRollHistoryList(page = 1, pageSize = 50, rollId, standId) {
|
||||
})
|
||||
}
|
||||
|
||||
// 停机记录列表
|
||||
export function getStoppageList(page = 1, pageSize = 50, { area, stopType, startDate, endDate } = {}) {
|
||||
return request({
|
||||
url: '/sql-server-api/stoppages',
|
||||
method: 'get',
|
||||
params: { page, pageSize, area, stopType, startDate, endDate }
|
||||
})
|
||||
}
|
||||
|
||||
// 停机记录总条数
|
||||
export function getStoppageCount({ area, stopType, startDate, endDate } = {}) {
|
||||
return request({
|
||||
url: '/sql-server-api/stoppages/count',
|
||||
method: 'get',
|
||||
params: { area, stopType, startDate, endDate }
|
||||
})
|
||||
}
|
||||
|
||||
// 换辊历史总条数
|
||||
export function getRollHistoryCount(rollId, standId) {
|
||||
return request({
|
||||
|
||||
@@ -36,7 +36,11 @@
|
||||
</el-menu-item>
|
||||
<el-menu-item index="rollHistory">
|
||||
<i class="el-icon-time"></i>
|
||||
<span slot="title">换辊历史</span>
|
||||
<span slot="title">换辊</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="stoppage">
|
||||
<i class="el-icon-warning"></i>
|
||||
<span slot="title">停机</span>
|
||||
</el-menu-item>
|
||||
<!-- <el-menu-item index="realTime">
|
||||
<i class="el-icon-time"></i>
|
||||
@@ -60,6 +64,7 @@ import Performance from './components/Performance.vue';
|
||||
import RealTime from './components/RealTime.vue';
|
||||
import RollConfig from '@/views/timing/roll/index.vue';
|
||||
import RollHistory from '@/views/timing/roll/history.vue';
|
||||
import Stoppage from '@/views/timing/stoppage/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'AcidSystem',
|
||||
@@ -72,7 +77,8 @@ export default {
|
||||
Performance,
|
||||
RealTime,
|
||||
RollConfig,
|
||||
RollHistory
|
||||
RollHistory,
|
||||
Stoppage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -91,6 +97,7 @@ export default {
|
||||
realTime: 'RealTime',
|
||||
rollConfig: 'RollConfig',
|
||||
rollHistory: 'RollHistory',
|
||||
stoppage: 'Stoppage',
|
||||
};
|
||||
return componentMap[this.activeMenu];
|
||||
},
|
||||
@@ -135,18 +142,18 @@ export default {
|
||||
color: #606266;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
|
||||
&.is-active {
|
||||
background-color: #ecf5ff;
|
||||
color: #409eff;
|
||||
border-right: 3px solid #409eff;
|
||||
}
|
||||
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
margin-right: 8px;
|
||||
|
||||
236
klp-ui/src/views/timing/stoppage/index.vue
Normal file
236
klp-ui/src/views/timing/stoppage/index.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user