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

670控制中心，收到消息自动更新状态

Browse Source
This commit is contained in:
liub
2025-10-11 13:55:09 +08:00
parent c7a05f2118
commit 84af6f5cfe
1 changed files with 91 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/views/controlCenter/670/index.vue
View File

@ -2,7 +2,7 @@
<div class="device-page p-2"> <div class="device-page p-2">
<!-- 头部信息栏 --> <!-- 头部信息栏 -->
<div class="header-bar"> <div class="header-bar">
<div>设备名称：{{ deviceDetail.deviceName }}，IMEI:{{deviceDetail.deviceImei }}</div> <div>设备名称：{{ deviceDetail.deviceName }}，IMEI:{{ deviceDetail.deviceImei }}</div>
<div>设备型号：{{ deviceDetail.typeName }}</div> <div>设备型号：{{ deviceDetail.typeName }}</div>
<div class="device-status"> <div class="device-status">
设备状态： 设备状态：
@ -19,8 +19,8 @@
<el-row :gutter="20" class="content-row" :class="deviceDetail.sta_ShakeBit == 1 || deviceDetail.staSOSGrade == 1 ? '' : 'displayNone'"> <el-row :gutter="20" class="content-row" :class="deviceDetail.sta_ShakeBit == 1 || deviceDetail.staSOSGrade == 1 ? '' : 'displayNone'">
<el-col :lg="24" :xs="24"> <el-col :lg="24" :xs="24">
<div class="staticRwo" :class="deviceDetail.sta_ShakeBit == 1 ? '' : 'displayNone'">设备静止报警中!</div> <div class="staticRwo" :class="deviceDetail.sta_ShakeBit == 1 ? '' : 'displayNone'">设备静止报警中!</div>
<div class="staticRwo" :class="(deviceDetail.staSOSGrade == 1 && Status.timeOut>0) ? '' : 'displayNone'" @click="showClose()"> <div class="staticRwo" :class="deviceDetail.staSOSGrade == 1 && Status.timeOut > 0 ? '' : 'displayNone'" @click="showClose()">
设备强制报警中<span v-show="Status.timeOut>0">,{{ Status.timeOut }}S</span>! 设备强制报警中<span v-show="Status.timeOut > 0">,{{ Status.timeOut }}S</span>!
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -209,7 +209,6 @@ import strongLightActive from '@/assets/images/strong-light_HL.png';
import floodLightDefault from '@/assets/images/flood-light.png'; import floodLightDefault from '@/assets/images/flood-light.png';
import floodLightActive from '@/assets/images/flood-light_HL.png'; import floodLightActive from '@/assets/images/flood-light_HL.png';
import di from '@/assets/images/di.png'; import di from '@/assets/images/di.png';
import diAc from '@/assets/images/diAc.png'; import diAc from '@/assets/images/diAc.png';
import high from '@/assets/images/high.png'; import high from '@/assets/images/high.png';
@ -314,7 +313,7 @@ const staticModes = ref<any[]>([
id: '2', id: '2',
name: '中档', name: '中档',
icon: zhong, // 直接使用导入的变量 icon: zhong, // 直接使用导入的变量
activeIcon:zhongAc, activeIcon: zhongAc,
active: false active: false
}, },
@ -385,7 +384,7 @@ const deviceDetail = ref<any>({
}); });
//模式设置 //模式设置
const handleModeClick = async (id: string, type: string) => { const handleModeClick = async (id: string, type: string) => {
if (Status[type] == id) { if (Status[type] == id) {
return; return;
} }
@ -394,7 +393,7 @@ const handleModeClick = async (id: string, type: string) => {
let dic = { promise: null, callback: null, key: '' }; let dic = { promise: null, callback: null, key: '' };
//测试环境假装成功 //测试环境假装成功
dic.promise = Promise.resolve({ code: 200, msg: '操作成功' }); dic.promise = Promise.resolve({ code: 200, msg: '操作成功' });
let arr = []; let arr = [];
@ -418,7 +417,7 @@ const handleModeClick = async (id: string, type: string) => {
}); });
}; };
dic.promise.then((res) => { dic.promise.then((res) => {
if (res.code === 200) { if (res.code === 200) {
Status[type] = id; Status[type] = id;
ElMessage.closeAll(); ElMessage.closeAll();
@ -427,39 +426,35 @@ const handleModeClick = async (id: string, type: string) => {
dic.callback(); dic.callback();
} }
if (callback) { if (callback) {
callback(); callback();
} }
} else { } else {
proxy?.$modal.msgError(res.msg); proxy?.$modal.msgError(res.msg);
} }
}); });
}; };
if(type == 'sosMode' && Status.sosMode=== '1' && id==='0' && timer){ if (type == 'sosMode' && Status.sosMode === '1' && id === '0' && timer) {
showClose(); showClose();
return; return;
} } else if (type == 'sosMode' && id === '1' && timer == null) {
else if (type == 'sosMode' && id === '1' && timer==null) {
ShowConfirm({ ShowConfirm({
title: '提示', title: '提示',
text: '您确认开启180秒强制报警', text: '您确认开启180秒强制报警',
cancelCallback: ()=>{ cancelCallback: () => {
timer=null; timer = null;
}, },
OkCallback: () => { OkCallback: () => {
sendCmd(function () { sendCmd(function () {
Status.confirm.Visible = false; Status.confirm.Visible = false;
deviceDetail.value.staSOSGrade="1"; deviceDetail.value.staSOSGrade = '1';
Status.timeOut = 180; Status.timeOut = 180;
timer = setInterval(() => { timer = setInterval(() => {
if (Status.timeOut === 0) { if (Status.timeOut === 0) {
clearInterval(timer); clearInterval(timer);
timer = null; timer = null;
hideConfirm(); hideConfirm();
handleModeClick('1','sosMode'); handleModeClick('1', 'sosMode');
deviceDetail.value.staSOSGrade="0"; deviceDetail.value.staSOSGrade = '0';
return; return;
} }
@ -478,26 +473,32 @@ const handleModeClick = async (id: string, type: string) => {
}; };
const getList = () => { const getList = () => {
api.deviceRealTimeStatus(route.params.deviceId).then((res) => { return new Promise((resolve, reject) => {
if (res && res.code == 200) { api
let keys = Object.keys(res.data); .deviceRealTimeStatus(route.params.deviceId)
keys.forEach((key) => { .then((res) => {
deviceDetail.value[key] = res.data[key]; if (res && res.code == 200) {
});
Status.sosMode = res.data.staSOSGrade; let keys = Object.keys(res.data);
Status.staticPower = res.data.staDetectGrade; keys.forEach((key) => {
Status.lightMode = res.data.staLightGrade; deviceDetail.value[key] = res.data[key];
if(!deviceDetail.value.personnelInfo){ });
deviceDetail.value.personnelInfo={ Status.sosMode = res.data.staSOSGrade;
'id': null, Status.staticPower = res.data.staDetectGrade;
'deviceId': null, Status.lightMode = res.data.staLightGrade;
'name': null, if (!deviceDetail.value.personnelInfo) {
'position': null, deviceDetail.value.personnelInfo = {
'unitName': null, 'id': null,
'code': null 'deviceId': null,
'name': null,
'position': null,
'unitName': null,
'code': null
};
}
} }
} })
} .finally(resolve);
}); });
}; };
@ -563,8 +564,6 @@ const sendTextMessage = async () => {
batchId: '' batchId: ''
}; };
api.SendMessage(json).then((res) => { api.SendMessage(json).then((res) => {
if (res.code === 200) { if (res.code === 200) {
ElMessage.closeAll(); ElMessage.closeAll();
@ -588,52 +587,63 @@ const lookMap = (row: any) => {
function showClose() { function showClose() {
Status.confirm.Visible = true; Status.confirm.Visible = true;
Status.confirm.OkTxt = '关闭'; Status.confirm.OkTxt = '关闭';
Status.confirm.OkCallback=()=>{ Status.confirm.OkCallback = () => {
clearInterval(timer); clearInterval(timer);
timer=null; timer = null;
handleModeClick('0','sosMode'); handleModeClick('0', 'sosMode');
deviceDetail.value.staSOSGrade="0"; deviceDetail.value.staSOSGrade = '0';
Status.timeOut=0; Status.timeOut = 0;
hideConfirm(); hideConfirm();
} };
} }
// 处理设备消息 // 处理设备消息
const handleDeviceMessage = (payload: any) => { const handleDeviceMessage = (payload: any) => {
let json = JSON.parse(payload); let json = null;
try {
json = JSON.parse(payload);
} catch (ex) {
return;
}
let keys = Object.keys(json); let keys = Object.keys(json);
function parseDataMQ(json) { function parseDataMQ(json) {
deviceDetail.value.staDetectGrade = json.sta_DetectGrade; try {
deviceDetail.value.staLightGrade = json.sta_LightGrade; debugger;
deviceDetail.value.staDetectResult = json.sta_DetectResult; deviceDetail.value.staDetectGrade = json.sta_DetectGrade;
deviceDetail.value.staSOSGrade = json.sta_SOSGrade; deviceDetail.value.staLightGrade = json.sta_LightGrade;
deviceDetail.value.sta_ShakeBit = json.sta_ShakeBit; deviceDetail.value.staDetectResult = json.sta_DetectResult;
deviceDetail.value.staPowerTime = json.sta_PowerTime; deviceDetail.value.staSOSGrade = json.sta_SOSGrade;
deviceDetail.value.staPowerPercent = json.sta_PowerPercent; deviceDetail.value.sta_ShakeBit = json.sta_ShakeBit;
deviceDetail.value.longitude = json.sta_longitude; deviceDetail.value.staPowerTime = json.sta_PowerTime;
deviceDetail.value.latitude = json.sta_latitude; deviceDetail.value.staPowerPercent = json.sta_PowerPercent;
deviceDetail.value.onlineStatus = 1; deviceDetail.value.longitude = json.sta_longitude;
deviceDetail.value.latitude = json.sta_latitude;
deviceDetail.value.onlineStatus = 1;
Status.sosMode = json.sta_SOSGrade; Status.sosMode = json.sta_SOSGrade;
Status.staticPower = json.sta_DetectGrade; Status.staticPower = json.sta_DetectGrade;
Status.lightMode = json.sta_LightGrade; Status.lightMode = json.sta_LightGrade;
console.log('Status=', Status);
console.log('sosModes=', sosModes.value);
console.log('sta_SOSGrade=', json.sta_SOSGrade);
if (json.sta_PowerPercent < 20) {
centerDialogVisible.value = true;
}
if (json.sta_PowerPercent < 20) { if (json.sta_SOSGrade == 1 && json.sta_ShakeBit == 1) {
centerDialogVisible.value = true; confirm('设备SOS报警、静止预警中');
} return;
}
if (json.sta_SOSGrade == 1 && json.sta_ShakeBit == 1) { if (json.sta_SOSGrade == 1) {
confirm('设备SOS报警、静止预警中'); confirm('设备SOS报警中');
return; }
} if (json.sta_ShakeBit == 1) {
if (json.sta_SOSGrade == 1) { confirm('设备静止报警中');
confirm('设备SOS报警中'); }
} } catch (err) {}
if (json.sta_ShakeBit == 1) {
confirm('设备静止报警中');
}
} }
if (keys.indexOf('sta_DetectGrade') > -1) { if (keys.indexOf('sta_DetectGrade') > -1) {
@ -646,6 +656,7 @@ onMounted(async () => {
await getList(); // 先获取设备信息 await getList(); // 先获取设备信息
// 连接mqtt // 连接mqtt
onConnect(async () => { onConnect(async () => {
const deviceImei = deviceDetail.value.deviceImei; const deviceImei = deviceDetail.value.deviceImei;
if (!deviceImei) { if (!deviceImei) {
return; return;
@ -659,6 +670,7 @@ onMounted(async () => {
}); });
// 2. 注册消息接收回调（核心：处理设备发送的消息） // 2. 注册消息接收回调（核心：处理设备发送的消息）
onMessage((msg) => { onMessage((msg) => {
console.log('收到新消息:', { console.log('收到新消息:', {
主题: msg.topic, 主题: msg.topic,
内容: msg.payload, 内容: msg.payload,
@ -666,7 +678,7 @@ onMounted(async () => {
QoS: msg.qos QoS: msg.qos
}); });
// 在这里处理消息（根据实际业务逻辑） // 在这里处理消息（根据实际业务逻辑）
handleDeviceMessage(msg); handleDeviceMessage(msg.payload);
}); });
onError((err) => { onError((err) => {
console.error('MQTT连接失败原因:', err.message); // 关键：打印连接失败的具体原因 console.error('MQTT连接失败原因:', err.message); // 关键：打印连接失败的具体原因
@ -747,7 +759,7 @@ window.hideConfirm = function () {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.p-2{ .p-2 {
background: rgba(247, 248, 252, 1); background: rgba(247, 248, 252, 1);
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;