| | |
|---|
| | | <!-- |
|---|
| | | * @Date: 2024-04-09 22:11:21 |
|---|
| | | * @LastEditors: Sneed |
|---|
| | | * @LastEditTime: 2024-04-09 22:12:14 |
|---|
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue |
|---|
| | | * @LastEditTime: 2024-04-23 21:40:53 |
|---|
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/index.vue |
|---|
| | | 实时看板 |
|---|
| | | --> |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | 实时看板 |
|---|
| | | </div> |
|---|
| | | <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> |
|---|
| | | <style lang="scss" scoped></style> |
|---|
