From 88dc89d715828ae485cd00772c0c690b58a7b650 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 23 四月 2024 22:22:17 +0800
Subject: [PATCH] 编辑时间轴组件
---
src/views/mdc/components/Shift.vue | 8
src/views/mdc/processParam/index.vue | 75 +++++++++++++-
src/views/mdc/components/Time.vue | 4
src/views/mdc/processParam/TimeLine.vue | 155 +++++++++++++++++++++++++++++++
src/views/mdc/components/ShiftAlarm.vue | 6
5 files changed, 231 insertions(+), 17 deletions(-)
diff --git a/src/views/mdc/components/Shift.vue b/src/views/mdc/components/Shift.vue
index e365d7a..630353b 100644
--- a/src/views/mdc/components/Shift.vue
+++ b/src/views/mdc/components/Shift.vue
@@ -1,15 +1,15 @@
<!--
* @Date: 2024-04-18 21:52:18
* @LastEditors: Sneed
- * @LastEditTime: 2024-04-20 21:04:39
+ * @LastEditTime: 2024-04-23 19:45:06
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/Shift.vue
-->
<template>
<el-row>
<el-col>
<el-button-group>
- <el-button @click="btnListActive = item.id" :type="btnListActive == item.id ? 'primary' : ''"
- v-for="item in btnList" :key="item.id">{{
+ <el-button size="small" @click="btnListActive = item.id"
+ :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id">{{
item.title }}</el-button>
</el-button-group>
</el-col>
@@ -171,7 +171,7 @@
}
option2.dataset.source = [['product', '鐝1', '鐝2']]
res.data.items.records.forEach(v => {
- option2.dataset.source.push([v.workstationName, v.data[1] === '-' ? 0 : v.data[1], v.data[2] === '-' ? 0 : v.data[1]])
+ option2.dataset.source.push([v.workstationName, v.data[1] === '-' ? 0 : v.data[1], v.data[2] === '-' ? 0 : v.data[2]])
});
this.option2 = option2
console.log(option2)
diff --git a/src/views/mdc/components/ShiftAlarm.vue b/src/views/mdc/components/ShiftAlarm.vue
index 27a7b87..b8f7cc2 100644
--- a/src/views/mdc/components/ShiftAlarm.vue
+++ b/src/views/mdc/components/ShiftAlarm.vue
@@ -1,7 +1,7 @@
<!--
* @Date: 2024-04-18 21:52:18
* @LastEditors: Sneed
- * @LastEditTime: 2024-04-21 18:49:27
+ * @LastEditTime: 2024-04-23 19:45:00
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/ShiftAlarm.vue
-->
<template>
@@ -9,8 +9,8 @@
<el-row>
<el-col>
<el-button-group>
- <el-button @click="btnListActive = item.id" :type="btnListActive == item.id ? 'primary' : ''"
- v-for="item in btnList" :key="item.id">{{
+ <el-button size="small" @click="btnListActive = item.id"
+ :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id">{{
item.title }}</el-button>
</el-button-group>
</el-col>
diff --git a/src/views/mdc/components/Time.vue b/src/views/mdc/components/Time.vue
index bdc4cb6..d9db372 100644
--- a/src/views/mdc/components/Time.vue
+++ b/src/views/mdc/components/Time.vue
@@ -1,14 +1,14 @@
<!--
* @Date: 2024-04-18 21:52:18
* @LastEditors: Sneed
- * @LastEditTime: 2024-04-20 20:57:47
+ * @LastEditTime: 2024-04-23 19:44:57
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/Time.vue
-->
<template>
<el-row>
<el-col>
<el-button-group>
- <el-button @click="statisticalMethod = item.value"
+ <el-button size="small" @click="statisticalMethod = item.value"
:type="statisticalMethod == item.value ? 'primary' : ''" v-for="item in btnList"
:key="item.value">{{
item.label }}</el-button>
diff --git a/src/views/mdc/processParam/TimeLine.vue b/src/views/mdc/processParam/TimeLine.vue
new file mode 100644
index 0000000..e920e4d
--- /dev/null
+++ b/src/views/mdc/processParam/TimeLine.vue
@@ -0,0 +1,155 @@
+<!--
+ * @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>
\ No newline at end of file
diff --git a/src/views/mdc/processParam/index.vue b/src/views/mdc/processParam/index.vue
index 832099e..53a28f8 100644
--- a/src/views/mdc/processParam/index.vue
+++ b/src/views/mdc/processParam/index.vue
@@ -1,24 +1,83 @@
<!--
* @Date: 2024-04-09 22:11:21
* @LastEditors: Sneed
- * @LastEditTime: 2024-04-13 22:16:48
+ * @LastEditTime: 2024-04-23 21:40:53
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/index.vue
瀹炴椂鐪嬫澘
-->
<template>
<el-main>
<el-card shadow="never">
- 鏁堢巼鍒嗘瀽
+ <el-container style="height: 100%;">
+ <el-aside width="300px" style="height: 100%;">
+ <el-container>
+ <el-main class="nopadding">
+ <el-row style="margin-top: 14px;">
+ 宸ヤ綅
+ </el-row>
+ <MYTree v-model="treeChecked" @loaded="query"></MYTree>
+ </el-main>
+ </el-container>
+ </el-aside>
+ <el-container>
+ <el-main>
+ <el-row>
+ <el-col style='text-align: right;'>
+ <el-date-picker :max-range="3" :clearable="false" value-format="YYYY-MM-DD"
+ style="width: 250px" v-model="time" type="daterange" range-separator="-"
+ start-placeholder="" end-placeholder="" :disabled-date="disabledDate"
+ @calendar-change="change" />
+ </el-col>
+ </el-row>
+ <TimeLine ref="timeLine"></TimeLine>
+ </el-main>
+ </el-container>
+ </el-container>
</el-card>
</el-main>
</template>
<script>
- export default {
-
- }
+import moment from 'moment'
+import TimeLine from './TimeLine.vue'
+import MYTree from '../MYTree.vue'
+export default {
+ components: {
+ TimeLine,
+ MYTree
+ },
+ watch: {
+ treeChecked() {
+ this.query()
+ },
+ time() {
+ this.query()
+ }
+ },
+ data() {
+ return {
+ treeChecked: [],
+ timeStart: moment().format('YYYY-MM-DD'),
+ time: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
+ disabledDate: Date => {
+ let max = moment(this.timeStart, 'YYYY-MM-DD').add(3, 'd').format('YYYY-MM-DD')
+ let min = moment(this.timeStart, 'YYYY-MM-DD').subtract(3, 'd').format('YYYY-MM-DD')
+ return !moment(Date).isBetween(min, max);
+ }
+ }
+ },
+ methods: {
+ query() {
+ this.$refs.timeLine.init({
+ dates: this.time,
+ workstationId: this.treeChecked.toString()
+ })
+ },
+ change(e) {
+ this.timeStart = e[0] || moment().format('YYYY-MM-DD')
+ }
+ },
+}
</script>
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
--
Gitblit v1.9.3