自动检测/手动检测页面
This commit is contained in:
zhujiyan
272
frontend/src/views/plan/preTest/index.vue
Normal file
272
frontend/src/views/plan/preTest/index.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<!-- 计划管理-预检测页面 -->
|
||||
<template>
|
||||
<div class="test">
|
||||
<!-- 顶部筛选条件&返回按钮 -->
|
||||
<!-- {{ printText }} -->
|
||||
<div class="test_top">
|
||||
<el-checkbox
|
||||
v-for="(item, index) in detectionOptions"
|
||||
:model-value="item.id"
|
||||
:true-value="item.id"
|
||||
:key="index"
|
||||
style="pointer-events: none"
|
||||
>{{ item.name }}</el-checkbox
|
||||
>
|
||||
<el-button type="primary" @click="handlePreTest">启动预检测</el-button>
|
||||
<el-button type="primary" @click="handleBackDeviceList"
|
||||
>返回设备列表</el-button
|
||||
>
|
||||
<el-button type="primary" @click="handleAutoTest">进入检测流程</el-button>
|
||||
</div>
|
||||
<div class="test_bot">
|
||||
<div class="bot_left">
|
||||
<p v-for="(item, index) in leftDeviceData" :key="index">
|
||||
{{ item.name }}{{ item.status === 0 ? "异常" : "通过" }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="bot_right">
|
||||
<div class="right_top">
|
||||
<p>校验信息</p>
|
||||
</div>
|
||||
<div class="right_container">
|
||||
<div
|
||||
v-for="(item, index) in leftDeviceData"
|
||||
:key="index"
|
||||
class="text_item"
|
||||
>
|
||||
<el-divider content-position="left">{{ item.name }}</el-divider>
|
||||
<Text :text="item.name"></Text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_bot"><p>预检测结束</p></div>
|
||||
<!-- <el-card style="height: 100%">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>校验信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
</div>
|
||||
<template #footer></template>
|
||||
</el-card> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import Text from "./text.vue";
|
||||
const router = useRouter();
|
||||
const printText = ref(""); // 要显示的文字
|
||||
const speed = 100; // 打字速度，单位：毫秒
|
||||
let index = 0;
|
||||
const str = "这是一段文字这是一段文字这是一段\n文字这是一段文字这是一段文字...";
|
||||
const typeWriter = () => {
|
||||
if (index < str.length) {
|
||||
printText.value += str.charAt(index);
|
||||
index++;
|
||||
setTimeout(typeWriter, speed);
|
||||
}
|
||||
if (index == str.length) {
|
||||
printText.value = "";
|
||||
index = 0;
|
||||
}
|
||||
};
|
||||
const handlePrintText = (text: any, val: any) => {
|
||||
if (index < text.length) {
|
||||
leftDeviceData.value[val].name = text.charAt(index);
|
||||
index++;
|
||||
setTimeout(typeWriter, speed);
|
||||
}
|
||||
// if (index == text.length) {
|
||||
// printText.value = "";
|
||||
// index = 0;
|
||||
// }
|
||||
};
|
||||
const leftDeviceData = ref<any>([
|
||||
// {
|
||||
// id: 0,
|
||||
// name: "设备1-预检测",
|
||||
// status: 0,
|
||||
// },
|
||||
// {
|
||||
// id: 1,
|
||||
// name: "设备2-预检测",
|
||||
// status: 1,
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: "设备3-预检测",
|
||||
// status: 1,
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: "设备4-预检测",
|
||||
// status: 0,
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// name: "设备5-预检测",
|
||||
// status: 1,
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// name: "设备6-预检测",
|
||||
// status: 0,
|
||||
// },
|
||||
]);
|
||||
const initLeftDeviceData = () => {
|
||||
leftDeviceData.value.map((item, index) => {
|
||||
// handlePrintText(item.name, index);
|
||||
});
|
||||
};
|
||||
|
||||
//定义与预检测配置数组
|
||||
const detectionOptions = [
|
||||
{
|
||||
id: 0,
|
||||
name: "标准源通讯检测",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "设备通讯检测",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "协议校验",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "数据校对",
|
||||
},
|
||||
];
|
||||
|
||||
//启动预检测
|
||||
let timer: any = null;
|
||||
const handlePreTest = () => {
|
||||
ElMessage.success("启动预检测");
|
||||
let count = 0;
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
count = 0;
|
||||
leftDeviceData.value = [];
|
||||
}
|
||||
if (count == 5) {
|
||||
count = 0;
|
||||
} else {
|
||||
timer = setInterval(async () => {
|
||||
count++;
|
||||
if (count > 5) return;
|
||||
await nextTick(() => {
|
||||
leftDeviceData.value.push({
|
||||
id: count,
|
||||
name: "设备" + count + "预检测",
|
||||
status: count % 2 == 0 ? 0 : 1,
|
||||
});
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
//进入检测流程
|
||||
const handleAutoTest = () => {
|
||||
router.push({
|
||||
path: "/plan/autoTest",
|
||||
});
|
||||
};
|
||||
//返回设备列表
|
||||
const handleBackDeviceList = () => {
|
||||
router.push({
|
||||
path: "/plan/singlePlanList",
|
||||
});
|
||||
};
|
||||
//左侧数据
|
||||
leftDeviceData.value.map((item: any) => {});
|
||||
onMounted(() => {
|
||||
handlePreTest();
|
||||
typeWriter();
|
||||
initLeftDeviceData();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.test {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.test_top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
.el-button {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.test_bot {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
.bot_left {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
p {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.bot_right {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
margin-left: 10px;
|
||||
max-height: calc(100vh - 240px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.right_top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.right_container {
|
||||
flex: 1;
|
||||
border: 2px solid #eee;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
.right_bot {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// .el-card {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// cursor: pointer;
|
||||
// div {
|
||||
// width: 100%;
|
||||
// height: 100px;
|
||||
// border: 2px solid red;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user