smart-web.git - Gitblit

			@@ -1,11 +1,11 @@
			<!--
			* @Date: 2024-04-23 20:03:41
			* @LastEditors: Sneed
			* @LastEditTime: 2024-04-23 22:20:35
			* @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 />
			@@ -14,15 +14,21 @@
			<div class="timeline-box">
			<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>
			@@ -33,10 +39,11 @@
			export default {
			data() {
			return {
			step: 1,
			step: 2,
			params: {},
			dateList: [],
			lines: []
			lines: [],
			active: 0,
			}
			},
			watch: {
			@@ -46,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 = []
			@@ -60,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) {
			@@ -78,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)) {
			@@ -92,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 {
			@@ -100,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, '>>>>>>')
			}
			})
			}
			@@ -116,28 +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-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;