ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
GYYM
2024-11-21 23:02:43 +08:00
parent eedf3f00c1
commit 44f8d43775
15 changed files with 2236 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
frontend/src/views/home/components/test.vue
View File

@@ -3,7 +3,7 @@
<div class = "dialog">
<div class="dialog-title">
<el-progress
style="width: 80%"
style="width: 90%"
:percentage="percentage"
:color="customColors"
/>
@@ -22,20 +22,20 @@
@click="handlePauseTest"
>继续检测</el-button
>
<el-button type="danger" :icon="Close" @click="handleFinishTest"
<!-- <el-button type="danger" :icon="Close" @click="handleFinishTest"
>停止检测</el-button
>
> -->
</div>
<!-- background: '#f5f7fa', color: '#606266' -->
<!-- v-on:cell-click="handleClick" -->
<div class="dialog-content">
<el-table :key="tableKey" :data="tableData" :row-class-name="tableRowClassName" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
<!-- <el-table :key="tableKey" :data="tableData" :row-class-name="tableRowClassName" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border> -->
<!-- <el-table :data="tableData" :row-class-name="tableRowClassName" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " style="width: 100%" border> -->
<el-table-column fixed prop="scriptItemName" label="检测项目" class="table-first-column" />
<div class="dialog-content">
<el-table :data="tableData" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " style="width: 100%" border>
<el-table-column fixed prop="scriptItemName" label="检测项目" width="210px" />
<el-table-column label="被检通道1" >
<el-table-column label="被检通道1" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType1==='info' ? '暂无数据' : '点击查看详情'" placement="top">
@@ -52,7 +52,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道2">
<el-table-column label="被检通道2" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType2==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -67,7 +67,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道3">
<el-table-column label="被检通道3" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType3==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -82,7 +82,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道4">
<el-table-column label="被检通道4" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType4==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -97,7 +97,7 @@
</template>
</el-table-column>
<el-table-column p label="被检通道5">
<el-table-column p label="被检通道5" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType5==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -112,7 +112,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道6">
<el-table-column label="被检通道6" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType6==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -128,7 +128,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道7">
<el-table-column label="被检通道7" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType7==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -143,7 +143,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道8">
<el-table-column label="被检通道8" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType8==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -164,11 +164,13 @@
</el-table>
</div>
<div class="dialog-log">
<div >
<el-collapse model-value="1" accordion>
<el-collapse-item title="检测日志：" name="1">
<div>
暂无数据，等待检测开始
<div ref="scrollContainer" class="dialog-log">
<p v-for="(item, index) in testLogList" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
{{ item.log }} <br />
</p>
</div>
</el-collapse-item>
</el-collapse>
@@ -188,8 +190,11 @@
import { VideoPause,Refresh,Close } from '@element-plus/icons-vue'
import resultPopup from './resultPopup.vue'
import dataCheckSingleChannelSingleTestPopup from './dataCheckSingleChannelSingleTestPopup.vue'
import { log } from 'console';
import temptest from './temptest.vue'
const activeIndex = ref(0)
const activeTotalNum = ref(12)
const currentRow = ref<{ id: number; scriptItemName: string; name: string; address: string; hasChildren?: boolean; children?: User[] } | null>(null);
// const currentRow = ref(null); // 用于存储当前选中的行
@@ -245,9 +250,76 @@ const tableData1= [
address: 'No. 189, Grove St, Los Angeles',
},
]
const scrollContainer = ref<HTMLElement | null>(null); // 声明 scrollContainer
const scrollToBottom = () => {
if (scrollContainer.value) {
console.log(scrollContainer.value)
scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
console.log(scrollContainer.value)
}
};
function getRandomInt(max: number): number {
return Math.floor(Math.random() * max);
}
const updateLog = () => {
const currentTime = ref(new Date().toLocaleString());
switch(activeIndex.value)
{
case 1:
testLogList.value.length = 0; // 清空数组
testLogList.value.push({
type: 'info',
log: currentTime.value + '：频率准确度检测开始',
})
break;
case 2:
testLogList.value.push({
type: 'info',
log:currentTime.value + '：频率准确度检测完成',
})
testLogList.value.push({
type: 'info',
log:currentTime.value + '：电压准确度检测开始',
})
break;
case 3:
testLogList.value.push({
type: 'error',
log:currentTime.value + '：电压准确度检测不合格',
})
testLogList.value.push({
type: 'info',
log:currentTime.value + '：谐波电压准确度检测开始',
})
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 10:
case 11:
case 12:
updateTableData(activeIndex.value.toString())
break;
}
scrollToBottom();
}
const testLogList = ref([
{
type: 'info',
log:'暂无数据，等待检测开始',
},
])
const tableKey = ref(0);
const currentIdx = ref(0);
const tableRowClassName = ({
row,
@@ -256,9 +328,9 @@ const tableRowClassName = ({
row: any
rowIndex: number
}) => {
// console.log(currentIdx.value,rowIndex,row)
// console.log(activeIndex.value,rowIndex,row)
if (row.id === currentIdx.value.toString()) {
if (row.id === activeIndex.value.toString()) {
return 'warning-row'
}
// else if (rowIndex === 3) {
@@ -277,46 +349,52 @@ const dataCheckSingleChannelSingleTestDialogVisable = ref(false);
function clear() {
}
const updateTableData = (id: string, field: string, value: any) => {
const item = tableData.value.find(item => item.id === id);
if (item) {
item[field] = value;
}
function traverseTableData(data: any[],id: string): void {
data.forEach(item => {
// 处理当前节点的数据
if(item.id === id)
{
for(let i = 1;i<=8;i++)
{
let field1 = "resultType"+i
let field2 = "resultValue"+i
if(getRandomInt(10)>8 && activeIndex.value>2)
{
item[field1] = "danger";
item[field2] = "×";
}
else
{
item[field1] = "success";
item[field2] = "√";
}
}
return;
}
// 如果当前节点有 children，并且 children 是一个数组，则递归遍历
if (Array.isArray(item.children)) {
traverseTableData(item.children,id);
}
});
}
const updateTableData = (id: string) => {
traverseTableData(tableData.value,id);
console.log(id)
};
let timer: any = ref("");
const handlePauseTest = () => {
timer.value = setInterval(() => {
currentIdx.value++;
updateTableData(currentIdx.value.toString(),"resultType1","success")
updateTableData(currentIdx.value.toString(),"resultValue1","√")
tableKey.value ++;
if (percentage.value < 100) {
percentage.value = Math.trunc(currentIdx.value/12 * 100);
} else {
clearInterval(timer.value)
clear();
ElMessageBox.confirm(
'检测全部结束,你可以停留在此页面查看检测结果，或返回首页进行复检、报告生成和归档等操作',
'检测完成',
{
confirmButtonText: '确定',
type: 'success',
})
}
}, 5000);
return;
if (!isPause.value) {
pauseTimer()
} else {
resumeTimer()
}
isPause.value = !isPause.value;
};
@@ -984,18 +1062,6 @@ const tableData = ref([
resultValue8:'-',
},
])
// const selectRow = (id: number) => {
// console.log(id);
// const row = tableData.find(item => item.id === id);
// console.log(row);
// if (row) {
// currentRow.value = row ;
// }
// };
// selectRow(2)
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
@@ -1007,6 +1073,96 @@ const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process
})
const testStatus = toRef(props, 'testStatus');
const ts = ref('');
const startTimer = () => {
//if (timer.value !== null) return; // 如果定时器已经启动，则不再重复启动
timer.value = setInterval(() => {
if(activeIndex.value <= activeTotalNum.value)
{
activeIndex.value++;
updateLog()
switch(activeIndex.value)
{
case 1:
updateTableData("1-1-1")
updateTableData("1-1-2")
updateTableData("1-1-3")
updateTableData("1-1-4")
updateTableData("1-1")
updateTableData("1-2-1")
updateTableData("1-2")
updateTableData("1-3-1")
updateTableData("1-3")
updateTableData("1")
break;
case 2:
updateTableData("2-1-1")
updateTableData("2-1-2")
updateTableData("2-1-3")
updateTableData("2-1-4")
updateTableData("2-1-5")
updateTableData("2-1")
updateTableData("2-2-1")
updateTableData("2-2")
updateTableData("2-3-1")
updateTableData("2-3")
updateTableData("2")
break;
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 10:
case 11:
case 12:
updateTableData(activeIndex.value.toString())
break;
}
if (percentage.value < 100) {
percentage.value = Math.trunc(activeIndex.value/activeTotalNum.value * 100);
} else {
percentage.value = 100;
clearInterval(timer)
ts.value = 'success'
ElMessageBox.alert('检测全部结束,你可以停留在此页面查看检测结果，或返回首页进行复检、报告生成和归档等操作', '检测完成', {
// if you want to disable its autofocus
// autofocus: false,
confirmButtonText: '确定',
})
clear();
}
}
else
{
clearInterval(timer)
ts.value = 'success'
}
}, 2000);
};
const pauseTimer = () => {
if (timer.value !== null) {
clearInterval(timer.value);
timer.value = null;
}
};
const resumeTimer = () => {
if (timer.value === null) {
startTimer();
}
};
//监听goods_sn的变化
watch(testStatus, function (newValue, oldValue) {
ts.value = props.testStatus;
@@ -1014,21 +1170,7 @@ watch(testStatus, function (newValue, oldValue) {
{
ts.value = 'process'
let timer = setInterval(() => {
if(activeIndex.value < activeTotalNum.value - 2)
activeIndex.value++
else if(activeIndex.value === activeTotalNum.value -2)
{
activeIndex.value++
activeIndex.value++
}
else
{
clearInterval(timer)
ts.value = 'success'
}
}, 1000);
startTimer()
}
})
@@ -1040,18 +1182,16 @@ watch(ts, function (newValue, oldValue) {
})
</script>
<style scoped>
<style scoped lang="scss">
.el-table .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}
/* .table-first-column{
min-width: 250px !important;
text-align: left !important;
} */
.dialog{
:deep(.dialog){
height: 900px !important;
display: flex;
flex-direction: column;
}
@@ -1064,4 +1204,12 @@ watch(ts, function (newValue, oldValue) {
margin-bottom:10px;
}
.dialog-log{
max-height: 50px;
overflow-y: auto;
// flex-grow: 1;
// display: flex;
// flex-direction: column-reverse;
}
</style>