394 lines
8.2 KiB
Vue
394 lines
8.2 KiB
Vue
<template>
|
||
<div>
|
||
<div class="test-dialog">
|
||
|
||
<div class="dialog-content">
|
||
|
||
<div class="right-title">
|
||
<!-- <div>系数校准表</div> -->
|
||
<div>{{ outputDsc }}</div>
|
||
<div>
|
||
<span style=" font-size: 18px;font-weight: 600;">
|
||
设备已合格 <span style="color: #67C23A">{{ qualified }}</span> 台/共 <span style="color: green">{{ total }}</span>
|
||
台
|
||
</span>
|
||
<!-- <el-button type="primary" loading
|
||
v-if="activeIndex > 0 && activeIndex < activeTotalNum">通道系数已校准3台/共3台</el-button>
|
||
<el-button type="primary" :disabled="true" v-if="activeIndex === activeTotalNum">通道系数已校准3台/共3台</el-button> -->
|
||
</div>
|
||
</div>
|
||
<div class="right-content">
|
||
<el-tabs type="border-card">
|
||
<el-empty description="暂无数据，等待检测开始" v-if="activeIndex === 0" />
|
||
<el-tab-pane label="240001" v-if="activeIndex > 0">
|
||
<channelsTestTable :tableData="tableData1"></channelsTestTable>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="240002" v-if="activeIndex > 1">
|
||
<template #label>
|
||
<span class="custom-tabs-label">
|
||
<span>240002</span>
|
||
<el-icon>
|
||
<Failed />
|
||
</el-icon>
|
||
</span>
|
||
</template>
|
||
<channelsTestTable :tableData="tableData2"></channelsTestTable>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="240003" v-if="activeIndex > 2">
|
||
<channelsTestTable :tableData="tableData3"></channelsTestTable>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="240004" v-if="activeIndex > 3">
|
||
<channelsTestTable :tableData="tableData4"></channelsTestTable>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
<script lang="tsx" setup name="channelsTest">
|
||
import { SuccessFilled, Failed } from '@element-plus/icons-vue'
|
||
|
||
const activeIndex = ref(0)
|
||
const activeTotalNum = ref(4)
|
||
const qualified = ref(0)
|
||
const outputDsc = ref('电压误差为：±0.1Un%； 电流误差为：±0.5%')
|
||
const total = ref(0)
|
||
|
||
const activities = [
|
||
{
|
||
content: '开始检测',
|
||
timestamp: '2018-04-12 20:46',
|
||
size: 'large',
|
||
color: '#0bbd87',
|
||
icon: SuccessFilled,
|
||
},
|
||
{
|
||
content: 'GPS上送时刻',
|
||
timestamp: '2018-04-03 20:46',
|
||
hollow: true,
|
||
},
|
||
{
|
||
content: '设备最早上送时刻',
|
||
timestamp: '2018-04-03 20:46',
|
||
hollow: true,
|
||
},
|
||
{
|
||
content: '设备最晚上送时刻',
|
||
timestamp: '2018-04-03 20:46',
|
||
hollow: true,
|
||
},
|
||
{
|
||
content: '检测结束',
|
||
timestamp: '2018-04-03 20:46',
|
||
hollow: true,
|
||
},
|
||
]
|
||
const tableData1 = ref([
|
||
{
|
||
id: '1',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240001',
|
||
MonitorIdx: 1,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '2',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240001',
|
||
MonitorIdx: 2,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '3',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240001',
|
||
MonitorIdx: 3,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '4',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240001',
|
||
MonitorIdx: 4,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
])
|
||
const tableData2 = ref([
|
||
{
|
||
id: '1',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240002',
|
||
MonitorIdx: 1,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '2',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240002',
|
||
MonitorIdx: 2,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '不合格',
|
||
},
|
||
{
|
||
id: '3',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240002',
|
||
MonitorIdx: 3,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '4',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240002',
|
||
MonitorIdx: 4,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '不合格',
|
||
},
|
||
])
|
||
const tableData3 = ref([
|
||
{
|
||
id: '1',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240003',
|
||
MonitorIdx: 1,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '2',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240003',
|
||
MonitorIdx: 2,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '3',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240003',
|
||
MonitorIdx: 3,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '4',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240003',
|
||
MonitorIdx: 4,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
])
|
||
const tableData4 = ref([
|
||
{
|
||
id: '1',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240004',
|
||
MonitorIdx: 1,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '2',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240004',
|
||
MonitorIdx: 2,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '3',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240004',
|
||
MonitorIdx: 3,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
{
|
||
id: '4',
|
||
updateTime: '2024-10-10 10:30:00',
|
||
deviceName: '240004',
|
||
MonitorIdx: 4,
|
||
Ua: 1.0003,
|
||
Ub: 1.0003,
|
||
Uc: 0.0096,
|
||
Ia: 1.0003,
|
||
Ib: 1.0003,
|
||
Ic: 1.0008,
|
||
Result: '合格',
|
||
},
|
||
])
|
||
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
|
||
|
||
const props = defineProps({
|
||
testStatus: {
|
||
type: String,
|
||
default: 'wait'
|
||
}
|
||
})
|
||
const testStatus = toRef(props, 'testStatus');
|
||
const ts = ref('');
|
||
//监听goods_sn的变化
|
||
watch(testStatus, function (newValue, oldValue) {
|
||
ts.value = props.testStatus;
|
||
if (ts.value === 'start') {
|
||
ts.value = 'process'
|
||
|
||
let timer = setInterval(() => {
|
||
if (activeIndex.value < activeTotalNum.value) {
|
||
activeIndex.value++
|
||
if(activeIndex.value > 1)
|
||
qualified.value = activeIndex.value -1;//演示效果，实际运行时使用后端传来的真实数据即可
|
||
else
|
||
qualified.value = activeIndex.value;
|
||
}
|
||
else if (activeIndex.value === activeTotalNum.value) {
|
||
clearInterval(timer)
|
||
ts.value = 'success'
|
||
}
|
||
else {
|
||
clearInterval(timer)
|
||
ts.value = 'success'
|
||
}
|
||
|
||
total.value = activeTotalNum.value
|
||
}, 1000);
|
||
}
|
||
})
|
||
|
||
watch(activeIndex, function (newValue, oldValue) {
|
||
|
||
if(activeIndex.value === 1)
|
||
{
|
||
outputDsc.value = "电压误差为：±0.1Un%； 电流误差为：±0.5%；当前源输出为：Ua=Ub=Uc=57.74V Ia=Ib=Ic=1A";
|
||
}
|
||
|
||
})
|
||
|
||
const emit = defineEmits(['update:testStatus']);
|
||
//监听sn
|
||
watch(ts, function (newValue, oldValue) {
|
||
//修改父组件
|
||
emit('update:testStatus', ts.value)
|
||
})
|
||
|
||
</script>
|
||
<style scoped>
|
||
.right-title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
/* 横向排列 */
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.right-content {
|
||
/* max-height: 400px; */
|
||
}
|
||
|
||
.custom-tabs-label .el-icon {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.custom-tabs-label span {
|
||
vertical-align: middle;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.dialog-content {
|
||
height: 472px;
|
||
}
|
||
|
||
.el-tabs--border-card {
|
||
height: 425px;
|
||
}
|
||
.el-icon svg {
|
||
color: #ff7171;
|
||
}
|
||
</style>
|