<!--
|
* @Date: 2024-04-23 20:03:41
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-06-18 23:16:52
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/TimeLine.vue
|
-->
|
<template>
|
<el-main style="padding: 0 30px;">
|
<el-row>
|
<el-col :span="1">
|
<el-slider v-model="step" :min="1" :max="4" :step="1" show-stops />
|
</el-col>
|
</el-row>
|
<div class="timeline-box">
|
<div class="timeline-box-item" v-for="item in dateList" :key="item.startTime" :style="{
|
width: item.width + '%',
|
background: item.color,
|
left: item.left + '%'
|
}">
|
{{ item.shiftName }}
|
</div>
|
</div>
|
<div class="timeline-line">
|
<div class="timeline-line-item" @click="changeActive(index)" :class="{
|
last: lines.length - 1 === index,
|
active: index === active
|
}" v-for="(item, index) in lines" :key="index">
|
<div class="title">{{ item.title }}</div>
|
<div class="date">
|
<p>{{ item.date }}</p>
|
</div>
|
</div>
|
</div>
|
</el-main>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
export default {
|
data() {
|
return {
|
step: 2,
|
params: {},
|
dateList: [],
|
lines: [],
|
active: 0,
|
}
|
},
|
watch: {
|
step() {
|
this.setLines()
|
}
|
},
|
methods: {
|
init(params) {
|
this.active = 0
|
this.params = params
|
this.queryTime(params)
|
this.setLines()
|
},
|
changeActive(index) {
|
this.active = index
|
this.$emit('update:modelValue', this.lines[index])
|
},
|
getColor(v) {
|
if (v.shiftIndex === 1) return { color: 'rgb(211, 174, 248)' }
|
return { color: 'rgb(233, 241, 208)' }
|
},
|
setDate(v) {
|
if (moment(v.startTime).format('HH:mm:ss') === '00:00:00') return {
|
dateTitle: moment(v.startTime).format('MM-DD')
|
}
|
return {}
|
},
|
setLines() {
|
this.lines = []
|
let min = moment(`${this.params.dates[0]} 00:00:00`, 'YYYY-MM-DD HH:mm:ss')
|
let max = moment(`${this.params.dates[1]} 24:00:00`, 'YYYY-MM-DD HH:mm:ss')
|
let total = max.diff(min)
|
let lineNum = total / (this.step * 60 * 60 * 1000)
|
for (let i = 0; i < lineNum; i++) {
|
let currentDate = min.format('MM-DD')
|
this.lines.push({
|
date: min.format('HH:mm').endsWith('00:00') ? min.format('MM-DD') : '',
|
title: min.format('HH:mm'),
|
startTime: min.format('YYYY-MM-DD HH:mm:ss'),
|
endTime: min.add(this.step, 'h').format('YYYY-MM-DD HH:mm:ss')
|
})
|
this.changeActive(0)
|
}
|
},
|
queryTime(data) {
|
if (!data.workstationId) return
|
this.$HTTP.post('/api/mdc/process-parameter/all-shift-time', {
|
...data
|
}).then(res => {
|
if (res.code == 200) {
|
let min = moment(`${this.params.dates[0]} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
|
let max = moment(`${this.params.dates[1]} 24:00:00`, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
|
let full = moment(`${this.params.dates[0]} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').diff(moment(`${this.params.dates[1]} 24:00:00`, 'YYYY-MM-DD HH:mm:ss'))
|
this.dateList = res.data.filter(v => {
|
return moment(v.startTime).isBetween(min, max) || moment(v.endTime).isBetween(min, max)
|
}).map((v, i) => {
|
if (moment(v.startTime).isBetween(min, max) && moment(v.endTime).isBetween(min, max)) {
|
let current = moment(v.startTime, 'YYYY-MM-DD HH:mm:ss').diff(moment(v.endTime, 'YYYY-MM-DD HH:mm:ss'))
|
return {
|
...v,
|
left: moment(min, 'YYYY-MM-DD HH:mm:ss').diff(moment(v.startTime, 'YYYY-MM-DD HH:mm:ss')) / full * 100,
|
...this.getColor(v),
|
...this.setDate(v),
|
width: (current / full * 100).toFixed(2)
|
}
|
} else if (moment(v.startTime).isBetween(min, max)) {
|
let current = moment(v.startTime, 'YYYY-MM-DD HH:mm:ss').diff(moment(max, 'YYYY-MM-DD HH:mm:ss'))
|
return {
|
...v,
|
...this.getColor(v),
|
endTime: max,
|
...this.setDate(v),
|
left: moment(min, 'YYYY-MM-DD HH:mm:ss').diff(moment(v.startTime, 'YYYY-MM-DD HH:mm:ss')) / full * 100,
|
width: (current / full * 100).toFixed(2)
|
}
|
} else {
|
let current = moment(min, 'YYYY-MM-DD HH:mm:ss').diff(moment(v.endTime, 'YYYY-MM-DD HH:mm:ss'))
|
return {
|
...v,
|
...this.getColor(v),
|
startTime: min,
|
...this.setDate(v),
|
left: moment(min, 'YYYY-MM-DD HH:mm:ss').diff(moment(min, 'YYYY-MM-DD HH:mm:ss')) / full * 100,
|
width: (current / full * 100).toFixed(2)
|
}
|
}
|
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.timeline-box {
|
height: 20px;
|
// display: flex;
|
position: relative;
|
background: #d8e8e8;
|
|
&-item {
|
position: absolute;
|
height: 22px;
|
line-height: 22px;
|
text-align: center;
|
}
|
|
}
|
|
.timeline-line {
|
display: flex;
|
height: 50px;
|
position: relative;
|
top: -20px;
|
width: 100%;
|
|
&-item {
|
flex: 1 1 auto;
|
height: 20px;
|
padding: 20px 3px 0;
|
position: relative;
|
box-sizing: border-box;
|
|
border: 1px solid transparent;
|
|
&>div.title {
|
position: absolute;
|
z-index: 9;
|
top: 15px;
|
left: 0;
|
transform: rotate(-45deg) translateX(-50%);
|
}
|
|
&>div.date {
|
position: absolute;
|
z-index: 9;
|
top: 50px;
|
left: 0;
|
transform: translateX(-50%);
|
|
p {
|
white-space: pre;
|
}
|
}
|
|
&:hover,
|
&.active {
|
height: 18px;
|
box-sizing: border-box;
|
border: 1px solid red;
|
}
|
}
|
|
|
|
&-item::before {
|
content: "";
|
position: absolute;
|
left: 0;
|
top: 20px;
|
width: 1px;
|
height: 10px;
|
background: #ccc;
|
}
|
|
&-item.last::after {
|
content: "";
|
position: absolute;
|
right: 0;
|
width: 1px;
|
height: 10px;
|
background: #ccc;
|
}
|
}
|
</style>
|
