486 lines
13 KiB
Vue
486 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="守时误差">
|
||
<div class="right-title" >
|
||
<span v-if="activeIndex <= 1"> </span>
|
||
<span v-if="activeIndex > 1" class="time-text">
|
||
标准时间: <span style="color: var(--el-color-primary)">{{ gpsTime }}</span>
|
||
</span>
|
||
<div class="error-dsc">
|
||
<div class="green-div"></div>
|
||
<span class="description-text">
|
||
合格≤1000ms
|
||
</span>
|
||
|
||
<div class="red-div"></div>
|
||
<span class="description-text unqualified">
|
||
不合格>1000ms
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<div class="test-dialog">
|
||
<div class="dialog-left">
|
||
<el-steps direction="vertical" :active="stepsIndex" :process-status="currentStepStatus"
|
||
finish-status="success">
|
||
<el-step title="开始检测" />
|
||
<el-step title="触发设备检测GPS时刻的标准时间"/>
|
||
<el-step title="设备开始上送"/>
|
||
<el-step title="设备结束上送"/>
|
||
<el-step title="检测完成"/>
|
||
</el-steps>
|
||
<!-- <el-timeline style="max-width: 600px">
|
||
<el-timeline-item
|
||
v-for="(activity, index) in activities"
|
||
:key="index"
|
||
:icon="activity.icon"
|
||
:type="activity.type"
|
||
:color="activity.color"
|
||
:size="activity.size"
|
||
:hollow="activity.hollow"
|
||
:timestamp="activity.timestamp"
|
||
>
|
||
{{ activity.content }}
|
||
</el-timeline-item>
|
||
</el-timeline> -->
|
||
</div>
|
||
<div class="dialog-right">
|
||
<div class="right-title">
|
||
<!-- <div>设备上送时刻表</div> -->
|
||
|
||
<!-- <span v-if="activeIndex <= 1"> </span>
|
||
<span v-if="activeIndex > 1" style=" font-size: 18px;font-weight: 600;">
|
||
标准时间: <span style="color: var(--el-color-primary)">{{ gpsTime }}</span>
|
||
</span>
|
||
<div class="error-dsc">
|
||
<div class="green-div"></div>
|
||
<span style=" color: #606266; font-size: 16px;font-weight: 600;">
|
||
守时误差≤1000ms
|
||
</span>
|
||
|
||
<div class="red-div"></div>
|
||
<span style=" color: #F56C6c; font-size: 16px;font-weight: 600;">
|
||
守时误差>1000ms
|
||
</span>
|
||
</div> -->
|
||
<!-- <span style=" font-size: 18px;font-weight: 600;">
|
||
设备已合格 <span style="color: #67C23A">{{ qualified }}</span> 台/共 <span style="color: green">4</span> 台
|
||
</span> -->
|
||
<!-- <el-button type="primary" loading v-if="activeIndex > 0 && activeIndex < activeTotalNum">设备已合格3台/共4台</el-button>
|
||
<el-button type="primary" disabled="true" v-if="activeIndex === activeTotalNum">设备已合格3台/共4台</el-button> -->
|
||
</div>
|
||
<div class="right-content table-main">
|
||
<el-empty description="暂无数据，等待检测开始" v-if="activeIndex === 0" />
|
||
<!-- <ProTable v-if="activeIndex > 0" ref='proTable' :pagination='false' :toolButton='false' :showCard='false' :columns='columns'
|
||
:data='deviceOperatorData' stripe :header-cell-style="{ textAlign: 'center' }"
|
||
:cell-style="{ textAlign: 'center' }" style="width: 100%; height:435px" border>
|
||
</ProTable> -->
|
||
|
||
<el-table
|
||
v-if="activeIndex > 0"
|
||
:data="deviceOperatorData"
|
||
stripe
|
||
:header-cell-class-name="'el-table-header'"
|
||
:cell-class-name="'el-table-cell'"
|
||
class="el-table"
|
||
border>
|
||
<el-table-column prop="deviceName" label="设备名称" />
|
||
<el-table-column prop="updataTime" label="上送时刻" />
|
||
<el-table-column prop="ErrorValue" label="守时误差(ms)">
|
||
<!-- <template #header>
|
||
<span>守时误差(ms)</span>
|
||
<el-tooltip content = "守时误差 = |设备上送时间 - 标准时间|，最大显示值为9999毫秒，超过该值的统一用ErrorMax来表示" placement="top" style="align-items: bottom;">
|
||
<el-icon><InfoFilled /></el-icon>
|
||
</el-tooltip>
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="Result" label="检测结果">
|
||
<!-- <template #header>
|
||
<span>检测结果</span>
|
||
<el-tooltip content = "守时误差小于等于1000毫秒为合格，否则不合格" placement="top" style="align-items: bottom;">
|
||
<el-icon><InfoFilled /></el-icon>
|
||
</el-tooltip>
|
||
</template> -->
|
||
<template #default="scope">
|
||
<el-tag v-if="scope.row.Result === '不合格'" type="danger">{{ scope.row.Result }}</el-tag>
|
||
<span v-if="scope.row.Result != '不合格'">{{scope.row.Result}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
<script lang="tsx" setup name="timeTest">
|
||
import { SuccessFilled } from '@element-plus/icons-vue'
|
||
import { reactive, ref, toRef, watch } from 'vue'
|
||
|
||
const stepsIndex = ref(0)
|
||
const activeIndex = ref(0)
|
||
const activeTotalNum = ref(7)
|
||
const startTime = ref('')
|
||
const gpsTime = ref('')
|
||
const devStartTime = ref('')
|
||
const devEndTime = ref('')
|
||
const finishTime = ref('')
|
||
|
||
interface Activity {
|
||
content: string;
|
||
hollow?: boolean;
|
||
timestamp?: string;
|
||
size?: string;
|
||
color?: string;
|
||
icon?: any;
|
||
}
|
||
const qualified = ref(0)
|
||
const activities = ref<Activity[]>([
|
||
{
|
||
content: '开始检测',
|
||
hollow: true,
|
||
},])
|
||
|
||
|
||
const deviceOperatorData = ref([])
|
||
|
||
const deviceData = ref([
|
||
{
|
||
deviceName: '240001',
|
||
updataTime: '2024-12-05 10:30:08.136',
|
||
ErrorValue: '148',
|
||
Result: '合格',
|
||
},
|
||
{
|
||
deviceName: '240002',
|
||
updataTime: '2024-12-05 10:30:08.136',
|
||
ErrorValue: '136',
|
||
Result: '合格',
|
||
},
|
||
{
|
||
deviceName: '240003',
|
||
updataTime: '2024-12-05 10:30:09.006',
|
||
ErrorValue: '1006',
|
||
Result: '不合格',
|
||
},
|
||
{
|
||
deviceName: '240004',
|
||
updataTime: '2024-12-05 10:30:08.736',
|
||
ErrorValue: '736',
|
||
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('');
|
||
|
||
// 表格配置项
|
||
const columns = reactive([
|
||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||
{
|
||
prop: 'deviceName',
|
||
label: '设备名称',
|
||
},
|
||
{
|
||
prop: 'updataTime',
|
||
label: '上送时刻',
|
||
// width: 230,
|
||
},
|
||
{
|
||
prop: 'ErrorValue',
|
||
label: '守时误差（ms）',
|
||
// width: 100,
|
||
},
|
||
{
|
||
prop: 'Result',
|
||
label: '检测结果',
|
||
// width: 100,
|
||
render: (scope: { row: { Result: string } }) => {
|
||
if (scope.row.Result === '不合格') {
|
||
return (
|
||
<el-tag type='danger'>{scope.row.Result}</el-tag>
|
||
)
|
||
}
|
||
else {
|
||
return (
|
||
<span>{scope.row.Result}</span>
|
||
)
|
||
}
|
||
},
|
||
},
|
||
])
|
||
//监听testStatus的变化
|
||
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++
|
||
// else if (activeIndex.value === activeTotalNum.value - 2) {
|
||
// activeIndex.value++
|
||
// activeIndex.value++
|
||
// }
|
||
else {
|
||
clearInterval(timer)
|
||
ts.value = 'success'
|
||
}
|
||
}, 1000);
|
||
}
|
||
})
|
||
|
||
function formatDateTime(date: Date) {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
const milliseconds = String(date.getMilliseconds()).padStart(3, '0');
|
||
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
|
||
}
|
||
|
||
function addMillisecondsToDate(dateString: string, millisecondsToAdd: number): Date {
|
||
// 解析字符串为 Date 对象
|
||
const [datePart, timePart] = dateString.split(' ');
|
||
const [year, month, day] = datePart.split('-').map(Number);
|
||
const [hours, minutes, seconds, milliseconds] = timePart.split(':').flatMap(part => part.split('.')).map(Number);
|
||
|
||
// 创建 Date 对象（注意：月份是从 0 开始的）
|
||
const date = new Date(year, month - 1, day, hours, minutes, seconds, milliseconds);
|
||
|
||
// 增加指定的毫秒数
|
||
date.setMilliseconds(date.getMilliseconds() + millisecondsToAdd);
|
||
|
||
return date;
|
||
}
|
||
|
||
watch(activeIndex, function (newValue, oldValue) {
|
||
|
||
|
||
|
||
if (activeIndex.value === 1) {
|
||
startTime.value = formatDateTime(new Date());
|
||
stepsIndex.value = 1;
|
||
// activities.value.length = 0;
|
||
// activities.value.push({
|
||
// content: '开始检测',
|
||
// timestamp: '2018-04-12 20:46',
|
||
// size: 'large',
|
||
// color: '#0bbd87',
|
||
// icon: SuccessFilled,
|
||
// });
|
||
}
|
||
if (activeIndex.value === 2) {
|
||
stepsIndex.value = 2;
|
||
gpsTime.value = formatDateTime(new Date());
|
||
// activities.value.push({
|
||
// content: 'GPS上送时刻',
|
||
// timestamp: '2018-04-03 20:46',
|
||
// color: '#0bbd87',
|
||
// icon: SuccessFilled,
|
||
// size: 'large',
|
||
// });
|
||
}
|
||
if (activeIndex.value === 3) {
|
||
stepsIndex.value = 3;
|
||
deviceOperatorData.value.length = 0;
|
||
// deviceOperatorData.value = deviceData.value;
|
||
deviceOperatorData.value.push({
|
||
deviceName: '240002',
|
||
updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 136)),
|
||
ErrorValue: '136',
|
||
Result: '合格',
|
||
});
|
||
}
|
||
if (activeIndex.value === 4) {
|
||
deviceOperatorData.value.push({
|
||
deviceName: '240001',
|
||
updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 148)),
|
||
ErrorValue: '148',
|
||
Result: '合格',
|
||
});
|
||
}
|
||
if (activeIndex.value === 5) {
|
||
deviceOperatorData.value.push({
|
||
deviceName: '240004',
|
||
updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 736)),
|
||
ErrorValue: '736',
|
||
Result: '合格',
|
||
});
|
||
}
|
||
if (activeIndex.value === 6) {
|
||
stepsIndex.value = 5;
|
||
deviceOperatorData.value.push({
|
||
deviceName: '240003',
|
||
updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 1006)),
|
||
ErrorValue: '1006',
|
||
Result: '不合格',
|
||
});
|
||
}
|
||
|
||
})
|
||
const emit = defineEmits(['update:testStatus']);
|
||
//监听sn
|
||
watch(ts, function (newValue, oldValue) {
|
||
//修改父组件
|
||
emit('update:testStatus', ts.value)
|
||
})
|
||
|
||
</script>
|
||
<style scoped>
|
||
|
||
|
||
.test-dialog {
|
||
height: 350px;
|
||
display: flex;
|
||
|
||
flex-direction: row;
|
||
/* 横向排列 */
|
||
margin-top: 20px;
|
||
/* .dialog-left{
|
||
margin-right: 20px;
|
||
} */
|
||
}
|
||
|
||
.dialog-left {
|
||
margin-left: 20px;
|
||
width: 20%;
|
||
}
|
||
|
||
.dialog-right {
|
||
/* margin-top: 25px;
|
||
margin-left: 20px; */
|
||
width: 80%;
|
||
}
|
||
|
||
.right-title {
|
||
height: 32px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
/* 横向排列 */
|
||
justify-content: space-between;
|
||
/* margin-bottom: 10px; */
|
||
|
||
}
|
||
|
||
.error-dsc{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.green-div{
|
||
width: 20px;
|
||
height: 14px;
|
||
border-radius: 4px;
|
||
background-color: #606266;
|
||
margin-left: 5px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.red-div{
|
||
width: 20px;
|
||
height: 14px;
|
||
border-radius: 4px;
|
||
background-color: #F56C6C;
|
||
margin-left: 5px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.right-content{
|
||
height: 440px;
|
||
}
|
||
|
||
/* width: 100%;
|
||
height: auto;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
// justify-content: space-around;
|
||
// justify-content: space-evenly;
|
||
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
padding: 10px 20px 10px 20px;
|
||
box-sizing: border-box; */
|
||
|
||
.right-title .time-text {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.right-title .gps-time {
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
.error-dsc {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10px; /* 根据需要调整 */
|
||
}
|
||
|
||
.error-dsc .green-div,
|
||
.error-dsc .red-div {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.error-dsc .green-div {
|
||
background-color: #91cc75;
|
||
}
|
||
|
||
.error-dsc .red-div {
|
||
background-color: #F56C6C;
|
||
}
|
||
|
||
.error-dsc .description-text {
|
||
color: #606266;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.error-dsc .description-text.unqualified {
|
||
color: #F56C6C;
|
||
}
|
||
|
||
.el-table-header {
|
||
text-align: center;
|
||
}
|
||
|
||
.el-table-cell {
|
||
text-align: center;
|
||
}
|
||
|
||
.el-table {
|
||
margin-top: -30px;
|
||
width: 100%;
|
||
}
|
||
|
||
.tooltip-icon {
|
||
margin-left: 4px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.result-tag {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.result-text {
|
||
font-weight: 600;
|
||
}
|
||
</style>
|