根据时间长短绘制色块宽度和颜色### 目标效果：
代码：
根据时间长短绘制色块宽度和颜色：:style="getListStyle(car)"
鼠标hover显示具体信息：display:none;——>.car:hover{display:block;}
<template>
<div class="account">
<div class="query">
<div class="center-between">
<div class="center-left">
<el-form-item label="日期">
<el-date-picker v-model="date" type="date" placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="值次">
<el-select v-model="shift" placeholder="请选择" :options="shiftList"></el-select>
</el-form-item>
<el-form-item label="受入侧">
<el-select v-model="areaCode" placeholder="请选择" multiple :options="areaCodeList"></el-select>
</el-form-item>
</div>
<div class="center-right">
<el-button class="btn" type="primary" @click="handleqQuery()">查询</el-button>
<el-button class="btn" type="info" plain @click="handleqReset()"> 重置</el-button>
</div>
</div>
</div>
<div class="list">
<!--车位及表格背景渲染-->
<table>
<tr v-for="(e,index) of carList">
<td class="bg-car">{{ e }}</td>
<td v-for="(e,index) of numX"></td>
</tr>
</table>
<!--鼠标hover：车次信息渲染-->
<div class="cars">
<!-- 动态渲染时刻表车次信息：停留时长决定宽度，是否延迟决定颜色 -->
<div class="car" :style="getListStyle(car)" v-for="(car, index) in carValueList">
{{car.srGrpNo}}
<div class="car-tip" :class="getListStyle(car)">
<div class="tip-title" >{{car.srGrpNo}}</div>
<div class="tip-text">
<span>计划：{{car.arriveTime.substr(11)}} </span>
<img src="https://img-blog.csdnimg.cn/a2cec2715a81457b823f385d0a291d00.png"/>
<span> {{car.departureTime.substr(11)}}</span>
</div>
<div v-if="car.actualArriveTime" class="tip-text">
<span>实际：{{car.actualArriveTime? car.actualArriveTime.substr(11) : ''}} </span>
<img src="https://img-blog.csdnimg.cn/a2cec2715a81457b823f385d0a291d00.png"/>
<span> {{car.actualDepartureTime ? car.actualDepartureTime.substr(11) : ''}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
context: Object,
data: {
default: ''
}
},
data() {
return {
carMap: {},
carList: [],
carValueList: [],
top: 10, // 色块top值
isShowTable: false,
date:'',
shift: '', // D-白班，N-夜班)
areaCode: '', // 受入侧4(T侧)
numX: [1,2,3,4,5,6,7,8,9,10,11,12],// 车位背景图渲染12个空列
areaCodeList:[
{
label: 'T侧',
value: '4'
}
],
shiftList: [
{
label: '白班',
value: 'D'
},
{
label: '夜班',
value: 'N'
},
],
timer: '',
}
},
mounted() {
this.$nextTick(() => {
this.initData()
this.onLoop()
})
},
beforeDestroy(){
clearInterval(this.timer)
},
methods: {
handleqQuery(){
// 更新班次
let params ={
areaCode: this.areaCode,
shift: this.shift,
date: this.date,
}
this.getData(params)
},
handleqReset() {
this.areaCode = ''
this.date = ''
this.shift = ''
},
initData(){
let time = new Date();
let t1 = new Date(time.toLocaleDateString() + " 20:30:00")
let diffMinute = time - t1
if(diffMinute >= 0){
this.shift = 'N'
} else {
this.shift = 'D'
}
// 更新班次
this.date = this.formatDate(new Date())
let params = {
areaCode: this.areaCode,
shift: this.shift,
date: this.formatDate(new Date()),
start: 1,
limit: 50,
}
this.getData(params)
},
getData(params){
// 整合返回值转换key为车位
this.carMap = new Map()
this.carList = []
this.carValueList = []
this.top = 0
this.$request.post('your address',params).then(res => {
if (res.data.code == 0 && res.data.data) {
let resData = res.data.data
if(resData.length > 0){
for(let item of resData){
this.carMap.set(item.carCode, item)
}
this.top = 10
// 整合返回值转换key为车位
this.carList = [...this.carMap.keys()]
for(let k = 0; k < this.carList.length; k++){
for(let j = 0; j < resData.length; j++){
if( this.carList[k] == resData[j].carCode){
resData[j].top = 10 + k * 60
this.carValueList.push(resData[j])
}
}
}
console.log('carValueList',this.carValueList)
}
}
})
},
onLoop() {
this.timer = setInterval(this.handleqQuery, 300000)
},
formatDate(val){
let d = new Date(val)
let month = (d.getMonth() +1).toString()
let day = (d.getDate()).toString()
let year = d.getFullYear()
if(month.length < 2) month = '0' + month
if(day.length < 2) day = '0' + day
return [year, month, day].join('-')
},
getListStyle(item) {
// 计算色块宽度
let arriveTime = new Date(item.arriveTime)
let departureTime = new Date(item.departureTime)
let width = (departureTime - arriveTime)/1000/60
// 计算色块开始位置
let start = ''
let t1 = new Date(arriveTime.toLocaleDateString() + " 8:30:00")
let t2 = new Date(arriveTime.toLocaleDateString() + " 20:30:00") // 若时间超过24点则不能用t2做差，此时t2日期已经加一
let t3 = new Date(arriveTime.toLocaleDateString() + " 20:30:00") // 复制t2,避免引用类型联动改变t2
t3.setDate((t3.getDate()-1)) // t2基础上时间减1天
if(this.shift === 'N'){ // 超过20:30
if(arriveTime < t1){
start = (arriveTime - t3)/1000/60
}else {
start = (arriveTime - t2)/1000/60
}
}else{
start = (arriveTime - t1)/1000/60
}
// 计算颜色
let color = ''
switch (item.type){
case '0':
color = '#C6CBD8'
break
case '1':
color = '#67B662'
break
case '2':
color = ' #5AB9ED'
break
case '5':
color = '#E03523'
break
case '3':
color = ' #FFE329'
break
case '4':
color = '#FFE329'
break
}
return `left: ${start*2}px; top: ${item.top}px; width: ${width}px; background-color: ${color};`
}
},
}
</script>
<style>
.account{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
/*=====================================查询部分*/
.account .query{
width: 100%;
height: 13%;
}
.account .center-between{
width: 100%;
height: 100%;
display: flex;
align-items: center;
font-family: MicrosoftYaHei;
font-size: 20px;
color: #2E3B4C;
letter-spacing: 0.71px;
font-weight: 400;
}
.account .center-left{
width: 45%;
padding-left: 2%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.account .center-right{
width: 55%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 3%;
}
.account .btn{
width: 15%;
height: 42%;
border-radius: 8px;
font-size: 20px;
font-weight: 400;
}
/*=====================================车次展示部分*/
.account .list {
width: 100%;
height: 87%;
position: relative;
}
/*空白表格背景*/
.account table{
/*width: 93%;*/
border: 1px solid rgba(181,188,198,0.70);
border-collapse: collapse;
margin: 5% auto;
}
.account table tr{
height: 60px;
}
.account table td {
width: 120px;
border-right: 1px dashed #B5BCC6;
}
.account table tr:nth-child(even)
{
background: #EDEFF2;
}
.account table tr:nth-child(odd)
{
background: #fff;
}
.account .list .bg-car{
background-image: url("https://img-blog.csdnimg.cn/5ca5eabffec2497c9265ec11d117fed2.png");
background-position: center;
background-repeat: no-repeat;
color: white;
font-size: 22px;
text-align: center;
}
/* 彩色车次展示*/
.account .list .cars {
width: 75%;
height: 74%;
position: absolute;
/*background: #EDEFF2;*/
top: 0;
left: 298px;
}
.account .list .car {
position: absolute;
border-radius: 3px;
height: 38px;
}
/*鼠标悬停显示详情*/
.account .car .car-tip{
width: 200px;
height: 100px;
display: none;
background: #FFFFFF;
box-shadow: 0 10px 20px 0 rgba(183,175,175,0.30);
border-radius: 4px;
padding: 15px 10px;
}
.account .car:hover .car-tip{
/* 鼠标经过时展示从none变为block */
display: block;
}
.account .car .car-tip .tip-title{
font-family: MicrosoftYaHei-Bold;
font-size: 16px;
color: #2E3B4C;
letter-spacing: 0;
font-weight: 700;
border-left: 4px solid #3A64E8;
padding-left: 5px;
line-height: 16px;
margin-bottom: 5px;
}
.account .car .car-tip .tip-text{
font-family: MicrosoftYaHei;
font-size: 14px;
color: #2E3B4C;
letter-spacing: 0;
font-weight: 400;
}
</style>