dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

控制面板，不同的设备控制，跳转到不同的控制页

Browse Source
This commit is contained in:
fengerli
2025-09-04 17:33:27 +08:00
parent 520d6b2b1a
commit a31318aa1a
5 changed files with 45 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
VITE_APP_ENV = 'development'
# 开发环境
# VITE_APP_BASE_API = 'http://47.120.79.150/backend'
VITE_APP_BASE_API = 'http://192.168.2.23:8000'
VITE_APP_BASE_API = 'http://47.120.79.150/backend'
#VITE_APP_BASE_API = 'http://192.168.2.23:8000'
# VITE_APP_BASE_API = 'http://localhost:8000'

2
src/api/controlCenter/controlPanel/types.ts
View File

@ -3,7 +3,7 @@ export interface deviceQuery {
pageNum: number;
deviceId: string;
deviceName: string;
deviceStatus: string;
onlineStatus: string;
deviceMac: string;
deviceImei: string;
personnelBy: string;

7
src/views/controlCenter/210/index.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div class="device-page p-2">
这是210控制页面
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped></style>

37
src/views/controlCenter/6170/index.vue
View File

@ -113,10 +113,13 @@
<div class="message-content">
<el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
v-model="deviceDetail.sendMsg" resize="none" />
<el-button type="primary" class="send-btn" @click="sendTextMessage"
:loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
sendTextLoading ? '发送中' : '发送' }}</el-button>
<div style="text-align: end;clear: both;">
<el-button type="primary" class="send-btn" @click="sendTextMessage"
:loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
sendTextLoading ? '发送中' : '发送' }}</el-button>
</div>
</div>
</div>
</el-col>
</el-row>
@ -310,9 +313,12 @@ const getList = async () => {
targetModeId = matchedMode.id;
}
setActiveLightMode(targetModeId);
const laserStatus = res.data.laserLightMode;
const laserStatus = Number(res.data.laserLightMode);
laserMode.value.active = laserStatus === 1;
laserMode.value.switchStatus = laserStatus === 1;
setTimeout(() => {
console.log('延迟检查激光状态:', laserMode.value.active, laserMode.value.switchStatus);
}, 1000);
} catch (error) {
console.error("获取设备详情失败：", error);
setActiveLightMode("strong"); // 异常时默认强光
@ -614,11 +620,11 @@ onMounted(async () => {
connect();
});
onUnmounted(() => {
// 只有当连接已建立时，才执行断开操作（避免无效调用）
if (connected.value) {
console.log('页面离开，断开MQTT连接');
disconnect(); // 调用断开连接方法
}
// 只有当连接已建立时，才执行断开操作（避免无效调用）
if (connected.value) {
console.log('页面离开，断开MQTT连接');
disconnect(); // 调用断开连接方法
}
});
</script>
@ -657,7 +663,7 @@ onUnmounted(() => {
background: white;
padding: 0px 20px 50px;
border: 1px solid #ebeef5;
height: 100%;
height: 250px;
position: relative;
}
@ -730,7 +736,6 @@ onUnmounted(() => {
}
.brightness-alarm {
display: flex;
justify-content: space-between;
@ -840,9 +845,9 @@ onUnmounted(() => {
}
.message-content {
display: flex;
flex-direction: column;
gap: 10px;
// display: flex;
// flex-direction: column;
// gap: 10px;
.el-textarea {
border: 1px solid rgba(29, 111, 255, 1);
@ -861,7 +866,9 @@ onUnmounted(() => {
padding: 10px 20px;
border-radius: 29px;
background: rgba(2, 124, 251, 1);
border: none
border: none;
margin: 20px 0px 30px 0;
}
}

23
src/views/controlCenter/controlPanel/index.vue
View File

@ -45,8 +45,8 @@
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
</el-form-item>
<el-form-item label="设备状态" prop="deviceStatus">
<el-select v-model="queryParams.deviceStatus" placeholder="设备状态" clearable>
<el-form-item label="设备状态" prop="onlineStatus">
<el-select v-model="queryParams.onlineStatus" placeholder="设备状态" clearable>
<el-option label="在线" value="1"></el-option>
<el-option label="离线" value="0"></el-option>
</el-select>
@ -192,7 +192,7 @@ const initData: PageData<'', deviceQuery> = {
pageSize: 10,
deviceId: '',
deviceName: '',
deviceStatus: '',
onlineStatus: '',
deviceMac: '',
deviceImei: '',
personnelBy: '',
@ -299,10 +299,13 @@ const resetQuery = () => {
};
/** 设备控制跳转 */
/** 设备控制跳转动态取detailPageUrl字段值，跳转 */
const handleControl = (row: any) => {
const deviceId = row.id;
router.push('/controlCenter/6170/' + deviceId);
const detailPageUrl = row.detailPageUrl;
const basePath = detailPageUrl.replace(/\/index$/, '');
const dynamicPath = `/${basePath}/${deviceId}`;
router.push(dynamicPath); // 跳转路由
};
/** 选择条数 */
@ -354,12 +357,12 @@ const getDeptTree = async () => {
const sendTextMessage = () => {
// 防重复提交
if (!queryParams.value.deviceType) {
ElMessage.closeAll();
ElMessage.closeAll();
proxy?.$modal.msgWarning('请先选择设备类型');
return;
}
if (ids.value.length == 0) {
ElMessage.closeAll();
ElMessage.closeAll();
proxy?.$modal.msgWarning('请先选中一条设备');
return;
}
@ -368,7 +371,7 @@ const sendTextMessage = () => {
// 发送文本消息确认
const submitForm = async () => {
if (!form.value.messageToSend) {
ElMessage.closeAll();
ElMessage.closeAll();
proxy?.$modal.msgWarning('发送消息不能为空');
return
}
@ -424,12 +427,12 @@ const cancel = () => {
// 强制报警
const forceAlarm = async () => {
if (!queryParams.value.deviceType) {
ElMessage.closeAll();
ElMessage.closeAll();
proxy?.$modal.msgWarning('请先选择设备类型');
return;
}
if (ids.value.length == 0) {
ElMessage.closeAll();
ElMessage.closeAll();
proxy?.$modal.msgWarning('请先选中一条设备');
return;
}