98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
<template>
|
|
<div class="model-page" v-loading="loading && !data">
|
|
<el-alert v-if="errorMsg" :title="errorMsg" type="error" show-icon :closable="false" class="error-alert" />
|
|
<el-alert v-else-if="data && data.error" :title="data.error" type="warning" show-icon :closable="false" />
|
|
|
|
<div v-else-if="data" class="model-layout">
|
|
<div class="left-panel">
|
|
<coil-model-table title="当前卷对比" :coil="data.current" />
|
|
<coil-model-table title="下一卷对比" :coil="data.next" />
|
|
</div>
|
|
<div class="right-panel">
|
|
<coil-info-card title="当前卷" :coil="data.current" />
|
|
<coil-info-card title="下一卷" :coil="data.next" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="!loading" class="empty-tip">暂无数据</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getLatestMillData } from '@/api/l2/mill'
|
|
import CoilModelTable from './CoilModelTable.vue'
|
|
import CoilInfoCard from './CoilInfoCard.vue'
|
|
|
|
const REFRESH_INTERVAL = 15000
|
|
|
|
export default {
|
|
name: 'AcidModel',
|
|
components: { CoilModelTable, CoilInfoCard },
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
data: null,
|
|
errorMsg: '',
|
|
timer: null,
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchData()
|
|
this.timer = setInterval(this.fetchData, REFRESH_INTERVAL)
|
|
},
|
|
beforeDestroy() {
|
|
if (this.timer) clearInterval(this.timer)
|
|
},
|
|
methods: {
|
|
async fetchData() {
|
|
this.loading = true
|
|
try {
|
|
const res = await getLatestMillData()
|
|
this.data = res
|
|
this.errorMsg = ''
|
|
} catch (e) {
|
|
this.errorMsg = (e && e.response && e.response.data && e.response.data.detail) || '获取模型数据失败'
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.model-page {
|
|
padding: 16px;
|
|
height: calc(100% - 32px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.error-alert {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.model-layout {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.left-panel {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.right-panel {
|
|
width: 260px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.empty-tip {
|
|
color: #c0c4cc;
|
|
font-size: 13px;
|
|
padding: 40px 0;
|
|
text-align: center;
|
|
}
|
|
</style>
|