142 lines
3.0 KiB
Vue
142 lines
3.0 KiB
Vue
<template>
|
||
<div class="time">
|
||
<!-- 自定义预检测图表页面 -->
|
||
<div class="time_device" v-for="(item, index) in data" :key="index">
|
||
<p>
|
||
{{ item.name }}
|
||
</p>
|
||
<!-- 按顺序执行 -->
|
||
<div class="device_children" v-for="(vv, vvs) in item.children">
|
||
<div class="item_children" :key="vvs">
|
||
<p>正在进行： {{ vv.name }}</p>
|
||
</div>
|
||
</div>
|
||
<!-- 分割线 -->
|
||
<div class="time_split_line"></div>
|
||
<div class="time_end" v-if="item.children.length == 4">预校验完毕！</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, defineExpose } from "vue";
|
||
import { MoreFilled } from "@element-plus/icons-vue";
|
||
|
||
const activities = [
|
||
{
|
||
content: "Custom icon",
|
||
timestamp: "2018-04-12 20:46",
|
||
size: "large",
|
||
type: "primary",
|
||
icon: MoreFilled,
|
||
},
|
||
{
|
||
content: "Custom color",
|
||
timestamp: "2018-04-03 20:46",
|
||
color: "#0bbd87",
|
||
},
|
||
{
|
||
content: "Custom size",
|
||
timestamp: "2018-04-03 20:46",
|
||
size: "large",
|
||
},
|
||
{
|
||
content: "Custom hollow",
|
||
timestamp: "2018-04-03 20:46",
|
||
type: "primary",
|
||
hollow: true,
|
||
},
|
||
{
|
||
content: "Default node",
|
||
timestamp: "2018-04-03 20:46",
|
||
},
|
||
];
|
||
const data = ref([]);
|
||
const open = (list: any) => {
|
||
data.value = list;
|
||
// console.log(data.value, "99999999");
|
||
};
|
||
|
||
onMounted(() => {
|
||
|
||
});
|
||
defineExpose({ open });
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.time {
|
||
width: 100%;
|
||
height: 100%;
|
||
height: calc(100vh - 260px);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
//设备层
|
||
.time_device {
|
||
flex: none;
|
||
width: 200px;
|
||
min-height: 40px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 20px;
|
||
position: relative;
|
||
background: #fff;
|
||
|
||
//分割线
|
||
.time_split_line {
|
||
width: 2px;
|
||
// min-height: 50px;
|
||
height: 100%;
|
||
background-color: #0a47a1;
|
||
position: absolute;
|
||
left: 49%;
|
||
top: 0;
|
||
z-index: 0;
|
||
}
|
||
> p {
|
||
text-align: center;
|
||
flex: none;
|
||
width: 100px;
|
||
line-height: 30px;
|
||
border: 2px solid blue;
|
||
z-index: 999;
|
||
background: #fff;
|
||
}
|
||
//具体执行情况（按顺序执行）
|
||
.device_children {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
z-index: 999;
|
||
.item_children {
|
||
width: 200px;
|
||
min-height: 120px;
|
||
background: #fff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border: 1px solid green;
|
||
border-radius: 6px;
|
||
z-index: 999;
|
||
p {
|
||
flex: none;
|
||
width: 200px;
|
||
text-align: left;
|
||
z-index: 999;
|
||
}
|
||
}
|
||
}
|
||
.time_end {
|
||
width: 100px;
|
||
line-height: 30px;
|
||
border: 2px solid blue;
|
||
z-index: 999;
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|