Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

Commit acb7c4d

Browse files
ZhouYixunZhouYixun
committed
feat: add hub control
1 parent 25bae87 commit acb7c4d

File tree

3 files changed

+404
-11
lines changed

3 files changed

+404
-11
lines changed

‎src/components/DeviceDes.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ const findAgentById = (id) => {
432432
"
433433
style="margin-right: 5px"
434434
:src="img['./../assets/img/voltage.png'].default"
435-
:width="20"
435+
:width="15"
436436
:height="20"
437437
:color="device['voltage'] === 0 ? '#606266' : '#67C23A'"
438438
/>

‎src/components/HubSettings.vue‎

Lines changed: 374 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
1+
<script setup>
2+
import { ElMessage } from 'element-plus';
3+
import { onMounted, ref } from 'vue';
4+
import ColorImg from '@/components/ColorImg.vue';
5+
import axios from '../http/axios';
6+
import RenderStatus from './RenderStatus.vue';
7+
import RenderDeviceName from './RenderDeviceName.vue';
8+
9+
const props = defineProps({
10+
agentId: Number,
11+
});
12+
const img = import.meta.globEager('./../assets/img/*');
13+
const devices = ref([]);
14+
const line = ref([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
15+
const listByAgentId = () => {
16+
line.value = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
17+
axios
18+
.get('/controller/devices/listByAgentId', {
19+
params: {
20+
agentId: props.agentId,
21+
},
22+
})
23+
.then((resp) => {
24+
if (resp.code === 2000) {
25+
devices.value = resp.data;
26+
for (const i in devices.value) {
27+
if (devices.value[i].position !== 0) {
28+
line.value[devices.value[i].position - 1] = devices.value[i];
29+
}
30+
}
31+
}
32+
});
33+
};
34+
const updatePosition = (id, position) => {
35+
axios
36+
.get('/controller/devices/updatePosition', {
37+
params: {
38+
id,
39+
position,
40+
},
41+
})
42+
.then((resp) => {
43+
if (resp.code === 2000) {
44+
ElMessage.success({
45+
message: resp.message,
46+
});
47+
listByAgentId();
48+
}
49+
});
50+
};
51+
const hubControl = (position, type) => {
52+
axios
53+
.get('/controller/agents/hubControl', {
54+
params: {
55+
id: props.agentId,
56+
position,
57+
type,
58+
},
59+
})
60+
.then((resp) => {
61+
if (resp.code === 2000) {
62+
ElMessage.success({
63+
message: resp.message,
64+
});
65+
listByAgentId();
66+
}
67+
});
68+
};
69+
const getPhoneImg = (name, url) => {
70+
let result;
71+
if (url === null || !url || (url && url.length === 0)) {
72+
result = img['./../assets/img/default.png'].default;
73+
} else {
74+
result = url;
75+
}
76+
return result;
77+
};
78+
onMounted(() => {
79+
listByAgentId();
80+
});
81+
</script>
82+
83+
<template>
84+
<div>
85+
<div v-for="(l, j) in [line.slice(0, 5), line.slice(5, 10)]">
86+
<div style="display: flex">
87+
<div v-for="(device, i) in l" style="width: 20%; padding: 5px">
88+
<el-card v-if="device != 0" label-width="40px" class="device-card">
89+
<template #header>
90+
<RenderDeviceName :device="device"></RenderDeviceName>
91+
<RenderStatus
92+
:status="device.status"
93+
:user="device.user"
94+
></RenderStatus>
95+
</template>
96+
<el-row>
97+
<el-col :span="10">
98+
<div style="text-align: center">
99+
<el-image
100+
style="height: 100px"
101+
fit="contain"
102+
:src="getPhoneImg(device.model, device['imgUrl'])"
103+
:preview-src-list="[
104+
getPhoneImg(device.model, device['imgUrl']),
105+
]"
106+
hide-on-click-modal
107+
/>
108+
</div>
109+
</el-col>
110+
<el-col :span="14">
111+
<el-form
112+
label-position="left"
113+
class="device-form"
114+
style="margin: 0 0 15px 10px"
115+
>
116+
<el-form-item label="电量">
117+
<div
118+
:style="{
119+
position: 'relative',
120+
display: 'flex',
121+
'align-items': 'center',
122+
color:
123+
device['level'] === 0 ||
124+
(device.status !== 'ONLINE' &&
125+
device.status !== 'DEBUGGING' &&
126+
device.status !== 'TESTING')
127+
? '#606266'
128+
: device['level'] <= 30
129+
? '#F56C6C'
130+
: device['level'] <= 70
131+
? '#E6A23C'
132+
: '#67C23A',
133+
}"
134+
>
135+
<ColorImg
136+
v-if="
137+
device['level'] !== 0 &&
138+
(device.status === 'ONLINE' ||
139+
device.status === 'DEBUGGING' ||
140+
device.status === 'TESTING')
141+
"
142+
style="margin-right: 5px"
143+
:src="
144+
device['level'] <= 25
145+
? img['./../assets/img/powerLow.png'].default
146+
: device['level'] <= 50
147+
? img['./../assets/img/powerMid.png'].default
148+
: device['level'] <= 75
149+
? img['./../assets/img/powerHigh.png'].default
150+
: img['./../assets/img/powerFull.png'].default
151+
"
152+
:width="20"
153+
:height="20"
154+
:color="
155+
device['level'] === 0
156+
? '#606266'
157+
: device['level'] <= 30
158+
? '#F56C6C'
159+
: device['level'] <= 70
160+
? '#E6A23C'
161+
: '#67C23A'
162+
"
163+
/>
164+
{{
165+
device['level'] === 0 ||
166+
(device.status !== 'ONLINE' &&
167+
device.status !== 'DEBUGGING' &&
168+
device.status !== 'TESTING')
169+
? $t('form.unknown')
170+
: device['level']
171+
}}
172+
</div>
173+
</el-form-item>
174+
<el-form-item label="温度">
175+
<div
176+
:style="{
177+
position: 'relative',
178+
display: 'flex',
179+
'align-items': 'center',
180+
color:
181+
device.status !== 'ONLINE' &&
182+
device.status !== 'DEBUGGING' &&
183+
device.status !== 'TESTING'
184+
? '#606266'
185+
: device['temperature'] < 300
186+
? '#67C23A'
187+
: device['temperature'] < 350
188+
? '#E6A23C'
189+
: '#F56C6C',
190+
}"
191+
>
192+
<ColorImg
193+
v-if="
194+
device['temperature'] !== 0 &&
195+
(device.status === 'ONLINE' ||
196+
device.status === 'DEBUGGING' ||
197+
device.status === 'TESTING')
198+
"
199+
style="margin-left: -4px; margin-right: 3px"
200+
:src="img['./../assets/img/tem.png'].default"
201+
:width="20"
202+
:height="20"
203+
:color="
204+
device['temperature'] === 0
205+
? '#606266'
206+
: device['temperature'] < 300
207+
? '#67C23A'
208+
: device['temperature'] < 350
209+
? '#E6A23C'
210+
: '#F56C6C'
211+
"
212+
/>
213+
{{
214+
device['temperature'] === 0 ||
215+
(device.status !== 'ONLINE' &&
216+
device.status !== 'DEBUGGING' &&
217+
device.status !== 'TESTING')
218+
? $t('form.unknown')
219+
: (device['temperature'] / 10).toFixed(1) + ' ℃'
220+
}}
221+
</div>
222+
</el-form-item>
223+
<el-form-item label="电压">
224+
<div
225+
:style="{
226+
position: 'relative',
227+
display: 'flex',
228+
'align-items': 'center',
229+
color:
230+
device['voltage'] === 0 ||
231+
(device.status !== 'ONLINE' &&
232+
device.status !== 'DEBUGGING' &&
233+
device.status !== 'TESTING')
234+
? '#606266'
235+
: '#67C23A',
236+
}"
237+
>
238+
<ColorImg
239+
v-if="
240+
device['voltage'] !== 0 &&
241+
(device.status === 'ONLINE' ||
242+
device.status === 'DEBUGGING' ||
243+
device.status === 'TESTING')
244+
"
245+
style="margin-right: 5px"
246+
:src="img['./../assets/img/voltage.png'].default"
247+
:width="15"
248+
:height="20"
249+
:color="device['voltage'] === 0 ? '#606266' : '#67C23A'"
250+
/>
251+
{{
252+
device['voltage'] === 0 ||
253+
(device.status !== 'ONLINE' &&
254+
device.status !== 'DEBUGGING' &&
255+
device.status !== 'TESTING')
256+
? $t('form.unknown')
257+
: (device['voltage'] / 1000).toFixed(2) + ' V'
258+
}}
259+
</div>
260+
</el-form-item>
261+
</el-form>
262+
</el-col>
263+
</el-row>
264+
<div style="text-align: center">
265+
<el-popover :width="400" trigger="click">
266+
<el-table border :data="devices">
267+
<el-table-column header-align="center" label="设备信息">
268+
<template #default="scope">
269+
<RenderDeviceName :device="scope.row" />
270+
</template>
271+
</el-table-column>
272+
<el-table-column
273+
show-overflow-tooltip
274+
header-align="center"
275+
width="150"
276+
property="udId"
277+
label="udId"
278+
/>
279+
<el-table-column align="center" width="100" label="操作">
280+
<template #default="scope">
281+
<el-button
282+
type="primary"
283+
size="mini"
284+
:disabled="scope.row.id === device.id"
285+
@click="updatePosition(scope.row.id, i + 1 + j * 5)"
286+
>关联
287+
</el-button>
288+
</template>
289+
</el-table-column>
290+
</el-table>
291+
<template #reference>
292+
<el-button size="mini"> 切换 </el-button>
293+
</template>
294+
</el-popover>
295+
<el-button
296+
type="primary"
297+
size="mini"
298+
@click="hubControl(i + 1 + j * 5, 'up')"
299+
>
300+
通电
301+
</el-button>
302+
<el-button
303+
type="danger"
304+
size="mini"
305+
@click="hubControl(i + 1 + j * 5, 'down')"
306+
>
307+
断电
308+
</el-button>
309+
</div>
310+
</el-card>
311+
<el-card v-else>
312+
<el-empty
313+
:image-size="30"
314+
:description="i + 1 + j * 5 + '号USB口未接入设备'"
315+
/>
316+
<div style="text-align: center">
317+
<el-popover :width="400" trigger="click">
318+
<el-table border :data="devices">
319+
<el-table-column header-align="center" label="设备信息">
320+
<template #default="scope">
321+
<RenderDeviceName :device="scope.row" />
322+
</template>
323+
</el-table-column>
324+
<el-table-column
325+
show-overflow-tooltip
326+
header-align="center"
327+
width="150"
328+
property="udId"
329+
label="udId"
330+
/>
331+
<el-table-column align="center" width="100" label="操作">
332+
<template #default="scope">
333+
<el-button
334+
type="primary"
335+
size="mini"
336+
@click="updatePosition(scope.row.id, i + 1 + j * 5)"
337+
>关联
338+
</el-button>
339+
</template>
340+
</el-table-column>
341+
</el-table>
342+
<template #reference>
343+
<el-button size="mini"> 关联 </el-button>
344+
</template>
345+
</el-popover>
346+
<el-button
347+
type="primary"
348+
size="mini"
349+
@click="hubControl(i + 1 + j * 5, 'up')"
350+
>
351+
通电
352+
</el-button>
353+
<el-button
354+
type="danger"
355+
size="mini"
356+
@click="hubControl(i + 1 + j * 5, 'down')"
357+
>
358+
断电
359+
</el-button>
360+
</div>
361+
</el-card>
362+
</div>
363+
</div>
364+
</div>
365+
<div style="text-align: center; margin-top: 20px">
366+
<el-button type="primary" size="mini" @click="hubControl(11, 'up')">
367+
全部通电
368+
</el-button>
369+
<el-button type="danger" size="mini" @click="hubControl(11, 'down')">
370+
全部断电
371+
</el-button>
372+
</div>
373+
</div>
374+
</template>

0 commit comments

Comments
 (0)