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: { titlePadding: {
type: String, type: String,
default: '30rpx 0 10rpx' default: '10rpx 0 10rpx'
}, },
// 消息样式自定义 // 消息样式自定义

View File

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

View File

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

View File

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