1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <template>
| <div class="monitor-panel">
| <div class="panel">
| <div class="header">
| <div class="title">
| <Icon :type="menu.icon" /> {{ menu.title }}
| </div>
| <a href="javascript:;" class="close" @click="close">
| <Icon type="md-close" :size="20" color="#000" />
| </a>
| </div>
| <div class="body">
| <MonitorPanelAGV v-if="currentPanel == 'agv'"></MonitorPanelAGV>
| <MonitorPanelOrder
| v-else-if="currentPanel == 'order'"
| ></MonitorPanelOrder>
| <MonitorPanelTask v-else-if="currentPanel == 'task'"></MonitorPanelTask>
| </div>
| <div class="footer"></div>
| </div>
| </div>
| </template>
|
| <script>
| import MonitorPanelAGV from "@/components/monitor/panels/agv";
| import MonitorPanelOrder from "@/components/monitor/panels/order";
| import MonitorPanelTask from "@/components/monitor/panels/task";
| export default {
| name: "MonitorPanel",
| components: {
| MonitorPanelAGV,
| MonitorPanelOrder,
| MonitorPanelTask,
| },
| props: {
| menu: Object,
| },
| data() {
| return {};
| },
| computed: {
| currentPanel() {
| return this.menu.name;
| },
| },
| methods: {
| close() {
| this.$emit("close");
| },
| },
| };
| </script>
|
| <style lang="less" scoped>
| .monitor-panel {
| height: 100%;
| .panel {
| height: 100%;
| padding: 3px 11px;
| .header {
| height: 38px;
| line-height: 38px;
| border-bottom: 1px solid #ddd;
| .title {
| display: inline-block;
| color: #2d8cf0;
| }
| .close {
| float: right;
| }
| }
| .body {
| height: calc(100% - 38px);
| }
| }
| }
| </style>
|
|
