模型tab修改
This commit is contained in:
113
klp-ui/src/views/micro/pages/acid/components/CoilInfoCard.vue
Normal file
113
klp-ui/src/views/micro/pages/acid/components/CoilInfoCard.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="coil-info-card">
|
||||
<div class="card-title">
|
||||
<span>{{ title }}</span>
|
||||
<span v-if="coil" class="status-text">{{ statusText }}</span>
|
||||
</div>
|
||||
<div v-if="!coil" class="empty-tip">暂无数据</div>
|
||||
<div v-else class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">钢卷号</span>
|
||||
<span class="info-value">{{ coil.coilid || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">钢种</span>
|
||||
<span class="info-value">{{ coil.spec.grade }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">来料厚度</span>
|
||||
<span class="info-value">{{ coil.spec.entry_thick }} mm</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">成品厚度</span>
|
||||
<span class="info-value">{{ coil.spec.exit_thick }} mm</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">宽度</span>
|
||||
<span class="info-value">{{ coil.spec.width }} mm</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">压下率</span>
|
||||
<span class="info-value">{{ reductionPct }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const STATUS_TEXT = {
|
||||
PRODUCING: '正在轧',
|
||||
READY: '设定值已生成',
|
||||
ONLINE: '排队待轧',
|
||||
PRODUCT: '已轧完',
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'CoilInfoCard',
|
||||
props: {
|
||||
title: { type: String, required: true },
|
||||
coil: { type: Object, default: null },
|
||||
},
|
||||
computed: {
|
||||
statusText() {
|
||||
return STATUS_TEXT[this.coil.status] || this.coil.status || ''
|
||||
},
|
||||
reductionPct() {
|
||||
const s = this.coil && this.coil.spec
|
||||
if (!s || !s.entry_thick) return '-'
|
||||
return (((s.entry_thick - s.exit_thick) / s.entry_thick) * 100).toFixed(1)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coil-info-card {
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 12px 14px;
|
||||
|
||||
& + & {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
|
||||
.info-label {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
klp-ui/src/views/micro/pages/acid/components/CoilModelTable.vue
Normal file
145
klp-ui/src/views/micro/pages/acid/components/CoilModelTable.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="coil-model-table">
|
||||
<div class="section-title">{{ title }}</div>
|
||||
|
||||
<div v-if="!coil" class="empty-tip">暂无数据</div>
|
||||
|
||||
<template v-else>
|
||||
<div v-if="coil.l2_note" class="note-line">赛迪：{{ coil.l2_note }}</div>
|
||||
<div v-if="coil.ours_note" class="note-line">FAD：{{ coil.ours_note }}</div>
|
||||
|
||||
<el-table :data="rows" size="mini" border :row-class-name="rowClassName">
|
||||
<el-table-column label="机架" prop="standLabel" width="64" align="center" fixed />
|
||||
<el-table-column
|
||||
v-for="col in columns"
|
||||
:key="col.field"
|
||||
:label="col.label"
|
||||
align="center"
|
||||
>
|
||||
<template slot="header">
|
||||
<div>{{ col.label }}</div>
|
||||
<div class="col-unit">{{ col.unit }}</div>
|
||||
</template>
|
||||
<el-table-column label="赛迪" align="right" min-width="66">
|
||||
<template slot-scope="{ row }">{{ row.idle ? '-' : col.fmt(row.l2[col.field]) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="FAD" align="right" min-width="66">
|
||||
<template slot-scope="{ row }">
|
||||
<span class="fad-value">{{ row.idle ? '-' : col.fmt(row.ours[col.field]) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function fmtNum(v, digits) {
|
||||
if (v === null || v === undefined || v === '') return '-'
|
||||
const n = Number(v)
|
||||
return Number.isNaN(n) ? '-' : n.toFixed(digits)
|
||||
}
|
||||
|
||||
// 与 klp-ml-mill/predict.py 的 TABLE_COLUMNS 保持一致
|
||||
const COLUMNS = [
|
||||
{ label: '入口厚度', unit: 'mm', field: 'setup_enthick', fmt: v => fmtNum(v, 3) },
|
||||
{ label: '压下率', unit: '%', field: 'setup_reduct', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '轧辊速度', unit: 'm/min', field: 'calc_stand_spd', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '前滑', unit: '%', field: 'meas_slip', fmt: v => fmtNum(v, 2) },
|
||||
{ label: '轧制力', unit: 'kN', field: 'calc_force', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '辊缝', unit: 'mm', field: 'calc_gap_run', fmt: v => fmtNum(v, 2) },
|
||||
{ label: '工作辊弯辊', unit: 'kN', field: 'mea_wr_bend', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '中间辊弯辊', unit: 'kN', field: 'mea_ir_bend', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '张应力', unit: 'MPa', field: 'setup_extension_stress', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '出口张力', unit: 'kN', field: 'setup_extension_force', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '负荷', unit: '%', field: 'calc_power_ratio', fmt: v => fmtNum(v, 0) },
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'CoilModelTable',
|
||||
props: {
|
||||
title: { type: String, required: true },
|
||||
coil: { type: Object, default: null },
|
||||
},
|
||||
data() {
|
||||
return { columns: COLUMNS }
|
||||
},
|
||||
computed: {
|
||||
// 6机架，每行同时带赛迪(L2实测)和FAD(我们预测)两组值，交给嵌套表头对比展示；
|
||||
// 空过机架(真正关闭的机架，不是"没数据")单独一行，不展示任何预测值。
|
||||
rows() {
|
||||
if (!this.coil) return []
|
||||
const l2 = this.coil.l2 || {}
|
||||
const ours = (this.coil.ours && this.coil.ours.predictions) || {}
|
||||
const out = []
|
||||
for (let sid = 0; sid < 6; sid++) {
|
||||
const oursStand = ours['stand' + sid] || {}
|
||||
const active = oursStand.active !== false
|
||||
if (!active) {
|
||||
out.push({ standLabel: '机架' + (sid + 1), idle: true })
|
||||
continue
|
||||
}
|
||||
const oursFlat = {}
|
||||
COLUMNS.forEach(c => {
|
||||
const e = oursStand[c.field]
|
||||
oursFlat[c.field] = e && typeof e === 'object' ? e.value : null
|
||||
})
|
||||
out.push({
|
||||
standLabel: '机架' + (sid + 1), idle: false,
|
||||
l2: l2[sid] || {},
|
||||
ours: oursFlat,
|
||||
})
|
||||
}
|
||||
return out
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
rowClassName({ row }) {
|
||||
return row.idle ? 'idle-row' : ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coil-model-table {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
color: #c0c4cc;
|
||||
font-size: 13px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.note-line {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.col-unit {
|
||||
font-size: 11px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.fad-value {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
::v-deep .el-table .idle-row {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
</style>
|
||||
@@ -1,234 +1,44 @@
|
||||
<template>
|
||||
<div class="model-page">
|
||||
<el-card shadow="never" class="page-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>
|
||||
<i class="el-icon-cpu"></i>
|
||||
六机架轧制模型 · 当前卷 / 下一卷预测对照
|
||||
</span>
|
||||
<div class="header-actions">
|
||||
<span v-if="updatedAt" class="updated-at">更新于 {{ updatedAt }}</span>
|
||||
<el-switch
|
||||
v-model="autoRefresh"
|
||||
active-text="自动刷新"
|
||||
inactive-color="#c0c4cc"
|
||||
style="margin: 0 12px;"
|
||||
/>
|
||||
<el-button size="mini" icon="el-icon-refresh" :loading="loading" @click="fetchData">刷新</el-button>
|
||||
<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>
|
||||
|
||||
<el-alert
|
||||
v-if="errorMsg"
|
||||
:title="errorMsg"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-bottom: 16px;"
|
||||
/>
|
||||
|
||||
<div v-loading="loading && !data" element-loading-text="正在从模型服务拉取数据...">
|
||||
<el-empty v-if="!data && !loading && !errorMsg" description="暂无数据，点击右上角「刷新」拉取" />
|
||||
|
||||
<template v-if="data && !data.error">
|
||||
<coil-panel title="当前卷" tag-type="success" :coil="data.current" />
|
||||
<coil-panel title="下一卷" tag-type="warning" :coil="data.next" style="margin-top: 20px;" />
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
v-else-if="data && data.error"
|
||||
:title="data.error"
|
||||
type="warning"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
<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 STATUS_MAP = {
|
||||
PRODUCING: { text: '正在轧', type: 'success' },
|
||||
READY: { text: 'L2已生成设定值', type: 'primary' },
|
||||
ONLINE: { text: '已排队待轧', type: 'warning' },
|
||||
PRODUCT: { text: '已轧完', type: 'info' },
|
||||
}
|
||||
|
||||
// 与 klp-ml-mill/predict.py 的 TABLE_COLUMNS 保持一致，跟HMI「模型设定」页面列一致
|
||||
const COLUMNS = [
|
||||
{ label: '入口厚度', unit: 'mm', field: 'setup_enthick', fmt: v => fmtNum(v, 3) },
|
||||
{ label: '压下率', unit: '%', field: 'setup_reduct', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '轧辊速度', unit: 'm/min', field: 'calc_stand_spd', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '前滑', unit: '%', field: 'meas_slip', fmt: v => fmtNum(v, 2) },
|
||||
{ label: '轧制力', unit: 'kN', field: 'calc_force', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '辊缝', unit: 'mm', field: 'calc_gap_run', fmt: v => fmtNum(v, 2) },
|
||||
{ label: '工作辊弯辊', unit: 'kN', field: 'mea_wr_bend', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '中间辊弯辊', unit: 'kN', field: 'mea_ir_bend', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '张应力', unit: 'MPa', field: 'setup_extension_stress', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '出口张力', unit: 'kN', field: 'setup_extension_force', fmt: v => fmtNum(v, 0) },
|
||||
{ label: '负荷', unit: '%', field: 'calc_power_ratio', fmt: v => fmtNum(v, 0) },
|
||||
]
|
||||
|
||||
function fmtNum(v, digits) {
|
||||
if (v === null || v === undefined || v === '') return '-'
|
||||
const n = Number(v)
|
||||
if (Number.isNaN(n)) return '-'
|
||||
return n.toFixed(digits)
|
||||
}
|
||||
|
||||
// CoilPanel：一个卷(当前/下一)的展示，L2实测 vs 我们的预测，逐机架对照
|
||||
const CoilPanel = {
|
||||
name: 'CoilPanel',
|
||||
props: {
|
||||
title: { type: String, required: true },
|
||||
tagType: { type: String, default: 'info' },
|
||||
coil: { type: Object, default: null },
|
||||
},
|
||||
computed: {
|
||||
statusInfo() {
|
||||
const s = this.coil && this.coil.status
|
||||
return STATUS_MAP[s] || { text: s || '未知', type: 'info' }
|
||||
},
|
||||
specText() {
|
||||
const s = this.coil && this.coil.spec
|
||||
if (!s) return '-'
|
||||
return `${s.grade} ${s.entry_thick} → ${s.exit_thick} mm 宽 ${s.width}`
|
||||
},
|
||||
// 6机架 x 2行(产线/预测)，空过机架单独一行
|
||||
rows() {
|
||||
if (!this.coil) return []
|
||||
const l2 = this.coil.l2 || {}
|
||||
const ours = (this.coil.ours && this.coil.ours.predictions) || {}
|
||||
const out = []
|
||||
for (let sid = 0; sid < 6; sid++) {
|
||||
const oursStand = ours['stand' + sid]
|
||||
const l2Stand = l2[String(sid)] || l2[sid]
|
||||
const active = oursStand ? oursStand.active !== false : !!l2Stand
|
||||
if (!active) {
|
||||
out.push({ standLabel: '机架' + (sid + 1), source: '空过', idle: true, rowspan: 1 })
|
||||
continue
|
||||
}
|
||||
out.push({
|
||||
standLabel: '机架' + (sid + 1), source: '产线(L2)', rowspan: 2, isFirst: true,
|
||||
values: COLUMNS.map(c => (l2Stand ? l2Stand[c.field] : null)),
|
||||
})
|
||||
out.push({
|
||||
standLabel: '机架' + (sid + 1), source: '预测(我们)', rowspan: 0, isFirst: false,
|
||||
values: COLUMNS.map(c => {
|
||||
const e = oursStand && oursStand[c.field]
|
||||
return e && typeof e === 'object' ? e.value : null
|
||||
}),
|
||||
})
|
||||
}
|
||||
return out
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
objectSpanMethod({ row, columnIndex }) {
|
||||
if (columnIndex === 0) {
|
||||
if (row.rowspan === 0) return { rowspan: 0, colspan: 0 }
|
||||
return { rowspan: row.rowspan, colspan: 1 }
|
||||
}
|
||||
},
|
||||
fmt(row, colIndex) {
|
||||
if (row.idle) return '-'
|
||||
const raw = row.values[colIndex]
|
||||
return COLUMNS[colIndex].fmt(raw)
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
const columns = COLUMNS
|
||||
const header = h('div', { class: 'coil-panel-header' }, [
|
||||
h('span', { class: 'coil-panel-title' }, [
|
||||
h('el-tag', { props: { type: this.tagType, effect: 'dark', size: 'medium' } }, this.title),
|
||||
]),
|
||||
this.coil
|
||||
? h('span', { class: 'coil-meta' }, [
|
||||
h('b', this.coil.coilid || '-'),
|
||||
h('el-tag', { props: { type: this.statusInfo.type, size: 'mini' }, style: 'margin: 0 8px;' }, this.statusInfo.text),
|
||||
h('span', { class: 'spec-text' }, this.specText),
|
||||
])
|
||||
: null,
|
||||
])
|
||||
|
||||
if (!this.coil) return h('div', { class: 'coil-panel' }, [header, h('el-empty', { props: { description: '暂无数据' } })])
|
||||
|
||||
const notes = []
|
||||
if (this.coil.l2_note) notes.push(h('el-alert', {
|
||||
props: { title: 'L2实测：' + this.coil.l2_note, type: 'info', showIcon: true, closable: false },
|
||||
style: 'margin: 8px 0;',
|
||||
}))
|
||||
if (this.coil.ours_note) notes.push(h('el-alert', {
|
||||
props: { title: '我们的预测：' + this.coil.ours_note, type: 'info', showIcon: true, closable: false },
|
||||
style: 'margin: 8px 0;',
|
||||
}))
|
||||
|
||||
const tableCols = [
|
||||
h('el-table-column', {
|
||||
props: { label: '机架', width: '150', align: 'center' },
|
||||
scopedSlots: {
|
||||
default: ({ row }) => [
|
||||
h('div', { class: 'stand-cell' }, [
|
||||
h('span', row.standLabel),
|
||||
!row.idle ? h('el-tag', {
|
||||
props: { size: 'mini', type: row.isFirst ? 'success' : 'primary', effect: row.isFirst ? 'plain' : 'dark' },
|
||||
style: 'margin-left: 6px;',
|
||||
}, row.source) : h('el-tag', { props: { size: 'mini', type: 'info' } }, '空过'),
|
||||
]),
|
||||
],
|
||||
},
|
||||
}),
|
||||
...columns.map((c, idx) => h('el-table-column', {
|
||||
props: { label: c.label, align: 'right', minWidth: '92' },
|
||||
scopedSlots: {
|
||||
header: () => [h('div', [h('div', c.label), h('div', { class: 'col-unit' }, c.unit)])],
|
||||
default: ({ row }) => [h('span', { class: { 'l2-value': row.isFirst, 'pred-value': row.isFirst === false } }, this.fmt(row, idx))],
|
||||
},
|
||||
})),
|
||||
]
|
||||
|
||||
return h('div', { class: 'coil-panel' }, [
|
||||
header,
|
||||
...notes,
|
||||
h('el-table', {
|
||||
props: {
|
||||
data: this.rows, border: true, size: 'mini', stripe: false,
|
||||
spanMethod: this.objectSpanMethod,
|
||||
rowClassName: ({ row }) => (row.idle ? 'idle-row' : (row.isFirst ? 'l2-row' : 'pred-row')),
|
||||
},
|
||||
}, tableCols),
|
||||
])
|
||||
},
|
||||
}
|
||||
const REFRESH_INTERVAL = 15000
|
||||
|
||||
export default {
|
||||
name: 'AcidModel',
|
||||
components: { CoilPanel },
|
||||
components: { CoilModelTable, CoilInfoCard },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
data: null,
|
||||
errorMsg: '',
|
||||
updatedAt: '',
|
||||
autoRefresh: false,
|
||||
timer: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
autoRefresh(val) {
|
||||
if (val) {
|
||||
this.timer = setInterval(this.fetchData, 30000)
|
||||
} else if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
this.timer = setInterval(this.fetchData, REFRESH_INTERVAL)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) clearInterval(this.timer)
|
||||
@@ -236,10 +46,10 @@ export default {
|
||||
methods: {
|
||||
async fetchData() {
|
||||
this.loading = true
|
||||
this.errorMsg = ''
|
||||
try {
|
||||
this.data = await getLatestMillData()
|
||||
this.updatedAt = new Date().toLocaleTimeString('zh-CN', { hour12: false })
|
||||
const res = await getLatestMillData()
|
||||
this.data = res
|
||||
this.errorMsg = ''
|
||||
} catch (e) {
|
||||
this.errorMsg = (e && e.response && e.response.data && e.response.data.detail) || '获取模型数据失败'
|
||||
} finally {
|
||||
@@ -257,104 +67,31 @@ export default {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.page-card {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #1f2d3d;
|
||||
|
||||
i {
|
||||
color: #409eff;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.updated-at {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .coil-panel {
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
background: #fafbfc;
|
||||
|
||||
.coil-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.error-alert {
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.coil-meta {
|
||||
.model-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
b {
|
||||
color: #1f2d3d;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.left-panel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.spec-text {
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
}
|
||||
.right-panel {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stand-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.col-unit {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.l2-value {
|
||||
color: #1f2d3d;
|
||||
}
|
||||
|
||||
.pred-value {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-table .l2-row {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.el-table .pred-row {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.el-table .idle-row {
|
||||
background-color: #f4f4f5;
|
||||
.empty-tip {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
font-size: 13px;
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user