<!--
|
* @Date: 2024-04-23 20:03:41
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-04-23 22:20:35
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/TimeLine.vue
|
-->
|
<template>
|
<el-main>
|
<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
|
}">
|
{{ item.shiftName }}
|
</div>
|
</div>
|
<div class="timeline-line">
|
<div class="timeline-line-item" :class="lines.length - 1 === index ? 'last' : ''"
|
v-for="(item, index) in lines" :key="index">
|
{{ item.title }}
|
</div>
|
</div>
|
</el-main>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
export default {
|
data() {
|
return {
|
step: 1,
|
params: {},
|
dateList: [],
|
lines: []
|
}
|
},
|
watch: {
|
step() {
|
this.setLines()
|
}
|
},
|
methods: {
|
init(params) {
|
this.params = params
|
this.queryTime(params)
|
this.setLines()
|
},
|
getColor(v) {
|
if (v.shiftIndex === 1) return { color: 'rgb(211, 174, 248)' }
|
return { color: 'rgb(233, 241, 208)' }
|
},
|
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)
|
console.log(total, lineNum)
|
for (let i = 0; i < lineNum; i++) {
|
this.lines.push({
|
title: `${i * this.step}:00`
|
})
|
}
|
},
|
queryTime(data) {
|
if (!data.workstationId) return
|
this.$HTTP.post('/api/blade-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 => {
|
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,
|
...this.getColor(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,
|
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,
|
width: (current / full * 100).toFixed(2)
|
}
|
}
|
|
})
|
console.log(this.dateList, '>>>>>>')
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.timeline-box {
|
height: 20px;
|
display: flex;
|
|
&-item {
|
text-align: center;
|
flex: 0 0 auto;
|
}
|
}
|
|
.timeline-line {
|
display: flex;
|
height: 20px;
|
|
&-item {
|
flex: 1 1 auto;
|
padding: 0 3px;
|
position: relative;
|
}
|
|
&-item::before {
|
content: "";
|
position: absolute;
|
left: 0;
|
width: 1px;
|
height: 10px;
|
background: #ccc;
|
}
|
|
&-item.last::after {
|
content: "";
|
position: absolute;
|
right: 0;
|
width: 1px;
|
height: 10px;
|
background: #ccc;
|
}
|
}
|
</style>
|
