This commit is contained in:
微微一笑
2025-08-05 15:32:48 +08:00
4 changed files with 115 additions and 68 deletions

View File

@ -161,7 +161,7 @@
},
titlePadding: {
type: String,
default: '30rpx 0 10rpx'
default: '10rpx 0 10rpx'
},
// 消息样式自定义

View File

@ -252,8 +252,24 @@
</view>
</view>
<!-- 人员信息成功提示弹框 -->
<CustomPopup :show="showPopupFlag" :message="popupMessage" icon="/static/images/sendSucc.png"
:confirm-text="popupConfirmText" :show-cancel="false" @confirm="onPopupConfirm" />
<CustomPopup v-if="popupType === 'person'" :show="showPopupFlag" :message="popupMessage"
icon="/static/images/common/sendSucc.png" :confirm-text="popupConfirmText" :show-cancel="false"
@confirm="onPopupConfirm" />
<!-- 开机log上传成功的弹框提示 -->
<CustomPopup v-if="popupType === 'logo'" :show="showPopupFlag" :message="popupMessage"
icon="/static/images/common/upload.png" :confirm-text="popupConfirmText" :show-cancel="false"
@confirm="onPopupConfirm" />
<!--============= 电量低于提示弹框=========== -->
<CustomPopup v-if="popupType === 'bettery'" :show="showPopupFlag"
popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage" title="设备电量低于20%"
titleColor="rgba(224, 52, 52, 1)" icon="/static/images/common/path.png" :confirm-text="popupConfirmText"
:show-cancel="true" @cancel="onPopupConfirm" @confirm="onPopupConfirm"
confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
<!-- 解除报警 -->
<CustomPopup v-if="popupType === 'cancel'" :show="showPopupFlag"
popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage"
icon="/static/images/6170/svg.png" :confirm-text="popupConfirmText" :show-cancel="false"
@confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
</view>
</view>
</template>
@ -301,7 +317,6 @@
code: '',
},
deviceInfo: {},
activePermissions: [], // 存储当前设备的权限数组
isSharedDevice: false, // 标记是否来自分享
isRightIconVisible: false,
@ -314,7 +329,8 @@
selectedItemIndex: 0,
radioList: ['M', 'S'],
radioSelected: 0, // -1表示未选中任何项
deviceType:''
deviceType: '',
popupType:'popupType' //弹框类型
}
},
methods: {
@ -324,10 +340,10 @@
this.lightModeB = false;
this.lightModeC = false;
},
handleRadioSelect(index) {
this.radioSelected = index;
console.log('选中了单选选项:', this.radioList[index]);
},
handleRadioSelect(index) {
this.radioSelected = index;
console.log('选中了单选选项:', this.radioList[index]);
},
// *******定位******
gpsPosition() {
uni.navigateTo({
@ -337,7 +353,7 @@
// 联机设备
selectMode() {
uni.navigateTo({
url:'/pages/210/onlineDevice/index',
url: '/pages/210/onlineDevice/index',
events: {
ack: function(data) {}
},
@ -492,10 +508,9 @@
try {
const responseData = JSON.parse(res.data);
if (responseData.code === 200) {
uni.showToast({
title: responseData.msg,
icon: 'success'
});
this.popupType = 'logo'; //弹框类型
this.showPopupFlag = true;
this.popupMessage = '上传成功';
this.selectedImage = '';
this.file = null;
this.lightModeB = false
@ -595,7 +610,8 @@
registerPersonInfo(data).then((res) => {
if (res.code == 200) {
uni.hideLoading()
this.showPopupFlag = true
this.popupType = 'person'; //弹框类型
this.showPopupFlag = true;
this.popupMessage = '人员信息发送成功'
} else {
uni.showToast({
@ -629,7 +645,8 @@
deviceSendMessage(data).then((res) => {
if (res.code == 200) {
uni.hideLoading()
this.showPopupFlag = true
this.popupType = 'person'; //弹框类型
this.showPopupFlag = true;
this.popupMessage = '发送信息成功'
} else {
uni.showToast({
@ -676,13 +693,13 @@
title: '加载中...'
})
eventChannel.on('deviceControl', (data) => {
console.log(data,'这是传过来的惨呼啊');
console.log(data, '这是传过来的惨呼啊');
this.itemInfo = data.data;
this.deviceID = data.data.id;
this.navTitle = data.data.deviceName;
this.apiType = data.apiType
this.deviceType=data.deviceType
this.deviceType = data.deviceType
// 根据 apiType 设置右图标的显示状态
this.isRightIconVisible = this.apiType === 'listA';
// 初始化并连接MQTT
@ -850,7 +867,7 @@
gap: 12px;
align-items: center;
margin-bottom: 20rpx;
font-size:200rpx;
font-size: 200rpx;
}
.group-item {
@ -859,25 +876,28 @@
height: 136rpx;
border-radius: 72rpx;
text-align: center;
line-height:136rpx;
line-height: 136rpx;
position: relative;
}
.radio-icon.selected {
background-color: rgba(174, 214, 0, 1);
transition: background-color 0.3s;
border-radius: 72rpx;
}
.radio-icon{
font-size:50rpx;
.radio-icon {
font-size: 50rpx;
}
.uni-border{
border:4rpx solid rgba(26, 26, 26, 1);
width:96%;
height:123rpx;
.uni-border {
border: 4rpx solid rgba(26, 26, 26, 1);
width: 96%;
height: 123rpx;
position: absolute;
top:7rpx;
left:6rpx;
border-radius:72rpx;
top: 7rpx;
left: 6rpx;
border-radius: 72rpx;
}
.info-card {

View File

@ -248,9 +248,10 @@
@confirm="onPopupConfirm" />
<!--============= 电量低于提示弹框=========== -->
<CustomPopup v-if="popupType === 'bettery'" :show="showPopupFlag"
popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage"
icon="/static/images/common/path.png" :confirm-text="popupConfirmText" :show-cancel="true"
@confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage" title="设备电量低于20%"
titleColor="rgba(224, 52, 52, 1)" icon="/static/images/common/path.png" :confirm-text="popupConfirmText"
:show-cancel="true" @cancel="onPopupConfirm" @confirm="onPopupConfirm"
confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
<!-- 解除报警 -->
<CustomPopup v-if="popupType === 'cancel'" :show="showPopupFlag"
popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage"
@ -310,7 +311,9 @@
position: '',
code: '',
},
deviceInfo: {},
deviceInfo: {
},
activePermissions: [], // 存储当前设备的权限数组
isSharedDevice: false, // 标记是否来自分享
@ -882,15 +885,26 @@
this.mqttClient.subscribe(statusTopic, (payload) => {
console.log(`收到来自 ${statusTopic} 的消息:`, payload);
//收到电量上报。延迟20s请求接口数据
setTimeout(() => {
this.fetchDeviceDetail(data.data.id)
}, 20000);
const parsedMessage = typeof payload === 'string' ? JSON.parse(payload) : payload;
const deviceState = parsedMessage.state; // 直接取 state 数组
// ✅ 发送全局事件通知主页面更新
uni.$emit('deviceStatusUpdate', {
message: JSON.stringify(payload), // 消息内容
message: parsedMessage, // 消息内容
timestamp: new Date().getTime() // 时间戳
});
if (deviceState[0] === 12) {
setTimeout(() => {
this.fetchDeviceDetail(data.data.id);
}, 20000);
// 这里判断电量低于20%,弹框提示
if (this.deviceInfo.batteryPercentage < 20) {
this.popupType = 'bettery'
this.popupMessage = '请及时充电';
this.showPopupFlag = true;
}
}
});
});
if (this.apiType === 'listA') {

View File

@ -18,7 +18,8 @@
<image src="/static/images/common/more.png" mode="aspectFit" class="more"></image>
</view>
</view>
<view class="sendFlex" v-if="activeTab && activeTab.id !== ''&& activeTabInfo.communicationMode==0 && activeTabInfo.typeName=='BJQ6170'">
<view class="sendFlex"
v-if="activeTab && activeTab.id !== ''&& activeTabInfo.communicationMode==0 && activeTabInfo.typeName=='BJQ6170'">
<view class="callpolice" @click="callpolice">报警</view>
<view class="Sendmessage" @click="location">位置</view>
<view class="Sendmessage" @click="handleSend">发送信息</view>
@ -29,7 +30,8 @@
<uni-swipe-action ref="swipeAction">
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
<uni-swipe-action-item :right-options="Options"
@click="handleSwipeClick($event, item, index)" class="device-card" :style="{ border: item.communicationMode==0 && item.onlineStatus==1 ? '1px solid rgba(224, 52, 52, 1)' : 'none' }">
@click="handleSwipeClick($event, item, index)" class="device-card"
:style="{ border: item.communicationMode==0 && item.onlineStatus==1 ? '1px solid rgba(224, 52, 52, 1)' : 'none' }">
<view @click.stop="handleFile(item)">
<view class="device-header">
<view class="deviceIMG">
@ -51,7 +53,8 @@
</view>
</view>
</view>
<view class="device-callpolice" v-if="item.communicationMode==0 && item.onlineStatus==1">报警中</view>
<view class="device-callpolice"
v-if="item.communicationMode==0 && item.onlineStatus==1">报警中</view>
<view v-if="item.communicationMode==1">
<view class="device-status online">已连接</view>
<view class="device-status unline">未连接</view>
@ -254,7 +257,6 @@
},
// tab切换页
switchTab(tab, index) {
console.log(tab,'tab');
this.deviceList = [];
this.activeTab = index;
this.activeTabInfo = tab
@ -298,7 +300,7 @@
onScrollToLower() {
this.getData();
},
// 添加扫一图标
// 添加扫一图标
scan() {
this.showTooltip = !this.showTooltip;
},
@ -320,7 +322,6 @@
},
// 右滑点击事件处理
handleSwipeClick(e, item, index) {
const {
content
} = e
@ -405,7 +406,7 @@
})
},
// 报警
callpolice(){
callpolice() {
const currentTab = this.tabs[this.activeTab];
const deviceType = currentTab.id || '';
console.log(`跳转到发送信息页面\n当前设备类型: ${deviceType}\n设备类型名称: ${currentTab.typeName}`);
@ -445,7 +446,6 @@
})
},
handleFile(item) {
console.log('item', item);
// communicationMode 0是4G 1是蓝牙,考虑多个4g设备
if (item.typeName == 'BJQ6170') {
uni.navigateTo({
@ -473,7 +473,7 @@
// 页面跳转成功后的回调函数
res.eventChannel.emit('deviceControl', {
data: item,
deviceType:deviceType
deviceType: deviceType
});
}
})
@ -500,17 +500,25 @@
updateDeviceStatus(data) {
// 只更新 communicationMode == 0 的设备
this.deviceList = this.deviceList.map(item => {
console.log(item, 'item2222');
if (item.communicationMode === 0) {
// 这里根据消息内容更新设备状态
// 示例:如果消息包含特定字段,则更新设备状态
console.log(item,'item444');
if (item.communicationMode == 0) {
console.log(item, 'item2222');
let messageData;
try {
messageData = data.message; // 双重解析(如果消息被转义)
} catch (e) {
return item; // 解析失败则不更新
}
const [deviceId, onlineStatus, batteryPercentage] = messageData.state || [];
// 只更新电量 & 在线状态(避免覆盖其他字段)
return {
...item,
status: data.message.status || item.status, // 假设消息中有status字段
batteryPercentage: batteryPercentage ?? item.batteryPercentage, // 如果新电量有效则更新,否则保留旧值
onlineStatus: onlineStatus ?? item.onlineStatus, // 如果新状态有效则更新,否则保留旧值
lastUpdate: data.timestamp // 更新时间戳
};
return item;
}
return item;
});
}
},
@ -616,6 +624,7 @@
width: 40rpx;
height: 8rpx;
}
.Sendmessage {
margin-left: 50rpx;
color: rgba(255, 255, 255, 0.87);
@ -662,19 +671,21 @@
position: relative;
}
.device-callpolice{
width: 122rpx;
height: 52rpx;
font-size: 24rpx;
border-radius: 0px 8px 0px 8px;
background-color: rgba(224, 52, 52, 1);
position: absolute;
top: 0rpx;
right: -4rpx;
text-align: center;
line-height: 52rpx;
color: #fff;
}
.device-callpolice {
width: 122rpx;
height: 52rpx;
font-size: 24rpx;
border-radius: 0px 8px 0px 8px;
background-color: rgba(224, 52, 52, 1);
position: absolute;
top: 0rpx;
right: -4rpx;
text-align: center;
line-height: 52rpx;
color: #fff;
}
.device-status {
width: 122rpx;
height: 52rpx;
@ -747,9 +758,11 @@
top: 20rpx;
left: -20rpx
}
.offlines{
.offlines {
position: relative;
}
.offlines::before {
content: '';
position: absolute;