按照客户BT的需求,找了一圈没有方便的在vue里实现的按照日/小时切换的,只好自己动手改写了一个来自 Dinert 的插件,实现了按照日/小时的时间自由切换。该写的注释基本上都添加了,方便后续根据自己需要自由添加年或者季度的其他时间轴。
实现的效果,按日时间轴:
按每日小时时间轴:
父组件页面调用方式:
<div class="progresspanel">
<progress-time ref="progesstime" @progresstime="reviceProgessTime"></progress-time>
</div>
收取子组件消息:
reviceProgessTime(msg)
{
console.log("msg="+JSON.stringify(msg));
}
子组件完整代码:
<style scoped>
.progressTime {
height: 50px;
width: 100%;
margin: 0 auto;
display: flex;
/* background-color: rgba(0, 0, 0, 0.7); */
background: transparent;
min-width: 500px;
border-radius: 3px;
user-select: none;
}
.progressTime .progressTime-left {
width: 48px;
height: 100%;
display: flex;
flex-direction: column;
}
.progressTime .progressTime-left .progressTime-left-t {
height: 18px;
background-color: transparent;
position: relative;
}
.progressTime .progressTime-left .progressTime-left-t .progressTime-left-now {
height: 18px;
line-height: 18px;
width: 80%;
position: absolute;
top: 2px;
right: 10%;
bottom: 0;
left: 10%;
margin: auto;
border-radius: 5px;
background-color: #18b9ff;
text-align: center;
font-size: 12px;
color: #fff;
cursor: pointer;
}
.progressTime
.progressTime-left
.progressTime-left-t
.progressTime-left-now:hover {
background-color: #40cae2;
}
.progressTime .progressTime-left .progressTime-left-b {
flex: 1;
position: relative;
}
.progressTime
.progressTime-left
.progressTime-left-b
.progressTime-left-b-start {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border: 6px solid;
border-color: #fff #fff transparent transparent;
transform: rotate(45deg);
margin-left: -9px;
margin-top: -6px;
cursor: pointer;
}
.progressTime
.progressTime-left
.progressTime-left-b
.progressTime-left-b-start.stop {
width: 16px;
height: 12px;
border: none;
transform: rotate(0deg);
cursor: pointer;
}
.progressTime
.progressTime-left
.progressTime-left-b
.progressTime-left-b-start.stop::before {
content: "";
position: absolute;
width: 4px;
height: 12px;
margin-left: -4px;
background-color: #fff;
}
.progressTime
.progressTime-left
.progressTime-left-b
.progressTime-left-b-start.stop::after {
content: "";
position: absolute;
width: 4px;
height: 12px;
background-color: #fff;
margin-left: 3px;
}
.progressTime-center {
flex: 1;
display: flex;
flex-direction: column;
}
.progressTime-center .progressTime-center-t {
height: 8px;
background-color: rgba(255, 255, 255, 0.7);
box-sizing: border-box;
cursor: pointer;
position: relative;
}
.progressTime-center .progressTime-center-t .progressTime-center-t-bar {
background-image: linear-gradient(
to right,
rgba(37, 208, 150, 1),
rgba(45, 182, 205, 1)
);
height: 100%;
}
.progressTime-center .progressTime-center-t .progressTime-center-t-tooltip,
.progressTime-center .progressTime-center-t .progressTime-center-t-tooltipTemp {
position: absolute;
padding: 0 8px;
height: 24px;
line-height: 24px;
top: -35px;
text-align: center;
font-size: 14px;
color: #fff;
background-color: gray;
border-radius: 3px;
transform: translateX(-50%);
min-width: 20px;
white-space: nowrap;
}
.progressTime-center
.progressTime-center-t
.progressTime-center-t-tooltip::after,
.progressTime-cente