<!--
|
* @Date: 2024-04-09 22:11:21
|
* @LastEditors: Sneed
|
* @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>
|
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>
|
