From 7243d05010bde40a8c82b7cbbf904eeb35168cdd Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 23 四月 2024 23:09:57 +0800
Subject: [PATCH] update
---
src/views/mdc/processParam/TimeLine.vue | 43 ++++++++++++++++++++++++++-----------------
1 files changed, 26 insertions(+), 17 deletions(-)
diff --git a/src/views/mdc/processParam/TimeLine.vue b/src/views/mdc/processParam/TimeLine.vue
index 17217a6..85b34ab 100644
--- a/src/views/mdc/processParam/TimeLine.vue
+++ b/src/views/mdc/processParam/TimeLine.vue
@@ -1,7 +1,7 @@
<!--
* @Date: 2024-04-23 20:03:41
* @LastEditors: Sneed
- * @LastEditTime: 2024-04-23 22:32:52
+ * @LastEditTime: 2024-04-23 23:03:45
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/TimeLine.vue
-->
<template>
@@ -12,8 +12,6 @@
</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
@@ -22,9 +20,11 @@
</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">
+ <!-- {{ item.title }} -->
</div>
</div>
</el-main>
@@ -38,7 +38,8 @@
step: 1,
params: {},
dateList: [],
- lines: []
+ lines: [],
+ active: 0,
}
},
watch: {
@@ -48,9 +49,13 @@
},
methods: {
init(params) {
+ this.active = 0
this.params = params
this.queryTime(params)
this.setLines()
+ },
+ changeActive(index) {
+ this.active = index
},
getColor(v) {
if (v.shiftIndex === 1) return { color: 'rgb(211, 174, 248)' }
@@ -63,11 +68,16 @@
let total = max.diff(min)
let lineNum = total / (this.step * 60 * 60 * 1000)
console.log(total, lineNum)
+ let date = ''
for (let i = 0; i < lineNum; i++) {
+ let currentDate = min.add(this.step, 'h').format('YYYY-MM-DD')
this.lines.push({
- title: `${i * this.step}:00`
+ date: currentDate === date ? '' : currentDate,
+ title: min.format('HH:mm')
})
+ date = currentDate
}
+ console.log(this.lines, '>>>>>>.1')
},
queryTime(data) {
if (!data.workstationId) return
@@ -126,26 +136,25 @@
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;
+ position: relative;
+ top: -20px;
&-item {
flex: 1 1 auto;
- padding: 0 3px;
+ padding: 20px 3px 0;
position: relative;
}
+ .timeline-line-item:hover,
+ .timeline-line-item.active {
+ border: 1px solid red;
+ }
+
&-item::before {
content: "";
position: absolute;
--
Gitblit v1.9.3