klp-oa/klp-ui/src/views/micro/pages/acid/components/Model.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>