首页、守时检测页样式调整

This commit is contained in:
GYYM
2024-12-11 17:46:59 +08:00
parent 6d7f045bce
commit 167716e61b
6 changed files with 224 additions and 95 deletions

View File

@@ -201,7 +201,7 @@ const data = [
}, },
{ {
id: '15', //装置序号ID id: '15', //装置序号ID
name: '240013', //设备名称 name: '240015', //设备名称
dev_Type: 'PQS-882A',//设备类型 dev_Type: 'PQS-882A',//设备类型
dev_Chns: 1, //设备通道数 dev_Chns: 1, //设备通道数
check_Result: '未检', //检测结果 check_Result: '未检', //检测结果
@@ -212,7 +212,7 @@ const data = [
}, },
{ {
id: '16', //装置序号ID id: '16', //装置序号ID
name: '240014', //设备名称 name: '240016', //设备名称
dev_Type: 'PQS-882A',//设备类型 dev_Type: 'PQS-882A',//设备类型
dev_Chns: 1, //设备通道数 dev_Chns: 1, //设备通道数
check_Result: '未检', //检测结果 check_Result: '未检', //检测结果

View File

@@ -269,7 +269,7 @@ const qualified = ref(0)
const reportDisabled = ref(true) const reportDisabled = ref(true)
const reportDialogVisible = ref(false) const reportDialogVisible = ref(false)
const deviceName = ref('240001'); const deviceName = ref('240001');
const error_Sys_Id = ref('2'); const error_Sys_Id = ref('1');
const testScriptName = ref('Q/GDW 10650.4-2021 模拟式'); const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
const errorSysName = ref('Q/GDW 10650.2 - 2021'); const errorSysName = ref('Q/GDW 10650.2 - 2021');
const dataRule = ref('所有值'); const dataRule = ref('所有值');

View File

@@ -112,8 +112,8 @@
<!-- :disabled="!scope.isSelected || scope.selectedList.filter((item) => item.check_State === '检测完成').length === 0" --> <!-- :disabled="!scope.isSelected || scope.selectedList.filter((item) => item.check_State === '检测完成').length === 0" -->
<el-button type="primary" :icon="Notebook" @click="handleTest('批量归档')" v-if="form.activeTabs === 4" <el-button type="primary" :icon="Notebook" @click="handleTest('批量归档')" v-if="form.activeTabs === 4"
>归档</el-button> >归档</el-button>
<el-button type="primary" :icon="CirclePlus" @click="addDevice('设备新增')" v-if="form.activeTabs === 0" <!-- <el-button type="primary" :icon="CirclePlus" @click="addDevice('设备新增')" v-if="form.activeTabs === 0"
>设备新增</el-button> >设备新增</el-button> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -128,7 +128,17 @@
v-if="form.activeTabs === 3 && form.activeChildTabs === 1" v-if="form.activeTabs === 3 && form.activeChildTabs === 1"
>查看</el-button >查看</el-button
> >
<div class='cn-render-buttons' v-if="form.activeTabs === 3 && form.activeChildTabs === 0">
<el-button
type="primary"
link
:icon="Download"
@click="openDrawer('报告下载', scope.row)"
v-if="form.activeTabs === 3 && form.activeChildTabs === 0"
>报告下载</el-button
>
<!-- <div class='cn-render-buttons' v-if="form.activeTabs === 3 && form.activeChildTabs === 0">
<el-dropdown trigger='click'> <el-dropdown trigger='click'>
<el-button link type='primary' :icon="Download" class='table-operate'> <el-button link type='primary' :icon="Download" class='table-operate'>
<div class='table-operate-text'>报告下载</div> <div class='table-operate-text'>报告下载</div>
@@ -141,7 +151,7 @@
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div> -->
<el-button <el-button
type="primary" type="primary"
@@ -181,9 +191,24 @@
link link
:icon="Switch" :icon="Switch"
@click="openDrawer('误差体系更换', scope.row)" @click="openDrawer('误差体系更换', scope.row)"
v-if="form.activeTabs === 5" v-if="form.activeTabs === 5 && scope.row.document_State === '已归档'"
>误差体系更换</el-button >误差体系更换</el-button
> >
<div class='cn-render-buttons' v-if="form.activeTabs === 5 && scope.row.document_State === '已归档'">
<el-dropdown trigger='click'>
<el-button link type='primary' :icon="Download" class='table-operate'>
<div class='table-operate-text'>报告下载</div>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<!-- <el-dropdown-item>Q/GDW 10650.2-2021 报告</el-dropdown-item> -->
<el-dropdown-item>Q/GDW 1650.2-2016 报告</el-dropdown-item>
<el-dropdown-item>GBT 19862-2016 报告</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- <el-button <!-- <el-button
dictType="primary" dictType="primary"
link link
@@ -767,7 +792,7 @@ function tableHeaderInit(val: number) {
case 5://数据查询 case 5://数据查询
disablecheckResultList("未检") disablecheckResultList("未检")
disableCheckReportStatus("未检") disableCheckReportStatus("未检")
columns[columns.length - 1].minWidth = 250; columns[columns.length - 1].minWidth = 290;
operationShow.value = true; operationShow.value = true;
documentStateShow.value = true; documentStateShow.value = true;
checkStateShow.value = false; checkStateShow.value = false;

View File

@@ -324,6 +324,41 @@ const scrollToBottom = () => {
function getRandomInt(max: number): number { function getRandomInt(max: number): number {
return Math.floor(Math.random() * max); return Math.floor(Math.random() * max);
} }
//判断该检测项(例如 频率准确度检测)是否全部合格(所有设备所有通道所有子检测项目全部合格为合格,否则为不合格)
function getItemCheckResult(index:number):boolean{
let items = columnList?.value.filter((item) => item === index.toString())
if(items.length > 0)
{
return false
}
else
return true
}
//测试项开始检测时间(或继续检测时间)
const startData = ref(new Date())
//测试项检测结束时间(或暂停时的时间)
const endData= ref(new Date())
let timeDifference = ref(0)
function getTimeDifference(timeDifference:number): string {
// 将时间差转换为天、小时、分钟、秒
const millisecondsPerDay = 1000 * 60 * 60 * 24;
const millisecondsPerHour = 1000 * 60 * 60;
const millisecondsPerMinute = 1000 * 60;
const millisecondsPerSecond = 1000;
const days = Math.floor(timeDifference / millisecondsPerDay);
const hours = Math.floor((timeDifference % millisecondsPerDay) / millisecondsPerHour);
const minutes = Math.floor((timeDifference % millisecondsPerHour) / millisecondsPerMinute);
const seconds = Math.floor((timeDifference % millisecondsPerMinute) / millisecondsPerSecond);
return `时间差: ${days} 天, ${hours} 小时, ${minutes} 分钟, ${seconds}`
}
const updateLog = () => { const updateLog = () => {
const currentTime = ref(new Date().toLocaleString()); const currentTime = ref(new Date().toLocaleString());
@@ -335,14 +370,23 @@ const updateLog = () => {
type: 'info', type: 'info',
log: currentTime.value + ':频率准确度检测开始', log: currentTime.value + ':频率准确度检测开始',
}) })
break; break;
case 2: case 2:
if(getItemCheckResult(activeIndex.value - 1))
{
testLogList.value.push({ testLogList.value.push({
type: 'info', type: 'info',
log:currentTime.value + ':频率准确度检测完成', log:currentTime.value + ':频率准确度检测合格',
}) })
}
else
{
testLogList.value.push({
type: 'error',
log:currentTime.value + ':频率准确度检测不合格',
})
}
testLogList.value.push({ testLogList.value.push({
type: 'info', type: 'info',
log:currentTime.value + ':电压准确度检测开始', log:currentTime.value + ':电压准确度检测开始',

View File

@@ -2,12 +2,12 @@
<div> <div>
<div class="test-dialog"> <div class="test-dialog">
<div class="dialog-left"> <div class="dialog-left">
<el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus" <el-steps direction="vertical" :active="stepsIndex" :process-status="currentStepStatus"
finish-status="success"> finish-status="success">
<el-step title="开始检测" /> <el-step title="开始检测" />
<el-step title="触发设备检测GPS时刻的标准时间" :description="gpsTime" /> <el-step title="触发设备检测GPS时刻的标准时间"/>
<el-step title="设备开始上送" :description="devStartTime" /> <el-step title="设备开始上送"/>
<el-step title="设备结束上送" :description="devEndTime" /> <el-step title="设备结束上送"/>
<el-step title="检测完成"/> <el-step title="检测完成"/>
</el-steps> </el-steps>
<!-- <el-timeline style="max-width: 600px"> <!-- <el-timeline style="max-width: 600px">
@@ -28,31 +28,58 @@
<div class="dialog-right"> <div class="dialog-right">
<div class="right-title"> <div class="right-title">
<!-- <div>设备上送时刻表</div> --> <!-- <div>设备上送时刻表</div> -->
<span style=" font-size: 18px;font-weight: 600;">
设备已合格 <span style="color: #67C23A">{{ qualified }}</span> / <span style="color: green">4</span> <span v-if="activeIndex <= 1"> </span>
<span v-if="activeIndex > 1" style=" font-size: 18px;font-weight: 600;">
标准时间: <span style="color: #003078">{{ gpsTime }}</span>
</span> </span>
<div> <div class="error-dsc">
<div class="green-div"></div>
<span style=" color: #67C23A; 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" 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> --> <el-button type="primary" disabled="true" v-if="activeIndex === activeTotalNum">设备已合格3台/共4台</el-button> -->
</div> </div>
</div> <div class="right-content table-main">
<div class="right-content"> <el-empty description="暂无数据,等待检测开始" v-if="activeIndex === 0" />
<ProTable ref='proTable' :pagination='false' :toolButton='false' :showCard='false' :columns='columns' <!-- <ProTable v-if="activeIndex > 0" ref='proTable' :pagination='false' :toolButton='false' :showCard='false' :columns='columns'
:data='deviceOperatorData' stripe :header-cell-style="{ textAlign: 'center' }" :data='deviceOperatorData' stripe :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" style="width: 100%; height:435px" border> :cell-style="{ textAlign: 'center' }" style="width: 100%; height:435px" border>
</ProTable> </ProTable> -->
<!-- <el-table :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border> <el-table v-if="activeIndex > 0" :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
<el-table-column prop="deviceName" label="设备名" /> <el-table-column prop="deviceName" label="设备名" />
<el-table-column prop="updataTime" label="上送时刻" /> <el-table-column prop="updataTime" label="上送时刻" />
<el-table-column prop="ErrorValue" label="守时误差(ms)" /> <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="检测结果"> <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"> <template #default="scope">
<el-tag :type="scope.row.Result === '合格' ? 'success' : 'danger'">{{ scope.row.Result }}</el-tag> <el-tag :type="scope.row.Result === '合格' ? 'success' : 'danger'">{{ scope.row.Result }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> --> </el-table>
</div> </div>
</div> </div>
</div> </div>
@@ -62,8 +89,9 @@
<script lang="tsx" setup name="timeTest"> <script lang="tsx" setup name="timeTest">
import { SuccessFilled } from '@element-plus/icons-vue' import { SuccessFilled } from '@element-plus/icons-vue'
const stepsIndex = ref(0)
const activeIndex = ref(0) const activeIndex = ref(0)
const activeTotalNum = ref(5) const activeTotalNum = ref(7)
const startTime = ref('') const startTime = ref('')
const gpsTime = ref('') const gpsTime = ref('')
const devStartTime = ref('') const devStartTime = ref('')
@@ -86,32 +114,7 @@ const activities = ref<Activity[]>([
},]) },])
const deviceOperatorData = ref([ const deviceOperatorData = ref([])
{
deviceName: '240001',
updataTime: '—',
ErrorValue: '—',
Result: '—',
},
{
deviceName: '240002',
updataTime: '—',
ErrorValue: '—',
Result: '—',
},
{
deviceName: '240003',
updataTime: '—',
ErrorValue: '—',
Result: '—',
},
{
deviceName: '240004',
updataTime: '—',
ErrorValue: '—',
Result: '—',
},
])
const deviceData = ref([ const deviceData = ref([
{ {
@@ -192,12 +195,12 @@ watch(testStatus, function (newValue, oldValue) {
ts.value = 'process' ts.value = 'process'
let timer = setInterval(() => { let timer = setInterval(() => {
if (activeIndex.value < activeTotalNum.value - 2) if (activeIndex.value < activeTotalNum.value)
activeIndex.value++ activeIndex.value++
else if (activeIndex.value === activeTotalNum.value - 2) { // else if (activeIndex.value === activeTotalNum.value - 2) {
activeIndex.value++ // activeIndex.value++
activeIndex.value++ // activeIndex.value++
} // }
else { else {
clearInterval(timer) clearInterval(timer)
ts.value = 'success' ts.value = 'success'
@@ -218,11 +221,28 @@ function formatDateTime(date) {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`; 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) { watch(activeIndex, function (newValue, oldValue) {
console.log(activeIndex.value,111,stepsIndex.value,222)
if (activeIndex.value === 1) { if (activeIndex.value === 1) {
startTime.value = formatDateTime(new Date()); startTime.value = formatDateTime(new Date());
stepsIndex.value = 1;
// activities.value.length = 0; // activities.value.length = 0;
// activities.value.push({ // activities.value.push({
// content: '开始检测', // content: '开始检测',
@@ -233,6 +253,7 @@ watch(activeIndex, function (newValue, oldValue) {
// }); // });
} }
if (activeIndex.value === 2) { if (activeIndex.value === 2) {
stepsIndex.value = 2;
gpsTime.value = formatDateTime(new Date()); gpsTime.value = formatDateTime(new Date());
// activities.value.push({ // activities.value.push({
// content: 'GPS上送时刻', // content: 'GPS上送时刻',
@@ -243,37 +264,42 @@ watch(activeIndex, function (newValue, oldValue) {
// }); // });
} }
if (activeIndex.value === 3) { if (activeIndex.value === 3) {
// activities.value.push({ stepsIndex.value = 3;
// content: '设备最早上送时刻',
// timestamp: '2018-04-03 20:46',
// color: '#0bbd87',
// icon: SuccessFilled,
// size: 'large',
// });
devStartTime.value = formatDateTime(new Date());
deviceOperatorData.value.length = 0; deviceOperatorData.value.length = 0;
deviceOperatorData.value = deviceData.value; // deviceOperatorData.value = deviceData.value;
qualified.value = 3 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: '不合格',
});
} }
if (activeIndex.value > 3) {
devEndTime.value = formatDateTime(new Date());
finishTime.value = formatDateTime(new Date());
// activities.value.push({
// content: '设备最晚上送时刻',
// timestamp: '2018-04-03 20:46',
// color: '#0bbd87',
// icon: SuccessFilled,
// size: 'large',
// });
// activities.value.push({
// content: '检测结束',
// timestamp: '2018-04-03 20:46',
// color: '#0bbd87',
// icon: SuccessFilled,
// size: 'large',
// });
}
}) })
const emit = defineEmits(['update:testStatus']); const emit = defineEmits(['update:testStatus']);
//监听sn //监听sn
@@ -313,11 +339,40 @@ watch(ts, function (newValue, oldValue) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
/* 横向排列 */ /* 横向排列 */
justify-content: flex-end; justify-content: space-between;
/* margin-bottom: 10px; */ /* 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: #67C23A;
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%; /* width: 100%;
height: auto; height: auto;
background: #fff; background: #fff;

View File

@@ -30,7 +30,7 @@
<el-collapse-item title="检测进度展示" name="1"> --> <el-collapse-item title="检测进度展示" name="1"> -->
<div class="container_pieShow"> <div class="container_pieShow">
<el-collapse model-value="1" accordion @change="handleCollapseChange"> <el-collapse model-value="1" accordion @change="handleCollapseChange">
<el-collapse-item title="&nbsp&nbsp&nbsp&nbsp检测计划统计" name="1"> <el-collapse-item title="&nbsp&nbsp&nbsp&nbsp&nbsp检测计划统计" name="1">
<!-- 饼图 --> <!-- 饼图 -->
<div class="container_charts"> <div class="container_charts">
<div class="charts_info" ref="chartsInfoRef"> <div class="charts_info" ref="chartsInfoRef">
@@ -636,6 +636,11 @@ onUnmounted(() => {
} }
} }
} }
:deep(.el-collapse-item__header){
color: var(--el-color-primary);
font-size: 14px;
font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
}
:deep(.el-collapse-item__conten){ :deep(.el-collapse-item__conten){
// background-color:#f6f6f6; // background-color:#f6f6f6;
padding-bottom: 0px !important; padding-bottom: 0px !important;