From f29900986f01cf5d39b5755cec674825cef27961 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 19 十一月 2024 19:25:41 +0800
Subject: [PATCH] update
---
src/views/mdc/processParam/TimeLine.vue | 111 ++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 84 insertions(+), 27 deletions(-)
diff --git a/src/views/mdc/processParam/TimeLine.vue b/src/views/mdc/processParam/TimeLine.vue
index 17217a6..b6d6611 100644
--- a/src/views/mdc/processParam/TimeLine.vue
+++ b/src/views/mdc/processParam/TimeLine.vue
@@ -1,30 +1,34 @@
<!--
* @Date: 2024-04-23 20:03:41
* @LastEditors: Sneed
- * @LastEditTime: 2024-04-23 22:32:52
+ * @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>
+ <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-current" :style="{ width: 100 / lines.length + '%' }"></div>
- <div class="timeline-box-hover"></div>
<div class="timeline-box-item" v-for="item in dateList" :key="item.startTime" :style="{
width: item.width + '%',
- background: item.color
+ background: item.color,
+ left: item.left + '%'
}">
{{ 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 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>
@@ -35,10 +39,11 @@
export default {
data() {
return {
- step: 1,
+ step: 2,
params: {},
dateList: [],
- lines: []
+ lines: [],
+ active: 0,
}
},
watch: {
@@ -48,13 +53,24 @@
},
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 = []
@@ -62,16 +78,20 @@
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++) {
+ let currentDate = min.format('MM-DD')
this.lines.push({
- title: `${i * this.step}:00`
+ 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/blade-mdc/process-parameter/all-shift-time', {
+ this.$HTTP.post('/api/mdc/process-parameter/all-shift-time', {
...data
}).then(res => {
if (res.code == 200) {
@@ -80,12 +100,14 @@
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 => {
+ }).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)) {
@@ -94,6 +116,8 @@
...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 {
@@ -102,12 +126,13 @@
...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)
}
}
})
- console.log(this.dateList, '>>>>>>')
}
})
}
@@ -118,38 +143,70 @@
<style lang="scss" scoped>
.timeline-box {
height: 20px;
- display: flex;
+ // display: flex;
position: relative;
+ background: #d8e8e8;
&-item {
+ position: absolute;
+ height: 22px;
+ line-height: 22px;
text-align: center;
- flex: 0 0 auto;
}
- .timeline-box-current,
- .timeline-box-hover {
- height: 20px;
- position: absolute;
- left: 0;
- z-index: 1;
- border: 1px solid red;
- }
}
.timeline-line {
display: flex;
- height: 20px;
+ height: 50px;
+ position: relative;
+ top: -20px;
+ width: 100%;
&-item {
flex: 1 1 auto;
- padding: 0 3px;
+ 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;
--
Gitblit v1.9.3