<template>
|
<el-popover
|
placement="bottom"
|
trigger="hover"
|
>
|
<div
|
slot="reference"
|
class="plan"
|
:style="{'marginTop':0.1*cellHeight+'px'}"
|
|
@click="onClick"
|
>
|
<!-- ,background: backgroundPercent-->
|
<!-- <div class="runTime">
|
<span>S:{{startToString}}</span>
|
<span>E:{{endToString}}</span>
|
</div> -->
|
<div
|
:class="{'hw':true,'SCHEDULEING' : item.type == 'schedule','H_SCHEDULE':item.type=='h_schedule','BM_SCHEDULE':item.type=='bm_schedule'}"
|
>
|
<span v-show="item.type == 'schedule'">{{ item.number }}</span>
|
<span v-show="item.type == 'h_schedule'">{{ item.number }}</span>
|
</div>
|
<!-- <div class="passenger"></div> -->
|
|
</div>
|
|
<div class="detail">
|
<!-- <span>{{data.name}}</span> -->
|
<ul v-if="item.type =='h_schedule' || item.type =='schedule'">
|
|
<li>
|
<span>工单编号：</span><span>{{ item.work_order }}</span>
|
</li>
|
<li>
|
<span>产品名称：</span><span>{{ item.cl_name }}</span>
|
</li>
|
<li>
|
<span>产品编码：</span><span>{{ item.cl_code }}</span>
|
</li>
|
<li>
|
<span>生产数量：</span><span>{{ item.number }} {{ item.AdvaScheUom }}</span>
|
</li>
|
<li>
|
<span>生产设备：</span><span>{{ item.id }}</span>
|
</li>
|
<li>
|
<span>开始时间：</span><span>{{ item.start }}</span>
|
</li>
|
<li>
|
<span>结束时间：</span><span>{{ item.end }}</span>
|
</li>
|
|
</ul>
|
<ul v-if="item.type =='capacity'">
|
<!-- <li>
|
<span>产品：</span><span>{{item.cl_name}}</span>
|
</li>
|
<li>
|
<span>数量：</span><span>{{item.number}}个</span>
|
</li> -->
|
<li>
|
<span>生产设备：</span><span>{{ item.id }}</span>
|
</li>
|
<li>
|
<span>开始时间：</span><span>{{ item.start }}</span>
|
</li>
|
<li>
|
<span>结束时间：</span><span>{{ item.end }}</span>
|
</li>
|
|
</ul>
|
<!-- <ul v-if="item.type =='bm_schedule'">-->
|
<!-- <li>-->
|
<!-- <span>维修时间：</span><span>{{ item.start }} ~ {{ item.end }}</span>-->
|
<!-- </li>-->
|
<!-- </ul>-->
|
</div>
|
</el-popover>
|
</template>
|
|
<script>
|
import dayjs from 'dayjs'
|
import { handleDatetime2 } from '@/utils/global'
|
|
const NOW_PLAN = '#D5F8EA'
|
const FUTHER_PLAN = '#BFF2FE'
|
const PAST_PLAN = '#F2F2F2'
|
const CAPACITY = '#d1efed'
|
const H_SCHEDULE = '#ffc000'
|
const SCHEDULEING = '#14b6e7'
|
const BM_SCHEDULE = 'FFFF33'
|
export default {
|
name: 'Test',
|
props: {
|
data: Object,
|
item: Object,
|
currentTime: dayjs,
|
updateTimeLines: Function,
|
cellHeight: Number,
|
startTimeOfRenderArea: Number
|
},
|
data() {
|
return {
|
dayjs: dayjs
|
|
}
|
},
|
computed: {
|
backgroundPercent() {
|
// console.log(JSON.stringify(this.item), 9)
|
// this.item.forEach(item => {
|
//
|
// })
|
// `linear-gradient(to right,rgba(5, 185, 100, 0.1) 0%,rgba(5, 185, 100, 0.1) 4.99%,rgba(167, 167, 167, 0.3) 5%,rgba(167, 167, 167, 0.3) `+ percentCenter +`%,rgba(5, 185, 100, 0.1) `+(percentCenter+0.01)+`%,rgba(5, 185, 100, 0.1) 100%)`}
|
// const molecule = (new Date(handleDatetime2(new Date())).getTime() - new Date(this.item.start).getTime()) / 1000 // 分子
|
// const denominator = (new Date(this.item.end).getTime() - new Date(this.item.start).getTime()) / 1000 // 分母
|
// let percentCenter = ((molecule * 1 / denominator * 1) * 100).toFixed(2) * 1
|
// if (percentCenter < 0) {
|
// percentCenter = 0
|
// }
|
// return percentCenter
|
|
return `linear-gradient(to right,rgba(167, 167, 167, 0.3) 0%,rgba(167, 167, 167, 0.3) 50%,rgba(5, 185, 100, 0.1) 51%,rgba(5, 185, 100, 0.1) 100%)`
|
},
|
// statusColor() {
|
// const { item, currentTime } = this
|
// const start = dayjs(item.start)
|
// const end = dayjs(item.end)
|
// if(item.type == 'capacity'){
|
// return CAPACITY
|
// }else if(item.type == 'h_schedule'){
|
// return H_SCHEDULE
|
// }else if(item.type == 'schedule'){
|
// return SCHEDULEING
|
// }
|
// if (start.isBefore(currentTime) && end.isAfter(currentTime)) {
|
// return NOW_PLAN; // NOW
|
// } else if (end.isBefore(currentTime)) {
|
// return PAST_PLAN; // PAST
|
// } else {
|
// return FUTHER_PLAN; // Future
|
// }
|
// },
|
startToString() {
|
return dayjs(this.item.start).format('HH:mm')
|
},
|
endToString() {
|
return dayjs(this.item.end).format('HH:mm')
|
}
|
},
|
|
methods: {
|
onClick() {
|
this.updateTimeLines(this.item.start, this.item.end)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.hw {
|
height: 100%;
|
width: 100%;
|
position: relative;
|
z-index: 0;
|
// background:rgba(171, 245, 240 , 0.6);
|
|
background: rgba(5, 185, 100, 0.1);
|
|
//background: linear-gradient(to right, rgba(167, 167, 167, 0.3) 0%,rgba(167, 167, 167, 0.3) 20%,rgba(5, 185, 100, 0.1) 21%,rgba(5, 185, 100, 0.1) 100%);
|
text-align: center;
|
border-radius: 5px;
|
|
}
|
|
.middle {
|
flex: 1;
|
text-align: center;
|
padding-left: 5px;
|
}
|
|
.runTime {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.plan {
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
height: 80%;
|
// border: 1px solid #f0f0f0;
|
border-radius: 5px;
|
color: #333333;
|
// padding-left: 5px;
|
font-size: 0.8rem;
|
// opacity: 0.8;
|
}
|
|
.capacity {
|
background: rgb(209, 239, 237) !important
|
|
}
|
|
.detail {
|
.header {
|
text-align: center;
|
font-size: 1rem;
|
}
|
}
|
|
.detail ul {
|
list-style: none;
|
padding: 0px;
|
|
li {
|
span {
|
// display: inline-block;
|
width: 135px;
|
color: #777;
|
font-size: 0.8rem;
|
}
|
|
span:first-child {
|
text-align: center;
|
}
|
|
span:last-child {
|
}
|
}
|
}
|
|
.CAPACITY {
|
background: rgba(171, 245, 240, 0.6)
|
}
|
|
.H_SCHEDULE {
|
background: #05b964;
|
height: 70%;
|
margin-left: 3px;
|
border-radius: 5px;
|
position: relative;
|
z-index: 2;
|
color: whitesmoke;
|
font-size: 12px;
|
line-height: 1.5
|
}
|
|
.SCHEDULEING {
|
background: #ac96ff;
|
height: 70%;
|
margin-left: 3px;
|
border-radius: 5px;
|
position: relative;
|
z-index: 2;
|
color: whitesmoke;
|
font-size: 12px;
|
line-height: 1.5
|
}
|
|
.BM_SCHEDULE {
|
background: #FFFF33;
|
height: 70%;
|
margin-left: 3px;
|
border-radius: 5px;
|
position: relative;
|
z-index: 2;
|
color: whitesmoke;
|
font-size: 12px;
|
line-height: 1.5
|
}
|
</style>
|
