From c709cfdf23c65038ce811ea7c1b1fe1850d02969 Mon Sep 17 00:00:00 2001
From: lzhe <181968431@qq.com>
Date: 星期二, 23 四月 2024 23:05:48 +0800
Subject: [PATCH] Merge branch 'master' of http://www.beijingsoft.cn:9090/r/smart-web
---
src/views/mdc/processParam/TimeLine.vue | 167 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 167 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/processParam/TimeLine.vue b/src/views/mdc/processParam/TimeLine.vue
new file mode 100644
index 0000000..17217a6
--- /dev/null
+++ b/src/views/mdc/processParam/TimeLine.vue
@@ -0,0 +1,167 @@
+<!--
+ * @Date: 2024-04-23 20:03:41
+ * @LastEditors: Sneed
+ * @LastEditTime: 2024-04-23 22:32:52
+ * @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-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
+ }">
+ {{ 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;
+ position: relative;
+
+ &-item {
+ 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;
+
+ &-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>
\ No newline at end of file
--
Gitblit v1.9.3