115 lines
3.0 KiB
Vue
115 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="lsv-root">
|
||
|
|
<div class="lsv-meta">
|
||
|
|
<div class="lsv-meta-row">
|
||
|
|
<span class="lsv-meta-label">Drive Last Sent:</span>
|
||
|
|
<span class="lsv-meta-value">{{ formatTime(driveData && driveData.lastSendTime) }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="lsv-meta-row">
|
||
|
|
<span class="lsv-meta-label">Furnace Last Sent:</span>
|
||
|
|
<span class="lsv-meta-value">{{ formatTime(furnaceData && furnaceData.lastSendTime) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-tabs v-model="active" type="border-card" class="lsv-tabs">
|
||
|
|
<el-tab-pane label="Drive" name="drive">
|
||
|
|
<div class="lsv-list">
|
||
|
|
<div v-if="!driveList.length" class="lsv-empty">-</div>
|
||
|
|
<div v-for="it in driveList" :key="it.key" class="lsv-item">
|
||
|
|
<span class="lsv-key">{{ it.key }}</span>
|
||
|
|
<span class="lsv-val">{{ it.val }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="Furnace" name="furnace">
|
||
|
|
<div class="lsv-list">
|
||
|
|
<div v-if="!furnaceList.length" class="lsv-empty">-</div>
|
||
|
|
<div v-for="it in furnaceList" :key="it.key" class="lsv-item">
|
||
|
|
<span class="lsv-key">{{ it.key }}</span>
|
||
|
|
<span class="lsv-val">{{ it.val }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'LatestSetValues',
|
||
|
|
props: {
|
||
|
|
driveData: { type: Object, default: null },
|
||
|
|
furnaceData: { type: Object, default: null }
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
active: 'drive'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
driveList() {
|
||
|
|
const values = this.driveData && this.driveData.values ? this.driveData.values : {}
|
||
|
|
return Object.keys(values).sort().map(k => ({ key: k, val: values[k] === '' || values[k] == null ? '-' : String(values[k]) }))
|
||
|
|
},
|
||
|
|
furnaceList() {
|
||
|
|
const values = this.furnaceData && this.furnaceData.values ? this.furnaceData.values : {}
|
||
|
|
return Object.keys(values).sort().map(k => ({ key: k, val: values[k] === '' || values[k] == null ? '-' : String(values[k]) }))
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
formatTime(t) {
|
||
|
|
if (!t) return '-'
|
||
|
|
return new Date(t).toLocaleString()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.lsv-meta {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
padding: 8px;
|
||
|
|
background: #f5f7fa;
|
||
|
|
border: 1px solid #ebeef5;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.lsv-meta-row {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 18px;
|
||
|
|
}
|
||
|
|
.lsv-meta-label { color: #909399; }
|
||
|
|
.lsv-meta-value { color: #303133; font-weight: 600; }
|
||
|
|
|
||
|
|
.lsv-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 6px;
|
||
|
|
}
|
||
|
|
.lsv-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
background: #e8f4ff; /* 设定值背景色 */
|
||
|
|
border: 1px solid #c6e2ff;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 6px 8px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.lsv-key {
|
||
|
|
color: #303133;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
.lsv-val {
|
||
|
|
color: #1f78d1;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.lsv-empty {
|
||
|
|
color: #909399;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|