<template>
|
<div id="ProcessBar" class="pB_Container" @mouseenter="delayedOpen" @mouseleave="delayedClose">
|
<div class="first" :style="error">
|
<!-- {{ getProcessDesc(processValue[0]) }} -->
|
</div>
|
<div class="second" :style="cancel">
|
<!-- {{ getProcessDesc(processValue[1]) }} -->
|
</div>
|
<div class="third" :style="success">
|
<!-- {{ getProcessDesc(processValue[2]) }} -->
|
</div>
|
<!-- <div class="last" :style="notDone">
|
{{ getProcessDesc(processValue[3]) }}
|
</div> -->
|
<!-- 弹窗元素 -->
|
<div v-if="isPopupVisible" @mouseenter="clearCloseTimeout" @mouseleave="delayedClose" class="popup">
|
<span>
|
东位移: {{ processValueyuan[0] }}
|
</span>
|
<span style="margin-left: 5px;">
|
北位移: {{ processValueyuan[1] }}
|
</span>
|
<span style="margin-left: 5px;">
|
天位移: {{ processValueyuan[2] }}
|
</span>
|
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "ProcessBar",
|
props: {
|
processValue: {
|
type: Array,
|
default: [0],
|
},
|
processValueyuan: {
|
type: Array,
|
default: [0],
|
},
|
},
|
data() {
|
return {
|
isPopupVisible: false,
|
closeTimeout: null,
|
error: {
|
width: this.processValue[0] + "%",
|
},
|
cancel: {
|
width: this.processValue[1] + "%",
|
},
|
success: {
|
width: this.processValue[2] + "%",
|
},
|
// notDone: {
|
// width: this.processValue[3] + "%",
|
// },
|
};
|
},
|
components: {},
|
methods: {
|
delayedOpen() {
|
this.clearCloseTimeout();
|
this.isPopupVisible = true;
|
},
|
delayedClose() {
|
// 设置一个延时，给用户时间移动到弹窗上
|
this.closeTimeout = setTimeout(() => {
|
this.isPopupVisible = false;
|
}, 300); // 延时300毫秒关闭
|
},
|
clearCloseTimeout() {
|
// 清除已设定的延时关闭，防止弹窗意外关闭
|
if (this.closeTimeout) {
|
clearTimeout(this.closeTimeout);
|
this.closeTimeout = null;
|
}
|
},
|
|
getProcessDesc(data) {
|
return data == 0 ? " " : data + "%";
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.popup {
|
position: absolute;
|
width: 70%;
|
height: 26px;
|
background-color: rgb(14, 27, 71);
|
}
|
|
.pB_Container {
|
|
width: 70%;
|
height: 13px;
|
display: inline-flex;
|
line-height: 13px;
|
|
|
|
margin-left: 50px;
|
margin-top: 25px;
|
}
|
|
.first {
|
background-color: rgb(41, 122, 244);
|
|
}
|
|
.second {
|
background-color: rgb(6, 75, 193);
|
|
}
|
|
.third {
|
background-color: rgb(7, 190, 247);
|
|
}
|
</style>
|
