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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
| <template>
| <a-modal v-model:visible="visible" centered :mask="false" :closable="false" :cancelText="null" title="警告"
| @ok="hideModal">
| <a-card>
| <div class="indented-text">在使用远程控制设备前，请确保机器周围没有其他人员。建立一个安全区域，确保没有人能够进入该区域，防止不必要的伤害。</div>
| </a-card>
|
| </a-modal>
| <div class="app">
| <a-card title="指令">
| <div class="com-box">
| <a-button v-for="item in comList" :key="item.id" type="primary" class="com-btn"
| @click="comClick(item)">
| {{ item.title }}
| </a-button>
| </div>
| </a-card>
| <a-card title="控制台" style="margin-top: 10px">
| <div class="log-box">
| <p v-for="log in logList" :key="log"> {{ log }}</p>
| </div>
|
| </a-card>
| </div>
| </template>
|
| <script setup lang="ts">
| import { ref, onMounted } from "vue";
| import { sendCommand } from "./api";
|
| const visible = ref<boolean>(false);
|
| interface Commant {
| id: number;
| title: string;
| icon: string;
| }
|
| const logList = ref<string[]>([]);
| const comList = ref<Commant[]>([
| {
| id: 1010,
| title: "干燥启动",
| icon: "caret-right-outlined"
| }, {
| id: 1007,
| title: "停止运行",
| icon: "caret-right-outlined"
| }, {
| id: 1013,
| title: "热风启动",
| icon: "caret-right-outlined"
| }, {
| id: 1012,
| title: "后门开关",
| icon: "caret-right-outlined"
| }, {
| id: 1003,
| title: "滚筒升",
| icon: "caret-right-outlined"
| }, {
| id: 1004,
| title: "滚筒降",
| icon: "caret-right-outlined"
| }, {
| id: 1005,
| title: "滚筒正转",
| icon: "caret-right-outlined"
| }, {
| id: 1006,
| title: "滚筒反转",
| icon: "caret-right-outlined"
| }, {
| id: 1014,
| title: "开门观察",
| icon: "caret-right-outlined"
| }, {
| id: 1015,
| title: "出料",
| icon: "caret-right-outlined"
| }, {
| id: 1016,
| title: "清除",
| icon: "caret-right-outlined"
| }, {
| id: 1017,
| title: "手动/自动",
| icon: "caret-right-outlined"
| }]);
|
| function comClick(item) {
| addLog("发送", item.title);
| //发送指令
| sendCmd(item);
| }
|
| /**
| * 发送指令
| * @param item
| */
| function sendCmd(item) {
| var params = { msg: item.title, code: item.id, tenantId: 1003, machineId: "GM001" };
| sendCommand(params).then(res => {
| if (res.success) {
| addLog("响应", res.message);
| console.info(res);
| } else {
| console.info(res);
| addLog("响应", res.message);
| }
|
| });
| }
|
| /**
| * 添加log
| * @param type
| * @param msg
| */
| function addLog(type, msg) {
| //发送log
| const date = new Date();
| const format = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
| const log = format + " " + type + ":" + msg;
| logList.value.unshift(log);
| }
|
| const showModal = () => {
| visible.value = true;
| };
|
| const hideModal = () => {
| visible.value = false;
| };
|
| onMounted(() => {
| showModal();
| });
|
|
| </script>
|
| <style lang="less" scoped>
| .app {
| margin: 10px;
| }
|
| .com-box {
| display: flex;
| flex-wrap: wrap;
|
| .com-btn {
| margin: 10px;
| }
| }
|
| .log-box {
| min-height: 200px;
| max-height: 300px;
| overflow-y: scroll;
| }
| .indented-text {
| text-indent: 20px;
| font-size: 16px;
| }
|
|
| </style>
|
|
